/* Color custom properties */

:root,
.color-background-1 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-1);
  --gradient-background: var(--gradient-base-background-1);
}

.color-background-2 {
  --color-background: var(--color-base-background-2);
  --gradient-background: var(--gradient-base-background-2);
}

.color-inverse {
  --color-foreground: var(--color-base-background-1);
  --color-background: var(--color-base-text);
  --gradient-background: rgb(var(--color-base-text));
}

.color-accent-1 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-1);
  --gradient-background: var(--gradient-base-accent-1);
}

.color-accent-2 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-2);
  --gradient-background: var(--gradient-base-accent-2);
}

.color-foreground-outline-button {
  --color-foreground: var(--color-base-outline-button-labels);
}

.color-foreground-accent-1 {
  --color-foreground: var(--color-base-accent-1);
}

.color-foreground-accent-2 {
  --color-foreground: var(--color-base-accent-2);
}

:root,
.color-background-1 {
  --color-link: var(--color-base-outline-button-labels);
  --alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-link: var(--color-foreground);
  --alpha-link: 0.7;
}

:root,
.color-background-1 {
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-solid-button-labels);
  --alpha-button-background: 1;
  --alpha-button-border: 1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-background);
}

.button--secondary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --alpha-button-background: 0;
}

.color-background-2 .button--secondary,
.color-inverse .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

.button--tertiary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.color-background-2 .button--tertiary,
.color-inverse .button--tertiary,
.color-accent-1 .button--tertiary,
.color-accent-2 .button--tertiary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

:root,
.color-background-1 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-foreground);
  --alpha-badge-border: 0.1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-background);
  --alpha-badge-border: 1;
}

:root,
.color-background-1,
.color-background-2 {
  --color-card-hover: var(--color-base-text);
}

.color-inverse {
  --color-card-hover: var(--color-base-background-1);
}

.color-accent-1,
.color-accent-2 {
  --color-card-hover: var(--color-base-solid-button-labels);
}

:root,
.color-icon-text {
  --color-icon: rgb(var(--color-base-text));
}

.color-icon-accent-1 {
  --color-icon: rgb(var(--color-base-accent-1));
}

.color-icon-accent-2 {
  --color-icon: rgb(var(--color-base-accent-2));
}

.color-icon-outline-button {
  --color-icon: rgb(var(--color-base-outline-button-labels));
}

.color-light-text {
  color: rgba(var(--color-base-text), 0.6);
}

/* base */

.no-js:not(html) {
  display: none !important;
}

html.no-js .no-js:not(html) {
  display: block !important;
}

.no-js-inline {
  display: none !important;
}

html.no-js .no-js-inline {
  display: inline-block !important;
}

html.no-js .no-js-hidden {
  display: none !important;
}

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }
}

@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.element-margin {
  margin-top: 5rem;
}

.spaced-section {
  margin-top: 3rem;
}

.spaced-section:last-child {
  margin-bottom: 5rem;
}

.spaced-section--full-width + .spaced-section--full-width {
  margin-top: 0;
}

.spaced-section--full-width:first-child {
  margin-top: 0;
}

.spaced-section--full-width:last-child {
  margin-bottom: 0;
}

.mt-0{
  margin-top: 0 !important;
}

.mt-1{
  margin-top: 0.5rem !important;
}

.mt-2{
  margin-top: 1rem !important;
}

.mt-3{
  margin-top: 1.5rem !important;
}

.mt-4{
  margin-top: 2rem !important;
}

.mb-0{
  margin-bottom: 0 !important;
}

.mb-1{
  margin-bottom: 0.5rem !important;
}

.mb-2{
  margin-bottom: 1rem !important;
}

.mb-3{
  margin-bottom: 1.5rem !important;
}

.mb-4{
  margin-bottom: 2rem !important;
}

.ml-1 {
  margin-left: 0.5rem !important;
}

.ml-2 {
  margin-left: 1rem !important;
}

.p-2{
  padding: 1rem !important;
}

.p-3{
  padding: 2rem !important;
}

.pt-0{
  padding-top: 0 !important;
}

.pb-0{
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.py-1 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.lh-2{
  line-height: 1.2 !important;
}

.gap-x-2 {
  column-gap: 1rem;
}

.gap-y-1 {
  row-gap: 0.5rem;
}

.gap-y-2 {
  row-gap: 1rem;
}

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
  padding: 4rem 0 5rem;
}

@media screen and (min-width: 750px) {
  .background-secondary {
    padding: 6rem 0 5rem;
  }
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.rte, img{
  max-width: 100%;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden, .hide {
  display: none !important;
}

.transparent {
  opacity: 0 !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.06rem;
  color: rgb(var(--color-foreground));
  line-height: 1.3;
}

.h0 {
  font-size: 4rem;
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: 5.2rem;
  }
}

h1,
.h1 {
  font-size: 3rem;
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: 4rem;
    margin-bottom: 1rem
  }
}

h2,
.h2 {
  font-size: 2rem;
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: 2.4rem;
  }
}

h3,
.h3 {
  font-size: 1.7rem;
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: 1.8rem;
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.2rem;
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: 1.3rem;
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1.5rem;
  letter-spacing: 0.07rem;
  line-height: 1.7;
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.5rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1.5rem;
  letter-spacing: 0.13rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.customer a.h3 {
  font-size: 1.8rem;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 3.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

.circle-divider::after {
  /* content: '\2022'; */
 /*  margin: 0 1.3rem 0 1.5rem; */
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
  color: grey;
}

.underlined-link:hover,
.customer a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
  color: orange;
}

.icon-arrow {
  width: 1.5rem;
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused, .no-js *:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}


/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset, .no-js .focus-inset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused, .no-js .focus-offset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 4rem 0 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon svg {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  color: rgb(var(--color-link));
  margin-top: 0;
  flex-shrink: 0;
  color: grey;
}

@media screen and (min-width: 990px) {
  .title-wrapper-with-link.title-wrapper-with-link--no-heading {
    display: none;
  }
}

.subtitle {
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.05rem;
  color: rgba(var(--color-foreground), 0.7);
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  margin-left: -1rem;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .grid {
    margin-left: -3rem;
  }
}

.grid__item {
  padding-left: 1rem;
  padding-bottom: 1rem;
  width: calc(25% - 1rem * 3 / 4);
  max-width: 50%;
  flex-grow: 1;
  flex-shrink: 0;
}

.slider--tablet.grid--peek .grid__item.slider__slide,
.grid__item.slider__slide{
  margin-top: 0rem;
}

@media screen and (min-width: 750px) {
  .grid__item {
    padding-left: 3rem;
    padding-bottom: 3rem;
    width: calc(25% - 3rem * 3 / 4);
    max-width: 50%;
  }
}

.grid--gapless .grid__item {
  padding-left: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid--one-third-max.grid--3-col-tablet .grid__item {
    max-width: 33.33%;
  }
}

@media screen and (min-width: 990px) {
  .grid--quarter-max.grid--5-col-desktop .grid__item {
    max-width: 20%;
  }
  
  .grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: 25%;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - 0.5rem * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - 0.5rem / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - 1rem / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - 1rem / 2);
  }
}

@media screen and (min-width: 990px) {
  .grid--5-col-desktop .grid__item {
    width: calc(20% - 1rem * 3 / 4);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - 1rem / 2);
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
  }
}

.grid__item--vertical-align {
  align-self: center;
}

.grid__item--full-width {
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    width: calc(50% - 3.75rem / 2);
  }

  .grid--peek .grid__item:first-of-type {
    padding-left: 1.5rem;
  }

  .grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - 4rem * 3 / 4);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - 4rem * 2 / 3);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
    width: calc(50% - 4rem / 2);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    padding-left: 1.5rem;
  }

  .slider--tablet.grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

@media screen and (max-width: 989px) {
  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom, .deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.product-card-wrapper .card--product .media.media--circle > img ,
.media--circle > img {
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button,
.btn,
.challenge__button,
.customer button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  padding: 0.9rem 3rem 1.1rem;
  text-decoration: none;
  border: 0;
  border-radius: 4rem;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  box-shadow: 0 0 0 0rem rgba(var(--color-button), var(--alpha-button-border));
  color: rgb(var(--color-button-text));
  min-width: 12rem;
  min-height: 5rem;
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
}

a{
  color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:focus-visible {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible) {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
}

.button,
.btn,
.button-label,
.challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: 9rem;
  min-height: 3.5rem;
}

.button--small {
  padding: 1.2rem 2.6rem;
  min-width: 10rem;
  min-height: unset;
}

/* Button - hover */

.button:not([disabled]):hover,
.challenge__button:hover,
.customer button:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), var(--alpha-button-border));
}

/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.btn.loading,
.btn.btn--loading,
.button.loading {
  color: transparent;
  pointer-events: none;
}

.btn.loading:after,
.btn.btn--loading:after,
.button.loading:after {
  animation: loading var(--duration-long) infinite linear;
  border: 0.5rem solid rgba(var(--color-button-text), 0.4);
  border-left: 0.5rem solid rgb(var(--color-button-text));
  border-radius: 100%;
  box-sizing: content-box;
  content: '';
  display: block;
  height: 2rem;
  position: absolute;
  width: 2rem;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  color: rgba(var(--color-link), var(--alpha-link));
  margin-left: 0;
  padding-left: 0;
}

.share-button_copy-wrapper{
  display: flex;
  width: 100%;
  background: rgba(0,0,0,0.05);
  margin: 5px;
}

.social-sharing-icons {
  margin: 8px 8px 0;
}

.social-sharing-icons .sharing-icons-label{
  line-height: 1;
  margin-bottom: 8px;
  text-align: left;
}

.social-sharing-icons .share-icon-button{
  text-decoration: none;
  color: var(--color-base-text);
  margin: 0 5px;
}

.social-sharing-icons .share-icon-button svg{
  width: 2.5rem;
  height: 2.5rem;
}

.share-button__button:hover,
details[open] > .share-button__button {
  color: rgb(var(--color-link));
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  margin-right: 1rem;
}

.share-button__fallback {
  background: rgb(var(--color-background));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 6;
  width: 100%;
  min-width: 31rem;
  max-width: 50rem;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 3.5rem;
  color: rgb(var(--color-foreground));
  font-size: 1.5rem;
  width: 100%;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 1), inset 0 2px 3px rgba(0,0,0,0.05);
  height: 4rem;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
}

.field__input.no-float-label{
  padding: 1.2rem 2rem !important;
}

.field__input:disabled,
.select__select:disabled,
.customer .field input:disabled,
.customer select:disabled {
  color: rgba(var(--color-foreground),0.6);
  background: rgba(0,0,0,0.06);
}

textarea{
  display: block;
  width: 100%;
  min-height: 100px;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
  background-color: transparent;
  border: 0;
  border-radius: 10px;
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  min-height: 4.5rem;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  padding: 1.5rem;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field__input:hover,
.select__select:hover,
.customer .field input:hover,
.customer select:hover,
.localization-form__select:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  outline: transparent;
}

.text-area,
.select {
  display: inline-block;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 1.5rem;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: 1.6;
  padding: 0 4rem 0 2rem;
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;

}

.field-group .field__input:first-child{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.field-group .button:last-child{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.customer .field {
  display: block;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.2rem 2rem;
}

.field__label,
.customer .field label {
  font-size: 1.5rem;
  left: 2rem;
  top: 1rem;
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.55);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label ,
.customer .field.on_focus label,
.field__input.on_focus ~ .field__label {
  font-size: 0.9rem;
  top: 0.3em;
  letter-spacing: 0.04rem;
}

.customer .field.on_focus select{
  padding-top: 1.4rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 2rem 0.8rem;
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 3.9rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 6.4rem;
}

.field__button > svg {
  height: 2.2rem;
  width: 2.2rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  padding: 1.2rem;
  min-height: 10rem;
  resize: none;
}

.text-area--resize-vertical {
  resize: vertical;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.5rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.5rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  border: 0.2rem solid rgba(var(--color-base-text), 0.15);
  border-radius: 3em;
  position: relative;
  height: 6rem;
  width: 80%;
  display: flex;
}

.quantity__input {
  color: currentColor;
  font-size: 2rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__input:disabled {
  color: rgba(var(--color-foreground),0.6);
  background: rgba(0,0,0,0.06);
}

.quantity__button {
  width: 5rem;
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button svg {
  width: 1.6rem;
  pointer-events: none;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 2;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  min-width: 1.7rem;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  top: -0.3rem;
  left: 1rem;
  line-height: 1.1;
}

/* section-announcement-bar */
#section-announcement-bar {
  z-index: 4;
}

.announcement-bar {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
}

.announcement-bar__link {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  text-decoration: none;
}

.announcement-bar__link:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-card-hover), 0.06);
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__link .announcement-bar__message {
  padding: 0;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 2rem;
  margin: 0;
  letter-spacing: 0.1rem;
}

/* section-header */

/* section-header */
#easystore-section-header {
  z-index: 3;
}

.easystore-section-header-sticky {
  position: sticky;
  top: 0;
}

.easystore-section-header-hidden {
  transform: translateY(-100%);
}

#easystore-section-header.animate {
  transition: transform 0.15s ease-out;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
  z-index: 3;
}

.section-header-sticky {
  position: sticky;
  top: 0;
}

.header-wrapper--border-bottom {
  border-bottom: 0.2rem solid rgba(var(--color-foreground), 0.2);
}

.header {
  display: grid;
  grid-template-areas: 
    'left-icon heading icons'
    'search search search';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1.8rem;
}

.header .search-modal__form{
  width: 100%;
  max-width: 100%;
 
}

@media screen and (min-width: 990px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 0rem;
  }

  .header--has-menu:not(.header--middle-left) {
    padding-bottom: 0;
  }

  .header--top-left {
    grid-template-areas:
      'heading search icons'
      'navigation navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--middle-left {
    grid-template-areas: 
      'heading search icons'
      'navigation navigation navigation';
    grid-template-columns: auto 1fr auto;
    column-gap: 2rem;
  }

  .header--top-center {
    grid-template-areas:
      'search heading icons'
      'navigation navigation navigation';
  }

  .header--middle-left .header__inline-menu {
    min-width: 45rem;
  }

  .header:not(.header--middle-left) .header__inline-menu {
/*     margin-top: 1.05rem; */
  }

  .header .search-modal__form{
    max-width: 30rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  width: var(--logo-width);
  max-width: 100%;
}

@media screen and (min-width: 990px) {
  .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon span {
  height: 100%;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon--menu{
  height: 4.4rem;
  width: 4.4rem;
}

.header__icons .header__icon{
  margin-left: 2rem;
  text-decoration: none;
}

.header__link-label{
  margin-left: 1rem;
  text-decoration: none;
}

.header__icon--cart {
  position: relative;
}

@media screen and (max-width: 989px) {
  menu-drawer ~ .header__icons .header__icon--account {
    display: none;
  }
  .header__icon{
    height: 4.4rem;
    width: 4.4rem;
  }
  .header__icons .header__icon{
    margin-left: 0;
    margin-right: -1.2rem;
  }
  .cart-count-bubble{
    top: 0.5rem;
  }
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icon;
  justify-self: start;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    /* display: none; */
  }
}

.no-js .predictive-search {
  display: none;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: 1.8;
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 47.8rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.header__inline-menu details[open] > .header__submenu {
  opacity: 1;
  transform: translateY(0);
  animation: animateMenuOpen var(--duration-default) ease;
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header__search-input {
  grid-area: search;
}

/* Media query for mobile devices */
@media screen and (max-width: 749px) { /* Adjust 768px to your needs */
  .header__search-input {
    display: block;
  }
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
    margin: 0.7rem 0;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item a {
  color: currentColor;
  text-decoration: none;
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease,
    transform var(--duration-default) ease;
}

.header__submenu.list-menu {
  padding: 2rem 0;
}

.header__submenu .header__submenu {
  position: absolute;
  top: calc(-0.5rem - 1px);
  left: 100%;
  width: 100%;
  padding: 0.5rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  padding: 0.95rem 3.5rem 0.95rem 2rem;
}

.header__submenu .header__submenu .header__menu-item {
  padding-left: 3rem;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  right: 2rem;
}

details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border-radius: 5px;
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1.1;
  padding: 0.8rem 1.5rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-foreground));
  word-break: break-word;
  box-sizing: content-box;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.badge.addToClassList{
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  border-color: none;
  color: rgb(var(--color-button-text));
}

.badge.badge-ribbon {
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  padding: 1rem 0.7rem;
  position: relative;
  border: none;
  border-radius: 0;
}

.badge.badge-ribbon::after{
  border-color: rgb(var(--color-badge-background)) rgb(var(--color-badge-background)) transparent;
  border-radius: 3px;
  border-style: solid;
  border-width: 5px 1em;
  bottom: -8px;
  content: "";
  height: 0;
  left: 0;
  right: 0;
  position: absolute;
}

.badge.badge-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem;
  width: 2.5em;
  height: 2.5em;
  border-radius: 3em;
  box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.1);
}

.badge.badge-circle .icon {
  width: 1.3em;
  height: 1.3em;
}

@media screen and (max-width: 749px) {
  .badge.badge-circle {
    width: 1.6em;
    height: 1.6em;
  }
}

.gradient {
  background: var(--color-background);
  background: var(--gradient-background);
  background-attachment: fixed;
}

.select:before, .select:after {
  border-right: 2px solid;
  content: '';
  display: block;
  height: 0.7rem;
  position: absolute;
  transform: rotate(45deg);
  top: calc(50% - 0.3rem);
  right: 1.6rem;
  width: 0;
  border-radius: 1rem;
}

.select:after {
  transform: rotate(-45deg);
  right: 2rem;
}

.text-right{
  text-align: right;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.splide {
  position: relative;
}

.splide .splide__arrow{
  background: rgba(var(--color-button), 0.9);
  width: 3em;
  height: 3em;
}
.splide .splide__arrow svg{
  fill: rgb(var(--color-button-text));
}

.splide .splide__arrow:disabled{
  display: none;
}

.splide .splide__pagination__page.is-active{
  background: rgba(var(--color-button), 0.7);
  transform: scale(1.3);
  border: none;
  box-shadow: none;
}

.splide .splide__pagination__page{
  background-color: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

.splide_pagination-bottom{
  margin-bottom: 10rem;
}
.splide_pagination-bottom .splide__pagination{
  bottom: -4rem;
}

.splide-index-count{
  position: absolute;
  bottom: 20px;
  right: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 5px 8px;
  border-radius: 50px;
  letter-spacing: 3px;
  font-size: 12px;
}


@media screen and (max-width: 749px) {
  .splide .splide__arrow {
    display: none;
  }
}

.d-flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-justify-center{
  justify-content: center;
}

.flex-space-between{
  justify-content: space-between;
}

.flex-align-center{
  align-items: center;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.rotate-90{
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

select.currency-picker{
  height: 3.5rem;
}

.note {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: rgba(0,0,0,0.05);
}

.note.form-success {
  background: rgba(145, 245, 150 ,0.3);
}

.note.errors {
  background: rgba(245, 185, 145, 0.3);
  padding-left: 3rem;
}

.svg-icon {
  width: 1.2em;
  height: 1.4em;
  vertical-align: middle;
  fill: currentcolor;
  margin-top: -0.2em;
}

.collection .title-wrapper-with-link--no-heading{
  justify-content: flex-end;
}

img{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.table-wrapper{
	overflow: auto;
}

.table-wrapper table{
    min-width: 100%;
    width: auto !important;
}

.justify-center{
	justify-content: center;
}

/* ==== Flex table ==== */
.flex-table{
	border: 0.01rem solid rgba(var(--color-foreground), 0.08);
	display:flex;
	flex-direction: column;
}

.flex-table-tr{
	padding: 2.2rem;
}

.flex-table-tr:not(:last-child){
	border-bottom: 0.01rem solid rgba(var(--color-foreground), 0.08);
}

/* =========================================================
   CW-X BRAND PAGE — START
   Route: /pages/cw-x
   Root: #cwx-landing
   Updated: 2026-08-05

   All selectors are scoped under #cwx-landing.
   No global element selectors. No body/html rules.
   Safe to append to the bottom of assets/base.css.
   ========================================================= */

/* ---------------------------------------------------------
   0. ROOT, TOKENS, TUNABLES
   --------------------------------------------------------- */

#cwx-landing {
  /* Confirmed CW-X design tokens */
  --cwx-ink:           #050505;
  --cwx-black:         #0b0b0b;
  --cwx-charcoal:      #171717;
  --cwx-graphite:      #2f3033;

  --cwx-white:         #ffffff;
  --cwx-paper:         #f6f6f3;
  --cwx-soft-gray:     #ecece7;
  --cwx-stone:         #d8d8d2;
  --cwx-silver:        #bfc2c7;

  --cwx-text:          #111111;
  --cwx-muted:         #5d5f63;
  --cwx-soft-text:     #8b8e94;

  --cwx-blue:          #3d6fff;
  --cwx-electric-blue: #5d7cff;
  --cwx-violet:        #7468ff;
  --cwx-blue-glow:     rgba(93, 124, 255, 0.42);

  --cwx-red:           #d71920;   /* dormant — signal use only, not an accent */

  --cwx-line:          #191919;
  --cwx-soft-line:     #d7d7d0;

  /* Layout */
  --cwx-max-w:         1180px;
  --cwx-gutter:        clamp(20px, 4.2vw, 56px);
  --cwx-section-v:     clamp(76px, 9vw, 116px);

  /* ── DEPLOYMENT TUNABLES ──────────────────────────────
     --cwx-sticky-top:    height of the EasyStore sticky header.
                          Sets where the mobile anchor bar sticks.
     --cwx-scroll-offset: space kept above an anchored section when
                          jumping to it (header + anchor bar).
     Adjust both once after previewing the live theme.
     ──────────────────────────────────────────────────── */
  --cwx-sticky-top:    0px;
  --cwx-scroll-offset: 72px;

  background: var(--cwx-white);
  color: var(--cwx-text);
  font-family: -apple-system, BlinkMacSystemFont,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  max-width: 100%;
}

/* Scoped reset — neutralises EasyStore theme defaults inside the brand page */
#cwx-landing *,
#cwx-landing *::before,
#cwx-landing *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#cwx-landing img {
  max-width: 100%;
  height: auto;
  display: block;
}

#cwx-landing a {
  color: inherit;
  text-decoration: none;
}

#cwx-landing ul,
#cwx-landing ol {
  list-style: none;
}

#cwx-landing button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 0;
  text-align: left;
}

#cwx-landing blockquote,
#cwx-landing figure {
  margin: 0;
}

/* Screen-reader-only text (used to give repeated link labels context) */
#cwx-landing .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared focus ring — visible on every interactive element */
#cwx-landing a:focus-visible,
#cwx-landing button:focus-visible {
  outline: 2px solid var(--cwx-electric-blue);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   1. LAYOUT UTILITIES
   --------------------------------------------------------- */

#cwx-landing .cwx-container {
  width: min(var(--cwx-max-w), 100% - var(--cwx-gutter) * 2);
  margin-inline: auto;
}

/* Anchor targets clear the EasyStore sticky header */
#cwx-landing .cwx-anchor {
  scroll-margin-top: var(--cwx-scroll-offset);
}

#cwx-landing .cwx-section {
  padding: var(--cwx-section-v) 0;
  border-bottom: 1px solid var(--cwx-soft-line);
}

#cwx-landing .cwx-section--paper { background: var(--cwx-paper); }
#cwx-landing .cwx-section--white { background: var(--cwx-white); }

/* Section rhythm reflects content weight instead of one uniform value.
   Brand + commerce moments keep the full measure; wayfinding and utility
   sections breathe less; the intermission is deliberately tight. */
#cwx-landing .cwx-section--compact { padding: clamp(58px, 6.8vw, 88px) 0; }
#cwx-landing .cwx-section--tight   { padding: clamp(44px, 5vw, 64px) 0; }

#cwx-landing .cwx-section--dark {
  background: var(--cwx-black);
  color: var(--cwx-white);
  border-bottom-color: #1a1a1a;
}

/* ---------------------------------------------------------
   2. TYPOGRAPHY
   --------------------------------------------------------- */

#cwx-landing .cwx-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  line-height: 1;
  margin-bottom: 18px;
}

#cwx-landing .cwx-section--dark .cwx-eyebrow {
  color: var(--cwx-electric-blue);
}

#cwx-landing .cwx-title-lg {
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.035em;
}

#cwx-landing .cwx-title-md {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.03em;
}

#cwx-landing .cwx-title-sm {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.025em;
}

#cwx-landing .cwx-lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--cwx-muted);
  max-width: 620px;
}

#cwx-landing .cwx-section--dark .cwx-lead {
  color: rgba(255, 255, 255, 0.66);
}

/* Keeps key Chinese terms from breaking across lines */
#cwx-landing .cwx-nowrap {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   3. BUTTONS — rectangular only, 0 radius
   --------------------------------------------------------- */

#cwx-landing .cwx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  border: 1.5px solid var(--cwx-black);
  background: var(--cwx-black);
  color: var(--cwx-white);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

#cwx-landing .cwx-btn:hover {
  background: var(--cwx-electric-blue);
  border-color: var(--cwx-electric-blue);
  color: var(--cwx-white);
}

#cwx-landing .cwx-btn--ghost {
  background: transparent;
  color: var(--cwx-black);
  border-color: var(--cwx-black);
}

#cwx-landing .cwx-btn--ghost:hover {
  background: var(--cwx-black);
  color: var(--cwx-white);
  border-color: var(--cwx-black);
}

#cwx-landing .cwx-section--dark .cwx-btn {
  background: var(--cwx-white);
  color: var(--cwx-black);
  border-color: var(--cwx-white);
}

#cwx-landing .cwx-section--dark .cwx-btn:hover {
  background: var(--cwx-electric-blue);
  border-color: var(--cwx-electric-blue);
  color: var(--cwx-white);
}

#cwx-landing .cwx-section--dark .cwx-btn--ghost {
  background: transparent;
  color: var(--cwx-white);
  border-color: rgba(255, 255, 255, 0.5);
}

#cwx-landing .cwx-section--dark .cwx-btn--ghost:hover {
  background: var(--cwx-white);
  color: var(--cwx-black);
  border-color: var(--cwx-white);
}

#cwx-landing .cwx-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---------------------------------------------------------
   4. BRAND NAV — static, never sticky (EasyStore owns the sticky header)
   --------------------------------------------------------- */

#cwx-landing .cwx-nav {
  background: var(--cwx-white);
  border-bottom: 1px solid var(--cwx-soft-line);
}

#cwx-landing .cwx-nav__inner {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
}

#cwx-landing .cwx-nav__logo {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: var(--cwx-black);
  flex-shrink: 0;
}

#cwx-landing .cwx-nav__links {
  display: flex;
  gap: 26px;
  align-items: center;
}

#cwx-landing .cwx-nav__links a {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--cwx-muted);
  transition: color 0.14s ease;
}

#cwx-landing .cwx-nav__links a:hover {
  color: var(--cwx-black);
}

#cwx-landing .cwx-nav__cta {
  min-height: 38px;
  padding: 0 16px;
  font-size: 12px;
}

@media (max-width: 860px) {
  #cwx-landing .cwx-nav__links { display: none; }
}

/* ---------------------------------------------------------
   5. MOBILE ANCHOR BAR — sticky below the EasyStore header
   --------------------------------------------------------- */

#cwx-landing .cwx-anchors {
  display: none;
  position: sticky;
  top: var(--cwx-sticky-top);
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cwx-soft-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#cwx-landing .cwx-anchors::-webkit-scrollbar { display: none; }

#cwx-landing .cwx-anchors__list {
  display: flex;
  padding: 0 12px;
  white-space: nowrap;
}

#cwx-landing .cwx-anchors__link {
  display: block;
  padding: 12px 14px;         /* >=44px tall tap target */
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--cwx-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}

#cwx-landing .cwx-anchors__link.is-active,
#cwx-landing .cwx-anchors__link:hover {
  color: var(--cwx-black);
  border-bottom-color: var(--cwx-electric-blue);
}

@media (max-width: 860px) {
  #cwx-landing .cwx-anchors { display: block; }
}

/* ---------------------------------------------------------
   6. HERO
   --------------------------------------------------------- */

#cwx-landing .cwx-hero {
  border-bottom: 1px solid var(--cwx-soft-line);
}

#cwx-landing .cwx-hero__shell {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) 1fr;
  width: 100%;
}

/* Left brand panel */

#cwx-landing .cwx-hero__brand {
  background: var(--cwx-black);
  color: var(--cwx-white);
  padding: clamp(52px, 6.5vw, 88px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

#cwx-landing .cwx-hero__brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(52px, 6.5vw, 88px);
  width: 4px;
  height: 78px;
  background: var(--cwx-electric-blue);
  box-shadow: 2px 0 12px var(--cwx-blue-glow);
}

#cwx-landing .cwx-hero__eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 22px;
  line-height: 1.4;
}

#cwx-landing .cwx-hero__title {
  font-size: clamp(36px, 3.5vw, 52px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 480px;
  color: var(--cwx-white);
  margin-bottom: 26px;
}

#cwx-landing .cwx-hero__title span { display: block; }

#cwx-landing .cwx-hero__lead {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.72);
  max-width: 400px;
  margin-bottom: 34px;
}

#cwx-landing .cwx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#cwx-landing .cwx-hero__btn--primary {
  background: var(--cwx-white);
  color: var(--cwx-black);
  border-color: var(--cwx-white);
}

#cwx-landing .cwx-hero__btn--primary:hover {
  background: var(--cwx-electric-blue);
  border-color: var(--cwx-electric-blue);
  color: var(--cwx-white);
}

#cwx-landing .cwx-hero__btn--secondary {
  background: transparent;
  color: var(--cwx-white);
  border-color: rgba(255, 255, 255, 0.45);
}

#cwx-landing .cwx-hero__btn--secondary:hover {
  background: var(--cwx-white);
  color: var(--cwx-black);
  border-color: var(--cwx-white);
}

/* Right hero region: editorial product accordion ---------------
   PROGRESSIVE ENHANCEMENT.

   Base state (this block, no .cwx-acc--ready): a plain readable
   three-card layout. Every product name, context, price and link is
   visible and reachable with JavaScript completely disabled. Nothing
   here uses visibility:hidden or display:none on a panel.

   Enhanced state (.cwx-acc--ready, added by JS only after a successful
   init): the desktop rail accordion / mobile vertical accordion.
   If init throws or never runs, the base layout simply remains.
   -------------------------------------------------------------- */

#cwx-landing .cwx-acc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-soft-line);
  /* Natural sizing — no hard-coded hero height. Overall height falls out of
     the media aspect-ratio below plus the trigger and info bars, so the hero
     scales with its own content instead of a magic pixel value. */
}

#cwx-landing .cwx-acc__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cwx-white);
  overflow: hidden;
  min-width: 0;
}

#cwx-landing .cwx-acc__h { margin: 0; }

#cwx-landing .cwx-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--cwx-black);
  color: var(--cwx-white);
  cursor: default;              /* base state: not yet interactive */
  transition: background 0.3s ease, color 0.3s ease;
}

#cwx-landing .cwx-acc__num {
  font-size: 12px; font-weight: 900; letter-spacing: 0.14em;
  color: var(--cwx-electric-blue);
}
#cwx-landing .cwx-acc__model {
  font-size: 11px; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
}
#cwx-landing .cwx-acc__label {
  font-size: 10px; font-weight: 900; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cwx-electric-blue);
}

/* Rail-only affordances: hidden until the accordion is actually live */
#cwx-landing .cwx-acc__frag,
#cwx-landing .cwx-acc__ind { display: none; }

#cwx-landing .cwx-acc__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#cwx-landing .cwx-acc__media {
  --cwx-acc-scale: 1;
  --cwx-acc-pos: center center;
  position: relative;
  /* Locks the near-square proportion (~598 x 580 at 1440) and reserves the
     space before the image loads, so there is no layout shift. */
  aspect-ratio: 1.03 / 1;
  flex: none;
  overflow: hidden;
  background: var(--cwx-stone);
}

#cwx-landing .cwx-acc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cwx-acc-pos);
  transform: scale(var(--cwx-acc-scale));
}

/* Measured crops.
   01 CV1505  - tightened to torso->mid-calf so the five-length shorts read
                as the primary garment and the sleeves stay peripheral.
   02 CB9128  - 1.08 clears the source's 3.8% white margins.
   03 CZ5190BL- calf-sleeve-only source; 1.50 clears its 16.5% letterbox
                bands while keeping the sleeves well inside frame. */
#cwx-landing .cwx-acc__item--1 .cwx-acc__media { --cwx-acc-scale: 1.70; --cwx-acc-pos: center 75%; }
#cwx-landing .cwx-acc__item--2 .cwx-acc__media { --cwx-acc-scale: 1.08; --cwx-acc-pos: center 66%; }
#cwx-landing .cwx-acc__item--3 .cwx-acc__media { --cwx-acc-scale: 1.50; --cwx-acc-pos: center 50%; }

#cwx-landing .cwx-acc__info {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--cwx-soft-line);
  background: var(--cwx-white);
}

#cwx-landing .cwx-acc__pack {
  width: 52px; height: 52px;
  border: 1px solid var(--cwx-soft-line);
  background: var(--cwx-paper);
  overflow: hidden;
}
#cwx-landing .cwx-acc__pack img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
}

#cwx-landing .cwx-acc__cat {
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  color: var(--cwx-electric-blue); text-transform: uppercase; margin-bottom: 3px;
}
#cwx-landing .cwx-acc__name {
  font-size: 14px; font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.4; margin-bottom: 3px;
}
#cwx-landing .cwx-acc__ctx {
  font-size: 12px; color: var(--cwx-muted); line-height: 1.6;
}

#cwx-landing .cwx-acc__buy {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#cwx-landing .cwx-acc__price {
  font-size: 14px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap;
}

#cwx-landing .cwx-acc__cta {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--cwx-black);
  background: var(--cwx-black); color: var(--cwx-white);
  font-size: 12px; font-weight: 900; letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#cwx-landing .cwx-acc__cta:hover {
  background: var(--cwx-electric-blue); border-color: var(--cwx-electric-blue);
}

/* Base state on narrow screens: simply stack the three cards */
@media (max-width: 980px) {
  #cwx-landing .cwx-acc {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #cwx-landing .cwx-acc__media { flex: none; aspect-ratio: 1 / 1; }
}

/* ==============================================================
   ENHANCED STATE — only once JS has initialised successfully
   ============================================================== */

#cwx-landing .cwx-acc--ready {
  grid-template-columns: 1fr 96px 96px;
  transition: grid-template-columns 560ms cubic-bezier(0.4, 0, 0.2, 1);
}

#cwx-landing .cwx-acc--ready[data-active="0"] { grid-template-columns: 1fr 96px 96px; }
#cwx-landing .cwx-acc--ready[data-active="1"] { grid-template-columns: 96px 1fr 96px; }
#cwx-landing .cwx-acc--ready[data-active="2"] { grid-template-columns: 96px 96px 1fr; }

/* A collapsed rail's trigger is in vertical writing-mode; left in flow its
   intrinsic size dictates the whole hero row. Taking the collapsed header out
   of flow lets the OPEN item alone define the height, so the hero sizes to its
   real content instead of stretching. */
#cwx-landing .cwx-acc--ready .cwx-acc__item:not(.is-open) .cwx-acc__h {
  position: absolute;
  inset: 0;
}

#cwx-landing .cwx-acc--ready .cwx-acc__trigger {
  height: 100%;
  writing-mode: vertical-rl;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0;
  gap: 14px;
  background: var(--cwx-paper);
  color: inherit;
  cursor: pointer;
}

#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__trigger {
  writing-mode: horizontal-tb;
  height: auto;
  min-height: 48px;
  padding: 0 18px;
  background: var(--cwx-black);
  color: var(--cwx-white);
}

#cwx-landing .cwx-acc--ready .cwx-acc__trigger:hover { background: var(--cwx-soft-gray); }
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__trigger:hover { background: var(--cwx-black); }

#cwx-landing .cwx-acc--ready .cwx-acc__trigger:focus-visible {
  outline: 2px solid var(--cwx-electric-blue);
  outline-offset: -3px;
}

#cwx-landing .cwx-acc--ready .cwx-acc__model { color: var(--cwx-graphite); }
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__model { color: rgba(255, 255, 255, 0.72); }
#cwx-landing .cwx-acc--ready .cwx-acc__label { color: var(--cwx-soft-text); }
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__label { color: var(--cwx-electric-blue); }

#cwx-landing .cwx-acc--ready .cwx-acc__frag {
  display: block;
  width: 46px; height: 46px;
  margin-top: auto; align-self: center;
  overflow: hidden;
  border: 1px solid var(--cwx-soft-line);
  background: var(--cwx-white);
  flex-shrink: 0;
}
#cwx-landing .cwx-acc--ready .cwx-acc__frag img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
}
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__frag { display: none; }

#cwx-landing .cwx-acc--ready .cwx-acc__ind {
  display: block;
  margin-top: 14px; align-self: center;
  width: 13px; height: 13px; position: relative; flex-shrink: 0;
}
#cwx-landing .cwx-acc--ready .cwx-acc__ind::before,
#cwx-landing .cwx-acc--ready .cwx-acc__ind::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#cwx-landing .cwx-acc--ready .cwx-acc__ind::before { width: 13px; height: 1.5px; }
#cwx-landing .cwx-acc--ready .cwx-acc__ind::after  { width: 1.5px; height: 13px; transition: opacity 0.3s ease; }
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__ind { margin-top: 0; margin-left: auto; }
#cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__ind::after { opacity: 0; }

#cwx-landing .cwx-acc--ready .cwx-acc__panel {
  opacity: 1; visibility: visible;
  transition: opacity 380ms ease 140ms;
}
#cwx-landing .cwx-acc--ready .cwx-acc__item:not(.is-open) .cwx-acc__panel {
  opacity: 0;
  visibility: hidden;          /* also drops it from tab order + a11y tree */
  flex: 0 0 0;
  /* Without these, a collapsed panel keeps min-height:auto and its info text
     wraps inside the 96px rail — inflating the whole hero row. */
  min-height: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}

#cwx-landing .cwx-acc--ready .cwx-acc__info { grid-template-columns: 52px 1fr auto; }
#cwx-landing .cwx-acc--ready .cwx-acc__buy {
  grid-column: auto;
  display: block;
  text-align: right;
}
#cwx-landing .cwx-acc--ready .cwx-acc__price { display: block; margin-bottom: 6px; }

/* Enhanced state on narrow screens: vertical accordion, no rails */
@media (max-width: 980px) {
  #cwx-landing .cwx-acc--ready,
  #cwx-landing .cwx-acc--ready[data-active="0"],
  #cwx-landing .cwx-acc--ready[data-active="1"],
  #cwx-landing .cwx-acc--ready[data-active="2"] {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    min-height: 0;
    transition: none;
  }

  /* The out-of-flow rail header is a DESKTOP-only fix. On mobile the collapsed
     header is the tappable row itself and must stay in normal flow. */
  #cwx-landing .cwx-acc--ready .cwx-acc__item:not(.is-open) .cwx-acc__h {
    position: static;
    inset: auto;
  }

  #cwx-landing .cwx-acc--ready .cwx-acc__trigger,
  #cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__trigger {
    writing-mode: horizontal-tb;
    min-height: 68px; height: auto;
    padding: 0 18px; gap: 12px;
  }

  #cwx-landing .cwx-acc--ready .cwx-acc__frag { margin-top: 0; margin-left: auto; width: 40px; height: 40px; }
  #cwx-landing .cwx-acc--ready .cwx-acc__ind  { margin-top: 0; margin-left: 8px; }
  #cwx-landing .cwx-acc--ready .cwx-acc__item.is-open .cwx-acc__ind { margin-left: auto; }

  #cwx-landing .cwx-acc--ready .cwx-acc__panel { flex: none; }
  #cwx-landing .cwx-acc--ready .cwx-acc__item:not(.is-open) .cwx-acc__panel { display: none; }

  #cwx-landing .cwx-acc--ready .cwx-acc__info { grid-template-columns: 56px 1fr; }
  #cwx-landing .cwx-acc--ready .cwx-acc__buy { grid-column: 1 / -1; text-align: left; display: flex; }
  #cwx-landing .cwx-acc--ready .cwx-acc__cta { flex: 1; justify-content: center; min-height: 46px; }
}

@media (max-width: 980px) {
  #cwx-landing .cwx-hero__shell { grid-template-columns: 1fr; }
  #cwx-landing .cwx-hero__brand { padding: 66px 32px 58px; }
  #cwx-landing .cwx-hero__title { max-width: 620px; font-size: clamp(38px, 6.4vw, 56px); }
  #cwx-landing .cwx-hero__lead  { max-width: 540px; }
}

@media (max-width: 640px) {
  #cwx-landing .cwx-hero__brand { padding: 44px 20px 40px; }
  #cwx-landing .cwx-hero__brand::before { top: 44px; height: 50px; }

  #cwx-landing .cwx-hero__title {
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    max-width: 100%;
  }

  #cwx-landing .cwx-hero__lead { max-width: 100%; }

  #cwx-landing .cwx-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #cwx-landing .cwx-hero__actions .cwx-btn { width: 100%; }
}


/* ---------------------------------------------------------
   6b. BRAND STATEMENT BRIDGE
   A single quiet strip between the Hero and Brand Concept.
   No card, no radius, no interaction — it must not compete with
   the Hero or with WEARABLE TAPING.
   --------------------------------------------------------- */

#cwx-landing .cwx-bridge {
  background: var(--cwx-white);
  border-bottom: 1px solid var(--cwx-soft-line);
  padding: clamp(26px, 3.4vw, 42px) 0;
}

#cwx-landing .cwx-bridge__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 28px;
}

#cwx-landing .cwx-bridge__mark {
  align-self: center;
  width: 26px;
  height: 3px;
  background: var(--cwx-electric-blue);
  flex-shrink: 0;
}

#cwx-landing .cwx-bridge__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  white-space: nowrap;
}

#cwx-landing .cwx-bridge__main {
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--cwx-black);
}

#cwx-landing .cwx-bridge__sub {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cwx-muted);
  margin-left: auto;
  text-align: right;
}

@media (max-width: 860px) {
  #cwx-landing .cwx-bridge__inner { gap: 8px 18px; }
  #cwx-landing .cwx-bridge__sub { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ---------------------------------------------------------
   7. BRAND CONCEPT
   --------------------------------------------------------- */

#cwx-landing .cwx-concept__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5.5vw, 80px);
  align-items: start;
}

#cwx-landing .cwx-concept__title {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.035em;
  max-width: 520px;
}

#cwx-landing .cwx-concept__title span { display: block; }

#cwx-landing .cwx-concept__body {
  padding-top: 30px;
  border-top: 2px solid var(--cwx-black);
}

#cwx-landing .cwx-concept__body p {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--cwx-muted);
}

#cwx-landing .cwx-concept__body p + p { margin-top: 18px; }

#cwx-landing .cwx-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-black);
  border: 1px solid var(--cwx-black);
  margin-top: clamp(52px, 6.5vw, 84px);
}

#cwx-landing .cwx-pillar {
  background: var(--cwx-white);
  padding: 28px clamp(18px, 2.4vw, 30px) 32px;
}

#cwx-landing .cwx-pillar__mark {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--cwx-electric-blue);
  margin-bottom: 18px;
}

#cwx-landing .cwx-pillar h3 {
  font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 10px;
}

#cwx-landing .cwx-pillar p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--cwx-muted);
}

@media (max-width: 900px) {
  #cwx-landing .cwx-concept__inner { grid-template-columns: 1fr; gap: 32px; }
  #cwx-landing .cwx-pillars { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  #cwx-landing .cwx-concept__title { font-size: clamp(28px, 9vw, 40px); }
  #cwx-landing .cwx-concept__body p { font-size: 14px; }
}

/* ---------------------------------------------------------
   8. WEARABLE TAPING
   Official Wacoal Taiwan video is the dominant explanatory media.
   The old square support-line diagram is demoted to an accent layer:
   a thin motif beside the eyebrow and low-opacity lines behind the
   play control, never obstructing the poster subject.
   --------------------------------------------------------- */

#cwx-landing .cwx-tech__inner {
  display: grid;
  /* ~56 / 44 */
  grid-template-columns: 1.28fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "media head"
    "media lead"
    "media benefits"
    "media note";
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 0;
  align-items: start;
}

#cwx-landing .cwx-tech__head     { grid-area: head; }
#cwx-landing .cwx-tech__lead     { grid-area: lead; }
#cwx-landing .cwx-tech__benefits { grid-area: benefits; }
#cwx-landing .cwx-tech__note     { grid-area: note; }
/* Centred against the taller text column so the leftover space splits evenly
   instead of collecting as dead black space under the video.
   Scoped to the tech grid — .cwx-video is reused by ATHLETE STORY, which has
   no "media" named area and must not inherit this placement. */
#cwx-landing .cwx-tech__inner .cwx-video { grid-area: media; align-self: center; }

/* ---- Eyebrow + support-line motif ---- */
#cwx-landing .cwx-tech__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#cwx-landing .cwx-tech__motif {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 26px;
  flex-shrink: 0;
}

#cwx-landing .cwx-tech__motif i {
  display: block;
  height: 2px;
  background: var(--cwx-electric-blue);
  transform-origin: left center;
}
#cwx-landing .cwx-tech__motif i:nth-child(1) { width: 100%; opacity: 0.9; }
#cwx-landing .cwx-tech__motif i:nth-child(2) { width: 68%;  opacity: 0.6; }
#cwx-landing .cwx-tech__motif i:nth-child(3) { width: 40%;  opacity: 0.35; }

#cwx-landing .cwx-tech__title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--cwx-white);
  margin-bottom: 8px;
}

#cwx-landing .cwx-tech__sub {
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--cwx-electric-blue);
  margin-bottom: 18px;
}

#cwx-landing .cwx-tech__lead {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 28px;
  max-width: 46ch;
}

/* ---- Benefits ---- */
#cwx-landing .cwx-tech__benefits { border-top: 1px solid #2a2a2a; }

#cwx-landing .cwx-tech__benefit {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #2a2a2a;
}

#cwx-landing .cwx-tech__benefit-mark {
  margin-top: 7px;
  height: 2px;
  background: var(--cwx-electric-blue);
}

#cwx-landing .cwx-tech__benefit h3 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--cwx-white);
  margin-bottom: 4px;
}

#cwx-landing .cwx-tech__benefit p {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.56);
}

#cwx-landing .cwx-tech__note {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 16px;
  padding-left: 14px;
  border-left: 1px solid #2a2a2a;
  max-width: 46ch;
}

/* ---- Video ---- */
#cwx-landing .cwx-video__stage {
  position: relative;
  aspect-ratio: 16 / 9;          /* reserves the box -> no layout shift */
  overflow: hidden;
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 0;
}

/* The anchor and the injected iframe occupy exactly the same box */
#cwx-landing .cwx-video__link,
#cwx-landing .cwx-video__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#cwx-landing .cwx-video__link { cursor: pointer; }

#cwx-landing .cwx-video__link:focus-visible {
  outline: 2px solid var(--cwx-electric-blue);
  outline-offset: -4px;
}

#cwx-landing .cwx-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#cwx-landing .cwx-video__link:hover .cwx-video__poster { transform: scale(1.03); }

/* Readability scrim — keeps the play control and corner label legible
   without hiding the poster subject. */
#cwx-landing .cwx-video__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.34);
  transition: background 0.3s ease;
}
#cwx-landing .cwx-video__link:hover .cwx-video__scrim { background: rgba(8, 8, 8, 0.22); }

/* Demoted support-line layer: sits behind the play control only */
#cwx-landing .cwx-video__lines {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 96px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#cwx-landing .cwx-video__lines .cwx-taping-line {
  position: absolute;
  height: 2px;
  background: var(--cwx-electric-blue);
  box-shadow: 0 0 8px var(--cwx-blue-glow);
  transform-origin: left center;
  opacity: 0.42;
}

#cwx-landing .cwx-video__lines .cwx-taping-line--1 { width: 46%; left: 2%;  top: 22%; transform: rotate(20deg); }
#cwx-landing .cwx-video__lines .cwx-taping-line--2 { width: 54%; left: 44%; top: 50%; transform: rotate(-14deg); }
#cwx-landing .cwx-video__lines .cwx-taping-line--3 { width: 38%; left: 8%;  top: 76%; transform: rotate(26deg); }

#cwx-landing .cwx-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 11, 0.72);
  border: 1.5px solid var(--cwx-white);
  transition: background 0.22s ease, border-color 0.22s ease;
}

#cwx-landing .cwx-video__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 19px solid var(--cwx-white);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transition: border-left-color 0.22s ease;
}

#cwx-landing .cwx-video__link:hover .cwx-video__play,
#cwx-landing .cwx-video__link:focus-visible .cwx-video__play {
  background: var(--cwx-electric-blue);
  border-color: var(--cwx-electric-blue);
}

#cwx-landing .cwx-video__corner {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--cwx-black);
  color: var(--cwx-electric-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
}

#cwx-landing .cwx-video__cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
}

#cwx-landing .cwx-video__cap b {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}

/* ---- Responsive: single column, video after the introduction ---- */
@media (max-width: 980px) {
  #cwx-landing .cwx-tech__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "lead"
      "media"
      "benefits"
      "note";
    row-gap: 0;
  }
  #cwx-landing .cwx-tech__lead { margin-bottom: 22px; }
  #cwx-landing .cwx-video { margin-bottom: 26px; }
}

@media (max-width: 640px) {
  #cwx-landing .cwx-tech__title { font-size: clamp(26px, 8.5vw, 36px); }
  #cwx-landing .cwx-video__play { width: 60px; height: 60px; }
  #cwx-landing .cwx-video__play::before {
    border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px;
  }
  #cwx-landing .cwx-video__lines { width: 160px; height: 76px; }
}

/* ---------------------------------------------------------
   9. CHOOSE BY SCENE - editorial, non-uniform panels
   One lead activity panel + one text panel + one tall + one wide.
   aspect-ratio on every media box reserves space => no layout shift.
   --------------------------------------------------------- */

#cwx-landing .cwx-scenes__head { margin-bottom: 36px; }

#cwx-landing .cwx-scenes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-black);
  border: 1px solid var(--cwx-black);
}

#cwx-landing .cwx-scene {
  background: var(--cwx-white);
  display: flex;
  flex-direction: column;
}

#cwx-landing .cwx-scene--lead { grid-column: 1 / 3; }
#cwx-landing .cwx-scene--text { grid-column: 3 / 4; background: var(--cwx-black); color: var(--cwx-white); }
#cwx-landing .cwx-scene--tall { grid-column: 1 / 2; }
#cwx-landing .cwx-scene--wide { grid-column: 2 / 4; }

/* Media boxes - aspects chosen so the letterboxed source images
   (white bands top/bottom ~16.3%) are cropped away by object-fit:cover
   without cutting into the photograph itself. */
#cwx-landing .cwx-scene__media {
  position: relative;
  overflow: hidden;
  background: var(--cwx-stone);
}

#cwx-landing .cwx-scene--lead .cwx-scene__media { aspect-ratio: 16 / 9; }
#cwx-landing .cwx-scene--tall .cwx-scene__media { aspect-ratio: 4 / 5; }
#cwx-landing .cwx-scene--wide .cwx-scene__media { aspect-ratio: 16 / 10; }

#cwx-landing .cwx-scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#cwx-landing .cwx-scene--lead .cwx-scene__media img { object-position: center 45%; }
#cwx-landing .cwx-scene--wide .cwx-scene__media img { object-position: 42% center; }

#cwx-landing .cwx-scene__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#cwx-landing .cwx-scene--text .cwx-scene__body {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  justify-content: center;
}

#cwx-landing .cwx-scene__mark {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--cwx-electric-blue);
  margin-bottom: 16px;
}

#cwx-landing .cwx-scene__title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 10px;
}

#cwx-landing .cwx-scene--text .cwx-scene__title { font-size: clamp(20px, 2.1vw, 26px); }

#cwx-landing .cwx-scene__desc {
  font-size: 13px;
  color: var(--cwx-muted);
  line-height: 1.8;
  flex: 1;
}

#cwx-landing .cwx-scene--text .cwx-scene__desc { color: rgba(255, 255, 255, 0.66); }

#cwx-landing .cwx-scene__tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 18px;
  padding: 5px 10px;
  border: 1px solid var(--cwx-soft-line);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--cwx-muted);
  background: var(--cwx-paper);
}

#cwx-landing .cwx-scene--text .cwx-scene__tag {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.75);
}

#cwx-landing .cwx-scene__link {
  align-self: flex-start;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  transition: color 0.15s ease;
}

#cwx-landing .cwx-scene__link:hover { color: var(--cwx-electric-blue); }

@media (max-width: 900px) {
  #cwx-landing .cwx-scenes__grid { grid-template-columns: 1fr; }
  #cwx-landing .cwx-scene--lead,
  #cwx-landing .cwx-scene--text,
  #cwx-landing .cwx-scene--tall,
  #cwx-landing .cwx-scene--wide { grid-column: 1 / -1; }
  /* Stacked full-width: a portrait ratio here produced an ~860px image on
     tablet. 1:1 keeps the whole waist-to-feet crop without the giant frame —
     a landscape ratio would clip the legs (subject spans 7.7%–93.5%). */
  #cwx-landing .cwx-scene--tall .cwx-scene__media { aspect-ratio: 1 / 1; }
  #cwx-landing .cwx-scene--lead .cwx-scene__media { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------
   9b/10. PRODUCT EXPLORER
   One coherent buying guide: need mode -> one primary recommendation
   -> supporting products -> full collection. Replaces the old separate
   need cards / category filter buttons / FEATURE 01+02 modules.
   --------------------------------------------------------- */

#cwx-landing .cwx-products__head { margin-bottom: clamp(26px, 3.2vw, 40px); }

/* ---- Mode selector (tabs) ---- */
#cwx-landing .cwx-explorer__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-black);
  border: 1px solid var(--cwx-black);
}

#cwx-landing .cwx-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 20px 20px;
  background: var(--cwx-white);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

#cwx-landing .cwx-mode:hover { background: var(--cwx-paper); }

/* Active marker: a restrained blue-violet bar, not a pill */
#cwx-landing .cwx-mode::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--cwx-electric-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s ease;
}

#cwx-landing .cwx-mode[aria-selected="true"] { background: var(--cwx-paper); }
#cwx-landing .cwx-mode[aria-selected="true"]::before { transform: scaleX(1); }

#cwx-landing .cwx-mode:focus-visible {
  outline: 2px solid var(--cwx-electric-blue);
  outline-offset: -3px;
  z-index: 1;
}

#cwx-landing .cwx-mode__num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--cwx-soft-text);
}
#cwx-landing .cwx-mode[aria-selected="true"] .cwx-mode__num { color: var(--cwx-electric-blue); }

#cwx-landing .cwx-mode__en {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
}

#cwx-landing .cwx-mode__zh {
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--cwx-black);
}

#cwx-landing .cwx-mode__ctx {
  font-size: 12px;
  color: var(--cwx-muted);
  line-height: 1.6;
}

/* ---- Panel ---- */
#cwx-landing .cwx-panel {
  border: 1px solid var(--cwx-soft-line);
  border-top: none;
  background: var(--cwx-white);
  padding: clamp(22px, 3vw, 36px);
}

/* Base (no JS): every panel readable, separated by its own label */
#cwx-landing .cwx-panel + .cwx-panel { border-top: 1px solid var(--cwx-soft-line); margin-top: 18px; }

#cwx-landing .cwx-panel__context {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cwx-electric-blue);
  margin-bottom: 18px;
}

/* ---- Primary recommendation ---- */
#cwx-landing .cwx-primary {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1px;
  background: var(--cwx-soft-line);
  border: 1px solid var(--cwx-soft-line);
}

#cwx-landing .cwx-primary__media {
  --cwx-pri-scale: 1;
  --cwx-pri-pos: center center;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cwx-paper);
}

#cwx-landing .cwx-primary__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cwx-pri-pos);
  transform: scale(var(--cwx-pri-scale));
}

/* Measured crops — every figure/garment stays inside the frame */
#cwx-landing .cwx-primary--m1 .cwx-primary__media { --cwx-pri-scale: 1.06; --cwx-pri-pos: center 45%; }
#cwx-landing .cwx-primary--m2 .cwx-primary__media { --cwx-pri-scale: 1.08; --cwx-pri-pos: center 50%; }
#cwx-landing .cwx-primary--m3 .cwx-primary__media { --cwx-pri-scale: 1.52; --cwx-pri-pos: center 50%; }

#cwx-landing .cwx-primary__tag {
  position: absolute;
  top: 0; left: 0;
  background: var(--cwx-black);
  color: var(--cwx-electric-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
}

#cwx-landing .cwx-primary__info {
  background: var(--cwx-white);
  padding: clamp(22px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#cwx-landing .cwx-primary__cat {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cwx-electric-blue);
  margin-bottom: 10px;
}

#cwx-landing .cwx-primary__name {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.38;
  margin-bottom: 10px;
}

#cwx-landing .cwx-primary__model {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  background: var(--cwx-soft-gray);
  border: 1px solid var(--cwx-soft-line);
  color: var(--cwx-muted);
  margin-bottom: 16px;
}

#cwx-landing .cwx-primary__ctx {
  font-size: 13px;
  line-height: 1.85;
  color: var(--cwx-muted);
  padding-top: 14px;
  border-top: 1px solid var(--cwx-soft-line);
  margin-bottom: 20px;
}

#cwx-landing .cwx-primary__buy {
  display: flex;
  align-items: center;
  gap: 14px;
}

#cwx-landing .cwx-primary__pack {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border: 1px solid var(--cwx-soft-line);
  background: var(--cwx-paper);
  overflow: hidden;
}
#cwx-landing .cwx-primary__pack img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px;
}

#cwx-landing .cwx-primary__price {
  display: block;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* ---- Supporting products ---- */
#cwx-landing .cwx-panel__subhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(24px, 3vw, 36px) 0 16px;
}

#cwx-landing .cwx-panel__subhead span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  white-space: nowrap;
}

#cwx-landing .cwx-panel__subhead i {
  flex: 1;
  height: 1px;
  background: var(--cwx-soft-line);
}

#cwx-landing .cwx-support {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-soft-line);
  border: 1px solid var(--cwx-soft-line);
}

/* Two-recommendation panels keep the same card width rhythm */
#cwx-landing .cwx-support--two { grid-template-columns: repeat(2, 1fr); }

#cwx-landing .cwx-panel__more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* ---- Compact supporting card (unchanged 1:1 contain treatment) ---- */
#cwx-landing .cwx-product {
  background: var(--cwx-white);
  display: flex;
  flex-direction: column;
  transition: background 0.16s ease;
}

#cwx-landing .cwx-product:hover { background: var(--cwx-paper); }

/* Whole card reads as one target: focusing the link marks the card */
#cwx-landing .cwx-product:focus-within { background: var(--cwx-paper); }
#cwx-landing .cwx-product:focus-within .cwx-product__link {
  color: var(--cwx-electric-blue);
  border-bottom-color: var(--cwx-electric-blue);
}

#cwx-landing .cwx-product__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--cwx-paper);
  border-bottom: 1px solid var(--cwx-soft-line);
  overflow: hidden;
}

#cwx-landing .cwx-product__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8%;
  transition: transform 0.3s ease;
}

#cwx-landing .cwx-product:hover .cwx-product__img { transform: scale(1.02); }

#cwx-landing .cwx-product__body {
  padding: 14px 15px 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#cwx-landing .cwx-product__context {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--cwx-electric-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
}

#cwx-landing .cwx-product__name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin-bottom: 8px;
  flex: 1;
}

/* Model number demoted to quiet metadata — it was competing with the
   product name inside a boxed badge. */
#cwx-landing .cwx-product__model {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--cwx-soft-text);
  margin-bottom: 10px;
}

#cwx-landing .cwx-product__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--cwx-soft-line);
  padding-top: 11px;
}

#cwx-landing .cwx-product__price {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#cwx-landing .cwx-product__link {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--cwx-black);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#cwx-landing .cwx-product__link:hover {
  color: var(--cwx-electric-blue);
  border-bottom-color: var(--cwx-electric-blue);
}

/* =========================================================
   ENHANCED STATE — one panel at a time, only after JS init
   ========================================================= */

#cwx-landing .cwx-explorer--ready .cwx-panel { display: none; }

#cwx-landing .cwx-explorer--ready .cwx-panel.is-active {
  display: block;
  margin-top: 0;
  border-top: none;
  animation: cwxPanelIn 260ms ease both;
}

@keyframes cwxPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* The mode label is redundant once the tab itself shows the state */
#cwx-landing .cwx-explorer--ready .cwx-panel__context { display: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  #cwx-landing .cwx-primary { grid-template-columns: 1fr; }
  #cwx-landing .cwx-primary__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  #cwx-landing .cwx-explorer__modes { grid-template-columns: 1fr; }
  #cwx-landing .cwx-mode {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    min-height: 64px;
    padding: 14px 16px;
  }
  #cwx-landing .cwx-mode::before {
    right: auto;
    bottom: 0;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  #cwx-landing .cwx-mode[aria-selected="true"]::before { transform: scaleY(1); }
  #cwx-landing .cwx-mode__ctx { flex-basis: 100%; }

  #cwx-landing .cwx-support,
  #cwx-landing .cwx-support--two { grid-template-columns: repeat(2, 1fr); }

  #cwx-landing .cwx-primary__media { aspect-ratio: 1 / 1; }
  #cwx-landing .cwx-panel__more { justify-content: stretch; }
  #cwx-landing .cwx-panel__more .cwx-btn { width: 100%; }
}

@media (max-width: 400px) {
  #cwx-landing .cwx-product__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------------------------------------------------------
   10b. APPROVED ATHLETE CLAIM
   Consumer-facing wording is fixed to the approved phrase
   「大谷翔平愛用款」. Deliberately provenance styling — thin rules,
   black/white/blue-violet only. No gold, no red badge, no burst.
   --------------------------------------------------------- */

#cwx-landing .cwx-claim {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start;
  padding: 7px 10px 8px;
  border: 1px solid var(--cwx-black);
  border-left: 3px solid var(--cwx-electric-blue);
  margin-bottom: 10px;
}

#cwx-landing .cwx-claim__series {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  line-height: 1;
}

#cwx-landing .cwx-claim__name {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cwx-black);
  line-height: 1.2;
}

/* ---------------------------------------------------------
   10c. ATHLETE STORY
   Paper ground on purpose — WEARABLE TAPING keeps the page's
   single large black technology moment.
   --------------------------------------------------------- */

#cwx-landing .cwx-athlete__inner {
  display: grid;
  grid-template-columns: 1fr 1.28fr;   /* ~44 / 56 */
  column-gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

#cwx-landing .cwx-athlete__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#cwx-landing .cwx-athlete__motif {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 26px;
  flex-shrink: 0;
}
#cwx-landing .cwx-athlete__motif i { display: block; height: 2px; background: var(--cwx-electric-blue); }
#cwx-landing .cwx-athlete__motif i:nth-child(1) { width: 100%; opacity: 0.9; }
#cwx-landing .cwx-athlete__motif i:nth-child(2) { width: 62%;  opacity: 0.55; }
#cwx-landing .cwx-athlete__motif i:nth-child(3) { width: 36%;  opacity: 0.3; }

#cwx-landing .cwx-athlete__title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--cwx-black);
  margin-bottom: 10px;
}

#cwx-landing .cwx-athlete__series {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cwx-electric-blue);
  line-height: 1.5;
  margin-bottom: 18px;
}

#cwx-landing .cwx-athlete__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--cwx-muted);
  padding-top: 18px;
  border-top: 1px solid var(--cwx-soft-line);
  margin-bottom: 22px;
  max-width: 44ch;
}

/* Compact product identity block */
#cwx-landing .cwx-athlete__product {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--cwx-soft-line);
  background: var(--cwx-white);
  padding: 14px;
  margin-bottom: 18px;
}

#cwx-landing .cwx-athlete__pack {
  width: 72px;
  height: 72px;
  border: 1px solid var(--cwx-soft-line);
  background: var(--cwx-paper);
  overflow: hidden;
}
#cwx-landing .cwx-athlete__pack img {
  width: 100%; height: 100%; object-fit: contain; padding: 6px;
}

#cwx-landing .cwx-athlete__pname {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.45;
  margin-bottom: 6px;
}

#cwx-landing .cwx-athlete__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#cwx-landing .cwx-athlete__model {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  background: var(--cwx-soft-gray);
  border: 1px solid var(--cwx-soft-line);
  color: var(--cwx-muted);
}

#cwx-landing .cwx-athlete__price {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#cwx-landing .cwx-athlete__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#cwx-landing .cwx-athlete__alt {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cwx-muted);
  border-bottom: 1px solid var(--cwx-soft-line);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#cwx-landing .cwx-athlete__alt:hover {
  color: var(--cwx-electric-blue);
  border-bottom-color: var(--cwx-electric-blue);
}

/* ---- Custom video poster (NO Ohtani still, no YouTube thumbnail) ---- */
#cwx-landing .cwx-vposter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: var(--cwx-black);
  background-image: radial-gradient(circle, rgba(93, 124, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

#cwx-landing .cwx-vposter__lines {
  position: absolute;
  left: 50%; top: 50%;
  width: 220px; height: 110px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#cwx-landing .cwx-vposter__lines i {
  position: absolute;
  height: 2px;
  background: var(--cwx-electric-blue);
  opacity: 0.3;
  transform-origin: left center;
}
#cwx-landing .cwx-vposter__lines i:nth-child(1) { width: 44%; left: 3%;  top: 20%; transform: rotate(19deg); }
#cwx-landing .cwx-vposter__lines i:nth-child(2) { width: 52%; left: 45%; top: 52%; transform: rotate(-13deg); }
#cwx-landing .cwx-vposter__lines i:nth-child(3) { width: 36%; left: 9%;  top: 78%; transform: rotate(25deg); }

#cwx-landing .cwx-vposter__label {
  position: relative;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cwx-electric-blue);
}

#cwx-landing .cwx-vposter__title {
  position: relative;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cwx-white);
  line-height: 1.35;
}

#cwx-landing .cwx-vposter__sub {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

#cwx-landing .cwx-vposter__play {
  position: relative;
  margin-top: 8px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 11, 0.6);
  border: 1.5px solid var(--cwx-white);
  transition: background 0.22s ease, border-color 0.22s ease;
}
#cwx-landing .cwx-vposter__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 17px solid var(--cwx-white);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
#cwx-landing .cwx-video__link:hover .cwx-vposter__play,
#cwx-landing .cwx-video__link:focus-visible .cwx-vposter__play {
  background: var(--cwx-electric-blue);
  border-color: var(--cwx-electric-blue);
}

/* Caption on the paper ground needs dark text, unlike the tech section */
#cwx-landing .cwx-athlete .cwx-video__cap { color: var(--cwx-muted); }
#cwx-landing .cwx-athlete .cwx-video__cap b { color: var(--cwx-black); }

/* Cross-link from the LOWER BODY explorer panel */
#cwx-landing .cwx-panel__link {
  margin-right: auto;
  align-self: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cwx-black);
  border-bottom: 1.5px solid var(--cwx-electric-blue);
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
#cwx-landing .cwx-panel__link:hover { color: var(--cwx-electric-blue); }

@media (max-width: 900px) {
  #cwx-landing .cwx-athlete__inner { grid-template-columns: 1fr; }
  #cwx-landing .cwx-athlete__media { margin-top: 26px; }
}

@media (max-width: 720px) {
  #cwx-landing .cwx-athlete__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  #cwx-landing .cwx-athlete__actions .cwx-btn { width: 100%; }
  #cwx-landing .cwx-athlete__alt { align-self: flex-start; }
  #cwx-landing .cwx-vposter__play { width: 54px; height: 54px; }
  #cwx-landing .cwx-panel__link { margin-right: 0; margin-bottom: 12px; }
}

/* ---------------------------------------------------------
   11. REAL TESTING PROJECT — COMING SOON
   Secondary weight. No JS. No people. No fake cards.
   --------------------------------------------------------- */

#cwx-landing .cwx-coming__panel {
  position: relative;
  border-top: 1px solid var(--cwx-black);
  border-bottom: 1px solid var(--cwx-black);
  padding: clamp(24px, 3vw, 34px) 0 clamp(24px, 3vw, 34px) clamp(18px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
}

#cwx-landing .cwx-coming__panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--cwx-electric-blue);
}

#cwx-landing .cwx-coming__label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  margin-bottom: 10px;
}

#cwx-landing .cwx-coming__title {
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  max-width: 560px;
}

#cwx-landing .cwx-coming__desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--cwx-muted);
  max-width: 60ch;
}

#cwx-landing .cwx-coming__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

#cwx-landing .cwx-coming__status-line {
  width: 56px;
  height: 3px;
  background: var(--cwx-electric-blue);
}

#cwx-landing .cwx-coming__status-text {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cwx-black);
  border: 1px solid var(--cwx-black);
  padding: 10px 16px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  #cwx-landing .cwx-coming__panel {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }
}

/* ---------------------------------------------------------
   12. SIZE & SELECTION GUIDE
   --------------------------------------------------------- */

#cwx-landing .cwx-guide__head { margin-bottom: clamp(28px, 3.4vw, 42px); max-width: 640px; }

/* Three-step decision frame — thin rules, no cards, no icons */
#cwx-landing .cwx-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cwx-black);
  border-top: 1px solid var(--cwx-black);
  border-bottom: 1px solid var(--cwx-black);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

#cwx-landing .cwx-step {
  background: var(--cwx-white);
  padding: 22px clamp(16px, 2vw, 26px) 24px;
}

#cwx-landing .cwx-step__num {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--cwx-electric-blue);
  line-height: 1;
  margin-bottom: 12px;
}

#cwx-landing .cwx-step__title {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin-bottom: 8px;
}

#cwx-landing .cwx-step__desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--cwx-muted);
}

#cwx-landing .cwx-guide__jump {
  display: inline-block;
  margin-top: 6px;
  font-weight: 900;
  color: var(--cwx-black);
  border-bottom: 1.5px solid var(--cwx-electric-blue);
  padding-bottom: 1px;
  transition: color 0.15s ease;
}
#cwx-landing .cwx-guide__jump:hover { color: var(--cwx-electric-blue); }

/* Detail is now progressive disclosure under the frame, not the frame itself */
#cwx-landing .cwx-guide__detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
#cwx-landing .cwx-guide__detail-head span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cwx-graphite);
  white-space: nowrap;
}
#cwx-landing .cwx-guide__detail-head i { flex: 1; height: 1px; background: var(--cwx-soft-line); }

#cwx-landing .cwx-guide__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

#cwx-landing .cwx-guide__list { display: grid; }

#cwx-landing .cwx-guide__row {
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--cwx-soft-line);
}
#cwx-landing .cwx-guide__row:first-child { border-top: 1px solid var(--cwx-soft-line); }

#cwx-landing .cwx-guide__row h3 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

#cwx-landing .cwx-guide__row p {
  font-size: 13px;
  color: var(--cwx-muted);
  line-height: 1.85;
}

@media (max-width: 900px) {
  #cwx-landing .cwx-guide__inner { grid-template-columns: 1fr; row-gap: 4px; }
  #cwx-landing .cwx-steps { grid-template-columns: 1fr; }
  #cwx-landing .cwx-step { padding: 16px 0 18px; }
  #cwx-landing .cwx-steps {
    background: transparent;
    border-bottom: none;
    gap: 0;
  }
  #cwx-landing .cwx-step + .cwx-step { border-top: 1px solid var(--cwx-soft-line); }
}

/* ---------------------------------------------------------
   13. FAQ — semantic button accordion
   --------------------------------------------------------- */

#cwx-landing .cwx-faq__head {
  text-align: center;
  margin-bottom: 44px;
}

#cwx-landing .cwx-faq__head .cwx-lead { margin-inline: auto; }

#cwx-landing .cwx-faq__list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 1px;
  background: var(--cwx-soft-line);
  border: 1px solid var(--cwx-soft-line);
}

#cwx-landing .cwx-faq__item { background: var(--cwx-white); }

#cwx-landing .cwx-faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 30px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--cwx-black);
  transition: background 0.18s ease;
}

#cwx-landing .cwx-faq__question:hover { background: var(--cwx-paper); }

/* Open row gets a blue-violet edge so the active question is unmistakable */
#cwx-landing .cwx-faq__item { position: relative; }
#cwx-landing .cwx-faq__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cwx-electric-blue);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.24s ease;
}
#cwx-landing .cwx-faq__item:has(.cwx-faq__question[aria-expanded="true"])::before { transform: scaleY(1); }

#cwx-landing .cwx-faq__toggle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--cwx-soft-line);
  display: grid;
  place-items: center;
  color: var(--cwx-graphite);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#cwx-landing .cwx-faq__toggle::before,
#cwx-landing .cwx-faq__toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.24s ease, opacity 0.24s ease;
}

#cwx-landing .cwx-faq__toggle { position: relative; }
#cwx-landing .cwx-faq__toggle::before { width: 12px; height: 2px; }
#cwx-landing .cwx-faq__toggle::after  { width: 2px;  height: 12px; }

#cwx-landing .cwx-faq__question[aria-expanded="true"] .cwx-faq__toggle {
  background: var(--cwx-black);
  border-color: var(--cwx-black);
  color: var(--cwx-white);
}

#cwx-landing .cwx-faq__question[aria-expanded="true"] .cwx-faq__toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

/* Closed state is applied by JS via [hidden]; without JS the answer stays open */
#cwx-landing .cwx-faq__answer {
  padding: 0 30px 26px;
}

#cwx-landing .cwx-faq__answer p {
  font-size: 14px;
  color: var(--cwx-muted);
  line-height: 2;
  max-width: 68ch;
}

#cwx-landing .cwx-faq__answer[hidden] { display: none; }

/* ---------------------------------------------------------
   14. FINAL CTA
   --------------------------------------------------------- */

#cwx-landing .cwx-final { border-bottom: none; }

#cwx-landing .cwx-final__inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}

#cwx-landing .cwx-final__title {
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 14px 0 18px;
  color: var(--cwx-white);
}

#cwx-landing .cwx-final__panel {
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: clamp(26px, 3.2vw, 40px);
  display: grid;
  gap: 18px;
}

#cwx-landing .cwx-final__stat { display: grid; gap: 4px; }

#cwx-landing .cwx-final__stat-line {
  width: 30px;
  height: 3px;
  background: var(--cwx-electric-blue);
  margin-bottom: 8px;
}

#cwx-landing .cwx-final__stat b {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cwx-white);
}

#cwx-landing .cwx-final__stat span {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
  #cwx-landing .cwx-final__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   15. ANIMATION BASE STATES
   Applied ONLY when JS confirms GSAP is available and motion is allowed.
   Without the .cwx-anim-ready class every element is fully visible,
   so a CDN failure can never hide content.
   --------------------------------------------------------- */

/* Only elements that have NOT yet finished revealing are hidden.
   The reveal tween adds .is-revealed in its onComplete BEFORE clearing the
   inline styles, so a completed element can never fall back into the hidden
   state — on scroll-up, filtering, resize, tab switch, or ScrollTrigger refresh. */
#cwx-landing.cwx-anim-ready .cwx-fade-up:not(.is-revealed) {
  opacity: 0;
  transform: translateY(22px);
}

#cwx-landing.cwx-anim-ready .cwx-taping-line:not(.is-revealed) {
  opacity: 0;
}

/* ---------------------------------------------------------
   16. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #cwx-landing .cwx-fade-up,
  #cwx-landing .cwx-fade-up:not(.is-revealed) {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Accent opacity, not full — these lines stay a supporting layer.
     Rotations match the video-overlay values. */
  #cwx-landing .cwx-taping-line,
  #cwx-landing .cwx-taping-line:not(.is-revealed) {
    opacity: 0.42 !important;
  }

  #cwx-landing .cwx-video__lines .cwx-taping-line--1 { transform: rotate(20deg); }
  #cwx-landing .cwx-video__lines .cwx-taping-line--2 { transform: rotate(-14deg); }
  #cwx-landing .cwx-video__lines .cwx-taping-line--3 { transform: rotate(26deg); }

  #cwx-landing .cwx-video__poster { transition: none; }
  #cwx-landing .cwx-video__link:hover .cwx-video__poster { transform: none; }

  /* No motion on hover — but the composed crop must be preserved,
     not reset to a centred default. */
  #cwx-landing .cwx-product__img { transition: none; }
  #cwx-landing .cwx-product:hover .cwx-product__img { transform: none; }

  #cwx-landing .cwx-explorer--ready .cwx-panel.is-active { animation: none; }
  #cwx-landing .cwx-mode,
  #cwx-landing .cwx-mode::before { transition: none; }

  #cwx-landing .cwx-acc,
  #cwx-landing .cwx-acc--ready { transition: none; }
  #cwx-landing .cwx-acc--ready .cwx-acc__panel,
  #cwx-landing .cwx-acc--ready .cwx-acc__item:not(.is-open) .cwx-acc__panel { transition: none; }
}

/* =========================================================
   CW-X BRAND PAGE — END
   ========================================================= */