/** Shopify CDN: Minification failed

Line 6:2 Unexpected "="

**/
* ============================================================
   HC HOMEPAGE CSS
   Hair Choice Extensions — Homepage Section Styles
   ============================================================

 
   0.  Design tokens (unified)
   1.  Global layout — full bleed
   2.  Section spacing
   3.  Partner bar spacing
   4.  Collection tiles — layout
   5.  Collection tiles — glass label effect
   6.  Collection tiles — micro animations
   7.  Hero button — micro animation
   8.  Section fade-in on scroll
   9.  Best Sellers — Product card overrides
   10. Reviews — Judge.me overrides
   11. HC Video Gallery (Shop the Look)
   12. HC Transformation Grid (See the Difference)
   13. HC As Seen In (Logo bar)
   14. HC Partner Bar
   15. HC Colour Match
   16. HC Professional Banner
   17. HC As Worn By (Celebrity Carousel)

   v2.1 CHANGES
   — § 2:  Section spacing block removed — hc-global.css now owns
           .index-section margins (72px/48px). Keeping this block
           caused it to win the cascade and undo the global fix.
   — § 9:  .section-header__title letter-spacing: 0 removed;
           inherits 0.04em from hc-global.css h2 rule.
           Font-size explicit values updated to match new h2 scale.
   — § 9:  .grid-product__meta top padding 10px → 16px.
   — § 9:  .grid-product__image-mask border colour
           #D9D9D6 → rgba(0,0,0,0.08) for softer, more premium edge.
   — § 4:  .hc-coll-carousel__title letter-spacing: 0 !important
           removed; inherits 0.04em from global h2.

   ============================================================ */


/* ============================================================
   0. DESIGN TOKENS (UNIFIED)
   Single source of truth for all custom section styles.
   Header tokens live in hc-header.css separately.
   ============================================================ */

:root {
  /* ── Core palette ── */
  --hc-white:          #FFFFFF;
  --hc-charcoal:       #070707;
  --hc-charcoal-light: #1a1a1a;

  /* ── Text hierarchy ── */
  --hc-text:           #070707;
  --hc-text-muted:     #5C5955;
  --hc-text-light:     #8A8580;
  --hc-text-faint:     #D9D9D6;

  /* ── Greys (kept for existing selectors) ── */
  --hc-grey-100:       #F7F5F5;
  --hc-grey-200:       #D9D9D6;
  --hc-grey-400:       #D9D9D6;
  --hc-grey-700:       #5C5955;
  --hc-grey-900:       #070707;

  /* ── Pink spectrum ── */
  --hc-pink:           #FABBCB;
  --hc-pink-light:     #FFF0F5;
  --hc-pink-dark:      #FBA2D0;
  --hc-pink-cta:       #FABBCB;
  --hc-pink-cta-hover: #FBA2D0;
  --hc-pink-bg:        #FDF5F3;
  --hc-pink-bg-mid:    #F8EDE9;
  --hc-pink-bg-deep:   #F3E8E4;
  --hc-pink-accent:    #FFF0F5;

  /* ── Borders & surfaces ── */
  --hc-border:         #D9D9D6;
  --hc-border-light:   #D9D9D6;
  --hc-surface:        #F7F5F5;
  --hc-card-bg:        #F7F5F5;

  /* ── Typography ── */
  --hc-font-body:      'Proxima Nova', sans-serif;
  --hc-font-heading:   'Proxima Nova', sans-serif;

  /* ── Radii ── */
  --hc-radius:         6px;
  --hc-radius-lg:      10px;
  --hc-radius-round:   100px;

  /* ── Transitions ── */
  --hc-transition:     200ms ease;
}


/* ============================================================
   1. GLOBAL LAYOUT — FULL BLEED
   ============================================================ */

.page-width {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 767px) {
  .page-width {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 1600px) {
  .page-width {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}


/* ============================================================
   2. SECTION SPACING
   v2.1: Block removed — hc-global.css now owns .index-section
   margins (72px desktop / 48px mobile). This file previously
   overrode that with lower values (56px max) due to load order.
   ============================================================ */


/* ============================================================
   3. PARTNER BAR SPACING
   ============================================================ */

.hc-partner-bar + .index-section {
  margin-top: 0 !important;
}

.jdgm-cards-carousel {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.hc-as-seen-in {
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  [data-context="featured-collection"] .grid-overflow-wrapper {
    margin-right: -20px;
    padding-right: 0 !important;
  }
  .hc-video-gallery__track {
    /* v2.4: padding-left via variable — replaces hardcoded 20px !important */
    padding-left: var(--page-width-padding-mobile, 20px) !important;
    padding-right: 0 !important;
  }
  .hc-tgrid {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  
  .hc-tgrid__cards {
    padding-left: 20px;
    padding-right: 0 !important;
  }
  .hc-celeb__track {
    padding-right: 0 !important;
  }
  .hc-video-gallery__track-wrap::after,
  .hc-tgrid__cards-wrap::after {
    display: none;
  }
}


/* ============================================================
   4. COLLECTION TILES — LAYOUT
   ============================================================ */

.collection-image--square {
  aspect-ratio: 1 / 1 !important;
  padding-bottom: 0 !important;
  border-radius: 6px;
  overflow: hidden;
}

.collection-item {
  border-radius: 6px;
  overflow: hidden;
}


/* ============================================================
   5. COLLECTION TILES — GLASS LABEL
   ============================================================ */

.collection-item__title--overlaid-box span {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background 250ms ease !important;
  display: inline-block;
}

.collection-item__title--overlaid-box {
  background: radial-gradient(
    ellipse at center center,
    rgba(0, 0, 0, 0.18) 0%,
    transparent 40%
  ) !important;
}

.collection-item:hover .collection-item__title--overlaid-box span {
  background: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}


/* ============================================================
   6. COLLECTION TILES — MICRO ANIMATIONS
   ============================================================ */

.collection-item {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.collection-item .collection-image {
  overflow: hidden;
}

.collection-item .image-element {
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
}

.collection-item:hover .image-element {
  transform: scale(1.04) !important;
}

.collection-item:hover .collection-item__title--overlaid-box {
  transform: translateY(-2px);
  transition: transform 250ms ease;
}

.collection-item__title--overlaid-box {
  transition: transform 250ms ease;
}


/* ============================================================
   7. HERO BUTTON — MICRO ANIMATION
   ============================================================ */

.slideshow__btn,
.btn--slideshow,
.slideshow .btn {
  transition: transform 250ms ease, box-shadow 250ms ease !important;
}

.slideshow__btn:hover,
.btn--slideshow:hover,
.slideshow .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}


/* ============================================================
   8. SECTION FADE-IN ON SCROLL
   ============================================================ */

.hc-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.hc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hc-reveal-child {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.hc-reveal.is-visible .hc-reveal-child {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hc-reveal,
  .hc-reveal-child {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.collection-item[data-aos],
.collection-item .image-element[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ============================================================
   9. BEST SELLERS / NEW IN — Product Card Overrides
   Aligns homepage featured-collection sections to match
   the collection page card treatment from hc-collection.css
   ============================================================ */

[data-context="featured-collection"] .section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: none;
  margin-bottom: 8px;
}

[data-context="featured-collection"] .section-header__title {
  font-family: 'Proxima Nova', sans-serif;
  /* v2.1: font-size removed — inherits from hc-global.css h2
     clamp(26px, 3.5vw, 32px) with letter-spacing: 0.04em.
     Previous explicit values (22px/26px) were below the new floor. */
  font-weight: 400;
  color: #070707;
  text-transform: none;
  /* v2.1: letter-spacing: 0 removed — now inherits 0.04em from global h2 */
  margin: 0;
}

[data-context="featured-collection"] .section-header__link {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 13px !important;         /* v2.3: 12px → 13px, more legible */
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: #070707 !important;          /* v2.3: #5C5955 → #070707, clearly visible */
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(0,0,0,0.25) !important;  /* v2.3: softer underline */
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: unset !important;
  box-shadow: none !important;
  display: inline !important;
  text-transform: none !important;
}

[data-context="featured-collection"] .section-header__link:hover {
  color: #FABBCB !important;          /* v2.3: !important — beats the colour rule above */
  text-decoration-color: #FABBCB !important;
}

/* ── Grid layout ── */
[data-context="featured-collection"] .grid--uniform {
  margin-left: -16px !important;
}

[data-context="featured-collection"] .grid--uniform > .grid__item,
[data-context="featured-collection"] .grid--uniform > .grid-product {
  padding-left: 16px !important;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  [data-context="featured-collection"] .grid--uniform {
    margin-left: -24px !important;
  }
  [data-context="featured-collection"] .grid--uniform > .grid__item,
  [data-context="featured-collection"] .grid--uniform > .grid-product {
    padding-left: 24px !important;
  }
}

/* ── Card container — match collection page exactly ── */
[data-context="featured-collection"] .grid-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F7F5F5;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  position: relative;
}

/* Remove the ::after border — use image-mask border instead (matches collection page) */
[data-context="featured-collection"] .grid-product::after {
  display: none !important;
}

[data-context="featured-collection"] .grid-product__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* ── Image mask ── */
/* v2.1: border colour #D9D9D6 → rgba(0,0,0,0.08) — softer, more premium */
[data-context="featured-collection"] .grid-product__image-mask {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  padding-bottom: 0 !important;
}

[data-context="featured-collection"] .grid-product__image-mask .image-wrap,
[data-context="featured-collection"] .grid-product__image-mask .grid__image-ratio {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  width: 100% !important;
}

[data-context="featured-collection"] .grid-product__image-mask img,
[data-context="featured-collection"] .grid-product__image-mask .image-element {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transition: transform 300ms ease;
}

@media (hover: hover) {
  [data-context="featured-collection"] .grid-product:hover .grid-product__image-mask img {
    transform: scale(1.03);
  }
}

/* ── Meta area ── */
[data-context="featured-collection"] .grid-product__link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* v2.1: top padding 10px → 16px — more breathing room below image */
[data-context="featured-collection"] .grid-product__meta {
  padding: 16px 12px 8px;
  background: #F7F5F5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  margin: 0;
}

[data-context="featured-collection"] .grid-product__title {
  font-family: var(--hc-font-heading, 'Proxima Nova', sans-serif);
  font-size: 15px;
  line-height: 1.3;
  color: #070707;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 1px 0;
  min-height: calc(15px * 1.3 * 2);
}

[data-context="featured-collection"] .grid-product__price {
  font-family: var(--hc-font-body, 'Proxima Nova', sans-serif);
  font-size: 13px;
  font-weight: 400;
  color: #070707;
  margin-top: 2px;
  margin-bottom: 0;
}

[data-context="featured-collection"] .grid-product__price--original,
[data-context="featured-collection"] .grid-product__price s,
[data-context="featured-collection"] .grid-product__price del {
  color: #D9D9D6 !important;
  text-decoration: line-through;
  font-weight: 400;
  font-size: 12px;
  margin-right: 3px;
}

/* ── Suppress old swatch/button elements ── */
[data-context="featured-collection"] .grid-product__colors,
[data-context="featured-collection"] .grid-product__colors--placeholder {
  display: none !important;
}

[data-context="featured-collection"] .quick-product__btn,
[data-context="featured-collection"] .grid-product__quick-shop-btn {
  display: none !important;
}

[data-context="featured-collection"] a.shop-now-btn {
  display: none !important;
}

/* ── Sale tag ── */
[data-context="featured-collection"] .grid-product__tag--sale {
  display: none !important;
}

[data-context="featured-collection"] .grid-product__tag {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  z-index: 2;
}

/* ── Scrollbar suppression ── */
[data-context="featured-collection"] .grid-overflow-wrapper::-webkit-scrollbar {
  display: none;
}

[data-context="featured-collection"] .grid-overflow-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[data-context="featured-collection"] .scroll-indicator,
[data-context="featured-collection"] ~ .scroll-indicator,
[data-context="featured-collection"] .flickity-page-dots {
  display: none !important;
}

@media (max-width: 767px) {
  [data-context="featured-collection"] .grid-overflow-wrapper .grid-product {
    min-width: 200px;
  }
  /* v2.1: top padding maintained at 16px on mobile — same as desktop */
  [data-context="featured-collection"] .grid-product__meta {
    padding: 16px 12px 8px;
  }
  [data-context="featured-collection"] .grid-product__title {
    font-size: 14px;
    min-height: calc(14px * 1.3 * 2);
  }
}

/* ── Force ::after off at all breakpoints ── */
[data-context="featured-collection"] .grid-product::after,
[data-context="featured-collection"] .grid--uniform > .grid-product::after {
  display: none !important;
  content: none !important;
}

/* ── Prevent button label wrapping on narrow cards ── */
[data-context="featured-collection"] .hc-quick-add__btn {
  flex-wrap: nowrap;
}

[data-context="featured-collection"] .hc-quick-add__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[data-context="featured-collection"] .hc-quick-add__price {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Grid layout — CSS Grid to match collection page ── */
[data-context="featured-collection"] .grid--uniform {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  float: none;
  margin-left: 0 !important;
}

[data-context="featured-collection"] .grid--uniform > .grid__item,
[data-context="featured-collection"] .grid--uniform > .grid-product {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0;
  float: none !important;
  max-width: none !important;
}

@media (max-width: 1024px) {
  [data-context="featured-collection"] .grid--uniform {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  [data-context="featured-collection"] .grid--uniform {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-left: 0 !important;
  }

  [data-context="featured-collection"] .grid--uniform > .grid__item,
  [data-context="featured-collection"] .grid--uniform > .grid-product {
    flex: 0 0 72vw;
    max-width: 72vw !important;
    scroll-snap-align: start;
  }
}


/* ============================================================
   10. REVIEWS — Judge.me Cards Carousel
   ============================================================ */

.jdgm-cards-carousel {
  background: #FFF0F5 !important;
  padding: 48px 40px !important;
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.jdgm-cards-carousel .jdgm-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.jdgm-cards-carousel .jdgm-cards-wrapper {
  max-width: 100% !important;
  width: 100% !important;
}

.jdgm-cards-carousel .jdgm-videos-container {
  gap: 16px !important;
}

@media (max-width: 767px) {
  .jdgm-cards-carousel {
    padding: 32px 20px !important;
  }
}

.jdgm-cards-carousel .jdgm-title {
  font-family: 'Proxima Nova', sans-serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  letter-spacing: 0.01em !important;
  color: #070707 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .jdgm-cards-carousel .jdgm-title {
    font-size: 22px !important;
  }
}

.jdgm-cards-carousel .jdgm-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;  /* v2.1: was #D9D9D6 */
  border-radius: 8px !important;
  padding: 20px 24px !important;
  transition: border-color 250ms ease;
  min-width: 200px !important;
}

.jdgm-cards-carousel .jdgm-card:hover {
  border-color: #FABBCB !important;
}

.jdgm-cards-carousel .jdgm-text,
.jdgm-cards-carousel .jdgm-text p {
  font-family: 'Proxima Nova', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #4A4845 !important;
}

.jdgm-cards-carousel .jdgm-star {
  color: #FABBCB !important;
  font-size: 16px !important;
}

.jdgm-cards-carousel .jdgm-reviewer-name {
  font-family: 'Proxima Nova', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #070707 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.jdgm-cards-carousel .jdgm-reviewer-verified-icon {
  color: #FABBCB !important;
}

.jdgm-cards-carousel .jdgm-product-name,
.jdgm-cards-carousel .jdgm-product-name a {
  font-family: 'Proxima Nova', sans-serif !important;
  font-size: 11px !important;
  color: #9A9895 !important;
  text-decoration: none !important;
}

.jdgm-cards-carousel .jdgm-arrow {
  color: #070707 !important;
  opacity: 0.4 !important;
  transition: opacity 250ms ease !important;
}

.jdgm-cards-carousel .jdgm-arrow:hover {
  opacity: 1 !important;
}

.jdgm-cards-carousel .jdgm-header {
  margin-bottom: 24px !important;
}


/* ============================================================
   11. HC VIDEO GALLERY (Shop the Look)
   ============================================================ */

.hc-video-gallery__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  /* Adding the padding directly back here fixes the mobile edge issue! */
  padding-left: 40px;
  padding-right: 40px;
}

/* Mobile padding for the header */
@media (max-width: 767px) {
  .hc-video-gallery__header {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.hc-video-gallery__title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: clamp(26px, 3.5vw, 32px); /* v2.2: was 20px — now matches section header scale */
  font-weight: 400;
  color: #070707;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.hc-video-gallery__header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hc-video-gallery__view-all {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FABBCB;
  text-decoration: none;
  transition: opacity 200ms ease;
  white-space: nowrap;
}

.hc-video-gallery__view-all:hover {
  opacity: 0.7;
}

.hc-video-gallery__nav {
  display: none;
}

.hc-video-gallery__track-wrap {
  position: relative;
}

.hc-video-gallery__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-left: var(--page-width-padding, 40px); /* v2.4: CSS variable — matches .page-width gutter */
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hc-video-gallery__track::-webkit-scrollbar {
  display: none;
}

.hc-video-gallery__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, #FFFFFF);
  pointer-events: none;
  z-index: 3;
}

.hc-video-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  border: 3px solid #FFF0F5;
  transition: border-color 200ms ease;
}

.hc-video-card:hover {
  border-color: #FABBCB;
}

.hc-video-card:last-child {
  margin-right: 4px;
}

.hc-video-card__media {
  position: relative;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(160deg, #FFF0F5 0%, #F7F5F5 50%, #FFF0F5 100%);
}

.hc-video-card__media img,
.hc-video-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hc-video-card__media img {
  transition: transform 400ms ease;
}

.hc-video-card:hover .hc-video-card__media img {
  transform: scale(1.04);
}

.hc-video-card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
}

.hc-video-card.is-playing .hc-video-card__video {
  display: block;
}

.hc-video-card.is-playing .hc-video-card__thumb {
  display: none;
}

.hc-video-card.is-playing .hc-video-card__play {
  display: none;
}

.hc-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms ease, box-shadow 300ms ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 4;
  cursor: pointer;
  border: none;
  padding: 0;
}

.hc-video-card__play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent #070707;
  margin-left: 2px;
}

.hc-video-card__play:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}

.hc-video-card__play[disabled] {
  opacity: 0.45;
  cursor: default;
}

.hc-video-card__play[disabled]:hover {
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hc-video-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 12px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  z-index: 5;
  text-decoration: none;
  display: block;
  color: #fff;
  transition: background 200ms ease;
}

.hc-video-card__overlay:hover {
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.hc-video-card__product-name {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.3;
}

.hc-video-card__label {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.hc-video-card__shop-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
}

.hc-video-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
}

.hc-video-card__placeholder-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px dashed #D9D9D6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-video-card__placeholder-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #D9D9D6;
  margin-left: 2px;
}

.hc-video-card__placeholder-text {
  font-family: var(--typeBasePrimary, 'Fahkwang'), sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D9D9D6;
}

@media (min-width: 768px) {
  .hc-video-gallery__header {
    margin-bottom: 20px;
    /* v2.4: padding removed — owned by .page-width wrapper in liquid */
  }
  /* v2.2: font-size removed — clamp handles scaling, no override needed */
  .hc-video-gallery__track {
    gap: 16px;
    padding-left: var(--page-width-padding, 40px); /* v2.4: variable — consistent with header */
  }
  .hc-video-card {
    flex: 0 0 max(240px, 18vw); /* v2.5: FLUID SCALING ADDED HERE */
  }
  .hc-video-gallery__track-wrap::after {
    width: 60px;
  }
  .hc-video-gallery__nav {
    display: flex;
    gap: 8px;
  }
  .hc-video-gallery__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);  /* v2.1: was #D9D9D6 */
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 200ms ease, background 200ms ease;
    color: #5C5955;
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }
  .hc-video-gallery__arrow:hover {
    border-color: #FABBCB;
    background: #FFF0F5;
  }
  .hc-video-card__play {
    width: 52px;
    height: 52px;
  }
  .hc-video-card__play::after {
    border-width: 7px 0 7px 12px;
    margin-left: 3px;
  }
  .hc-video-card__product-name {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .hc-video-gallery__header { padding-left: var(--page-width-padding, 40px); }
  .hc-video-gallery__track { padding-left: var(--page-width-padding, 40px); }
  .hc-video-card { flex: 0 0 max(260px, 16vw); } /* v2.5: FLUID SCALING ADDED HERE */
  .hc-video-card__play { width: 56px; height: 56px; }
  .hc-video-card__play::after { border-width: 8px 0 8px 14px; }
}

.hc-video-card__play::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: hc-play-pulse 2s ease-out infinite;
}

@keyframes hc-play-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

.hc-video-card__play[disabled]::before,
.hc-video-card.is-playing .hc-video-card__play::before {
  display: none;
}

/* ============================================================
   12. HC TRANSFORMATION GRID
   ============================================================ */

.hc-tgrid {
  padding-top: 32px;
  padding-bottom: 32px;
  max-width: 100%;
  overflow: hidden;
  /* Horizontal padding removed so cards can bleed off the right edge */
}

@media (min-width: 768px) {
  .hc-tgrid { padding-top: 48px; padding-bottom: 48px; }
}

@media (min-width: 1200px) {
  .hc-tgrid { padding-top: 56px; padding-bottom: 56px; }
}

.hc-tgrid__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 20px;
}


.hc-tgrid__title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #070707 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.hc-tgrid__link {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5C5955;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #D9D9D6;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.hc-tgrid__link:hover {
  color: #FABBCB;
  text-decoration-color: #FABBCB;
}

.hc-tgrid__layout {
  display: grid;
  grid-template-columns: minmax(280px, 30vw) 1fr;
  gap: 12px;
  align-items: stretch;
}

.hc-compare {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  aspect-ratio: 3 / 4;
  background: #F7F5F5;
  touch-action: pan-y;
}

.hc-compare img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.hc-compare__img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hc-compare__after { z-index: 1; }

.hc-compare__before-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
}

.hc-compare__before-wrap .hc-compare__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hc-compare__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDECEA;
}

.hc-compare__placeholder svg {
  width: 40%;
  height: auto;
  opacity: 0.3;
}

.hc-compare__handle {
  position: absolute;
  top: 0; left: 50%;
  width: 3px; height: 100%;
  background: #FFFFFF;
  z-index: 4;
  transform: translateX(-50%);
  pointer-events: none;
}

.hc-compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(0, 0, 0, 0.08);  /* v2.1: was #D9D9D6 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.hc-compare:hover .hc-compare__knob {
  border-color: #FABBCB;
  box-shadow: 0 2px 16px rgba(250,187,203,0.3);
}

.hc-compare__knob svg {
  width: 10px; height: 10px;
  fill: #5C5955;
}

.hc-compare:hover .hc-compare__knob svg {
  fill: #FABBCB;
}

.hc-compare__label {
  position: absolute;
  bottom: 16px;
  z-index: 6;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(7, 7, 7, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 100px;
  pointer-events: none;
}

.hc-compare__label--before { left: 12px; }
.hc-compare__label--after { right: 12px; }

.hc-tgrid__cards-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.hc-tgrid__cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 40px;
  height: 100%;
  align-items: stretch;
}

.hc-tgrid__cards::-webkit-scrollbar { display: none; }

.hc-tgrid__cards-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 100%;
  background: linear-gradient(to right, transparent, #FFFFFF);
  pointer-events: none;
  z-index: 5;
}

.hc-tgrid__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);  /* v2.1: was #D9D9D6 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: border-color 200ms ease, opacity 200ms ease;
  opacity: 0;
  padding: 0;
}

.hc-tgrid__cards-wrap:hover .hc-tgrid__nav { opacity: 1; }
.hc-tgrid__nav:hover { border-color: #FABBCB; }
.hc-tgrid__nav svg { width: 14px; height: 14px; fill: #070707; }
.hc-tgrid__nav--left { left: 8px; }
.hc-tgrid__nav--right { right: 8px; }

.hc-tcard {
  flex: 0 0 auto;
  width: 28vw;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.hc-tcard__img-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #F8F7F5;
}

.hc-tcard__img-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease;
}

.hc-tcard:hover .hc-tcard__img-wrap img {
  opacity: 0.95;
}

.hc-tcard__badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 240, 245, 0.92);
  color: #FBA2D0;
  border-radius: 6px;
  padding: 6px 12px;
  line-height: 1;
  z-index: 2;
}

.hc-tcard__meta {
  flex: 0 0 auto;
}

.hc-tcard__name {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #070707;
  line-height: 1.3;
}

.hc-tcard__variant {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  color: #9A9895;
  line-height: 1.2;
  margin-top: 2px;
}

.hc-tcard__swatches {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.hc-tcard__swatch {
  width: 16px; height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.hc-tcard__swatch-more {
  height: 16px;
  min-width: 22px;
  border-radius: 100px;
  background: #EDECEA;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #5C5955;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
}

.hc-tcard__cta-wrap {
  flex: 0 0 auto;
  margin-top: auto;
}

.hc-tcard__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: #FABBCB;
  border-radius: 6px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #070707;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 200ms ease;
  min-height: 48px;
}

.hc-tcard:hover .hc-tcard__cta {
  background: #FBA2D0;
}

@media (max-width: 767px) {
  .hc-tgrid { padding-left: 0; padding-right: 0; }
  .hc-tgrid__title { font-size: 22px; }
  .hc-tgrid__layout { grid-template-columns: 1fr; gap: 24px; }
  .hc-compare { aspect-ratio: 3 / 4; max-height: 85vh; border-radius: 0; width: 100%; }
  .hc-tgrid__cards-wrap { height: auto; }
  .hc-tgrid__cards { height: auto; padding-left: 20px !important; }
  .hc-tcard { width: 55vw; min-width: 200px; height: auto; }
  .hc-tcard__img-wrap { flex: none; aspect-ratio: 1 / 1; }
  .hc-tcard__name { font-size: 13px; }
  .hc-tcard__swatches { gap: 4px; }
  .hc-tcard__swatch { width: 14px; height: 14px; min-width: 14px; }
  .hc-tcard__cta { padding: 10px 12px; font-size: 11px; min-height: 40px; }
  .hc-tgrid__nav { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hc-tgrid__layout { grid-template-columns: 35vw 1fr; }
  .hc-tcard { width: 26vw; min-width: 240px; }
}

/* ── Compare column wrapper
   Wraps the circles + slider so they stack vertically.
   Update any existing hc-tgrid__layout grid rule that targeted .hc-compare
   directly as a grid child — it now targets .hc-tgrid__compare-col instead.
   ── */
 
.hc-tgrid__compare-col {
  display: flex;
  flex-direction: column;
}
 
 
/* ── Look selector circles ── */
 
.hc-tgrid__looks {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
 
.hc-tgrid__look-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
 
.hc-tgrid__look-btn:hover {
  transform: scale(1.12);
}
 
.hc-tgrid__look-btn--active {
  border-color: #1a1a1a;
  transform: scale(1.12);
}
 
 
/* ── Image swap fade transition ── */
 
.hc-compare--switching .hc-compare__img {
  opacity: 0;
  transition: opacity 0.18s ease;
}
 
.hc-compare__img {
  transition: opacity 0.18s ease;
}
 
 
/* ── Product label overlay (after side) ── */
 
.hc-compare__product-label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-body-family, sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 4px;
  max-width: 58%;
  text-align: right;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
 
.hc-compare__product-label--hidden {
  display: none;
}

/* ── § 12 ADDENDUM — v4: style pill selector + clickable product label ────
   Drop this entire block at the bottom of § 12 in hc-homepage.css.
   Replaces the old hc-tgrid__look-btn circle rules and the v2 single-rule
   hc-compare__product-label block.
   ─────────────────────────────────────────────────────────────────────── */


/* ── Style / collection pill selector ── */

.hc-tgrid__looks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.hc-tgrid__style-btn {
  font-family: var(--hc-font-body, 'Proxima Nova', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--hc-border, #D9D9D6);
  background: #FFFFFF;
  color: var(--hc-text-muted, #5C5955);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.hc-tgrid__style-btn:hover {
  border-color: var(--hc-charcoal, #070707);
  color: var(--hc-charcoal, #070707);
}

.hc-tgrid__style-btn--active {
  background: var(--hc-pink, #FABBCB);
  border-color: var(--hc-pink, #FABBCB);
  color: var(--hc-charcoal, #070707);
}

.hc-tgrid__style-btn--active:hover {
  background: var(--hc-pink-dark, #FBA2D0);
  border-color: var(--hc-pink-dark, #FBA2D0);
}

@media (max-width: 767px) {
  .hc-tgrid__header {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .hc-tgrid__looks {
    padding-left: 20px;
    margin-bottom: 10px;
  }
  .hc-tgrid__style-btn {
    font-size: 10px;
    padding: 5px 11px;
  }
}


/* ── Clickable product label overlay ── */

/* Base label — layout shared between link and non-link variants */
.hc-compare__product-label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--hc-font-body, 'Proxima Nova', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 4px;
  max-width: 58%;
  text-align: right;
  text-decoration: none;
  pointer-events: none;           /* non-link: no drag interference */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 200ms ease, box-shadow 200ms ease;
  cursor: default;
}

/* Arrow icon — hidden unless label is a link */
.hc-compare__product-label-arrow {
  display: none;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  opacity: 0.7;
}

/* Clickable variant */
.hc-compare__product-label--link {
  pointer-events: auto;
  cursor: pointer;
}

.hc-compare__product-label--link .hc-compare__product-label-arrow {
  display: block;
}

.hc-compare__product-label--link:hover {
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.hc-compare__product-label--link:hover .hc-compare__product-label-arrow {
  opacity: 1;
}

/* ============================================================
   13. HC AS SEEN IN
   ============================================================ */

.hc-as-seen-in {
  background: #f4f3f1;
  padding: 36px 0;
  overflow: hidden;
  text-align: center;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: 0;
  margin-bottom: 0;
}

.hc-as-seen-in__title {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #7A7775;
  margin: 0 0 28px 0;
  padding: 0;
}

.hc-as-seen-in__track {
  display: flex;
  width: max-content;
  animation: hc-logo-marquee 25s linear infinite;
}

.hc-as-seen-in__track:hover {
  animation-play-state: paused;
}

.hc-as-seen-in__set {
  display: flex;
  align-items: center;
  gap: 0;
}

.hc-as-seen-in__logo {
  flex-shrink: 0;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-as-seen-in__logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 300ms ease;
}

.hc-as-seen-in__logo img:hover { opacity: 1; }
.hc-as-seen-in__logo a { display: flex; align-items: center; }

@keyframes hc-logo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .hc-as-seen-in { padding: 28px 0; }
  .hc-as-seen-in__title { font-size: 17px; margin-bottom: 20px; }
  .hc-as-seen-in__logo { padding: 0 32px; }
  .hc-as-seen-in__logo img { height: 26px; }
}

/* ============================================================
   14. HC PARTNER BAR
   ============================================================ */

.hc-partner-bar + .index-section {
  margin-top: 0 !important;
}

/* ============================================================
   15. HC COLOUR MATCH
   ============================================================ */

.hc-cmatch {
  background: linear-gradient(135deg, #FDF5F3 0%, #F8EDE9 40%, #F3E8E4 100%);
  padding: 0;
  overflow: hidden;
}

.hc-cmatch__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 520px;
}

.hc-cmatch__media {
  position: relative;
  overflow: hidden;
}

.hc-cmatch__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hc-cmatch__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #F0DDE3 0%, #E8CCD5 50%, #D4A8B5 100%);
  min-height: 400px;
}

.hc-cmatch__placeholder svg {
  width: 80px; height: 80px;
  color: rgba(7,7,7,0.15);
}

.hc-cmatch__swatches {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex;
  gap: 0;
  border-radius: var(--hc-radius-round);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  height: 6px;
  opacity: 0.85;
}

.hc-cmatch__sw { flex: 1; display: block; }

.hc-cmatch__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 56px 56px 48px;
  gap: 0;
}

.hc-cmatch__eyebrow {
  display: inline-block;
  font-family: var(--hc-font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #FABBCB;
  margin-bottom: 16px;
}

.hc-cmatch h2.hc-cmatch__heading,
.hc-cmatch__heading {
  font-family: var(--hc-font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: #070707;
  margin: 0 0 16px;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
}

.hc-cmatch__sub {
  font-family: var(--hc-font-body);
  font-size: 14px; font-weight: 300;
  line-height: 1.7;
  color: #5A5652;
  margin: 0 0 28px;
  max-width: 420px;
}

.hc-cmatch__trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.hc-cmatch__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hc-font-body);
  font-size: 13px; font-weight: 400;
  color: #070707;
  letter-spacing: 0.02em;
}

.hc-cmatch__trust-icon {
  width: 18px; height: 18px;
  color: #FABBCB;
  flex-shrink: 0;
}

.hc-cmatch__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hc-cmatch__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--hc-radius);
  font-family: var(--hc-font-body);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
}

.hc-cmatch__btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

.hc-cmatch__btn--primary {
  background: #FABBCB;
  color: #070707;
  border: 1px solid #FABBCB;
}

.hc-cmatch__btn--primary:hover {
  background: #FBA2D0;
  border-color: #FBA2D0;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(250,187,203,0.35);
}

.hc-cmatch__btn--secondary {
  background: transparent;
  color: #070707;
  border: 1px solid rgba(0, 0, 0, 0.15);  /* v2.1: was rgba(7,7,7,0.25) — softer */
}

.hc-cmatch__btn--secondary:hover {
  border-color: #070707;
  transform: translateY(-1px);
}

.hc-cmatch__chart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hc-font-body);
  font-size: 12px; font-weight: 400;
  color: #FABBCB;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: gap 0.2s ease;
}

.hc-cmatch__chart-link:hover {
  gap: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hc-cmatch__chart-link svg { color: #FABBCB; }

@media (max-width: 1024px) {
  .hc-cmatch__content { padding: 40px 36px 40px 32px; }
}

@media (max-width: 767px) {
  .hc-cmatch { background: linear-gradient(180deg, #FDF5F3 0%, #F8EDE9 100%); margin: 20px 0; }
  .hc-cmatch__inner { grid-template-columns: 1fr; min-height: auto; }
  .hc-cmatch__media { aspect-ratio: 4 / 3; max-height: 360px; }
  .hc-cmatch__swatches { bottom: 16px; left: 16px; right: 16px; height: 5px; }
  .hc-cmatch__content { padding: 36px 24px 48px; text-align: center; align-items: center; }
  .hc-cmatch__sub { max-width: 340px; }
  .hc-cmatch__trust { align-items: center; }
  .hc-cmatch__ctas { justify-content: center; width: 100%; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .hc-cmatch__btn { width: 100%; justify-content: center; min-width: 0; padding: 15px 20px; font-size: 12px; }
  .hc-cmatch__chart-link { margin-top: 4px; }
}

@media (max-width: 380px) {
  .hc-cmatch__btn { padding: 15px 16px; }
}

@media (max-width: 767px) {
  .hc-cmatch__media {
    display: none;
  }
}

/* ============================================================
   16. HC PROFESSIONAL / TRADE BANNER
   ============================================================ */

.shopify-section.hc-pro-section {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.hc-pro {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.hc-pro__inner {
  background: linear-gradient(135deg, #070707 0%, #1a1a1a 60%, #070707 100%);
  padding: 72px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 280px;
  width: 100%;
  box-sizing: border-box;
}

.hc-pro__bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hc-pro__bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.65;
}

.hc-pro__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(7,7,7,0.65) 0%,
    rgba(7,7,7,0.4) 50%,
    rgba(7,7,7,0.2) 100%
  );
}

.hc-pro__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: 640px;
}

.hc-pro__eyebrow {
  font-family: var(--hc-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FABBCB;
  margin: 0 0 14px;
  padding: 0;
}

.hc-pro h2.hc-pro__heading,
.hc-pro__heading {
  font-family: var(--hc-font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 0 16px;
  padding: 0;
  letter-spacing: normal;
  text-transform: none !important;
}

.hc-pro__body {
  font-family: var(--hc-font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin: 0 0 28px;
  max-width: 440px;
  padding: 0;
}

.hc-pro__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hc-pro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 0;
  font-family: var(--hc-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.22s ease;
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
}

.hc-pro__btn--primary {
  background: #FABBCB !important;
  color: #070707 !important;
  border: 1px solid #FABBCB !important;
}

.hc-pro__btn--primary:hover {
  background: #FBA2D0 !important;
  border-color: #FBA2D0 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(250,187,203,0.3);
}

.hc-pro__btn--secondary {
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

.hc-pro__btn--secondary:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.7) !important;
  transform: translateY(-1px);
}

.hc-pro__stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 60px;
  flex-shrink: 0;
}

.hc-pro__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.hc-pro__stat-value {
  font-family: var(--hc-font-heading);
  font-size: 32px;
  color: #FFFFFF;
  line-height: 1;
}

.hc-pro__stat-label {
  font-family: var(--hc-font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 767px) {
  .hc-pro__inner {
    padding: 52px 24px;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }
  .hc-pro__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .hc-pro__btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 11px;
  }
  .hc-pro__stats {
    margin-left: 0;
    margin-top: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 32px;
  }
  .hc-pro__stat { align-items: flex-start; }
  .hc-pro__stat-value { font-size: 26px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hc-pro__inner { padding: 60px 40px; }
  .hc-pro__stats { margin-left: 40px; }
}

.shopify-section.hc-pro-section,
.hc-pro,
.hc-pro__inner {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}


/* ============================================================
   4. HC COLLECTION CAROUSEL (Shop by Collection)
   Custom section — no shared selectors with colour tiles.
   ============================================================ */

/* v2.2: margin-bottom removed — was collapsing gap before Trade Account banner.
   The pro section zeroes its own top margin; the carousel needs its bottom margin intact. */
.hc-coll-carousel-section.index-section {
  padding-bottom: 0 !important;
}

.hc-coll-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
  margin-bottom: 4px;
}

/* v2.1: letter-spacing: 0 !important removed — inherits 0.04em from hc-global.css h2 */
.hc-coll-carousel__title {
  font-family: 'Proxima Nova', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #070707 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.hc-coll-carousel__view-all {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5C5955;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #f4f3f1;
  transition: color 200ms ease, text-decoration-color 200ms ease;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}

.hc-coll-carousel__view-all:hover {
  color: #FABBCB;
  text-decoration-color: #FABBCB;
}

.hc-coll-carousel__track-wrap {
  position: relative;
}

.hc-coll-carousel__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  padding-left: var(--page-width-padding, 40px); /* v2.4: CSS variable — defined in hc-global.css :root */
}

.hc-coll-carousel__track::-webkit-scrollbar { display: none; }

.hc-coll-carousel__track-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 4px;
  width: 80px;
  background: linear-gradient(to right, transparent, #FFFFFF 90%);
  pointer-events: none;
  z-index: 3;
}

.hc-coll-tile {
  flex: 0 0 max(280px, 22vw); /* Fixed: Fluid scaling */
  max-width: none; /* Fixed: Removed the pixel handcuffs */
  scroll-snap-align: start;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
}

.hc-coll-tile__img-wrap {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 0;
  background: #F0EDEA;
}

.hc-coll-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hc-coll-tile:hover .hc-coll-tile__img {
  transform: scale(1.04);
}

.hc-coll-tile__overlay {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55));
  z-index: 1;
}

.hc-coll-tile__placeholder {
  position: absolute;
  inset: 0;
  background: #EDECEA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-coll-tile__placeholder-svg {
  width: 55%;
  height: auto;
  opacity: 0.15;
}

.hc-coll-tile__label {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 2;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  line-height: 1.3;
  pointer-events: none;
  padding: 0 12px;
}

@media (max-width: 767px) {
  .hc-coll-carousel__header {
    margin-bottom: 0;
    padding-bottom: 16px;
  }
  .hc-coll-carousel__track {
    gap: 10px;
    padding-left: var(--page-width-padding-mobile, 20px) !important; /* v2.4: CSS variable */
  }
  .hc-coll-carousel__track-wrap::after {
    display: none;
  }
  .hc-coll-tile {
    flex: 0 0 58vw;
    min-width: 0;
    max-width: none;
  }
  .hc-coll-carousel__title {
    font-size: 22px !important;
  }
  .hc-coll-tile__label {
    font-size: 11px;
    bottom: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hc-coll-tile {
    flex: 0 0 32vw;
  }
}

/* ============================================================
   17. HC AS WORN BY (Celebrity Carousel)
   v2.2: font-family + font-weight use !important to beat the
   global h2 { font-family: Proxima Nova !important } rule.
   Card flex layout uses !important to beat Impulse grid overrides.
   ============================================================ */

.hc-celeb {
  padding: 0 0 48px;
}

.hc-celeb__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.hc-celeb h2.hc-celeb__title,
.hc-celeb__title {
  font-family: var(--hc-font-heading) !important; /* beats global h2 Proxima Nova !important */
  font-style: normal;
  font-weight: 400 !important;
  font-size: clamp(26px, 2.5vw, 32px);
  color: #070707;
  margin: 0;
  padding: 0;
  letter-spacing: 0.04em;
  text-transform: none !important;
}

.hc-celeb__link {
  font-family: var(--hc-font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #FABBCB;
  text-decoration: none;
  transition: text-decoration 0.2s;
  white-space: nowrap;
}

.hc-celeb__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hc-celeb__track-wrap {
  position: relative;
}

.hc-celeb__track {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px var(--page-width-padding, 40px) 12px; /* v2.4: CSS variable for left/right gutter */
}

.hc-celeb__track::-webkit-scrollbar {
  display: none;
}

.hc-celeb__card {
  flex: 0 0 max(220px, 15vw) !important; /* FLUID SCALING */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important; /* Removed handcuffs */
  text-align: center;
  float: none !important;
  padding: 0 !important;
}

.hc-celeb__card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hc-celeb__card-link:hover .hc-celeb__img-wrap {
  box-shadow: 0 4px 16px rgba(250,187,203,0.25);
}

.hc-celeb__card-link:hover .hc-celeb__name {
  color: #FABBCB;
}

.hc-celeb__img-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 12px;
  border: 2px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease;
  flex-shrink: 0;
}

.hc-celeb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hc-celeb__placeholder {
  background: linear-gradient(135deg, #F5EDE8 0%, #EDE0DA 100%);
}

.hc-celeb__name {
  font-family: var(--hc-font-body);
  font-size: 14px;
  font-weight: 500;
  color: #070707;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.hc-celeb__product {
  font-family: var(--hc-font-body);
  font-size: 12px;
  font-weight: 300;
  color: #8A8580;
  letter-spacing: 0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hc-celeb__nav {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.2s ease;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.hc-celeb__nav svg {
  color: #070707;
}

.hc-celeb__nav:hover {
  border-color: #FABBCB;
  box-shadow: 0 2px 12px rgba(250,187,203,0.2);
}

.hc-celeb__nav--left  { left: 12px; }
.hc-celeb__nav--right { right: 12px; }

@media (min-width: 768px) {
  .hc-celeb__track-wrap:hover .hc-celeb__nav {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .hc-celeb__card {
    flex: 0 0 max(200px, 22vw) !important; /* FLUID SCALING */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important; /* Removed handcuffs */
  }
  .hc-celeb__track { gap: 20px; }
}

@media (max-width: 767px) {
  .hc-celeb { padding: 36px 0 40px; }
  .hc-celeb__header { margin-bottom: 16px; } /* v2.4: padding removed — owned by .page-width */
  .hc-celeb__track { gap: 14px; padding: 4px var(--page-width-padding-mobile, 20px) 12px; }
  .hc-celeb__card {
    flex: 0 0 62vw !important; /* Already fluid! Just removing handcuffs */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important; /* Removed handcuffs */
  }
  .hc-celeb__img-wrap { margin: 0 0 10px; }
  .hc-celeb__name { font-size: 14px; }
  .hc-celeb__product { font-size: 12px; }
}

/* ============================================================
   HERO — AOS / animation suppression
   ============================================================ */

.hero__link,
.hero__link .btn,
.slideshow .hero__slide-content *,
.hero__text-content * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ============================================================
   FLUID LAYOUT
   ============================================================ */

/* 1. Make the entire site fluid (100% wide) with a 40px gutter */
.page-width {
  max-width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
}

/* 2. Desktop: Standard 40px alignment for all sliders and layouts */
@media (min-width: 768px) {
  .hc-coll-carousel__track,
  .hc-video-gallery__track,
  .hc-celeb__track,
  .hc-tgrid__layout,
  .hc-tutorials__track {
    padding-left: 40px !important;
    scroll-padding-left: 40px !important;
  }
  
  /* Prevent the cards inside 'See the difference' from double-padding */
  .hc-tgrid__cards {
    padding-left: 0 !important; 
  }
  
  /* Reset the negative margins that pushed the Hair Tools grid too far left */
  .index-section [data-context="featured-collection"] .grid--uniform {
    margin-left: 0 !important;
  }
}

/* 3. Mobile: 20px gutter */
@media (max-width: 767px) {
  .page-width {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hc-coll-carousel__track,
  .hc-video-gallery__track,
  .hc-celeb__track,
  .hc-tgrid__cards,
  .hc-tutorials__track {
    padding-left: 20px !important;
    scroll-padding-left: 20px !important;
  }
  
  /* Keep Before/After image fully edge-to-edge on mobile */
  .hc-tgrid__layout {
    padding-left: 0 !important;
  }
  
  /* Reset mobile grid margins */
  .index-section [data-context="featured-collection"] .grid--uniform {
    margin-left: 0 !important;
  }
}

/* ============================================================
   18. HC TUTORIALS CAROUSEL
   Homepage Tutorials & Dilemmas section — landscape cards,
   horizontal scroll, mirrors hc-coll-carousel track pattern.
   ============================================================ */

.hc-tutorials-section.index-section {
  padding-bottom: 0 !important;
}



.hc-tutorials__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 0px;
}

.hc-tutorials {
  padding-top: 72px;
}

@media (max-width: 767px) {
  .hc-tutorials {
    padding-top: 48px;
  }
}

.hc-tutorials__title {
  font-family: 'Proxima Nova', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #070707 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.hc-tutorials__view-all {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5C5955;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #D9D9D6;
  transition: color 200ms ease, text-decoration-color 200ms ease;
  white-space: nowrap;
}

.hc-tutorials__view-all:hover {
  color: #FABBCB;
  text-decoration-color: #FABBCB;
}

.hc-tutorials__track-wrap {
  position: relative;
}

.hc-tutorials__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, transparent, #FFFFFF 90%);
  pointer-events: none;
  z-index: 3;
}

.hc-tutorials__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: var(--page-width-padding, 40px);
  padding-bottom: 4px;
}

.hc-tutorials__track::-webkit-scrollbar {
  display: none;
}

/* ── Card ── */

.hc-tut-card {
  flex: 0 0 max(320px, 26vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.hc-tut-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--hc-radius, 6px);
  overflow: hidden;
  background: #F0EDEA;
}

.hc-tut-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hc-tut-card:hover .hc-tut-card__img {
  transform: scale(1.04);
}

.hc-tut-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F5EDE8 0%, #EDE0DA 100%);
}

/* ── Play button overlay ── */

.hc-tut-card__play {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  transition: transform 250ms ease, opacity 250ms ease;
  opacity: 0.9;
  z-index: 2;
}

.hc-tut-card__play svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.hc-tut-card:hover .hc-tut-card__play {
  transform: scale(1.1);
  opacity: 1;
}

/* ── Card meta ── */

.hc-tut-card__meta {
  padding: 0 2px;
}

.hc-tut-card__title {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #070707;
  line-height: 1.4;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Mobile ── */

@media (max-width: 767px) {
  .hc-tutorials__header {
    padding-bottom: 16px;
  }
  .hc-tutorials__title {
    font-size: 22px !important;
  }
  .hc-tutorials__track {
    gap: 10px;
    padding-left: var(--page-width-padding-mobile, 20px);
  }
  .hc-tutorials__track-wrap::after {
    display: none;
  }
  .hc-tut-card {
    flex: 0 0 78vw;
  }
  .hc-tut-card__title {
    font-size: 13px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hc-tut-card {
    flex: 0 0 38vw;
  }
}

@media screen and (max-width: 768px) {
  .hero--mobile--480px { height: 480px; }
  .hero--mobile--490px { height: 490px; }
}

/* ============================================================
   19. HERO BUTTON — SIZE
   Slideshow CTA only. Tightens the oversized default .btn padding.
   ============================================================ */

.slideshow__slide .hero__link .btn.btn {
  padding: 12px 28px !important;
  font-size: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .slideshow__slide .hero__link .btn.btn {
    padding: 10px 22px !important;
    font-size: 11px !important;
  }
}
html {
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

@media screen and (max-width: 768px) {
  .hero--mobile--480px .hero__image,
  .hero--mobile--490px .hero__image {
    object-position: center top !important;
  }
}

@media screen and (max-width: 768px) {
  .hero--mobile--480px { height: 480px; }
  .hero--mobile--490px { height: 490px; }
  .hero--mobile--550px { height: 550px; }
}

@media screen and (max-width: 768px) {
  .hero--mobile--550px .hero__image-wrapper,
  .hero--mobile--550px .hero__image {
    height: 550px !important;
  }
}

@media screen and (max-width: 768px) {
  .hero--mobile--480px .hero__image,
  .hero--mobile--490px .hero__image,
  .hero--mobile--550px .hero__image {
    object-position: center 20%;
  }
}

@media screen and (max-width: 768px) {
  .hero--mobile--auto {
    height: auto !important;
    aspect-ratio: 4 / 5;
  }

  .hero--mobile--auto .flickity-viewport,
  .hero--mobile--auto .flickity-slider {
    height: 100% !important;
  }
}

/* ============================================================
   FIX: Mobile Hero Height & Overlay Navigation Dots
   ============================================================ */
@media screen and (max-width: 768px) {
  /* 1. Reset hero container spacing */
  .index-section--hero,
  .hero,
  .hero--mobile--auto {
    height: auto !important;
    position: relative !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2. Override Flickity inline JS height with a strict 4:5 aspect ratio box */
  .hero .flickity-viewport {
    height: 0 !important;
    padding-bottom: 125% !important; /* 4:5 ratio (5/4 = 1.25) */
    position: relative !important;
  }

  /* 3. Stretch slides and images to fill the 4:5 box exactly */
  .hero .flickity-slider,
  .hero .slideshow__slide {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .hero .hero__image-wrapper,
  .hero .hero__image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 4. Position navigation dots over the bottom of the image overlay */
  .hero .flickity-page-dots {
    position: absolute !important;
    bottom: 16px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    background: transparent !important;
  }
}