/** Shopify CDN: Minification failed

Line 6975:22 Unexpected "{"
Line 6975:31 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-essay (INDEX:1) */
.hl-about-essay {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-about-essay > * { margin-left: auto; margin-right: auto; }
  .hl-about-essay__lead {
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 24px;
  }
  .hl-about-essay__lead p { margin: 0 0 22px; }
  .hl-about-essay__lead p:last-child { margin-bottom: 0; }
  .hl-about-essay__body {
    line-height: 1.85;
    color: var(--ink-muted);
  }
  .hl-about-essay__body p { margin: 0 0 22px; }
  .hl-about-essay__body p:last-child { margin-bottom: 0; }
/* END_SECTION:about-essay */

/* START_SECTION:about-hero (INDEX:2) */
.hl-about-hero {
    position: relative;
    overflow: hidden;
    background: var(--ph-bg-3);
  }
  .hl-about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) var(--overlay-gradient-start, 30%), var(--overlay-color, #0F0F0F) 100%);
    opacity: var(--overlay-to, 0.65);
    pointer-events: none;
  }
  .hl-about-hero__copy {
    position: absolute;
    padding: var(--copy-pad, 48px);
    color: var(--text-color, #fff);
    max-width: var(--copy-max-width, 900px);
  }
  /* Vertical anchors */
  .hl-about-hero--v-top    .hl-about-hero__copy { top: 0; bottom: auto; }
  .hl-about-hero--v-center .hl-about-hero__copy { top: 50%; transform: translateY(-50%); }
  .hl-about-hero--v-bottom .hl-about-hero__copy { bottom: 0; top: auto; }
  /* Horizontal anchors */
  .hl-about-hero--h-left   .hl-about-hero__copy { left: 0; right: auto; }
  .hl-about-hero--h-right  .hl-about-hero__copy { right: 0; left: auto; text-align: right; }
  .hl-about-hero--h-center .hl-about-hero__copy { left: 50%; transform: translateX(-50%); text-align: center; }
  .hl-about-hero--h-center.hl-about-hero--v-center .hl-about-hero__copy { transform: translate(-50%, -50%); }

  .hl-about-hero__eyebrow {
    color: var(--text-color, #fff);
    opacity: 0.85;
    margin-bottom: 14px;
  }
  .hl-about-hero__heading {
    font-size: var(--heading-fs, 96px);
    line-height: 0.95;
    margin: 0;
    color: var(--text-color, #fff);
    max-width: 900px;
  }
  .hl-about-hero__sub {
    color: var(--text-color, #fff);
    opacity: 0.9;
    margin: 16px 0 0;
    line-height: 1.7;
    max-width: 540px;
  }
  .hl-about-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--text-color, #fff);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-about-hero__cta:hover { opacity: 0.85; }

  @media (max-width: 767px) {
    .hl-about-hero { aspect-ratio: var(--aspect-m, 16/9) !important; }
    .hl-about-hero__copy { padding: var(--copy-pt-m, var(--copy-pad-m, 24px)) var(--copy-px-m, var(--copy-pad-m, 24px)) var(--copy-pb-m, var(--copy-pad-m, 24px)); }
    .hl-about-hero__heading { font-size: var(--heading-fs-m, 36px); }
    .hl-about-hero__sub { font-size: var(--sub-fs-m, 14px); }
  }
/* END_SECTION:about-hero */

/* START_SECTION:about-press (INDEX:3) */
.hl-about-press {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-about-press__heading {
    font-size: var(--heading-size, 42px);
    line-height: 1;
    margin: 0 0 var(--heading-margin-bottom, 32px);
  }
  .hl-about-press__row {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    gap: var(--gap, 32px);
    align-items: center;
    justify-items: center;
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-style: italic;
    color: var(--ink-muted);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-about-press__row { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  }
  @media (max-width: 767px) {
    .hl-about-press { padding-left: 20px !important; padding-right: 20px !important; }
    .hl-about-press__heading { font-size: var(--heading-size-mobile, 26px); }
  }
/* END_SECTION:about-press */

/* START_SECTION:about-principles (INDEX:4) */
.hl-about-principles {
    display: grid;
    background: var(--bg);
    color: var(--ink);
  }
  .hl-about-principles__col {
    border-top: 2px solid var(--ink);
    padding-top: 24px;
  }
  .hl-about-principles__num {
    line-height: 1;
    margin-bottom: 14px;
  }
  .hl-about-principles__body {
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-about-principles { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  }
  @media (max-width: 767px) {
    .hl-about-principles { padding-left: 20px !important; padding-right: 20px !important; grid-template-columns: 1fr !important; gap: 24px !important; }
  }
/* END_SECTION:about-principles */

/* START_SECTION:about-stats (INDEX:5) */
.hl-about-stats {
    background: var(--bg);
    color: var(--ink);
    display: grid;
  }
  .hl-about-stats--align-center { text-align: center; }
  .hl-about-stats--align-right { text-align: right; }
  .hl-about-stats__head {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }
  .hl-about-stats__eyebrow { margin-bottom: 10px; }
  .hl-about-stats__heading { margin: 0 0 12px; }
  .hl-about-stats__intro { color: var(--ink-muted); opacity: 0.8; line-height: 1.7; }
  .hl-about-stats__num {
    font-size: var(--num-size, 96px);
    line-height: 1;
    color: var(--accent);
  }
  .hl-about-stats__label {
    opacity: 0.85;
    margin-top: 14px;
  }
  .hl-about-stats__body {
    color: var(--ink-muted);
    opacity: 0.7;
    margin-top: 10px;
    line-height: 1.7;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-about-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
  }
  @media (max-width: 767px) {
    .hl-about-stats { padding-left: 20px !important; padding-right: 20px !important; grid-template-columns: 1fr !important; gap: 24px !important; }
    .hl-about-stats__num { font-size: var(--num-size-mobile, 54px); }
  }
/* END_SECTION:about-stats */

/* START_SECTION:announcement-bar (INDEX:6) */
.hl-announcement {
    overflow: hidden;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--bg);
    color: var(--ink);
    position: relative;
  }

  /* MARQUEE MODE */
  .hl-announcement--marquee[data-pause-on-hover="true"]:hover .hl-announcement__track { animation-play-state: paused; }
  .hl-announcement__track {
    display: inline-flex;
    gap: var(--marquee-gap, 48px);
    animation: hl-marquee var(--marquee-duration, 28s) linear infinite;
    white-space: nowrap;
    padding-right: var(--marquee-gap, 48px);
  }
  .hl-announcement__msg { color: inherit; text-decoration: none; }
  .hl-announcement__msg:hover { text-decoration: underline; text-underline-offset: 4px; }
  .hl-announcement__sep { opacity: 0.6; }

  /* SLIDER MODE */
  .hl-announcement--slider .hl-announcement__slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 1.4em;
    padding: 0 12px;
  }
  .hl-announcement--slider .hl-announcement__slides {
    flex: 1;
    position: relative;
    text-align: center;
    min-height: 1.4em;
  }
  .hl-announcement__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
  }
  .hl-announcement__slide.is-active { opacity: 1; pointer-events: auto; position: relative; }

  /* Arrows */
  .hl-announcement__arrow {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 200ms ease;
    flex-shrink: 0;
  }
  .hl-announcement__arrow:hover { opacity: 1; }

  /* Dots */
  .hl-announcement__dots {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
  }
  .hl-announcement__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    border: 0;
    opacity: 0.35;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hl-announcement__dot.is-active { opacity: 1; transform: scale(1.4); }

  @media (max-width: 767px) {
    .hl-announcement__track {
      animation-duration: calc(var(--marquee-duration, 28s) * 0.65);
    }
    .hl-announcement--slider .hl-announcement__slider { padding: 0 6px; gap: 8px; }
    .hl-announcement__arrow { padding: 2px 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hl-announcement__track { animation: none; }
    .hl-announcement__slide { transition: none; }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-announcement__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px var(--shadow-color-soft, rgba(0,0,0,0.12)) !important;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article-content (INDEX:7) */
.hl-article-body {
    margin: 0 auto;
    line-height: 1.85;
    background: var(--bg);
    color: var(--ink-soft);
  }
  .hl-prose p { margin: 0 0 22px; }
  .hl-prose p:first-child {
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 28px;
    font-weight: 500;
  }
  .hl-prose h2 {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 48px 0 18px;
    line-height: 1.1;
    color: var(--ink);
  }
  .hl-prose h3 {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 36px 0 14px;
    line-height: 1.2;
    color: var(--ink);
  }
  .hl-prose blockquote {
    margin: 48px 0;
    padding: 32px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: 36px;
    line-height: 1.2;
    color: var(--ink);
  }
  .hl-prose img { width: 100%; height: auto; margin: 32px 0; }
  .hl-prose ul, .hl-prose ol { padding-left: 22px; margin: 0 0 22px; line-height: 2; }
  .hl-prose a { color: var(--accent); text-decoration: underline; }
  .hl-article-share {
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    padding: 22px 0;
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  @media (max-width: 767px) {
    .hl-article-body { padding-left: 20px !important; padding-right: 20px !important; }
  }
/* END_SECTION:article-content */

/* START_SECTION:article-hero (INDEX:8) */
.hl-article-hero-wrap { background: var(--bg); color: var(--ink); }
  .hl-article-hero {
    padding: 48px 36px 32px;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }
  .hl-article-hero__heading {
    line-height: 1.02;
    margin: 0 0 24px;
  }
  .hl-article-hero__meta {
    display: flex;
    gap: 14px;
    justify-content: center;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
  }
  .hl-article-hero__image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ph-bg-3);
    margin: 0 36px 48px;
  }
  @media (max-width: 767px) {
    .hl-article-hero { padding: 24px 20px 20px; }
    .hl-article-hero__heading { font-size: 36px; }
    .hl-article-hero__image { margin: 0 20px 24px; }
  }
/* END_SECTION:article-hero */

/* START_SECTION:article-related (INDEX:9) */
.hl-article-related {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-article-related__head { margin-bottom: 32px; }
  .hl-article-related__heading {
    font-size: var(--hl-heading-size, 42px);
    line-height: 1;
    margin: 0;
  }
  .hl-article-related__items {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--gap, 32px);
  }
  .hl-article-related__items .card .mid { color: var(--button-fg, #FFFFFF); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-article-related__items { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  }
  @media (max-width: 767px) {
    .hl-article-related__heading { font-size: 26px; }
    .hl-article-related__items { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Auto-generated mobile typography overrides */
    .hl-article-related__heading { font-size: 24px; }

  }
/* END_SECTION:article-related */

/* START_SECTION:before-after (INDEX:10) */
.hl-before-after { background: var(--bg); color: var(--ink); }
  .hl-ba__frame {
    position: relative;
    overflow: hidden;
    user-select: none;
    width: 100%;
    background: var(--ph-bg);
  }
  .hl-ba__layer { position: absolute; inset: 0; }
  .hl-ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hl-ba__layer--before { clip-path: inset(0 50% 0 0); transition: clip-path 80ms linear; }
  .hl-ba__divider {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: left 80ms linear;
    z-index: 4;
  }
  .hl-ba__line { height: 100%; }
  .hl-ba__handle {
    border-radius: 50%;
    border: 0;
    cursor: grab;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  }
  .hl-ba__handle:active { cursor: grabbing; }
  .hl-ba__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 5;
    margin: 0;
  }
  .hl-ba__label {
    position: absolute;
    bottom: 14px;
  }
  .hl-ba__label--left  { left: 14px; }
  .hl-ba__label--right { right: 14px; }
/* END_SECTION:before-after */

/* START_SECTION:blog-featured (INDEX:11) */
.hl-blog-featured {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    background: var(--bg);
    color: var(--ink);
  }
  .hl-blog-featured__image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ph-bg-3);
    display: block;
  }
  .hl-blog-featured__heading {
    line-height: 1;
    margin: 0 0 18px;
  }
  .hl-blog-featured__excerpt {
    color: var(--ink-soft);
    line-height: 1.8;
    margin: 0 0 24px;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-blog-featured { grid-template-columns: 1.2fr 1fr; gap: 32px; }
  }
  @media (max-width: 767px) {
    .hl-blog-featured { grid-template-columns: 1fr; gap: 24px; }
  }
/* END_SECTION:blog-featured */

/* START_SECTION:blog-grid (INDEX:12) */
.hl-blog-grid { background: var(--bg); color: var(--ink); }
  .hl-blog-grid__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hl-blog-grid__heading { font-size: 42px; line-height: 1; margin: 0; }
  .hl-blog-grid__viewall {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-blog-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--gap, 32px);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-blog-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  }
  @media (max-width: 767px) {
    .hl-blog-grid__heading { font-size: 26px; }
    .hl-blog-grid__items { grid-template-columns: 1fr !important; gap: 24px !important; }
  }
/* END_SECTION:blog-grid */

/* START_SECTION:blog-hero (INDEX:13) */
.hl-blog-hero { background: var(--bg); color: var(--ink); }
  .hl-blog-hero__heading {
    line-height: 0.95;
    margin: 0 0 16px;
  }
  .hl-blog-hero__body {
    color: var(--ink-soft);
    margin: 0 auto;
    line-height: 1.7;
  }
  .hl-blog-hero__chips {
    padding: 0 36px 24px;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 24px;
  }
  @media (max-width: 767px) {
    .hl-blog-hero__chips { padding: 0 20px 18px; padding-bottom: 18px; }
  }
/* END_SECTION:blog-hero */

/* START_SECTION:blog-posts (INDEX:14) */
.hl-blog-posts { background: var(--bg); color: var(--ink); }
  .hl-blog-posts__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hl-blog-posts--head-left   .hl-blog-posts__head { justify-content: flex-start; }
  .hl-blog-posts--head-center .hl-blog-posts__head { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
  .hl-blog-posts--head-right  .hl-blog-posts__head { justify-content: flex-end;  text-align: right; }
  .hl-blog-posts__heading { font-size: var(--heading-fs, 42px); }
  .hl-blog-posts__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-d, 3), 1fr);
    gap: var(--gap, 32px);
  }
  /* Reveal-on-scroll */
  .hl-blog-posts .hl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: var(--delay, 0ms);
  }
  .hl-blog-posts .hl-reveal.is-in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .hl-blog-posts .hl-reveal { opacity: 1; transform: none; transition: none; }
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-blog-posts__grid { grid-template-columns: repeat(var(--cols-t, 2), 1fr); gap: 20px; }
  }
  @media (max-width: 767px) {
    .hl-blog-posts {
      padding-top:    var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left:   var(--px-m, 20px) !important;
      padding-right:  var(--px-m, 20px) !important;
    }
    .hl-blog-posts__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-blog-posts__grid { grid-template-columns: repeat(var(--cols-m, 1), 1fr); gap: var(--gap-m, 24px); }
  }
/* END_SECTION:blog-posts */

/* START_SECTION:cart-drawer (INDEX:15) */
/* Right-side drawer panel only — no overlay, page stays fully visible. */
  .hl-cart-drawer {
    pointer-events: none; /* let clicks fall through to the page */
  }
  .hl-cart-drawer.open { pointer-events: none; } /* stays click-through */
  .hl-cart-drawer .hl-drawer-overlay { display: none; }
  .hl-cart-drawer .hl-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--drawer-width, 440px), 100vw);
    overflow-y: auto;
    background: var(--bg);
    color: var(--ink);
    box-shadow: -8px 0 32px rgba(15, 15, 15, 0.12);
    transform: translateX(100%);
    transition: transform 350ms cubic-bezier(.7, 0, .3, 1);
    pointer-events: auto; /* but the panel itself catches clicks */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
  }
  .hl-cart-drawer .hl-drawer-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .hl-cart-drawer.open .hl-drawer-panel { transform: translateX(0); }
  .hl-cd__head { display: flex; justify-content: space-between; align-items: center; }
  .hl-cd__close { background: transparent; border: none; cursor: pointer; font-size: 20px; color: inherit; padding: 0; }
  .hl-cd__shipbar {
    background: var(--surface);
    padding: 12px 14px;
    font-size: 11px;
    margin-bottom: 8px;
  }
  .hl-cd__shipbar--unlocked { font-weight: 500; }
  .hl-cd__progress { height: 3px; background: rgba(127,127,127,0.18); margin-bottom: 24px; position: relative; overflow: hidden; }
  .hl-cd__progress > div { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
  .hl-cd__empty { padding: 32px 0; text-align: center; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
  .hl-cd__empty-cta { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: 14px; display: inline-block; }
  .hl-cd__item { display: grid; gap: 14px; }
  .hl-cd__item-img { overflow: hidden; display: block; background: var(--ph-bg); }
  .hl-cd__item-img img { width: 100%; height: 100%; object-fit: cover; }
  .hl-cd__item-meta { display: flex; flex-direction: column; gap: 6px; }
  .hl-cd__item-title { display: block; color: inherit; text-decoration: none; }
  .hl-cd__item-options { font-size: 10px; color: var(--ink-muted); }
  .hl-cd__item-sku { font-size: 10px; color: var(--ink-muted); }
  .hl-cd__item-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .hl-cd__qty input[data-line-quantity] {
    width: 36px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    padding: 0;
    -moz-appearance: textfield;
  }
  .hl-cd__qty input[data-line-quantity]::-webkit-outer-spin-button,
  .hl-cd__qty input[data-line-quantity]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .hl-cd__remove {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hl-cd__remove:hover { color: var(--accent); }
  .hl-cd__item-price { font-size: 13px; font-weight: 500; text-align: right; }

  .hl-cd__upsell { border-top: 1px solid var(--border-2); padding: 18px 0; margin-top: 14px; }
  .hl-cd__upsell-label { color: var(--ink-muted); margin-bottom: 14px; }
  .hl-cd__upsell-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
  .hl-cd__upsell-row + .hl-cd__upsell-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-2); }
  .hl-cd__upsell-img { aspect-ratio: 1; overflow: hidden; display: block; background: var(--ph-bg); }
  .hl-cd__upsell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hl-cd__upsell-meta .mid { font-size: 12px; display: block; color: inherit; text-decoration: none; }
  .hl-cd__upsell-price { font-size: 10px; color: var(--ink-muted); margin-top: 2px; }
  .hl-cd__upsell-add { padding: 6px 10px; font-size: 9px; }

  .hl-cd__note summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
    border-top: 1px solid var(--border-2);
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }
  .hl-cd__note summary::-webkit-details-marker { display: none; }
  .hl-cd__note summary:hover { color: var(--ink); }
  .hl-cd__note textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    font: inherit;
    font-size: 12px;
    color: inherit;
    resize: vertical;
  }

  .hl-cd__totals { border-top: 1px solid var(--border-2); padding-top: 18px; margin-top: 18px; }
  .hl-cd__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .hl-cd__subtotal .mid { font-size: 14px; }
  .hl-cd__taxline { font-size: 11px; color: var(--ink-muted); margin-bottom: 14px; letter-spacing: 0.04em; }
  .hl-cd__checkout { width: 100%; justify-content: center; padding: 16px; }
  .hl-cd__checkout-helper { text-align: center; margin-top: 12px; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; }
  .hl-cd__view-cart-btn,
  .hl-cd__continue-btn {
    width: 100%;
    justify-content: center;
    padding: 16px;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .hl-cd__pay { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; opacity: 0.6; }
  .hl-cd__pay-icon { width: 28px; height: 18px; }
  .hl-cd__trust { text-align: center; margin-top: 14px; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; line-height: 1.6; }
  @media (prefers-reduced-motion: reduce) {
    .hl-cart-drawer .hl-drawer-panel { transition: none; }
  }

  /* Mobile responsiveness — drawer fills viewport on phones */
  @media (max-width: 767px) {
    .hl-cart-drawer .hl-drawer-panel {
      width: 100% !important;
      max-width: 100% !important;
    }
    .hl-cd__head { padding: 16px 18px !important; }
    .hl-cd__body { padding: 16px 18px !important; }
    .hl-cd__footer { padding: 16px 18px !important; }
    .hl-cd__upsell-row {
      grid-template-columns: 44px 1fr auto;
      gap: 10px;
    }
    .hl-cd__qty { padding: 4px 6px; }
    .hl-cd__qty button { min-width: 44px; min-height: 44px; padding: 0 10px; }
    .hl-cd__remove { font-size: 11px; }
    .hl-cd__checkout, .hl-cd__view-cart-btn, .hl-cd__continue-btn { padding: 14px; font-size: 13px; }
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:cart-main (INDEX:16) */
details summary { display: flex; justify-content: space-between; align-items: center; }
  details summary::-webkit-details-marker { display: none; }
  details[open] summary .ti-plus { transform: rotate(45deg); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-cart-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .hl-cart-main { padding-left: 32px !important; padding-right: 32px !important; }
  }
  @media (max-width: 767px) {
    .hl-cart-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  }
/* END_SECTION:cart-main */

/* START_SECTION:cart-mending (INDEX:17) */
.hl-mending__panel { background: var(--ink); color: var(--bg); }
  .hl-mending__title { color: var(--bg); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-mending-grid { grid-template-columns: 1.4fr 1fr !important; gap: 24px !important; }
  }
  @media (max-width: 767px) {
    .hl-mending-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  }
/* END_SECTION:cart-mending */

/* START_SECTION:cart-recommendations (INDEX:18) */
.hl-cart-recs { background: var(--bg); position: relative; }
  .hl-cart-recs__head { margin-bottom: 32px; }
  .hl-cart-recs__heading { line-height: 1; margin: 0; }
  .hl-cart-recs__grid {
    display: grid;
    grid-template-columns: repeat(var(--rc-cols, 4), 1fr);
    gap: var(--rc-gap, 20px);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-cart-recs__grid { grid-template-columns: repeat(var(--rc-cols-t, 3), 1fr); gap: 16px; }
  }
  @media (max-width: 767px) {
    .hl-cart-recs__grid { grid-template-columns: repeat(var(--rc-cols-m, 2), 1fr); gap: var(--rc-gap-m, 12px); }
  }

  /* === Slider mode (desktop + mobile) === */
  .hl-cart-recs--layout-slider .hl-cart-recs__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--rc-slide-gap, 16px) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .hl-cart-recs--layout-slider .hl-cart-recs__grid::-webkit-scrollbar { display: none; }
  .hl-cart-recs--layout-slider .hl-cart-recs__grid > * {
    flex: 0 0 calc((100% - var(--rc-slide-gap, 16px) * (var(--rc-per-view, 4) - 1)) / var(--rc-per-view, 4));
    scroll-snap-align: start;
    min-width: 0;
    box-sizing: border-box;
  }

  /* === Force slider on mobile only (default for cart recs) === */
  @media (max-width: 767px) {
    .hl-cart-recs--force-slider-m:not(.hl-cart-recs--layout-slider) .hl-cart-recs__grid {
      display: flex !important;
      grid-template-columns: none !important;
      gap: var(--rc-slide-gap, 16px) !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding: 4px 0 16px;
      -webkit-overflow-scrolling: touch;
    }
    .hl-cart-recs--force-slider-m:not(.hl-cart-recs--layout-slider) .hl-cart-recs__grid::-webkit-scrollbar { display: none; }
    .hl-cart-recs--force-slider-m:not(.hl-cart-recs--layout-slider) .hl-cart-recs__grid > * {
      flex: 0 0 calc((100% - var(--rc-slide-gap, 16px) * (var(--rc-per-view-m, 2) - 1)) / var(--rc-per-view-m, 2));
      scroll-snap-align: start;
      min-width: 0;
      box-sizing: border-box;
    }
    .hl-cart-recs--layout-slider .hl-cart-recs__grid > * {
      flex: 0 0 calc((100% - var(--rc-slide-gap, 16px) * (var(--rc-per-view-m, 2) - 1)) / var(--rc-per-view-m, 2));
    }
  }

  /* === Slider nav (dots + arrows) === */
  .hl-cart-recs__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
  .hl-cart-recs--controls-stacked .hl-cart-recs__nav { flex-direction: column; gap: 14px; }
  .hl-cart-recs--controls-dots-only .hl-cart-recs__arrows { display: none !important; }
  .hl-cart-recs--controls-arrows-only .hl-cart-recs__dots { display: none !important; }
  .hl-cart-recs__nav--mobile-only { display: none; }

  .hl-cart-recs__dots { display: inline-flex; gap: 8px; }
  .hl-cart-recs__dot {
    width: 8px; height: 8px;
    background: var(--ink);
    opacity: 0.25;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hl-cart-recs__dot:hover { opacity: 0.6; }
  .hl-cart-recs__dot.is-active { opacity: 1; transform: scale(1.3); }

  .hl-cart-recs__arrows { display: inline-flex; gap: 8px; }
  .hl-cart-recs__arrow {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-color, currentColor);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease;
  }
  .hl-cart-recs__arrow:hover { background: var(--ink); color: var(--bg); }

  @media (max-width: 767px) {
    .hl-cart-recs--force-slider-m .hl-cart-recs__nav--mobile-only { display: flex !important; }
    .hl-cart-recs__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
    .hl-cart-recs__nav {
      flex-direction: column !important;
      gap: 12px !important;
    }
  }
/* END_SECTION:cart-recommendations */

/* START_SECTION:collection-banner (INDEX:19) */
.hl-collection-banner-wrap { background: var(--bg); color: var(--ink); position: relative; }
  .hl-collection-banner-wrap--has-bg {
    color: var(--banner-text-color, #fff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hl-collection-banner-wrap--has-bg .crumb,
  .hl-collection-banner-wrap--has-bg .crumb a,
  .hl-collection-banner-wrap--has-bg .eyebrow,
  .hl-collection-banner-wrap--has-bg .eyebrow-muted,
  .hl-collection-banner-wrap--has-bg .hl-collection-banner__desc { color: var(--banner-body-color, rgba(255, 255, 255, 0.85)); }
  .hl-collection-banner { display: grid; gap: 32px; }
  .hl-collection-banner__heading { word-break: break-word; overflow-wrap: anywhere; }

  /* Breadcrumb: spacing varies by position, alignment is overridable */
  .hl-collection-banner__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .hl-collection-banner__crumb-sep { opacity: 0.55; }
  .hl-collection-banner__crumb--pos-top           { padding: 0 0 14px; }
  .hl-collection-banner__crumb--pos-above-eyebrow { padding: 0 0 14px; }
  .hl-collection-banner__crumb--pos-above-heading { padding: 0 0 14px; }
  .hl-collection-banner__crumb--pos-below-heading { padding: 14px 0 6px; }
  .hl-collection-banner__crumb--pos-below-body    { padding: 14px 0 0; }
  .hl-collection-banner__crumb--pos-bottom        { padding: 22px 0 0; }
  /* Explicit alignment overrides */
  .hl-collection-banner__crumb--align-left   { justify-content: flex-start; }
  .hl-collection-banner__crumb--align-center { justify-content: center; }
  .hl-collection-banner__crumb--align-right  { justify-content: flex-end; }
  /* "inherit" follows the content alignment chosen for the banner;
     we wire that up in the section-scoped <style> block at the top. */
/* END_SECTION:collection-banner */

/* START_SECTION:collection-craft-cta (INDEX:20) */
.hl-craft-cta {
    background: var(--bg);
    color: var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .hl-craft-cta__heading {
    line-height: 1;
    margin: 0 0 16px;
  }
  .hl-craft-cta__body {
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 24px;
    opacity: 0.8;
    max-width: 420px;
  }
  .hl-craft-cta__cta {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-craft-cta__image { aspect-ratio: 16/9; overflow: hidden; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-craft-cta { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  }
  @media (max-width: 767px) {
    .hl-craft-cta { grid-template-columns: 1fr !important; gap: 32px !important; }
  }
  @media (max-width: 767px) {
    .hl-craft-cta { padding-left: 20px !important; padding-right: 20px !important; padding-top: 36px !important; padding-bottom: 36px !important; }
    .hl-craft-cta__heading { font-size: 28px !important; }
  }
/* END_SECTION:collection-craft-cta */

/* START_SECTION:collection-grid (INDEX:21) */
.hl-grid { background: var(--bg); color: var(--ink); }

  /* Sidebar-filter layout (desktop only). Mobile/tablet hide the sidebar. */
  .hl-grid__layout { display: block; }
  .hl-grid__main   { min-width: 0; }

  @media (min-width: 1024px) {
    .hl-grid--has-sidebar .hl-grid__layout {
      display: grid;
      gap: var(--sidebar-gap, 40px);
      align-items: start;
    }
    .hl-grid--has-sidebar.hl-grid--sidebar-left  .hl-grid__layout { grid-template-columns: var(--sidebar-w, 260px) minmax(0, 1fr); }
    .hl-grid--has-sidebar.hl-grid--sidebar-right .hl-grid__layout { grid-template-columns: minmax(0, 1fr) var(--sidebar-w, 260px); }
    .hl-grid--has-sidebar.hl-grid--sidebar-right .hl-grid__sidebar { order: 2; }
    .hl-grid--has-sidebar .hl-grid__sidebar {
      position: sticky;
      top: 100px;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      padding-right: 4px;
    }
  }
  @media (max-width: 1023px) {
    .hl-grid__sidebar { display: none !important; }
  }

  .hl-grid__sidebar-heading {
    margin-bottom: 16px;
    color: var(--ink-muted);
  }
  .hl-grid__sidebar-form  { display: flex; flex-direction: column; }
  .hl-grid__sidebar-group {
    border-bottom: 1px solid var(--border-2, rgba(127,127,127,0.18));
  }
  .hl-grid__sidebar-group:first-of-type { border-top: 1px solid var(--border-2, rgba(127,127,127,0.18)); }
  .hl-grid__sidebar-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-grid__sidebar-summary::-webkit-details-marker { display: none; }
  .hl-grid__sidebar-summary .ti { transition: transform 200ms ease; font-size: 16px; }
  .hl-grid__sidebar-group[open] .hl-grid__sidebar-summary .ti { transform: rotate(180deg); }
  .hl-grid__sidebar-body { padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
  .hl-grid__sidebar-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
  }
  .hl-grid__sidebar-opt input[type="checkbox"] {
    accent-color: var(--ink);
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  .hl-grid__sidebar-opt input:disabled + span { opacity: 0.4; }
  .hl-grid__sidebar-count { color: var(--ink-muted); font-size: 11px; margin-left: 2px; }
  /* Sidebar price range — 2 equal-width inputs side by side, separator hidden,
     Apply button on its own row below. Sidebar is desktop-only (≥1024px) by
     design; on smaller viewports the mobile drawer filter takes over. */
  .hl-grid__sidebar-range {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-wrap: initial !important;
  }
  .hl-grid__sidebar-range > span { display: none !important; }
  .hl-grid__sidebar-num {
    min-width: 0 !important;
    width: 100% !important;
    flex: initial !important;
    border: 1px solid var(--border-2, rgba(127,127,127,0.32));
    background: transparent;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    -moz-appearance: textfield;  /* Hide spinner in Firefox */
  }
  /* Hide spinner in Chrome/Safari/Edge */
  .hl-grid__sidebar-num::-webkit-outer-spin-button,
  .hl-grid__sidebar-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .hl-grid__sidebar-num:focus {
    outline: none;
    border-color: var(--ink);
  }
  .hl-grid__sidebar-apply {
    grid-column: 1 / -1;
    padding: 12px 14px;
    font-size: 11px;
    justify-content: center;
    letter-spacing: 0.12em;
  }
  .hl-grid__sidebar-clear {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    align-self: flex-start;
  }
  .hl-grid__sidebar-clear:hover { color: var(--ink); }

  /* Search & Discovery — swatch / image filter presentation */
  .hl-grid__sidebar-opt--swatch,
  .hl-grid__sidebar-opt--image {
    align-items: center;
    gap: 12px;
  }
  .hl-grid__sidebar-opt--swatch input[type="checkbox"],
  .hl-grid__sidebar-opt--image input[type="checkbox"] { display: none; }
  .hl-grid__sidebar-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-2, rgba(127,127,127,0.32));
    flex-shrink: 0;
    position: relative;
    transition: transform 200ms ease;
  }
  .hl-grid__sidebar-swatch--img { overflow: hidden; }
  .hl-grid__sidebar-swatch--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hl-grid__sidebar-opt--swatch input:checked + .hl-grid__sidebar-swatch,
  .hl-grid__sidebar-opt--image  input:checked + .hl-grid__sidebar-swatch {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
  }
  .hl-grid__sidebar-opt--swatch:hover .hl-grid__sidebar-swatch,
  .hl-grid__sidebar-opt--image:hover .hl-grid__sidebar-swatch { transform: scale(1.08); }

  /* Show-more (collapses long filter lists) */
  .hl-grid__sidebar-opt.is-overflow { display: none; }
  .hl-grid__sidebar-group.is-expanded .hl-grid__sidebar-opt.is-overflow { display: flex; }
  .hl-grid__sidebar-more {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    padding: 6px 0;
    align-self: flex-start;
  }

  /* In-filter search field */
  .hl-grid__sidebar-search {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: transparent;
    border: 1px solid var(--border-2, rgba(127,127,127,0.22));
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    outline: none;
  }
  .hl-grid__sidebar-search:focus { border-color: var(--ink); }
  .hl-grid__sidebar-opt.is-hidden { display: none; }

  .hl-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 20px);
  }
  .hl-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
  }
  .hl-grid__pagination {
    text-align: center;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
  }
  .hl-grid__count {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .hl-grid__progress-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
  }
  .hl-grid__progress {
    width: 200px;
    height: 2px;
    background: var(--border-2);
    position: relative;
  }
  .hl-grid__progress > div {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--ink);
  }
  .hl-grid__pages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .hl-grid__page-link {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid transparent;
  }
  .hl-grid__page-link:hover { border-color: var(--border-2); }
  .hl-grid__page-link.is-current {
    border-color: var(--ink);
    font-weight: 500;
  }

  .hl-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: hlReveal 600ms ease forwards;
    animation-delay: var(--delay, 0ms);
  }
  @keyframes hlReveal {
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-grid__items { grid-template-columns: repeat(var(--cols-tablet, 2), 1fr) !important; gap: 18px !important; }
    .hl-grid__empty-heading { font-size: 28px; }
  }
  @media (max-width: 767px) {
    .hl-grid__items { grid-template-columns: repeat(var(--cols-mobile, 2), 1fr) !important; gap: var(--gap-mobile, 12px) !important; }
    .hl-grid__page-link { padding: 10px 14px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .hl-grid__empty-heading { font-size: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-reveal { animation: none; opacity: 1; transform: none; }
  }
/* END_SECTION:collection-grid */

/* START_SECTION:collection-list-grid (INDEX:22) */
.hl-cl-grid__items { display: grid; }
  .hl-cl-grid__card { display: block; color: inherit; }
  .hl-cl-grid__img {
    aspect-ratio: var(--ratio, 4/5);
    overflow: hidden;
    background: var(--ph-bg);
  }
  .hl-cl-grid__eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 6px;
  }
  .hl-cl-grid__subtitle {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.75;
    margin-top: 4px;
  }
  .hl-cl-grid__card:hover .hl-cl-grid__arrow { color: var(--ink); transform: translateX(4px); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-cl-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  }
  @media (max-width: 767px) {
    .hl-cl-grid { padding-left: 20px !important; padding-right: 20px !important; }
    .hl-cl-grid__items { grid-template-columns: repeat(var(--cols-mobile, 1), 1fr) !important; }
  }
/* END_SECTION:collection-list-grid */

/* START_SECTION:collection-tabs (INDEX:23) */
.hl-tabs { background: var(--bg); color: var(--ink); }

  /* Nav wrapper centers/aligns the inline-flex container based on tab_align */
  .hl-tabs__nav-outer {
    display: flex;
    margin-bottom: 28px;
  }
  .hl-tabs--align-left   .hl-tabs__nav-outer { justify-content: flex-start; }
  .hl-tabs--align-center .hl-tabs__nav-outer { justify-content: center; }
  .hl-tabs--align-right  .hl-tabs__nav-outer { justify-content: flex-end; }

  .hl-tabs__nav {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .hl-tabs__nav::-webkit-scrollbar { display: none; }

  .hl-tabs__tab {
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
    padding: 12px 4px;
    font-family: var(--font-button--family, var(--font-body--family, 'Inter', sans-serif));
    font-size: var(--tab-fs, 13px);
    font-weight: 500;
    letter-spacing: var(--tab-track, 0.18em);
    text-transform: uppercase;
    opacity: 0.5;
    transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease;
    white-space: nowrap;
  }
  .hl-tabs__tab:hover { opacity: 0.85; }
  .hl-tabs__tab.is-active { opacity: 1; }
  .hl-tabs__count { opacity: 0.6; font-weight: 400; }

  /* Underline (default) */
  .hl-tabs--style-underline .hl-tabs__tab { border-bottom: 2px solid transparent; }
  .hl-tabs--style-underline .hl-tabs__tab.is-active { border-bottom-color: var(--tab-active, currentColor); }

  /* Pills */
  .hl-tabs--style-pills .hl-tabs__nav { gap: 10px; }
  .hl-tabs--style-pills .hl-tabs__tab {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-2, currentColor);
    opacity: 0.85;
  }
  .hl-tabs--style-pills .hl-tabs__tab.is-active {
    background: var(--tab-active, var(--ink));
    color: var(--bg);
    border-color: var(--tab-active, var(--ink));
    opacity: 1;
  }

  /* Solid block */
  .hl-tabs--style-solid .hl-tabs__nav {
    gap: 0;
    border: 1px solid var(--border-2, currentColor);
    flex-wrap: nowrap;
    display: inline-flex;
  }
  .hl-tabs--style-solid .hl-tabs__tab {
    padding: 12px 22px;
    border-right: 1px solid var(--border-2, currentColor);
    opacity: 0.85;
  }
  .hl-tabs--style-solid .hl-tabs__tab:last-child { border-right: 0; }
  .hl-tabs--style-solid .hl-tabs__tab.is-active {
    background: var(--tab-active, var(--ink));
    color: var(--bg);
    opacity: 1;
  }

  .hl-tabs__panel { animation: hl-tab-fade 250ms ease; }
  @keyframes hl-tab-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  .hl-tabs__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 20px);
  }

  .hl-tabs__viewall { margin-top: 28px; text-align: center; }
  .hl-tabs__empty {
    padding: 40px 0;
    text-align: center;
  }

  /* Reveal animation (matches collection-grid) */
  .hl-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: hlReveal 600ms ease forwards;
    animation-delay: var(--delay, 0ms);
  }
  @keyframes hlReveal { to { opacity: 1; transform: translateY(0); } }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-tabs__grid {
      grid-template-columns: repeat(var(--cols-tablet, 2), 1fr);
      gap: var(--gap, 18px);
    }
    .hl-tabs__nav { gap: 18px; }
  }
  @media (max-width: 767px) {
    .hl-tabs {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-tabs__grid {
      grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
      gap: var(--gap-mobile, 12px);
    }
    .hl-tabs--style-solid .hl-tabs__nav-outer { overflow-x: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-reveal { animation: none; opacity: 1; transform: none; }
  }
/* END_SECTION:collection-tabs */

/* START_SECTION:collection-toolbar (INDEX:24) */
.hl-toolbar {
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    z-index: 10;
  }
  .hl-toolbar--sticky { position: sticky; top: 0; }
  .hl-toolbar__left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .hl-toolbar__right { display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--ink-muted); }

  .hl-toolbar__filter { position: relative; }
  .hl-toolbar__filter > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .hl-toolbar__filter > summary::-webkit-details-marker { display: none; }

  .hl-toolbar__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .hl-toolbar__filter-backdrop { display: none; }
  .hl-toolbar__filter-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-2);
  }
  .hl-toolbar__filter-title { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
  .hl-toolbar__filter-close {
    background: transparent; border: none; color: inherit; cursor: pointer;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  }

  /* HORIZONTAL — dropdown panel under the Filter button */
  .hl-toolbar__filter[data-filter-mode="horizontal"] .hl-toolbar__filter-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 30;
    width: min(420px, calc(100vw - 40px));
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border-2);
    padding: 24px;
    box-shadow: 0 12px 40px rgba(15, 15, 15, 0.08);
  }

  /* DRAWER — slides in from left or right (controlled by data-drawer-side) */
  .hl-toolbar__filter[data-filter-mode="drawer"][open] .hl-toolbar__filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, var(--backdrop-alpha, 0.4));
    z-index: 198;
    animation: hlFilterFade 200ms ease;
  }
  .hl-toolbar__filter[data-filter-mode="drawer"] .hl-toolbar__filter-panel {
    position: fixed;
    top: 0;
    height: 100vh;
    width: min(var(--drawer-width, 420px), 100vw);
    background: var(--bg);
    z-index: 199;
    padding: 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(15, 15, 15, 0.16);
    transition: transform 280ms ease;
  }
  .hl-toolbar__filter[data-filter-mode="drawer"][data-drawer-side="right"] .hl-toolbar__filter-panel {
    right: 0; left: auto;
    transform: translateX(100%);
  }
  .hl-toolbar__filter[data-filter-mode="drawer"][data-drawer-side="left"] .hl-toolbar__filter-panel {
    left: 0; right: auto;
    transform: translateX(-100%);
  }
  .hl-toolbar__filter[data-filter-mode="drawer"][open] .hl-toolbar__filter-panel {
    transform: translateX(0);
  }
  .hl-toolbar__filter[data-filter-mode="drawer"] .hl-toolbar__filter-head { display: flex; }
  .hl-toolbar__filter[data-filter-mode="drawer"] .hl-toolbar__filter-body { flex: 1; overflow-y: auto; }
  .hl-toolbar__filter[data-filter-mode="drawer"] .hl-toolbar__filter-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-2);
  }

  @keyframes hlFilterFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hl-toolbar__filter-group {
    border: none;
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--border-2);
  }
  .hl-toolbar__filter-group:last-of-type { border-bottom: none; margin-bottom: 24px; padding-bottom: 0; }
  .hl-toolbar__filter-group legend { margin-bottom: 12px; color: var(--ink); }
  .hl-toolbar__filter-group--collapsible > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 12px;
  }
  .hl-toolbar__filter-group--collapsible > summary::-webkit-details-marker { display: none; }
  .hl-toolbar__filter-chevron { transition: transform 200ms ease; font-size: 14px; }
  .hl-toolbar__filter-group--collapsible[open] .hl-toolbar__filter-chevron { transform: rotate(180deg); }

  .hl-toolbar__filter-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
  }
  .hl-toolbar__filter[data-filter-mode="drawer"] .hl-toolbar__filter-list {
    grid-template-columns: 1fr;
  }
  .hl-toolbar__filter-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink);
  }
  .hl-toolbar__filter-option input[type="checkbox"] { accent-color: var(--accent); }
  .hl-toolbar__filter-option input:disabled + span { opacity: 0.4; }
  .hl-toolbar__filter-count { color: var(--ink-muted); font-size: 11px; }
  .hl-toolbar__filter-range { display: flex; align-items: center; gap: 12px; }
  .hl-toolbar__filter-range-sep { color: var(--ink-muted); font-size: 12px; }
  .hl-toolbar__filter-num { padding: 8px 12px; font-size: 13px; }

  .hl-toolbar__filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
  }
  .hl-toolbar__filter-actions--stack { flex-direction: column; align-items: stretch; gap: 10px; }
  .hl-toolbar__filter-actions--stack .hl-toolbar__filter-apply { width: 100%; }
  .hl-toolbar__filter-clear { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-muted); }

  /* SORT — themed dropdown (cream / ink palette) */
  .hl-toolbar__sort { position: relative; color: var(--ink); }
  .hl-toolbar__sort > summary { list-style: none; cursor: pointer; }
  .hl-toolbar__sort > summary::-webkit-details-marker { display: none; }
  .hl-toolbar__sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--border-2);
    transition: border-color 200ms ease, background-color 200ms ease;
  }
  .hl-toolbar__sort-trigger:hover { border-color: var(--ink); }
  .hl-toolbar__sort[open] .hl-toolbar__sort-trigger { border-color: var(--ink); background: var(--ph-bg, transparent); }
  .hl-toolbar__sort-label { color: var(--ink-muted); font-weight: 400; }
  .hl-toolbar__sort-current { font-weight: 500; }
  .hl-toolbar__sort-caret { font-size: 14px; transition: transform 200ms ease; }
  .hl-toolbar__sort[open] .hl-toolbar__sort-caret { transform: rotate(180deg); }

  .hl-toolbar__sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 220px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--border-2);
    box-shadow: 0 12px 40px rgba(15, 15, 15, 0.10);
    animation: hlSortFade 180ms ease;
  }
  .hl-toolbar__sort-menu li { margin: 0; }
  .hl-toolbar__sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .hl-toolbar__sort-option:hover { background: var(--ph-bg, rgba(15, 15, 15, 0.04)); }
  .hl-toolbar__sort-option.is-active { color: var(--accent); font-weight: 500; }
  .hl-toolbar__sort-option.is-active::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-left: 12px;
  }

  @keyframes hlSortFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hl-toolbar__count { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.06em; }

  @media (max-width: 767px) {
    .hl-toolbar {
      padding-top: var(--tb-padding-y-mobile, 12px);
      padding-bottom: var(--tb-padding-y-mobile, 12px);
      padding-left: var(--tb-padding-x-mobile, 20px);
      padding-right: var(--tb-padding-x-mobile, 20px);
      font-size: var(--tb-text-size-mobile, 12px);
      position: relative !important;
      top: auto !important;
    }
    .hl-toolbar__filter[data-filter-mode="horizontal"] .hl-toolbar__filter-panel { width: calc(100vw - 40px); left: 0; }
    .hl-toolbar__filter-list { grid-template-columns: 1fr; }
  }
/* END_SECTION:collection-toolbar */

/* START_SECTION:collections-featured (INDEX:25) */
.hl-collections-featured { background: var(--bg); }
  .hl-collections-featured__banner {
    position: relative;
    overflow: hidden;
    background: var(--ph-bg-3);
  }
  .hl-collections-featured__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hl-collections-featured__tag {
    position: absolute;
    top: 36px;
    right: 36px;
  }
  .hl-collections-featured__copy {
    position: absolute;
    bottom: 48px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
  .hl-collections-featured__heading {
    line-height: 1;
    margin: 0 0 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
  .hl-collections-featured__cta {
    background: var(--cta-bg, #fff);
    color: var(--cta-fg, var(--ink));
    border-color: var(--cta-bg, #fff);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-collections-featured__copy { bottom: 36px; }
    .hl-collections-featured__tag { top: 28px; right: 28px; }
  }
  @media (max-width: 767px) {
    .hl-collections-featured__copy { bottom: 24px; }
    .hl-collections-featured__tag { top: 18px; right: 18px; }
  }
/* END_SECTION:collections-featured */

/* START_SECTION:collections-grid (INDEX:26) */
.hl-collections-grid { background: var(--bg); color: var(--ink); }
  .hl-collections-grid__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hl-collections-grid__heading {
    line-height: 1;
    margin: 0;
  }
  .hl-collections-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: var(--gap, 20px);
  }
  .hl-collections-grid__card { display: block; color: inherit; }
  .hl-collections-grid__img {
    overflow: hidden;
    background: var(--ph-bg);
  }
  .hl-collections-grid__meta {
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hl-collections-grid__arrow {
    font-size: 18px;
    color: var(--ink-muted);
    transition: color 250ms ease, transform 350ms ease;
  }
  .hl-collections-grid__card:hover .hl-collections-grid__arrow {
    color: var(--ink);
    transform: translateX(4px);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-collections-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  }
  @media (max-width: 767px) {
    .hl-collections-grid { padding-left: 20px !important; padding-right: 20px !important; }
    .hl-collections-grid__items { grid-template-columns: 1fr !important; gap: 18px !important; }
  }
/* END_SECTION:collections-grid */

/* START_SECTION:collections-hero (INDEX:27) */
.hl-collections-hero { background: var(--bg); color: var(--ink); }
  .hl-collections-hero__heading {
    line-height: 0.95;
    margin: 0 0 16px;
  }
  .hl-collections-hero__body {
    color: var(--ink-soft);
    margin: 0 auto;
    line-height: 1.7;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-collections-hero__heading { font-size: clamp(40px, 7vw, 64px) !important; }
  }
/* END_SECTION:collections-hero */

/* START_SECTION:comparison-table (INDEX:28) */
.hl-comparison { background: var(--bg); color: var(--ink); }
  .hl-cmp__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle scroll affordance — fades the right edge so users see there's more */
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .hl-cmp__table {
    display: grid;
    min-width: 600px;
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
  }
  .hl-cmp__corner { padding: 18px 16px; }
  .hl-cmp__row-label { font-weight: 500; }
  .hl-cmp__col-header { font-weight: 600; text-align: center; }

  /* ========== Tablet ========== */
  @media (max-width: 1023px) {
    .hl-cmp__table { min-width: 540px !important; }
    .hl-cmp__corner,
    .hl-cmp__col,
    .hl-cmp__row-label { padding: 14px 10px !important; }
    .hl-cmp__col-header { font-size: 12px; }
    .hl-cmp__row-label { font-size: 12px; }
  }

  /* ========== Desktop / mobile toggle ==========
     Both layouts render in the DOM. CSS shows only one at a time. */
  .hl-cmp__mobile { display: none; }
  @media (max-width: 767px) {
    .hl-cmp__desktop { display: none !important; }
    .hl-cmp__mobile { display: block; }
  }

  /* ========== Mobile column-cards ========== */
  .hl-cmp__mcard {
    border: 1px solid var(--border-2);
    margin-bottom: 16px;
    background: var(--bg);
  }
  .hl-cmp__mcard:last-child { margin-bottom: 0; }
  .hl-cmp__mcard--highlight { border-color: var(--ink); }
  .hl-cmp__mcard-head {
    padding: 20px 18px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border-2);
  }
  .hl-cmp__mcard--highlight .hl-cmp__mcard-head {
    background: var(--ink);
    color: var(--bg);
    border-bottom-color: var(--ink);
  }
  .hl-cmp__mbadge {
    display: inline-block;
    background: var(--accent, var(--bg));
    color: var(--ink);
    padding: 3px 10px;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .hl-cmp__mcard-title { font-size: 18px; }
  .hl-cmp__mcard-subtitle { font-size: 12px; opacity: 0.7; margin-top: 4px; }
  .hl-cmp__mcard-body { padding: 8px 18px; }
  .hl-cmp__mrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-2);
    font-size: 13px;
  }
  .hl-cmp__mrow:last-child { border-bottom: none; }
  .hl-cmp__mlabel {
    font-weight: 500;
    color: var(--ink-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
  }
  .hl-cmp__mvalue {
    font-weight: 500;
    text-align: right;
    flex: 1;
    word-break: break-word;
  }
  .hl-cmp__mcheck { color: var(--accent, currentColor); font-size: 16px; }
  .hl-cmp__mcross { color: var(--ink-muted); font-size: 16px; }
  .hl-cmp__mcta {
    display: flex;
    justify-content: center;
    margin: 12px 18px 18px;
    padding: 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
    min-height: 44px;
  }
  .hl-cmp__mcard--highlight .hl-cmp__mcta {
    background: var(--ink);
    color: var(--bg);
  }
/* END_SECTION:comparison-table */

/* START_SECTION:contact-channels (INDEX:29) */
.hl-contact-channels {
    display: grid;
    background: var(--bg);
    color: var(--ink);
  }
  .cta-channel {
    cursor: pointer;
    transition: border-color 250ms ease;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .cta-channel:hover { border-color: var(--ink); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-contact-channels { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  }
  @media (max-width: 767px) {
    .hl-contact-channels { grid-template-columns: 1fr !important; gap: 12px !important; }
  }
/* END_SECTION:contact-channels */

/* START_SECTION:contact-faq (INDEX:30) */
.hl-contact-faq {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-contact-faq__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 auto;
  }
  @media (min-width: 768px) {
    .hl-contact-faq__inner {
      grid-template-columns: 1fr 2fr;
      gap: 64px;
      max-width: 1100px;
    }
  }
  .hl-contact-faq__heading {
    line-height: 1.05;
    margin: 0 0 16px;
  }
  .hl-contact-faq__body {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0 0 20px;
  }
  .hl-contact-faq__cta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-contact-faq__row { border-bottom: 1px solid var(--border-2); }
  .hl-contact-faq__row:first-child summary { border-top: 1px solid var(--border-2) !important; }
  .hl-contact-faq__row:not(:first-child) summary { border-top: none !important; }
  .hl-contact-faq__row summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; min-width: 0; }
  .hl-contact-faq__row summary::-webkit-details-marker { display: none; }
  .hl-contact-faq__q { min-width: 0; overflow-wrap: anywhere; word-break: break-word; flex: 1 1 auto; }
  .hl-contact-faq__a { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .hl-contact-faq__icon,
  .hl-contact-faq__row summary .ti { flex-shrink: 0; }
  @media (hover: hover) {
    .hl-contact-faq__row summary { transition: padding-left 250ms ease; }
    .hl-contact-faq__row summary:hover { padding-left: 6px; }
  }
  .hl-contact-faq__row[open] summary .ti-plus { transform: rotate(45deg); }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-contact-faq { padding-left: clamp(20px, 4vw, 36px); padding-right: clamp(20px, 4vw, 36px); }
    .hl-contact-faq__inner { grid-template-columns: 1fr 1.5fr; gap: 40px; }
  }
  @media (max-width: 767px) {
    .hl-contact-faq__inner { grid-template-columns: 1fr; gap: 32px; }
  }
/* END_SECTION:contact-faq */

/* START_SECTION:contact-form (INDEX:31) */
.hl-contact-form {
    display: grid;
    gap: var(--col-gap, 64px);
    background: var(--bg);
    color: var(--ink);
  }
  /* Layout variants */
  .hl-contact-form--form-left   { grid-template-columns: minmax(0, calc(var(--form-ratio, 1.3) * 1fr)) minmax(0, 1fr); }
  .hl-contact-form--form-right  { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--form-ratio, 1.3) * 1fr)); }
  .hl-contact-form--form-right .hl-contact-form__main  { order: 2; }
  .hl-contact-form--form-right .hl-contact-form__aside { order: 1; }
  .hl-contact-form--stacked,
  .hl-contact-form--no-sidebar  { grid-template-columns: 1fr; }
  .hl-contact-form--stacked-form-first .hl-contact-form__main  { order: 1; }
  .hl-contact-form--stacked-form-first .hl-contact-form__aside { order: 2; }
  .hl-contact-form--stacked-aside-first .hl-contact-form__main  { order: 2; }
  .hl-contact-form--stacked-aside-first .hl-contact-form__aside { order: 1; }
  .hl-contact-form--centered { grid-template-columns: 1fr; }
  .hl-contact-form--centered .hl-contact-form__main  { max-width: var(--form-max-w, 720px); margin-left: auto; margin-right: auto; width: 100%; }

  /* Form inner */
  .hl-contact-form__main { min-width: 0; }
  .hl-contact-form__heading { font-size: var(--heading-fs, 44px); line-height: 1; margin: 0 0 16px; }
  .hl-contact-form__intro   { font-size: 14px; color: var(--ink-soft); margin: 0 0 28px; line-height: 1.7; max-width: 640px; }
  .hl-contact-form__label   { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 8px; display: block; }
  .hl-contact-form__row     { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
  .hl-contact-form__row:has(> div:only-child) { grid-template-columns: 1fr; }
  .hl-contact-form__success { background: var(--surface); padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
  .hl-contact-form__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .hl-contact-form__terms   { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; }
  .hl-contact-form--btn-full .hl-contact-form__actions .cta { flex: 1 1 100%; justify-content: center; }
  .hl-contact-form .field { border-radius: var(--field-radius, 0); }
  .hl-contact-form--field-pill .field { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
  .hl-contact-form--field-square .field { border-radius: 0; border: 1px solid var(--ink); padding: 12px 14px; background: transparent; }

  /* Sidebar */
  .hl-contact-form__aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .hl-contact-form__help  { background: var(--surface); padding: 32px; }
  .hl-contact-form__press { background: var(--ink); color: var(--bg); padding: 32px; }

  /* Map block */
  .hl-contact-form__map {
    position: relative;
    width: 100%;
    background: var(--surface);
    overflow: hidden;
  }
  .hl-contact-form__map iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  .hl-contact-form__map-head {
    position: absolute; top: 12px; left: 12px;
    background: var(--bg);
    padding: 10px 14px;
    z-index: 2;
    max-width: 70%;
  }
  .hl-contact-form__map-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
  .hl-contact-form__map-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: var(--ink-muted);
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-contact-form--form-left,
    .hl-contact-form--form-right { gap: 32px; }
  }
  @media (max-width: 767px) {
    .hl-contact-form--form-left,
    .hl-contact-form--form-right { grid-template-columns: 1fr; gap: 28px; }
    .hl-contact-form--form-right .hl-contact-form__main  { order: 1; }
    .hl-contact-form--form-right .hl-contact-form__aside { order: 2; }
  }
  @media (max-width: 767px) {
    .hl-contact-form {
      gap: 28px;
    }
    .hl-contact-form__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-contact-form__row     { grid-template-columns: 1fr; gap: 14px; }
  }
/* END_SECTION:contact-form */

/* START_SECTION:contact-hero (INDEX:32) */
.hl-contact-hero { background: var(--bg); color: var(--ink); }
  .hl-contact-hero__heading {
    font-size: var(--heading-fs, 88px);
    line-height: 0.95;
    margin: 0 0 16px;
  }
  .hl-contact-hero__body {
    font-size: var(--body-fs, 14px);
    color: var(--ink-soft);
    margin: 0;
    max-width: var(--body-max-w, 560px);
    line-height: 1.7;
  }
  @media (max-width: 767px) {
    .hl-contact-hero__body { font-size: var(--body-fs-m, 13px) !important; }
    .hl-contact-hero {
      padding-top: var(--pt-m, 36px) !important;
      padding-bottom: var(--pb-m, 24px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-contact-hero__heading { font-size: var(--heading-fs-m, 46px); }
  }
/* END_SECTION:contact-hero */

/* START_SECTION:contact-stores (INDEX:33) */
.hl-contact-stores {
    border-top: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink);
  }
  .hl-contact-stores__head {
    text-align: center;
    margin-bottom: 40px;
  }
  .hl-contact-stores__heading {
    font-size: var(--heading-size, 48px);
    line-height: 1;
    margin: 0 0 12px;
  }
  .hl-contact-stores__body {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 480px;
    line-height: 1.7;
  }
  .hl-contact-stores__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 2), 1fr);
    gap: var(--gap, 24px);
  }
  .hl-contact-stores__card {
    border: 1px solid var(--border-2);
    overflow: hidden;
  }
  .hl-contact-stores__image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--ph-bg-3);
  }
  .hl-contact-stores__name {
    font-size: var(--name-size, 32px);
    line-height: 1;
    margin: 0 0 16px;
  }
  .hl-contact-stores__hours {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 24px;
    white-space: pre-line;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-contact-stores__grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  }
  @media (max-width: 767px) {
    .hl-contact-stores__grid { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 767px) {
  /* Auto-generated mobile typography overrides */
    .hl-contact-stores__heading { font-size: 26px; }
    .hl-contact-stores__name { font-size: var(--name-size-mobile, 20px); }

  }
/* END_SECTION:contact-stores */

/* START_SECTION:countdown (INDEX:34) */
.hl-countdown { background: var(--bg); color: var(--ink); }
  .hl-countdown__row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hl-countdown__cell {
    min-width: 96px;
    text-align: center;
  }
  .hl-countdown__num {
    font-size: 72px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hl-countdown__label { margin-top: 8px; opacity: 0.85; }
  .hl-countdown__sep { opacity: 0.4; line-height: 1; transform: translateY(-12px); }

  /* ===== Layout: stacked (centered, button below) ===== */
  .hl-countdown--stacked .hl-countdown__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }
  .hl-countdown--stacked .hl-countdown__main { width: 100%; }
  .hl-countdown--stacked .hl-countdown__row { justify-content: center; }
  .hl-countdown--stacked .hl-countdown__cta { margin-top: 0; }

  /* ===== Layout: split (text left, button right) ===== */
  .hl-countdown--split .hl-countdown__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
  }
  .hl-countdown--split .hl-countdown__main { flex: 1; min-width: 0; }
  .hl-countdown--split .hl-countdown__row { justify-content: flex-start; }
  .hl-countdown--split .hl-countdown__cta { margin-top: 0; flex-shrink: 0; }

  /* ===== Mobile: digits forced to a single line via CSS grid ===== */
  @media (max-width: 767px) {
    .hl-countdown { padding-left: 12px !important; padding-right: 12px !important; }
    .hl-countdown__row {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
      align-items: center !important;
      gap: 2px !important;
      width: 100% !important;
      max-width: 100% !important;
      flex-wrap: nowrap !important;
    }
    .hl-countdown__cell {
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      padding: 0 2px;
    }
    .hl-countdown__num {
      font-size: clamp(22px, 7.5vw, 34px) !important;
      line-height: 1 !important;
    }
    .hl-countdown__sep {
      font-size: clamp(14px, 5vw, 22px) !important;
      transform: translateY(-3px);
    }
    .hl-countdown__label {
      font-size: clamp(7px, 2.2vw, 9px) !important;
      letter-spacing: 0.04em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: clip !important;
      margin-top: 6px !important;
    }

    .hl-countdown--split .hl-countdown__inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
    }
    .hl-countdown--split .hl-countdown__main { text-align: center; }
  }
  @media (max-width: 360px) {
    .hl-countdown__num { font-size: clamp(18px, 6.5vw, 26px) !important; }
    .hl-countdown__sep { font-size: clamp(12px, 4vw, 18px) !important; }
    .hl-countdown__label { font-size: 7px !important; letter-spacing: 0.02em !important; }
  }
/* END_SECTION:countdown */

/* START_SECTION:custom-liquid (INDEX:35) */
.hl-custom-liquid {
    background: var(--bg);
    color: var(--ink);
    width: 100%;
  }
  .hl-custom-liquid__inner {
    width: 100%;
  }
  .hl-custom-liquid__placeholder {
    border: 1px dashed var(--border-2);
    padding: 28px;
    background: var(--bg);
  }
  .hl-custom-liquid__app-block {
    margin-top: 16px;
  }
  @media (max-width: 767px) {
    .hl-custom-liquid {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }
/* END_SECTION:custom-liquid */

/* START_SECTION:custom-section (INDEX:36) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    width: 100%;
  }
/* END_SECTION:custom-section */

/* START_SECTION:customer-account (INDEX:37) */
.hl-account-wrap { padding: 0 36px 48px; }
  .hl-account-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 48px; }
  .hl-account-orders { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; padding: 14px 18px; }
  .hl-account-order  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; padding: 18px; align-items: center; }
  @media (max-width: 767px) {
    .hl-account-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .hl-account-orders { display: none !important; }
    .hl-account-order  {
      grid-template-columns: 1fr 1fr !important;
      gap: 8px 16px !important;
      padding: 16px !important;
    }
    .hl-account-order > span:nth-child(3),
    .hl-account-order > span:nth-child(6) { display: none; }
  }
/* END_SECTION:customer-account */

/* START_SECTION:customer-login (INDEX:38) */
.hl-login {
    display: grid;
    background: var(--bg);
  }
  .hl-login__shop-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .hl-login__shop-row--below { margin-top: 18px; margin-bottom: 0; }
  .hl-login__shop-divider { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
  .hl-login__shop-divider::before, .hl-login__shop-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
/* END_SECTION:customer-login */

/* START_SECTION:customer-register (INDEX:39) */
.hl-register { display: grid; background: var(--bg); }
/* END_SECTION:customer-register */

/* START_SECTION:edit-grid (INDEX:40) */
.hl-edit { background: var(--bg); padding: 80px 36px; }
  .hl-edit__head { text-align: center; margin-bottom: 48px; }
  .hl-edit__heading { font-size: 54px; line-height: 1; margin: 0; }
  .hl-edit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .hl-edit__card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3/4;
    color: var(--card-text-default, #fff);
    text-decoration: none;
    display: block;
  }
  .hl-edit__card-img {
    width: 100%;
    height: 100%;
    transition: transform 900ms cubic-bezier(.2, .8, .2, 1);
  }
  .hl-edit__card:hover .hl-edit__card-img { transform: scale(1.06); }
  .hl-edit__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, var(--card-overlay-color, rgba(15, 15, 15, 0.55)) 100%);
    pointer-events: none;
  }
  .hl-edit__kicker {
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--card-text-default, #fff);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .hl-edit__copy {
    position: absolute;
    bottom: 28px;
    left: 28px;
    right: 28px;
  }
  .hl-edit__title { font-size: 30px; margin: 0 0 10px; line-height: 1; }
  .hl-edit__body { font-size: 12px; line-height: 1.6; margin: 0 0 18px; opacity: 0.9; }
  .hl-edit__cta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--card-text-default, #fff);
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-edit__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  }
  @media (max-width: 767px) {
    .hl-edit { padding: 36px 20px; }
    .hl-edit__heading { font-size: 32px; }
    .hl-edit__grid { grid-template-columns: 1fr; gap: 12px; }
    .hl-edit__title { font-size: 22px; }
  /* Auto-generated mobile typography overrides */
    .hl-edit__heading { font-size: 29px; }
    .hl-edit__title { font-size: 20px; }

  }
  @media (prefers-reduced-motion: reduce) {
    .hl-edit__card:hover .hl-edit__card-img { transform: none; }
  }
/* END_SECTION:edit-grid */

/* START_SECTION:faq-cards (INDEX:41) */
.hl-faqc { background: var(--bg); color: var(--ink); }
  .hl-faqc--align-center .hl-faqc__head { text-align: center; }
  .hl-faqc--align-center .hl-faqc__body { margin-left: auto; margin-right: auto; }
  .hl-faqc--align-right  .hl-faqc__head { text-align: right; }
  .hl-faqc--align-right  .hl-faqc__body { margin-left: auto; }

  .hl-faqc__heading { font-size: var(--heading-fs, 44px); line-height: 1.05; margin: 0; }
  .hl-faqc__body    { font-size: 14px; line-height: 1.7; opacity: 0.85; margin: 14px 0 0; }

  .hl-faqc__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-d, 3), 1fr);
    gap: var(--gap, 20px);
  }

  .hl-faqc__card {
    padding: var(--card-padding, 24px);
    border-radius: var(--card-radius, 0);
    background: var(--card-bg, transparent);
    box-shadow: var(--card-shadow, 0 0 0 transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .hl-faqc--card-bordered .hl-faqc__card { border: 1px solid var(--card-border-c, rgba(127,127,127,0.22)); }
  .hl-faqc--card-filled   .hl-faqc__card { background: var(--card-bg, var(--surface)); }
  .hl-faqc--card-divider  .hl-faqc__card { border-bottom: 1px solid var(--card-border-c, rgba(127,127,127,0.22)); padding-left: 0; padding-right: 0; border-radius: 0; }
  .hl-faqc--card-minimal  .hl-faqc__card { padding-left: 0; padding-right: 0; }

  .hl-faqc__icon { font-size: 28px; color: var(--icon-color, var(--accent)); margin-bottom: 6px; }
  .hl-faqc__tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
  }
  .hl-faqc__q {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: var(--q-size, 16px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .hl-faqc__a {
    font-size: var(--a-size, 13px);
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .hl-faqc__a p:first-child { margin-top: 0; }
  .hl-faqc__a p:last-child  { margin-bottom: 0; }
  .hl-faqc__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
  }
  .hl-faqc__cta:hover { color: var(--accent); }

  .hl-faqc__foot-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-faqc__grid { grid-template-columns: repeat(var(--cols-t, 2), 1fr); gap: 16px; }
  }
  @media (max-width: 767px) {
    .hl-faqc {
      padding-top:    var(--pt-m, 40px) !important;
      padding-bottom: var(--pb-m, 40px) !important;
      padding-left:   var(--px-m, 20px) !important;
      padding-right:  var(--px-m, 20px) !important;
    }
    .hl-faqc__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-faqc__grid { grid-template-columns: repeat(var(--cols-m, 1), 1fr); gap: var(--gap-m, 12px); }
  /* Auto-generated mobile typography overrides */
    .hl-faqc__icon { font-size: 20px; }

  }
/* END_SECTION:faq-cards */

/* START_SECTION:faq-tabs (INDEX:42) */
.hl-faqt { background: var(--bg); color: var(--ink); }
  .hl-faqt--align-center .hl-faqt__head { text-align: center; }
  .hl-faqt--align-center .hl-faqt__body { margin-left: auto; margin-right: auto; }
  .hl-faqt--align-right  .hl-faqt__head { text-align: right; }
  .hl-faqt__heading { font-size: var(--heading-fs, 44px); line-height: 1.05; margin: 0; }
  .hl-faqt__body { font-size: 14px; line-height: 1.7; opacity: 0.85; margin: 14px 0 0; }

  /* Tabs */
  .hl-faqt__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tab-gap, 32px);
    margin-bottom: 24px;
    border-bottom: 1px solid var(--faqt-divider, rgba(127,127,127,0.18));
  }
  .hl-faqt__tab {
    background: transparent;
    border: 0;
    padding: 14px 0;
    margin-bottom: -1px;
    font: inherit;
    cursor: pointer;
    color: var(--tab-color, var(--ink-muted));
    font-size: var(--tab-fs, 13px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    transition: color 200ms ease;
  }
  .hl-faqt__tab:hover { color: var(--tab-active-color, var(--ink)); }
  .hl-faqt__tab.is-active { color: var(--tab-active-color, var(--ink)); }

  /* Tab style variants */
  .hl-faqt--tabs-underline .hl-faqt__tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--tab-active-color, var(--ink));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms ease;
  }
  .hl-faqt--tabs-underline .hl-faqt__tab.is-active::after { transform: scaleX(1); }

  .hl-faqt--tabs-pill .hl-faqt__tabs { border-bottom: 0; gap: 8px; }
  .hl-faqt--tabs-pill .hl-faqt__tab {
    padding: 8px 18px;
    border: 1px solid var(--faqt-divider, rgba(127,127,127,0.32));
    border-radius: 999px;
    letter-spacing: 0.08em;
  }
  .hl-faqt--tabs-pill .hl-faqt__tab.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  .hl-faqt--tabs-bordered .hl-faqt__tabs { gap: 0; border-bottom: 0; }
  .hl-faqt--tabs-bordered .hl-faqt__tab {
    padding: 14px 22px;
    border: 1px solid var(--faqt-divider, rgba(127,127,127,0.22));
    margin-left: -1px;
  }
  .hl-faqt--tabs-bordered .hl-faqt__tab:first-child { margin-left: 0; }
  .hl-faqt--tabs-bordered .hl-faqt__tab.is-active { background: var(--surface); border-color: var(--ink); z-index: 1; }

  /* Panels */
  .hl-faqt__panel[hidden] { display: none; }

  /* Accordion rows */
  .hl-faqt__row { border-bottom: 1px solid var(--faqt-divider, rgba(127,127,127,0.18)); }
  .hl-faqt__row:first-child { border-top: 1px solid var(--faqt-divider, rgba(127,127,127,0.18)); }
  .hl-faqt__row > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: var(--row-py, 22px) 0;
    cursor: pointer;
  }
  .hl-faqt__row > summary::-webkit-details-marker { display: none; }
  .hl-faqt__q {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: var(--q-size, 17px);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .hl-faqt__a {
    font-size: var(--a-size, 14px);
    line-height: 1.75;
    color: var(--ink-soft);
    padding: 0 0 var(--row-py, 22px);
  }
  .hl-faqt__a p:first-child { margin-top: 0; }
  .hl-faqt__a p:last-child  { margin-bottom: 0; }

  /* +/− indicator */
  .hl-faqt__indicator {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    position: relative;
  }
  .hl-faqt__indicator::before,
  .hl-faqt__indicator::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 220ms ease;
  }
  .hl-faqt__indicator::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
  .hl-faqt__indicator::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
  .hl-faqt__row[open] .hl-faqt__indicator::after { transform: translateX(-50%) rotate(90deg); }

  /* Accordion style variants */
  .hl-faqt--accordion-card .hl-faqt__row {
    border: 1px solid var(--faqt-divider, rgba(127,127,127,0.18));
    margin-bottom: 10px;
    padding: 0 18px;
  }
  .hl-faqt--accordion-card .hl-faqt__row:first-child { border-top: 1px solid var(--faqt-divider, rgba(127,127,127,0.18)); }
  .hl-faqt--accordion-filled .hl-faqt__row {
    background: var(--surface);
    border-color: transparent;
    margin-bottom: 6px;
    padding: 0 18px;
  }
  .hl-faqt--accordion-filled .hl-faqt__row:first-child { border-top: 0; }
  .hl-faqt--accordion-plus-only .hl-faqt__indicator::before { display: none; }
  .hl-faqt--accordion-plus-only .hl-faqt__row[open] .hl-faqt__indicator::after { transform: translateX(-50%) rotate(45deg); }

  .hl-faqt__foot-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-faqt__tabs    { gap: 20px; flex-wrap: wrap; }
  }
  @media (max-width: 767px) {
    .hl-faqt {
      padding-top:    var(--pt-m, 40px) !important;
      padding-bottom: var(--pb-m, 40px) !important;
      padding-left:   var(--px-m, 20px) !important;
      padding-right:  var(--px-m, 20px) !important;
    }
    .hl-faqt__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-faqt__tabs    { gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .hl-faqt__tabs::-webkit-scrollbar { display: none; }
    .hl-faqt__tab     { white-space: nowrap; flex-shrink: 0; }
    .hl-faqt--tabs-pill .hl-faqt__tabs { gap: 6px; }
    .hl-faqt__q       { font-size: 15px; }
    .hl-faqt__a       { font-size: 13px; }
  }
/* END_SECTION:faq-tabs */

/* START_SECTION:faq (INDEX:43) */
.hl-faq__split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    align-items: start;
  }
  .hl-faq__rows details { border-bottom: 1px solid var(--border-2); }
  .hl-faq__rows details:first-child { border-top: 1px solid var(--border-2); }
  .hl-faq__rows summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
  }
  .hl-faq__rows summary::-webkit-details-marker { display: none; }
  /* Long-question / long-URL defense — wrap inside the flex track so the
     toggle icon stays visible no matter the question length. */
  .hl-faq__rows .hl-faq-q { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .hl-faq__rows .hl-faq-a { overflow-wrap: anywhere; word-break: break-word; }
  .hl-faq__rows summary .ti,
  .hl-faq__rows summary [data-faq-icon] { flex-shrink: 0; }
  /* Hover reflow only on devices that actually have a hover pointer — keeps
     touch + hybrid devices from sub-pixel-shifting the row on tap. */
  @media (hover: hover) {
    .hl-faq__rows summary { transition: padding-left 250ms ease; }
    .hl-faq__rows summary:hover { padding-left: 6px; }
  }
  .hl-faq__rows details[open] summary .ti-plus { transform: rotate(45deg); }
  .hl-faq__rows details[open] summary [data-faq-icon="chevron"] { transform: rotate(180deg); }
  .hl-faq__rows details[open] summary [data-faq-icon="arrow"] { transform: rotate(180deg); }
  .hl-faq__rows .hl-faq-q { font-family: var(--font-display--family, 'Syne', sans-serif); font-weight: 700; letter-spacing: -0.02em; font-size: 15px; }
  .hl-faq__rows .hl-faq-a { padding: 6px 0 22px; font-size: 13px; line-height: 1.8; opacity: 0.85; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-faq__split { grid-template-columns: 1fr 1.5fr; gap: 36px; }
    /* Tablet padding cap — the 1fr/1.5fr grid + 36px gap can crowd content
       when the merchant's desktop padding_x is also 36px+. clamp() keeps a
       sensible minimum without forcing a new schema setting. */
    .hl-faq { padding-left: clamp(20px, 4vw, 36px) !important; padding-right: clamp(20px, 4vw, 36px) !important; }
  }
  @media (max-width: 767px) {
    .hl-faq__split { grid-template-columns: 1fr; gap: var(--gap-m, 32px); }
  }
  @media (max-width: 767px) {
    .hl-faq {
      padding-top: var(--pt-m, 56px) !important;
      padding-bottom: var(--pb-m, 56px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-faq .display { font-size: var(--h-m, 28px) !important; }
    .hl-faq__rows .hl-faq-q { font-size: var(--q-m, 14px); }
    .hl-faq__rows .hl-faq-a { font-size: var(--a-m, 13px); padding: 4px 0 18px; }
    .hl-faq__rows summary { padding: var(--row-py-m, 16px) 0; }
  }
/* END_SECTION:faq */

/* START_SECTION:feature-blocks (INDEX:44) */
.hl-fb { background: var(--bg); color: var(--ink); }
  .hl-fb__body { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 12px 0 0; max-width: 680px; }
  .hl-fb--align-center .hl-fb__body { margin-left: auto; margin-right: auto; }

  .hl-fb__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: var(--gap, 24px);
  }
  .hl-fb__cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--card-radius, 0);
    transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
  }
  .hl-fb--align-center .hl-fb__cell { text-align: center; align-items: center; }
  .hl-fb--align-right  .hl-fb__cell { text-align: right; align-items: flex-end; }

  /* Icon position variants */
  .hl-fb--icon-top .hl-fb__cell { flex-direction: column; }
  .hl-fb--icon-left .hl-fb__cell { flex-direction: row; gap: 16px; align-items: flex-start; text-align: left; }
  .hl-fb--icon-left.hl-fb--align-center .hl-fb__cell { text-align: left; align-items: flex-start; }

  .hl-fb__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--icon-color, currentColor);
  }
  .hl-fb__icon .ti { font-size: var(--icon-size, 32px); line-height: 1; }
  .hl-fb--icon-left .hl-fb__icon { margin-bottom: 0; flex-shrink: 0; }

  .hl-fb__image {
    width: var(--icon-size, 32px);
    height: var(--icon-size, 32px);
    margin-bottom: 16px;
    flex-shrink: 0;
  }
  .hl-fb__image img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .hl-fb--icon-left .hl-fb__image { margin-bottom: 0; }

  .hl-fb__copy { flex: 1; min-width: 0; }
  .hl-fb__cell-eyebrow { margin-bottom: 6px; }
  .hl-fb__cell-heading {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
  }
  .hl-fb__cell-body { line-height: 1.6; opacity: 0.9; }
  .hl-fb__cell-body p { margin: 0 0 6px; }
  .hl-fb__cell-body p:last-child { margin-bottom: 0; }
  .hl-fb__cell-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hl-fb__cell-link .ti { font-size: 14px; transition: transform 200ms ease; }
  .hl-fb__cell-link:hover .ti { transform: translateX(3px); }

  /* === Style variants === */
  /* Minimal: no card chrome, just icon + text */
  .hl-fb--style-minimal .hl-fb__cell { padding: 0; background: transparent; }

  /* Boxed: card with background + padding */
  .hl-fb--style-boxed .hl-fb__cell {
    background: var(--card-bg, var(--bg-soft, rgba(0,0,0,0.04)));
    padding: 28px 24px;
  }

  /* Bordered: outlined card */
  .hl-fb--style-bordered .hl-fb__cell {
    border: 1px solid var(--card-border, var(--border-2, currentColor));
    padding: 28px 24px;
  }
  .hl-fb--style-bordered a.hl-fb__cell:hover { background: rgba(0,0,0,0.03); }

  /* Divider: vertical lines between columns */
  .hl-fb--style-divider .hl-fb__grid {
    gap: 0;
  }
  .hl-fb--style-divider .hl-fb__cell {
    padding: 16px 24px;
    border-right: 1px solid var(--card-border, var(--border-2, currentColor));
  }
  .hl-fb--style-divider .hl-fb__cell:last-child { border-right: 0; }

  /* Underline: bottom border per cell */
  .hl-fb--style-underline .hl-fb__cell {
    padding: 20px 0;
    border-bottom: 1px solid var(--card-border, var(--border-2, currentColor));
  }

  @media (max-width: 1023px) {
    .hl-fb__grid {
      grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
      gap: var(--gap-m, 12px);
    }
    .hl-fb--style-divider .hl-fb__cell { border-right: 0; border-bottom: 1px solid var(--card-border, var(--border-2, currentColor)); padding: 16px 0; }
    .hl-fb--style-divider .hl-fb__cell:last-child { border-bottom: 0; }
  }
  @media (max-width: 767px) {
    .hl-fb {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-fb--icon-left .hl-fb__cell { gap: 12px; }
    .hl-fb--style-boxed .hl-fb__cell,
    .hl-fb--style-bordered .hl-fb__cell { padding: 20px 18px; }
  }
/* END_SECTION:feature-blocks */

/* START_SECTION:featured-collection (INDEX:45) */
.hl-featured {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-featured__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hl-featured__viewall {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-featured__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 20px);
  }
  .hl-featured__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
  }

  /* Reveal animation (matches collection-grid) */
  .hl-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: hlReveal 600ms ease forwards;
    animation-delay: var(--delay, 0ms);
  }
  @keyframes hlReveal { to { opacity: 1; transform: translateY(0); } }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-featured__grid {
      grid-template-columns: repeat(var(--cols-tablet, 2), 1fr) !important;
      gap: 18px !important;
    }
    .hl-featured__heading { font-size: clamp(28px, 5vw, 42px) !important; }
    .hl-featured__head { margin-bottom: 32px; }
  }
  @media (max-width: 767px) {
    .hl-featured {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-featured__heading { font-size: 32px; }
    .hl-featured__grid {
      grid-template-columns: repeat(var(--cols-mobile, 2), 1fr) !important;
      gap: var(--gap-mobile, 12px) !important;
    }
    .hl-featured__viewall { min-height: 44px; display: inline-flex; align-items: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-reveal { animation: none; opacity: 1; transform: none; }
  }
/* END_SECTION:featured-collection */

/* START_SECTION:featured-product (INDEX:46) */
.hl-fp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .hl-fp__grid--right .hl-fp__image { order: 2; }
  .hl-fp--align-center .hl-fp__copy { text-align: center; }
  .hl-fp--align-center .hl-fp__copy .cta,
  .hl-fp--align-center .hl-fp__copy .hl-fp__form { margin-left: auto; margin-right: auto; }
  .hl-fp--align-right .hl-fp__copy { text-align: right; }
  .hl-fp__image-wrap { display: flex; flex-direction: column; gap: 8px; }
  .hl-fp__image {
    position: relative;
    aspect-ratio: var(--ratio, 4/5);
    overflow: hidden;
    background: var(--ph-bg-2);
  }
  .hl-fp__image-link, .hl-fp__image-link img { display: block; }
  .hl-fp__image img { width: 100%; height: 100%; object-fit: cover; transition: opacity 250ms ease; }

  /* Thumbnail slider: wrap + arrows + scrollable strip */
  .hl-fp__thumbs-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hl-fp__thumbs-wrap--pos-above { order: -1; }
  .hl-fp__thumbs-wrap--pos-left,
  .hl-fp__thumbs-wrap--pos-right {
    flex-direction: column;
  }
  .hl-fp__image-wrap--gallery:has(.hl-fp__thumbs-wrap--pos-left),
  .hl-fp__image-wrap--gallery:has(.hl-fp__thumbs-wrap--pos-right) {
    flex-direction: row;
    align-items: stretch;
  }
  .hl-fp__image-wrap--gallery:has(.hl-fp__thumbs-wrap--pos-left) .hl-fp__thumbs-wrap { order: -1; }
  .hl-fp__image-wrap--gallery:has(.hl-fp__thumbs-wrap--pos-left) .hl-fp__image,
  .hl-fp__image-wrap--gallery:has(.hl-fp__thumbs-wrap--pos-right) .hl-fp__image { flex: 1; min-width: 0; }

  .hl-fp__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
  }
  .hl-fp__thumbs::-webkit-scrollbar { display: none; }
  .hl-fp__thumbs-wrap--pos-left .hl-fp__thumbs,
  .hl-fp__thumbs-wrap--pos-right .hl-fp__thumbs {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    max-height: 100%;
  }

  .hl-fp__thumb {
    /* N thumbs visible: subtract (N-1)*8px gap, divide by N */
    flex: 0 0 calc((100% - (var(--thumb-per-view, 4) - 1) * 8px) / var(--thumb-per-view, 4));
    padding: 0;
    border: 1px solid transparent;
    background: var(--ph-bg, #CCCCCC);
    cursor: pointer;
    aspect-ratio: 4/5;
    overflow: hidden;
    opacity: 0.75;
    transition: opacity 200ms ease, border-color 200ms ease;
    scroll-snap-align: start;
  }
  .hl-fp__thumbs-wrap--pos-left .hl-fp__thumb,
  .hl-fp__thumbs-wrap--pos-right .hl-fp__thumb { flex: 0 0 80px; width: 80px; }
  .hl-fp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hl-fp__thumb:hover { opacity: 1; }
  .hl-fp__thumb.is-active { opacity: 1; border-color: var(--ink); }

  /* Slider arrows */
  .hl-fp__thumb-arrow {
    background: var(--bg);
    border: 1px solid var(--border-2, currentColor);
    color: inherit;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    transition: background 200ms ease, color 200ms ease, opacity 200ms ease, visibility 200ms ease;
  }
  .hl-fp__thumb-arrow:hover { background: var(--ink); color: var(--bg); }
  .hl-fp__thumb-arrow[hidden] { display: none; }
  .hl-fp__thumb-arrow[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
  .hl-fp__thumb-arrow .ti { font-size: 14px; }
  .hl-fp__thumbs-wrap--pos-left .hl-fp__thumb-arrow,
  .hl-fp__thumbs-wrap--pos-right .hl-fp__thumb-arrow { transform: rotate(90deg); }

  /* Arrow visibility modes */
  /* always: default behavior — JS toggles `hidden` based on overflow */
  /* hidden: never render — JS forces hidden=true */
  /* hover: fade in only when the user hovers/focuses the strip */
  .hl-fp__thumbs-wrap--arrows-hover .hl-fp__thumb-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hl-fp__thumbs-wrap--arrows-hover:hover .hl-fp__thumb-arrow,
  .hl-fp__thumbs-wrap--arrows-hover:focus-within .hl-fp__thumb-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .hl-fp__thumbs-wrap--arrows-hover .hl-fp__thumb-arrow[disabled] {
    opacity: 0.3;
  }
  /* Touch devices have no hover — keep arrows persistent there */
  @media (hover: none) {
    .hl-fp__thumbs-wrap--arrows-hover .hl-fp__thumb-arrow {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  /* ===== Mobile responsiveness for thumb arrows =====
     Without these overrides:
       - the global 44px-min-height button rule (hemline-base.css) stretches the
         arrow vertically into a tall pill
       - the flex parent stretches the arrow to match the thumbnail height
     Fix: lock the arrow to a compact 28x28 circle, vertically centered,
     and forbid stretching. On phones, we make them lighter visually so they
     don't dominate the strip — customers can also swipe the thumbs naturally. */
  @media (max-width: 767px) {
    .hl-fp__thumb-arrow {
      width: 28px !important;
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      align-self: center !important;
      flex: 0 0 28px !important;
      border-radius: 50% !important;
      box-shadow: 0 2px 8px var(--shadow-color-soft, rgba(0,0,0,.10));
    }
    .hl-fp__thumb-arrow .ti { font-size: 12px !important; }
    /* If thumbs already fit (<= 4 visible), JS hides arrows via hidden attr.
       For overflow cases, keep arrows tappable but not visually overwhelming. */
    .hl-fp__thumbs-wrap--pos-below,
    .hl-fp__thumbs-wrap--pos-above { gap: 4px; }
  }

  /* ===== Layout variants ===== */
  /* Split (default): 1fr 1fr — already set above */

  /* Hero: image dominates (2:1), copy stays right */
  .hl-fp--layout-hero .hl-fp__grid { grid-template-columns: 2fr 1fr; gap: 64px; }
  .hl-fp--layout-hero .hl-fp__image { aspect-ratio: var(--ratio, 4/5); }

  /* Compact: image smaller (1:2), copy dominates */
  .hl-fp--layout-compact .hl-fp__grid { grid-template-columns: 1fr 2fr; gap: 40px; }
  .hl-fp--layout-compact .hl-fp__image { aspect-ratio: var(--ratio, 4/5); max-width: 380px; }

  /* Stacked: image on top, copy below — always single column */
  .hl-fp--layout-stacked .hl-fp__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .hl-fp--layout-stacked .hl-fp__copy { padding: 0 !important; }
  .hl-fp--layout-stacked .hl-fp__purchase { margin-left: auto; margin-right: auto; }
  .hl-fp--layout-stacked .hl-fp__form { align-items: center; }

  /* Card: image gets a rounded card frame, copy floats */
  .hl-fp--layout-card .hl-fp__grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .hl-fp--layout-card .hl-fp__image {
    border-radius: 16px;
    padding: 32px;
    background: var(--surface, rgba(0,0,0,0.04));
  }
  .hl-fp--layout-card .hl-fp__image > a,
  .hl-fp--layout-card .hl-fp__image > img,
  .hl-fp--layout-card .hl-fp__image > svg { border-radius: 8px; overflow: hidden; }

  /* Overlay: text overlaid on image (full-bleed image) */
  .hl-fp--layout-overlay .hl-fp__grid {
    grid-template-columns: 1fr;
    position: relative;
  }
  .hl-fp--layout-overlay .hl-fp__image {
    position: relative;
    aspect-ratio: 16/9;
    min-height: 480px;
  }
  .hl-fp--layout-overlay .hl-fp__image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--overlay-scrim, rgba(0,0,0,0.55)) 100%);
    pointer-events: none;
  }
  .hl-fp--layout-overlay .hl-fp__copy {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    color: var(--overlay-text, #fff);
    padding: 0 !important;
    z-index: 2;
  }
  .hl-fp--layout-overlay .hl-fp__purchase { max-width: 560px; }
  .hl-fp--layout-overlay .hl-fp__price-now,
  .hl-fp--layout-overlay .hl-fp__option-label,
  .hl-fp--layout-overlay .hl-fp__chip { color: var(--overlay-text, #fff); }
  .hl-fp--layout-overlay .hl-fp__chip:not(.is-active) { border-color: rgba(255,255,255,0.5); }
  .hl-fp--layout-overlay .hl-fp__shipping { background: var(--border-2, rgba(255,255,255,0.15)); color: var(--overlay-text, #fff); }

  /* === Purchase block === */
  .hl-fp__purchase { max-width: 480px; }
  .hl-fp--align-center .hl-fp__purchase { margin-left: auto; margin-right: auto; }
  .hl-fp--align-right  .hl-fp__purchase { margin-left: auto; }

  /* Title case variants */
  .hl-fp__title--uppercase  { text-transform: uppercase; }
  .hl-fp__title--lowercase  { text-transform: lowercase; }
  .hl-fp__title--capitalize { text-transform: capitalize; }
  .hl-fp__title--as_written { text-transform: none; }

  .hl-fp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--price-mb, 14px);
  }
  .hl-fp__price-now {
    font-size: var(--price-size, 28px);
    line-height: 1;
    font-weight: var(--price-weight, 700);
    color: var(--price-color, currentColor);
  }
  .hl-fp__price-compare {
    font-size: 14px;
    color: var(--compare-color, var(--ink-muted, currentColor));
    opacity: 0.6;
    text-decoration: line-through;
  }
  .hl-fp__price--align-left   { justify-content: flex-start; }
  .hl-fp__price--align-center { justify-content: center; }
  .hl-fp__price--align-right  { justify-content: flex-end; }
  .hl-fp__tax { font-size: 11px; opacity: 0.65; letter-spacing: 0.06em; }

  .hl-fp__body { font-size: 14px; line-height: 1.7; margin: 0 0 22px; opacity: 0.9; }
  .hl-fp__body p { margin: 0 0 10px; }
  .hl-fp__body p:last-child { margin-bottom: 0; }

  .hl-fp__form { display: flex; flex-direction: column; gap: 20px; }
  .hl-fp__variants { display: flex; flex-direction: column; gap: 18px; }
  .hl-fp__option-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .hl-fp__option-value { font-weight: 600; }
  .hl-fp__option-values { display: flex; flex-wrap: wrap; gap: 8px; }

  .hl-fp__chip {
    background: transparent;
    border: 1px solid var(--border-2, currentColor);
    color: inherit;
    cursor: pointer;
    padding: 10px 16px;
    font: inherit;
    font-size: 13px;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    min-width: 44px;
  }
  .hl-fp__chip:hover { border-color: var(--ink); }
  .hl-fp__chip.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .hl-fp__chip[disabled] {
    opacity: 0.35;
    text-decoration: line-through;
    cursor: not-allowed;
  }

  /* Color swatches (dot + label) */
  .hl-fp__chip--swatches {
    padding: 6px 12px 6px 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .hl-fp__chip-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--swatch, #ccc);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    flex-shrink: 0;
  }
  .hl-fp__chip-label { font-size: 13px; }

  /* Image swatches — actual variant thumbnails as picker */
  .hl-fp__chip--images {
    padding: 2px;
    width: 52px;
    height: 64px;
    overflow: hidden;
    border-width: 2px;
    min-width: 0;
  }
  .hl-fp__chip-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-fp__chip-img--placeholder {
    background: linear-gradient(135deg, var(--ph-bg, #CCCCCC), rgba(0,0,0,0.12));
  }
  .hl-fp__chip--images.is-active {
    border-color: var(--ink);
    background: transparent;
  }
  .hl-fp__chip--images:not(.is-active) { border-color: transparent; }
  .hl-fp__chip--images:hover { border-color: var(--ink); background: transparent; }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* Actions row: now only ATC + Buy now (qty sits above on its own row) */
  .hl-fp__actions-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Quantity — matches product-main: inline label + bordered stepper pill */
  .hl-fp__qty {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
  }
  .hl-fp--align-center .hl-fp__qty { align-self: center; }
  .hl-fp--align-right  .hl-fp__qty { align-self: flex-end; }
  .hl-fp__qty-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-weight: 500;
  }
  .hl-fp__qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-2, currentColor);
  }
  .hl-fp__qty--rounded .hl-fp__qty-stepper { border-radius: 6px; }
  .hl-fp__qty--pill    .hl-fp__qty-stepper { border-radius: 999px; }
  .hl-fp__qty-stepper button {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
    line-height: 1;
    transition: background 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .hl-fp__qty-stepper button:hover { background: var(--surface, rgba(0,0,0,0.05)); }
  .hl-fp__qty-stepper button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .hl-fp__qty-input {
    width: 40px;
    height: 36px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
  }
  .hl-fp__qty-input::-webkit-outer-spin-button,
  .hl-fp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

  .hl-fp__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .hl-fp__atc {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: var(--btn-radius, 0);
    min-height: var(--btn-h, 48px);
    padding: 0 var(--btn-px, 28px) !important;
    font-size: var(--btn-fs, 12px) !important;
  }
  .hl-fp__atc[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* Button size variants */
  .hl-fp--btn-sm { --btn-h: 40px; --btn-px: 22px; --btn-fs: 11px; }
  .hl-fp--btn-md { --btn-h: 48px; --btn-px: 28px; --btn-fs: 12px; }
  .hl-fp--btn-lg { --btn-h: 56px; --btn-px: 36px; --btn-fs: 13px; }
  .hl-fp--btn-xl { --btn-h: 64px; --btn-px: 44px; --btn-fs: 14px; }
  /* Shopify's dynamic checkout button — force-match the Add-to-bag style */
  .hl-fp__buttons .shopify-payment-button { width: 100%; }
  .hl-fp__buttons .shopify-payment-button__button {
    width: 100% !important;
    min-height: var(--btn-h, 48px) !important;
    border-radius: var(--btn-radius, 0) !important;
    border: 1px solid var(--ink) !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-family: inherit !important;
    font-size: var(--btn-fs, 12px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: none !important;
    padding: 0 var(--btn-px, 28px) !important;
    transition: background 200ms ease, color 200ms ease !important;
  }
  .hl-fp__buttons .shopify-payment-button__button:hover {
    background: var(--ink) !important;
    color: var(--bg) !important;
  }
  /* Hide Shopify's "More payment options" link by default for a cleaner look —
     uncomment if you want it back. */
  .hl-fp__buttons .shopify-payment-button__more-options {
    color: var(--ink-muted, currentColor) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 8px !important;
    opacity: 0.7;
  }
  /* Branded Shop Pay variant: strip Shopify's purple background but keep the wordmark */
  .hl-fp__buttons .shopify-payment-button__button--branded {
    background: var(--ink) !important;
    color: var(--bg) !important;
    border-color: var(--ink) !important;
  }
  .hl-fp__buttons .shopify-payment-button__button--branded:hover {
    background: var(--accent, #000000) !important;
    border-color: var(--accent, #000000) !important;
  }

  /* Inventory */
  .hl-fp__inventory {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: var(--inv-py, 8px) var(--inv-px, 12px);
    margin-bottom: var(--inv-mb, 14px);
    background: var(--inv-bg, transparent);
    border-radius: var(--inv-radius, 0);
  }
  .hl-fp__inventory-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--inventory-ok-color, #22A06B);
    display: inline-block;
    animation: hl-fp-pulse 2s ease-in-out infinite;
  }
  .hl-fp__inventory--low .hl-fp__inventory-dot { background: var(--accent, #000000); }
  @keyframes hl-fp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
  }

  .hl-fp__shipping {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface, rgba(0,0,0,0.04));
    font-size: 12px;
    line-height: 1.5;
  }
  .hl-fp__shipping .ti { font-size: 18px; flex-shrink: 0; }

  .hl-fp__view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-self: flex-start;
  }
  .hl-fp__view-link .ti { font-size: 14px; transition: transform 200ms ease; }
  .hl-fp__view-link:hover .ti { transform: translateX(3px); }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-fp--layout-split .hl-fp__grid,
    .hl-fp--layout-hero .hl-fp__grid,
    .hl-fp--layout-compact .hl-fp__grid,
    .hl-fp--layout-card .hl-fp__grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .hl-fp__copy { padding: 0 !important; }
    .hl-fp__purchase { max-width: 100%; }
  }
  @media (max-width: 767px) {
    .hl-fp__grid { grid-template-columns: 1fr; gap: 24px; }
    .hl-fp__grid--right .hl-fp__image { order: 0; }
    .hl-fp__copy { padding: 0 !important; }
    .hl-fp__purchase { max-width: 100%; }
  }
  @media (max-width: 767px) {
    .hl-fp { padding-left: 20px !important; padding-right: 20px !important; }
    .hl-fp__price-now { font-size: 22px; }
    .hl-fp__actions-row { flex-direction: column; gap: 10px; }
    /* Qty sits above the buttons on its own line; on mobile it stretches full-width */
    .hl-fp__qty-wrap { width: 100%; align-self: stretch !important; }
    .hl-fp__qty { width: 100%; justify-content: space-between; }
    .hl-fp__qty .hl-fp__qty-input { flex: 1; width: auto; }
    .hl-fp__atc { padding: 0 18px !important; }

    /* Thumbnails: show 4 at a time on mobile regardless of desktop setting */
    .hl-fp__thumb { flex: 0 0 calc((100% - 24px) / 4); }
    .hl-fp__thumb-arrow { width: 28px; height: 28px; }
    .hl-fp__thumb-arrow .ti { font-size: 12px; }

    /* Inventory: ensure it doesn't overflow */
    .hl-fp__inventory {
      padding: calc(var(--inv-py, 8px) * 0.85) calc(var(--inv-px, 12px) * 0.85);
      font-size: 11px;
    }

    /* Shopify payment button on mobile — same compact height */
    .hl-fp__buttons .shopify-payment-button__button {
      min-height: var(--btn-h, 48px) !important;
      padding: 0 18px !important;
    }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-fp__thumb-arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer (INDEX:47) */
.hl-footer__top {
    display: grid;
    gap: var(--col-gap, 36px);
    margin-bottom: var(--col-gap, 36px);
    padding-bottom: var(--col-gap, 36px);
  }
  .hl-footer__logo-link {
    display: inline-block;
    margin-bottom: 16px;
    color: inherit;
    text-decoration: none;
  }
  .hl-footer__wordmark {
    letter-spacing: -0.06em;
    line-height: 1;
    display: inline-block;
    color: inherit;
  }
  .hl-footer__textblock {
    font-size: 12px;
    line-height: 1.7;
    opacity: 0.7;
    margin-top: 18px;
    max-width: 320px;
  }
  .hl-footer__textblock p { margin: 0 0 8px; }
  .hl-footer__textblock p:last-child { margin: 0; }
  .hl-footer__intro {
    font-size: 12px;
    opacity: 0.7;
    line-height: 1.8;
    max-width: 320px;
    margin-bottom: 24px;
  }
  .hl-footer__social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .hl-footer__social-heading {
    flex: 0 0 100%;
    margin-bottom: 12px;
  }
  .hl-footer__social a { color: inherit; transition: opacity 250ms ease, transform 250ms ease; line-height: 1; }
  .hl-footer__social a:hover { opacity: 0.7; transform: translateY(-1px); }

  /* Social strip — full-width row of social icons placed below the link columns. */
  .hl-footer__social-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 32px 0 8px;
    padding: 0;
  }
  .hl-footer__social-strip--left   { justify-content: flex-start; }
  .hl-footer__social-strip--center { justify-content: center; }
  .hl-footer__social-strip--right  { justify-content: flex-end; }
  .hl-footer__social-strip-heading {
    margin-right: 16px;
    opacity: 0.7;
    letter-spacing: 0.12em;
  }
  .hl-footer__social-strip-icons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: inherit;
  }
  .hl-footer__social-strip-icons a { color: inherit; transition: opacity 250ms ease, transform 250ms ease; line-height: 1; }
  .hl-footer__social-strip-icons a:hover { opacity: 0.7; transform: translateY(-1px); }
  @media (max-width: 767px) {
    .hl-footer__social-strip {
      justify-content: center !important;
      margin: 20px 0 4px;
      gap: 18px !important;
      font-size: 18px !important;
    }
    hr.hl-footer__bottom-divider     { margin: 18px 0 16px; }
    .hl-footer__social-strip-heading {
      flex: 0 0 100%;
      text-align: center;
      margin: 0 0 10px;
    }
  }
  /* Column heading — refined editorial look:
     short underline accent, refined letter spacing, slight color emphasis */
  .hl-footer__col-heading {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 12px;
    font-family: var(--font-menu--family, var(--font-body--family, 'Inter', sans-serif));
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.95;
  }
  /* Accent underline under each column heading — only shown when opted in */
  .hl-footer--heading-accent .hl-footer__col-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
  }
  .hl-footer__col-links {
    font-size: 13px;
    line-height: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hl-footer__col-links a {
    color: inherit;
    opacity: 0.7;
    transition: opacity 200ms ease, padding-left 200ms ease;
    width: fit-content;
  }
  .hl-footer__col-links a:hover {
    opacity: 1;
    padding-left: 4px;
    text-decoration: none;
  }

  /* Link-column accordion (uses <details>/<summary>).
     Desktop: always-open look — hide marker + toggle, force content visible.
     Mobile w/ collapse class: real accordion. Mobile w/o: same as desktop. */
  .hl-footer__col { display: block; }
  .hl-footer__col > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    gap: 12px;
  }
  .hl-footer__col > summary::-webkit-details-marker { display: none; }
  .hl-footer__col-toggle { display: none; }
  .hl-footer__col[open] > .hl-footer__col-links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
  }
  .hl-footer__col > .hl-footer__col-links > a {
    display: block;
    width: auto;
  }

  @media (max-width: 767px) {
    .hl-footer__col-heading { margin-bottom: 16px; }
    .hl-footer--heading-accent .hl-footer__col-heading::after { width: 20px; }

    .hl-footer--collapse-mobile .hl-footer__col > summary {
      cursor: pointer;
      padding: 14px 0;
      margin-bottom: 0;
      border-bottom: 1px solid var(--border-2, rgba(127,127,127,0.18));
    }
    .hl-footer--collapse-mobile .hl-footer__col > .hl-footer__col-links {
      display: none;
      padding: 12px 0 18px;
    }
    .hl-footer--collapse-mobile .hl-footer__col[open] > .hl-footer__col-links {
      display: flex !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      align-items: flex-start;
      gap: 8px;
    }
    .hl-footer--collapse-mobile .hl-footer__col[open] > .hl-footer__col-links > a {
      display: block;
      width: auto;
      line-height: 1.6 !important;
    }
    .hl-footer--collapse-mobile .hl-footer__col-toggle {
      display: inline-block;
      position: relative;
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }
    .hl-footer--collapse-mobile .hl-footer__col-toggle::before,
    .hl-footer--collapse-mobile .hl-footer__col-toggle::after {
      content: '';
      position: absolute;
      background: currentColor;
      transition: transform 220ms ease;
    }
    .hl-footer--collapse-mobile .hl-footer__col-toggle::before {
      top: 50%;
      left: 0; right: 0;
      height: 1px;
      transform: translateY(-50%);
    }
    .hl-footer--collapse-mobile .hl-footer__col-toggle::after {
      left: 50%;
      top: 0; bottom: 0;
      width: 1px;
      transform: translateX(-50%);
    }
    .hl-footer--collapse-mobile .hl-footer__col[open] .hl-footer__col-toggle::after {
      transform: translateX(-50%) rotate(90deg);
    }
    .hl-footer--collapse-mobile .hl-footer__top {
      gap: 0 !important;
      margin-bottom: 24px;
      padding-bottom: 0;
    }
  }

  /* ===== Payment icons — clean wordmark style ===== */
  .hl-footer__payments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-2, rgba(127,127,127,0.18));
  }
  .hl-footer__payments-heading {
    margin: 0 0 4px;
    opacity: 0.7;
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  /* The icon row: one line on desktop (overflow-x scroll if too many),
     wraps to 2+ lines on mobile. */
  .hl-footer__payments-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; /* room for any scrollbar */
  }
  .hl-footer__payments-row::-webkit-scrollbar { display: none; }
  /* Honor the section's chosen alignment for the row inside the column */
  .hl-footer__payments[style*="justify-content:center"] .hl-footer__payments-row { justify-content: center; }
  .hl-footer__payments[style*="justify-content:flex-end"] .hl-footer__payments-row { justify-content: flex-end; }

  /* Wordmark pill (default + recommended) */
  .hl-footer__payments--wordmark .hl-footer__pay {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    font-family: var(--font-body--family, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: currentColor;
    background: transparent;
    border: 1px solid var(--border-color, rgba(127,127,127,0.4));
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 200ms ease, border-color 200ms ease, transform 200ms ease;
    text-transform: none;
    line-height: 1;
  }
  .hl-footer__payments--wordmark .hl-footer__pay:hover {
    opacity: 1;
    border-color: currentColor;
  }
  /* Brand-flavored highlights — subtle accents so the row reads as real cards */
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="visa"]            { letter-spacing: 0.14em; font-weight: 700; }
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="american_express"]{ letter-spacing: 0.12em; font-weight: 700; }
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="paypal"]          { font-style: italic; }
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="apple_pay"]::before { content: ''; display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 50%; margin-right: 6px; clip-path: path("M4 0 C2 0 0 2 0 4 S2 8 4 8 8 6 8 4 6 0 4 0Z"); }
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="shopify_pay"]     { letter-spacing: 0.08em; }
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="klarna"],
  .hl-footer__payments--wordmark .hl-footer__pay[data-type="afterpay"]        { letter-spacing: 0.04em; }

  /* Monochrome toggle keeps the same look — already monochrome by default */
  .hl-footer__payments--mono .hl-footer__pay { opacity: 0.6; }

  /* === Responsive: desktop = one line, mobile = wrap into 2+ lines === */
  @media (min-width: 768px) {
    .hl-footer__payments-row {
      flex-wrap: nowrap;
      justify-content: inherit;
    }
  }
  @media (max-width: 767px) {
    .hl-footer__payments-row {
      flex-wrap: wrap;
      overflow-x: visible;
      row-gap: 8px;
      justify-content: flex-start;
    }
    .hl-footer__payments[style*="justify-content:center"] .hl-footer__payments-row { justify-content: center; }
    .hl-footer__payments[style*="justify-content:flex-end"] .hl-footer__payments-row { justify-content: flex-end; }
    .hl-footer__payments--wordmark .hl-footer__pay {
      height: 22px;
      padding: 0 8px;
      font-size: 9px;
    }
  }

  .hl-footer__back-to-top-wrap {
    margin-bottom: 18px;
  }
  .hl-footer__back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.6;
    transition: opacity 250ms ease;
  }
  .hl-footer__back-to-top:hover { opacity: 1; }
  .hl-footer__back-to-top .ti-arrow-up { font-size: 14px; }

  .hl-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.06em;
    flex-wrap: nowrap;
    gap: 18px;
  }
  /* Payments slot in bottom row — anchor to the RIGHT corner */
  .hl-footer__bottom .hl-footer__payments {
    order: 99;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
  .hl-footer__bottom .hl-footer__payments-heading { display: none; }
  .hl-footer__bottom .hl-footer__payments-row { padding: 0; }

  /* Copyright sits in the middle (or beside payments when no legal) */
  .hl-footer__copyright {
    color: inherit;
    opacity: 0.55;
    flex: 0 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .hl-footer__bottom--center { flex-direction: column; align-items: center; text-align: center; flex-wrap: wrap; }
  .hl-footer__bottom--center .hl-footer__bottom-right { justify-content: center; }
  .hl-footer__bottom--center .hl-footer__bottom .hl-footer__payments { order: 0; }
  .hl-footer__bottom--left { justify-content: flex-start; }
  .hl-footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* Custom country / language picker — clean panel that pops above the trigger */
  .hl-footer__locale-form {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
  }
  .hl-footer__locale {
    position: relative;
  }
  .hl-footer__locale-trigger {
    background: transparent;
    border: none;
    padding: 4px 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.55;
    transition: opacity 250ms ease;
  }
  .hl-footer__locale-trigger:hover,
  .hl-footer__locale.is-open .hl-footer__locale-trigger { opacity: 1; }
  .hl-footer__locale-trigger:hover .hl-footer__locale-current { text-decoration: underline; text-underline-offset: 4px; }
  .hl-footer__locale-trigger .ti-chevron-down { font-size: 12px; transition: transform 200ms ease; }
  .hl-footer__locale.is-open .hl-footer__locale-trigger .ti-chevron-down { transform: rotate(180deg); }

  .hl-footer__locale-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--border-2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    z-index: 50;
  }
  .hl-footer__locale.is-open .hl-footer__locale-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .hl-footer__locale-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-2);
    color: var(--ink-muted);
  }
  .hl-footer__locale-search-wrap .ti-search { font-size: 14px; }
  .hl-footer__locale-search {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink);
  }
  .hl-footer__locale-search::placeholder { color: var(--ink-muted); opacity: 0.7; }

  .hl-footer__locale-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    max-height: 320px;
    color: var(--ink);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--ink-muted) transparent;
  }
  .hl-footer__locale-list::-webkit-scrollbar { width: 6px; }
  .hl-footer__locale-list::-webkit-scrollbar-track { background: transparent; }
  .hl-footer__locale-list::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
  }
  .hl-footer__locale-list::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

  .hl-footer__locale-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink);
    transition: background 150ms ease;
  }
  .hl-footer__locale-item:hover,
  .hl-footer__locale-item:focus { background: var(--surface); }
  .hl-footer__locale-item[data-active] { color: var(--accent); font-weight: 500; }
  .hl-footer__locale-item[data-active] .hl-footer__locale-currency { color: var(--accent); }
  .hl-footer__locale-name { flex: 1; }
  .hl-footer__locale-currency {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }
  .hl-footer__locale-item .ti-check { font-size: 14px; color: var(--accent); }
  .hl-footer__locale-empty {
    padding: 16px;
    font-size: 12px;
    color: var(--ink-muted);
    text-align: center;
    letter-spacing: 0.04em;
  }

  /* ===== Mobile: country/language picker becomes a bottom sheet ===== */
  @media (max-width: 767px) {
    .hl-footer__locale-form {
      width: 100%;
      gap: 14px;
      flex-wrap: wrap;
    }
    .hl-footer__locale {
      width: 100%;
    }
    .hl-footer__locale-trigger {
      width: 100%;
      justify-content: space-between;
      padding: 12px 14px;
      font-size: 12px;
      border: 1px solid currentColor;
      border-color: var(--border-2, rgba(127, 127, 127, 0.3));
      min-height: 44px;
    }
    .hl-footer__locale-trigger:hover .hl-footer__locale-current { text-decoration: none; }
    .hl-footer__locale-current {
      flex: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Panel becomes a bottom sheet anchored to viewport — no overflow issues */
    .hl-footer__locale-panel {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100vw;
      max-width: 100vw;
      max-height: 70vh;
      border-radius: 12px 12px 0 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      transform: translateY(100%);
      box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.25);
      z-index: 1000;
    }
    .hl-footer__locale.is-open .hl-footer__locale-panel {
      transform: translateY(0);
    }
    /* Backdrop dim so the sheet reads clearly */
    .hl-footer__locale.is-open::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 999;
      animation: hl-locale-fade 200ms ease forwards;
    }
    @keyframes hl-locale-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    /* Drag handle bar at the top of the sheet */
    .hl-footer__locale-panel::before {
      content: '';
      display: block;
      width: 36px;
      height: 4px;
      background: rgba(15, 15, 15, 0.18);
      border-radius: 2px;
      margin: 10px auto 4px;
    }
    .hl-footer__locale-search-wrap {
      padding: 14px 18px;
    }
    .hl-footer__locale-list {
      max-height: calc(70vh - 120px);
      padding: 6px 0 max(env(safe-area-inset-bottom, 0px), 6px);
    }
    .hl-footer__locale-item {
      padding: 14px 18px;
      font-size: 14px;
      min-height: 48px;
    }
  }

  .hl-footer__legal {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .hl-footer__legal a {
    color: inherit;
    opacity: 0.55;
    transition: opacity 250ms ease;
  }
  .hl-footer__legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
    .hl-footer__wordmark { font-size: clamp(28px, 6vw, 48px); }
  }
  @media (max-width: 767px) {
    .hl-footer { padding: 36px 20px 24px !important; }
    .hl-footer__top {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
      margin-bottom: 28px !important;
      padding-bottom: 24px !important;
    }
    .hl-footer__wordmark { font-size: 32px; }
    /* Mobile: stack the bottom row.
       Order: copyright → legal links → payments (always last/bottom). */
    .hl-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
    }
    .hl-footer__bottom .hl-footer__payments {
      width: 100%;
      order: 99;
      margin-top: 4px;
    }
    .hl-footer__bottom .hl-footer__payments-row {
      flex-wrap: wrap;
      justify-content: flex-start;
      row-gap: 6px;
    }
    .hl-footer__copyright {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      width: 100%;
    }
    .hl-footer__bottom-right {
      gap: 16px;
      flex-wrap: wrap;
      width: 100%;
    }
    /* Center variant on mobile: center everything */
    .hl-footer__bottom--center .hl-footer__bottom .hl-footer__payments-row { justify-content: center; }
    .hl-footer__bottom--center .hl-footer__copyright { text-align: center; }
    .hl-footer__bottom--center .hl-footer__bottom-right { justify-content: center; }
  }

  /* ===== Newly-added settings wiring ===== */
  /* Column gap */
  .hl-footer__top { gap: var(--col-gap, 48px); }

  /* Top border */
  .hl-footer--top-border { border-top: var(--top-border-w, 1px) solid var(--border-color, currentColor); }

  /* Optional: hide divider line above bottom row */
  .hl-footer--no-bottom-divider .hl-footer__bottom { border-top: 0 !important; }

  /* Standalone divider rules — above + below the social row */
  hr.hl-footer__rule {
    border: 0;
    height: 1px;
    width: 100%;
    background: var(--bottom-divider-c, rgba(127,127,127,0.22));
    display: block;
  }
  hr.hl-footer__bottom-divider     { margin: 28px 0 20px; }

  /* Heading + link typography overrides */
  .hl-footer__col h4 {
    font-weight: var(--heading-w, 500);
    letter-spacing: var(--heading-track, 0.22em);
  }
  .hl-footer__col-links a {
    font-size: var(--link-fs, 13px);
  }

  @media (max-width: 767px) {
    .hl-footer {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 24px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-footer__top { row-gap: var(--row-gap-m, 32px); }
  }

  /* ===== Brand alignment ===== */
  .hl-footer--brand-center .hl-footer__brand { text-align: center; align-items: center; }
  .hl-footer--brand-center .hl-footer__brand p,
  .hl-footer--brand-center .hl-footer__brand .hl-footer__intro { margin-left: auto; margin-right: auto; }
  .hl-footer--brand-right .hl-footer__brand { text-align: right; align-items: flex-end; }
  .hl-footer--brand-right .hl-footer__brand p,
  .hl-footer--brand-right .hl-footer__brand .hl-footer__intro { margin-left: auto; }

  /* ===== Footer layout variants ===== */
  .hl-footer--layout-brand-center .hl-footer__top {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .hl-footer--layout-brand-center .hl-footer__brand {
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid currentColor;
    border-color: var(--border-2, rgba(255,255,255,0.15));
  }
  .hl-footer--layout-columns-only .hl-footer__brand { display: none !important; }
  .hl-footer--layout-columns-only .hl-footer__top { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
  .hl-footer--layout-minimal .hl-footer__top { display: none !important; }

  /* ===== Copyright + separators ===== */
  .hl-footer__copyright,
  .hl-footer__bottom { font-size: var(--copyright-fs, 11px); }
  .hl-footer__bottom { padding-top: var(--bottom-pt, 24px); }
  .hl-footer--no-separators .hl-footer__legal-sep { display: none; }

  /* ===== Legal alignment ===== */
  .hl-footer--legal-below .hl-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hl-footer--legal-below .hl-footer__legal { width: 100%; padding-top: 8px; }
/* END_SECTION:footer */

/* START_SECTION:gallery-strip (INDEX:48) */
.hl-gstrip { background: var(--bg); color: var(--ink); overflow: hidden; }
  .hl-gstrip__head { padding: 0 var(--side-px, 36px); }

  .hl-gstrip__viewport {
    position: relative;
  }

  /* === Scroll mode (default): snap scroller with arrows === */
  .hl-gstrip--mode-scroll .hl-gstrip__track {
    display: flex;
    gap: var(--gap, 4px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--side-px, 36px);
  }
  .hl-gstrip--mode-scroll .hl-gstrip__track::-webkit-scrollbar { display: none; }
  .hl-gstrip--mode-scroll .hl-gstrip__cell {
    flex: 0 0 calc((100% - var(--side-px) * 2 - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
    scroll-snap-align: start;
  }

  /* === Marquee mode: auto-scrolling infinite loop === */
  .hl-gstrip--mode-marquee .hl-gstrip__track {
    display: flex;
    gap: var(--gap, 4px);
    width: max-content;
    animation: hl-gstrip-marquee var(--marquee-duration, 40s) linear infinite;
  }
  .hl-gstrip--mode-marquee .hl-gstrip__cell {
    flex: 0 0 calc((100vw - var(--gap) * var(--per-view)) / var(--per-view));
  }
  .hl-gstrip--mode-marquee:hover .hl-gstrip__track { animation-play-state: paused; }
  @keyframes hl-gstrip-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* === Cell + media === */
  .hl-gstrip__cell {
    display: block;
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }
  .hl-gstrip__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-gstrip__media img,
  .hl-gstrip__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  a.hl-gstrip__cell:hover .hl-gstrip__media img { transform: scale(1.04); }
  .hl-gstrip__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--caption-overlay-color, #000000) calc(var(--caption-overlay-opacity, 0.55) * 100%), transparent) 100%);
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* Arrows */
  .hl-gstrip__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--arrow-size, 44px);
    height: var(--arrow-size, 44px);
    background: var(--arrow-bg, rgba(255, 255, 255, 0.92));
    color: var(--arrow-color, #0f0f0f);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: background 200ms ease, opacity 200ms ease;
  }
  .hl-gstrip__arrow:hover { background: var(--arrow-hover-bg, #fff); }
  .hl-gstrip__arrow--prev { left: 14px; }
  .hl-gstrip__arrow--next { right: 14px; }
  .hl-gstrip__arrow .ti { font-size: 18px; }

  /* Arrow visibility modes (merchant-controlled via section setting) */
  .hl-gstrip--arrows-always .hl-gstrip__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hl-gstrip--arrows-hover .hl-gstrip__arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease, background 200ms ease !important;
  }
  .hl-gstrip--arrows-hover .hl-gstrip__track-wrap:hover .hl-gstrip__arrow,
  .hl-gstrip--arrows-hover .hl-gstrip__track-wrap:focus-within .hl-gstrip__arrow,
  .hl-gstrip--arrows-hover:hover .hl-gstrip__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Touch devices: hide hover-mode arrows (swipe handles nav) */
  @media (hover: none) {
    .hl-gstrip--arrows-hover .hl-gstrip__arrow {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hl-gstrip--mode-marquee .hl-gstrip__track { animation: none; }
  }

  @media (max-width: 767px) {
    .hl-gstrip {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
    }
    .hl-gstrip__head { padding: 0 var(--side-px-m, 16px); }
    .hl-gstrip--mode-scroll .hl-gstrip__track {
      padding: 0 var(--side-px-m, 16px);
      gap: var(--gap-m, 4px);
    }
    .hl-gstrip--mode-scroll .hl-gstrip__cell {
      flex: 0 0 calc((100% - var(--side-px-m) * 2) / var(--per-view-m));
    }
    .hl-gstrip__caption { padding: 12px; font-size: 13px; }
    .hl-gstrip__arrow { width: 36px; height: 36px; }
    .hl-gstrip__arrow--prev { left: 6px; }
    .hl-gstrip__arrow--next { right: 6px; }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-gstrip__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
  }
/* END_SECTION:gallery-strip */

/* START_SECTION:gallery (INDEX:49) */
.hl-gal { background: var(--bg); color: var(--ink); }
  .hl-gal__body { line-height: 1.6; opacity: 0.85; margin: 12px 0 0; max-width: 720px; }

  /* ===== GRID layout (equal cells) ===== */
  .hl-gal__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--gap, 8px);
    grid-auto-flow: dense;
  }
  .hl-gal__cell--span-2 { grid-column: span 2; }
  .hl-gal__cell--span-3 { grid-column: span 3; }
  .hl-gal__cell--rspan-2 { grid-row: span 2; }
  .hl-gal__cell--rspan-3 { grid-row: span 3; }

  /* ===== MOSAIC layout (named, larger first) ===== */
  .hl-gal--layout-mosaic .hl-gal__grid {
    grid-auto-rows: minmax(0, var(--row-h, 280px));
  }

  /* ===== MASONRY layout (vertical pack) ===== */
  .hl-gal--layout-masonry .hl-gal__grid {
    display: block;
    column-count: var(--cols, 3);
    column-gap: var(--gap, 8px);
  }
  .hl-gal--layout-masonry .hl-gal__cell {
    break-inside: avoid;
    margin-bottom: var(--gap, 8px);
    display: block;
  }
  .hl-gal--layout-masonry .hl-gal__media {
    aspect-ratio: auto !important;
  }
  .hl-gal--layout-masonry .hl-gal__media img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
  }

  /* ===== JUSTIFIED layout (row-fit auto height) ===== */
  .hl-gal--layout-justified .hl-gal__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 8px);
  }
  .hl-gal--layout-justified .hl-gal__cell {
    flex: 1 1 auto;
    height: var(--row-h, 280px);
  }
  .hl-gal--layout-justified .hl-gal__media {
    aspect-ratio: auto !important;
    height: 100%;
  }

  /* ===== Cell + media ===== */
  .hl-gal__cell {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius, 0);
    overflow: hidden;
    position: relative;
    min-width: 0;
  }
  .hl-gal__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
  }
  /* In justified layout the cell itself has a fixed pixel height, so the
     media fills it. Everywhere else, aspect-ratio defines the height. */
  .hl-gal--layout-justified .hl-gal__media { height: 100%; }
  .hl-gal--layout-mosaic .hl-gal__media { height: 100%; }
  .hl-gal__media img,
  .hl-gal__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hl-gal--hover-zoom   .hl-gal__cell:hover .hl-gal__media img,
  .hl-gal--hover-zoom   .hl-gal__cell:hover .hl-gal__media svg { transform: scale(1.05); }
  .hl-gal--hover-fade   .hl-gal__cell:hover .hl-gal__media img { opacity: 0.85; }
  .hl-gal--hover-bw     .hl-gal__media img { filter: grayscale(100%); transition: filter 500ms ease; }
  .hl-gal--hover-bw     .hl-gal__cell:hover .hl-gal__media img { filter: grayscale(0%); }

  /* ===== Caption ===== */
  .hl-gal__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--overlay-c, #000) 100%);
    opacity: var(--overlay-op, 0.3);
    pointer-events: none;
    z-index: 1;
    transition: opacity 250ms ease;
  }
  .hl-gal__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--gal-overlay-text, #fff);
    padding: 18px 20px;
    z-index: 2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }
  .hl-gal__tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 4px;
  }
  .hl-gal__cap-text {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  /* Caption visibility variants */
  .hl-gal--cap-hover .hl-gal__overlay,
  .hl-gal--cap-hover .hl-gal__caption {
    opacity: 0;
    transition: opacity 250ms ease;
  }
  .hl-gal--cap-hover .hl-gal__cell:hover .hl-gal__overlay,
  .hl-gal--cap-hover .hl-gal__cell:hover .hl-gal__caption { opacity: 1; }
  .hl-gal--cap-none .hl-gal__overlay,
  .hl-gal--cap-none .hl-gal__caption { display: none; }

  /* ===== Zoom icon (lightbox trigger) ===== */
  .hl-gal__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink, #0f0f0f);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity 200ms ease, background 200ms ease;
  }
  .hl-gal__zoom:hover { background: var(--bg, #fff); }
  .hl-gal__zoom .ti { font-size: 16px; }

  /* === Visibility modes (merchant-controlled via section setting) ===
     hover (default): fade in on hover desktop, HIDDEN on mobile/touch
     always         : visible at all times on every device
     hover_only     : same as "hover" — kept for backwards compatibility */
  .hl-gal__zoom--hover,
  .hl-gal__zoom--hover_only {
    opacity: 0;
    pointer-events: none;
  }
  .hl-gal__cell:hover .hl-gal__zoom--hover,
  .hl-gal__cell:hover .hl-gal__zoom--hover_only,
  .hl-gal__cell:focus-within .hl-gal__zoom--hover,
  .hl-gal__cell:focus-within .hl-gal__zoom--hover_only {
    opacity: 1;
    pointer-events: auto;
  }
  /* Touch devices: keep hover-mode arrows hidden — tap the image opens lightbox */
  @media (hover: none) {
    .hl-gal__zoom--hover,
    .hl-gal__zoom--hover_only {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }
  /* Always-on mode is unaffected by hover */
  .hl-gal__zoom--always {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ===== Lightbox ===== */
  .hl-gal__lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
  .hl-gal__lb.is-open { visibility: visible; opacity: 1; }
  .hl-gal__lb-backdrop {
    position: absolute;
    inset: 0;
    background: var(--lb-backdrop, rgba(0, 0, 0, 0.92));
    cursor: pointer;
  }
  .hl-gal__lb-figure {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hl-gal__lb-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    background: var(--lb-container-bg, #000);
  }
  .hl-gal__lb-cap {
    color: var(--lb-text, #fff);
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-top: 16px;
    text-align: center;
    max-width: 720px;
    opacity: 0.85;
  }
  .hl-gal__lb-close,
  .hl-gal__lb-arrow {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--lb-text, #fff);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 200ms ease;
  }
  .hl-gal__lb-close:hover,
  .hl-gal__lb-arrow:hover { background: rgba(255, 255, 255, 0.22); }
  .hl-gal__lb-close { top: 18px; right: 18px; }
  .hl-gal__lb-arrow--prev { left: 18px; top: 50%; transform: translateY(-50%); }
  .hl-gal__lb-arrow--next { right: 18px; top: 50%; transform: translateY(-50%); }
  .hl-gal__lb-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--lb-text, #fff);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    z-index: 2;
  }

  /* ===== Tablet (768-1023px) — keep richer grid than mobile ===== */
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-gal--layout-grid .hl-gal__grid,
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr));
      gap: 10px;
    }
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-auto-rows: minmax(0, calc(var(--row-h, 280px) * 0.75));
    }
    .hl-gal--layout-masonry .hl-gal__grid {
      column-count: var(--cols-t, 3);
      column-gap: 10px;
    }
    .hl-gal--layout-masonry .hl-gal__cell { margin-bottom: 10px; }
    .hl-gal--layout-justified .hl-gal__grid { gap: 10px; }
    .hl-gal--layout-justified .hl-gal__cell { height: calc(var(--row-h, 280px) * 0.8); }

    /* Limit mosaic spans on tablet so cells stay in column */
    .hl-gal__cell--span-3 { grid-column: span 2 !important; }
    .hl-gal__cell--rspan-3 { grid-row: span 2 !important; }

    .hl-gal__lb-arrow { width: 42px; height: 42px; }
    .hl-gal__cap-text { font-size: 13px; }
  }

  /* ===== Mobile (≤767px) ===== */
  @media (max-width: 767px) {
    .hl-gal--layout-grid .hl-gal__grid,
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
      gap: var(--gap-m, 6px);
    }
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-auto-rows: minmax(0, calc(var(--row-h, 280px) * 0.6));
    }
    .hl-gal--layout-masonry .hl-gal__grid {
      column-count: var(--cols-m, 2);
      column-gap: var(--gap-m, 6px);
    }
    .hl-gal--layout-masonry .hl-gal__cell { margin-bottom: var(--gap-m, 6px); }
    .hl-gal--layout-justified .hl-gal__grid { gap: var(--gap-m, 6px); }
    .hl-gal--layout-justified .hl-gal__cell { height: calc(var(--row-h, 280px) * 0.65); }

    /* Reset mosaic spans on mobile so cells stay in column */
    .hl-gal__cell--span-2,
    .hl-gal__cell--span-3 { grid-column: span 1 !important; }
    .hl-gal__cell--rspan-2,
    .hl-gal__cell--rspan-3 { grid-row: span 1 !important; }

    .hl-gal__lb-arrow { width: 38px; height: 38px; }
    .hl-gal__cap-text { font-size: 13px; }
  }

  /* ===== Mobile (≤767px) ===== */
  @media (max-width: 767px) {
    .hl-gal {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }

    /* Smaller mosaic row height on mobile */
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-auto-rows: minmax(0, calc(var(--row-h, 280px) * 0.5));
    }
    /* Smaller justified row height on mobile + allow wider flex-basis */
    .hl-gal--layout-justified .hl-gal__cell {
      height: calc(var(--row-h, 280px) * 0.55);
      min-width: 40%;
    }

    /* Tighten caption padding + size */
    .hl-gal__caption { padding: 10px 12px; }
    .hl-gal__cap-text { font-size: 12px; line-height: 1.25; }
    .hl-gal__tag { font-size: 9px; margin-bottom: 2px; }

    /* Zoom button slightly smaller on mobile. Visibility (show/hide) is
       driven by the per-mode CSS above, so we only adjust SIZE here.
       Do NOT force opacity here — that would override hover-mode hiding. */
    .hl-gal__zoom { width: 30px; height: 30px; top: 8px; right: 8px; }
    .hl-gal__zoom .ti { font-size: 14px; }

    /* Lightbox tweaks */
    .hl-gal__lb-arrow--prev { left: 6px; }
    .hl-gal__lb-arrow--next { right: 6px; }
    .hl-gal__lb-arrow { width: 36px; height: 36px; }
    .hl-gal__lb-close { top: 10px; right: 10px; width: 36px; height: 36px; }
    .hl-gal__lb-img { max-width: 96vw; max-height: 72vh; }
    .hl-gal__lb-cap { font-size: 11px; margin-top: 12px; padding: 0 16px; }
    .hl-gal__lb-counter { bottom: 12px; font-size: 10px; }
  }

  /* ===== Very narrow phones (≤400px) ===== */
  @media (max-width: 400px) {
    /* Force single-column for grid/mosaic when very narrow if cols-m > 1 */
    .hl-gal--layout-mosaic .hl-gal__grid {
      grid-auto-rows: minmax(0, calc(var(--row-h, 280px) * 0.42));
    }
    .hl-gal--layout-justified .hl-gal__cell {
      height: calc(var(--row-h, 280px) * 0.48);
      min-width: 100%;
      flex: 1 1 100%;
    }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-gal__lb-arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
  }
/* END_SECTION:gallery */

/* START_SECTION:header (INDEX:50) */
.hl-header {
    /* Background lives on the outer #shopify-section-X for full-bleed color */
    background: transparent;
    color: var(--ink);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--border);
    gap: var(--logo-nav-gap, 14px);
  }
  .hl-header--no-border { border-bottom: none; }
  .hl-header--logo-left { grid-template-columns: auto 1fr auto; }
  .hl-header--logo-left .hl-header__logo { justify-self: start; order: -1; }
  .hl-header--logo-right { grid-template-columns: 1fr auto auto; }
  .hl-header--logo-right .hl-header__logo { justify-self: end; }

  .hl-header__left {
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: center;
  }
  .hl-header__nav {
    display: flex;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hl-header__logo {
    letter-spacing: -0.06em;
    line-height: 1;
    justify-self: center;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }
  .hl-header__icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 18px;
    min-width: 0;
  }
  .hl-header__icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  /* Desktop locale picker (country / currency / language) */
  .hl-header__locale {
    display: inline-flex;
    align-items: center;
  }
  .hl-header__locale-form { display: inline-flex; align-items: center; }
  .hl-header__locale-wrap { position: relative; }
  .hl-header__locale-trigger {
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 8px;
    transition: opacity 200ms ease;
    color: inherit;
  }
  .hl-header__locale-trigger:hover,
  .hl-header__locale-wrap.is-open .hl-header__locale-trigger { opacity: 0.7; }
  .hl-header__locale-trigger .ti-chevron-down {
    font-size: 14px;
    transition: transform 200ms ease;
  }
  .hl-header__locale-wrap.is-open .hl-header__locale-trigger .ti-chevron-down { transform: rotate(180deg); }
  .hl-header__locale-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--border-2);
    box-shadow: 0 16px 40px rgba(15, 15, 15, 0.12);
    z-index: 999;
    padding: 14px;
    display: none;
    flex-direction: column;
    max-height: min(60vh, 480px);
  }
  .hl-header__locale-wrap.is-open .hl-header__locale-panel { display: flex; }
  .hl-header__locale-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-2);
    margin-bottom: 10px;
  }
  .hl-header__locale-search-wrap .ti { font-size: 16px; color: var(--ink-muted); }
  .hl-header__locale-search {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
  }
  .hl-header__locale-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    /* Hide the scrollbar visually but keep scroll working */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE / old Edge */
  }
  .hl-header__locale-list::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge */
  .hl-header__locale-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    border-radius: 4px;
    transition: background 150ms ease;
  }
  .hl-header__locale-item:hover { background: var(--surface); }
  .hl-header__locale-item[data-active] { font-weight: 500; }
  .hl-header__locale-name { flex: 1; min-width: 0; }
  .hl-header__locale-currency { color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
  .hl-header__locale-item .ti-check { color: var(--accent); font-size: 16px; }
  .hl-header__locale-empty {
    padding: 14px 10px;
    font-size: 12px;
    color: var(--ink-muted);
    text-align: center;
  }
  .hl-header__bag {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-menu--family, var(--font-body--family, 'Inter', sans-serif));
    line-height: 1;
  }
  .hl-header__bag .desktop-only,
  .hl-header__bag .mobile-only { font-size: 12px; }

  /* Bag icon wrapper (needed for floating-badge anchor) */
  .hl-header__bag-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  /* Hide the count text completely when count style is "none" */
  .hl-header__bag--count-none .desktop-only,
  .hl-header__bag--count-none .mobile-only {
    display: none !important;
  }
  /* Floating badge dot — small red circle in the corner of the icon */
  .hl-header__bag-dot {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent, #000000);
    color: var(--bag-badge-fg, #fff);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  /* Hide the badge when item count is 0 */
  .hl-header__bag-dot:empty,
  .hl-header__bag-dot[data-cart-count="0"] {
    display: none;
  }

  /* Dropdown + mega menu */
  .hl-nav-item { position: relative; }
  .hl-nav-item__trigger { display: inline-flex; align-items: center; gap: 4px; }
  .hl-nav-item__trigger .ti-chevron-down { font-size: 12px; transition: transform 200ms ease; }
  .hl-nav-item:hover .hl-nav-item__trigger .ti-chevron-down,
  .hl-nav-item:focus-within .hl-nav-item__trigger .ti-chevron-down { transform: rotate(180deg); }

  .hl-nav-dropdown,
  .hl-nav-mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--border-2);
    padding: 24px;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }
  .hl-nav-item:hover > .hl-nav-dropdown,
  .hl-nav-item:hover > .hl-nav-mega,
  .hl-nav-item:focus-within > .hl-nav-dropdown,
  .hl-nav-item:focus-within > .hl-nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .hl-nav-dropdown { min-width: 220px; display: grid; gap: 8px; }
  .hl-nav-dropdown a { font-size: 13px; color: var(--ink); text-decoration: none; padding: 4px 0; transition: color 150ms ease; }
  .hl-nav-dropdown a:hover { color: var(--accent); }

  .hl-nav-mega {
    width: min(960px, calc(100vw - 80px));
    display: grid;
    grid-template-columns: 3fr 1.2fr;
    gap: 36px;
  }
  .hl-nav-mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .hl-nav-mega__col h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 12px;
    color: var(--ink-muted);
    font-weight: 500;
  }
  .hl-nav-mega__col a {
    display: block;
    font-size: 13px;
    padding: 4px 0;
    color: var(--ink);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .hl-nav-mega__col a:hover { color: var(--accent); }
  .hl-nav-mega__featured {
    display: block;
    text-decoration: none;
    color: var(--ink);
  }
  .hl-nav-mega__featured img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    margin-bottom: 10px;
    display: block;
  }
  .hl-nav-mega__featured .eyebrow-muted { display: block; margin-bottom: 4px; }
  .hl-nav-mega__featured .mid { font-size: 14px; }

  @media (prefers-reduced-motion: reduce) {
    .hl-nav-dropdown, .hl-nav-mega, .hl-nav-item__trigger .ti-chevron-down { transition: none; }
  }

  /* Mobile drawer */
  .mobile-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--drawer-width, 360px);
    max-width: 100vw;
    background: var(--bg);
    color: var(--ink);
    z-index: 1001;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(.7, 0, .3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(15, 15, 15, 0.16);
    visibility: hidden;
  }
  .mobile-menu--right {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 32px rgba(15, 15, 15, 0.16);
  }
  .mobile-menu.is-open, .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
  }
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
  }
  body.menu-open .mobile-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  /* Skip-to-content sits at z-index 10000 globally; hide while the drawer
     (z-index 9999 / 1001) is open so it cannot render above the overlay. */
  body.menu-open .skip-to-content-link {
    display: none;
  }
  .mobile-menu-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    padding: 8px;
    margin: -8px;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .mobile-menu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    min-height: 48px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border-2);
    font-size: 15px;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu, .mobile-menu-overlay { transition: none; }
  }
  .mobile-menu__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-2);
    background: var(--bg);
  }
  .mobile-menu__head > a,
  .mobile-menu__head > .display {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
  }
  .mobile-menu__head .mobile-menu-close {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .mobile-menu__eyebrow { padding: 14px 20px 0; color: var(--ink-muted); }
  .mobile-menu__nav { padding: 8px 20px; flex: 1; }
  .mobile-menu__group { border-bottom: 1px solid var(--border-2); }
  .mobile-menu__group summary { list-style: none; cursor: pointer; }
  .mobile-menu__group summary::-webkit-details-marker { display: none; }
  .mobile-menu-row--toggle { border-bottom: none !important; }
  .mobile-menu__group[open] .mobile-menu-row--toggle .ti-plus { transform: rotate(45deg); }
  .mobile-menu__sub { padding: 4px 0 16px; display: grid; gap: 6px; }
  .mobile-menu__sub-heading { padding-top: 8px; }
  .mobile-menu__sub-link {
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    padding: 4px 12px;
  }
  .mobile-menu__sub-link:hover { color: var(--accent); }
  .mobile-menu__sub-feat {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-top: 8px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
  }
  .mobile-menu__sub-feat img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
  .mobile-menu__promo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-2);
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
  }
  .mobile-menu__promo .eyebrow-muted { color: var(--accent); flex: 0 0 auto; }
  .mobile-menu__promo .mid { flex: 1; font-weight: 500; }
  .mobile-menu__foot {
    padding: 24px 20px;
    border-top: 1px solid var(--border-2);
    background: var(--surface);
  }
  .mobile-menu__icons {
    display: flex;
    gap: 18px;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 16px;
  }
  /* Both anchors and the cart button must inherit the drawer's text color
     so the icons match. Without this the cart <button> keeps the browser's
     default white background + dark text and looks like a stuck-on chiclet. */
  .mobile-menu__icons a,
  .mobile-menu__icons button {
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu__icons a:hover,
  .mobile-menu__icons button:hover { color: var(--accent); }

  /* Drawer override of the footer locale picker so the panel pops above
     the trigger and aligns with the drawer's left edge instead of the right. */
  .hl-footer__locale--drawer { display: block; }
  .hl-footer__locale--drawer .hl-footer__locale-trigger {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-2);
    background: var(--bg);
    color: var(--ink);
    opacity: 1;
    justify-content: space-between;
    font-size: 13px;
    letter-spacing: 0;
  }
  .hl-footer__locale--drawer .hl-footer__locale-trigger:hover .hl-footer__locale-current { text-decoration: none; }
  .hl-footer__locale--drawer .hl-footer__locale-panel {
    left: 0;
    right: auto;
    width: calc(var(--drawer-width, 360px) - 40px);
    max-width: calc(100vw - 40px);
    /* Opens UPWARD — the picker lives at the bottom of the drawer, so the
       dropdown must expand toward the top to stay visible. */
    top: auto;
    bottom: calc(100% + 8px);
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Mobile-drawer override:
     The footer's mobile CSS turns the locale panel into a viewport bottom-sheet
     using position:fixed. But the .mobile-menu drawer has transform: translateX()
     which makes position:fixed children relative to the drawer (not the viewport).
     For the drawer's locale picker, we force an inline expanding panel that
     pushes content down and the drawer scrolls to reveal it. */
  @media (max-width: 1023px) {
    .hl-footer__locale--drawer { position: relative; }
    .hl-footer__locale--drawer .hl-footer__locale-panel {
      /* Picker is at the bottom of the drawer → panel opens UPWARD so it stays visible */
      position: absolute !important;
      bottom: calc(100% + 8px) !important;
      top: auto !important;
      left: 0 !important;
      right: auto !important;
      display: none !important;
      width: 100% !important;
      max-width: 100% !important;
      max-height: 60vh !important;
      overflow-y: auto !important;
      margin: 0 !important;
      transform: none !important;
      border: 1px solid var(--border-2) !important;
      border-radius: 8px !important;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.12) !important;
      background: var(--bg);
      z-index: 10;
    }
    .hl-footer__locale--drawer.is-open .hl-footer__locale-panel {
      display: block !important;
      transform: none !important;
    }
    .hl-footer__locale--drawer .hl-footer__locale-list { max-height: 50vh; overflow-y: auto; }
    /* Hide the bottom-sheet backdrop dim — would dim the drawer itself */
    .hl-footer__locale--drawer.is-open::before { display: none !important; }
    /* Hide the drag-handle bar; we're not a sheet here */
    .hl-footer__locale--drawer .hl-footer__locale-panel::before { display: none !important; }
  }

  .mobile-menu__locale-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-2);
    background: var(--bg);
  }
  .mobile-menu__locale-select-wrap .ti-chevron-down {
    position: absolute;
    right: 12px;
    pointer-events: none;
    font-size: 14px;
    color: var(--ink-muted);
  }
  .mobile-menu__locale-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 36px 12px 14px;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
    outline: none;
  }
  .mobile-menu__locale-select option { color: var(--ink, #0f0f0f); background: var(--bg, #fff); }

  .mobile-menu__socials {
    display: flex;
    gap: 14px;
    font-size: 18px;
    color: var(--ink);
  }
  .mobile-menu__socials a { color: inherit; text-decoration: none; }
  .mobile-menu__note {
    margin-top: 18px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
  }

  /* Mobile-only toggle button — hidden on desktop, shown on mobile */
  .nav-mobile-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 1023px) {
    .nav-mobile-toggle { display: inline-flex; }
    .nav-desktop { display: none !important; }
  }

  @media (max-width: 767px) {
    .hl-header {
      grid-template-columns: auto 1fr auto;
      padding-top:    var(--pt-m, 14px) !important;
      padding-bottom: var(--pb-m, 14px) !important;
      padding-left:   var(--px-m, 16px) !important;
      padding-right:  var(--px-m, 16px) !important;
      gap: var(--logo-nav-gap-m, 14px);
    }
    .hl-header__icons { gap: 14px !important; }
    .hl-header__logo { font-size: var(--logo-text-size-mobile, 22px) !important; }
    .hl-header__logo img { max-width: var(--logo-image-max-mobile, 120px) !important; }
    .mobile-menu { width: min(var(--drawer-width, 360px), 92vw); }
  }

  /* ===== Newly-wired settings ===== */
  /* Bottom border is emitted per-section from the inline style block above,
     so it can switch between the .hl-header (constrained) and #shopify-section-* (full-width) targets. */

  /* Pin-on-scroll: when JS adds .is-pinned (after scrolling past the
     threshold from data-pin-threshold), the header becomes position: fixed
     at the top of the viewport. !important beats any inline ID-scoped
     overrides from the {% style %} block above. */
  .hl-header--pinnable.is-pinned {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg);
    animation: hl-pin-down 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hl-header--pinnable.hl-header--pin-shadow.is-pinned {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  }
  @keyframes hl-pin-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }

  /* Transparent over hero — positioning + background are handled by the
     section wrapper (see the inline style block). Liquid-driven overrides
     for --ink / --ink-muted also live there since the stylesheet block
     does not process Liquid. */
  .hl-header--transparent {
    background: transparent !important;
    border-bottom: 0 !important;
  }
  /* Transparent + pinned: the .is-pinned rule (above) already swaps to
     `position: fixed` and applies the user's chosen pinned background +
     text colors via an ID-scoped override in the inline style block. No
     extra rule needed here. */

  /* ===== Top bar ===== */
  .hl-topbar {
    display: flex;
    align-items: center;
    background: var(--ink, #0F0F0F);
    color: var(--bg, #fff);
    font-family: var(--font-menu--family, var(--font-body--family, 'Inter', sans-serif));
    letter-spacing: 0.06em;
    line-height: 1.2;
  }
  .hl-topbar a { color: inherit; text-decoration: none; }
  .hl-topbar a:hover { opacity: 0.7; }
  .hl-topbar--left          { justify-content: flex-start; }
  .hl-topbar--center        { justify-content: center; }
  .hl-topbar--right         { justify-content: flex-end; }
  .hl-topbar--space-between { justify-content: space-between; }
  .hl-topbar__contact { display: inline-flex; align-items: center; gap: 10px; }

  /* ===== Logo position: top (stacked) ===== */
  .hl-header--logo-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav-icons";
    row-gap: 14px;
    text-align: center;
  }
  .hl-header--logo-top .hl-header__logo { grid-area: logo; justify-self: center; order: 0; }
  .hl-header--logo-top .hl-header__left,
  .hl-header--logo-top .hl-header__icons {
    grid-area: nav-icons;
  }
  .hl-header--logo-top .hl-header__left { justify-self: center; }
  .hl-header--logo-top .hl-header__icons { justify-self: end; }

  /* ===== Logo styling ===== */
  .hl-header--logo-upper .hl-header__logo { text-transform: uppercase; }
  .hl-header__logo {
    letter-spacing: var(--logo-track, -0.02em);
    font-weight: var(--logo-w, 700);
  }

  /* ===== Mobile header layout (fixed: hamburger | logo center | icons) ===== */
  @media (max-width: 767px) {
    .hl-header__logo {
      justify-self: center !important;
      order: 0 !important;
    }
    .hl-header__left {
      justify-self: start !important;
    }
    .hl-header__icons {
      justify-self: end !important;
    }
  }

  /* ===== Nav typography overrides ===== */
  .hl-header__nav a,
  .hl-header__nav .link,
  .hl-header__nav .hl-nav-item__trigger {
    font-size: var(--nav-fs, 14px);
    font-weight: var(--nav-w, 500);
    letter-spacing: var(--nav-track, 0);
  }
  .hl-header--nav-upper .hl-header__nav a,
  .hl-header--nav-upper .hl-header__nav .link,
  .hl-header--nav-upper .hl-header__nav .hl-nav-item__trigger {
    text-transform: uppercase;
    letter-spacing: var(--nav-track, 0.08em);
  }

  /* ===== Nav hover effects ===== */
  .hl-header--nav-hover-none .hl-header__nav a:hover,
  .hl-header--nav-hover-none .hl-header__nav .link:hover { /* no-op */ }
  .hl-header--nav-hover-underline .hl-header__nav a:hover,
  .hl-header--nav-hover-underline .hl-header__nav .link:hover { text-decoration: underline; text-underline-offset: 6px; }
  .hl-header--nav-hover-color .hl-header__nav a:hover,
  .hl-header--nav-hover-color .hl-header__nav .link:hover { color: var(--accent, #000000); }
  .hl-header--nav-hover-fade .hl-header__nav a:hover,
  .hl-header--nav-hover-fade .hl-header__nav .link:hover { opacity: 0.6; }
  .hl-header--nav-hover-underline-grow .hl-header__nav a,
  .hl-header--nav-hover-underline-grow .hl-header__nav .link {
    position: relative;
    overflow: visible;
  }
  .hl-header--nav-hover-underline-grow .hl-header__nav a::after,
  .hl-header--nav-hover-underline-grow .hl-header__nav .link::after {
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    bottom: -4px;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hl-header--nav-hover-underline-grow .hl-header__nav a:hover::after,
  .hl-header--nav-hover-underline-grow .hl-header__nav .link:hover::after {
    width: 100%;
  }

  /* ===== Dropdown styles ===== */
  .hl-header--dd-card .hl-nav-item__panel,
  .hl-header--dd-card .hl-nav-dropdown {
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    border-radius: var(--dd-radius, 0);
    padding: var(--dd-pad, 20px);
  }
  .hl-header--dd-minimal .hl-nav-item__panel,
  .hl-header--dd-minimal .hl-nav-dropdown {
    border: 1px solid var(--border-2, currentColor);
    padding: var(--dd-pad, 20px);
  }
  .hl-header--dd-fullwidth .hl-nav-item__panel,
  .hl-header--dd-fullwidth .hl-nav-dropdown {
    width: 100vw;
    left: 50% !important;
    transform: translateX(-50%);
    padding: var(--dd-pad, 20px);
  }

  /* ===== Icon size + line weight ===== */
  .hl-header--icons-sm .hl-header__icons .ti { font-size: 16px; }
  .hl-header--icons-md .hl-header__icons .ti { font-size: 20px; }
  .hl-header--icons-lg .hl-header__icons .ti { font-size: 24px; }
  .hl-header--icons-w-thin .hl-header__icons .ti { stroke-width: 1; -webkit-text-stroke: 0; font-weight: 100; }
  .hl-header--icons-w-bold .hl-header__icons .ti { stroke-width: 2; font-weight: 700; }
  .hl-header__icons { gap: var(--icon-gap, 22px); }

  /* ===== Reveal on first load ===== */
  .hl-header--reveal {
    opacity: 0;
    transform: translateY(-12px);
    animation: hl-header-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--reveal-delay, 200ms);
  }
  @keyframes hl-header-reveal {
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-header--reveal { animation: none; opacity: 1; transform: none; }
  }

  @media (max-width: 767px) {
    .hl-topbar { font-size: 10px !important; padding-left: var(--px-m, 16px) !important; padding-right: var(--px-m, 16px) !important; }
    .hl-topbar--space-between { flex-direction: column; gap: 4px; text-align: center; }
    /* On stacked logo-top mode, drop back to single-row on mobile so it stays compact */
    .hl-header--logo-top {
      grid-template-columns: auto 1fr auto !important;
      grid-template-areas: none !important;
      row-gap: 0;
    }
    .hl-header--logo-top .hl-header__logo { grid-area: auto !important; justify-self: center !important; }
  }
/* END_SECTION:header */

/* START_SECTION:hero-asymmetric (INDEX:51) */
.hl-hero {
    display: grid;
    align-items: center;
  }
  .hl-hero--image-left .hl-hero__copy { order: 2; }
  .hl-hero--image-left .hl-hero__image { order: 1; }
  .hl-hero--align-top { align-items: start; }
  .hl-hero--align-bottom { align-items: end; }
  .hl-hero__image { aspect-ratio: var(--image-aspect, 4/5); }
  .hl-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; }
  .hl-hero__heading {
    line-height: 0.92;
    margin: 24px 0 16px;
    color: inherit;
  }
  .hl-hero__body {
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0 0 36px;
    max-width: 420px;
  }
  .hl-hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .hl-hero__stats {
    margin-top: 48px;
    display: flex;
    gap: 32px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex-wrap: wrap;
  }
  .hl-hero__stat-value { color: var(--ink); font-weight: 500; }
  .hl-hero__image {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--ph-bg-2);
  }
  .hl-hero__badge { position: absolute; top: 24px; left: 24px; }
  .hl-hero__pictured {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: var(--bg);
    color: var(--ink);
    padding: 14px 18px;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.7;
    max-width: 200px;
  }
  .hl-hero__pictured-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
    color: var(--ink-muted);
    margin-bottom: 6px;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-hero { grid-template-columns: 1fr 1fr !important; gap: 32px !important; min-height: auto !important; padding: 48px 32px !important; }
    .hl-hero__copy { padding: 24px 0 !important; }
  }
  @media (max-width: 767px) {
    .hl-hero { grid-template-columns: 1fr !important; padding: 36px 20px !important; min-height: auto !important; gap: 28px !important; }
    .hl-hero__stats { gap: 16px; font-size: 10px; flex-wrap: wrap; }
    .hl-hero--image-left .hl-hero__copy { order: 1; }
    .hl-hero--image-left .hl-hero__image { order: 2; }
  }
/* END_SECTION:hero-asymmetric */

/* START_SECTION:image-banner (INDEX:52) */
.hl-banner { background: var(--bg); }
  .hl-banner__inner {
    position: relative;
    aspect-ratio: var(--aspect-ratio, 21/9);
    overflow: hidden;
  }
  .hl-banner__overlay { position: absolute; inset: 0; pointer-events: none; }
  .hl-banner__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .hl-banner__copy--top-left { justify-content: flex-start; align-items: flex-start; }
  .hl-banner__copy--top-center { justify-content: flex-start; align-items: center; text-align: center; }
  .hl-banner__copy--top-right { justify-content: flex-start; align-items: flex-end; text-align: right; }
  .hl-banner__copy--center-left { justify-content: center; align-items: flex-start; }
  .hl-banner__copy--center-center { justify-content: center; align-items: center; text-align: center; }
  .hl-banner__copy--center-right { justify-content: center; align-items: flex-end; text-align: right; }
  .hl-banner__copy--bottom-left { justify-content: flex-end; align-items: flex-start; }
  .hl-banner__copy--bottom-center { justify-content: flex-end; align-items: center; text-align: center; }
  .hl-banner__copy--bottom-right { justify-content: flex-end; align-items: flex-end; text-align: right; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-banner__inner { aspect-ratio: 16/9; }
    .hl-banner__copy { padding: 48px !important; }
  }
  @media (max-width: 767px) {
    .hl-banner { padding: 0 !important; }
    .hl-banner__inner { aspect-ratio: 4/5; }
    .hl-banner__copy { padding: 24px !important; }
  }
/* END_SECTION:image-banner */

/* START_SECTION:image-grid (INDEX:53) */
.hl-igrid {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-igrid__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    column-gap: var(--col-gap, 12px);
    row-gap: var(--row-gap, 12px);
    grid-auto-flow: dense;
  }
  .hl-igrid--layout-mosaic .hl-igrid__grid {
    grid-auto-rows: minmax(0, var(--mosaic-row, 220px));
  }
  .hl-igrid--layout-masonry .hl-igrid__grid {
    grid-auto-rows: var(--masonry-row, 10px);
  }
  .hl-igrid--layout-masonry .hl-igrid__cell {
    grid-row: span 24;
  }

  .hl-igrid__cell {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--img-radius, 0);
    position: relative;
  }
  .hl-igrid__cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--img-border-w, 0) solid var(--img-border-c, currentColor);
    border-radius: var(--img-radius, 0);
    pointer-events: none;
  }
  .hl-igrid__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-igrid__media > img,
  .hl-igrid__media > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 350ms ease,
                opacity 350ms ease;
  }
  .hl-igrid--fit-contain .hl-igrid__media > img,
  .hl-igrid--fit-contain .hl-igrid__media > svg { object-fit: contain; background: var(--bg); }

  /* Hover effect variants */
  .hl-igrid--hover-zoom      a.hl-igrid__cell:hover .hl-igrid__media > img,
  .hl-igrid--hover-zoom      a.hl-igrid__cell:hover .hl-igrid__media > svg { transform: scale(1.04); }
  .hl-igrid--hover-zoom-soft a.hl-igrid__cell:hover .hl-igrid__media > img,
  .hl-igrid--hover-zoom-soft a.hl-igrid__cell:hover .hl-igrid__media > svg { transform: scale(1.02); }
  .hl-igrid--hover-fade      a.hl-igrid__cell:hover .hl-igrid__media > img,
  .hl-igrid--hover-fade      a.hl-igrid__cell:hover .hl-igrid__media > svg { opacity: 0.78; }
  .hl-igrid--hover-grayscale .hl-igrid__media > img,
  .hl-igrid--hover-grayscale .hl-igrid__media > svg { filter: grayscale(100%); }
  .hl-igrid--hover-grayscale a.hl-igrid__cell:hover .hl-igrid__media > img,
  .hl-igrid--hover-grayscale a.hl-igrid__cell:hover .hl-igrid__media > svg { filter: grayscale(0%); }
  .hl-igrid--hover-lift      a.hl-igrid__cell { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .hl-igrid--hover-lift      a.hl-igrid__cell:hover { transform: translateY(-4px); }

  /* Hide captions globally */
  .hl-igrid--no-captions .hl-igrid__caption,
  .hl-igrid--no-captions .hl-igrid__overlay-tint { display: none !important; }

  /* Reveal-on-scroll */
  .hl-igrid--reveal .hl-igrid__cell {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .hl-igrid--reveal .hl-igrid__cell.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-igrid--reveal .hl-igrid__cell { opacity: 1; transform: none; transition: none; }
    .hl-igrid--hover-zoom a.hl-igrid__cell:hover .hl-igrid__media > img,
    .hl-igrid--hover-zoom a.hl-igrid__cell:hover .hl-igrid__media > svg,
    .hl-igrid--hover-lift a.hl-igrid__cell:hover { transform: none; }
  }

  /* Overlay tint */
  .hl-igrid__overlay-tint {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg, #000);
    opacity: var(--overlay-op, 0.25);
    pointer-events: none;
    transition: opacity 250ms ease;
  }
  .hl-igrid--overlay-hover .hl-igrid__overlay-tint { opacity: 0; }
  .hl-igrid--overlay-hover .hl-igrid__cell:hover .hl-igrid__overlay-tint { opacity: var(--overlay-op, 0.25); }
  .hl-igrid--overlay-none .hl-igrid__overlay-tint { display: none; }

  /* Caption positions */
  .hl-igrid__caption {
    position: absolute;
    color: var(--cap-color, #fff);
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    z-index: 2;
    padding: 16px 18px;
    max-width: 80%;
  }
  .hl-igrid--overlay-none .hl-igrid__caption,
  .hl-igrid--overlay-hover .hl-igrid__cell:not(:hover) .hl-igrid__caption { color: var(--cap-color, #fff); }
  .hl-igrid__caption--top-left     { top: 0; left: 0; }
  .hl-igrid__caption--top-right    { top: 0; right: 0; text-align: right; }
  .hl-igrid__caption--bottom-left  { bottom: 0; left: 0; }
  .hl-igrid__caption--bottom-right { bottom: 0; right: 0; text-align: right; }
  .hl-igrid__caption--center {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; max-width: 88%;
  }

  .hl-igrid__tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.9;
  }
  .hl-igrid__title {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: var(--cap-title-fs, 22px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .hl-igrid__subtitle {
    font-size: var(--cap-sub-fs, 12px);
    opacity: 0.9;
    letter-spacing: 0.04em;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-igrid__grid {
      grid-template-columns: repeat(var(--cols-t, 3), 1fr);
      column-gap: 12px;
      row-gap: 12px;
    }
    .hl-igrid--layout-mosaic .hl-igrid__grid { grid-auto-rows: minmax(0, var(--mosaic-row-t, 220px)); }
  }
  @media (max-width: 767px) {
    .hl-igrid__grid {
      grid-template-columns: repeat(var(--cols-m, 2), 1fr);
      column-gap: var(--col-gap-m, 8px);
      row-gap: var(--row-gap-m, 8px);
    }
    .hl-igrid--layout-mosaic .hl-igrid__grid { grid-auto-rows: minmax(0, var(--mosaic-row-m, 160px)); }
    .hl-igrid__cell {
      grid-column: span 1 !important;
      grid-row: span 1 !important;
    }
  }
  @media (max-width: 767px) {
    .hl-igrid {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-igrid__title { font-size: var(--cap-title-fs-m, 16px); }
    .hl-igrid__caption { padding: 12px 14px; }
  }
/* END_SECTION:image-grid */

/* START_SECTION:image-hotspots (INDEX:54) */
.hl-hotspots { background: var(--bg); color: var(--ink); }
  .hl-hs__stage { position: relative; overflow: visible; }
  .hl-hs__hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
  .hl-hs__dot {
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
  .hl-hs__dot::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    background: currentColor; opacity: 0.18; animation: hs-pulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes hs-pulse {
    0%   { transform: scale(0.8); opacity: 0.35; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  .hl-hs__dot:hover, .hl-hs__dot.is-open { transform: scale(1.05); }
  .hl-hs__card {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
    overflow: hidden;
    z-index: 3;
  }
  .hl-hs__hotspot.is-open .hl-hs__card,
  .hl-hs__hotspot:hover .hl-hs__card { opacity: 1; visibility: visible; }
  /* Flip the card when hotspot is near the right edge */
  .hl-hs__hotspot[style*="left: 6"] .hl-hs__card,
  .hl-hs__hotspot[style*="left: 7"] .hl-hs__card,
  .hl-hs__hotspot[style*="left: 8"] .hl-hs__card,
  .hl-hs__hotspot[style*="left: 9"] .hl-hs__card { left: auto; right: calc(100% + 12px); }
  @media (max-width: 767px) {
    .hl-hs__card { position: fixed; left: 30px !important; right: 30px !important; top: 50% !important; transform: translateY(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-hs__dot::before { animation: none; }
  }
/* END_SECTION:image-hotspots */

/* START_SECTION:image-with-text (INDEX:55) */
.hl-image-text__grid {
    display: grid;
    align-items: stretch;
    min-height: var(--min-h, 480px);
  }
  .hl-image-text__image,
  .hl-image-text__copy {
    background: var(--bg, transparent);
    color: var(--ink, currentColor);
    min-width: 0;
  }
  .hl-image-text--right .hl-image-text__image { order: 2; }
  .hl-image-text__image {
    aspect-ratio: var(--image-ratio, auto);
    overflow: hidden;
  }
  .hl-image-text__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hl-image-text__body p { margin: 0 0 18px; }
  .hl-image-text__body p:last-child { margin-bottom: 0; }
  .hl-image-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    text-decoration: none;
    cursor: pointer;
  }
  .hl-image-text--align-center .hl-image-text__cta { align-self: center; }
  .hl-image-text--align-right  .hl-image-text__cta { align-self: flex-end; }

  /* Link CTA */
  .hl-image-text__cta--link {
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  /* Arrow CTA */
  .hl-image-text__cta--arrow {
    font-size: 13px; font-weight: 600; color: inherit;
  }
  .hl-image-text__cta--arrow .ti { transition: transform 200ms ease; }
  .hl-image-text__cta--arrow:hover .ti { transform: translateX(4px); }

  /* Button CTAs (solid + ghost) */
  .hl-image-text__cta--btn {
    padding: var(--btn-py, 14px) var(--btn-px, 28px);
    font-size: var(--btn-fs, 12px);
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-track, 0.16em);
    text-transform: uppercase;
    border-radius: var(--btn-radius, 0);
    border: var(--btn-border-w, 1px) solid transparent;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
    line-height: 1;
    white-space: nowrap;
  }
  .hl-image-text--btn-shape-rounded .hl-image-text__cta--btn { border-radius: 8px; }
  .hl-image-text--btn-shape-pill    .hl-image-text__cta--btn { border-radius: 999px; }

  /* Solid (defaults to ink/bg) — overridden by --btn-bg/--btn-fg if set */
  .hl-image-text__cta--solid {
    background: var(--btn-bg, var(--ink));
    color: var(--btn-fg, var(--bg));
    border-color: var(--btn-border, transparent);
  }
  .hl-image-text__cta--solid:hover {
    background: var(--btn-bg-hover, var(--accent, #000000));
    color: var(--btn-fg-hover, #fff);
    border-color: var(--btn-border-hover, transparent);
  }

  /* Ghost — defaults to outlined currentColor */
  .hl-image-text__cta--ghost {
    background: var(--btn-bg, transparent);
    color: var(--btn-fg, currentColor);
    border-color: var(--btn-border, currentColor);
  }
  .hl-image-text__cta--ghost:hover {
    background: var(--btn-bg-hover, currentColor);
    color: var(--btn-fg-hover, var(--bg));
    border-color: var(--btn-border-hover, currentColor);
  }
  .hl-image-text--align-center .hl-image-text__cta { align-self: center; }
  .hl-image-text--align-right  .hl-image-text__cta { align-self: flex-end; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-image-text__grid { grid-template-columns: 1fr 1fr !important; min-height: auto !important; }
    .hl-image-text__image { aspect-ratio: var(--image-ratio-t, 4/5); }
    .hl-image-text__copy { padding: var(--copy-pad-y-m, 32px) 28px !important; }
    .hl-image-text__copy h2 { font-size: clamp(28px, 4.6vw, 44px) !important; }
    .hl-image-text__body  { font-size: var(--body-size-m, 14px) !important; }
  }
  @media (max-width: 767px) {
    .hl-image-text__grid { grid-template-columns: 1fr !important; min-height: auto !important; }
    .hl-image-text--image-first-m .hl-image-text__image { order: 0; }
    .hl-image-text--image-first-m .hl-image-text__copy  { order: 1; }
    .hl-image-text--copy-first-m  .hl-image-text__image { order: 1; }
    .hl-image-text--copy-first-m  .hl-image-text__copy  { order: 0; }
    .hl-image-text__image { aspect-ratio: var(--image-ratio-m, 16/9); }
    .hl-image-text__copy { padding: var(--copy-pad-y-m, 28px) var(--copy-pad-x-m, 20px) !important; }
    .hl-image-text__copy h2 { font-size: var(--heading-size-m, 28px) !important; }
    .hl-image-text__cta--btn { padding: 12px 22px !important; font-size: 11px !important; min-height: 44px; }
  }
/* END_SECTION:image-with-text */

/* START_SECTION:instagram-feed (INDEX:56) */
.hl-ig { background: var(--bg); color: var(--ink); }
  .hl-ig__eyebrow { margin-bottom: 12px; }
  .hl-ig__heading { word-break: break-word; }
  .hl-ig__handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
    transition: opacity 200ms ease;
  }
  .hl-ig__handle:hover { opacity: 1; }
  .hl-ig__handle .ti { font-size: 16px; }

  .hl-ig__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
    gap: var(--gap, 4px);
  }

  .hl-ig__cell {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius, 0);
  }
  .hl-ig__media {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .hl-ig__media img,
  .hl-ig__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
  }

  /* Hover effects */
  .hl-ig--hover-zoom .hl-ig__cell:hover .hl-ig__media img { transform: scale(1.06); }
  .hl-ig--hover-fade .hl-ig__cell:hover .hl-ig__media img { filter: brightness(0.85); }
  .hl-ig--hover-bw   .hl-ig__media img { filter: grayscale(100%); }
  .hl-ig--hover-bw   .hl-ig__cell:hover .hl-ig__media img { filter: grayscale(0%); }

  /* Overlay on hover */
  .hl-ig__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-c, #000);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--overlay-fg, #fff);
    transition: opacity 250ms ease;
    pointer-events: none;
    z-index: 2;
  }
  .hl-ig__cell:hover .hl-ig__overlay { opacity: var(--overlay-op, 0.35); }
  .hl-ig__overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    transform: translateY(8px);
    transition: transform 250ms ease;
  }
  .hl-ig__cell:hover .hl-ig__overlay-inner { transform: translateY(0); }
  .hl-ig__overlay-inner .ti-brand-instagram { font-size: 28px; }
  .hl-ig__stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
  }
  .hl-ig__stat { display: inline-flex; align-items: center; gap: 6px; }
  .hl-ig__stat .ti { font-size: 14px; }

  /* Post-type badges (video / carousel) */
  .hl-ig__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  .hl-ig__badge .ti { font-size: 18px; }

  .hl-ig__cta { display: inline-flex; align-items: center; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-ig__grid {
      grid-template-columns: repeat(var(--cols-t, 4), minmax(0, 1fr));
      gap: 4px;
    }
  }
  @media (max-width: 767px) {
    .hl-ig__grid {
      grid-template-columns: repeat(var(--cols-m, 3), minmax(0, 1fr));
      gap: var(--gap-m, 2px);
    }
  }
  @media (max-width: 767px) {
    .hl-ig {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-ig__overlay-inner .ti-brand-instagram { font-size: 22px; }
    .hl-ig__stats { font-size: 11px; gap: 10px; }
    /* On touch devices, keep overlay slightly visible since there's no hover */
    @media (hover: none) {
      .hl-ig__overlay { opacity: 0.15 !important; }
      .hl-ig__cell:active .hl-ig__overlay { opacity: var(--overlay-op, 0.35) !important; }
    }
  }
/* END_SECTION:instagram-feed */

/* START_SECTION:journal-quote (INDEX:57) */
.hl-quote {
    background: var(--bg);
    color: var(--ink);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
    position: relative;
  }

  /* === SPLIT layout (default): two columns side-by-side === */
  .hl-quote--layout-split {
    display: grid;
    grid-template-columns: var(--copy-width, 1fr) var(--image-width, 1fr);
    align-items: stretch;
    min-height: var(--min-h, 520px);
  }
  .hl-quote--layout-split.hl-quote--image-left .hl-quote__copy { order: 2; }
  .hl-quote--layout-split.hl-quote--image-left .hl-quote__image { order: 1; }

  /* === STACKED layout: image on top or bottom === */
  .hl-quote--layout-stacked {
    display: flex;
    flex-direction: column;
    min-height: var(--min-h, 520px);
  }
  .hl-quote--layout-stacked.hl-quote--image-left .hl-quote__image { order: -1; }
  .hl-quote--layout-stacked.hl-quote--image-right .hl-quote__image { order: 1; }
  .hl-quote--layout-stacked .hl-quote__image { aspect-ratio: 16/9; max-height: 60vh; }

  /* === NO-IMAGE layout: centered quote, no image === */
  .hl-quote--layout-no-image {
    display: block;
    min-height: var(--min-h, 360px);
  }
  .hl-quote--layout-no-image .hl-quote__copy {
    max-width: 980px;
    margin: 0 auto;
  }

  /* === OVERLAY layout: full-bleed image, text on top === */
  .hl-quote--layout-overlay {
    display: grid;
    min-height: var(--min-h, 520px);
    position: relative;
  }
  .hl-quote--layout-overlay > * {
    grid-column: 1;
    grid-row: 1;
  }
  .hl-quote--layout-overlay .hl-quote__copy {
    z-index: 2;
    color: var(--overlay-text, #fff);
    background: transparent !important;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .hl-quote--layout-overlay .hl-quote__copy-inner {
    max-width: 880px;
    margin: 0 auto;
  }
  .hl-quote--layout-overlay .hl-quote__image { z-index: 1; }
  .hl-quote--layout-overlay .hl-quote__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-color, #000);
    opacity: var(--overlay-opacity, 0.35);
    pointer-events: none;
    z-index: 1;
  }
  .hl-quote--parallax .hl-quote__image-el {
    will-change: transform;
    transform: translateZ(0) scale(1.1);
    transition: transform 8s linear;
  }
  .hl-quote--parallax:hover .hl-quote__image-el { transform: translateZ(0) scale(1.18); }

  /* === Copy column === */
  .hl-quote__copy {
    background: var(--bg);
    color: var(--ink);
    padding: var(--copy-py, 80px) var(--copy-px, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .hl-quote--align-center .hl-quote__copy { text-align: center; align-items: center; }
  .hl-quote--align-right  .hl-quote__copy { text-align: right;  align-items: flex-end; }
  .hl-quote__copy-inner { width: 100%; max-width: none; }
  .hl-quote__eyebrow { margin-bottom: 24px; }

  /* === Divider === */
  .hl-quote__divider {
    width: 48px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
    margin-bottom: 24px;
  }
  .hl-quote--align-center .hl-quote__divider { margin-left: auto; margin-right: auto; }
  .hl-quote--align-right  .hl-quote__divider { margin-left: auto; }

  /* === Quote mark (large decorative) === */
  .hl-quote__mark {
    font-family: var(--font-display--family, 'Syne', serif);
    font-size: 120px;
    line-height: 0.6;
    opacity: 0.25;
    margin-bottom: 8px;
    user-select: none;
  }

  .hl-quote__quote {
    font-size: var(--quote-size, 52px);
    line-height: var(--quote-lh, 1.05);
    font-weight: var(--quote-weight, 700);
    margin: 0 0 28px;
  }
  .hl-quote--italic .hl-quote__quote { font-style: italic; }
  .hl-quote--mark-none .hl-quote__quote { quotes: none; }

  /* === Author === */
  .hl-quote__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
  }
  .hl-quote--align-center .hl-quote__author { justify-content: center; }
  .hl-quote--align-right  .hl-quote__author { justify-content: flex-end; }
  .hl-quote__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: 0 0 48px;
  }
  .hl-quote__author-text { text-align: left; }
  .hl-quote--align-center .hl-quote__author-text { text-align: left; }
  .hl-quote__author-name {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .hl-quote__author-role {
    font-size: 11px;
    opacity: 0.7;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* === Meta === */
  .hl-quote__meta {
    font-size: 13px;
    opacity: 0.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .hl-quote__meta p { margin: 0; }

  /* === CTA variants === */
  .hl-quote__cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
  .hl-quote--align-center .hl-quote__cta { align-self: center; }
  .hl-quote--align-right  .hl-quote__cta { align-self: flex-end; }
  .hl-quote__cta--link {
    font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .hl-quote__cta--arrow { font-size: 13px; font-weight: 600; }
  .hl-quote__cta--arrow .ti { font-size: 16px; transition: transform 200ms ease; }
  .hl-quote__cta--arrow:hover .ti { transform: translateX(4px); }

  /* === Image === */
  .hl-quote__image {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    aspect-ratio: var(--image-ratio, auto);
    min-width: 0;
  }
  .hl-quote--layout-split .hl-quote__image { aspect-ratio: var(--image-ratio, auto); }
  .hl-quote__image-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-pos, center);
    display: block;
  }
  .hl-quote__image-caption {
    position: absolute;
    bottom: 24px;
    right: 24px;
    color: #fff;
    opacity: 0.7;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 2;
  }

  /* === Tablet === */
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-quote--layout-split { grid-template-columns: 1fr 1fr; min-height: auto; }
    .hl-quote--layout-split .hl-quote__image { aspect-ratio: 4/5; }
    .hl-quote__quote { font-size: calc(var(--quote-size, 52px) * 0.78); }
    .hl-quote__copy { padding: 40px 32px; }
  }
  @media (max-width: 767px) {
    .hl-quote--layout-split { grid-template-columns: 1fr; }
    .hl-quote--layout-split .hl-quote__image { aspect-ratio: 16/9; }
  }

  /* === Mobile === */
  @media (max-width: 767px) {
    .hl-quote {
      padding-top: var(--pt-m, 48px);
      padding-bottom: var(--pb-m, 48px);
    }
    .hl-quote__copy {
      padding: var(--copy-py-m, 36px) var(--copy-px-m, 20px);
    }
    .hl-quote__quote { font-size: var(--quote-size-m, 28px); }
    .hl-quote__mark { font-size: 80px; }
    .hl-quote--layout-split .hl-quote__image,
    .hl-quote--layout-stacked .hl-quote__image,
    .hl-quote--layout-overlay .hl-quote__image { height: var(--image-h-m, 320px); aspect-ratio: auto; }
    .hl-quote--hide-image-m .hl-quote__image { display: none; }
  /* Auto-generated mobile typography overrides */
    .hl-quote__mark { font-size: 50px; }

  }

  @media (prefers-reduced-motion: reduce) {
    .hl-quote--parallax .hl-quote__image-el,
    .hl-quote--parallax:hover .hl-quote__image-el {
      transform: none !important;
      transition: none !important;
    }
  }
/* END_SECTION:journal-quote */

/* START_SECTION:logo-bar (INDEX:58) */
.hl-logo-bar__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .hl-logo-bar--marquee { overflow: hidden; }
  .hl-logo-bar--marquee .hl-logo-bar__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: hl-marquee var(--marquee-duration, 35s) linear infinite;
  }
  .hl-logo-bar--marquee:hover .hl-logo-bar__row { animation-play-state: paused; }
  .hl-logo-bar--mono img { filter: grayscale(1); }
  .hl-logo-bar__item {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: opacity 250ms ease;
  }
  .hl-logo-bar__item:hover img { opacity: 1 !important; }
/* END_SECTION:logo-bar */

/* START_SECTION:lookbook-grid (INDEX:59) */
.hl-lbg { background: var(--bg); color: var(--ink); }
  .hl-lbg__body { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 12px 0 0; max-width: 680px; }

  .hl-lbg__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--gap, 32px);
  }

  .hl-lbg__look { display: flex; flex-direction: column; min-width: 0; }
  .hl-lbg__media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
    text-decoration: none;
    color: inherit;
  }
  .hl-lbg__media img,
  .hl-lbg__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hl-lbg__media:hover img { transform: scale(1.04); }
  .hl-lbg__kicker {
    position: absolute;
    top: 14px;
    left: 14px;
    color: var(--ui-light, #fff);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.55);
    padding: 6px 10px;
    backdrop-filter: blur(4px);
  }
  .hl-lbg__meta { padding-top: 18px; }
  .hl-lbg__title { margin: 0 0 8px; line-height: 1.1; }
  .hl-lbg__copy { line-height: 1.65; opacity: 0.9; margin-bottom: 14px; }

  /* Products display variants */
  .hl-lbg__products { display: grid; gap: 12px; margin-bottom: 16px; }
  .hl-lbg--show-list .hl-lbg__products { grid-template-columns: 1fr; }
  .hl-lbg--show-grid .hl-lbg__products { grid-template-columns: 1fr 1fr; }
  .hl-lbg--show-strip .hl-lbg__products {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -4px;
    margin-right: -4px;
    padding: 0 4px;
  }
  .hl-lbg--show-strip .hl-lbg__products::-webkit-scrollbar { display: none; }
  .hl-lbg--show-strip .hl-lbg__prod { flex: 0 0 60%; }

  .hl-lbg__prod {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    padding: 6px 0;
    transition: opacity 200ms ease;
  }
  .hl-lbg__prod:hover { opacity: 0.7; }
  .hl-lbg__prod img {
    width: 56px;
    height: 70px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-lbg--show-grid .hl-lbg__prod {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hl-lbg--show-grid .hl-lbg__prod img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
  }
  .hl-lbg__prod-meta { min-width: 0; flex: 1; }
  .hl-lbg__prod-title { font-size: 13px; line-height: 1.2; margin-bottom: 2px; word-break: break-word; }
  .hl-lbg__prod-price { font-size: 12px; opacity: 0.85; }

  .hl-lbg__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-lbg__cta .ti { font-size: 14px; transition: transform 200ms ease; }
  .hl-lbg__cta:hover .ti { transform: translateX(4px); }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-lbg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m, 28px); }
    .hl-lbg--show-strip .hl-lbg__prod { flex: 0 0 50%; }
  }
  @media (max-width: 767px) {
    .hl-lbg__grid { grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); gap: var(--gap-m, 28px); }
    .hl-lbg--show-strip .hl-lbg__prod { flex: 0 0 70%; }
  }
  @media (max-width: 767px) {
    .hl-lbg {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-lbg__prod img { width: 48px; height: 60px; }
  }
/* END_SECTION:lookbook-grid */

/* START_SECTION:lookbook-story (INDEX:60) */
.hl-lbs { background: var(--bg); color: var(--ink); }
  .hl-lbs__intro {
    font-size: 16px;
    line-height: 1.6;
    margin: 20px auto 0;
    max-width: 640px;
    opacity: 0.85;
  }
  .hl-lbs__intro p { margin: 0 0 8px; }
  .hl-lbs__intro p:last-child { margin-bottom: 0; }

  .hl-lbs__chapters {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap, 120px);
  }
  .hl-lbs__chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .hl-lbs__chapter--right .hl-lbs__media { order: 2; }
  .hl-lbs__chapter--right .hl-lbs__copy  { order: 1; }

  .hl-lbs__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-lbs__media img,
  .hl-lbs__media svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hl-lbs__chapter-num {
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--ui-light, #fff);
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 80px;
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    pointer-events: none;
  }

  .hl-lbs__copy { padding: 0 24px; min-width: 0; }
  .hl-lbs__kicker { margin-bottom: 14px; }
  .hl-lbs__title { line-height: 1.05; margin: 0 0 20px; }
  .hl-lbs__body  { line-height: 1.7; opacity: 0.9; }
  .hl-lbs__body p { margin: 0 0 14px; }
  .hl-lbs__body p:last-child { margin-bottom: 0; }

  .hl-lbs__product {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 8px;
    padding: 14px;
    border: 1px solid var(--border-2, currentColor);
    color: inherit;
    text-decoration: none;
    transition: background 200ms ease;
  }
  .hl-lbs__product:hover { background: rgba(0,0,0,0.04); }
  .hl-lbs__product-img {
    width: 60px;
    height: 75px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-lbs__product-meta { flex: 1; min-width: 0; }
  .hl-lbs__product-eyebrow {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
  }
  .hl-lbs__product-title { font-size: 14px; line-height: 1.2; }
  .hl-lbs__product-price { font-size: 12px; opacity: 0.85; margin-top: 2px; }
  .hl-lbs__product-arrow { font-size: 16px; opacity: 0.6; transition: transform 200ms ease, opacity 200ms ease; }
  .hl-lbs__product:hover .hl-lbs__product-arrow { transform: translateX(4px); opacity: 1; }

  .hl-lbs__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-lbs__cta .ti { font-size: 14px; transition: transform 200ms ease; }
  .hl-lbs__cta:hover .ti { transform: translateX(4px); }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-lbs__chapter { gap: 32px; }
    .hl-lbs__chapter-num { font-size: 56px; top: 16px; left: 16px; }
  }
  @media (max-width: 767px) {
    .hl-lbs {
      padding-top: var(--pt-m, 56px) !important;
      padding-bottom: var(--pb-m, 56px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-lbs__chapters { gap: var(--row-gap-m, 56px); }
    .hl-lbs__chapter {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .hl-lbs__chapter--right .hl-lbs__media { order: 0; }
    .hl-lbs__chapter--right .hl-lbs__copy  { order: 1; }
    .hl-lbs__copy { padding: 0; }
    .hl-lbs__title { font-size: 28px !important; }
    .hl-lbs__heading { font-size: 36px !important; }
    .hl-lbs__chapter-num { font-size: 40px; }
  /* Auto-generated mobile typography overrides */
    .hl-lbs__chapter-num { font-size: 38px; }

  }
/* END_SECTION:lookbook-story */

/* START_SECTION:lookbook (INDEX:61) */
.hl-look { background: var(--bg); color: var(--ink); }
  .hl-look__body { line-height: 1.7; opacity: 0.85; margin: 12px 0 0; max-width: 640px; }

  .hl-look__stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
  }
  .hl-look__image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  .hl-look__spot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
  .hl-look__dot {
    width: var(--hot-size, 32px);
    height: var(--hot-size, 32px);
    border: 0;
    background: var(--hot-bg, #fff);
    color: var(--hot-fg, #0F0F0F);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    padding: 0;
    font-size: 18px;
    line-height: 1;
    transition: transform 200ms ease;
  }
  .hl-look--shape-circle .hl-look__dot { border-radius: 50%; }
  .hl-look--shape-square .hl-look__dot { border-radius: 0; }
  .hl-look--shape-pill   .hl-look__dot { border-radius: 999px; padding: 0 14px; width: auto; min-width: var(--hot-size, 32px); }
  .hl-look__dot:hover { transform: scale(1.1); }

  .hl-look__pulse {
    position: absolute; inset: 0;
    background: var(--hot-bg, #fff);
    opacity: 0.5;
    border-radius: inherit;
    animation: hl-look-pulse 2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes hl-look-pulse {
    0%   { transform: scale(1); opacity: 0.5; }
    70%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
  }

  .hl-look__card {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 6px);
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    width: 240px;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 5;
  }
  .hl-look__spot:hover .hl-look__card,
  .hl-look__spot:focus-within .hl-look__card,
  .hl-look__spot.is-open .hl-look__card {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .hl-look__card-link {
    display: flex;
    gap: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
  }
  .hl-look__card-img {
    width: 64px; height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ph-bg, #CCCCCC);
    display: block;
  }
  .hl-look__card-meta { min-width: 0; }
  .hl-look__card-tag {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
  }
  .hl-look__card-title { font-size: 13px; line-height: 1.2; margin-bottom: 4px; }
  .hl-look__card-price { font-size: 12px; opacity: 0.85; }
  .hl-look__card-empty { padding: 4px 0; }
  .hl-look__card-empty .hl-look__card-title { margin-bottom: 6px; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-look { padding-left: 32px !important; padding-right: 32px !important; }
    .hl-look__card { width: 230px; }
  }
  @media (max-width: 767px) {
    .hl-look {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-look__card { width: 200px; }
    .hl-look__card-img { width: 56px; height: 70px; }
  }
/* END_SECTION:lookbook */

/* START_SECTION:multicolumn (INDEX:62) */
.hl-multi__grid { display: grid; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-multi__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  }
  @media (max-width: 767px) {
    .hl-multi__grid { grid-template-columns: 1fr !important; }
  }
/* END_SECTION:multicolumn */

/* START_SECTION:newsletter-block (INDEX:63) */
.hl-newsletter {
    background: var(--newsletter-bg, var(--bg));
    color: var(--newsletter-fg, var(--ink));
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .hl-newsletter--stacked { grid-template-columns: 1fr; gap: 28px; }
  .hl-newsletter--centered { grid-template-columns: 1fr; gap: 28px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
  .hl-newsletter--centered .hl-newsletter__body { margin-left: auto; margin-right: auto; }
  .hl-newsletter__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 14px;
  }
  .hl-newsletter__heading {
    font-size: 62px;
    line-height: 0.95;
    margin: 0 0 16px;
  }
  .hl-newsletter__emph {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .hl-newsletter__body {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    max-width: 420px;
    opacity: 0.9;
  }
  .hl-newsletter__row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 18px;
  }
  .hl-newsletter__email {
    color: var(--input-fg, currentColor);
    background: var(--input-bg, transparent);
    border-bottom: 1px solid var(--input-border, currentColor);
  }
  .hl-newsletter__email::placeholder { color: currentColor; opacity: 0.6; }
  .hl-newsletter__email:focus-visible,
  .hl-newsletter__email:focus{
    outline: none;
    box-shadow: none;
  }

  /* Button — color-and-shape configurable */
  .hl-newsletter__submit {
    background: var(--btn-bg, #fff);
    color: var(--btn-fg, var(--accent));
    border: var(--btn-border-w, 0) solid var(--btn-border, transparent);
    padding: var(--btn-py, 14px) var(--btn-px, 24px);
    font-size: var(--btn-fs, 11px);
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-track, 0.18em);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--btn-radius, 0);
    font-family: var(--font-button--family, var(--font-body--family, 'Inter', sans-serif));
    white-space: nowrap;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  }
  .hl-newsletter__submit:hover {
    background: var(--btn-bg-hover, #0F0F0F);
    color: var(--btn-fg-hover, #fff);
    border-color: var(--btn-border-hover, transparent);
  }

  /* Button shape variants */
  .hl-newsletter--btn-shape-pill .hl-newsletter__submit  { border-radius: 0; }
  .hl-newsletter--btn-shape-round .hl-newsletter__submit { border-radius: 0px; }

  /* Style variants — preset combinations the merchant can pick */
  .hl-newsletter--btn-ghost .hl-newsletter__submit {
    background: transparent;
    color: currentColor;
    border: 1px solid currentColor;
  }
  .hl-newsletter--btn-ghost .hl-newsletter__submit:hover {
    background: currentColor;
    color: var(--bg);
  }
  .hl-newsletter--btn-ink .hl-newsletter__submit {
    background: var(--ink, #0F0F0F);
    color: var(--bg, #fff);
    border: none;
  }
  .hl-newsletter--btn-ink .hl-newsletter__submit:hover {
    background: var(--accent, #000000);
    color: var(--bg, #fff);
  }
  .hl-newsletter--btn-accent .hl-newsletter__submit {
    background: var(--accent, #000000);
    color: var(--bg, #fff);
    border: none;
  }
  .hl-newsletter--btn-accent .hl-newsletter__submit:hover {
    background: var(--ink, #0F0F0F);
    color: var(--bg, #fff);
  }
  .hl-newsletter--btn-lift .hl-newsletter__submit:hover { transform: translateY(-2px); }
  .hl-newsletter__feedback {
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin-top: 6px;
  }
  .hl-newsletter__terms {
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0.8;
    line-height: 1.7;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-newsletter { grid-template-columns: 1fr; gap: 32px; max-width: 720px; margin-left: auto; margin-right: auto; }
    .hl-newsletter__heading { font-size: clamp(32px, 5vw, 44px); }
  }
  @media (max-width: 767px) {
    .hl-newsletter { grid-template-columns: 1fr; gap: 28px; }
  }
  @media (max-width: 767px) {
    .hl-newsletter__heading { font-size: 36px; }
    .hl-newsletter__row { flex-direction: column; align-items: stretch; gap: 12px; }
    .hl-newsletter__submit { width: 100%; }
  /* Auto-generated mobile typography overrides */
    .hl-newsletter__heading { font-size: 32px; }
    #shopify-section-{{ section.id }}  .hl-newsletter {
      gap: 20px !important;
    }
  }
/* END_SECTION:newsletter-block */

/* START_SECTION:newsletter-popup (INDEX:64) */
.hl-nlpop {
    position: fixed;
    inset: 0;
    z-index: 195;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease, visibility 300ms ease;
  }
  .hl-nlpop[hidden] { display: none; }
  .hl-nlpop.is-open { visibility: visible; opacity: 1; }
  .hl-nlpop__backdrop {
    position: absolute;
    inset: 0;
    /* Defensive default — merchant overrides via backdrop_color + backdrop_opacity
       settings (see inline {% style %} block above which has higher specificity). */
    background: var(--nlpop-backdrop, rgba(15, 15, 15, 0.55));
  }
  .hl-nlpop__panel {
    position: relative;
    background: var(--bg);
    color: var(--ink);
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: hidden;
    /* No box-shadow here — controlled per-section via the "Popup drop shadow" setting. */
    transform: translateY(16px) scale(0.98);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hl-nlpop.is-open .hl-nlpop__panel { transform: translateY(0) scale(1); }
  .hl-nlpop--layout-stacked .hl-nlpop__panel { grid-template-columns: 1fr; }
  .hl-nlpop--layout-text-only .hl-nlpop__panel { grid-template-columns: 1fr; }

  .hl-nlpop__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: 0;
    color: var(--ui-dark, #0f0f0f);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3;
    transition: opacity 200ms ease;
  }
  .hl-nlpop__close:hover { opacity: 0.75; }
  .hl-nlpop__close .ti { font-size: 18px; }

  .hl-nlpop__media {
    background: var(--ph-bg, #CCCCCC);
    min-height: 320px;
    position: relative;
    overflow: hidden;
  }
  .hl-nlpop__media picture { display: contents; }
  .hl-nlpop__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hl-nlpop__body {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 32px);
  }
  .hl-nlpop--align-center .hl-nlpop__body { text-align: center; align-items: center; }
  .hl-nlpop--align-right  .hl-nlpop__body { text-align: right;  align-items: flex-end; }
  .hl-nlpop__eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; opacity: 0.7;
  }
  .hl-nlpop__heading { line-height: 1.05; margin: 0; }
  .hl-nlpop__copy { font-size: 14px; line-height: 1.6; opacity: 0.9; }
  .hl-nlpop__copy p { margin: 0 0 10px; }
  .hl-nlpop__copy p:last-child { margin-bottom: 0; }

  .hl-nlpop__form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; width: 100%; }
  .hl-nlpop__row { display: flex; gap: 10px; }
  /* Stacked: email above, button below — both full width */
  .hl-nlpop__row--stacked { flex-direction: column; gap: 12px; }
  .hl-nlpop__row--stacked .hl-nlpop__email { width: 100%; border: 1px solid var(--border-2, currentColor); }
  .hl-nlpop__row--stacked .hl-nlpop__submit { width: 100%; justify-content: center; }
  /* Inline: email + button on the same line, joined visually */
  .hl-nlpop__row--inline { flex-direction: row; gap: 0; }
  .hl-nlpop__row--inline .hl-nlpop__email { border-right: 0; }

  .hl-nlpop__email {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-2, currentColor);
    color: currentColor;
    font: inherit;
    font-size: 14px;
    padding: 14px 16px;
    outline: none;
    min-width: 0;
  }
  .hl-nlpop__email::placeholder { color: currentColor; opacity: 0.55; }
  .hl-nlpop__email:focus { border-color: currentColor; }
  .hl-nlpop__submit {
    background: var(--btn-bg, var(--ink));
    color: var(--btn-fg, var(--bg));
    border: 1px solid var(--btn-bg, var(--ink));
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: var(--btn-radius, 0);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .hl-nlpop__submit:hover {
    background: var(--btn-bg-hover, var(--accent, #000000));
    color: var(--btn-fg-hover, #fff);
    border-color: var(--btn-bg-hover, var(--accent, #000000));
  }
  .hl-nlpop__feedback {
    font-size: 12px;
    line-height: 1.5;
    padding: 4px 0;
  }
  .hl-nlpop__feedback.is-success { color: var(--accent, #000000); }
  .hl-nlpop__feedback.is-error   { color: var(--accent, #000000); }
  .hl-nlpop__terms {
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    opacity: 0.7;
  }
  .hl-nlpop__dismiss {
    background: transparent;
    border: 0;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 4px;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    align-self: flex-start;
  }
  .hl-nlpop--align-center .hl-nlpop__dismiss { align-self: center; }
  .hl-nlpop--align-right  .hl-nlpop__dismiss { align-self: flex-end; }
  .hl-nlpop__dismiss:hover { opacity: 1; }

  @media (max-width: 767px) {
    .hl-nlpop__panel {
      grid-template-columns: 1fr !important;
      width: 100vw;
      max-width: 100vw;
      max-height: 92vh;
    }
    .hl-nlpop__media {
      min-height: 0;
      aspect-ratio: var(--nlpop-aspect-m, 4/5);
    }
    .hl-nlpop__body {
      padding: 28px 20px 32px;
      max-height: none;
      overflow: visible;
    }
    .hl-nlpop__heading { font-size: 26px !important; }
    .hl-nlpop__row { flex-direction: column; gap: 10px; }
    .hl-nlpop__email { border-right: 1px solid var(--border-2, currentColor); }
    .hl-nlpop__submit { width: 100%; justify-content: center; }
    .hl-nlpop__success-heading { font-size: 24px !important; }
  }

  /* === Post-subscribe success state === */
  .hl-nlpop__state { width: 100%; display: flex; flex-direction: column; gap: 16px; }
  .hl-nlpop__state[hidden] { display: none; }
  .hl-nlpop--align-center .hl-nlpop__state { align-items: center; text-align: center; }
  .hl-nlpop--align-right  .hl-nlpop__state { align-items: flex-end;  text-align: right; }

  .hl-nlpop__success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent, #000000);
    color: var(--ui-light, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    animation: hl-nlpop-pop 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  @keyframes hl-nlpop-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
  }
  .hl-nlpop__success-icon .ti { font-size: 28px; }
  .hl-nlpop__success-eyebrow { opacity: 0.85; }
  .hl-nlpop__success-heading { line-height: 1.05; margin: 0; }
  .hl-nlpop__success-body { font-size: 14px; line-height: 1.6; opacity: 0.9; }
  .hl-nlpop__success-body p { margin: 0 0 8px; }
  .hl-nlpop__success-body p:last-child { margin-bottom: 0; }

  /* Discount code block */
  .hl-nlpop__success-code {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin: 8px 0;
    border: 1px dashed currentColor;
    padding: 8px 8px 8px 14px;
    border-radius: var(--btn-radius, 0);
    max-width: 100%;
  }
  .hl-nlpop__success-code-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
    align-self: center;
    margin-right: 12px;
  }
  .hl-nlpop__success-code-value {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.16em;
    align-self: center;
    padding-right: 12px;
    white-space: nowrap;
  }
  .hl-nlpop__success-code-copy {
    background: transparent;
    border: 0;
    border-left: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    padding: 0 12px;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 200ms ease;
  }
  .hl-nlpop__success-code-copy:hover { opacity: 0.7; }
  .hl-nlpop__success-code-copy.is-copied { opacity: 0.5; }
  .hl-nlpop__success-code-copy .ti { font-size: 14px; }

  /* Success CTA + close */
  .hl-nlpop__success-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--btn-bg, var(--ink));
    color: var(--btn-fg, var(--bg));
    text-decoration: none;
    padding: 14px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--btn-radius, 0);
    transition: background 200ms ease, color 200ms ease;
    margin-top: 8px;
  }
  .hl-nlpop__success-cta:hover {
    background: var(--btn-bg-hover, var(--accent, #000000));
    color: var(--btn-fg-hover, #fff);
  }
  .hl-nlpop__success-close {
    background: transparent;
    border: 0;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 4px 0;
    margin-top: 4px;
  }
  .hl-nlpop__success-close:hover { opacity: 1; }
/* END_SECTION:newsletter-popup */

/* START_SECTION:often-bought-together (INDEX:65) */
.hl-obt { background: var(--bg); color: var(--ink); }
  .hl-obt__body { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 12px 0 0; max-width: 640px; }

  .hl-obt__layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
  }
  .hl-obt__items { display: flex; flex-direction: column; gap: var(--gap, 16px); }

  /* Item card */
  .hl-obt__item {
    display: grid;
    grid-template-columns: auto 80px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border-radius: 4px;
    transition: background 200ms ease;
  }
  .hl-obt--style-card .hl-obt__item     { background: rgba(0,0,0,0.03); }
  .hl-obt--style-bordered .hl-obt__item { border: 1px solid var(--border-2, currentColor); }
  .hl-obt--style-minimal .hl-obt__item  { padding: 8px 0; border-bottom: 1px solid var(--border-2, currentColor); border-radius: 0; }
  .hl-obt--style-minimal .hl-obt__item:last-child { border-bottom: 0; }
  .hl-obt__item--anchor { opacity: 0.95; }

  .hl-obt__check { display: inline-flex; align-items: center; cursor: pointer; }
  .hl-obt__check input { position: absolute; opacity: 0; pointer-events: none; }
  .hl-obt__check-box {
    width: 20px; height: 20px;
    border: 1.5px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease;
    flex-shrink: 0;
  }
  .hl-obt__check-box::after {
    content: '';
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--bg);
    border-bottom: 2px solid var(--bg);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .hl-obt__check input:checked + .hl-obt__check-box {
    background: var(--ink);
    border-color: var(--ink);
  }
  .hl-obt__check input:checked + .hl-obt__check-box::after { opacity: 1; }
  .hl-obt__check input:disabled + .hl-obt__check-box {
    cursor: not-allowed;
    opacity: 0.7;
  }

  .hl-obt__img {
    width: 80px;
    height: 100px;
    overflow: hidden;
    background: var(--ph-bg, #CCCCCC);
    display: block;
    flex-shrink: 0;
  }
  .hl-obt__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  .hl-obt__meta { min-width: 0; }
  .hl-obt__title {
    display: block;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
  }
  a.hl-obt__title:hover { opacity: 0.7; }
  .hl-obt__sub {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .hl-obt__price {
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    display: flex;
    gap: 8px;
    align-items: baseline;
  }
  .hl-obt__compare { color: var(--ink-muted, currentColor); opacity: 0.6; font-weight: 400; }

  /* Summary panel */
  .hl-obt__summary {
    position: sticky;
    top: 96px;
    background: rgba(0,0,0,0.03);
    padding: 24px;
    border-radius: 4px;
  }
  .hl-obt__totals { margin-bottom: 16px; }
  .hl-obt__totals-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 6px;
  }
  .hl-obt__totals-amount {
    font-size: 24px;
    line-height: 1;
  }
  .hl-obt__add {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hl-obt__add[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .hl-obt__helper {
    font-size: 11px;
    opacity: 0.7;
    line-height: 1.5;
    margin-top: 12px;
    text-align: center;
  }
  .hl-obt__loading {
    padding: 24px;
    text-align: center;
    opacity: 0.6;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  @media (max-width: 1023px) {
    .hl-obt__layout { grid-template-columns: 1fr; }
    .hl-obt__summary { position: static; }
  }
  @media (max-width: 767px) {
    .hl-obt {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-obt__item {
      grid-template-columns: auto 60px 1fr;
      gap: 12px;
      padding: 10px;
    }
    .hl-obt__img { width: 60px; height: 75px; }
    .hl-obt__title { font-size: 13px; }
  /* Auto-generated mobile typography overrides */
    .hl-obt__totals-amount { font-size: 20px; }

  }
/* END_SECTION:often-bought-together */

/* START_SECTION:page (INDEX:66) */
.hl-page { background: var(--bg); color: var(--ink); }
  .hl-page__inner { margin: 0 auto; }
  .hl-page__heading { line-height: 1; margin: 0 0 16px; }
  .hl-page__sub { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 28px; }
  .hl-page__content { font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
  .hl-page__content p { margin: 0 0 18px; }
  .hl-page__content a { color: var(--accent); text-decoration: underline; }
/* END_SECTION:page */

/* START_SECTION:password (INDEX:67) */
.hl-pwd {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body--family);
  }
  .hl-pwd--centered { grid-template-columns: 1fr; }
  .hl-pwd--right-visual { grid-template-columns: 1fr 1fr; direction: rtl; }
  .hl-pwd--right-visual > * { direction: ltr; }

  /* Visual / image side */
  .hl-pwd__visual {
    position: relative;
    overflow: hidden;
    min-height: 360px;
  }
  .hl-pwd--centered .hl-pwd__visual { display: none; }
  .hl-pwd__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hl-pwd__image--placeholder {
    background:
      radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 60%),
      radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
      var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hl-pwd__placeholder-mark {
    font-family: var(--font-display--family);
    font-size: clamp(120px, 22vw, 320px);
    font-weight: var(--display-weight, 800);
    letter-spacing: var(--display-letter-spacing, -0.04em);
    line-height: 1;
    color: var(--ink);
    opacity: 0.18;
  }
  .hl-pwd__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pwd-vignette, rgba(0,0,0,0.55)), rgba(0,0,0,0) 55%);
    pointer-events: none;
  }
  .hl-pwd__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(28px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 2;
    color: #fff;
  }
  .hl-pwd__brand {
    color: inherit;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -0.04em;
    display: inline-block;
  }
  .hl-pwd__tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 38ch;
    opacity: 0.88;
  }
  .hl-pwd__countdown { margin-top: 6px; }
  .hl-pwd__countdown-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
  }
  .hl-pwd__cd-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  .hl-pwd__cd-unit strong {
    font-family: var(--font-display--family);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: var(--display-weight, 800);
    letter-spacing: var(--display-letter-spacing, -0.04em);
    font-variant-numeric: tabular-nums;
  }
  .hl-pwd__cd-unit em {
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 8px;
    opacity: 0.7;
  }

  /* Content / form side */
  .hl-pwd__content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px);
  }
  .hl-pwd__content-inner {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .hl-pwd__heading {
    line-height: 1;
    margin: 0;
    letter-spacing: var(--display-letter-spacing, -0.04em);
  }
  .hl-pwd__lede,
  .hl-pwd__shop-message {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    opacity: 0.85;
    margin: 0;
  }
  .hl-pwd__shop-message {
    padding: 16px 18px;
    border-left: 2px solid var(--accent);
    background: var(--surface);
    font-size: 14px;
    opacity: 1;
  }

  /* Newsletter */
  .hl-pwd__newsletter { display: flex; flex-direction: column; gap: 12px; }
  .hl-pwd__newsletter-heading {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .hl-pwd__nl-form { width: 100%; }
  .hl-pwd__nl-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--ink);
  }
  .hl-pwd__nl-input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
  }
  .hl-pwd__nl-input::placeholder { color: var(--ink-muted); opacity: 0.7; }
  .hl-pwd__nl-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 14px 0 14px 18px;
    cursor: pointer;
    color: var(--ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: opacity 200ms ease;
  }
  .hl-pwd__nl-submit:hover { opacity: 0.6; }
  .hl-pwd__nl-submit .ti { font-size: 16px; transition: transform 200ms ease; }
  .hl-pwd__nl-submit:hover .ti { transform: translateX(4px); }
  .hl-pwd__nl-msg {
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 0.02em;
  }
  .hl-pwd__nl-msg--success { color: var(--accent); }
  .hl-pwd__nl-msg--error { color: var(--accent); opacity: 0.85; }

  /* Password entry — collapsed */
  .hl-pwd__entry {
    margin-top: 4px;
    border-top: 1px solid var(--border-2);
    padding-top: 24px;
  }
  .hl-pwd__entry-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    list-style: none;
    user-select: none;
  }
  .hl-pwd__entry-trigger::-webkit-details-marker { display: none; }
  .hl-pwd__entry-trigger .ti {
    font-size: 14px;
    transition: transform 200ms ease;
  }
  .hl-pwd[open] .hl-pwd__entry-trigger .ti,
  .hl-pwd__entry[open] .hl-pwd__entry-trigger .ti { transform: rotate(180deg); }

  .hl-pwd__entry-body { margin-top: 18px; }
  .hl-pwd__pw-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--ink);
  }
  .hl-pwd__pw-input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: 0.15em;
  }
  .hl-pwd__pw-input::placeholder { color: var(--ink-muted); opacity: 0.7; letter-spacing: 0.05em; }
  .hl-pwd__pw-submit {
    background: var(--ink);
    color: var(--bg);
    border: 0;
    padding: 14px 22px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: opacity 200ms ease;
  }
  .hl-pwd__pw-submit:hover { opacity: 0.85; }

  /* Socials + footer */
  .hl-pwd__socials {
    display: flex;
    gap: 14px;
    font-size: 18px;
  }
  .hl-pwd__social {
    color: var(--ink);
    text-decoration: none;
    transition: opacity 200ms ease;
    line-height: 1;
  }
  .hl-pwd__social:hover { opacity: 0.6; }
  .hl-pwd__footer {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
  }
  .hl-pwd__footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* Accessibility helper */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* Mobile */
  @media (max-width: 767px) {
    .hl-pwd,
    .hl-pwd--right-visual { grid-template-columns: 1fr; }
    .hl-pwd__visual {
      min-height: 56svh;
      max-height: 70svh;
    }
    .hl-pwd__content { padding: 40px 22px 56px; }
    .hl-pwd__content-inner { gap: 22px; }
    .hl-pwd__heading { font-size: clamp(40px, 11vw, 64px) !important; }
    .hl-pwd__cd-unit strong { font-size: clamp(28px, 9vw, 44px); }
  }
/* END_SECTION:password */

/* START_SECTION:policy (INDEX:68) */
.hl-policy { background: var(--bg); color: var(--ink); }
  .hl-policy__heading { line-height: 1.05; margin: 0 0 20px; letter-spacing: -0.01em; }
  .hl-policy__sub { font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
  .hl-policy__updated { margin: 0 0 36px; }
  .hl-policy__content { line-height: 1.85; }
  .hl-policy__content a { text-decoration: underline; text-underline-offset: 3px; }
  .hl-policy__content strong { font-weight: 600; color: var(--ink); }
  .hl-policy__content em { font-style: italic; }
  .hl-policy__content hr { border: 0; border-top: 1px solid var(--border-2); margin: 32px 0; }
/* END_SECTION:policy */

/* START_SECTION:press-bar (INDEX:69) */
.hl-press {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-press__grid {
    display: grid;
    align-items: center;
  }
  .hl-press--quotes .hl-press__grid {
    align-items: start;
  }
  .hl-press__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hl-press__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    text-decoration: none;
    color: inherit;
  }
  .hl-press__logo-text {
    font-family: var(--font-display--family, 'Syne', 'Inter', sans-serif);
    font-size: 22px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--ink);
  }
  .hl-press__divider {
    height: 1px;
    background: var(--border, currentColor);
    opacity: 0.3;
  }
  .hl-press__quote-cite {
    color: var(--ink-soft, inherit);
  }
/* END_SECTION:press-bar */

/* START_SECTION:product-craft (INDEX:70) */
.hl-product-craft {
    background: var(--bg);
    color: var(--ink);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }
  .hl-product-craft__col + .hl-product-craft__col {
    border-left: 1px solid rgba(127,127,127,0.25);
    padding-left: 48px;
  }
  .hl-product-craft__eyebrow { color: var(--accent); margin-bottom: 14px; }
  .hl-product-craft__title { margin: 0 0 8px; }
  .hl-product-craft__body { line-height: 1.7; margin: 0; opacity: 0.7; }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-product-craft { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .hl-product-craft__col + .hl-product-craft__col { border-left: none; padding-left: 0; }
    .hl-product-craft__col:nth-child(3) { grid-column: span 2; }
  }
  @media (max-width: 767px) {
    .hl-product-craft { grid-template-columns: 1fr !important; gap: 28px !important; }
    .hl-product-craft__col + .hl-product-craft__col { border-left: none; padding-left: 0; }
    .hl-product-craft__col:nth-child(3) { grid-column: auto; }
  }
/* END_SECTION:product-craft */

/* START_SECTION:product-main (INDEX:71) */
/* ==========================================================================
     Product main — mobile-first, BEM, no fragile inline conditionals
     ========================================================================== */

  .hl-pdp { background: var(--bg); color: var(--ink); padding: var(--pad-m); }

  /* ============ Breadcrumb ============ */
  .hl-pdp__crumb {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .hl-pdp__crumb a { color: inherit; text-decoration: none; }
  .hl-pdp__crumb a:hover { color: var(--ink); }
  .hl-pdp__crumb-current { color: var(--ink); }

  /* ============ Layout: mobile = single column, desktop = 2-col grid ============ */
  .hl-pdp__layout { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

  /* ============ Gallery — base ============ */
  .hl-pdp__gallery { width: 100%; min-width: 0; }
  .hl-pdp__gallery img { max-width: 100%; }
  .hl-pdp__img,
  .hl-pdp__main-img,
  .hl-pdp__slide,
  .hl-pdp__thumb {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--bg);
    overflow: hidden;
    border-radius: var(--gallery-radius, 0);
    min-width: 0;
    max-width: 100%;
  }
  .hl-pdp__img > img,
  .hl-pdp__img > svg,
  .hl-pdp__main-img > img,
  .hl-pdp__slide > img,
  .hl-pdp__thumb > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 220ms ease;
  }

  /* Aspect ratio modifiers — apply to image cells (NOT thumbs).
     Thumbnails get their own fixed ratio below so they always look uniform.
     "auto" lets each image use its natural proportions (no constraint). */
  .hl-pdp--ar-auto .hl-pdp__img,
  .hl-pdp--ar-auto .hl-pdp__main-img,
  .hl-pdp--ar-auto .hl-pdp__slide { aspect-ratio: auto; }
  .hl-pdp--ar-auto .hl-pdp__img > img,
  .hl-pdp--ar-auto .hl-pdp__main-img > img,
  .hl-pdp--ar-auto .hl-pdp__slide > img {
    height: auto;
    object-fit: contain;
  }
  .hl-pdp--ar-4-5 .hl-pdp__img,
  .hl-pdp--ar-4-5 .hl-pdp__main-img,
  .hl-pdp--ar-4-5 .hl-pdp__slide { aspect-ratio: 4/5; }
  .hl-pdp--ar-3-4 .hl-pdp__img,
  .hl-pdp--ar-3-4 .hl-pdp__main-img,
  .hl-pdp--ar-3-4 .hl-pdp__slide { aspect-ratio: 3/4; }
  .hl-pdp--ar-1-1 .hl-pdp__img,
  .hl-pdp--ar-1-1 .hl-pdp__main-img,
  .hl-pdp--ar-1-1 .hl-pdp__slide { aspect-ratio: 1/1; }
  .hl-pdp--ar-16-9 .hl-pdp__img,
  .hl-pdp--ar-16-9 .hl-pdp__main-img,
  .hl-pdp--ar-16-9 .hl-pdp__slide { aspect-ratio: 16/9; }

  /* Thumbnails always use their own dedicated ratio (defaults to 1:1 — clean
     and uniform regardless of main image aspect). Override via thumb_ratio. */
  .hl-pdp__thumb { aspect-ratio: 1/1; }
  .hl-pdp--thumb-ar-1-1 .hl-pdp__thumb { aspect-ratio: 1/1; }
  .hl-pdp--thumb-ar-4-5 .hl-pdp__thumb { aspect-ratio: 4/5; }
  .hl-pdp--thumb-ar-3-4 .hl-pdp__thumb { aspect-ratio: 3/4; }
  .hl-pdp--thumb-ar-16-9 .hl-pdp__thumb { aspect-ratio: 16/9; }

  /* === Gallery layout: STACKED === */
  .hl-pdp__gallery--stacked { display: flex; flex-direction: column; gap: 4px; align-items: center; }
  .hl-pdp__gallery--stacked > .hl-pdp__img { width: 100%; max-width: 100%; }

  /* === Gallery layout: GRID === */
  .hl-pdp__gallery--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

  /* === Gallery layout: THUMBS === */
  /* align-items: center centers both the main image cell and the thumb strip
     within the gallery column when they are narrower than the column. */
  .hl-pdp__gallery--thumbs { display: flex; flex-direction: column; gap: 8px; align-items: center; }
  .hl-pdp__gallery--thumbs > .hl-pdp__main,
  .hl-pdp__gallery--thumbs > .hl-pdp__thumbs-wrap { width: 100%; max-width: 100%; }
  /* Thumb position: top → reverse the column order */
  .hl-pdp--thumbpos-top .hl-pdp__gallery--thumbs { flex-direction: column-reverse; }
  /* Flex column with align-items:center guarantees the main image cell is
     horizontally centered within its column, even when aspect-ratio +
     max-height shrink it narrower than the gallery column width. */
  .hl-pdp__main { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
  /* Main image (thumbs layout). The vh cap is applied only at tablet+ inside
     the desktop media query below — on mobile the aspect-ratio alone governs
     so the image never collapses to a pillarbox on landscape phones. The
     margin-inline:auto centers the cell when max-height + aspect-ratio
     shrinks it smaller than the gallery column width on desktop. */
  .hl-pdp__main-img {
    aspect-ratio: 4/5;
    margin-inline: auto;
  }
  .hl-pdp__main-img > img {
    object-fit: contain;
    background: var(--bg);
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Let the --ar-auto setting actually flow through to the thumbs main image
     (this rule appears AFTER the generic --ar-auto cascade above, so we need
     to explicitly re-assert auto here for the main-img). */
  .hl-pdp--ar-auto .hl-pdp__main-img { aspect-ratio: auto; }
  .hl-pdp--ar-auto .hl-pdp__main-img > img { object-fit: contain; height: auto; }
  /* Solo state — single product image, no thumbnail strip. Let the image
     occupy the full available height of the column instead of being capped
     by 65vh (which made it look squashed). Use cover so it fills the frame. */
  .hl-pdp__main--solo .hl-pdp__main-img {
    aspect-ratio: 4/5;
    max-height: none;
  }
  .hl-pdp__main--solo .hl-pdp__main-img > img {
    object-fit: cover;
  }
  /* Thumb strip — windowed carousel showing 4 thumbs (5 on desktop).
     Arrows hidden by default; they fade in on hover/focus of the strip. */
  .hl-pdp__thumbs-wrap {
    position: relative;
  }
  .hl-pdp__thumbs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2px;
  }
  .hl-pdp__thumbs::-webkit-scrollbar { display: none; }
  .hl-pdp__thumb {
    flex: 0 0 calc((100% - 32px) / 5);
    background: var(--bg);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    scroll-snap-align: start;
    transition: opacity 200ms ease, border-color 200ms ease;
  }
  .hl-pdp__thumb:hover { opacity: 1; }
  .hl-pdp__thumb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.12);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, background 180ms ease;
  }
  .hl-pdp__thumb-arrow--prev { left: 4px; }
  .hl-pdp__thumb-arrow--next { right: 4px; }
  .hl-pdp__thumbs-wrap:hover .hl-pdp__thumb-arrow,
  .hl-pdp__thumbs-wrap:focus-within .hl-pdp__thumb-arrow {
    opacity: 1;
    pointer-events: auto;
  }
  .hl-pdp__thumb-arrow:hover { background: var(--ink); color: var(--bg); }
  .hl-pdp__thumb-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
  .hl-pdp__thumb:hover { opacity: 1; }
  .hl-pdp__thumb.is-active { opacity: 1; border-color: var(--ink); }

  /* === Gallery layout: CAROUSEL === */
  .hl-pdp__slider { position: relative; overflow: hidden; touch-action: pan-y; }
  .hl-pdp__track { display: flex; width: 100%; transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
  .hl-pdp__slide { flex: 0 0 100%; min-width: 0; max-width: 100%; }
  .hl-pdp__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, background 200ms ease;
  }
  /* Show arrows only on hover/focus or while a touch swipe is active. */
  .hl-pdp__slider:hover .hl-pdp__arrow,
  .hl-pdp__slider:focus-within .hl-pdp__arrow {
    opacity: 1;
    pointer-events: auto;
  }
  .hl-pdp__arrow:hover { background: var(--ink); color: var(--bg); }
  .hl-pdp__arrow--prev { left: 12px; }
  .hl-pdp__arrow--next { right: 12px; }
  /* Touch devices don't have hover — show arrows persistently but smaller. */
  @media (hover: none) {
    .hl-pdp__arrow { opacity: 0.7; pointer-events: auto; }
  }
  .hl-pdp__dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
  }
  .hl-pdp__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, transform 200ms ease;
  }
  .hl-pdp__dot.is-active { background: var(--ink); transform: scale(1.2); }

  /* ============ MOBILE GALLERY — stacked / carousel / thumbs override ============ */
  /* Mobile stacked: convert any layout to single column */
  .hl-pdp--m-gallery-stacked .hl-pdp__gallery--grid {
    grid-template-columns: 1fr;
  }
  .hl-pdp--m-gallery-stacked .hl-pdp__gallery--thumbs .hl-pdp__thumbs { display: none; }

  /* Mobile carousel: convert grid/stacked to scroll-snap row */
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--grid,
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 4px;
    scrollbar-width: none;
  }
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--grid::-webkit-scrollbar,
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked::-webkit-scrollbar { display: none; }
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--grid > .hl-pdp__img,
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked > .hl-pdp__img {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: start;
  }
  /* Hide thumb strip in carousel mobile mode */
  .hl-pdp--m-gallery-carousel .hl-pdp__gallery--thumbs .hl-pdp__thumbs { display: none; }

  /* Mobile thumbs: ensure main + thumbs strip are stacked vertically */
  .hl-pdp--m-gallery-thumbs .hl-pdp__gallery--grid,
  .hl-pdp--m-gallery-thumbs .hl-pdp__gallery--stacked,
  .hl-pdp--m-gallery-thumbs .hl-pdp__gallery--thumbs {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 8px;
  }
  /* Mobile image fit (cover/contain) */
  .hl-pdp--m-fit-contain .hl-pdp__img > img,
  .hl-pdp--m-fit-contain .hl-pdp__main-img > img,
  .hl-pdp--m-fit-contain .hl-pdp__slide > img { object-fit: contain; }

  /* ============ FORM column ============ */
  .hl-pdp__form { width: 100%; min-width: 0; }
  .hl-pdp__block { word-wrap: break-word; }

  /* Eyebrow / vendor */
  .hl-pdp__eyebrow { color: var(--ink-muted); }
  .hl-pdp__eyebrow a { color: inherit; text-decoration: none; }
  .hl-pdp__vendor { color: var(--ink); font-weight: 500; }

  /* Title */
  .hl-pdp__title { margin: 0; word-break: break-word; line-height: 1; }

  /* Rating */
  .hl-pdp__rating { display: inline-flex; align-items: center; gap: 8px; }
  .hl-pdp__rating-text { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; }

  /* Price */
  .hl-pdp__price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .hl-pdp__price { line-height: 1; }
  .hl-pdp__price-sale { color: var(--accent); }
  .hl-pdp__price-compare {
    text-decoration: line-through;
    color: var(--ink-muted);
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 8px;
  }
  .hl-pdp__price-meta { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.06em; }
  .hl-pdp__klarna { font-size: 11px; color: var(--ink-muted); margin-top: 8px; letter-spacing: 0.04em; }

  /* Stock */
  .hl-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .hl-pdp__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .hl-pdp__stock--low { color: var(--stock-low-color, var(--accent)); }
  .hl-pdp__stock--low .hl-pdp__stock-dot { background: var(--stock-low-color, var(--accent)); }
  .hl-pdp__stock--in { color: var(--ink-muted); }
  .hl-pdp__stock--in .hl-pdp__stock-dot { background: var(--stock-in-color, #4ca768); }
  .hl-pdp__stock--out { color: var(--ink-muted); }
  .hl-pdp__stock--out .hl-pdp__stock-dot { background: var(--stock-out-color, var(--ink-muted)); }

  /* Variants */
  .hl-pdp__variants { display: flex; flex-direction: column; gap: 22px; }
  .hl-pdp__variant-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
  }
  .hl-pdp__variant-name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-weight: 500;
  }
  .hl-pdp__variant-value {
    color: var(--ink-muted);
    font-size: 13px;
  }
  .hl-pdp__variant-guide {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-decoration: none;
  }
  .hl-pdp__variant-guide:hover { color: var(--ink); }

  /* Color swatches.
     Padding on the wrap gives the .is-active outer ring (box-shadow) room
     to breathe so it doesn't get clipped by the section's left/right edge. */
  .hl-pdp__swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; margin: -4px; }
  .hl-pdp__swatch {
    width: var(--swatch-size, 32px);
    height: var(--swatch-size, 32px);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(15, 15, 15, 0.18);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .hl-pdp__swatches--circle .hl-pdp__swatch { border-radius: 50%; }
  .hl-pdp__swatches--rounded .hl-pdp__swatch { border-radius: 6px; }
  .hl-pdp__swatches--square .hl-pdp__swatch { border-radius: 0; }

  /* Image swatches: larger rectangle showing the variant photo */
  .hl-pdp__swatches--image .hl-pdp__swatch--image {
    width: calc(var(--swatch-size, 32px) + 16px);
    height: calc((var(--swatch-size, 32px) + 16px) * 1.25);
  }
  .hl-pdp__swatches--image.hl-pdp__swatches--circle .hl-pdp__swatch--image { border-radius: 6px; }
  .hl-pdp__swatch:hover { border-color: var(--ink); }
  .hl-pdp__swatch.is-active {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink);
  }

  /* Size buttons */
  .hl-pdp__btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .hl-pdp__btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border-2);
    padding: 11px 16px;
    min-height: 44px;
    min-width: 44px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .hl-pdp__btns--square .hl-pdp__btn { border-radius: 0; }
  .hl-pdp__btns--rounded .hl-pdp__btn { border-radius: 6px; }
  .hl-pdp__btns--pill .hl-pdp__btn { border-radius: 999px; }
  .hl-pdp__btn:hover { border-color: var(--ink); }
  .hl-pdp__btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* Native select — bordered button style, theme-aware via CSS variables.
     Chevron uses an <i> icon (currentColor) so it always matches scheme. */
  .hl-pdp__select-wrap {
    position: relative;
    display: block;
    width: 100%;
  }
  .hl-pdp__select {
    width: 100%;
    padding: 12px 36px 12px 14px;
    background: transparent;
    border: 1px solid var(--border-2);
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 200ms ease;
  }
  .hl-pdp__select:focus,
  .hl-pdp__select:hover { outline: none; border-color: var(--ink); }
  .hl-pdp__select-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--ink);
    font-size: 14px;
    pointer-events: none;
    transition: color 200ms ease;
  }
  /* Style the dropdown options to match scheme background. */
  .hl-pdp__select option { background: var(--bg); color: var(--ink); }

  /* Quantity */
  .hl-pdp__qty { display: flex; align-items: center; gap: 14px; }
  .hl-pdp__qty-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    font-weight: 500;
  }
  .hl-pdp__qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-2);
  }
  .hl-pdp__qty--rounded .hl-pdp__qty-stepper { border-radius: 6px; }
  .hl-pdp__qty--pill .hl-pdp__qty-stepper { border-radius: 999px; }
  .hl-pdp__qty-stepper button {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
  }
  .hl-pdp__qty-stepper input {
    width: 40px;
    height: 36px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .hl-pdp__qty-stepper input::-webkit-outer-spin-button,
  .hl-pdp__qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

  /* Add to cart / buy now */
  .hl-pdp__atc-row { display: flex; gap: 8px; }
  .hl-pdp__atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    border: none;
    height: 52px;
    transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
  }
  .hl-pdp__atc--block { flex: 1; width: 100%; }
  .hl-pdp__atc--solid { background: var(--ink); color: var(--bg); }
  .hl-pdp__atc--accent { background: var(--accent); color: var(--bg); }
  .hl-pdp__atc--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  /* Custom color overrides via inline CSS variables — fall back to style preset. */
  .hl-pdp__atc--custom {
    background: var(--btn-bg, var(--ink));
    color: var(--btn-fg, var(--bg));
  }
  .hl-pdp__atc--custom.hl-pdp__atc--ghost {
    background: var(--btn-bg, transparent);
    color: var(--btn-fg, var(--ink));
    border-color: var(--btn-fg, var(--ink));
  }
  .hl-pdp__atc--custom:not([disabled]):hover {
    background: var(--btn-bg-hover, var(--accent));
    color: var(--btn-fg-hover, var(--bg));
    opacity: 1;
  }
  .hl-pdp__atc--custom.hl-pdp__atc--ghost:not([disabled]):hover {
    border-color: var(--btn-bg-hover, var(--accent));
  }
  .hl-pdp__atc--sm { height: 40px; font-size: 10px; }
  .hl-pdp__atc--md { height: 52px; font-size: 11px; }
  .hl-pdp__atc--lg { height: 62px; font-size: 12px; }
  .hl-pdp__atc--rounded { border-radius: 6px; }
  .hl-pdp__atc--pill { border-radius: 999px; }
  .hl-pdp__atc[disabled] { opacity: 0.5; cursor: not-allowed; }
  .hl-pdp__atc:not([disabled]):hover { opacity: 0.9; }

  .hl-pdp__wishlist {
    background: transparent;
    border: 1px solid var(--border-2);
    cursor: pointer;
    color: var(--ink);
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
  }
  .hl-pdp__wishlist--rounded { border-radius: 6px; }
  .hl-pdp__wishlist--pill { border-radius: 999px; }
  .hl-pdp__wishlist:hover { color: var(--accent); border-color: var(--accent); }
  .hl-pdp__wishlist.is-saved { color: var(--accent); border-color: var(--accent); }
  .hl-pdp__wishlist:hover { color: var(--accent); }

  /* Shipping callout */
  .hl-pdp__shipping {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
  }
  .hl-pdp__shipping-body { flex: 1; min-width: 0; }
  .hl-pdp__shipping-body p { margin: 0; }
  .hl-pdp__shipping-icon { flex-shrink: 0; }

  /* Background variants */
  .hl-pdp__shipping--bg-surface { background: var(--surface); }
  .hl-pdp__shipping--bg-border { background: transparent; border: 1px solid var(--border-2); }
  .hl-pdp__shipping--bg-accent { background: var(--accent); color: var(--bg); }
  .hl-pdp__shipping--bg-accent .hl-pdp__shipping-icon { color: var(--bg) !important; }
  .hl-pdp__shipping--bg-ink { background: var(--ink); color: var(--bg); }
  .hl-pdp__shipping--bg-ink .hl-pdp__shipping-icon { color: var(--bg) !important; }
  .hl-pdp__shipping--bg-transparent { background: transparent; }

  /* Icon position */
  .hl-pdp__shipping--icon-right { flex-direction: row-reverse; }
  .hl-pdp__shipping--icon-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hl-pdp__shipping--icon-top.hl-pdp__shipping--align-center { align-items: center; }

  /* Alignment */
  .hl-pdp__shipping--align-center { justify-content: center; text-align: center; }
  .hl-pdp__shipping--align-right { justify-content: flex-end; text-align: right; }

  /* Icon color */
  .hl-pdp__shipping--icol-accent .hl-pdp__shipping-icon { color: var(--accent); }
  .hl-pdp__shipping--icol-ink .hl-pdp__shipping-icon { color: var(--ink); }
  .hl-pdp__shipping--icol-muted .hl-pdp__shipping-icon { color: var(--ink-muted); }

  /* Text color */
  .hl-pdp__shipping--tcol-soft { color: var(--ink-soft); }
  .hl-pdp__shipping--tcol-ink { color: var(--ink); }
  .hl-pdp__shipping--tcol-muted { color: var(--ink-muted); }
  .hl-pdp__shipping--tcol-accent { color: var(--accent); }

  /* Size guide link */
  .hl-pdp__size-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink);
    text-decoration: none;
  }
  .hl-pdp__size-guide:hover { color: var(--accent); }

  /* Share */
  .hl-pdp__share { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-muted); }
  .hl-pdp__share a, .hl-pdp__share button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-size: 16px;
    padding: 0;
    display: inline-flex;
    align-items: center;
  }
  .hl-pdp__share a:hover, .hl-pdp__share button:hover { color: var(--accent); }

  /* Icon row */
  /* Icon row — responsive grid (mobile cols default to 1, desktop cols configurable) */
  .hl-pdp__icon-row {
    display: grid;
    grid-template-columns: repeat(var(--ir-cols-m, 1), 1fr);
  }
  @media (min-width: 768px) {
    .hl-pdp__icon-row { grid-template-columns: repeat(var(--ir-cols, 3), 1fr); }
  }
  .hl-pdp__icon-cell {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* Layout: vertical (icon top, label below) — default */
  .hl-pdp__icon-row--vertical .hl-pdp__icon-cell {
    flex-direction: column;
    text-align: center;
  }
  /* Layout: horizontal (icon left, label right) */
  .hl-pdp__icon-row--horizontal .hl-pdp__icon-cell {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  /* Bordered cells */
  .hl-pdp__icon-cell--bordered {
    border: 1px solid var(--border-2);
    padding: 12px;
  }
  .hl-pdp__icon-cell i { color: var(--ink); flex-shrink: 0; }
  .hl-pdp__icon-cell span { letter-spacing: 0.04em; color: var(--ink-soft); line-height: 1.3; }
  /* Icon color modifiers */
  .hl-pdp__icon-cell--icol-accent i { color: var(--accent); }
  .hl-pdp__icon-cell--icol-muted i { color: var(--ink-muted); }
  .hl-pdp__icon-cell--icol-ink i { color: var(--ink); }

  /* Accordion */
  .hl-pdp__acc { border-top: 1px solid var(--border-2); padding: 14px 0; }
  .hl-pdp__acc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
  }
  .hl-pdp__acc-summary::-webkit-details-marker { display: none; }
  .hl-pdp__acc-icon { font-size: 16px; color: var(--ink-muted); transition: transform 200ms ease; }
  .hl-pdp__acc[open] .hl-pdp__acc-icon { transform: rotate(45deg); }
  .hl-pdp__acc-body {
    padding: 6px 0 18px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.8;
  }

  /* Custom text */
  .hl-pdp__text { color: var(--ink-soft); line-height: 1.7; }

  /* Divider / spacer */
  .hl-pdp__divider { border: none; border-top: 1px solid var(--border-2); margin: 0; }
  .hl-pdp__spacer { width: 100%; }

  /* ===========================================================================
     TABLET (≥ 768px) — promote to 2-col so iPad portrait / small laptops /
     foldables get side-by-side gallery + form instead of a giant full-bleed
     stacked image above the form column.
     =========================================================================== */
  @media (min-width: 768px) {
    .hl-pdp { padding: var(--pad); }
    .hl-pdp__layout {
      display: grid;
      gap: 32px;
      grid-template-columns: 1.1fr 1fr;
    }
    .hl-pdp__gallery--grid { gap: 8px; }
    .hl-pdp__gallery--stacked { gap: 8px; }
    .hl-pdp__gallery--thumbs { gap: 12px; }
    .hl-pdp__thumb { flex: 0 0 calc((100% - 32px) / 5); }
    /* Visual swap when form is left at tablet too */
    .hl-pdp--form-left .hl-pdp__gallery { order: 2; }
    .hl-pdp--form-left .hl-pdp__form { order: 1; }
  }

  /* ===========================================================================
     DESKTOP (≥ 1024px) — 2-column gallery + form layout
     =========================================================================== */
  @media (min-width: 1024px) {
    .hl-pdp__layout {
      display: grid;
      gap: var(--gap, 48px);
      grid-template-columns: 1fr 1fr;
    }
    /* Form column position + ratio */
    .hl-pdp--ratio-1-1 .hl-pdp__layout { grid-template-columns: 1fr 1fr; }
    .hl-pdp--ratio-1_2-1 .hl-pdp__layout { grid-template-columns: 1.2fr 1fr; }
    .hl-pdp--ratio-1_5-1 .hl-pdp__layout { grid-template-columns: 1.5fr 1fr; }
    .hl-pdp--ratio-2-1 .hl-pdp__layout { grid-template-columns: 2fr 1fr; }
    .hl-pdp--form-left.hl-pdp--ratio-1-1 .hl-pdp__layout { grid-template-columns: 1fr 1fr; }
    .hl-pdp--form-left.hl-pdp--ratio-1_2-1 .hl-pdp__layout { grid-template-columns: 1fr 1.2fr; }
    .hl-pdp--form-left.hl-pdp--ratio-1_5-1 .hl-pdp__layout { grid-template-columns: 1fr 1.5fr; }
    .hl-pdp--form-left.hl-pdp--ratio-2-1 .hl-pdp__layout { grid-template-columns: 1fr 2fr; }

    /* Visual swap when form is left (gallery moves to col 2) */
    .hl-pdp--form-left .hl-pdp__gallery { order: 2; }
    .hl-pdp--form-left .hl-pdp__form { order: 1; }

    /* Form max-width / sticky */
    .hl-pdp__form { max-width: none; }
    .hl-pdp--form-sticky .hl-pdp__form { position: sticky; top: 24px; align-self: start; }

    /* Gallery layouts at desktop */
    .hl-pdp__gallery--grid { gap: 8px; }
    .hl-pdp__gallery--thumbs { gap: 12px; }
    .hl-pdp__thumb { flex: 0 0 calc((100% - 32px) / 5); }

    /* Cap main image height in thumbs layout so thumbs always visible */
    .hl-pdp__gallery--thumbs .hl-pdp__main-img {
      max-height: 80vh;
    }
    /* Solo state on desktop — no thumb strip, so the cap is removed and the
       image fills the column at its natural aspect ratio. */
    .hl-pdp__gallery--thumbs .hl-pdp__main--solo .hl-pdp__main-img {
      max-height: none;
    }

    /* === Desktop thumb position: LEFT / RIGHT (vertical column beside main) === */
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs,
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs {
      flex-direction: row;
      gap: 12px;
      align-items: stretch;
    }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__main,
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__main {
      flex: 1;
      min-width: 0;
    }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__thumbs-wrap,
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__thumbs-wrap {
      flex: 0 0 88px;
    }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__thumbs,
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__thumbs {
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 70vh;
      scroll-snap-type: y mandatory;
    }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__thumb,
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__thumb {
      flex: 0 0 calc((100% - 32px) / 5);
      width: 100%;
    }
    /* Position-left puts thumbs first, main second */
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs { flex-direction: row; }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__thumbs-wrap { order: 1; }
    .hl-pdp--thumbpos-left .hl-pdp__gallery--thumbs .hl-pdp__main { order: 2; }
    /* Position-right keeps main first, thumbs second */
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__main { order: 1; }
    .hl-pdp--thumbpos-right .hl-pdp__gallery--thumbs .hl-pdp__thumbs-wrap { order: 2; }
    /* Vertical-orientation arrows: position top/bottom instead of left/right */
    .hl-pdp--thumbpos-left .hl-pdp__thumb-arrow,
    .hl-pdp--thumbpos-right .hl-pdp__thumb-arrow {
      top: 4px; left: 50%; right: auto;
      transform: translateX(-50%);
    }
    .hl-pdp--thumbpos-left .hl-pdp__thumb-arrow--next,
    .hl-pdp--thumbpos-right .hl-pdp__thumb-arrow--next {
      top: auto; bottom: 4px;
    }
    .hl-pdp--thumbpos-left .hl-pdp__thumb-arrow .ti-chevron-left,
    .hl-pdp--thumbpos-right .hl-pdp__thumb-arrow .ti-chevron-left {
      transform: rotate(90deg);
    }
    .hl-pdp--thumbpos-left .hl-pdp__thumb-arrow .ti-chevron-right,
    .hl-pdp--thumbpos-right .hl-pdp__thumb-arrow .ti-chevron-right {
      transform: rotate(90deg);
    }

    /* Mobile-specific overrides shouldn't apply on desktop — undo image-fit, m-gallery rules */
    .hl-pdp--m-gallery-stacked .hl-pdp__gallery--grid { grid-template-columns: 1fr 1fr; }
    .hl-pdp--m-gallery-stacked .hl-pdp__gallery--thumbs .hl-pdp__thumbs { display: flex; }
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--grid,
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked {
      display: grid;
      flex-direction: initial;
      grid-template-columns: 1fr 1fr;
      overflow: visible;
      scroll-snap-type: none;
    }
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked {
      display: flex;
      flex-direction: column;
    }
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--grid > .hl-pdp__img,
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--stacked > .hl-pdp__img {
      flex: initial;
      scroll-snap-align: none;
    }
    .hl-pdp--m-gallery-carousel .hl-pdp__gallery--thumbs .hl-pdp__thumbs { display: flex; }
    .hl-pdp--m-gallery-thumbs .hl-pdp__gallery--grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .hl-pdp--m-gallery-thumbs .hl-pdp__gallery--stacked {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .hl-pdp--m-fit-contain .hl-pdp__img > img,
    .hl-pdp--m-fit-contain .hl-pdp__main-img > img,
    .hl-pdp--m-fit-contain .hl-pdp__slide > img { object-fit: cover; }

  }

  /* ==========================================================================
     Sticky add-to-cart bar — floating pill (bottom of viewport on PDP)
     Layout owned here; per-section overrides come through CSS vars set on the
     element by the inline style block above.
     ========================================================================== */
  .hl-pdp__sticky-atc {
    --hl-satc-bg: rgba(255, 255, 255, 0.92);
    --hl-satc-text: #0F0F0F;
    --hl-satc-variant: rgba(15, 15, 15, 0.55);
    --hl-satc-btn-bg: #0F0F0F;
    --hl-satc-btn-fg: #FFFFFF;
    --hl-satc-img-size: 44px;
    --hl-satc-bottom: 20px;
    --hl-satc-max-width: 640px;
    --hl-satc-bar-radius: 999px;
    --hl-satc-btn-radius: 999px;
    --hl-satc-pad-y: 8px;
    --hl-satc-pad-x: 14px;
    --hl-satc-title-size: 13px;
    --hl-satc-price-size: 14px;
    --hl-satc-btn-size: 12px;
    --hl-satc-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.35);

    position: fixed;
    left: 50%;
    bottom: max(var(--hl-satc-bottom), env(safe-area-inset-bottom, 0px));
    z-index: 90;

    width: min(var(--hl-satc-max-width), calc(100vw - 24px));
    padding: var(--hl-satc-pad-y) var(--hl-satc-pad-y) var(--hl-satc-pad-y) var(--hl-satc-pad-x);
    border-radius: var(--hl-satc-bar-radius);

    background: var(--hl-satc-bg);
    color: var(--hl-satc-text);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.14),
      0 2px 8px rgba(0, 0, 0, 0.06),
      var(--hl-satc-ring);

    transform: translate(-50%, calc(100% + 80px));
    opacity: 0;
    transition:
      transform .45s cubic-bezier(.2, .9, .25, 1),
      opacity .22s ease;
    will-change: transform, opacity;
  }
  .hl-pdp__sticky-atc.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  .hl-pdp__sticky-atc[hidden] { display: none; }

  .hl-pdp__sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .hl-pdp__sticky-atc__img {
    width: var(--hl-satc-img-size);
    height: var(--hl-satc-img-size);
    flex: 0 0 var(--hl-satc-img-size);
    object-fit: cover;
    border-radius: 999px;
    display: block;
    background: rgba(0, 0, 0, 0.06);
  }
  .hl-pdp__sticky-atc__img--placeholder {
    background:
      linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));
  }

  .hl-pdp__sticky-atc__info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .hl-pdp__sticky-atc__title {
    font-size: var(--hl-satc-title-size);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--hl-satc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hl-pdp__sticky-atc__variant {
    font-size: 11px;
    color: var(--hl-satc-variant);
    margin-top: 2px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hl-pdp__sticky-atc__price {
    font-size: var(--hl-satc-price-size);
    font-weight: 600;
    color: var(--hl-satc-text);
    white-space: nowrap;
    font-feature-settings: 'tnum' 1;
    padding-right: 4px;
    flex-shrink: 0;
  }

  .hl-pdp__sticky-atc__btn {
    padding: 12px 22px;
    font-size: var(--hl-satc-btn-size);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--hl-satc-btn-radius);
    background: var(--hl-satc-btn-bg);
    color: var(--hl-satc-btn-fg);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  .hl-pdp__sticky-atc__btn:hover {
    opacity: 0.96;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .hl-pdp__sticky-atc__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (max-width: 767px) {
    .hl-pdp__sticky-atc {
      width: calc(100vw - 16px);
      bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
    .hl-pdp__sticky-atc__inner { gap: 10px; }
    .hl-pdp__sticky-atc__img,
    .hl-pdp__sticky-atc__img--placeholder {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
    }
    .hl-pdp__sticky-atc__title { font-size: 12px; }
    .hl-pdp__sticky-atc__variant { font-size: 10px; }
    .hl-pdp__sticky-atc__price { font-size: 13px; padding-right: 2px; }
    .hl-pdp__sticky-atc__btn { padding: 11px 16px; font-size: 11px; letter-spacing: 0.1em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-pdp__sticky-atc { transition: opacity .15s ease; transform: translate(-50%, 0); opacity: 0; }
    .hl-pdp__sticky-atc.is-visible { opacity: 1; }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-pdp__arrow,
    .hl-pdp__thumb-arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
  }
/* END_SECTION:product-main */

/* START_SECTION:product-recommendations (INDEX:72) */
.hl-recs { background: var(--bg); color: var(--ink); }
  .hl-recs__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hl-recs__heading { line-height: 1; margin: 0; }
  .hl-recs__cta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .hl-recs__grid {
    display: grid;
    grid-template-columns: repeat(var(--rc-cols, 4), 1fr);
    gap: var(--rc-gap, 20px);
  }
  /* Reveal */
  .hl-recs .hl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
    transition-delay: var(--delay, 0ms);
  }
  .hl-recs .hl-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-recs .hl-reveal { opacity: 1; transform: none; transition: none; }
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-recs__grid { grid-template-columns: repeat(var(--rc-cols-t, 3), 1fr); gap: 16px; }
  }
  @media (max-width: 767px) {
    .hl-recs { padding-left: var(--rc-pad-x-m, 20px) !important; padding-right: var(--rc-pad-x-m, 20px) !important; padding-top: var(--rc-pad-top-m, 36px) !important; padding-bottom: var(--rc-pad-bottom-m, 36px) !important; }
    .hl-recs__grid { grid-template-columns: repeat(var(--rc-cols-m, 2), 1fr); gap: var(--rc-gap-m, 12px); }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-reviews (INDEX:73) */
.hl-reviews { background: var(--bg); color: var(--ink); display: grid; gap: var(--gap, 64px); }
  .hl-reviews--layout-split { grid-template-columns: 1fr 2fr; }
  .hl-reviews--layout-stacked { grid-template-columns: 1fr; }

  .hl-reviews__score { line-height: 1; margin: 0 0 8px; font-size: var(--score-fs, 64px); }
  .hl-reviews__stars { font-size: 16px; color: var(--star-color, #000000); margin-bottom: 12px; letter-spacing: 2px; }
  .hl-reviews__meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 24px; letter-spacing: 0.04em; }

  .hl-reviews__breakdown { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 24px; max-width: 320px; }
  .hl-reviews__bar {
    display: grid;
    grid-template-columns: 44px 1fr 36px;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
  }
  .hl-reviews__bar:hover .hl-reviews__bar-fill { background: var(--ink); }
  .hl-reviews__bar.is-active { font-weight: 600; }
  .hl-reviews__bar-label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
  .hl-reviews__bar-label .ti { font-size: 12px; color: var(--star-color, #000000); }
  .hl-reviews__bar-track { height: 6px; background: rgba(127,127,127,0.18); border-radius: 999px; overflow: hidden; }
  .hl-reviews__bar-fill  { display: block; height: 100%; background: var(--star-color, #000000); transition: background 200ms ease; }
  .hl-reviews__bar-count { font-size: 11px; color: var(--ink-muted); text-align: right; }

  .hl-reviews__write-cta { margin-top: 8px; }

  .hl-reviews__list { display: flex; flex-direction: column; }
  .hl-reviews__item {
    border-bottom: 1px solid rgba(127,127,127,0.18);
    padding: 18px 0;
  }
  .hl-reviews__item-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 8px; }
  .hl-reviews__item-stars { color: var(--star-color, #000000); font-size: 14px; letter-spacing: 1px; }
  .hl-reviews__item-title { font-size: 14px; }
  .hl-reviews__item-author { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; margin-left: auto; }
  .hl-reviews__verified, .hl-reviews__date { white-space: nowrap; }
  .hl-reviews__item-body { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
  .hl-reviews__item-image { margin-top: 12px; max-width: 240px; height: auto; display: block; }
  .hl-reviews__more {
    margin: 18px 0 0;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    align-self: flex-start;
  }

  /* ===== Modal form ===== */
  .hl-rv-modal {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0;
    transition: opacity 280ms ease, visibility 280ms ease;
  }
  .hl-rv-modal[hidden] { display: none; }
  .hl-rv-modal.is-open { visibility: visible; opacity: 1; }
  .hl-rv-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15,15,15,0.55);
  }
  .hl-rv-modal__panel {
    position: relative;
    background: var(--bg);
    color: var(--ink);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 48px 40px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    transform: translateY(12px) scale(0.98);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hl-rv-modal.is-open .hl-rv-modal__panel { transform: translateY(0) scale(1); }
  .hl-rv-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    background: var(--surface);
    border: 0; cursor: pointer; color: inherit;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hl-rv-modal__head { margin-bottom: 20px; }
  .hl-rv-modal__intro { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.6; }

  .hl-rv-form__field { margin-bottom: 18px; }
  .hl-rv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .hl-rv-form__label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 8px; }
  .hl-rv-form__input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(127,127,127,0.22);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 200ms ease;
  }
  .hl-rv-form__input:focus { border-color: var(--ink); }
  .hl-rv-form__textarea { min-height: 120px; resize: vertical; font-family: inherit; }
  .hl-rv-form__stars { display: inline-flex; gap: 4px; }
  .hl-rv-form__star {
    background: transparent; border: 0; padding: 4px;
    cursor: pointer; color: color-mix(in srgb, var(--ink) 55%, transparent);
    transition: color 150ms ease, transform 150ms ease;
  }
  .hl-rv-form__star:hover { transform: scale(1.1); }
  .hl-rv-form__star .ti { font-size: 28px; }
  .hl-rv-form__star.is-on { color: var(--star-color, #000000); }
  .hl-rv-form__star.is-on .ti::before { content: '\f9da'; /* tabler star-filled */ }
  .hl-rv-form__terms { font-size: 11px; color: var(--ink-muted); margin: 0 0 14px; line-height: 1.6; }
  .hl-rv-form__actions { display: flex; align-items: center; gap: 14px; }
  .hl-rv-form__feedback {
    margin-top: 12px; padding: 10px 14px;
    font-size: 13px; line-height: 1.5;
  }
  .hl-rv-form__feedback.is-error { background: rgba(224,74,42,0.08); color: var(--accent); }

  .hl-rv-form__success { text-align: center; padding: 16px 0 4px; }
  .hl-rv-form__success-icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    background: var(--accent); color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hl-rv-form__success-icon .ti { font-size: 28px; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-reviews--layout-split { grid-template-columns: 1fr 1.5fr; gap: 36px; }
  }
  @media (max-width: 767px) {
    .hl-reviews--layout-split { grid-template-columns: 1fr; gap: var(--gap-m, 32px); }
  }
  @media (max-width: 767px) {
    .hl-reviews {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-reviews__score { font-size: var(--score-fs-m, 44px) !important; }
    .hl-reviews__item-title { font-size: var(--rv-title-fs-m, 14px); }
    .hl-reviews__item-body { font-size: var(--rv-body-fs-m, 13px); }
    .hl-rv-modal__panel { padding: 32px 20px; width: 100vw; max-height: 92vh; }
    .hl-rv-form__row { grid-template-columns: 1fr; }
  }
/* END_SECTION:product-reviews */

/* START_SECTION:recently-viewed (INDEX:74) */
.hl-rv { background: var(--bg); color: var(--ink); }
  .hl-rv__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: var(--gap, 20px);
  }
  .hl-rv__card { display: block; color: inherit; text-decoration: none; }
  .hl-rv__card-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .hl-rv__card-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 600ms ease;
  }
  .hl-rv__card:hover .hl-rv__card-img img { transform: scale(1.04); }
  .hl-rv__card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .hl-rv__card-price { font-weight: 500; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-rv__grid {
      grid-template-columns: repeat(var(--cols-t, 3), 1fr);
      gap: 16px;
    }
  }
  @media (max-width: 767px) {
    .hl-rv__grid {
      grid-template-columns: repeat(var(--cols-m, 2), 1fr);
      gap: var(--gap-m, 12px);
    }
  }
  @media (max-width: 767px) {
    .hl-rv {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
  }
/* END_SECTION:recently-viewed */

/* START_SECTION:rich-text (INDEX:75) */
.hl-rich__body { max-width: 720px; }
  .hl-rich__body p { margin: 0 0 18px; }
  .hl-rich__body p:last-child { margin-bottom: 0; }
/* END_SECTION:rich-text */

/* START_SECTION:scrolling-text (INDEX:76) */
.hl-mq {
    background: var(--bg);
    color: var(--ink);
    overflow: hidden;
    position: relative;
    border-top: var(--border-w, 0) solid var(--border-color, currentColor);
    border-bottom: var(--border-w, 0) solid var(--border-color, currentColor);
  }
  .hl-mq--full-bleed { width: 100%; }

  /* Rotated variant — banner tilts at angle */
  .hl-mq[style*="--rotate"][style*="0deg"] { transform: none; }
  .hl-mq:not([style*="--rotate: 0deg"]) {
    transform: rotate(var(--rotate, 0));
    transform-origin: center;
  }

  .hl-mq__track {
    display: flex;
    width: max-content;
    animation: hl-mq-scroll var(--speed, 30s) linear infinite;
    will-change: transform;
  }
  .hl-mq--dir-right .hl-mq__track {
    animation-direction: reverse;
  }
  .hl-mq:hover .hl-mq__track { animation-play-state: paused; }

  .hl-mq__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: var(--gap, 32px);
    gap: var(--gap, 32px);
  }

  .hl-mq__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-size: var(--font-size, 22px);
    line-height: 1.2;
    font-weight: var(--weight, 700);
    letter-spacing: var(--letter-spacing, 0);
    white-space: nowrap;
  }
  .hl-mq__item--link {
    transition: opacity 200ms ease;
  }
  .hl-mq__item--link:hover { opacity: 0.6; }

  .hl-mq__icon { font-size: calc(var(--font-size, 22px) * 0.9); line-height: 1; opacity: 0.85; }
  .hl-mq__text--em { color: var(--accent-color, var(--accent, currentColor)); }

  .hl-mq__sep {
    color: inherit;
    opacity: 0.5;
    font-size: var(--font-size, 22px);
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
  }

  /* Style variants */
  .hl-mq--style-plain { /* default */ }
  .hl-mq--style-pill .hl-mq__item {
    padding: 8px 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
  }
  .hl-mq--style-pill .hl-mq__sep { display: none; }
  .hl-mq--style-pill .hl-mq__set { gap: 12px; padding-right: 12px; }

  .hl-mq--style-outlined .hl-mq__item {
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hl-mq--style-outlined .hl-mq__item .hl-mq__icon {
    -webkit-text-stroke: 0;
    color: inherit;
  }

  .hl-mq__empty {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    opacity: 0.6;
    letter-spacing: 0.06em;
  }

  @keyframes hl-mq-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hl-mq__track { animation: none; }
  }

  @media (max-width: 767px) {
    .hl-mq {
      padding-top: clamp(8px, 2vw, 16px);
      padding-bottom: clamp(8px, 2vw, 16px);
    }
    .hl-mq__item,
    .hl-mq__sep { font-size: var(--font-size-m, 16px); }
    .hl-mq__set { gap: calc(var(--gap, 32px) * 0.7); padding-right: calc(var(--gap, 32px) * 0.7); }
  }
/* END_SECTION:scrolling-text */

/* START_SECTION:search-drawer (INDEX:77) */
/* Override base .hl-drawer (which is configured for a right-side cart drawer):
     the search drawer slides DOWN from the top and must span the full viewport
     width. Pin both left and right edges so the panel inside isn't trapped in a
     zero-width container. */
  .hl-search-drawer {
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1050;
  }
  .hl-search-drawer .hl-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }
  .hl-search-drawer.open .hl-drawer-overlay { opacity: 1; pointer-events: auto; }
  .hl-search-drawer .hl-drawer-panel {
    position: relative;
    width: 100%;
    background: var(--bg);
    color: var(--ink);
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 350ms cubic-bezier(.7, 0, .3, 1);
    box-shadow: 0 16px 40px rgba(15, 15, 15, 0.18);
  }
  .hl-search-drawer.open .hl-drawer-panel { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .hl-search-drawer .hl-drawer-panel { transition: none; }
  }
  @media (max-width: 767px) {
    .hl-search-drawer .hl-search-drawer__grid {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
  }
/* END_SECTION:search-drawer */

/* START_SECTION:size-chart (INDEX:79) */
.hl-szc { background: var(--bg); color: var(--ink); }
  .hl-szc--align-center .hl-szc__head { text-align: center; }
  .hl-szc--align-center .hl-szc__head .hl-szc__intro { margin-left: auto; margin-right: auto; }
  .hl-szc--align-right  .hl-szc__head { text-align: right; }

  .hl-szc__heading {
    font-size: var(--heading-fs, 44px);
    line-height: 1.05;
    margin: 0;
  }
  .hl-szc__intro {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .hl-szc__list { display: flex; flex-direction: column; gap: 40px; }

  .hl-szc__chart-title {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .hl-szc__chart-sub {
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
  }
  .hl-szc__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--table-border, #E4E0D8);
  }
  .hl-szc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-fs, 13px);
    font-variant-numeric: tabular-nums;
  }
  .hl-szc__table th,
  .hl-szc__table td {
    padding: var(--cell-py, 12px) var(--cell-px, 14px);
    text-align: left;
    border-bottom: 1px solid var(--table-border, #E4E0D8);
  }
  .hl-szc__table th {
    background: var(--header-bg, #F4EFE7);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .hl-szc__table tbody tr:nth-child(even) {
    background: var(--row-stripe, #FAF7F1);
  }
  .hl-szc__table tbody tr:last-child td { border-bottom: 0; }
  .hl-szc__chart-note {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 12px 0 0;
    line-height: 1.6;
  }

  .hl-szc__tip {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--surface, #F4EFE7);
    border-left: 3px solid var(--accent);
  }
  .hl-szc__tip i { font-size: 22px; flex-shrink: 0; color: var(--accent); }
  .hl-szc__tip-title { font-weight: 600; margin-bottom: 4px; }
  .hl-szc__tip-body  { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

  .hl-szc__image-cap { font-size: 12px; color: var(--ink-muted); margin-top: 8px; }

  @media (max-width: 767px) {
    .hl-szc {
      padding-top: var(--pt-m, 40px) !important;
      padding-bottom: var(--pb-m, 40px) !important;
      padding-left: var(--px-m, 20px) !important;
      padding-right: var(--px-m, 20px) !important;
    }
    .hl-szc__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-szc__list { gap: 28px; }
    .hl-szc__table { font-size: 12px; }
    .hl-szc__table th, .hl-szc__table td { padding: 10px 10px; }
  /* Auto-generated mobile typography overrides */
    .hl-szc__chart-title { font-size: 18px; }
    .hl-szc__tip i { font-size: 18px; }

  }
/* END_SECTION:size-chart */

/* START_SECTION:slideshow (INDEX:80) */
/* ============================================================
     EYE-CATCHING ENHANCEMENTS
     1. Ken Burns — slow zoom on the active image, alternating
        transform-origin per slide for cinematic variety.
     2. Text stagger reveal — eyebrow → heading → body → CTA
        fade-up sequentially when slide becomes active.
     3. Segmented progress bar — replaces dots; each segment is a
        thin bar with an inner fill that animates from 0→100%
        across the cycle duration. Past segments stay full.
     All effects honour prefers-reduced-motion.
     ============================================================ */
  @media (prefers-reduced-motion: no-preference) {
    .hl-slideshow__slide.is-active .hl-slideshow__slide-img,
    .hl-slideshow__slide.is-active .hl-slideshow__slide-svg {
      animation: hlKenBurns var(--cycle-seconds, 6s) ease-out both;
      transform-origin: center center;
      will-change: transform;
    }
    .hl-slideshow__slide:nth-child(odd).is-active .hl-slideshow__slide-img,
    .hl-slideshow__slide:nth-child(odd).is-active .hl-slideshow__slide-svg {
      transform-origin: 30% 50%;
    }
    .hl-slideshow__slide:nth-child(even).is-active .hl-slideshow__slide-img,
    .hl-slideshow__slide:nth-child(even).is-active .hl-slideshow__slide-svg {
      transform-origin: 70% 50%;
    }
    @keyframes hlKenBurns {
      0%   { transform: scale(1); }
      100% { transform: scale(1.085); }
    }
  }

  /* Text stagger: hidden state by default, slides in when parent gains .is-active */
  .hl-slideshow__eyebrow,
  .hl-slideshow__heading,
  .hl-slideshow__body,
  .hl-slideshow__cta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .hl-slideshow__slide.is-active .hl-slideshow__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 250ms; }
  .hl-slideshow__slide.is-active .hl-slideshow__heading { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
  .hl-slideshow__slide.is-active .hl-slideshow__body    { opacity: 1; transform: translateY(0); transition-delay: 550ms; }
  .hl-slideshow__slide.is-active .hl-slideshow__cta     { opacity: 1; transform: translateY(0); transition-delay: 720ms; }
  @media (prefers-reduced-motion: reduce) {
    .hl-slideshow__eyebrow,
    .hl-slideshow__heading,
    .hl-slideshow__body,
    .hl-slideshow__cta {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* CTA shape variants — square / rounded / pill */
  .hl-slideshow__cta--square  { border-radius: 0 !important; }
  .hl-slideshow__cta--rounded { border-radius: 8px !important; }
  .hl-slideshow__cta--pill    { border-radius: 999px !important; }

  /* CTA size variants */
  .hl-slideshow__cta--size-small  { padding: 10px 18px !important; font-size: 10px !important; letter-spacing: 0.16em !important; }
  .hl-slideshow__cta--size-medium { /* default sizing from .cta base */ }
  .hl-slideshow__cta--size-large  { padding: 20px 36px !important; font-size: 13px !important; letter-spacing: 0.20em !important; }

  /* CTA group container — primary + optional secondary side-by-side */
  .hl-slideshow__ctas {
    display: inline-flex;
    gap: var(--cta-gap, 14px);
    align-items: center;
    flex-wrap: wrap;
  }
  /* Primary/secondary stagger reveal stays in sync with the existing .hl-slideshow__cta rule */
  .hl-slideshow__ctas .hl-slideshow__cta--secondary { transition-delay: 800ms; }

  /* Full-width-on-mobile CTAs */
  @media (max-width: 767px) {
    .hl-slideshow__ctas--full-mobile { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
    .hl-slideshow__cta--full-mobile { width: 100% !important; justify-content: center !important; }
  }

  /* Per-slide Ken Burns opt-out — block-level setting can disable the zoom on a specific slide */
  .hl-slideshow__slide--no-kb.is-active .hl-slideshow__slide-img,
  .hl-slideshow__slide--no-kb.is-active .hl-slideshow__slide-svg {
    animation: none !important;
    transform: none !important;
  }

  /* CTA style variants — colors emitted by the per-slide inline style block above.
     Structural tweaks + suppress the base `.cta::before` slide-up animation on
     ghost/link so it doesn't clash with our custom hover fill. */
  .hl-slideshow__cta--style-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }
  /* Disable the base `.cta::before` slide-up on ALL slideshow CTAs — the
     per-slide hover rules drive bg/color/border with the scheme's hover
     values, and a sliding ::before painted with var(--accent) layered
     underneath caused the wrong color to flash on hover. */
  .hl-slideshow__cta::before { display: none !important; }
  /* Ghost ring sharpens slightly on hover for tactile feedback. */
  .hl-slideshow__cta--style-ghost { border-width: 1.5px !important; }

  /* ============================================================
     SLIDESHOW CTA — hover animation
     The base .cta::before slides up using var(--accent); that's invisible
     when the section's accent matches the button background. Slideshow CTAs
     get their own self-contained hover effect:
       • the arrow icon glides right
       • a subtle lift shadow appears
       • the letter-spacing opens up slightly
       • a continuous "nudge" animation on the active arrow draws the eye
     All effects honour prefers-reduced-motion.
     ============================================================ */
  .hl-slideshow__cta {
    /* Preserve the text-stagger transitions for opacity + transform,
       and ADD transitions for the hover-driven properties. */
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
                letter-spacing 380ms cubic-bezier(0.22, 1, 0.36, 1),
                background 320ms ease,
                color 320ms ease,
                border-color 320ms ease;
  }
  .hl-slideshow__cta-icon {
    display: inline-block;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  @media (hover: hover) {
    .hl-slideshow__cta:hover {
      letter-spacing: calc(var(--button-letter-spacing, 0.18em) + 0.04em);
    }
    .hl-slideshow__cta:hover .hl-slideshow__cta-icon {
      transform: translateX(8px);
    }
    /* Lift shadow only on filled + ghost (visible buttons). Link is just text — no shadow. */
    .hl-slideshow__cta--style-filled:hover,
    .hl-slideshow__cta--style-ghost:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    }
  }
  /* Continuous gentle "nudge" on the active slide's CTA arrow so the
     button reads as alive even before interaction. Kicks in after the
     stagger reveal completes (1.4s). */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hlSSCtaArrowNudge {
      0%, 60%, 100% { transform: translateX(0); }
      75%           { transform: translateX(5px); }
      90%           { transform: translateX(0); }
    }
    .hl-slideshow__slide.is-active .hl-slideshow__cta-icon {
      animation: hlSSCtaArrowNudge 3.2s ease-in-out 1.4s infinite;
    }
    /* When the user hovers (slide-right state), suspend the nudge so the
       hover translate doesn't fight the keyframe. */
    .hl-slideshow__slide.is-active .hl-slideshow__cta:hover .hl-slideshow__cta-icon {
      animation-play-state: paused;
    }
  }

  /* Whole-slide click overlay (link_whole_slide setting) */
  .hl-slideshow__slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    text-decoration: none;
    /* Sits above image + overlay (z-index 2), below copy (z-index 3) for overlay mode.
       In stacked mode the copy is in document flow so the link only covers the image. */
  }

  .hl-slideshow {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--aspect-ratio, 21/9);
  }
  .hl-slideshow__track {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .hl-slideshow__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
  }
  .hl-slideshow__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-slideshow__slide { transition: none; }
  }
  .hl-slideshow__overlay { position: absolute; inset: 0; pointer-events: none; }
  .hl-slideshow__copy { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .hl-slideshow__copy--top-left { justify-content: flex-start; align-items: flex-start; }
  .hl-slideshow__copy--top-center { justify-content: flex-start; align-items: center; text-align: center; }
  .hl-slideshow__copy--top-right { justify-content: flex-start; align-items: flex-end; text-align: right; }
  .hl-slideshow__copy--center-left { justify-content: center; align-items: flex-start; }
  .hl-slideshow__copy--center-center { justify-content: center; align-items: center; text-align: center; }
  .hl-slideshow__copy--center-right { justify-content: center; align-items: flex-end; text-align: right; }
  .hl-slideshow__copy--bottom-left { justify-content: flex-end; align-items: flex-start; }
  .hl-slideshow__copy--bottom-center { justify-content: flex-end; align-items: center; text-align: center; }
  .hl-slideshow__copy--bottom-right { justify-content: flex-end; align-items: flex-end; text-align: right; }

  /* ============================================================
     INDICATOR STYLES
     The .hl-slideshow__dots container has a style modifier:
       --round     classic small white circles
       --pill      horizontal pills, active grows wider
       --frame     outlined rings that fill on active
       --square    small square dots
       --bars      segmented progress bars (Instagram style, animated fill)
       --count     not used here (rendered as .hl-slideshow__count)
     All styles use the same button markup + .hl-slideshow__dot-fill span,
     but the fill is only painted for the 'bars' variant.
     ============================================================ */
  .hl-slideshow__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 5;
  }
  .hl-slideshow__dot {
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    position: relative;
  }
  .hl-slideshow__dot:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
  .hl-slideshow__dot-fill { display: none; }

  /* ----- Round ----- */
  .hl-slideshow__dots--round { gap: 10px; }
  .hl-slideshow__dots--round .hl-slideshow__dot {
    width: 8px; height: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: background 250ms ease, transform 250ms ease;
  }
  .hl-slideshow__dots--round .hl-slideshow__dot:hover { background: rgba(255,255,255,0.65); transform: scale(1.15); }
  .hl-slideshow__dots--round .hl-slideshow__dot.is-active { background: var(--slideshow-ui-light, #ffffff); transform: scale(1.3); }

  /* ----- Pill (active elongates) ----- */
  .hl-slideshow__dots--pill { gap: 8px; }
  .hl-slideshow__dots--pill .hl-slideshow__dot {
    width: 22px; height: 4px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
    transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1), background 250ms ease;
  }
  .hl-slideshow__dots--pill .hl-slideshow__dot:hover { background: rgba(255,255,255,0.55); }
  .hl-slideshow__dots--pill .hl-slideshow__dot.is-active { width: 52px; background: var(--slideshow-ui-light, #ffffff); }

  /* ----- Frame (outlined ring) ----- */
  .hl-slideshow__dots--frame { gap: 10px; }
  .hl-slideshow__dots--frame .hl-slideshow__dot {
    width: 10px; height: 10px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
  }
  .hl-slideshow__dots--frame .hl-slideshow__dot:hover { border-color: rgba(255,255,255,0.85); transform: scale(1.1); }
  .hl-slideshow__dots--frame .hl-slideshow__dot.is-active { background: var(--slideshow-ui-light, #ffffff); border-color: var(--slideshow-ui-light, #ffffff); transform: scale(1.25); }

  /* ----- Square ----- */
  .hl-slideshow__dots--square { gap: 8px; }
  .hl-slideshow__dots--square .hl-slideshow__dot {
    width: 7px; height: 7px;
    background: rgba(255,255,255,0.4);
    border-radius: 1px;
    transition: background 250ms ease, transform 250ms ease;
  }
  .hl-slideshow__dots--square .hl-slideshow__dot:hover { background: rgba(255,255,255,0.65); transform: scale(1.15); }
  .hl-slideshow__dots--square .hl-slideshow__dot.is-active { background: var(--slideshow-ui-light, #ffffff); transform: scale(1.3); }

  /* ----- Bars (segmented progress with animated fill) ----- */
  .hl-slideshow__dots--bars {
    gap: 8px;
    width: min(420px, calc(100% - 48px));
  }
  .hl-slideshow__dots--bars .hl-slideshow__dot {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
    transition: background 200ms ease;
  }
  .hl-slideshow__dots--bars .hl-slideshow__dot:hover { background: rgba(255,255,255,0.45); }
  .hl-slideshow__dots--bars .hl-slideshow__dot-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--slideshow-ui-light, #ffffff);
    border-radius: 2px;
  }
  .hl-slideshow__dots--bars .hl-slideshow__dot.is-past .hl-slideshow__dot-fill { width: 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .hl-slideshow__dots--bars .hl-slideshow__dot.is-active .hl-slideshow__dot-fill {
      animation: hlProgressFill var(--cycle-seconds, 6s) linear forwards;
    }
    @keyframes hlProgressFill { from { width: 0%; } to { width: 100%; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .hl-slideshow__dots--bars .hl-slideshow__dot.is-active .hl-slideshow__dot-fill { width: 100%; }
  }
  .hl-slideshow:not([data-autoplay]) .hl-slideshow__dots--bars .hl-slideshow__dot.is-active .hl-slideshow__dot-fill {
    animation: none;
    width: 100%;
  }
  /* Pause progress-bar fill animation when autoplay is paused (hover). */
  .hl-slideshow.is-paused .hl-slideshow__dots--bars .hl-slideshow__dot.is-active .hl-slideshow__dot-fill {
    animation-play-state: paused;
  }

  /* ----- Count (text counter "01 / 03") ----- */
  .hl-slideshow__count {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    z-index: 5;
    color: var(--slideshow-ui-light, #ffffff);
    font-family: var(--font-display--family, var(--font-heading-family, 'Tenor Sans', serif));
    font-size: 13px;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    padding: 6px 14px;
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
  }
  .hl-slideshow__count-current {
    font-size: 18px;
    font-weight: 500;
    min-width: 1.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .hl-slideshow__count-sep { opacity: 0.55; }
  .hl-slideshow__count-total {
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
  }
  .hl-slideshow__count-buttons {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: inherit;
    overflow: hidden;
  }
  .hl-slideshow__count-buttons .hl-slideshow__dot {
    flex: 1;
    height: 100%;
    background: transparent;
  }
  .hl-slideshow__count-buttons .hl-slideshow__dot:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }

  /* ============================================================
     ARROW VISIBILITY MODES
     --arrows-always : arrows visible at all times
     --arrows-hover  : arrows fade in on hover/focus (desktop);
                       on touch devices (no hover) they're always visible
                       so users can still tap them.
     ============================================================ */
  .hl-slideshow__arrow { opacity: 1; }
  @media (hover: hover) {
    .hl-slideshow--arrows-hover .hl-slideshow__arrow {
      opacity: 0;
      transition: opacity 280ms ease, background 200ms ease;
    }
    .hl-slideshow--arrows-hover:hover .hl-slideshow__arrow,
    .hl-slideshow--arrows-hover:focus-within .hl-slideshow__arrow,
    .hl-slideshow--arrows-hover .hl-slideshow__arrow:focus-visible {
      opacity: 1;
    }
  }

  /* ===== Prev / next arrows ===== */
  .hl-slideshow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: var(--slideshow-ui-light, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 5;
    transition: background 200ms ease, opacity 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .hl-slideshow__arrow:hover, .hl-slideshow__arrow:focus { background: rgba(0,0,0,0.65); outline: none; }
  .hl-slideshow__arrow--prev { left: 16px; }
  .hl-slideshow__arrow--next { right: 16px; }
  .hl-slideshow__arrow i { font-size: 20px; line-height: 1; }
  @media (max-width: 767px) {
    .hl-slideshow__arrow { width: 40px; height: 40px; font-size: 16px; }
    .hl-slideshow__arrow--prev { left: 10px; }
    .hl-slideshow__arrow--next { right: 10px; }
    .hl-slideshow__arrow i { font-size: 16px; }
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-slideshow { aspect-ratio: var(--aspect-ratio-tablet, 16/9); }
    .hl-slideshow__copy { padding: 48px !important; }
    .hl-slideshow__dot { width: 10px; height: 10px; }
  }

  /* ============================================================
     MOBILE  (≤767px)
     The mode is decided by the root class:
       .hl-slideshow--m-overlay  → carousel (one slide at a time, text on image)
       .hl-slideshow--m-stacked  → vertical scroll (image on top, text panel below)
     ============================================================ */
  @media (max-width: 767px) {

    /* ---------- Mobile alignment classes for OVERLAY mode ---------- */
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-top-left      { justify-content: flex-start; align-items: flex-start; text-align: left; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-top-center    { justify-content: flex-start; align-items: center; text-align: center; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-top-right     { justify-content: flex-start; align-items: flex-end; text-align: right; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-center-left   { justify-content: center; align-items: flex-start; text-align: left; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-center-center { justify-content: center; align-items: center; text-align: center; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-center-right  { justify-content: center; align-items: flex-end; text-align: right; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-bottom-left   { justify-content: flex-end; align-items: flex-start; text-align: left; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-bottom-center { justify-content: flex-end; align-items: center; text-align: center; }
    .hl-slideshow--m-overlay .hl-slideshow__copy.mp-bottom-right  { justify-content: flex-end; align-items: flex-end; text-align: right; }

    /* ============================================================
       OVERLAY MODE — carousel with text-on-image
       Strong gradient + heavy text-shadow guarantee readability.
       ============================================================ */
    .hl-slideshow--m-overlay { aspect-ratio: var(--aspect-ratio-mobile, 4/5); }
    .hl-slideshow--m-overlay .hl-slideshow__copy { padding: 24px !important; }
    .hl-slideshow--m-overlay .hl-slideshow__overlay {
      display: block !important;
      z-index: 2;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.35) 45%,
        rgba(0,0,0,0.85) 100%) !important;
    }
    .hl-slideshow--m-overlay .hl-slideshow__copy {
      z-index: 3;
      color: var(--slideshow-ui-light, #ffffff) !important;
      background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 45%,
        rgba(0,0,0,0.55) 100%);
    }
    .hl-slideshow--m-overlay .hl-slideshow__copy .display,
    .hl-slideshow--m-overlay .hl-slideshow__heading,
    .hl-slideshow--m-overlay .hl-slideshow__body,
    .hl-slideshow--m-overlay .hl-slideshow__eyebrow,
    .hl-slideshow--m-overlay .hl-slideshow__copy p,
    .hl-slideshow--m-overlay .hl-slideshow__copy h2,
    .hl-slideshow--m-overlay .hl-slideshow__copy span {
      color: var(--slideshow-ui-light, #ffffff) !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.5) !important;
    }
    .hl-slideshow--m-overlay .hl-slideshow__cta { text-shadow: none !important; }

    /* ============================================================
       STACKED MODE — same carousel, only the per-slide layout changes:
       image on top + white text panel below (instead of text overlaid).
       Auto-rotate, swipe, dots all still work.

       Implementation:
       - Slideshow container: aspect-ratio auto, height fits content.
       - Track is a CSS grid with one cell; all slides occupy that cell,
         so the cell sizes to the tallest slide's natural height (image
         aspect 4/5 + text panel auto). Inactive slides sit underneath
         at opacity 0, ready to crossfade in.
       - Each slide: relative position, flex column → <picture> (4/5
         aspect, overflow hidden so Ken Burns clips) + .hl-slideshow__copy
         (white panel, dark text, alignment via mp-* classes).
       - Dots: pulled out of absolute positioning and placed inline below
         the track via flex column on the slideshow root.
       - Arrows: hidden (positioning over an image-then-text layout is
         visually awkward; swipe + dots cover navigation).
       ============================================================ */
    .hl-slideshow--m-stacked {
      aspect-ratio: auto !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__track {
      display: grid !important;
      grid-template-columns: 1fr;
      height: auto !important;
      /* Paint the track so the section's color-scheme background (which can
         be black per the merchant's scheme-2) can't bleed through between
         the white copy panel and the white dots strip when the active
         slide is shorter than the tallest slide in the shared grid cell. */
      background: var(--slideshow-ui-light, #ffffff) !important;
    }
    /* Inactive slides stay absolutely positioned (matching the base rule)
       so they DON'T contribute to the grid cell's height. Only the active
       slide is in flow → the track height = the active slide's content
       height, exactly. No empty padding below short slides. */
    .hl-slideshow--m-stacked .hl-slideshow__slide {
      grid-column: 1;
      grid-row: 1;
      inset: 0 !important;
      width: 100% !important;
      align-self: start;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      /* opacity 0 / 1 still driven by base rule + .is-active */
    }
    .hl-slideshow--m-stacked .hl-slideshow__slide.is-active {
      position: relative !important;
      inset: auto !important;
      height: auto !important;
    }
    /* Picture is left at its default inline-ish behavior — the IMG itself
       carries the dimensions (relative position + aspect-ratio). This avoids
       the chicken-and-egg sizing problem where an absolutely-positioned img
       inside a picture with no computed height collapsed to 0×0. */
    .hl-slideshow--m-stacked .hl-slideshow__slide picture {
      display: block;
      width: 100%;
      flex: 0 0 auto;
      line-height: 0;
    }
    .hl-slideshow--m-stacked .hl-slideshow__slide-img,
    .hl-slideshow--m-stacked .hl-slideshow__slide-svg {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      aspect-ratio: var(--aspect-ratio-mobile, 4/5) !important;
      object-fit: cover !important;
      display: block !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__overlay { display: none !important; }
    .hl-slideshow--m-stacked .hl-slideshow__copy {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      display: block !important;
      background: var(--slideshow-ui-light, #ffffff) !important;
      color: var(--slideshow-ui-dark, #0a0a0a) !important;
      padding: 28px 24px !important;
      text-shadow: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      text-align: left;
    }
    /* Horizontal alignment from copy_position_mobile (mp-*-left / -center / -right).
       Vertical half is ignored in stacked mode — the text always sits below the image. */
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-top-left,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-center-left,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-bottom-left      { text-align: left !important; }
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-top-center,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-center-center,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-bottom-center    { text-align: center !important; }
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-top-right,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-center-right,
    .hl-slideshow--m-stacked .hl-slideshow__copy.mp-bottom-right     { text-align: right !important; }
    .hl-slideshow--m-stacked .hl-slideshow__copy .display,
    .hl-slideshow--m-stacked .hl-slideshow__heading,
    .hl-slideshow--m-stacked .hl-slideshow__body,
    .hl-slideshow--m-stacked .hl-slideshow__eyebrow,
    .hl-slideshow--m-stacked .hl-slideshow__copy p,
    .hl-slideshow--m-stacked .hl-slideshow__copy h2 {
      color: var(--slideshow-ui-dark, #0a0a0a) !important;
      text-shadow: none !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__heading {
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__body {
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      opacity: 0.85 !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__cta {
      display: inline-flex !important;
      margin-top: 8px !important;
      /* Colors come from the per-slide {% style %} block so merchant choices
         for cta_bg / cta_fg / cta_hover_* (and scheme colors) win.
         Each slide can also have a different primary vs secondary CTA color. */
    }

    /* Dots: placed inline below the track on a white strip (matches the
       text panel), recolored dark for contrast. */
    .hl-slideshow--m-stacked .hl-slideshow__dots {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      justify-content: center;
      padding: 14px 16px !important;
      background: var(--slideshow-ui-light, #ffffff) !important;
      order: 99;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--round .hl-slideshow__dot,
    .hl-slideshow--m-stacked .hl-slideshow__dots--square .hl-slideshow__dot,
    .hl-slideshow--m-stacked .hl-slideshow__dots--pill .hl-slideshow__dot {
      background: rgba(0,0,0,0.3) !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--round .hl-slideshow__dot.is-active,
    .hl-slideshow--m-stacked .hl-slideshow__dots--square .hl-slideshow__dot.is-active,
    .hl-slideshow--m-stacked .hl-slideshow__dots--pill .hl-slideshow__dot.is-active {
      background: var(--slideshow-ui-dark, #0a0a0a) !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--frame .hl-slideshow__dot {
      border-color: rgba(0,0,0,0.4) !important;
      background: transparent !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--frame .hl-slideshow__dot.is-active {
      background: var(--slideshow-ui-dark, #0a0a0a) !important;
      border-color: var(--slideshow-ui-dark, #0a0a0a) !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--bars .hl-slideshow__dot {
      background: rgba(0,0,0,0.18) !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__dots--bars .hl-slideshow__dot-fill {
      background: var(--slideshow-ui-dark, #0a0a0a) !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__count {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      color: var(--slideshow-ui-dark, #0a0a0a) !important;
      background: rgba(0,0,0,0.06) !important;
      align-self: center;
      margin: 14px auto !important;
    }
    .hl-slideshow--m-stacked .hl-slideshow__count-buttons .hl-slideshow__dot:focus-visible {
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4);
    }

    /* Arrows: hidden in stacked. Position-over-image-then-text reads
       awkwardly. Swipe + dots handle navigation. */
    .hl-slideshow--m-stacked .hl-slideshow__arrow {
      display: none !important;
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:stats-strip (INDEX:81) */
.hl-stats {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    align-items: center;
  }
  .hl-stats__num { font-size: var(--stats-num-size, 84px) !important; }
  .hl-stats--align-center .hl-stats__col { text-align: center; }
  .hl-stats--align-right .hl-stats__col { text-align: right; }
  .hl-stats__col + .hl-stats__col {
    border-left: 1px solid currentColor;
    border-left-color: rgba(127,127,127,0.25);
    padding-left: 48px;
  }
  .hl-stats--no-dividers .hl-stats__col + .hl-stats__col { border-left: none; padding-left: 0; }
  .hl-stats__eyebrow { color: var(--accent); margin-bottom: 14px; }
  .hl-stats__num { font-size: 84px; line-height: 1; margin-bottom: 8px; }
  .hl-stats__caption {
    font-size: 12px;
    color: currentColor;
    opacity: 0.7;
    letter-spacing: 0.04em;
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-stats { grid-template-columns: 1fr 1fr; gap: 32px; }
    .hl-stats__col + .hl-stats__col { border-left: none; padding-left: 0; }
  }
  @media (max-width: 767px) {
    .hl-stats { padding-left: 20px !important; padding-right: 20px !important; }
    .hl-stats__num { font-size: var(--stats-num-size-mobile, 54px) !important; }
    /* Kill the desktop divider when columns stack — without this each stacked
       column inherits the left border + padding-left, producing a thin
       leftover strip down the side of mobile stats. */
    .hl-stats__col + .hl-stats__col { border-left: none !important; padding-left: 0 !important; }
  }
/* END_SECTION:stats-strip */

/* START_SECTION:steps (INDEX:82) */
.hl-steps {
    background: var(--bg);
    color: var(--ink);
  }
  .hl-steps__grid {
    display: grid;
  }
  .hl-steps__card {
    background: var(--surface, transparent);
    border: 1px solid var(--border, transparent);
    display: flex;
    flex-direction: column;
  }
  .hl-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hl-steps__card--num-plain .hl-steps__num {
    width: auto;
    height: auto;
    background: transparent;
  }
  .hl-steps__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hl-steps__icon svg, .hl-steps__icon img {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
  }
  .hl-steps__step-title {
    font-weight: 600;
  }
  .hl-steps__step-body {
    color: var(--ink-soft, inherit);
  }
/* END_SECTION:steps */

/* START_SECTION:testimonials (INDEX:83) */
.hl-tst__grid { display: grid; }
  .hl-tst__grid--carousel {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--gap, 24px) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .hl-tst__grid--carousel::-webkit-scrollbar { display: none; }
  .hl-tst__grid--carousel .hl-tst__card {
    flex: 0 0 calc((100% - (var(--cols, 3) - 1) * var(--gap, 24px)) / var(--cols, 3));
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  @media (max-width: 767px) {
    .hl-tst__grid--carousel .hl-tst__card {
      flex: 0 0 calc((100% - (var(--cols-m, 1) - 1) * var(--gap, 24px)) / var(--cols-m, 1));
    }
  }

  .hl-tst__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    color: var(--ink);
  }
  .hl-tst__stars { color: var(--accent); font-size: 14px; letter-spacing: 2px; line-height: 1; }
  .hl-tst__quote {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    quotes: "\201C" "\201D";
  }
  .hl-tst__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }

  /* Content alignment — controlled by the section's `alignment` setting.
     Cascades to: heading + eyebrow (already), card content text, author row,
     and the CTA wrap. One toggle, full-section effect. */
  .hl-tst--align-left  .hl-tst__card   { text-align: left; }
  .hl-tst--align-left  .hl-tst__author { justify-content: flex-start; }
  .hl-tst--align-center .hl-tst__card   { text-align: center; }
  .hl-tst--align-center .hl-tst__author { justify-content: center; }
  .hl-tst--align-right .hl-tst__card   { text-align: right; }
  .hl-tst--align-right .hl-tst__author { justify-content: flex-end; }
  .hl-tst__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
  .hl-tst__name { font-weight: 500; font-size: 14px; }
  .hl-tst__role { font-size: 12px; opacity: 0.7; margin-top: 2px; }
/* END_SECTION:testimonials */

/* START_SECTION:topbar (INDEX:84) */
.hl-topbar {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
  }
  .hl-topbar--center        { justify-content: center; text-align: center; }
  .hl-topbar--left          { justify-content: flex-start; }
  .hl-topbar--right         { justify-content: flex-end; }
  .hl-topbar--split,
  .hl-topbar--space-between { justify-content: space-between; gap: 16px; }
  .hl-topbar__text          { display: inline-block; }
  .hl-topbar__contact       {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .hl-topbar__sep           { opacity: 0.45; }
  .hl-topbar__link          {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 200ms ease;
  }
  .hl-topbar__link:hover    { opacity: 0.7; }
  .hl-topbar__link i.ti     { font-size: 12px; }
  .hl-topbar__link--cta     { text-decoration: underline; text-underline-offset: 3px; }
  .hl-topbar__close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
  }
  .hl-topbar__close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .hl-topbar__close:hover { opacity: 1; }
  .hl-topbar.is-dismissed { display: none !important; }

  @media (max-width: 767px) {
    .hl-topbar {
      flex-wrap: wrap;
      row-gap: 4px;
    }
    .hl-topbar--space-between,
    .hl-topbar--split { justify-content: center; }
    .hl-topbar__contact { gap: 6px; }
  }
/* END_SECTION:topbar */

/* START_SECTION:trustpilot-reviews (INDEX:85) */
.hl-tp { background: var(--bg); color: var(--ink); }

  /* === Trustpilot-style stars (square green tiles with white star icon) === */
  .hl-tp__stars { display: inline-flex; gap: 3px; vertical-align: middle; }
  .hl-tp__star {
    width: 22px;
    height: 22px;
    display: inline-block;
    position: relative;
    background: var(--star-color, #00B67A);
  }
  .hl-tp__star::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><polygon points="12,2 14.85,8.5 22,9.27 16.5,13.97 18.18,21 12,17.27 5.82,21 7.5,13.97 2,9.27 9.15,8.5"/></svg>') no-repeat center / 70%;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><polygon points="12,2 14.85,8.5 22,9.27 16.5,13.97 18.18,21 12,17.27 5.82,21 7.5,13.97 2,9.27 9.15,8.5"/></svg>') no-repeat center / 70%;
  }
  .hl-tp__star--empty { background: var(--star-empty, #DCDCE6); }
  .hl-tp__star--half  { background: linear-gradient(90deg, var(--star-color, #00B67A) 50%, var(--star-empty, #DCDCE6) 50%); }

  /* === Summary header === */
  .hl-tp__summary { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
  .hl-tp__summary-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .hl-tp__logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
  .hl-tp__logo-star {
    width: 18px;
    height: 18px;
    display: inline-block;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><polygon points="12,2 14.85,8.5 22,9.27 16.5,13.97 18.18,21 12,17.27 5.82,21 7.5,13.97 2,9.27 9.15,8.5"/></svg>') no-repeat center / contain;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><polygon points="12,2 14.85,8.5 22,9.27 16.5,13.97 18.18,21 12,17.27 5.82,21 7.5,13.97 2,9.27 9.15,8.5"/></svg>') no-repeat center / contain;
  }
  .hl-tp__logo-text {
    font-family: var(--font-body--family, 'Inter', sans-serif);
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .hl-tp__score { font-size: 14px; }
  .hl-tp__score strong { font-weight: 700; font-size: 16px; }
  .hl-tp__score-max { opacity: 0.55; margin-left: 2px; }
  .hl-tp__count { font-size: 12px; opacity: 0.75; }
  .hl-tp__count a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* === Cards grid === */
  .hl-tp__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--gap, 20px);
  }

  .hl-tp__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 24px 22px;
    border-radius: 4px;
  }
  .hl-tp--style-card .hl-tp__card { background: rgba(0, 0, 0, 0.025); }
  .hl-tp--style-bordered .hl-tp__card { border: 1px solid var(--border-2, currentColor); background: transparent; }
  .hl-tp--style-minimal .hl-tp__card { padding: 0; background: transparent; }
  .hl-tp--style-underline .hl-tp__card { padding: 22px 0; border-bottom: 1px solid var(--border-2, currentColor); border-radius: 0; }

  .hl-tp--align-center .hl-tp__card { text-align: center; align-items: center; }
  .hl-tp--align-right  .hl-tp__card { text-align: right;  align-items: flex-end; }

  .hl-tp__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .hl-tp--align-center .hl-tp__card-head { justify-content: center; flex-direction: column; }

  .hl-tp__date {
    font-size: 11px;
    opacity: 0.6;
    letter-spacing: 0.04em;
  }
  .hl-tp__title {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 4px 0 0;
  }
  .hl-tp__body {
    font-size: 14px;
    line-height: 1.65;
    opacity: 0.9;
  }
  .hl-tp__body p { margin: 0 0 8px; }
  .hl-tp__body p:last-child { margin-bottom: 0; }

  .hl-tp__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
  }
  .hl-tp--align-center .hl-tp__author { flex-direction: column; gap: 4px; }
  .hl-tp__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--ph-bg, #CCCCCC);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 14px;
  }
  .hl-tp__avatar--initial { background: var(--ink); }
  .hl-tp__author-meta { line-height: 1.3; }
  .hl-tp__author-name { font-size: 13px; font-weight: 600; }
  .hl-tp__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--tp-green, #00B67A);
    font-weight: 500;
    margin-top: 2px;
  }
  .hl-tp__verified .ti { font-size: 12px; }
  .hl-tp__location { font-size: 11px; opacity: 0.65; margin-top: 2px; }

  /* Optional product reference at bottom of a review */
  .hl-tp__product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    transition: background 200ms ease;
  }
  .hl-tp__product:hover { background: rgba(0, 0, 0, 0.1); }
  .hl-tp__product img { width: 28px; height: 36px; object-fit: cover; }

  .hl-tp__cta { display: inline-flex; align-items: center; }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-tp__grid { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); gap: 18px; }
  }
  @media (max-width: 767px) {
    .hl-tp__grid { grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); gap: var(--gap-m, 16px); }
  }
  @media (max-width: 767px) {
    .hl-tp {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-tp__star { width: 18px; height: 18px; }
    .hl-tp__card { padding: 18px 16px; }
    .hl-tp--style-minimal .hl-tp__card { padding: 0; }
    .hl-tp__title { font-size: 15px; }
    .hl-tp__body { font-size: 13px; }
  }

  /* === Slider layout === */
  .hl-tp__viewport { position: relative; }
  .hl-tp--layout-slider .hl-tp__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--slider-gap, 16px) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 0 16px;
  }
  .hl-tp--layout-slider .hl-tp__grid::-webkit-scrollbar { display: none; }
  .hl-tp--layout-slider .hl-tp__card {
    flex: 0 0 calc((100% - var(--slider-gap, 16px) * (var(--slider-per-view, 3) - 1)) / var(--slider-per-view, 3));
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .hl-tp__slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
  .hl-tp__dots { display: inline-flex; gap: 8px; }
  .hl-tp__dot {
    width: 8px; height: 8px;
    background: var(--ink);
    opacity: 0.25;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hl-tp__dot:hover { opacity: 0.6; }
  .hl-tp__dot.is-active { opacity: 1; transform: scale(1.3); }
  .hl-tp__arrows { display: inline-flex; gap: 8px; }
  .hl-tp__arrow {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-2, currentColor);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease;
  }
  .hl-tp__arrow:hover { background: var(--ink); color: var(--bg); }

  /* Controls layout variants */
  .hl-tp--controls-stacked .hl-tp__slider-nav { flex-direction: column; gap: 14px; }
  .hl-tp--controls-dots-only .hl-tp__arrows { display: none !important; }
  .hl-tp--controls-arrows-only .hl-tp__dots { display: none !important; }

  @media (max-width: 767px) {
    .hl-tp--layout-slider .hl-tp__card {
      flex: 0 0 calc((100% - var(--slider-gap, 16px) * (var(--slider-per-view-m, 1) - 1)) / var(--slider-per-view-m, 1));
    }
    .hl-tp__arrow { width: 34px; height: 34px; }
    /* On mobile, always stack controls so dots and arrows don't compete for space */
    .hl-tp__slider-nav {
      flex-direction: column !important;
      gap: 12px !important;
    }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round,
     not stretched into pills. Touch-friendly 32-34px. */
  @media (max-width: 767px) {
    .hl-tp__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
  }
/* END_SECTION:trustpilot-reviews */

/* START_SECTION:video-features (INDEX:86) */
.hl-vfeat { background: var(--bg); color: var(--ink); }
  .hl-vfeat__body { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 12px 0 0; max-width: 680px; }

  .hl-vfeat__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    gap: var(--gap, 24px) var(--gap, 24px);
    row-gap: var(--row-gap, 56px);
  }
  .hl-vfeat__cell { min-width: 0; }
  .hl-vfeat__cell--span-2 { grid-column: span 2; }

  .hl-vfeat__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
  }
  .hl-vfeat__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  iframe.hl-vfeat__video { object-fit: fill; }

  /* Below / above text layouts */
  .hl-vfeat__copy { padding-top: 18px; }
  .hl-vfeat--text-above .hl-vfeat__cell { display: flex; flex-direction: column; }
  .hl-vfeat--text-above .hl-vfeat__copy { padding-top: 0; padding-bottom: 18px; order: -1; }
  .hl-vfeat--align-center .hl-vfeat__copy { text-align: center; }
  .hl-vfeat--align-right  .hl-vfeat__copy { text-align: right; }

  .hl-vfeat__copy-eyebrow { margin-bottom: 8px; }
  .hl-vfeat__copy-title { margin: 0 0 10px; line-height: 1.1; }
  .hl-vfeat__copy-body { line-height: 1.65; opacity: 0.9; }
  .hl-vfeat__copy-body p { margin: 0 0 8px; }
  .hl-vfeat__copy-body p:last-child { margin-bottom: 0; }

  .hl-vfeat__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hl-vfeat__cta .ti { transition: transform 200ms ease; }
  .hl-vfeat__cta:hover .ti { transform: translateX(4px); }

  /* Overlay layout */
  .hl-vfeat__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .hl-vfeat__caption {
    position: absolute;
    color: #fff;
    z-index: 2;
    padding: 28px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    max-width: 88%;
  }
  .hl-vfeat__caption--top-left     { top: 0; left: 0; }
  .hl-vfeat__caption--top-right    { top: 0; right: 0; text-align: right; }
  .hl-vfeat__caption--bottom-left  { bottom: 0; left: 0; }
  .hl-vfeat__caption--bottom-right { bottom: 0; right: 0; text-align: right; }
  .hl-vfeat__caption--center {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; max-width: 88%;
  }
  .hl-vfeat__caption-eyebrow {
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 8px; opacity: 0.85;
  }
  .hl-vfeat__caption-title {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .hl-vfeat__caption-body { font-size: 13px; opacity: 0.9; margin-bottom: 12px; line-height: 1.5; }
  .hl-vfeat__cta--overlay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--overlay-cta-fg, #fff);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 14px;
    background: var(--overlay-cta-bg, rgba(255, 255, 255, 0.15));
    border: 1px solid var(--overlay-cta-border, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(6px);
    transition: background 200ms ease;
  }
  .hl-vfeat__cta--overlay:hover { background: rgba(255, 255, 255, 0.28); }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-vfeat__caption { padding: 18px; }
    .hl-vfeat__caption-title { font-size: 20px; }
    .hl-vfeat__grid { gap: 16px !important; }
  }
  @media (max-width: 767px) {
    .hl-vfeat {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-vfeat__grid {
      grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
      gap: var(--gap-m, 16px);
      row-gap: calc(var(--row-gap, 56px) * 0.6);
    }
    .hl-vfeat__cell--span-2 { grid-column: span 1; }
  /* Auto-generated mobile typography overrides */
    .hl-vfeat__caption-title { font-size: 20px; }

  }
/* END_SECTION:video-features */

/* START_SECTION:video-slider (INDEX:87) */
.hl-vslide { background: var(--bg); color: var(--ink); }

  /* Full-bleed mode: ignore any inherited section max-width and stretch
     edge to edge. The track itself is 100vw so slides span the viewport. */
  .hl-vslide--full-bleed {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hl-vslide--full-bleed .hl-vslide__wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hl-vslide--full-bleed .hl-vslide__track {
    width: 100%;
  }
  .hl-vslide--full-bleed .hl-vslide__slide {
    flex: 0 0 100%;
  }
  .hl-vslide__head { max-width: 720px; }
  .hl-vslide--align-center .hl-vslide__head { margin-left: auto; margin-right: auto; }
  .hl-vslide__body { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 12px 0 0; }

  .hl-vslide__wrap { position: relative; }
  .hl-vslide__track {
    display: flex;
    gap: var(--gap, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hl-vslide__track::-webkit-scrollbar { display: none; }
  .hl-vslide__slide {
    flex: 0 0 calc((100% - (var(--slides-dt) - 1) * var(--gap)) / var(--slides-dt));
    scroll-snap-align: start;
    min-width: 0;
    position: relative;
  }

  .hl-vslide__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ui-dark, #000);
  }
  .hl-vslide__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  iframe.hl-vslide__video { object-fit: fill; }
  .hl-vslide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .hl-vslide__caption {
    position: absolute;
    color: var(--ui-light, #fff);
    z-index: 2;
    padding: 28px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    max-width: 80%;
  }
  .hl-vslide__caption--top-left     { top: 0; left: 0; }
  .hl-vslide__caption--top-right    { top: 0; right: 0; text-align: right; }
  .hl-vslide__caption--bottom-left  { bottom: 0; left: 0; }
  .hl-vslide__caption--bottom-right { bottom: 0; right: 0; text-align: right; }
  .hl-vslide__caption--center {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; max-width: 88%;
  }
  .hl-vslide__caption-eyebrow {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 8px; opacity: 0.85;
  }
  .hl-vslide__caption-title {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .hl-vslide__caption-sub {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 14px;
  }
  .hl-vslide__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-light, #fff);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    transition: background 200ms ease;
  }
  .hl-vslide__cta:hover { background: rgba(255, 255, 255, 0.28); }

  .hl-vslide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ui-dark, #0f0f0f);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: background 200ms ease, opacity 200ms ease;
  }
  .hl-vslide__arrow:hover { background: var(--ui-light, #fff); }
  .hl-vslide__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
  .hl-vslide__arrow--prev { left: 14px; }
  .hl-vslide__arrow--next { right: 14px; }
  .hl-vslide__arrow .ti { font-size: 18px; }

  /* Arrow visibility modes (merchant-controlled via section setting) */
  .hl-vslide--arrows-always .hl-vslide__arrow { opacity: 1; }
  .hl-vslide--arrows-hover .hl-vslide__arrow {
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease, background 200ms ease;
  }
  .hl-vslide--arrows-hover:hover .hl-vslide__arrow,
  .hl-vslide--arrows-hover:focus-within .hl-vslide__arrow {
    opacity: 1;
    visibility: visible;
  }
  /* Touch devices: hover-mode arrows hide entirely so finger swipe is uninterrupted */
  @media (hover: none) {
    .hl-vslide--arrows-hover .hl-vslide__arrow {
      opacity: 0 !important;
      visibility: hidden !important;
    }
  }

  .hl-vslide__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
  .hl-vslide__dots { display: inline-flex; gap: 8px; }
  .hl-vslide__dot {
    width: 8px;
    height: 8px;
    background: var(--ink);
    opacity: 0.25;
    border: 0;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hl-vslide__dot:hover { opacity: 0.6; }
  .hl-vslide__dot.is-active { opacity: 1; transform: scale(1.3); }
  .hl-vslide__counter {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-vslide__caption { padding: 20px; }
    .hl-vslide__caption-title { font-size: 22px; }
    .hl-vslide__slide {
      flex: 0 0 calc((100% - (var(--slides-t, 2) - 1) * var(--gap, 16px)) / var(--slides-t, 2));
    }
  }
  @media (max-width: 767px) {
    .hl-vslide {
      padding-top: var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left: var(--px-m, 16px) !important;
      padding-right: var(--px-m, 16px) !important;
    }
    .hl-vslide__track { gap: var(--gap-m, 12px); }
    .hl-vslide__slide {
      flex: 0 0 calc((100% - (var(--slides-m) - 1) * var(--gap-m)) / var(--slides-m));
    }
    .hl-vslide__caption { padding: 16px; }
    .hl-vslide__caption-title { font-size: 18px; }

    /* Mobile-below mode: caption flows under the video, not overlaid. */
    .hl-vslide__slide--m-below .hl-vslide__caption {
      position: static !important;
      transform: none !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      text-align: left !important;
      max-width: 100% !important;
      padding: 16px 4px 0 !important;
      color: var(--ink) !important;
      text-shadow: none !important;
      margin-top: 12px;
    }
    .hl-vslide__slide--m-below .hl-vslide__cta { color: var(--ink); }
    .hl-vslide__slide--m-below .hl-vslide__caption-eyebrow { color: var(--ink-muted); opacity: 1; }
    .hl-vslide__arrow { width: 36px; height: 36px; }
    .hl-vslide__arrow--prev { left: 8px; }
    .hl-vslide__arrow--next { right: 8px; }
  /* Auto-generated mobile typography overrides */
    .hl-vslide__caption-title { font-size: 20px; }

  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round.
     Touch-friendly 32x32 with shadow. */
  @media (max-width: 767px) {
    .hl-vslide__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }
    .hl-vslide__arrow--prev { left: 6px !important; }
    .hl-vslide__arrow--next { right: 6px !important; }
  }
/* END_SECTION:video-slider */

/* START_SECTION:video-testimonials (INDEX:88) */
.hl-vtest { background: var(--bg); color: var(--ink); }
  .hl-vtest--full-bleed { max-width: 100% !important; }

  .hl-vtest__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .hl-vtest--align-center .hl-vtest__head { flex-direction: column; align-items: center; text-align: center; }
  .hl-vtest--align-right  .hl-vtest__head { text-align: right; }
  .hl-vtest__heading { font-size: var(--heading-fs, 44px); line-height: 1.05; margin: 0; }
  .hl-vtest__body { font-size: 14px; line-height: 1.7; opacity: 0.85; margin: 14px 0 0; }

  .hl-vtest__agg { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .hl-vtest--align-center .hl-vtest__agg { align-items: center; }
  .hl-vtest__agg-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
  .hl-vtest__agg-stars  { color: var(--star-color, #000000); letter-spacing: 1px; font-size: 16px; }
  .hl-vtest__agg-count  { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; }

  .hl-vtest__wrap { position: relative; overflow: hidden; }
  .hl-vtest__track {
    display: flex;
    gap: var(--gap, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .hl-vtest__track::-webkit-scrollbar { display: none; }

  .hl-vtest__slide {
    flex: 0 0 calc((100% - (var(--slides-d) - 1) * var(--gap)) / var(--slides-d));
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* Card styles */
  .hl-vtest--card-bordered .hl-vtest__slide { border: 1px solid rgba(127,127,127,0.18); padding: 14px; border-radius: var(--card-radius, 0); }
  .hl-vtest--card-filled   .hl-vtest__slide { background: var(--card-bg, var(--surface)); padding: 14px; border-radius: var(--card-radius, 0); }

  .hl-vtest__media {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    border-radius: var(--card-radius, 0);
  }
  .hl-vtest__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  iframe.hl-vtest__video { object-fit: fill; }
  .hl-vtest__placeholder { width: 100%; height: 100%; }
  .hl-vtest__placeholder svg { width: 100%; height: 100%; display: block; }

  /* YouTube / Vimeo poster + play button */
  .hl-vtest__play-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .hl-vtest__play-overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hl-vtest__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--play-bg, rgba(0,0,0,0.55));
    color: var(--play-color, #fff);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 250ms ease, background 250ms ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .hl-vtest__play .ti { font-size: 26px; margin-left: 3px; }
  .hl-vtest__play-overlay:hover .hl-vtest__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,0,0,0.75); }

  /* Star rating overlay (on top of video poster) */
  .hl-vtest__rating {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 10px;
    background: var(--rating-bg, rgba(0,0,0,0.55));
    color: var(--star-color, #000000);
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .hl-vtest__verified {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.92);
    color: #0F0F0F;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hl-vtest__verified .ti { font-size: 14px; color: var(--accent, #000000); }

  .hl-vtest__body {
    padding: 16px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hl-vtest__quote {
    font-family: var(--font-display--family, 'Syne', sans-serif);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .hl-vtest__meta {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hl-vtest__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .hl-vtest__name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .hl-vtest__location { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; }
  .hl-vtest__product {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid rgba(127,127,127,0.18);
    text-decoration: none;
    color: inherit;
    transition: background 200ms ease, border-color 200ms ease;
  }
  .hl-vtest__product:hover { background: var(--surface); border-color: var(--ink); }
  .hl-vtest__product img { width: 32px; height: 40px; object-fit: cover; }
  .hl-vtest__product-title { flex: 1; font-size: 12px; line-height: 1.3; }
  .hl-vtest__product .ti { font-size: 14px; color: var(--ink-muted); }

  /* Arrows + nav */
  .hl-vtest__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    color: var(--ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .hl-vtest__arrow:hover { transform: translateY(-50%) scale(1.06); }
  .hl-vtest__arrow--prev { left: 8px; }
  .hl-vtest__arrow--next { right: 8px; }
  .hl-vtest__arrow .ti { font-size: 18px; }
  .hl-vtest__arrow[disabled] { opacity: 0.35; cursor: not-allowed; }

  /* Arrow visibility modes (merchant-controlled).
     Always: arrows visible at all times.
     Hover : arrows hidden by default; fade in when cursor enters the carousel.
     Uses opacity + pointer-events so arrows stay non-clickable when hidden
     but the cursor still triggers the hover state via the wrap. */
  .hl-vtest--arrows-always .hl-vtest__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hl-vtest--arrows-hover .hl-vtest__arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease !important;
  }
  .hl-vtest--arrows-hover .hl-vtest__wrap:hover .hl-vtest__arrow,
  .hl-vtest--arrows-hover .hl-vtest__wrap:focus-within .hl-vtest__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Touch devices: keep hidden so finger swipe isn't obscured by arrows */
  @media (hover: none) {
    .hl-vtest--arrows-hover .hl-vtest__arrow {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }

  .hl-vtest__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
  }
  .hl-vtest__dots { display: inline-flex; gap: 10px; }
  .hl-vtest__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(127,127,127,0.32);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .hl-vtest__dot.is-active { background: var(--ink); transform: scale(1.2); }
  .hl-vtest__counter {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-vtest__slide {
      flex: 0 0 calc((100% - (var(--slides-t) - 1) * var(--gap)) / var(--slides-t));
    }
  }
  @media (max-width: 767px) {
    .hl-vtest {
      padding-top:    var(--pt-m, 48px) !important;
      padding-bottom: var(--pb-m, 48px) !important;
      padding-left:   var(--px-m, 20px) !important;
      padding-right:  var(--px-m, 20px) !important;
    }
    .hl-vtest__heading { font-size: var(--heading-fs-m, 28px); }
    .hl-vtest__track { gap: var(--gap-m, 14px); }
    .hl-vtest__slide { flex: 0 0 calc((100% - (var(--slides-m) - 1) * var(--gap-m)) / var(--slides-m)); }
    .hl-vtest__head { flex-direction: column; align-items: flex-start; }
    .hl-vtest--align-center .hl-vtest__head { align-items: center; }
  }
  /* hemline-mobile-arrows-fix — compact + properly positioned arrows on phones.
     Overrides the global 44px min-height button rule so they stay round.
     Touch-friendly 32x32 with shadow. */
  @media (max-width: 767px) {
    .hl-vtest__arrow {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      flex: 0 0 32px !important;
      align-self: center !important;
      border-radius: 50% !important;
      padding: 0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }
    .hl-vtest__arrow--prev { left: 6px !important; }
    .hl-vtest__arrow--next { right: 6px !important; }
  }
/* END_SECTION:video-testimonials */

/* START_SECTION:video-with-text (INDEX:89) */
.hl-vwt { background: var(--bg); color: var(--ink); }

  .hl-vwt__grid { display: grid; min-height: var(--min-h, 0); }
  .hl-vwt--layout-split .hl-vwt__grid {
    grid-template-columns: var(--video-pct, 55%) var(--copy-pct, 45%);
    align-items: stretch;
  }
  .hl-vwt--layout-split.hl-vwt--video-left .hl-vwt__grid { grid-template-columns: var(--copy-pct, 45%) var(--video-pct, 55%); }
  .hl-vwt--layout-split.hl-vwt--video-left .hl-vwt__video { order: 0; }
  .hl-vwt--layout-split.hl-vwt--video-left .hl-vwt__copy  { order: -1; }

  .hl-vwt--layout-stacked .hl-vwt__grid { grid-template-columns: 1fr; }
  .hl-vwt--layout-stacked.hl-vwt--video-left .hl-vwt__copy  { order: 1; }
  .hl-vwt--layout-stacked.hl-vwt--video-left .hl-vwt__video { order: 0; }

  .hl-vwt--layout-overlay .hl-vwt__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .hl-vwt--layout-overlay .hl-vwt__grid > * { grid-column: 1; grid-row: 1; }
  .hl-vwt--layout-overlay .hl-vwt__copy {
    z-index: 2;
    color: var(--ui-light, #fff) !important;
    background: transparent !important;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .hl-vwt--layout-overlay .hl-vwt__copy-inner { max-width: 720px; margin: 0 auto; }
  .hl-vwt--layout-overlay .hl-vwt__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg, #000);
    opacity: var(--overlay-op, 0.3);
    pointer-events: none;
    z-index: 1;
  }
  .hl-vwt--layout-overlay .hl-vwt__video { position: relative; }

  .hl-vwt__video {
    position: relative;
    background: var(--ui-dark, #000);
    overflow: hidden;
    min-width: 0;
  }
  .hl-vwt__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  iframe.hl-vwt__media { position: absolute; inset: 0; }
  .hl-vwt__placeholder { width: 100%; height: 100%; }
  .hl-vwt__placeholder svg { width: 100%; height: 100%; display: block; }

  .hl-vwt__copy {
    background: var(--bg);
    color: var(--ink);
    padding: var(--copy-py, 64px) var(--copy-px, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .hl-vwt--align-center .hl-vwt__copy { text-align: center; align-items: center; }
  .hl-vwt--align-right  .hl-vwt__copy { text-align: right; align-items: flex-end; }
  .hl-vwt__eyebrow { margin-bottom: 16px; }
  .hl-vwt__heading { line-height: 1.05; margin: 0 0 18px; }
  .hl-vwt__body    { line-height: 1.7; opacity: 0.9; margin: 0 0 24px; }
  .hl-vwt__body p:last-child { margin-bottom: 0; }
  .hl-vwt__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    text-decoration: none;
    cursor: pointer;
  }
  .hl-vwt--align-center .hl-vwt__cta { align-self: center; }
  .hl-vwt--align-right  .hl-vwt__cta { align-self: flex-end; }

  .hl-vwt__cta--link  { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
  .hl-vwt__cta--arrow { font-size: 13px; font-weight: 600; color: inherit; }
  .hl-vwt__cta--arrow .ti { transition: transform 200ms ease; }
  .hl-vwt__cta--arrow:hover .ti { transform: translateX(4px); }

  /* Buttons (solid + ghost) — color/shape configurable */
  .hl-vwt__cta--btn {
    padding: var(--btn-py, 14px) var(--btn-px, 28px);
    font-size: var(--btn-fs, 12px);
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-track, 0.16em);
    text-transform: uppercase;
    border-radius: var(--btn-radius, 0);
    border: var(--btn-border-w, 1px) solid transparent;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
    line-height: 1;
    white-space: nowrap;
  }
  .hl-vwt--btn-shape-rounded .hl-vwt__cta--btn { border-radius: 8px; }
  .hl-vwt--btn-shape-pill    .hl-vwt__cta--btn { border-radius: 999px; }
  .hl-vwt__cta--solid {
    background: var(--btn-bg, var(--ink));
    color: var(--btn-fg, var(--bg));
    border-color: var(--btn-border, transparent);
  }
  .hl-vwt__cta--solid:hover {
    background: var(--btn-bg-hover, var(--accent, #000000));
    color: var(--btn-fg-hover, #fff);
    border-color: var(--btn-border-hover, transparent);
  }
  .hl-vwt__cta--ghost {
    background: var(--btn-bg, transparent);
    color: var(--btn-fg, currentColor);
    border-color: var(--btn-border, currentColor);
  }
  .hl-vwt__cta--ghost:hover {
    background: var(--btn-bg-hover, currentColor);
    color: var(--btn-fg-hover, var(--bg));
    border-color: var(--btn-border-hover, currentColor);
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .hl-vwt--layout-split .hl-vwt__grid { grid-template-columns: 1fr 1fr; }
    .hl-vwt__copy { padding: 32px 28px !important; }
    .hl-vwt__heading { font-size: clamp(24px, 4vw, 36px) !important; }
  }
  @media (max-width: 767px) {
    .hl-vwt--layout-split .hl-vwt__grid { grid-template-columns: 1fr; }
    .hl-vwt--layout-split.hl-vwt--video-left .hl-vwt__copy { order: 1; }
    .hl-vwt--layout-split.hl-vwt--video-left .hl-vwt__video { order: 0; }
  }
  @media (max-width: 767px) {
    .hl-vwt {
      padding-top: var(--pt-m, 36px);
      padding-bottom: var(--pb-m, 36px);
    }
    .hl-vwt__copy {
      padding: var(--copy-py-m, 32px) var(--copy-px-m, 20px);
    }
    .hl-vwt__heading { font-size: var(--quote-size-m, 28px) !important; }
  }
/* END_SECTION:video-with-text */

/* START_SECTION:wishlist-page (INDEX:90) */
.hl-wishlist { background: var(--bg); color: var(--ink); }
  .hl-wishlist__head { margin-bottom: 48px; }
  .hl-wishlist__heading { word-break: break-word; }
  .hl-wishlist__body {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 16px auto 0;
    max-width: 540px;
    line-height: 1.7;
    text-align: inherit;
  }
  .hl-wishlist__count {
    margin-top: 16px;
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* Grid */
  .hl-wishlist__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-m, 2), 1fr);
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .hl-wishlist__grid { grid-template-columns: repeat(var(--cols-t, 3), 1fr); }
  }
  @media (min-width: 1024px) {
    .hl-wishlist__grid { grid-template-columns: repeat(var(--cols, 4), 1fr); }
  }

  /* Item card (rendered by JS) */
  .hl-wishlist__item {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .hl-wishlist__item-img {
    aspect-ratio: 4/5;
    background: var(--ph-bg);
    overflow: hidden;
    position: relative;
  }
  .hl-wishlist__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hl-wishlist__item-meta {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .hl-wishlist__item-title { font-size: 14px; font-weight: 500; }
  .hl-wishlist__item-price { font-size: 13px; font-weight: 500; white-space: nowrap; }
  .hl-wishlist__item-link { text-decoration: none; color: inherit; }

  .hl-wishlist__remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(15, 15, 15, 0.12);
    opacity: 0;
    transition: opacity 200ms ease, background 200ms ease;
  }
  .hl-wishlist__item:hover .hl-wishlist__remove { opacity: 1; }
  .hl-wishlist__remove:hover { background: var(--accent); color: var(--bg); }

  /* Empty state */
  .hl-wishlist__empty { text-align: center; padding: 60px 20px; }

  /* Loading */
  .hl-wishlist__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--ink-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hl-wishlist__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-2);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: hlSpin 800ms linear infinite;
  }
  @keyframes hlSpin { to { transform: rotate(360deg); } }

  @media (max-width: 767px) {
    .hl-wishlist__head { margin-bottom: 32px; }
    .hl-wishlist__heading { font-size: 36px !important; }
  }
/* END_SECTION:wishlist-page */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:91) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:92) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:quick-add-modal (INDEX:99) */
.hl-quick-add {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease, visibility 250ms ease;
  }
  .hl-quick-add.is-open { visibility: visible; opacity: 1; }
  .hl-quick-add__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.55);
  }
  .hl-quick-add__panel {
    position: relative;
    background: var(--bg, #FFFFFF);
    color: var(--ink, #0f0f0f);
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(12px);
    transition: transform 250ms ease;
  }
  .hl-quick-add.is-open .hl-quick-add__panel { transform: translateY(0); }
  .hl-quick-add__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .hl-quick-add__close:hover { opacity: 0.7; }
  .hl-quick-add__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: 360px; align-items: stretch; }
  .hl-quick-add__loading { padding: 60px; font-size: 13px; opacity: 0.6; grid-column: 1 / -1; text-align: center; }
  .hl-quick-add__media {
    background: var(--ph-bg, #F0F0F0);
    aspect-ratio: 4/5;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    min-width: 0;
    position: relative;
  }
  .hl-quick-add__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .hl-quick-add__info { padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-y: auto; max-height: calc(100vh - 48px); }
  .hl-quick-add__title { font-family: var(--font-display--family, 'Syne', sans-serif); font-weight: 700; letter-spacing: -0.02em; font-size: 28px; line-height: 1.05; margin: 0; }
  .hl-quick-add__price { font-size: 18px; font-weight: 500; }
  .hl-quick-add__price .compare { text-decoration: line-through; color: var(--ink-muted); margin-right: 8px; font-weight: 400; }
  .hl-quick-add__price .sale { color: var(--accent); }
  .hl-quick-add__option { display: flex; flex-direction: column; gap: 8px; }
  .hl-quick-add__option-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
  .hl-quick-add__option-values { display: flex; flex-wrap: wrap; gap: 6px; }
  .hl-quick-add__option-values button {
    padding: 8px 14px;
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: all 200ms ease;
  }
  .hl-quick-add__option-values button:hover { border-color: var(--ink); }
  .hl-quick-add__option-values button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .hl-quick-add__option-values button[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
  .hl-quick-add__qty-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
  }
  .hl-quick-add__qty-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .hl-quick-add__qty input[data-quick-add-qty] {
    width: 40px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    -moz-appearance: textfield;
  }
  .hl-quick-add__qty input[data-quick-add-qty]::-webkit-outer-spin-button,
  .hl-quick-add__qty input[data-quick-add-qty]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .hl-quick-add__cta { margin-top: 8px; }
  .hl-quick-add__cta button {
    width: 100%;
    padding: 16px 20px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: opacity 200ms ease;
  }
  .hl-quick-add__cta button:disabled { opacity: 0.4; cursor: not-allowed; }
  .hl-quick-add__viewlink {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: center;
    text-decoration: none;
    margin-top: 6px;
    display: block;
  }
  .hl-quick-add__viewlink:hover { color: var(--ink); }
  .hl-quick-add__error {
    color: var(--accent);
    font-size: 12px;
    line-height: 1.5;
  }
  /* Tablet — keep two columns but allow the panel to use more width */
  @media (max-width: 1023px) {
    .hl-quick-add__panel { width: min(720px, calc(100vw - 24px)); }
  }
  /* Mobile — single column, image keeps a product-friendly ratio,
     content scrolls inside the panel rather than the image dominating. */
  @media (max-width: 767px) {
    .hl-quick-add__panel {
      width: 100vw;
      max-height: 92vh;
      max-width: 100vw;
    }
    .hl-quick-add__body {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .hl-quick-add__media {
      aspect-ratio: 4/5;
      max-height: 48vh;
      width: 100%;
    }
    .hl-quick-add__info {
      padding: 20px 18px 24px;
      max-height: none;
      overflow: visible;
    }
    .hl-quick-add__title { font-size: 22px; }
    .hl-quick-add__close { top: 8px; right: 8px; background: rgba(255,255,255,0.85); border-radius: 50%; }
  }
  /* Very small screens — keep the image tappable but not towering */
  @media (max-width: 400px) {
    .hl-quick-add__media { max-height: 42vh; }
  }
/* END_SNIPPET:quick-add-modal */