/* ============================================================= */
/* Page header (placeholder) */
/* ============================================================= */

/* The real site's fixed nav header takes zero space in normal flow — main's
   padding-top (from the shared styles.css `main { padding-top: var(--header-height) }`)
   is what reserves room for it. Without a real header element here, that same
   padding-top gap exposes premium-color-hero's own background-color underneath
   it while scrolling (the pinned hero media stays fixed at its original
   position, but the hero box itself scrolls normally, opening a gap between
   the two that only a fixed, opaque header covers on the real site). This is
   a minimal stand-in — just enough to cover that seam — not the real nav.
   Values (position/z-index/background) match the real .header-wrapper in
   /blocks/header/header.css. */

/* ============================================================= */
/* Premium Color Hero */
/* ============================================================= */

/* Bootstrap's `.container` (max-width 1140px at lg, real margins) collides with
   the real design system's own `.container` class that premium-color-hero.js
   applies to .premium-color-hero__inner — same fix as Color Collection/Testimonial.
   This one is easy to miss because .premium-color-hero__media is `position:
   absolute; inset:0`, which fills its containing block's *padding* box regardless
   of padding-inline — so the real .container's padding wouldn't have visibly
   narrowed the media anyway. Only Bootstrap's actual max-width shrink does, which
   is why the hero image was rendering ~150px narrower on each side than the full
   1440px viewport instead of true edge-to-edge. */
/* !important for the same reason as Color Collection/Color Summary's
   identical override: on dev.behr.ca some other, unlayered, sitewide
   stylesheet's .container rule (real Bootstrap or a legacy nav/layout
   bundle) still wins the cascade here and re-narrows this section — not
   reproducible in this local page (this override already wins without
   !important here), but the guard keeps it winning regardless of load
   order elsewhere. */
.premium-color-hero .container {
  width: 100% !important;
  max-width: 120rem !important;
  margin-inline: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
@media (min-width: 768px) {
  .premium-color-hero .container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (min-width: 1024px) {
  .premium-color-hero .container {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}

.premium-color-hero {
  --bevel-color: var(--theme-surface-primary);
  --hero-height: calc(100vh - var(--header-height, 0rem));
  background-color: var(--bevel-color);
}
@supports (height: 1svh) {
  .premium-color-hero {
    --hero-height: calc(100svh - var(--header-height, 0rem));
  }
}
.premium-color-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: var(--hero-height);
  overflow: hidden;
}
.premium-color-hero__media {
  /* Extra height on top, pulled up past the container's own edge with a
     negative top inset, so the media has permanent buffer to be translated
     into without ever uncovering the container's background-color beneath
     it. Deliberately NOT sized from any header's height (fixed or in-flow,
     single or stacked, mobile or desktop) — see 2027-coty.js's matching
     --hero-media-buffer cap for why: this container is meant to work
     whether or not anything above it ever masks the reveal. */
  --hero-media-buffer: 200px;
  position: absolute;
  top: calc(-1 * var(--hero-media-buffer));
  right: 0;
  bottom: 0;
  left: 0;
  margin-inline: auto;
  z-index: 0;
  will-change: transform;
  box-sizing: content-box;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .premium-color-hero__media {
    max-width: 120rem;
  }
}
.premium-color-hero__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.premium-color-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.premium-color-hero__content {
  position: relative;
  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: 3.5rem 0 1.5rem;
}
@media (min-width: 768px) {
  .premium-color-hero__content {
    padding: 3.5rem 0 2rem;
  }
}
@media (min-width: 1024px) {
  .premium-color-hero__content {
    padding: 3.5rem 3rem;
  }
}
.premium-color-hero__bevel {
  position: absolute;
  bottom: -0.5rem;
  left: -40%;
  width: 180%;
  height: calc(100% + 0.5rem);
  background-color: var(--bevel-color);
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
  pointer-events: none;
  will-change: transform, border-radius;
}
@media (min-width: 1024px) {
  .premium-color-hero__bevel {
    left: -15%;
    width: 130%;
  }
}
.premium-color-hero__text {
  position: relative;
  z-index: 1;
  text-align: center;
  pointer-events: auto;
  will-change: opacity, transform;
}
.premium-color-hero__eyebrow {
  color: var(--theme-text-primary);
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.premium-color-hero__heading {
  color: var(--theme-text-primary);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}
.premium-color-hero__color-code {
  color: var(--theme-text-primary);
  margin: 0;
  opacity: 0.9;
}
.premium-color-hero__cta-section {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  will-change: opacity, transform;
  margin-top: 3rem;
  width: 100%;
}
.premium-color-hero__cta-section:focus-within {
  opacity: 1 !important;
}
.premium-color-hero__cta-section .button {
  width: 100%;
}
/* Keep the "Add to project" CTA white with black text on hover/focus instead
   of the default primary-button hover treatment (transparent fill, white
   border/text/icon) — matches the real premium-color-hero.scss override. */
.premium-color-hero__cta-section .button.primary:hover,
.premium-color-hero__cta-section .button.primary:focus-visible,
.premium-color-hero__cta-section .button.primary.focus {
  --background-color: var(--theme-interactive-primary-fill);
  --border-color: transparent;
  --color: var(--theme-interactive-primary-text);
}
.premium-color-hero__cta-section .button.primary:hover .icon,
.premium-color-hero__cta-section .button.primary:focus-visible .icon,
.premium-color-hero__cta-section .button.primary.focus .icon {
  --icon-color: var(--theme-interactive-primary-icon);
}
@media (min-width: 1024px) {
  .premium-color-hero__cta-section {
    position: absolute;
    bottom: 3.5rem;
    left: 1rem;
    margin-top: 0;
    width: fit-content;
  }
  .premium-color-hero--no-eyebrow .premium-color-hero__cta-section {
    bottom: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .premium-color-hero__media, .premium-color-hero__bevel, .premium-color-hero__text, .premium-color-hero__cta-section {
    will-change: auto;
  }
  .premium-color-hero .video .video__player {
    display: none;
  }
}

/* ============================================================= */
/* Video (background mode) */
/* ============================================================= */

/* From /ui/components/video/video.css — background-mode subset only
   (no play button, no ratio class; premium-color-hero uses the video
   full-bleed inside its own absolutely-positioned media container). */
.video {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: var(--theme-surface-primary);
}
.video--background .video__player {
  pointer-events: none;
}
.video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video__poster picture,
.video__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__poster[data-visible=false] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.premium-color-hero__media .video--background {
  aspect-ratio: 16 / 9;
  height: auto;
}
/* !important on every property here for the same reason as Color Collection/
   Color Summary/Premium Color Hero's identical overrides elsewhere in this
   file: on the real site, a legacy sitewide stylesheet (behr.css and
   pyp15_v19/styles.css, neither reproducible locally — they're not part of
   this page's own design-system bundle) defines a generic `button, .button`
   pill-button reset (height: 50px, padding: 5px 30px, border-radius: 25px,
   position: relative). That selector has the exact same specificity as this
   single-class `.video__control-btn` rule, and on production it's loaded
   *after* this stylesheet, so it wins the cascade tie on source order alone —
   leaving the button relatively positioned (offsets then apply from its
   normal in-flow spot, not the video box's corner) and sized like a 50px
   pill instead of a small icon-only circle. Pinning every property it leaks
   through guarantees this button renders correctly regardless of load order. */
.video__control-btn {
  position: absolute !important;
  z-index: 10;
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.video__control-btn[data-placement=top-right] {
  top: 1.5rem;
  right: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .video__control-btn {
    display: none;
  }
}

/* From /blocks/premium-color-hero/premium-color-hero.css — stretches the
   video component to fill .premium-color-hero__media edge-to-edge. The
   data-visible=false override below looks contradictory (forces the poster
   back to visible/opaque) but is harmless: the video sits above it at
   z-index 1 and covers it regardless, matching the real block's CSS as-is. */
.premium-color-hero__media .video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.premium-color-hero__media .video__player,
.premium-color-hero__media .video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.premium-color-hero__media .video__poster {
  z-index: 0;
}
.premium-color-hero__media .video__poster[data-visible=false] {
  opacity: 1;
  visibility: visible;
}
.premium-color-hero__media .video__player {
  z-index: 1;
  object-fit: cover;
}
/* No .video__control-btn override needed here, unlike .video__player/poster
   above: 2027-coty.js's scroll handler now gives the control button its own
   counter-transform every tick, exactly cancelling media's --hero-media-buffer
   pin offset net — so its plain top:1.5rem from the base .video__control-btn
   rule (unmodified from the real design) already lands in the right place. */

/* ============================================================= */
/* Tooltip */
/* ============================================================= */

.tooltip.block {
  display: contents;
}
/* Bootstrap 4 has its own unrelated .tooltip class (for its JS tooltip/popover
   plugin) that defaults to `opacity: 0` until Bootstrap's JS adds `.show`. Name
   collision with this real design-system component — nothing in our own CSS set
   `opacity` on the bare `.tooltip` rule (only the [data-state=...] variants did),
   so Bootstrap's opacity:0 applied uncontested and made the whole trigger row
   (label + info button) invisible despite every child reporting opacity:1 —
   opacity compounds down the tree, so a 0-opacity ancestor hides everything
   inside it regardless of the children's own values. */
.tooltip {
  opacity: 1;
  --tooltip-card-padding: 1.5rem;
  --tooltip-card-radius: 0.5rem;
  --tooltip-card-z: 1;
  --tooltip-card-bg: #000000;
  --tooltip-card-text: #ffffff;
  --tooltip-trigger-color: var(--theme-icon-primary);
  --tooltip-decoration-icon-size: 1.5rem;
  --tooltip-trigger-icon-size: 2rem;
  --tooltip-header-gap: 2rem;
  --tooltip-column-gap: 0.5rem;
  --tooltip-row-gap: 2rem;
  --tooltip-trigger-gap: 1.5rem;
  --tooltip-sections-gap: 2rem;
  --tooltip-gutter: 1.5rem;
  position: relative;
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--tooltip-column-gap);
  align-items: center;
  color: var(--tooltip-trigger-color);
  width: 100%;
}
.tooltip[data-state=opening],
.tooltip[data-state=open],
.tooltip[data-state=closing] {
  z-index: var(--tooltip-card-z);
}
.tooltip__icon,
.tooltip__item-icon {
  --icon-color: var(--tooltip-card-text);
  max-width: var(--tooltip-decoration-icon-size);
}
.tooltip__trigger-icon {
  --icon-color: var(--tooltip-trigger-color);
  max-width: var(--tooltip-decoration-icon-size);
}
.tooltip__item-icon {
  grid-column: 1/1;
}
.tooltip__label {
  color: inherit;
}
.tooltip__body-label {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: inherit;
}
.tooltip__label {
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  grid-column: 1/3;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tooltip__label--has-icon {
  grid-column: 2/3;
}
.tooltip__body-label {
  grid-column: 1/3;
}
.tooltip__body-label--has-icon {
  grid-column: 2/3;
}
.tooltip__trigger-content {
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  grid-column: 1/3;
  color: inherit;
}
.tooltip--has-icon .tooltip__label--has-icon + .tooltip__trigger-content {
  grid-column: 2/3;
}
.tooltip__icon-container,
.tooltip__body-close,
.tooltip__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: var(--tooltip-trigger-icon-size) !important;
  height: var(--tooltip-trigger-icon-size) !important;
  padding: 0.125rem !important;
  border-radius: 0 !important;
  color: inherit;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tooltip__icon-container .button-content,
.tooltip__body-close .button-content,
.tooltip__action .button-content {
  display: contents;
}
.tooltip__body-close,
.tooltip__action {
  grid-column: 3;
  grid-row: -1;
  background: none;
  border: none;
  cursor: pointer;
}
/* .button-content above is `display: contents` here, so .icon becomes a direct
   flex child of the button. A mask-image span has no intrinsic size for the flex
   algorithm to size against, so without an explicit width/height + flex-shrink:0
   it can collapse well below 1.5rem (confirmed on dev.behr.ca: collapses to 0,
   making the icon invisible). Pin the size explicitly instead of relying on the
   --icon-width/--icon-size fallback chain through the contents wrapper. */
.tooltip__icon-container .icon,
.tooltip__body-close .icon,
.tooltip__action .icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.tooltip__action .icon {
  --icon-color: var(--theme-text-primary);
}
.tooltip__body-close .icon {
  --icon-color: var(--tooltip-card-text);
}
.tooltip__action:focus-visible, .tooltip__action.focus {
  outline-color: var(--theme-focus-primary);
}
.tooltip__body-close:focus-visible, .tooltip__body-close.focus {
  outline-color: #ffffff;
}
.tooltip__icon-container {
  max-width: var(--tooltip-decoration-icon-size);
}
.tooltip__body-close {
  margin-left: var(--tooltip-trigger-gap);
}
.tooltip[data-state=opening] > .tooltip__icon-container,
.tooltip[data-state=opening] > .tooltip__label,
.tooltip[data-state=opening] > .tooltip__action,
.tooltip[data-state=opening] > .tooltip__trigger-content,
.tooltip[data-state=open] > .tooltip__icon-container,
.tooltip[data-state=open] > .tooltip__label,
.tooltip[data-state=open] > .tooltip__action,
.tooltip[data-state=open] > .tooltip__trigger-content,
.tooltip[data-state=closing] > .tooltip__icon-container,
.tooltip[data-state=closing] > .tooltip__label,
.tooltip[data-state=closing] > .tooltip__action,
.tooltip[data-state=closing] > .tooltip__trigger-content {
  opacity: 0;
}
.tooltip__body {
  position: absolute;
  top: calc(-1 * var(--tooltip-card-padding));
  left: calc(-1 * var(--tooltip-card-padding));
  max-width: calc(100vw - 0.5rem * 2);
  padding: var(--tooltip-card-padding);
  padding-bottom: 0;
  background: var(--tooltip-card-bg);
  border-radius: var(--tooltip-card-radius);
  color: var(--tooltip-card-text);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--tooltip-column-gap);
  width: calc(100% + 2 * var(--tooltip-card-padding));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tooltip[data-state=opening] .tooltip__body,
.tooltip[data-state=open] .tooltip__body,
.tooltip[data-state=closing] .tooltip__body {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tooltip__body-content {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tooltip[data-state=open] .tooltip__body-content {
  grid-template-rows: 1fr;
}
.tooltip__body-items {
  grid-column: 1/-1;
  overflow: hidden;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--tooltip-row-gap);
}
.tooltip__item {
  display: grid;
  grid-template-columns: subgrid;
  align-items: flex-start;
  grid-column: 1/-1;
  gap: var(--tooltip-column-gap);
}
.tooltip__item:first-of-type {
  margin-top: var(--tooltip-header-gap);
}
.tooltip__item:last-of-type {
  padding-bottom: var(--tooltip-card-padding);
}
.tooltip__body:not(:has(.tooltip__body-label)) .tooltip__item:first-of-type {
  margin-top: 0;
}
.tooltip__item-title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  grid-column: 1/-1;
  align-self: center;
}
.tooltip--has-icon .tooltip__item-title {
  grid-column: 2/-1;
}
.tooltip__item-text {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  grid-column: 1/-1;
  display: block !important;
  align-items: center;
  min-height: 2rem;
}
.tooltip__item-text.default-content-wrapper a {
    color: inherit !important;
}
.tooltip--has-icon .tooltip__item-text {
  grid-column: 2/-1;
}
.tooltip__body .tooltip__item-text a:not(.button) {
  color: inherit;
}
.tooltip__body .tooltip__item-text a:not(.button):focus-visible {
  outline-color: currentcolor;
}
[data-theme=dark] .tooltip {
  --tooltip-card-bg: #ffffff;
  --tooltip-card-text: #000000;
}
[data-theme=dark] .tooltip .tooltip__body-close:focus-visible, [data-theme=dark] .tooltip .tooltip__body-close.focus {
  outline-color: #000000;
}
@media (max-width: 1023px) {
  .tooltip {
    --tooltip-card-padding: 1rem;
  }
}
@media (min-width: 1024px) {
  .tooltip {
    --tooltip-trigger-icon-size: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip__icon-container,
  .tooltip__label,
  .tooltip__action,
  .tooltip__trigger-content,
  .tooltip__body,
  .tooltip__body-content {
    transition-duration: 0ms;
  }
}

/* ============================================================= */
/* Accordion */
/* ============================================================= */

.accordion {
  border-radius: 0.25rem;
}
.accordion.focus, .accordion:has(.accordion__trigger:focus-visible) {
  outline: 0.125rem solid var(--theme-focus-primary);
  outline-offset: 0.25rem;
}
.accordion__heading {
  margin: 0;
  font: inherit;
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  padding-bottom: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background-color 0.15s cubic-bezier(0.19, 1, 0.22, 1), color 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
.accordion__trigger:focus-visible:focus, .accordion__trigger:focus-visible:focus-visible {
  outline: none;
  box-shadow: none;
}
.accordion__title {
  margin-right: 1rem;
}
.accordion__chevron {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
}
@media (min-width: 1024px) {
  .accordion__chevron {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.accordion__chevron {
  transition: transform 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.accordion--open .accordion__chevron {
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.accordion__body-inner {
  overflow: hidden;
  padding: 0.125rem;
  margin: -0.125rem;
  max-width: var(--accordion-body-max-width, none);
}
.accordion__body-inner a:focus-visible {
  outline-offset: unset;
}
.accordion--open .accordion__body {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1024px) {
  .accordion[data-desktop-always-open] .accordion__trigger {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 2rem;
    cursor: default;
    pointer-events: none;
  }
  .accordion[data-desktop-always-open] .accordion__chevron {
    display: none;
  }
  .accordion[data-desktop-always-open] .accordion__body {
    grid-template-rows: 1fr;
    transition: none;
    border: none;
  }
  .accordion[data-desktop-always-open] .accordion__body-inner {
    overflow: visible;
    padding-top: 0.125rem;
    padding-bottom: 1rem;
    transition: none;
  }
}
@media (max-width: 1023px) {
  .accordion[data-mobile-always-open] .accordion__trigger {
    border-bottom: none;
    cursor: default;
    pointer-events: none;
  }
  .accordion[data-mobile-always-open] .accordion__chevron {
    display: none;
  }
  .accordion[data-mobile-always-open] .accordion__body {
    grid-template-rows: 1fr;
    transition: none;
    border: none;
  }
  .accordion[data-mobile-always-open] .accordion__body-inner {
    padding-top: 0.125rem;
    padding-bottom: 1rem;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .accordion__body, .accordion__chevron, .accordion__body-inner {
    transition: none;
  }
}

/* ============================================================= */
/* Color Summary */
/* ============================================================= */

/* Same Bootstrap `.container` collision as Premium Color Hero / Color Collection /
   Testimonial — `.color-summary__inner` carries a real "container" class, but
   Bootstrap's own `.container` (max-width 1140px) was winning, capping this
   section's content ~170px narrower than the real spec (padding-inline up to a
   120rem ceiling) at 1440px wide. Unlike Premium Color Hero's media layer, nothing
   here is absolutely positioned, so the cap was visibly narrowing the heading text
   wrap *and* the 3-column grid both — this is why the heading wrapped a word
   earlier per line than the Figma reference. */
/* !important for the same reason as Color Collection's identical override
   below: on dev.behr.ca some other, unlayered, sitewide stylesheet's
   .container rule (real Bootstrap or a legacy nav/layout bundle) still wins
   the cascade here and re-narrows this section — this local reproduction
   doesn't reproduce it (this override already wins without !important here),
   but without the guard .color-summary ends up pulled in far more than
   .room-carousel below it, which doesn't use .container at all and so has
   nothing to lose that fight against. */
.color-summary .container {
  width: 100% !important;
  max-width: 120rem !important;
  margin-inline: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
@media (min-width: 768px) {
  .color-summary .container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (min-width: 1024px) {
  .color-summary .container {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}

.color-summary {
  background-color: var(--color-summary-bg, transparent);
  color: var(--theme-text-primary);
  padding: 4rem 0;
}
@media (min-width: 1024px) {
  .color-summary {
    padding: 6.5rem 0;
  }
}
.color-summary__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 1024px) {
  .color-summary__inner {
    padding-bottom: 0;
  }
}
.color-summary__headline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-bottom: 4rem;
}
@media (min-width: 1024px) {
  .color-summary__headline-wrapper {
    margin-bottom: 6.5rem;
  }
}
.color-summary__columns {
  row-gap: 3rem;
}
@media (min-width: 768px) {
  .color-summary__columns {
    row-gap: 4rem;
  }
}
@media (min-width: 1024px) {
  .color-summary__columns {
    row-gap: 0;
  }
}
.color-summary__col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.color-summary__col--why {
  margin-bottom: 4rem;
}
.color-summary__col--why .accordion__title {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .color-summary__col--why {
    margin-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .color-summary__col--features {
    grid-column: 1/4;
  }
  .color-summary__col--info {
    grid-column: 5/8;
  }
  .color-summary__col--why {
    grid-column: 9/12;
  }
}
.color-summary__features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .color-summary__features-list {
    gap: 0.75rem;
  }
}
.color-summary__feature-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 20px;
}
.color-summary__feature-item:last-child, 
.color-summary__feature-item:nth-child(4), 
.color-summary__feature-item:nth-child(5) {
  margin-top: -14px;   
}
.color-summary__icon-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 1.5rem;
  height: 1.5rem;
}
.color-summary__feature-icon {
  flex-shrink: 0;
}
.color-summary__feature-label {
  flex: 1;
}
.color-summary__data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .color-summary__data {
    gap: 0.75rem;
  }
}
.color-summary__data-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.color-summary__data-row--rgb {
  gap: 0.75rem;
}
.color-summary__cta {
  display: flex;
  justify-content: flex-start;
}
@media (min-width: 1024px) {
  .color-summary__cta {
    margin-top: 4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .color-summary * {
    transition: none !important;
    animation: none !important;
  }
}

/* Color Collection */

.color-collection-container {
    background-color: var(--theme-surface-primary);
    position: relative;
    padding: 64px 0;
}

@media (min-width: 1024px) {
    .color-collection-container {
        padding: 104px 0;
    }
}

/* Bootstrap's `.container`/`.container-fluid` cap width at 960-1140px (its own
   breakpoint scale). The real .color-collection.block instead runs full-width with
   inline padding (1.5rem/3rem/5rem) up to a 120rem ceiling — override scoped to this
   section only, so nothing else that legitimately relies on Bootstrap's container
   elsewhere on the page is affected.
   !important because on dev.behr.ca some other, unlayered, sitewide stylesheet's
   `.container` rule (real Bootstrap or a legacy nav/layout bundle, not just this
   page's own CDN link) still wins the cascade and re-narrows this section — not
   reproducible in this local reproduction, where this override already wins
   without !important. Forcing it here guards against that regardless of the other
   stylesheet's specificity or load order, matching the color chips up to their
   correct, full-width, ~big/wide/edge-to-end size instead of the ~207x207px
   shrunk result the narrower container produces. */
.color-collection-container .container,
.color-collection-container .container-fluid {
    width: 100% !important;
    max-width: 120rem !important;
    margin-inline: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
    .color-collection-container .container,
    .color-collection-container .container-fluid {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1024px) {
    .color-collection-container .container,
    .color-collection-container .container-fluid {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }
}

/* Sticky sub-header — pins to viewport top once the section heading scrolls
   above it. Simplified from the real component's live --header-visible-height
   tracking (this page's nav header height is static) to a plain scroll check;
   see setupStickyHeader() in 2027-coty.js. */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 19;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background-color: var(--theme-surface-primary);
    transform: translateY(-100%);
    will-change: transform;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .sticky-header {
        transition: none;
    }
}
@media (min-width: 768px) {
    .sticky-header {
        padding: 0.5rem 3rem;
    }
}
@media (min-width: 1024px) {
    .sticky-header {
        padding: 0.75rem 5rem;
    }
}
.sticky-header--visible {
    transform: translateY(0);
    visibility: visible;
}
.sticky-header__title {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--theme-text-primary);
}

/* Vertical padding only — horizontal inset is owned entirely by the nested
   .container elements (.header-section, .color-collection-cards), same
   pattern as .premium-color-hero/.color-summary. Giving the block its own
   horizontal padding on top of that double-insets the card grid, making it
   ~5rem narrower per side than the hero/summary sections above it. */
.color-collection.block {
    padding: 4rem 0;
}
@media (min-width: 1024px) {
    .color-collection.block {
        padding: 6.5rem 0;
    }
}
.color-collection .color-collection-cards {
    margin-top: 1.5rem;
}
@media (min-width: 1024px) {
    .color-collection .color-collection-cards {
        margin-top: 4rem;
    }
}
.color-collection-filters {
    display: contents;
}

.header-section {
    row-gap: 4rem;
}
.header-section__btn {
    display: inline-flex;
    justify-content: flex-end;
}
@media (min-width: 1024px) {
    .header-section__btn {
        align-self: start;
    }
}

/* control-button — chip-style "Filters" trigger, used in both sticky-header
   and header-section. */
.control-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--theme-border-secondary);
    border-radius: 0.5rem;
    background-color: var(--theme-surface-primary);
    color: var(--theme-text-primary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .control-button {
        transition: none;
    }
}
.control-button--light {
    background-color: var(--theme-surface-secondary);
}
@media (hover: hover) {
    .control-button--accent.hover, .control-button--accent:hover {
        border-color: var(--theme-border-primary);
        background-color: var(--theme-surface-secondary);
    }
    .control-button--light.hover, .control-button--light:hover {
        background-color: var(--theme-surface-primary);
    }
}
.control-button.focus, .control-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
    border-color: var(--theme-border-primary);
}
.control-button[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.control-button__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}
.control-button__label {
    white-space: nowrap;
}
.control-button__badge {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.6875rem;
    box-sizing: content-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 0.75rem;
    height: 0.75rem;
    padding: 0.125rem;
    border-radius: 6rem;
    background-color: var(--theme-interactive-primary-fill);
    color: var(--theme-surface-secondary);
}
.control-button__sr-count {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.color-collection-cards {
    width: 100% !important;
}
.color-collection-cards__skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0;
}
@media (min-width: 768px) {
    .color-collection-cards__skeleton {
        gap: 0.5rem;
        justify-content: flex-start;
    }
}
.color-collection-cards__skeleton-tile {
    width: 6.5rem;
    height: 6.5rem;
    background-color: var(--theme-surface-tertiary);
    border-radius: 0.5rem;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .color-collection-cards__skeleton-tile {
        width: calc((100% - 1.5rem) / 4);
        height: auto;
        aspect-ratio: 1/1;
    }
}
@media (min-width: 1024px) {
    .color-collection-cards__skeleton-tile {
        width: 12.9375rem;
        height: 12.9375rem;
        aspect-ratio: auto;
    }
}
.color-collection-cards__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    text-align: center;
}
.color-collection-cards__empty-msg {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--theme-text-primary);
    margin: 0;
}

/* color-card-grid — flexbox with a JS-driven --color-card-grid-cols variable
   (2/4/6 at sm/md/lg), not CSS grid, matching the real component. */
.color-card-grid {
    --color-card-grid-gap: 0.5rem;
    --color-card-grid-cols: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--color-card-grid-gap);
}
.color-card-grid__item {
    min-width: 0;
    flex: 0 0 auto;
    width: calc((100% - (var(--color-card-grid-cols) - 1) * var(--color-card-grid-gap)) / var(--color-card-grid-cols));
}
.color-card-grid__item[data-state="open"] {
    width: 100%;
    z-index: 1;
}

/* color-swatch-card — full port of the real component (was a hardcoded px
   approximation before). FLIP grid-reposition animation and the
   --expand-on-open/--expand-origin-bottom-left mobile zoom variant (used only
   by Room Carousel's small overlay swatch, not Color Collection) are not
   ported — out of scope here. */
.color-swatch-card {
    --color-swatch-card-bg: transparent;
    --csc-padding: 1rem;
    --csc-radius: 0.5rem;
    --csc-aspect-ratio: 1;
    --csc-card-transition-duration: 0.3s;
    --csc-card-transition-delay: 0.15s;
    --csc-close-button-size: 2rem;
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--csc-aspect-ratio);
    border-radius: var(--csc-radius);
}
@media (min-width: 1024px) {
    .color-swatch-card {
        --csc-radius: 1.5rem;
        --csc-padding: 1.5rem;
    }
}
.color-swatch-card__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-swatch-card-bg);
    border-radius: var(--csc-radius);
    padding: var(--csc-padding);
    cursor: pointer;
}
@media (min-width: 1024px) {
    .color-swatch-card__inner {
        cursor: default;
    }
    .color-swatch-card__inner:has(.color-swatch-card__discover-link) {
        cursor: pointer;
    }
}
.color-swatch-card--white .color-swatch-card__inner {
    border: 1.5px solid var(--theme-border-secondary);
}
.color-swatch-card:has(.color-swatch-card__discover-link:focus-visible),
.color-swatch-card:has(.color-swatch-card__trigger:focus-visible),
.color-swatch-card:focus-visible {
    outline: 0.125rem solid var(--theme-focus-primary);
    outline-offset: 0.25rem;
}
.color-swatch-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    transition: opacity 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
.color-swatch-card__trigger {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.color-swatch-card__trigger:focus, .color-swatch-card__trigger:focus-visible {
    outline: none;
    box-shadow: none;
}
@media (min-width: 1024px) {
    .color-swatch-card__trigger {
        display: none;
    }
}
.color-swatch-card[data-state="open"] .color-swatch-card__trigger {
    display: none;
}
.color-swatch-card__discover-link {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
}
.color-swatch-card__discover-link:focus, .color-swatch-card__discover-link:focus-visible {
    outline: none;
    box-shadow: none;
}
@media (min-width: 1024px) {
    .color-swatch-card__discover-link {
        display: block;
    }
}
.color-swatch-card__header-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.color-swatch-card__name {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--theme-text-primary);
    margin: 0;
    overflow-wrap: break-word;
}
.color-swatch-card--small .color-swatch-card__name {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}
.color-swatch-card__code {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--theme-text-primary);
    margin: 0;
}
.color-swatch-card__close {
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.75);
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--csc-card-transition-delay);
}
.color-swatch-card[data-state="closed"] .color-swatch-card__close {
    margin-left: calc(var(--csc-close-button-size) * -1);
}
/* This close button is a .button.tertiary, so its outline is normally owned
   by the real Button component's layered `@layer foundation` rules (see
   assets/styles/styles.css .button:focus:not(:focus-visible) / .button.tertiary
   :focus-visible). On the real production page those rules load alongside
   Bootstrap, whose Reboot sets an unlayered `button:focus{outline:5px auto
   -webkit-focus-ring-color}` — unlayered CSS always beats layered CSS
   regardless of specificity, so Bootstrap's default ring wins on every click,
   not just keyboard focus. Redeclared here (this file is intentionally
   unlayered, like the .container override above) so it reliably wins over
   Bootstrap by specificity within the same, unlayered cascade origin. */
.color-swatch-card__close:focus:not(:focus-visible) {
    outline: none;
}
.color-swatch-card__close:focus-visible {
    outline: 0.125rem solid var(--theme-focus-primary);
    outline-offset: 0.5rem;
}
.color-swatch-card__cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-duration: var(--csc-card-transition-duration);
}
.color-swatch-card__cta-row {
    display: flex;
    gap: 0.5rem;
}
.color-swatch-card__cta-row > .button,
.color-swatch-card__cta-row > .visualize-button {
    flex: 1 1 50%;
    min-width: 0;
}
@media (min-width: 1024px) {
    .color-swatch-card__cta-row {
        display: none;
    }
}
@media (min-width: 1024px) {
    .color-swatch-card__cta .add-to-project-button {
        display: none;
    }
}
.color-swatch-card__cta-helpers {
    display: none;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
@media (min-width: 1024px) {
    .color-swatch-card__cta-helpers {
        display: flex;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition-duration: var(--csc-card-transition-duration);
    }
}
.color-swatch-card--link-only .color-swatch-card__discover-link {
    display: block;
}
.color-swatch-card--content-hidden .color-swatch-card__close,
.color-swatch-card--content-hidden .color-swatch-card__cta {
    opacity: 0;
    transition: none;
}
.color-swatch-card[data-state="open"] {
    max-height: 100%;
}
@media (max-width: 1023px) {
    .color-swatch-card[data-state="open"] {
        --csc-radius: 1rem;
    }
}
.color-swatch-card[data-state="open"] .color-swatch-card__cta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.color-swatch-card[data-state="open"] .color-swatch-card__close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    width: var(--csc-close-button-size);
    height: var(--csc-close-button-size);
}
@media (min-width: 1024px) {
    .color-swatch-card:hover .color-swatch-card__cta-helpers,
    .color-swatch-card--hovered .color-swatch-card__cta-helpers,
    .color-swatch-card:focus-within .color-swatch-card__cta-helpers {
        opacity: 1;
        pointer-events: auto;
    }
    .color-swatch-card:focus-within .color-swatch-card__cta-helpers {
        transition-duration: 0ms;
    }
}
@media (prefers-reduced-motion: reduce) {
    .color-swatch-card__cta, .color-swatch-card__cta-helpers, .color-swatch-card__close, .color-swatch-card__header {
        transition-duration: 0ms;
        transition-delay: 0ms;
    }
}
@media (min-width: 1024px) {
    .color-swatch-card--medium {
        --csc-padding: 1rem;
        --csc-radius: 0.5rem;
    }
}
.color-swatch-card--small {
    --csc-padding: 0.5rem;
    --csc-radius: 0.5rem;
}
@media (max-width: 1023px) {
    .color-swatch-card--small[data-state="open"] {
        --csc-padding: 1rem;
        --csc-radius: 1rem;
    }
    /* .color-swatch-card__header { 
      display: block;
    } */
}
@media (min-width: 1024px) {
    .color-swatch-card--small {
        --csc-padding: 1rem;
        --csc-radius: 0.5rem;
    }
}

/* Hover-revealed helper icons need to work on any card color, and the
   add-to-project icon must never show a filled pill. */
.visualize-button--icon .icon,
.color-swatch-card__cta-helpers .add-to-project-button--icon .icon {
    --icon-color: var(--theme-interactive-tertiary-icon);
}
.add-to-project-button--icon .icon-only {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* add-to-project-button — full port (was missing entirely; only this
   project's own --icon-variant additions from an earlier fix existed). */
.add-to-project-button {
    display: inline-flex;
}
.add-to-project-button .button {
    border-radius: 9999px;
    transition: background-color 0.45s cubic-bezier(0.5, 0, 0, 1), transform 0.45s cubic-bezier(0.5, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
    .add-to-project-button .button {
        transition: none;
    }
}
/* On dev.behr.ca the "Add to project" plus icon is missing entirely from
   .room-carousel__editorial's full-text button (and any other non-icon-only
   usage) — same root cause already fixed once in this file for the tooltip
   trigger icons: the mask-image .icon span has no intrinsic size, so once
   some ancestor's button-content collapses (display:contents or similar) it
   sizes to 0 and never gets flex-shrink:0's floor. Pin the size explicitly
   instead of relying on the --icon-width/--icon-size fallback chain, and
   !important to win regardless of whatever wins that cascade on production. */
.add-to-project-button .button .icon {
    flex-shrink: 0;
    width: 1rem !important;
    height: 1rem !important;
}
/* Force a square, uniform hit box on both cta-helpers icon buttons. On
   dev.behr.ca some other stylesheet's button/size rule wins the cascade
   against .button.icon-only.medium for this specific button (not
   reproducible locally), leaving it with a non-square padding — DevTools
   showed a 24x40 content box with 5px top/bottom but 30px left/right
   padding. That pushes the "+" icon well away from the true right edge
   while the button's own (correctly flush) box hides the discrepancy,
   so it reads as "not aligned with the eye icon". !important guards
   against whatever wins that cascade on production, same as the
   .container fix above. */
.color-swatch-card__cta-helpers .visualize-button__link,
.color-swatch-card__cta-helpers .add-to-project-button__btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.75rem !important;
}
.add-to-project-button--icon .add-to-project-button__btn {
    position: relative;
}
.add-to-project-button--icon .add-to-project-button__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 6rem;
}
.add-to-project-button--icon .add-to-project-button__btn.focus,
.add-to-project-button--icon .add-to-project-button__btn:focus-visible {
    outline: none;
}
.add-to-project-button--icon .add-to-project-button__btn.focus::before,
.add-to-project-button--icon .add-to-project-button__btn:focus-visible::before {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}
.add-to-project-button__text-wrap {
    display: grid;
    overflow: hidden;
    padding-block-end: 0.15em;
    margin-block-end: -0.15em;
}
.add-to-project-button__text--default,
.add-to-project-button__text--confirmed {
    grid-area: 1/1;
    white-space: nowrap;
}
.add-to-project-button__text--default {
    transition: transform 0.35s 0.35s cubic-bezier(0.5, 0, 0, 1), opacity 0.35s 0.35s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(0);
    opacity: 1;
}
.add-to-project-button--confirmed .add-to-project-button__text--default {
    transition: transform 0.35s cubic-bezier(0.5, 0, 0, 1), opacity 0.35s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(100%);
    opacity: 0;
}
.add-to-project-button__text--confirmed {
    transition: transform 0.35s cubic-bezier(0.5, 0, 0, 1), opacity 0.35s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(-100%);
    opacity: 0;
}
.add-to-project-button--confirmed .add-to-project-button__text--confirmed {
    transition: transform 0.35s 0.35s cubic-bezier(0.5, 0, 0, 1), opacity 0.35s 0.35s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(0);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .add-to-project-button__text--default,
    .add-to-project-button--confirmed .add-to-project-button__text--default,
    .add-to-project-button__text--confirmed,
    .add-to-project-button--confirmed .add-to-project-button__text--confirmed {
        transition: none;
    }
}
.add-to-project-button__live {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 767px) {
    .add-to-project-button--fw-sm {
        width: 100%;
    }
    .add-to-project-button--fw-sm .add-to-project-button__btn {
        width: 100%;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .add-to-project-button--fw-md {
        width: 100%;
    }
    .add-to-project-button--fw-md .add-to-project-button__btn {
        width: 100%;
        justify-content: center;
    }
}

/* add-to-project-button--expandable — premium-color-hero's circular CTA
   (was missing entirely; had no CSS at all, so it rendered as a plain
   text+icon pill instead of a circle). Collapses to a bare icon circle at
   rest — width pinned equal to height so border-radius: 9999px (from the
   base .add-to-project-button .button rule) draws a true circle instead of
   a pill — and expands to reveal the label on hover/focus. */
.add-to-project-button--expandable .add-to-project-button__btn {
    width: 3.5rem;
    padding: 1rem;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.add-to-project-button--expandable .add-to-project-button__text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), margin-right 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.add-to-project-button--expandable .add-to-project-button__btn:hover,
.add-to-project-button--expandable .add-to-project-button__btn:focus-within,
.add-to-project-button--expandable .add-to-project-button__btn.focus {
    width: auto;
    padding: 1rem 1.5rem;
}
.add-to-project-button--expandable .add-to-project-button__btn:hover .add-to-project-button__text,
.add-to-project-button--expandable .add-to-project-button__btn:focus-within .add-to-project-button__text,
.add-to-project-button--expandable .add-to-project-button__btn.focus .add-to-project-button__text {
    max-width: 20rem;
    opacity: 1;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .add-to-project-button--expandable .add-to-project-button__btn,
    .add-to-project-button--expandable .add-to-project-button__text {
        transition: none;
    }
}

/* visualize-button — full port (was missing entirely). */
.visualize-button {
    display: inline-flex;
}
.visualize-button--icon .visualize-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: auto;
    padding: 0;
}
.visualize-button--icon .visualize-button__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 6rem;
}
.visualize-button--icon .visualize-button__link.focus,
.visualize-button--icon .visualize-button__link:focus-visible {
    outline: none;
}
.visualize-button--icon .visualize-button__link.focus::before,
.visualize-button--icon .visualize-button__link:focus-visible::before {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}

/* Hover/focus label for the two cta-helpers icon-only buttons — a plain text
   hint, not an interactive tooltip (no open/close state, no ARIA popup
   semantics; aria-label already names each button for screen readers). Uses
   `content: attr(data-tooltip)` instead of the native `title` attribute so
   the wording lives once in the markup with no risk of the OS's own default
   title tooltip (unstyleable, wrong position) appearing alongside it. */
.visualize-button--icon .visualize-button__link::after,
.add-to-project-button--icon .add-to-project-button__btn::after {
    content: attr(data-tooltip);
    position: absolute;
    /* Touches the icon (bottom: 100%, no gap or margin — margin isn't part
       of the hoverable box, so it would recreate the dead zone) so the
       pointer never crosses a gap between the icon and the tooltip while
       moving from one to the other. The generous padding is what makes it
       still read as "floating above" the icon rather than stuck to it. */
    bottom: 100%;
    z-index: 3;
    white-space: nowrap;
    padding: 0.75rem 1.25rem;
    border-radius: 6rem;
    background-color: #000000;
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0;
    /* No `pointer-events: none` here (unlike the other hidden-by-default
       overlays in this file) — `visibility: hidden` already keeps it out of
       hit-testing while hidden, and once visible the pill needs to stay
       hit-testable itself so hovering onto it (from the icon, through the
       touching padding strip above) keeps :hover — and therefore the
       tooltip — active. Otherwise the card's full-size discover-link
       overlay (z-index: 1, `inset: 0`) intercepts the pointer first, the
       icon's :hover drops, and the tooltip closes before the pointer
       reaches it. */
    visibility: hidden;
    transition: opacity 0.15s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Anchored to the icon's own edge (not centered) so the pill grows away from
   the nearest card edge instead of overflowing past it: the eye icon sits at
   the card's left edge (cta-helpers is `justify-content: space-between`), so
   its tooltip grows rightward; the plus icon sits at the right edge, so its
   tooltip grows leftward. The card itself clips overflow, so a centered pill
   was getting cut off against whichever edge the icon was closest to. */
.visualize-button--icon .visualize-button__link::after {
    left: 0;
}
.add-to-project-button--icon .add-to-project-button__btn::after {
    right: 0;
}
@media (hover: hover) and (pointer: fine) {
    .visualize-button--icon .visualize-button__link:hover::after,
    .add-to-project-button--icon .add-to-project-button__btn:hover::after {
        opacity: 1;
        visibility: visible;
        cursor: default;
    }
}
.visualize-button--icon .visualize-button__link:focus-visible::after,
.add-to-project-button--icon .add-to-project-button__btn:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
    .visualize-button--icon .visualize-button__link::after,
    .add-to-project-button--icon .add-to-project-button__btn::after {
        transition: none;
    }
}
@media (max-width: 767px) {
    .visualize-button--fw-sm {
        width: 100%;
    }
    .visualize-button--fw-sm .visualize-button__link {
        width: 100%;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .visualize-button--fw-md {
        width: 100%;
    }
    .visualize-button--fw-md .visualize-button__link {
        width: 100%;
        justify-content: center;
    }
}

/* sheet — filter drawer overlay primitive, slides in from the right. Drag-
   to-close gesture not ported (see file-top note); backdrop click / close
   button / Escape key all work. */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}
.sheet[data-state="closed"] {
    visibility: hidden;
    transition: visibility 0s 0.3s;
}
@media (prefers-reduced-motion: reduce) {
    .sheet[data-state="closed"] {
        transition: none;
    }
}
.sheet[data-state="open"] {
    pointer-events: auto;
}
.sheet__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.54);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sheet[data-state="open"] .sheet__backdrop {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .sheet__backdrop {
        transition: none;
    }
}
.sheet__panel {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--theme-surface-secondary);
    box-shadow: 0px 16px 16px 0px rgba(29, 33, 48, 0.1), 0px 10px 10px 0px rgba(29, 33, 48, 0.08), 0px 6px 6px 0px rgba(29, 33, 48, 0.06), 0px 3px 3px 0px rgba(29, 33, 48, 0.04), 0px 1px 1px 0px rgba(29, 33, 48, 0.02);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1024px) {
    .sheet__panel {
        width: 375px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sheet__panel {
        transition: none;
    }
}
.sheet[data-state="open"] .sheet__panel {
    transform: translate(0, 0);
}
.sheet__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
}
.sheet__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}
.sheet__close-btn {
    flex-shrink: 0;
}
.sheet__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem;
}
.sheet__footer {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
}

/* filter-tray — content composed inside the sheet. */
.filter-tray__content {
    display: flex;
    flex-direction: column;
    padding-top: 0.375rem;
}
.filter-tray__section {
    border-bottom: 1px solid var(--theme-border-secondary);
}
.filter-tray__section .accordion {
    padding: 1.5rem 0;
}
@media (min-width: 768px) {
    .filter-tray__section .accordion {
        padding: 2rem 0;
    }
}
.filter-tray__section .accordion__trigger {
    padding: 0;
    min-height: 0;
}
.filter-tray__section .accordion__body-inner {
    padding-bottom: 0.125rem;
}
.filter-tray__applied {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--theme-border-secondary);
}
.filter-tray__applied-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.filter-tray__fieldset {
    border: none;
    padding: 1rem 0 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 0.75rem;
}
.filter-tray__disclaimer {
    width: 100%;
    margin: 0;
    color: var(--theme-text-secondary);
}
.filter-tray__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.filter-tray__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.filter-tray__footer .button {
    flex: 1 1 auto;
}
.filter-tray__apply-wrapper {
    flex: 1 1 auto;
}
.filter-tray__apply-wrapper .button {
    width: 100%;
}
.filter-tray__clear-all {
    align-self: center;
}

/* filter-option — checkbox chip used inside each filter-tray section. */
.filter-option {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.filter-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
}
.filter-option label {
    position: relative;
    z-index: 1;
}
.filter-option--chip {
    flex-shrink: 0;
}
.filter-option--chip label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    white-space: nowrap;
    border: 1.5px solid var(--theme-border-secondary);
    border-radius: 0.5rem;
    background-color: var(--theme-surface-secondary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    transition: background-color 0.15s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (prefers-reduced-motion: reduce) {
    .filter-option--chip label {
        transition: none;
    }
}
.filter-option--chip input:not(:disabled) + label:hover {
    border-color: var(--theme-border-primary);
}
.filter-option--chip input:checked + label {
    background-color: var(--theme-surface-secondary);
    border-color: var(--theme-border-primary);
}
.filter-option--chip input:focus-visible + label {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}
.filter-option--chip input:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}
.filter-option--chip .filter-option__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}
.filter-option--chip .filter-option__swatch {
    border-radius: 50%;
    background-color: var(--icon-color, transparent);
    border: 1.5px solid transparent;
}
.filter-option--chip .filter-option__swatch--bordered {
    border-color: var(--theme-border-secondary);
}

/* filter-option-applied — removable chip in the "Applied Filters" strip. */
.filter-option-applied {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--theme-border-secondary);
    border-radius: 0.5rem;
    background-color: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    transition: background-color 0.15s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (prefers-reduced-motion: reduce) {
    .filter-option-applied {
        transition: none;
    }
}
.filter-option-applied:hover {
    background-color: var(--theme-surface-secondary);
    border-color: var(--theme-border-primary);
}
.filter-option-applied:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
    background-color: var(--theme-surface-secondary);
    border-color: var(--theme-border-primary);
}
.filter-option-applied__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}
.filter-option-applied__label {
    white-space: nowrap;
}

.color-collection-container .color-swatch-card__cta-row > .button {
    flex: 1 1 50%;
    min-width: 0;
}

/* 2027 Color of the Year - Standalone Page Overrides */

:where(html.coty-2027-page, body.coty-2027-page) {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

:where(body.coty-2027-page) {
    overflow: auto !important;
}


/* Ensure the section fills width */
.section {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
}

/* =============================================================
   layout.css  —  base styles (trimmed for standalone visualizer)
   ============================================================= */

/* ----- Reset / base ----- */
:where(body.coty-2027-page) {
    margin: 0;
    padding: 0;
    font: 14px/20px proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    color: #333333;
    overflow: hidden;
}

:where(html.coty-2027-page),
:where(body.coty-2027-page),
:where(body.coty-2027-page) a {
    -webkit-tap-highlight-color: transparent;
}

:where(body.coty-2027-page) img {
    border: 0;
    padding: 0;
    border-style: none;
}

:where(body.coty-2027-page) a {
    font: 14px/24px proxima-nova, sans-serif;
    font-weight: normal;
    font-style: normal;
}
:where(body.coty-2027-page) a:link    { color: #333333; text-decoration: none; }
:where(body.coty-2027-page) a:active  { color: #333333; text-decoration: none; outline: none; }
:where(body.coty-2027-page) a:visited { color: #333333; text-decoration: none; }

.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}


/* ----- Typography ----- */
:where(body.coty-2027-page) h2 {
    position: relative;
    width: 100%;
    font: 32px/46px proxima-nova, sans-serif;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #333333;
    margin: 20px 0;
    text-transform: uppercase;
}
:where(body.coty-2027-page) h2 span { font-weight: 300; }

:where(body.coty-2027-page) h3 {
    position: relative;
    width: 100%;
    font: 18px/24px proxima-nova, sans-serif;
    letter-spacing: 1.2px;
    font-weight: 600;
    color: #333333;
    margin: 25px 0;
    text-transform: uppercase;
}

:where(body.coty-2027-page) p {
    font: 14px/18px proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 25px 0;
}

@media screen and (max-width: 1100px) {
    :where(body.coty-2027-page) h2 { font-size: 26px; line-height: 36px; }
}

@media screen and (max-width: 800px) {
    :where(body.coty-2027-page) h2 { font-size: 20px; line-height: 28px; margin: 10px 0; }
    :where(body.coty-2027-page) h3 { font: 14px/20px proxima-nova, sans-serif; font-weight: 500; margin: 15px 0; }
}


/* ----- Buttons ----- */
body.isDesktop a:hover { color: #666666; text-decoration: none; }


/* ----- Layout containers ----- */
.modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            position: relative
        }



        .modal-panel {
            position: absolute;
            top: 0;
            left: 0;
            max-width: 100vw;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .modal-overlay.is-open {
            display: flex;
            max-width: 378px;
            justify-content: center;
            width: 100%;
            margin: auto;
        }

        .modal-overlay.is-open .modal-panel {
            top: calc(10 * 1.5rem);
            left: calc(-1 * 1.5rem);
            max-width: calc(100vw - 0.5rem * 2);
            padding: 1.5rem;
            padding-bottom: 0;
            background: #ffffff;
            border-radius: 0.5rem;
            color: #000000;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            column-gap: 0.5rem;
            width: calc(100% + 2 * 1.5rem);
            transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
            border: 0px;
            padding: 0rem 1rem
        }

        .modal-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            line-height: 0;
            color: #1a1a1a;
        }

        .modal-close svg {
            width: 20px;
            height: 20px;
        }

        .modal-body section+section {
            margin-top: 24px;
        }

        .infoModalTitle {
            font-family: var(--font-primary);
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0;
            color: inherit;
        }

        .tooltip__item {
            display: grid;
            grid-template-columns: subgrid;
            align-items: flex-start;
            grid-column: 1 / -1;
            gap: 0.5rem;
        }

        .tooltip__item-title {
            font-family: var(--font-primary);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0;
            grid-column: 1 / -1;
            align-self: center;
        }

        .tooltip__item-text {
            font-family: var(--font-primary);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: 0;
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            min-height: 2rem;
        }

        .tooltip__body-items {
            grid-column: 1 / -1;
            overflow: hidden;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: 2rem;
        }

        .infoModalTitle {
            font-family: var(--font-primary);
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0;
            color: inherit;
            grid-column: 1/3;
        }

/* ============================================================= */
/* Room Carousel — dependencies: Stepper element, Carousel + StickyGrid components */
/* ============================================================= */

.stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.45s cubic-bezier(0.5, 0, 0, 1), color 0.45s cubic-bezier(0.5, 0, 0, 1), border-color 0.45s cubic-bezier(0.5, 0, 0, 1);
}
.stepper::before, .stepper::after {
  content: "";
  position: absolute;
  top: 50%;
}
.stepper::before {
  width: 10px;
  height: 10px;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
}
.stepper::after {
  width: 14px;
  height: 2px;
  background: currentcolor;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stepper:focus-visible, .stepper.focus {
  outline: 0.125rem solid var(--theme-focus-primary);
  outline-offset: 0.25rem;
}
.stepper:focus:not(:focus-visible) {
  outline: none;
}
.stepper--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.stepper--right::before {
  left: calc(50% - 7px);
  transform: translateY(-50%) rotate(-45deg);
}
.stepper--right::after {
  left: calc(50% - 8px);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right;
}
@media (hover: hover) and (pointer: fine) {
  .stepper--right:hover:not(.stepper--disabled)::before {
    transform: translate(3px, -50%) rotate(-45deg);
  }
  .stepper--right:hover:not(.stepper--disabled)::after {
    transform: translateY(-50%) scaleX(1);
    transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
  }
}
.stepper--right.hover::before {
  transform: translate(3px, -50%) rotate(-45deg);
}
.stepper--right.hover::after {
  transform: translateY(-50%) scaleX(1);
  transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
}

.stepper--left::before {
  right: calc(50% - 7px);
  transform: translateY(-50%) rotate(135deg);
}
.stepper--left::after {
  right: calc(50% - 8px);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
}
@media (hover: hover) and (pointer: fine) {
  .stepper--left:hover:not(.stepper--disabled)::before {
    transform: translate(-3px, -50%) rotate(135deg);
  }
  .stepper--left:hover:not(.stepper--disabled)::after {
    transform: translateY(-50%) scaleX(1);
    transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
  }
}
.stepper--left.hover::before {
  transform: translate(-3px, -50%) rotate(135deg);
}
.stepper--left.hover::after {
  transform: translateY(-50%) scaleX(1);
  transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
}

.stepper--large {
  min-width: 3.5rem;
  min-height: 3.5rem;
}

.stepper--small {
  min-width: 2.5rem;
  min-height: 2.5rem;
}
.stepper--small::before {
  width: 7px;
  height: 7px;
  border-width: 0 2px 2px 0;
}
.stepper--small::after {
  width: 10px;
  height: 2px;
}
.stepper--small.stepper--right::before {
  left: calc(50% - 5px);
}
.stepper--small.stepper--right::after {
  left: calc(50% - 6px);
}
.stepper--small.stepper--left::before {
  right: calc(50% - 5px);
}
.stepper--small.stepper--left::after {
  right: calc(50% - 6px);
}

@media (prefers-reduced-motion: reduce) {
  .stepper::before,
  .stepper::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  .stepper {
    border-color: ButtonText;
    color: ButtonText;
  }
  .stepper:focus-visible, .stepper.focus {
    outline: 0.125rem solid Highlight;
    outline-offset: 0.25rem;
  }
  .stepper--disabled {
    border-color: GrayText;
    color: GrayText;
  }
}

/* Bootstrap 4 (loaded globally for legacy modal/tooltip markup) defines its own
   .col-4/.col-md-8/.col-lg-* classes with a conflicting box model (max-width/flex/
   padding). Those collide with the design system's same-named .grid > .col-* grid
   utility used by StickyGrid and any bare .grid container (e.g. Color Summary's
   .color-summary__columns.grid), capping column widths. Neutralize Bootstrap's box
   model so grid-column placement is the only thing sizing these items — scoped to
   any .grid, not just .sticky-grid, since the collision isn't sticky-grid-specific. */
.grid > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: initial;
  padding-right: 0;
  padding-left: 0;
}

/* .icon's mask-image (behr.com/styles/styles.css) reads --mask-image: url(...).
   Relative url()s in a custom property resolve against the stylesheet that
   substitutes the var(), not where the property was set — so that mask-image
   resolves against behr.com, not this project. Redeclaring it here (this file's
   own origin) points it at this project's own /binaries icons instead; every
   other .icon property is untouched and still comes from the original rule. */
.icon {
  mask-image: var(--mask-image);
  -webkit-mask-image: var(--mask-image);
}

.carousel {
    --carousel-gap: 0.5rem;
    --carousel-controls-padding-top: 1.5rem;
    --carousel-track-radius: 0;
    position: relative;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .carousel {
      --carousel-controls-padding-top: 2rem;
    }
  }
  .carousel--empty {
    display: none;
  }
  .carousel--radius-50 {
    --carousel-track-radius: 0.25rem;
  }
  .carousel--radius-100 {
    --carousel-track-radius: 0.5rem;
  }
  .carousel--radius-200 {
    --carousel-track-radius: 1rem;
  }
  .carousel--radius-300 {
    --carousel-track-radius: 1.5rem;
  }
  .carousel--radius-400 {
    --carousel-track-radius: 2rem;
  }
  .carousel--radius-600 {
    --carousel-track-radius: 3rem;
  }
  .carousel--radius-800 {
    --carousel-track-radius: 4rem;
  }
  .carousel--radius-1000 {
    --carousel-track-radius: 5rem;
  }
  .carousel--radius-1200 {
    --carousel-track-radius: 6rem;
  }
  .carousel--radius-full {
    --carousel-track-radius: 9999px;
  }
  .carousel__track-wrapper {
    position: relative;
    width: 100%;
  }
  .carousel:not(.carousel--peek-left, .carousel--peek-right, .carousel--peek-both) .carousel__track-wrapper:has(.carousel__track:focus-visible)::after {
    content: "";
    position: absolute;
    inset: -0.375rem;
    z-index: 5;
    pointer-events: none;
    outline: none;
    box-shadow: inset 0 0 0 0.125rem var(--theme-focus-primary);
    border-radius: var(--carousel-track-radius, 1rem);
  }
  .carousel--peek-right .carousel__track-wrapper {
    clip-path: inset(-100vh -100vw -100vh -0.375rem);
  }
  .carousel--peek-left .carousel__track-wrapper {
    clip-path: inset(-100vh -0.375rem -100vh -100vw);
  }
  .carousel__track-clip {
    overflow: hidden;
    border-radius: var(--carousel-track-radius, 0);
  }
  .carousel__track-wrapper:has(.carousel__track:focus-visible) .carousel__track-clip {
    border-radius: var(--carousel-track-radius, 1rem);
  }
  .carousel--peek-both .carousel__track-clip, .carousel--peek-left .carousel__track-clip, .carousel--peek-right .carousel__track-clip {
    overflow: visible;
  }
  .carousel__track {
    display: flex;
    gap: var(--carousel-gap);
    list-style: none;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1);
  }
  .carousel__track--animating {
    will-change: transform;
  }
  .carousel__track {
    touch-action: pan-y;
  }
  .carousel__track:focus-visible {
    outline: none;
  }
  .carousel--peek-left .carousel__track:focus-visible::after, .carousel--peek-right .carousel__track:focus-visible::after, .carousel--peek-both .carousel__track:focus-visible::after {
    content: "";
    position: absolute;
    inset: -0.375rem;
    z-index: 5;
    pointer-events: none;
    outline: none;
    box-shadow: inset 0 0 0 0.125rem var(--theme-focus-primary);
    border-radius: var(--carousel-track-radius, 1rem);
  }
  .carousel__track:focus:not(:focus-visible) {
    outline: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .carousel__track {
      transition-duration: 0ms;
    }
  }
  .carousel--peek-right .carousel__track, .carousel--peek-both .carousel__track, .carousel--peek-left .carousel__track {
    width: max-content;
  }
  .carousel__slide {
    flex: 0 0 var(--carousel-slide-width, auto);
    min-width: 0;
  }
  .carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: var(--carousel-controls-padding-top);
  }
  .carousel__steppers {
    display: flex;
    gap: 1rem;
  }
  .carousel__caption-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
  }
  .carousel__caption {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .carousel__pagination {
    color: var(--theme-text-primary);
    user-select: none;
  }
  @media (forced-colors: active) {
    .carousel__pagination {
      color: CanvasText;
    }
  }
  .carousel__pagination-visual {
    display: inline;
  }
  .carousel__pagination-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .carousel__slide-sr {
    display: none;
  }
  @media (pointer: coarse) {
    .carousel__slide-sr {
      display: block;
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }


.sticky-grid {
    --sticky-grid-sticky-top: max(6.5rem, calc(var(--header-visible-height) + 2rem));
    --sticky-grid-stacked-gap: 4rem;
    position: relative;
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .sticky-grid {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  .sticky-grid {
    padding-block: 4rem;
    row-gap: var(--sticky-grid-stacked-gap);
    align-items: start;
  }
  @media (min-width: 1024px) {
    .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .sticky-grid:has(.sticky-grid__sticky-inner--mobile) {
    --sticky-grid-sticky-top: max(5.5rem, calc(var(--header-visible-height) + 1.5rem));
    padding-block-start: 0;
    row-gap: 0;
  }
  @media (min-width: 1024px) {
    .sticky-grid:has(.sticky-grid__sticky-inner--mobile) {
      padding-block-start: 6.5rem;
    }
  }
  .sticky-grid--no-container {
    padding-inline: 0;
    width: 100%;
  }
  .sticky-grid__sentinel {
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
  }
  .sticky-grid__sentinel--s2 {
    height: 1px;
    pointer-events: none;
    visibility: hidden;
  }
  @media (min-width: 1024px) {
    .sticky-grid__sticky-inner {
      position: sticky;
      top: var(--sticky-grid-sticky-top);
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid__sticky-inner--no-sticky {
      position: static;
      top: unset;
    }
  }
  .sticky-grid__section--1 {
    position: relative;
    height: 100%;
  }
  @media (max-width: 1023px) {
    .sticky-grid__section--1:has(.sticky-grid__sticky-inner--mobile) {
      position: sticky;
      top: var(--header-visible-height);
      height: auto;
      z-index: 20;
      background-color: var(--theme-surface-primary);
      padding-block: 1.5rem 1rem;
      transition: padding-block 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    }
  }
  .color-swatch-card__inner {
      text-wrap-mode: nowrap;
    }
  @media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .sticky-grid__section--1:has(.sticky-grid__sticky-inner--mobile) {
      transition: none;
    }
  }
  @media (min-width: 1024px) {
    .sticky-grid__section--2 {
      grid-column: var(--sticky-grid-section2-start, 5)/span var(--sticky-grid-section2-span, 8);
    }
  }
  @media (max-width: 1023px) {
    .sticky-grid--clip-section-2 .sticky-grid__section--2 {
      overflow: clip;
    }
  }


/* ============================================================= */
/* Shared typography fix — full headline-* / body-* / button-* scale */
/* ============================================================= */

/* The legacy standalone-page h2/h3/p overrides above (uppercase, 0.15em tracking,
   14px body text, #333 color) are bare element selectors that clobber the real
   .headline-* / .body-* typography utility classes used by every real block —
   same class names collide, but the legacy rules match on the plain h1/h2/h3/p
   tag regardless of which utility class rides along with it. Bootstrap piles on
   the same problem for h1/h4-h6 (its reboot sets fixed rem sizes + font-weight 500
   per heading tag, unlayered). Both beat the real classes (layered, in
   behr.com/styles/styles.css) purely because unlayered CSS always wins over
   layered CSS regardless of specificity.
   Fixing this one class at a time as each new section surfaces it (headline-3,
   then headline-4, then body-medium, ...) kept recurring, so this restores the
   FULL scale up front instead — keyed off the utility classes themselves, not
   any one block, so it applies wherever they're used. Values from
   behr.com/styles/styles.css. Deliberately omits color/margin: the real classes
   don't set those either — each block's own CSS (e.g. .testimonial__quote,
   .room-carousel p) sets margin, and color comes from the block's theme context.
   display-1/2/3 added when Color Summary's optional Premium heading (h2.display-2)
   surfaced the exact same h1-h6-vs-Bootstrap collision this section already
   documents for headline-*.
   Correction: every rule here now also sets `color: var(--theme-text-primary)` and
   `margin: 0`. Earlier revisions of this fix deliberately left color/margin out for
   classes beyond headline-3/4/body-medium, reasoning "the real classes don't set
   those either" — true in production, but wrong here: the *reason* this fix exists
   at all is that these utility classes ride on bare h1-h6/p tags that Bootstrap's
   or this file's own legacy rules target directly with an explicit `color`/`margin`.
   Inheriting from an ancestor's `color` only wins when nothing else sets `color` on
   the element itself — and here something always does. Color Summary's new
   h2.display-2 heading rendered as invisible dark-gray-on-olive until this was
   added, same bug class as every other fix in this section. */
.display-1 {
  font-family: var(--font-primary);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .display-1 { font-size: 7rem; }
}
.display-2 {
  font-family: var(--font-primary);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .display-2 { font-size: 5.5rem; }
}
.display-3 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .display-3 { font-size: 3rem; line-height: 1; }
}
.headline-1 {
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-1 { font-size: 4rem; }
}
.headline-2 {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-2 { font-size: 3rem; }
}
.headline-3 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-3 {
    font-size: 2.5rem;
    line-height: 1;
  }
}
.headline-4 {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-4 {
    font-size: 2rem;
    line-height: 1;
  }
}
.headline-4-bold {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-4-bold { font-size: 2rem; line-height: 1; }
}
.headline-5 {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
@media (min-width: 1024px) {
  .headline-5 { line-height: 1; }
}
.body-large, .body-large-semi-bold, .body-large-bold {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
.body-large { font-weight: 400; }
.body-large-semi-bold { font-weight: 600; }
.body-large-bold { font-weight: 700; }
.body-medium, .body-medium-semi-bold, .body-medium-bold {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
.body-medium { font-weight: 400; }
.body-medium-semi-bold { font-weight: 600; }
.body-medium-bold { font-weight: 700; }
.body-small, .body-small-semi-bold, .body-small-bold {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
.body-small { font-weight: 400; }
.body-small-semi-bold { font-weight: 600; }
.body-small-bold { font-weight: 700; }
.body-extra-small, .body-extra-small-semi-bold, .body-extra-small-bold {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text-primary);
  margin: 0;
}
.body-extra-small { font-weight: 400; }
.body-extra-small-semi-bold { font-weight: 600; }
.body-extra-small-bold { font-weight: 700; }
.button-medium {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.button-small {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* Two separate unlayered rules beat the real Button component's layered `.button {...}`
   font/color declarations, since unlayered CSS always wins over layered CSS regardless
   of specificity:
   - Bootstrap's `button, input, ... { font-size: inherit; line-height: inherit }` reboot
     inherits this file's legacy `body { font: 14px/20px ... }` size — hits every
     <button class="button">, e.g. Room Carousel's "Add to project".
   - Bootstrap's `a { background-color: transparent }` and this file's own legacy
     `a { font: 14px/24px ...; font-weight: normal }` / `a:link { color: #333333 }`
     hit anchor-tag CTAs the same way — only <a class="button">, e.g. Image Text's
     "Learn more", since <button> tags aren't <a> and don't match those rules.
   Restore the font spec for every `.button` (covers both tag types), and restore
   color/background-color for anchor CTAs specifically (button-tag CTAs already
   render those two correctly). */
.button {
  font-family: var(--font-primary);
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 4rem !important;
}
.stepper.button {
  padding: 0px !important;
}
a.button {
  color: var(--color);
  background-color: var(--background-color, transparent);
  text-decoration: none;
}

/* ============================================================= */
/* Room Carousel */
/* ============================================================= */

.room-carousel {
    background-color: var(--room-carousel-bg, transparent);
    color: var(--theme-text-primary);
    transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .room-carousel .sticky-grid {
    padding-block: 3rem;
  }
  @media (min-width: 1024px) {
    .room-carousel .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .room-carousel__editorial {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .room-carousel__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .room-carousel__cta-desktop {
    display: none;
  }
  @media (min-width: 1024px) {
    .room-carousel__cta-desktop {
      display: block;
    }
  }
  .room-carousel__viewer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .room-carousel__mobile-cta {
      display: none;
    }
  }
  .room-carousel__carousels {
    position: relative;
    --carousel-slide-width: 100%;
  }
  .room-carousel .carousel__slide picture {
    border-radius: 1rem;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .room-carousel .carousel__slide picture {
      border-radius: 1.5rem;
    }
  }
  .room-carousel .carousel__slide img {
    border-radius: 1.5rem;
    aspect-ratio: 2/3;
    object-fit: cover;
  }
  @media (min-width: 1024px) {
    .room-carousel .carousel__slide img {
      aspect-ratio: 3/2;
    }
  }
  .room-carousel__room-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
  }
  @media (min-width: 1024px) {
    .room-carousel__room-image {
      aspect-ratio: 3/2;
    }
  }
  .room-carousel__color-slide {
    position: relative;
  }
  @media (max-width: 1023px) {
    .room-carousel__color-slide:has(.color-swatch-card[data-state=open])::after {
      border: 2px solid var(--theme-border-primary);
      border-radius: 1.5rem;
      content: "";
      inset: 2px;
      pointer-events: none;
      position: absolute;
      z-index: 5;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-carousel.color-swatch,
    .room-carousel.color-swatch .color-swatch-card {
      transition: none;
    }
  }
  .room-carousel.color-swatch .sticky-grid {
    padding-block: 4rem;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch .sticky-grid {
      padding-block: 6.5rem;
    }
  }
  .room-carousel.color-swatch {
    --carousel-track-radius: 1rem;
  }
  .room-carousel.color-swatch .carousel__slide picture,
  .room-carousel.color-swatch .carousel__slide img {
    border-radius: 1rem;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch {
      --carousel-track-radius: 1.5rem;
    }
    .room-carousel.color-swatch .carousel__slide picture,
    .room-carousel.color-swatch .carousel__slide img {
      border-radius: 1.5rem;
    }
  }
  .room-carousel.color-swatch .room-carousel__swatch-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  @media (min-width: 1024px) {
    .room-carousel.color-swatch .room-carousel__swatch-wrapper .color-swatch-card {
      position: absolute;
      inset: auto;
      left: 1.5rem;
      bottom: 1.5rem;
      width: 12.9375rem;
      height: 12.9375rem;
    }
  }

/* ============================================================= */
/* Image Text */
/* ============================================================= */

.image-text {
  /* background-color: var(--theme-surface-primary); */
}
.image-text__inner {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: 100%;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .image-text__inner {
    padding-inline: 3rem;
  }
}
@media (min-width: 1024px) {
  .image-text__inner {
    max-width: 120rem;
    padding-inline: 5rem;
  }
}
.image-text__inner {
  --sticky-grid-sticky-top: var(--header-visible-height, 1.5rem);
}
.image-text__editorial {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .image-text__editorial {
    gap: 2rem;
  }
}
.image-text__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.image-text__eyebrow {
  color: var(--theme-text-primary);
}
.image-text__text-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.image-text__heading {
  margin: 0;
}
.image-text__description {
  margin: 0;
}
.image-text__cta {
  width: 100%;
}
@media (min-width: 1024px) {
  .image-text__cta {
    width: fit-content;
  }
}
.image-text__media {
  display: block;
}
.image-text__picture {
  display: block;
  aspect-ratio: 2/3;
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 1024px) {
  .image-text__picture {
    aspect-ratio: 3/2;
    border-radius: 1.5rem;
  }
}
.image-text__caption {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block-start: 1.5rem;
}
.image-text__caption-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
  overflow: hidden;
}
.image-text__caption-text {
  margin: 0;
  color: var(--theme-text-primary);
}

/* ============================================================= */
/* Fifty-Fifty — dependencies: SampleCard component */
/* ============================================================= */

.sample-card {
  background: var(--theme-surface-secondary);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .sample-card {
    border-radius: 1.5rem;
    padding: 6.5rem 2rem;
  }
}
 @media (max-width: 1023px) {
    .sample-card__header {
      margin-block-start: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .sample-card__header {
      align-items: flex-end;
      padding-inline: 1.5rem;
    }
  }
  @media (min-width: 1200px) {
    .sample-card__header {
      padding-inline: min(4.6875rem, 15%);
    }
  }
  @media (min-width: 1400px) {
    .sample-card__header {
      padding-inline: min(12.25rem, 25%);
    }
  }
.sample-card__header {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}
@media (max-width: 1023px) {
  .sample-card__header {
    margin-block-start: 1.5rem;
  }
}
.sample-card__inner {
  display: grid;
  flex: 1;
  gap: 1.5rem;
  grid-template-rows: 1fr auto auto;
}
.sample-card__image {
  display: flex;
  width: 100%;
}
.sample-card__cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .sample-card__cta-wrapper {
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .sample-card__cta-wrapper {
    padding-inline: min(4.6875rem, 15%);
  }
}
@media (min-width: 1400px) {
  .sample-card__cta-wrapper {
    padding-inline: min(12.25rem, 25%);
  }
}
.sample-card__cta {
  flex: 1;
}
@media (min-width: 1024px) {
  .sample-card__cta:only-child {
    min-width: 50%;
    flex: unset;
  }
}
.sample-card__cta:hover,
.sample-card__cta:focus-visible,
.sample-card__cta.focus {
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
  border-width: 2px;
  text-decoration: none;
}

/* ============================================================= */
/* Fifty-Fifty */
/* ============================================================= */

.fifty-fifty {
  background: var(--theme-surface-primary);
  padding-block: 4rem;
}
@media (min-width: 1024px) {
  .fifty-fifty {
    padding-block: 6.5rem;
  }
}
.fifty-fifty__inner {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: 100%;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .fifty-fifty__inner {
    padding-inline: 3rem;
  }
}
@media (min-width: 1024px) {
  .fifty-fifty__inner {
    max-width: 120rem;
    padding-inline: 5rem;
  }
}
.fifty-fifty__header {
  display: flex;
  flex-direction: column;
  padding-block-end: 4rem;
  gap: 1rem;
  max-width: 550px;
}
.fifty-fifty__cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .fifty-fifty__cards {
    flex-direction: row;
  }
}

/* ============================================================= */
/* Testimonial */
/* ============================================================= */

/* The real testimonial.js resolves --testimonial-bg from page color metadata at
   build time; this static HTML has no such step, so hardcode it to the page's
   color (T27-01 "Grounded", #504E40 — the same value already hardcoded for PCH
   Hero, room-carousel's default, and myColorStorage elsewhere in this file). */
/* This whole block is forced with !important. Reason: on dev.behr.ca, .testimonial-
   section's width/padding/margin and its quote's typography lose to some other,
   unscoped/higher-priority stylesheet that's shared across other page types (can't
   be edited/removed since other pages depend on it) — same conflict class as the
   quote h1 fix below. Every value here is pinned so this section renders correctly
   end-to-end regardless of what else is loaded on the host page. */
.testimonial-section {
  background-color: #504E40 !important;
  color: #fff !important;
  width: 100% !important;
  padding-block: 4rem !important;
  margin: 0 !important;
}
@media (min-width: 1024px) {
  .testimonial-section {
    /* Figma's desktop frame (node 5426-584) shows the quote/attribution inset
       far more than the real testimonial.js's flat 6.5rem (104px) — roughly a
       quarter of the section's own height on each side at 1440px wide. 15rem
       (240px) matches that proportion; this is a per-instance override, not a
       change to the shared block padding used elsewhere. */
    padding-block: 15rem !important;
  }
}

/* Bootstrap's `.container` caps width at 960-1140px; the real block runs full-width
   with padding up to a 120rem ceiling — same fix as Color Collection, scoped here. */
.testimonial-section .container {
  width: 100% !important;
  max-width: 120rem !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
@media (min-width: 768px) {
  .testimonial-section .container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (min-width: 1024px) {
  .testimonial-section .container {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}

.testimonial-section .testimonial__eyebrow {
  margin: 0 0 0.25rem !important;
}
.testimonial-section .testimonial__color-name {
  margin: 0 0 0.25rem !important;
}
.testimonial-section .testimonial__color-id {
  margin: 0 !important;
}

.testimonial-section .testimonial__quote {
  width: 100% !important;
  max-width: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
}
@media (min-width: 1024px) {
  .testimonial-section .testimonial__quote {
    margin-bottom: 2rem !important;
  }
}
/* Quote text is a bare <h1> with no "headline-1" class in the captured markup, so
   it was falling through to whichever unscoped h1/heading rule happens to win the
   cascade on a given host — Bootstrap's unlayered h1 default locally (2.5rem/weight
   500), or on dev.behr.ca some other shared, unlayered stylesheet ("important for
   other pages", so it can't just be edited/removed) that resolves to an oversized,
   uppercase, wide-tracked generic-sans look instead of the real .headline-1 utility
   token (font-family: var(--font-primary), 3rem→4rem/weight 400/-0.02em tracking,
   line-height 1, no text-transform). Whatever wins depends on the host's stylesheet
   load order/specificity, which this project can't control — so every property is
   forced with !important, scoped tightly to .testimonial-section's own quote h1
   only, so it can't affect any other h1 on the page (same category of bug as the
   h4/button fixes elsewhere in this file, hardened further here per dev.behr.ca). */
.testimonial-section .testimonial__quote h1 {
  font-family: var(--font-primary) !important;
  font-size: 3rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 1024px) {
  .testimonial-section .testimonial__quote h1 {
    font-size: 4rem !important;
  }
}

.testimonial__attribution {
  gap: 1rem;
}
.testimonial__attributor-avatar {
  flex-shrink: 0;
}
.testimonial__attributor-avatar img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.testimonial__attributor-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.testimonial__attributor-name {
  margin: 0;
}
.testimonial__attributor-description {
  margin: 0;
}
.premium-color-hero__cta-section span.button-content {
  gap: 0rem !important;
}

/* ============================================================= */
/* Color Trends Visualizer */
/* ============================================================= */

/* Ported 1:1 from the real
   blocks/color-trends-visualizer/color-trends-visualizer.css (same class
   names/values) — only the @layer blocks {} wrapper is dropped, matching
   how every other component in this file is ported (no CSS layers here). */
.color-trends-visualizer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: 4rem;
  background: var(--theme-surface-primary);
  box-sizing: content-box;
  margin-inline: auto;
  max-width: 100%;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) {
  .color-trends-visualizer {
    padding-inline: 3rem;
  }
}
@media (min-width: 1024px) {
  .color-trends-visualizer {
    max-width: 120rem;
    padding-inline: 5rem;
  }
}
@media (min-width: 1024px) {
  .color-trends-visualizer {
    display: grid;
    grid-template-columns: 19.625rem auto;
    grid-template-rows: auto auto 1fr;
    column-gap: 7.25rem;
    padding-block: 5rem;
  }
}
.color-trends-visualizer__heading {
  order: 1;
  margin-bottom: 1.5rem;
  color: var(--theme-text-primary);
}
@media (min-width: 1024px) {
  .color-trends-visualizer__heading {
    order: unset;
    grid-column: 1;
    grid-row: 1;
    max-width: 19.625rem;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    align-self: start;
  }
}
.color-trends-visualizer__right-panel {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__right-panel {
    order: unset;
    grid-column: 2;
    grid-row: 1/4;
    width: 100%;
    min-width: 0;
    gap: 1.5rem;
    margin-top: 0;
  }
}
.color-trends-visualizer__description {
  order: 2;
  color: var(--theme-text-primary);
}
@media (min-width: 1024px) {
  .color-trends-visualizer__description {
    order: unset;
    grid-column: 1;
    grid-row: 2;
    max-width: 19.625rem;
    margin-top: 0;
    align-self: start;
  }
}
.color-trends-visualizer__secondary-description {
  color: var(--theme-text-primary);
}
.color-trends-visualizer__palette-section {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__palette-section {
    order: unset;
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
    align-self: end;
  }
}
.color-trends-visualizer__room-tabs {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__room-tabs {
    gap: 1.5rem;
  }
}
.color-trends-visualizer__room-tabs::-webkit-scrollbar {
  display: none;
}
.color-trends-visualizer__room-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--theme-text-primary);
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .color-trends-visualizer__room-tab {
    transition: none;
  }
}
.color-trends-visualizer__room-tab[aria-selected=true] {
  opacity: 1;
  outline: none;
}
.color-trends-visualizer__room-tab.focus, .color-trends-visualizer__room-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}
.color-trends-visualizer__tab-icon {
  --icon-size: 1rem;
  --icon-color: currentcolor;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__tab-icon {
    --icon-size: 1.5rem;
  }
}
.color-trends-visualizer__tab-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.color-trends-visualizer__tab-label::after {
  content: "";
  display: block;
  height: 0.09375rem;
  width: 100%;
  background: transparent;
  transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .color-trends-visualizer__tab-label::after {
    transition: none;
  }
}
.color-trends-visualizer__room-tab[aria-selected=true] .color-trends-visualizer__tab-label::after {
  background: var(--theme-border-primary);
}
.color-trends-visualizer__canvas-panel {
  position: relative;
  width: 100%;
}
.color-trends-visualizer__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 1rem;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__canvas {
    border-radius: 1.5rem;
  }
}
.color-trends-visualizer__canvas.focus, .color-trends-visualizer__canvas:focus-visible {
  outline: 0.125rem solid var(--theme-focus-primary);
  outline-offset: 0.25rem;
}
.color-trends-visualizer__swatch-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .color-trends-visualizer__swatch-strip {
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-start;
  }
}
.color-trends-visualizer__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.color-trends-visualizer__swatch::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background-color: var(--ctv-swatch-color);
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.color-trends-visualizer__swatch--selected::before {
  border-color: var(--theme-border-primary);
}
.color-trends-visualizer__swatch.focus, .color-trends-visualizer__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}
.color-trends-visualizer__palette-list {
  display: flex;
  flex-direction: column;
}
.color-trends-visualizer__palette-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1.5rem;
  padding-bottom: 1.5rem;
}
.color-trends-visualizer__divider {
  grid-column: 1/-1;
  grid-row: 1;
  margin: 0 0 1rem;
  border: none;
  border-top: 1px solid var(--theme-border-secondary);
}
.color-trends-visualizer__palette-swatch {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.color-trends-visualizer__palette-swatch:is(button) {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
}
.color-trends-visualizer__palette-swatch:is(button).focus, .color-trends-visualizer__palette-swatch:is(button):focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125rem var(--theme-focus-primary);
}
.color-trends-visualizer__palette-remove-icon {
  --icon-size: 1.25rem;
  opacity: 0;
  pointer-events: none;
}
.color-trends-visualizer__palette-swatch:hover .color-trends-visualizer__palette-remove-icon, .color-trends-visualizer__palette-swatch:focus-visible .color-trends-visualizer__palette-remove-icon, .color-trends-visualizer__palette-swatch.hover .color-trends-visualizer__palette-remove-icon, .color-trends-visualizer__palette-swatch.focus .color-trends-visualizer__palette-remove-icon {
  opacity: 1;
}
@media (hover: none) {
  .color-trends-visualizer__palette-remove-icon {
    opacity: 1;
  }
}
.color-trends-visualizer__palette-name {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--theme-text-primary);
}
@media (min-width: 1024px) {
  .color-trends-visualizer__palette-name {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
  }
}
.color-trends-visualizer__palette-surface {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--theme-text-primary);
}
.color-trends-visualizer__clear-btn {
  width: 100%;
}
.color-trends-visualizer__live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.default-content-wrapper a {
  color: #ffffff !important;
}
.default-content-wrapper a:hover {
  text-decoration: none;
}
.color-summary__info-header .tooltip {
  width: auto;
}
.tooltip[data-state=closed] {
  width: auto;
}
.tooltip[data-state=open] {
  width: 100%;
}
.room-carousel-container .carousel__pagination-visual {
  color: #ffffff !important
}
@media (min-width:1024px) and (max-width:1199px){
  .visualize-button--icon .visualize-button__link::after, 
  .add-to-project-button--icon .add-to-project-button__btn::after {
    font-size: 10px;
    padding: 5px 5px;
  }
}
@media (min-width: 1200px) and (max-width:1330px){
  .visualize-button--icon .visualize-button__link::after, 
  .add-to-project-button--icon .add-to-project-button__btn::after {
    font-size: 11px;
    padding: 10px 10px;
  }
}
@media (min-width: 1331px) {
  .visualize-button--icon .visualize-button__link::after,
  .add-to-project-button--icon .add-to-project-button__btn::after  {
    font-size: 12px !important;
  }
}