/* WJS Home — component styles. Colours, spacing, radii, sizes and shadows come from tokens.json (var(--…)).
   Type sizes are the 8 locked styles (Mulish Bold 28 / 24 / 18 / 16 / 14, Archivo Regular 16 / 14 / 12, line height 140%).
   Breakpoints: tablet ≤1023px, mobile ≤599px. Prefix: wjs-. */
:root {
  --fs-title-28: 28px; --fs-title-24: 24px; --fs-title-18: 18px; --fs-title-16: 16px; --fs-title-14: 14px;
  --fs-body-16: 16px; --fs-body-14: 14px; --fs-body-12: 12px;
  --z-header: 20; --z-drawer: 100;
}

/* ---------- base ---------- */
body { margin: 0; font-family: var(--font-text); color: var(--fg-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wjs-root { font-family: var(--font-text); color: var(--fg-primary); background: var(--surface-page); font-size: var(--fs-body-16); line-height: 1.4; }
.wjs-root *, .wjs-root *::before, .wjs-root *::after, .wjs-pv *, .wjs-pv *::before, .wjs-pv *::after { box-sizing: border-box; }
.wjs-root strong, .wjs-root b, .wjs-pv strong, .wjs-pv b { font-family: var(--font-title); font-weight: 700; }
.wjs-pv { padding: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: flex-start; font-family: var(--font-text); color: var(--fg-primary); }
.wjs-pv--col { flex-direction: column; }
.wjs-pv--white { background: var(--surface-card); }
.wjs-pv-label { width: 100%; font: 700 var(--fs-title-14)/1.4 var(--font-title); color: var(--fg-secondary); margin: var(--space-8) 0 calc(var(--space-4) * -1); }
.wjs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wjs-icon { display: inline-block; flex: none; vertical-align: middle; }
.wjs-container { max-width: calc(var(--container-max) + 2 * var(--page-gutter)); margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.wjs-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.wjs-section--band { background: var(--surface-section); }
.wjs-section--warm { background: var(--surface-warm); }
.wjs-stack { display: flex; flex-direction: column; }
.wjs-row { display: flex; align-items: center; }
.wjs-divider { border: 0; border-top: 1px solid var(--divider); margin: 0; }
a { color: inherit; }
:where(.wjs-root, .wjs-pv) :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@media (max-width: 1023px) { .wjs-container { padding-left: var(--page-gutter-t); padding-right: var(--page-gutter-t); } }
@media (max-width: 599px) { .wjs-container { padding-left: var(--page-gutter-m); padding-right: var(--page-gutter-m); } .wjs-section { padding-top: var(--section-pad-m); padding-bottom: var(--section-pad-m); } }
@media (prefers-reduced-motion: reduce) { .wjs-root *, .wjs-pv * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ---------- type: the 8 locked styles, same on every breakpoint ---------- */
.wjs-display-1, .wjs-display-2, .wjs-h1 { font: 700 var(--fs-title-28)/1.4 var(--font-title); margin: 0; }
.wjs-h2, .wjs-h3 { font: 700 var(--fs-title-24)/1.4 var(--font-title); margin: 0; }
.wjs-h4, .wjs-h5 { font: 700 var(--fs-title-18)/1.4 var(--font-title); margin: 0; }
.wjs-h6 { font: 700 var(--fs-title-16)/1.4 var(--font-title); margin: 0; }
.wjs-h3.wjs-strong { font-weight: 700; }
.wjs-body-l, .wjs-body { font: 400 var(--fs-body-16)/1.4 var(--font-text); margin: 0; }
.wjs-body-s { font: 400 var(--fs-body-14)/1.4 var(--font-text); margin: 0; }
.wjs-caption { font: 400 var(--fs-body-12)/1.4 var(--font-text); margin: 0; }
.wjs-medium { font-family: var(--font-title); font-weight: 700; }
.wjs-muted { color: var(--fg-secondary); }
.wjs-subtle { color: var(--fg-secondary); }
.wjs-eyebrow { font: 700 var(--fs-title-14)/1.4 var(--font-title); color: var(--fg-secondary); margin: 0; }
.wjs-tnum { font-variant-numeric: tabular-nums; }
/* ---------- Button ---------- */
.wjs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: 1px solid transparent; font-family: var(--font-text); font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; background: transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.wjs-btn--lg { height: var(--control-lg); padding: 0 var(--space-40); border-radius: var(--radius-md); font-size: var(--fs-body-16); }
.wjs-btn--md { height: var(--control-md); padding: 0 var(--space-24); border-radius: var(--radius-sm); font-size: var(--fs-body-16); }
.wjs-btn--sm { height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-sm); font-size: var(--fs-body-14); }
.wjs-btn--lg .wjs-icon { width: var(--icon-lg); height: var(--icon-lg); }
.wjs-btn--md .wjs-icon, .wjs-btn--sm .wjs-icon { width: var(--icon-md); height: var(--icon-md); }
.wjs-btn--block { width: 100%; }
.wjs-btn--primary { background: var(--action-primary-bg); color: var(--fg-on-inverse); }
.wjs-btn--primary:hover { background: var(--action-primary-hover-bg); }
.wjs-btn--primary:active { background: var(--action-primary-active-bg); }
.wjs-btn--secondary { background: var(--surface-card); border-color: var(--divider-strong); color: var(--action-secondary-fg); }
.wjs-btn--secondary:hover { background: var(--action-secondary-hover-bg); }
.wjs-btn--secondary:active { background: var(--action-secondary-hover-bg); border-color: var(--fg-primary); }
.wjs-btn--outlined { border-color: var(--fg-primary); color: var(--action-secondary-fg); }
.wjs-btn--outlined:hover { background: var(--surface-card); color: var(--bg-black); }
.wjs-btn--outlined:active { background: var(--surface-section); color: var(--border-black); }
.wjs-btn--ghost { color: var(--fg-primary); }
.wjs-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.wjs-btn--ghost:active { color: var(--border-black); }
.wjs-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-btn[disabled], .wjs-btn[aria-disabled="true"] { cursor: not-allowed; }
.wjs-btn--primary[disabled], .wjs-btn--secondary[disabled] { background: var(--surface-section); color: var(--fg-disabled); }
.wjs-btn--outlined[disabled] { border-color: var(--divider-strong); color: var(--fg-disabled); background: transparent; }
.wjs-btn--ghost[disabled] { color: var(--fg-disabled); text-decoration: none; }
.wjs-btn__swap { display: inline-flex; }
.wjs-btn__swap .wjs-icon + .wjs-icon { display: none; }
.wjs-btn:hover:not([disabled]) .wjs-btn__swap .wjs-icon:first-child { display: none; }
.wjs-btn:hover:not([disabled]) .wjs-btn__swap .wjs-icon + .wjs-icon { display: inline-block; }
.wjs-btn.is-loading { cursor: progress; }
.wjs-spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: wjs-spin .8s linear infinite; flex: none; }
@keyframes wjs-spin { to { transform: rotate(360deg); } }
.wjs-btn--on-image.wjs-btn--outlined { border-color: var(--global-white); color: var(--global-white); }
.wjs-btn--on-image.wjs-btn--outlined:hover { background: var(--global-white); color: var(--fg-primary); }
.wjs-btn--on-image:focus-visible { box-shadow: var(--focus-ring-inverse); }

/* ---------- IconButton ---------- */
.wjs-ibtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid transparent; background: transparent; cursor: pointer; color: inherit; padding: 0; transition: background-color .15s, color .15s, border-color .15s; }
.wjs-ibtn--lg { width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-md); }
.wjs-ibtn--md { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-sm); }
.wjs-ibtn--sm { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-sm); }
.wjs-ibtn--lg .wjs-icon { width: var(--icon-lg); height: var(--icon-lg); }
.wjs-ibtn--md .wjs-icon, .wjs-ibtn--sm .wjs-icon { width: var(--icon-md); height: var(--icon-md); }
.wjs-ibtn--circle { border-radius: var(--radius-pill); }
.wjs-ibtn--primary { background: var(--action-primary-bg); color: var(--fg-on-inverse); }
.wjs-ibtn--primary:hover { background: var(--action-primary-hover-bg); }
.wjs-ibtn--primary:active { background: var(--action-primary-active-bg); }
.wjs-ibtn--secondary { background: var(--surface-card); border-color: var(--divider-strong); color: var(--action-secondary-fg); }
.wjs-ibtn--secondary:hover { background: var(--action-secondary-hover-bg); }
.wjs-ibtn--outlined { border-color: var(--fg-primary); color: var(--fg-primary); }
.wjs-ibtn--outlined:hover { background: var(--surface-card); color: var(--bg-black); }
.wjs-ibtn--ghost { color: var(--fg-primary); }
.wjs-ibtn--ghost:hover { background: var(--surface-section); }
.wjs-ibtn--surface { background: var(--surface-card); border-color: var(--divider); color: var(--fg-primary); }
.wjs-ibtn--surface:hover { border-color: var(--control-border-hover); }
.wjs-ibtn--on-image { border-color: var(--global-white); color: var(--global-white); }
.wjs-ibtn--on-image:hover { background: var(--overlay-scrim); }
.wjs-ibtn--on-image:focus-visible { box-shadow: var(--focus-ring-inverse); }
.wjs-ibtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-ibtn[disabled] { cursor: not-allowed; color: var(--fg-disabled); background: transparent; border-color: var(--divider); }
.wjs-ibtn--primary[disabled], .wjs-ibtn--secondary[disabled] { background: var(--surface-section); }
.wjs-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--bg-black); color: var(--global-white); font: 400 11px/16px var(--font-text); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- TextLink ---------- */
.wjs-link { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-4); }
.wjs-link:hover { color: var(--fg-primary); text-decoration-thickness: 2px; }
.wjs-link--subtle { color: var(--fg-secondary); }
.wjs-link--inverse { color: var(--fg-on-inverse); }
.wjs-link--inverse:hover { color: var(--global-white); }
.wjs-link--inverse:focus-visible { box-shadow: var(--focus-ring-inverse); }
.wjs-link--small { font-size: var(--fs-body-14); }

/* ---------- Badge ---------- */
.wjs-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); font: 400 var(--fs-body-12)/1.4 var(--font-text); white-space: nowrap; }
.wjs-badge--neutral { background: var(--badge-feature-bg); color: var(--badge-feature-fg); }
.wjs-badge--new { background: var(--badge-new-bg); color: var(--badge-new-fg); }
.wjs-badge--set { background: var(--badge-feature-bg); color: var(--badge-feature-fg); }
.wjs-badge--bestseller { background: var(--badge-feature-bg); color: var(--badge-feature-fg); }
.wjs-badge--sale { background: var(--badge-sale-bg); color: var(--badge-sale-fg); }
.wjs-badge--soldout { background: var(--surface-card); color: var(--fg-primary); border: 1px solid var(--divider-strong); }

/* ---------- Price ---------- */
.wjs-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-8); row-gap: var(--space-4); font-family: var(--font-title); color: var(--fg-primary); margin: 0; }
.wjs-price__now { font-family: var(--font-title); font-weight: 700; }
.wjs-price__was { font-family: var(--font-title); font-weight: 700; color: var(--price-compare); text-decoration: line-through; text-decoration-thickness: 1px; }
.wjs-price--sale .wjs-price__now { color: var(--price-fg); }
.wjs-price__from { font-family: var(--font-text); font-weight: 400; color: var(--fg-secondary); font-size: var(--fs-body-16); }
.wjs-price__save { font-family: var(--font-text); font-weight: 700; color: var(--price-fg); font-size: var(--fs-body-14); }
.wjs-price--sm .wjs-price__now { font-size: var(--fs-body-16); }
.wjs-price--sm .wjs-price__was { font-size: var(--fs-body-14); }
.wjs-price--md .wjs-price__now { font-size: var(--fs-title-18); line-height: 1.2; }
.wjs-price--md .wjs-price__was { font-size: var(--fs-body-16); }
.wjs-price--lg .wjs-price__now { font-size: var(--fs-title-24); line-height: 1.25; font-family: var(--font-title); font-weight: 700; }
.wjs-price--lg .wjs-price__was { font-size: var(--fs-title-16); }
.wjs-price--txn { font-family: var(--font-text); font-variant-numeric: tabular-nums; }
.wjs-price--txn .wjs-price__now { font-family: var(--font-title); font-weight: 700; }
@media (max-width: 599px) {
  .wjs-price--md .wjs-price__now { font-size: var(--fs-title-18); }
  .wjs-price--md .wjs-price__was, .wjs-price__from { font-size: var(--fs-body-16); }
  .wjs-price--lg .wjs-price__now { font-size: var(--fs-title-24); }
  .wjs-price--lg .wjs-price__was { font-size: var(--fs-title-16); }
}

/* ---------- Rating ---------- */
.wjs-rating { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-stars { display: inline-flex; gap: var(--space-4); color: var(--rating-star); }
.wjs-rating--sm .wjs-stars { gap: 2px; }
.wjs-star { position: relative; display: inline-block; }
.wjs-star__fill { position: absolute; inset: 0; overflow: hidden; }
.wjs-rating__value { color: var(--fg-primary); font-family: var(--font-title); font-weight: 700; }
@media (max-width: 599px) { .wjs-rating { font-size: var(--fs-body-14); } }

/* ---------- DeliveryEstimate ---------- */
.wjs-delivery { display: inline-flex; align-items: flex-start; gap: var(--space-8); font-size: var(--fs-body-14); line-height: 1.45; color: var(--fg-secondary); }
.wjs-delivery .wjs-icon { margin-top: 1px; }
.wjs-delivery strong { font-family: var(--font-title); font-weight: 700; color: var(--fg-primary); }
.wjs-delivery--extended { color: var(--fg-primary); }
.wjs-delivery--low { color: var(--fg-primary); }
.wjs-delivery--low strong { color: var(--fg-primary); }
.wjs-delivery--soldout { color: var(--fg-secondary); }
.wjs-delivery--soldout strong { color: var(--fg-primary); }

/* ---------- DeliveryTimeline ---------- */
.wjs-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.wjs-timeline__step { display: grid; grid-template-rows: auto 22px auto; row-gap: var(--space-8); position: relative; text-align: center; }
.wjs-timeline__step:first-child { text-align: left; } .wjs-timeline__step:last-child { text-align: right; }
.wjs-timeline__label { font-size: var(--fs-body-16); color: var(--fg-primary); }
.wjs-timeline__date { font-size: var(--fs-body-16); color: var(--fg-secondary); }
.wjs-timeline__track { position: relative; }
.wjs-timeline__track::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--divider-emphasis); }
.wjs-timeline__step:first-child .wjs-timeline__track::before { left: 5px; }
.wjs-timeline__step:last-child .wjs-timeline__track::before { right: 5px; }
.wjs-timeline__dot { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: var(--radius-pill); background: var(--bg-black); left: 50%; margin-left: -5px; }
.wjs-timeline__step:first-child .wjs-timeline__dot { left: 0; margin-left: 0; }
.wjs-timeline__step:last-child .wjs-timeline__dot { left: auto; right: 0; margin-left: 0; }
@media (max-width: 599px) {
  .wjs-timeline { grid-auto-flow: row; row-gap: 0; }
  .wjs-timeline__step, .wjs-timeline__step:first-child, .wjs-timeline__step:last-child { grid-template-rows: none; grid-template-columns: 16px 1fr auto; column-gap: var(--space-16); text-align: left; padding-bottom: var(--space-16); }
  .wjs-timeline__track { grid-row: 1; grid-column: 1; }
  .wjs-timeline__track::before, .wjs-timeline__step:first-child .wjs-timeline__track::before { top: 8px; bottom: calc(var(--space-16) * -1); left: 5px; right: auto; border-top: 0; border-left: 1px solid var(--divider-emphasis); }
  .wjs-timeline__step:last-child .wjs-timeline__track::before { display: none; }
  .wjs-timeline__dot, .wjs-timeline__step:first-child .wjs-timeline__dot, .wjs-timeline__step:last-child .wjs-timeline__dot { top: 8px; left: 0; right: auto; margin: 0; }
  .wjs-timeline__label { grid-column: 2; font-size: var(--fs-body-16); }
  .wjs-timeline__date { grid-column: 3; font-size: var(--fs-body-16); }
}

/* ---------- TrustBar ---------- */
.wjs-trust { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--space-16); }
.wjs-trust--panel { background: var(--surface-section); border-radius: var(--radius-lg); padding: var(--space-24) var(--space-40); }
.wjs-trust--panel .wjs-trust__item { display: flex; align-items: center; gap: var(--space-16); font-size: var(--fs-body-14); font-family: var(--font-title); font-weight: 700; }
.wjs-trust--strip { padding: 0; gap: var(--space-24); }
.wjs-trust--strip .wjs-trust__item { display: flex; gap: var(--space-16); align-items: flex-start; }
.wjs-trust__tile { width: 48px; height: 48px; flex: none; border-radius: var(--radius-md); background: var(--surface-sand); color: var(--border-black); display: flex; align-items: center; justify-content: center; }
.wjs-trust__title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-title-18); line-height: 1.35; margin: 0 0 var(--space-4); }
.wjs-trust__desc { font-size: var(--fs-body-14); line-height: 1.45; color: var(--fg-secondary); margin: 0; }
@media (max-width: 1023px) { .wjs-trust--strip { grid-template-columns: repeat(2, 1fr); } .wjs-trust--panel { padding: var(--space-24); } }
@media (max-width: 599px) {
  .wjs-trust--panel { grid-template-columns: 1fr; gap: var(--space-16); padding: var(--space-16); }
  .wjs-trust--strip { grid-template-columns: 1fr; gap: var(--space-16); }
  .wjs-trust__title { font-size: var(--fs-title-18); }
}

/* ---------- FinancingMessage ---------- */
.wjs-finance { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-body-14); color: var(--fg-secondary); flex-wrap: wrap; }
.wjs-finance strong { color: var(--fg-primary); font-family: var(--font-title); font-weight: 700; }
.wjs-finance img { height: 20px; width: auto; }

/* ---------- Form fields ---------- */
.wjs-field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.wjs-field__label { font-size: var(--fs-body-14); font-family: var(--font-title); font-weight: 700; line-height: 1.45; color: var(--fg-primary); }
.wjs-field__req { color: var(--fg-primary); margin-left: 2px; }
.wjs-field__opt { color: var(--fg-secondary); font-weight: 400; margin-left: var(--space-4); }
.wjs-field__hint { font-size: var(--fs-body-14); line-height: 1.45; color: var(--fg-secondary); margin: 0; }
.wjs-field__error { display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--fs-body-14); line-height: 1.45; color: var(--fg-primary); margin: 0; }
.wjs-field__error .wjs-icon { margin-top: 1px; }
.wjs-field__success { display: flex; gap: var(--space-8); align-items: center; font-size: var(--fs-body-14); color: var(--fg-primary); margin: 0; }
.wjs-input { display: flex; align-items: center; gap: var(--space-8); background: var(--surface-card); border: 1px solid var(--control-border); border-radius: var(--radius-md); color: var(--fg-primary); transition: border-color .15s, box-shadow .15s; }
.wjs-input--lg { height: var(--control-lg); padding: 0 var(--space-16); }
.wjs-input--md { height: var(--control-md); padding: 0 var(--space-16); }
.wjs-input .wjs-icon { color: var(--fg-secondary); }
.wjs-input:hover { border-color: var(--control-border-hover); }
.wjs-input:focus-within { border-color: var(--control-border-focus); box-shadow: var(--focus-ring); }
.wjs-input.is-invalid { border-color: var(--fg-primary); }
.wjs-input.is-disabled { background: var(--surface-raised); border-color: var(--divider); color: var(--fg-disabled); }
.wjs-input.is-disabled .wjs-icon { color: var(--fg-disabled); }
.wjs-input input, .wjs-input textarea, .wjs-input select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 16px/1.5 var(--font-text); color: inherit; padding: 0; }
.wjs-input input::placeholder, .wjs-input textarea::placeholder { color: var(--fg-secondary); opacity: 1; }
.wjs-input input:disabled { cursor: not-allowed; color: var(--fg-disabled); }
.wjs-input--area { height: auto; padding: var(--space-16) var(--space-16); align-items: stretch; }
.wjs-input--area textarea { min-height: 120px; resize: vertical; }

/* ---------- Select ---------- */
.wjs-select { position: relative; }
.wjs-select__trigger { width: 100%; justify-content: space-between; cursor: pointer; text-align: left; font: 400 16px/1.5 var(--font-text); }
.wjs-select__trigger .wjs-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wjs-select__trigger .wjs-select__value.is-placeholder { color: var(--fg-secondary); }
.wjs-select__trigger[aria-expanded="true"] { border-color: var(--control-border-focus); }
.wjs-select__trigger[aria-expanded="true"] .wjs-select__chev { transform: rotate(180deg); }
.wjs-select__chev { transition: transform .15s; color: var(--fg-secondary); }
.wjs-menu { position: absolute; z-index: var(--z-drawer); left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--space-4); list-style: none; background: var(--surface-card); border: 1px solid var(--divider); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); max-height: 280px; overflow: auto; }
.wjs-menu__item { display: flex; align-items: center; gap: var(--space-8); min-height: var(--control-md); padding: var(--space-8) var(--space-16); border-radius: var(--radius-sm); font-size: 16px; line-height: 1.5; cursor: pointer; color: var(--fg-primary); }
.wjs-menu__item .wjs-menu__label { flex: 1; }
.wjs-menu__item.is-active, .wjs-menu__item:hover { background: var(--surface-sand); }
.wjs-menu__item[aria-selected="true"] { color: var(--fg-primary); }
.wjs-menu__item[aria-disabled="true"] { color: var(--fg-disabled); cursor: not-allowed; background: transparent; }
.wjs-menu__count { font-size: var(--fs-body-12); color: var(--fg-secondary); }

/* ---------- Checkbox / Radio ---------- */
.wjs-choice { display: inline-flex; align-items: flex-start; gap: var(--space-16); cursor: pointer; font-size: var(--fs-body-16); line-height: 1.5; color: var(--fg-primary); position: relative; }
.wjs-choice input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: inherit; }
.wjs-choice__box { flex: none; width: 20px; height: 20px; margin: 2px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--control-border); background: var(--surface-card); color: var(--fg-on-inverse); transition: background-color .15s, border-color .15s; }
.wjs-choice--checkbox .wjs-choice__box { border-radius: var(--radius-sm); }
.wjs-choice--radio .wjs-choice__box { border-radius: var(--radius-pill); }
.wjs-choice:hover .wjs-choice__box { border-color: var(--fg-primary); }
.wjs-choice input:checked + .wjs-choice__box, .wjs-choice.is-indeterminate .wjs-choice__box { background: var(--choice-checked); border-color: var(--choice-checked); }
.wjs-choice--radio input:checked + .wjs-choice__box { background: var(--surface-card); }
.wjs-choice__dot { display: none; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--choice-checked); }
.wjs-choice input:checked + .wjs-choice__box .wjs-choice__dot { display: block; }
.wjs-choice--checkbox .wjs-choice__box .wjs-icon { opacity: 0; }
.wjs-choice--checkbox input:checked + .wjs-choice__box .wjs-icon, .wjs-choice.is-indeterminate .wjs-choice__box .wjs-icon { opacity: 1; }
.wjs-choice input:focus-visible + .wjs-choice__box { box-shadow: var(--focus-ring); }
.wjs-choice.is-invalid .wjs-choice__box { border-color: var(--fg-primary); }
.wjs-choice.is-disabled { cursor: not-allowed; color: var(--fg-disabled); }
.wjs-choice.is-disabled .wjs-choice__box { background: var(--surface-section); border-color: var(--divider-strong); }
.wjs-choice.is-disabled input:checked + .wjs-choice__box { background: var(--divider-emphasis); border-color: var(--divider-emphasis); }
.wjs-choice__count { margin-left: var(--space-4); color: var(--fg-secondary); font-size: var(--fs-body-14); }
.wjs-choice__text { padding-top: 0; }
.wjs-choice__desc { display: block; font-size: var(--fs-body-14); color: var(--fg-secondary); }

/* ---------- QuantitySelector ---------- */
.wjs-qty-wrap { display: inline-flex; flex-direction: column; gap: var(--space-4); }
.wjs-qty { display: inline-flex; align-items: center; background: var(--surface-card); border: 1px solid var(--control-border); border-radius: var(--radius-md); }
.wjs-qty--md { height: var(--control-md); }
.wjs-qty--sm { height: var(--control-md); }
.wjs-qty button { width: 40px; height: 100%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fg-primary); cursor: pointer; border-radius: var(--radius-md); }
.wjs-qty--sm button { width: 36px; }
.wjs-qty button:hover:not([disabled]) { background: var(--surface-section); }
.wjs-qty button[disabled] { color: var(--fg-disabled); cursor: not-allowed; }
.wjs-qty button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-qty input { width: 36px; border: 0; text-align: center; font: 400 16px/1 var(--font-text); color: var(--fg-primary); background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.wjs-qty input::-webkit-outer-spin-button, .wjs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wjs-qty input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.wjs-qty-msg { font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-qty-msg--warn { color: var(--fg-primary); }

/* ---------- PromoCode ---------- */
.wjs-promo { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-promo__row { display: flex; gap: var(--space-8); align-items: flex-start; }
.wjs-promo__row .wjs-field { flex: 1; }
.wjs-promo__chip { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16); background: var(--surface-section); color: var(--fg-primary); border-radius: var(--radius-pill); font-size: var(--fs-body-14); font-family: var(--font-title); font-weight: 700; }
.wjs-promo__chip button { width: 28px; height: 28px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wjs-promo__chip button:hover { background: var(--surface-sand); }

/* ---------- Alert ---------- */
.wjs-alert { display: flex; gap: var(--space-16); align-items: flex-start; padding: var(--space-16); border-radius: var(--radius-md); font-size: var(--fs-body-14); line-height: 1.45; color: var(--fg-primary); }
.wjs-alert__title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-body-16); margin: 0 0 2px; }
.wjs-alert__body { flex: 1; }
.wjs-alert__body p { margin: 0; }
.wjs-alert__action { margin-left: auto; align-self: center; }
.wjs-alert--info { background: var(--surface-section); }
.wjs-alert--info > .wjs-icon { color: var(--fg-secondary); }
.wjs-alert--success { background: var(--surface-section); }
.wjs-alert--success > .wjs-icon { color: var(--fg-primary); }
.wjs-alert--warning { background: var(--surface-sand); }
.wjs-alert--warning > .wjs-icon { color: var(--fg-primary); }
.wjs-alert--error { background: var(--surface-card); }
.wjs-alert--error > .wjs-icon, .wjs-alert--error .wjs-alert__title { color: var(--fg-primary); }
.wjs-alert--banner { padding: var(--space-24) var(--space-24); align-items: center; }
@media (max-width: 599px) { .wjs-alert--banner { flex-wrap: wrap; } .wjs-alert--banner .wjs-alert__action { margin-left: 0; } }

/* ---------- Skeleton ---------- */
.wjs-skel { background: var(--surface-section); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.wjs-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--surface-page), transparent); opacity: .6; animation: wjs-shimmer 1.4s infinite; }
@keyframes wjs-shimmer { to { transform: translateX(100%); } }

/* ---------- EmptyState ---------- */
.wjs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); padding: var(--space-40) var(--space-24); max-width: 520px; margin: 0 auto; }
.wjs-empty__tile { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--surface-section); color: var(--bg-black); display: flex; align-items: center; justify-content: center; }
.wjs-empty__actions { display: flex; gap: var(--space-16); flex-wrap: wrap; justify-content: center; margin-top: var(--space-8); }

/* ---------- Image / art ---------- */
.wjs-img { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-warm); width: 100%; }
.wjs-img > img, .wjs-img > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .3s ease; }
.wjs-img--zoom:hover > img, .wjs-img--zoom:hover > svg, a:hover > .wjs-img--zoom > svg, .wjs-pcard:hover .wjs-img--zoom > svg:first-child { transform: scale(1.0625); }
.wjs-img--square { border-radius: 0; }
.wjs-img__tag { position: absolute; left: var(--space-16); bottom: var(--space-16); font: 400 var(--fs-body-12)/1.4 var(--font-text); color: var(--fg-secondary); background: var(--surface-card); padding: 2px var(--space-8); border-radius: var(--radius-sm); }

/* ---------- Gallery ---------- */
.wjs-gallery { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-16); align-items: start; }
.wjs-gallery__thumbs { display: flex; flex-direction: column; gap: var(--space-16); list-style: none; margin: 0; padding: 0; }
.wjs-gallery__thumb { width: 80px; height: 80px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); cursor: pointer; position: relative; display: block; }
.wjs-gallery__thumb[aria-current="true"] { border-color: var(--fg-secondary); }
.wjs-gallery__thumb svg { width: 100%; height: 100%; display: block; }
.wjs-gallery__main { position: relative; }
.wjs-gallery__main .wjs-img { aspect-ratio: 1 / 1; }
.wjs-gallery__badge { position: absolute; top: var(--space-16); left: var(--space-16); }
.wjs-gallery__fav { position: absolute; top: var(--space-16); right: var(--space-16); }
.wjs-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.wjs-gallery__nav--prev { left: var(--space-16); } .wjs-gallery__nav--next { right: var(--space-16); }
.wjs-gallery__dots { display: none; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); align-items: center; }
.wjs-gallery__dots span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--divider-strong); }
.wjs-gallery__dots span.is-on { background: var(--fg-primary); width: 18px; }
@media (max-width: 599px) {
  .wjs-gallery { grid-template-columns: 1fr; }
  .wjs-gallery__thumbs { display: none; }
  .wjs-gallery__dots { display: flex; }
  .wjs-gallery__main .wjs-img { border-radius: var(--radius-md); }
}

/* ---------- Option buttons ---------- */
.wjs-optgroup { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.wjs-optgroup__legend { padding: 0; display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.wjs-optgroup__name { font-family: var(--font-title); font-size: var(--fs-title-16); font-weight: 700; color: var(--fg-primary); }
.wjs-optgroup__value { font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-optgroup__list { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.wjs-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-width: 64px; height: var(--control-md); padding: 0 var(--space-24); border: 1px solid var(--divider-strong); background: var(--surface-card); border-radius: var(--radius-sm); font: 400 var(--fs-body-14)/1.2 var(--font-text); color: var(--fg-primary); cursor: pointer; transition: border-color .15s, background-color .15s; }
.wjs-opt:hover { border-color: var(--control-border-hover); }
.wjs-opt[aria-checked="true"] { background: var(--surface-section); border-color: var(--bg-black); box-shadow: inset 0 0 0 1px var(--bg-black); color: var(--border-black); }
.wjs-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-opt[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--bg-black), var(--focus-ring); }
.wjs-opt.is-unavailable { color: var(--fg-secondary); background: var(--surface-page); border-style: dashed; }
.wjs-opt.is-unavailable .wjs-opt__label { text-decoration: line-through; }
.wjs-opt[aria-disabled="true"] { cursor: not-allowed; }
@media (max-width: 599px) { .wjs-optgroup__name { font-size: var(--fs-title-16); } .wjs-optgroup__list { gap: var(--space-8); } }

/* ---------- Swatches ---------- */
.wjs-swatches { display: flex; flex-wrap: wrap; gap: var(--space-16); list-style: none; margin: 0; padding: 0; }
.wjs-swatch { position: relative; width: 48px; height: 48px; padding: 3px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; cursor: pointer; }
.wjs-swatch__chip { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--divider); overflow: hidden; }
.wjs-swatch__chip svg { width: 100%; height: 100%; display: block; }
.wjs-swatch:hover { border-color: var(--control-border); }
.wjs-swatch[aria-checked="true"] { border: 2px solid var(--border-black); padding: 2px; }
.wjs-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-swatch.is-unavailable::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1.5px solid var(--fg-primary); transform: rotate(-45deg); }
.wjs-swatches--sm .wjs-swatch { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); }
.wjs-swatches--sm .wjs-swatch__chip { border-radius: var(--radius-sm); }
.wjs-swatches--sm { gap: var(--space-8); }
.wjs-swatch-more { font-size: var(--fs-body-14); color: var(--fg-secondary); align-self: center; }

/* ---------- Configuration picker ---------- */
.wjs-configs { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.wjs-config { width: 72px; height: 72px; padding: var(--space-8); border: 1px solid var(--divider-strong); border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer; color: var(--fg-secondary); display: flex; align-items: center; justify-content: center; }
.wjs-config svg { width: 100%; height: 100%; }
.wjs-config:hover { border-color: var(--control-border-hover); }
.wjs-config[aria-checked="true"] { border: 2px solid var(--border-black); padding: 7px; color: var(--fg-primary); background: var(--surface-section); }
.wjs-config:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Cards: product ---------- */
.wjs-pcard { position: relative; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; padding: 1px; min-width: 0; height: 100%; }
.wjs-pcard__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-warm); overflow: hidden; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.wjs-pcard__media svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .4s ease, opacity .3s ease; }
.wjs-pcard__media svg.wjs-pcard__alt { opacity: 0; }
.wjs-pcard:hover .wjs-pcard__media.has-alt svg.wjs-pcard__alt { opacity: 1; }
.wjs-pcard:hover .wjs-pcard__media.has-alt svg:first-child { opacity: 0; }
.wjs-pcard:hover .wjs-pcard__media:not(.has-alt) svg:first-child { transform: scale(1.0625); }
.wjs-pcard__badge { position: absolute; top: var(--space-8); left: var(--space-8); z-index: 1; }
.wjs-pcard__fav { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; color: var(--fg-secondary); }
.wjs-pcard__fav[aria-pressed="true"] { color: var(--fg-primary); }
.wjs-pcard__body { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16); flex: 1; }
.wjs-pcard__titles { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-pcard__name { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-title-16); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wjs-pcard__name a { text-decoration: none; color: inherit; }
.wjs-pcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.wjs-pcard__name a:focus-visible { box-shadow: none; }
.wjs-pcard__name a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--focus-ring-color), inset 0 0 0 4px var(--surface-card); }
.wjs-pcard__desc { font-size: var(--fs-body-14); color: var(--fg-secondary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wjs-pcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-pcard.is-soldout .wjs-pcard__media svg { opacity: .55; }
.wjs-pcard.is-soldout .wjs-price__now { color: var(--fg-secondary); }
.wjs-pcard--compact .wjs-pcard__body { padding: var(--space-24); gap: var(--space-8); }
.wjs-pcard__notify { position: relative; z-index: 2; align-self: flex-start; }
@media (max-width: 599px) {
  .wjs-pcard__body { padding: var(--space-16); gap: var(--space-16); }
  .wjs-pcard__titles { gap: var(--space-4); }
  .wjs-pcard__name { font-size: var(--fs-title-16); }
  .wjs-pcard__desc { font-size: var(--fs-body-12); }
  .wjs-pcard--compact .wjs-pcard__body { padding: var(--space-16); }
}

/* ---------- Announcement / Header ---------- */
.wjs-announce { background: var(--bg-black); color: var(--fg-on-inverse); min-height: 40px; display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-8) var(--page-gutter); font-size: var(--fs-body-16); line-height: 1.5; text-align: center; }
.wjs-announce a { color: var(--fg-on-inverse); text-underline-offset: 3px; font-family: var(--font-title); font-weight: 700; }
.wjs-announce a:focus-visible { box-shadow: var(--focus-ring-inverse); }
@media (max-width: 599px) { .wjs-announce { font-size: var(--fs-body-14); padding: var(--space-8) var(--page-gutter-m); } }
.wjs-header { position: relative; z-index: var(--z-header); background: var(--surface-card); border-bottom: 1px solid var(--divider); }
.wjs-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-24) var(--page-gutter); }
.wjs-header__logo { display: inline-flex; color: inherit; flex: none; }
.wjs-header__logo svg { width: 284px; height: auto; display: block; }
.wjs-logo-ink { fill: var(--logo-ink); } .wjs-logo-accent { fill: var(--bg-black); }
.wjs-logo--light .wjs-logo-ink, .wjs-logo--light .wjs-logo-accent { fill: var(--global-white); }
.wjs-nav { display: flex; gap: var(--space-40); list-style: none; margin: 0; padding: 0; }
.wjs-nav a { font-size: var(--fs-body-16); line-height: 1.5; color: var(--border-black); text-decoration: none; padding: var(--space-4) 0; border-bottom: 1px solid transparent; }
.wjs-nav a:hover, .wjs-nav a[aria-current="page"] { color: var(--fg-primary); border-bottom-color: currentColor; }
.wjs-header__icons { display: flex; align-items: center; gap: var(--space-8); color: var(--fg-secondary); }
.wjs-header__icons .wjs-ibtn { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-pill); color: inherit; }
.wjs-header__icons .wjs-ibtn:hover { color: var(--bg-black); background: transparent; }
.wjs-header__icons .wjs-ibtn .wjs-icon { width: 24px; height: 24px; }
.wjs-header__menu { display: none !important; }
.wjs-header__search { display: flex; align-items: center; gap: var(--space-8); width: 217px; height: var(--control-md); padding: 0 var(--space-16); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface-card); color: var(--fg-secondary); }
.wjs-header__search input { border: 0; outline: 0; flex: 1; min-width: 0; font: 400 16px/1.5 var(--font-text); color: var(--fg-primary); background: transparent; }
.wjs-header__search:focus-within { border-color: var(--control-border-focus); box-shadow: var(--focus-ring); }
.wjs-header--transparent { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(to bottom, var(--overlay-scrim), transparent); border-bottom: 0; }
.wjs-header--transparent .wjs-nav a { color: var(--fg-on-inverse); }
.wjs-header--transparent .wjs-nav a:hover { color: var(--global-white); }
.wjs-header--transparent .wjs-header__icons { color: var(--fg-on-inverse); }
.wjs-header--transparent .wjs-header__icons .wjs-ibtn:hover { color: var(--global-white); }
.wjs-header--transparent :focus-visible { box-shadow: var(--focus-ring-inverse) !important; }
@media (max-width: 1023px) {
  .wjs-header__bar { padding: var(--space-24) var(--page-gutter-t); }
  .wjs-header__logo svg { width: 228px; }
  .wjs-nav, .wjs-header__account { display: none !important; }
  .wjs-header__menu { display: inline-flex !important; }
  .wjs-header__icons .wjs-ibtn .wjs-icon { width: 20px; height: 20px; }
}
@media (max-width: 599px) {
  .wjs-header__bar { padding: var(--space-16) var(--page-gutter-m); gap: var(--space-16); }
  .wjs-header__logo { flex: 0 1 185px; min-width: 0; }
  .wjs-header__logo svg { width: 100%; max-width: 185px; }
  .wjs-header__icons { gap: 0; flex: none; }
  .wjs-header__search { position: absolute; left: var(--page-gutter-m); right: var(--page-gutter-m); top: 100%; width: auto; margin-top: var(--space-8); }
}

/* ---------- Drawer ---------- */
.wjs-drawer-scrim { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--overlay-scrim); }
.wjs-drawer { position: fixed; z-index: var(--z-drawer); top: 0; bottom: 0; right: 0; width: min(440px, 100%); background: var(--surface-page); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.wjs-drawer--left { right: auto; left: 0; }
.wjs-drawer--inline-host { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.wjs-drawer--inline-host .wjs-drawer-scrim, .wjs-drawer--inline-host .wjs-drawer { position: absolute; }
.wjs-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--divider); }
.wjs-drawer__body { flex: 1; overflow: auto; padding: var(--space-24); }
.wjs-drawer__foot { padding: var(--space-16) var(--space-24) var(--space-24); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--space-16); background: var(--surface-card); }
@media (max-width: 599px) {
  .wjs-drawer--sheet { top: auto; left: 0; width: 100%; max-height: 88%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .wjs-drawer__head, .wjs-drawer__body, .wjs-drawer__foot { padding-left: var(--page-gutter-m); padding-right: var(--page-gutter-m); }
}
.wjs-mnav { list-style: none; margin: 0; padding: 0; }
.wjs-mnav a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) 0; border-bottom: 1px solid var(--divider); text-decoration: none; color: var(--fg-primary); }

/* ---------- AddedToCart ---------- */
.wjs-added__status { display: flex; align-items: center; gap: var(--space-8); color: var(--fg-primary); font-family: var(--font-title); font-weight: 700; }
.wjs-added__item { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-16); padding: var(--space-24) 0; border-bottom: 1px solid var(--divider); }
.wjs-added__thumb { width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); }
.wjs-added__thumb svg { width: 100%; height: 100%; display: block; }
.wjs-added__sub { display: flex; justify-content: space-between; font-size: var(--fs-body-16); }
.wjs-added__recs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-top: var(--space-16); }

/* ---------- Footer ---------- */
.wjs-footer { background: var(--surface-inverse); color: var(--fg-on-inverse); border-radius: var(--radius-lg); margin: 0 var(--page-gutter) var(--page-gutter); padding: var(--section-pad) var(--page-gutter) var(--space-40); }
.wjs-footer a { color: var(--fg-on-inverse); }
.wjs-footer :focus-visible { box-shadow: var(--focus-ring-inverse) !important; }
.wjs-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: var(--space-64); }
.wjs-footer__brand { display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.wjs-footer__brand svg { width: 256px; height: auto; }
.wjs-footer__tag { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-title-16); line-height: 1.4; margin: 0; }
.wjs-footer__about { font-size: var(--fs-body-14); line-height: 1.45; margin: 0; color: var(--surface-sand); max-width: 360px; }
.wjs-footer__col h3 { font: 400 var(--fs-body-14)/1.45 var(--font-text); color: var(--fg-on-inverse-secondary); margin: 0 0 var(--space-16); }
.wjs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-footer__col a { text-decoration: none; font-size: var(--fs-body-16); }
.wjs-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wjs-footer__acc { display: none; }
.wjs-footer__contact { display: flex; flex-direction: column; gap: var(--space-24); }
.wjs-footer__ci { display: flex; gap: var(--space-16); align-items: center; }
.wjs-footer__ci-tile { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--border-black); border: 1px solid var(--fg-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.wjs-footer__ci small { display: block; font-size: var(--fs-body-14); color: var(--surface-sand); }
.wjs-footer__ci a { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-body-14); text-underline-offset: 3px; }
.wjs-footer__social { display: flex; gap: var(--space-16); }
.wjs-footer__social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.wjs-footer__social img { width: 24px; height: 24px; display: block; border-radius: var(--radius-sm); }
.wjs-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin-top: var(--space-40); padding-top: var(--space-24); border-top: 1px solid var(--bg-black); font-size: var(--fs-body-14); }
.wjs-footer__pay { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.wjs-footer__pay img { height: 20px; width: auto; display: block; border-radius: 3px; }
.wjs-footer__legal { display: flex; gap: var(--space-16); flex-wrap: wrap; align-items: center; color: var(--surface-sand); }
@media (max-width: 1023px) {
  .wjs-footer { margin: 0 var(--page-gutter-t) var(--page-gutter-t); padding: var(--section-pad) var(--page-gutter-t) var(--space-24); }
  .wjs-footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-40); }
  .wjs-footer__brand, .wjs-footer__contact { grid-column: 1 / -1; }
  .wjs-footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 599px) {
  .wjs-footer { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--section-pad-m) var(--page-gutter-m) var(--space-24); }
  .wjs-footer__grid { grid-template-columns: 1fr; gap: var(--space-24); }
  .wjs-footer__brand svg { width: 199px; }
  .wjs-footer__cols-desk { display: none; }
  .wjs-footer__acc { display: block; grid-column: 1 / -1; }
  .wjs-footer__acc .wjs-acc__btn { color: var(--fg-on-inverse); padding: var(--space-16) 0; font: 400 var(--fs-body-16)/1.5 var(--font-text); }
  .wjs-footer__acc .wjs-acc__item { border-color: var(--bg-black); }
  .wjs-footer__acc .wjs-acc__panel ul { list-style: none; padding: 0 0 var(--space-16); margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .wjs-footer__acc .wjs-acc__panel a { display: block; padding: var(--space-8) 0; text-decoration: none; }
}

/* ---------- Breadcrumb ---------- */
.wjs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--fs-body-14); line-height: 1.45; }
.wjs-crumbs li { display: inline-flex; align-items: center; gap: var(--space-8); }
.wjs-crumbs a { color: var(--fg-secondary); text-decoration: none; }
.wjs-crumbs a:hover { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }
.wjs-crumbs .wjs-icon { color: var(--fg-secondary); }
.wjs-crumbs [aria-current="page"] { color: var(--fg-primary); }
.wjs-crumbs__back { display: none; align-items: center; gap: var(--space-4); font-size: var(--fs-body-14); color: var(--fg-secondary); text-decoration: none; min-height: 32px; }
@media (max-width: 599px) { .wjs-crumbs--collapse ol { display: none; } .wjs-crumbs--collapse .wjs-crumbs__back { display: inline-flex; } }

/* ---------- Tabs ---------- */
.wjs-tabs__list { display: flex; gap: var(--space-40); border-bottom: 1px solid var(--divider); overflow-x: auto; scrollbar-width: none; }
.wjs-tab { flex: none; border: 0; background: none; padding: var(--space-16) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 400 var(--fs-body-16)/1.5 var(--font-text); color: var(--fg-secondary); cursor: pointer; }
.wjs-tab:hover { color: var(--fg-primary); }
.wjs-tab[aria-selected="true"] { color: var(--fg-primary); border-bottom-color: var(--fg-primary); }
.wjs-tabs__panel { padding-top: var(--space-24); }

/* ---------- Accordion ---------- */
.wjs-acc { margin: 0; padding: 0; list-style: none; }
.wjs-acc__item { border-bottom: 1px solid var(--divider-strong); }
.wjs-acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-24) 0; background: none; border: 0; text-align: left; color: var(--fg-primary); cursor: pointer; font-family: var(--font-title); font-weight: 700; font-size: var(--fs-title-18); line-height: 1.35; }
.wjs-acc__btn:hover .wjs-acc__q { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wjs-acc__btn .wjs-icon { color: currentColor; }
.wjs-acc__panel { padding: 0 0 var(--space-24); font-size: var(--fs-body-16); line-height: 1.5; color: var(--fg-secondary); }
.wjs-acc__panel p { margin: 0 0 var(--space-16); } .wjs-acc__panel p:last-child { margin: 0; }
@media (max-width: 599px) { .wjs-acc__btn { font-size: var(--fs-title-18); padding: var(--space-16) 0; } .wjs-acc__panel { font-size: var(--fs-body-16); } }

/* ---------- FilterBar / chips / load more ---------- */
.wjs-filterbar { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-filterbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.wjs-chips { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.wjs-chip { display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-sm); border: 1px solid var(--divider-strong); background: var(--surface-card); color: var(--action-secondary-fg); font: 400 var(--fs-body-14)/1.2 var(--font-text); cursor: pointer; white-space: nowrap; }
.wjs-chip:hover { background: var(--action-secondary-hover-bg); }
.wjs-chip[aria-pressed="true"] { background: var(--action-primary-bg); border-color: var(--action-primary-bg); color: var(--fg-on-inverse); }
.wjs-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-pill { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-4) 0 var(--space-16); border-radius: var(--radius-pill); background: var(--surface-section); color: var(--bg-black); font-size: var(--fs-body-14); font-family: var(--font-title); font-weight: 700; border: 0; }
.wjs-pill button { width: 24px; height: 24px; border: 0; background: none; color: inherit; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wjs-pill button:hover { background: var(--surface-sand); }
.wjs-filterbar__tools { display: flex; align-items: center; gap: var(--space-16); }
.wjs-filterbar__count { font-size: var(--fs-body-14); color: var(--fg-secondary); white-space: nowrap; }
.wjs-filterbar__tools .wjs-select { width: 220px; }
.wjs-filterbar__mobile { display: none; }
@media (max-width: 599px) {
  .wjs-filterbar__row--desk { display: none; }
  .wjs-filterbar__mobile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .wjs-filterbar__mobile .wjs-btn { width: 100%; }
  .wjs-chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--page-gutter-m) * -1); padding: 0 var(--page-gutter-m); scrollbar-width: none; }
}
.wjs-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding-top: var(--space-24); }
.wjs-loadmore .wjs-progress { width: 240px; }
.wjs-loadmore__text { font-size: var(--fs-body-14); color: var(--fg-secondary); margin: 0; }

/* ---------- Section header / hero ---------- */
.wjs-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-40); }
.wjs-sh__text { display: flex; flex-direction: column; gap: var(--space-8); max-width: 640px; }
.wjs-sh__intro { font-size: var(--fs-body-16); color: var(--fg-secondary); margin: var(--space-4) 0 0; }
.wjs-sh--center { flex-direction: column; align-items: center; text-align: center; }
.wjs-sh--center .wjs-sh__text { align-items: center; }
@media (max-width: 599px) { .wjs-sh { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-24); gap: var(--space-16); } .wjs-sh .wjs-btn--lg { height: var(--control-md); padding: 0 var(--space-24); border-radius: var(--radius-sm); } }

.wjs-hero { position: relative; overflow: hidden; color: var(--global-white); min-height: 800px; display: flex; align-items: center; justify-content: center; text-align: center; }
.wjs-hero__art { position: absolute; inset: 0; }
.wjs-hero__art svg { width: 100%; height: 100%; display: block; }
.wjs-hero__scrim { position: absolute; inset: 0; background: var(--overlay-scrim); }
.wjs-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); max-width: 960px; padding: 120px var(--page-gutter) 96px; }
.wjs-hero__content .wjs-display-1 { color: var(--global-white); }
.wjs-hero__content::before { content: ""; position: absolute; z-index: -1; inset: 18% 4% 8%; background: radial-gradient(closest-side, var(--overlay-scrim-strong), transparent); pointer-events: none; }
.wjs-hero__sub { font-size: var(--fs-body-16); font-family: var(--font-title); font-weight: 700; line-height: 1.5; max-width: 600px; margin: 0; }
.wjs-hero__actions { display: flex; gap: var(--space-16); flex-wrap: wrap; justify-content: center; }
.wjs-hero__arrows .wjs-ibtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.wjs-hero__arrows .wjs-ibtn:first-child { left: var(--page-gutter); } .wjs-hero__arrows .wjs-ibtn:last-child { right: var(--page-gutter); }
.wjs-hero__progress { position: absolute; z-index: 1; bottom: var(--space-40); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-8); align-items: center; }
.wjs-hero__progress span { width: 80px; height: 3px; background: var(--global-white); opacity: .5; border-radius: var(--radius-pill); }
.wjs-hero__progress span.is-on { opacity: 1; }
.wjs-hero__progress .wjs-ibtn { width: 32px; height: 32px; margin-left: var(--space-8); }
.wjs-hero--split { min-height: 460px; text-align: left; color: var(--fg-primary); background: var(--surface-section); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-radius: var(--radius-lg); }
.wjs-hero--split .wjs-hero__content { align-items: flex-start; padding: var(--space-64); justify-content: center; }
.wjs-hero--split .wjs-hero__content::before { display: none; }
.wjs-hero--split .wjs-hero__media { position: relative; min-height: 460px; }
.wjs-hero--split .wjs-hero__media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1023px) { .wjs-hero { min-height: 600px; } .wjs-hero__arrows { display: none; } }
@media (max-width: 599px) {
  .wjs-hero { min-height: 560px; }
  .wjs-hero__content { padding: 96px var(--page-gutter-m) 72px; gap: var(--space-16); }
  .wjs-hero__sub { font-size: var(--fs-body-16); }
  .wjs-hero__actions { flex-direction: column; width: 100%; gap: var(--space-8); }
  .wjs-hero__actions .wjs-btn { width: 100%; height: var(--control-lg); }
  .wjs-hero--split { grid-template-columns: 1fr; }
  .wjs-hero--split .wjs-hero__content { padding: var(--space-40) var(--page-gutter-m); }
  .wjs-hero--split .wjs-hero__media { min-height: 260px; }
}

/* ---------- Rails / grids ---------- */
.wjs-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--grid-gap); }
.wjs-rail { position: relative; }
.wjs-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols, 4) - 1) * var(--grid-gap)) / var(--cols, 4)); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.wjs-rail__track > * { scroll-snap-align: start; }
.wjs-rail__controls { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-24); }
.wjs-rail__controls .wjs-progress { flex: 1; max-width: 320px; height: 2px; }
@media (max-width: 1023px) { .wjs-grid { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } .wjs-rail__track { grid-auto-columns: 42%; } }
@media (max-width: 599px) {
  .wjs-grid { grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); gap: var(--grid-gap-m); }
  .wjs-rail__track { grid-auto-columns: 72%; gap: var(--grid-gap-m); margin: 0 calc(var(--page-gutter-m) * -1); padding: 0 var(--page-gutter-m) 2px; scroll-padding: 0 var(--page-gutter-m); }
  .wjs-rail__controls .wjs-ibtn { display: none; }
}

/* ---------- Steps / features / CTA / media ---------- */
.wjs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-24); counter-reset: s; }
.wjs-step { display: flex; flex-direction: column; gap: var(--space-16); position: relative; padding-top: 44px; }
.wjs-step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--bg-black); color: var(--fg-on-inverse); font: 400 var(--fs-body-14)/28px var(--font-text); text-align: center; }
.wjs-step::after { content: ""; position: absolute; top: 14px; left: 40px; right: calc(var(--space-24) * -1 + 12px); border-top: 1px solid var(--divider-strong); }
.wjs-step:last-child::after { display: none; }
.wjs-step p { margin: 0; color: var(--fg-secondary); font-size: var(--fs-body-16); }
.wjs-steps--vertical { grid-auto-flow: row; gap: 0; }
.wjs-steps--vertical .wjs-step { padding: 0 0 var(--space-40) 40px; }
.wjs-steps--vertical .wjs-step::before { width: 16px; height: 16px; top: 6px; left: 0; font-size: 0; }
.wjs-steps--vertical .wjs-step::after { top: 26px; left: 7.5px; right: auto; bottom: 0; border-top: 0; border-left: 1px solid var(--divider-strong); }
@media (max-width: 599px) {
  .wjs-steps { grid-auto-flow: row; gap: 0; }
  .wjs-step { padding: 0 0 var(--space-24) 44px; }
  .wjs-step::after { top: 32px; left: 13.5px; right: auto; bottom: 0; border-top: 0; border-left: 1px solid var(--divider-strong); }
}
.wjs-features { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-40); list-style: none; margin: 0; padding: 0; }
.wjs-feature { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-feature__tile { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-sand); color: var(--border-black); display: flex; align-items: center; justify-content: center; }
.wjs-feature__index { font: 400 var(--fs-body-16)/1.2 var(--font-text); color: var(--fg-secondary); }
.wjs-feature p { margin: 0; color: var(--fg-secondary); font-size: var(--fs-body-16); }
.wjs-features--stat .wjs-feature { border-left: 1px solid var(--divider-strong); padding: 0 var(--space-24); }
.wjs-features--numbered .wjs-feature { border-top: 1px solid var(--divider-strong); padding-top: var(--space-24); }
@media (max-width: 1023px) { .wjs-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .wjs-features { grid-template-columns: 1fr; gap: var(--space-24); } }
.wjs-cta { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--section-pad) var(--page-gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); }
.wjs-cta > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wjs-cta__scrim { position: absolute; inset: 0; background: var(--overlay-scrim-strong); }
.wjs-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); max-width: 800px; }
.wjs-cta__inner p { margin: 0; }
.wjs-cta__actions { display: flex; gap: var(--space-16); flex-wrap: wrap; justify-content: center; margin-top: var(--space-8); }
.wjs-cta--image { color: var(--global-white); }
.wjs-cta--image .wjs-h2 { color: var(--global-white); }
.wjs-cta--brand { background: var(--surface-section); }
.wjs-cta--plain { background: var(--surface-section); }
@media (max-width: 599px) { .wjs-cta { padding: var(--section-pad-m) var(--page-gutter-m); border-radius: var(--radius-md); } .wjs-cta__actions { width: 100%; flex-direction: column; } .wjs-cta__actions .wjs-btn { width: 100%; } }
.wjs-mwt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; }
.wjs-mwt--reverse .wjs-mwt__media { order: 2; }
.wjs-mwt .wjs-img { aspect-ratio: 4 / 3; }
.wjs-mwt__text { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
@media (max-width: 599px) { .wjs-mwt { grid-template-columns: 1fr; gap: var(--space-24); } .wjs-mwt--reverse .wjs-mwt__media { order: 0; } }

/* ---------- Reviews ---------- */
.wjs-reviews { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-64); }
.wjs-reviews__summary { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.wjs-reviews__avg { display: flex; align-items: center; gap: var(--space-16); }
.wjs-dist { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-dist li { display: grid; grid-template-columns: 28px 1fr 40px; gap: var(--space-16); align-items: center; font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-dist .wjs-progress span { background: var(--fg-primary); }
.wjs-review { padding: var(--space-24) 0; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-review:first-child { padding-top: 0; }
.wjs-review__head { display: flex; justify-content: space-between; gap: var(--space-16); align-items: center; flex-wrap: wrap; }
.wjs-review__who { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-body-14); color: var(--fg-secondary); flex-wrap: wrap; }
.wjs-review__who strong { color: var(--fg-primary); font-family: var(--font-title); font-weight: 700; }
.wjs-review p { margin: 0; }
.wjs-review__imgs { display: flex; gap: var(--space-8); }
.wjs-review__imgs span { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); }
.wjs-review__imgs svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1023px) { .wjs-reviews { grid-template-columns: 1fr; gap: var(--space-40); } }

/* ---------- Cart & summary ---------- */
.wjs-cline { display: grid; grid-template-columns: 120px 1fr 140px 120px 40px; gap: var(--space-24); align-items: start; padding: var(--space-24) 0; border-bottom: 1px solid var(--divider); }
.wjs-cline__thumb { width: 120px; height: 120px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); display: block; }
.wjs-cline__thumb svg { width: 100%; height: 100%; display: block; }
.wjs-cline__info { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.wjs-cline__name { margin: 0; }
.wjs-cline__name a { color: inherit; text-decoration: none; }
.wjs-cline__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wjs-cline__opts { font-size: var(--fs-body-14); color: var(--fg-secondary); margin: 0; }
.wjs-cline__unit { font-size: var(--fs-body-14); color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.wjs-cline__total { text-align: right; font-size: var(--fs-body-16); font-family: var(--font-title); font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wjs-cline__total s { font-size: var(--fs-body-14); font-weight: 400; color: var(--price-compare); }
.wjs-cline__x { color: var(--fg-secondary); }
.wjs-cline.is-updating { opacity: .6; }
.wjs-cline.is-unavailable .wjs-cline__thumb { opacity: .5; }
.wjs-cline.is-unavailable .wjs-cline__total { color: var(--fg-secondary); }
.wjs-cline__alert { grid-column: 2 / -1; }
.wjs-cline-head { display: grid; grid-template-columns: 120px 1fr 140px 120px 40px; gap: var(--space-24); padding-bottom: var(--space-16); border-bottom: 1px solid var(--divider); font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-cline-head span:nth-child(4) { text-align: right; }
.wjs-removed { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding: var(--space-16); margin: var(--space-16) 0; background: var(--surface-section); border-radius: var(--radius-md); font-size: var(--fs-body-14); }
@media (max-width: 1023px) { .wjs-cline, .wjs-cline-head { grid-template-columns: 96px 1fr 120px 40px; } .wjs-cline__thumb { width: 96px; height: 96px; } .wjs-cline__total { grid-column: 3; grid-row: 2; } .wjs-cline__qty { grid-column: 2; } .wjs-cline-head span:nth-child(3) { display: none; } }
@media (max-width: 599px) {
  .wjs-cline { grid-template-columns: 80px 1fr 32px; gap: var(--space-8) var(--space-16); padding: var(--space-16) 0; }
  .wjs-cline-head { display: none; }
  .wjs-cline__thumb { width: 80px; height: 80px; grid-row: span 2; }
  .wjs-cline__info { grid-column: 2; }
  .wjs-cline__x { grid-column: 3; grid-row: 1; }
  .wjs-cline__qty { grid-column: 2; grid-row: 2; }
  .wjs-cline__total { grid-column: 2 / 4; grid-row: 2; align-self: center; justify-self: end; font-size: var(--fs-body-16); }
  .wjs-cline__alert { grid-column: 1 / -1; }
}
.wjs-summary { background: var(--surface-card); border: 1px solid var(--divider); border-radius: var(--radius-lg); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-24); }
.wjs-summary__rows { margin: 0; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24) 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.wjs-summary__row { display: flex; justify-content: space-between; gap: var(--space-16); font-size: var(--fs-body-16); }
.wjs-summary__row dt { color: var(--fg-secondary); margin: 0; display: flex; flex-direction: column; }
.wjs-summary__row dt small { font-size: var(--fs-body-14); color: var(--fg-secondary); }
.wjs-summary__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--fg-primary); font-family: var(--font-title); font-weight: 700; }
.wjs-summary__row.is-savings dd { color: var(--price-fg); }
.wjs-summary__total { display: flex; justify-content: space-between; align-items: baseline; }
.wjs-summary__total .wjs-h5 { font-family: var(--font-text); font-weight: 700; }
.wjs-summary__total-amt { font-family: var(--font-text); font-size: var(--fs-title-18); font-weight: 700; font-variant-numeric: tabular-nums; }
.wjs-summary__saved { font-size: var(--fs-body-14); color: var(--price-fg); text-align: right; margin: calc(var(--space-16) * -1) 0 0; font-family: var(--font-title); font-weight: 700; }
.wjs-summary__secure { display: flex; align-items: center; justify-content: center; gap: var(--space-8); font-size: var(--fs-body-14); color: var(--fg-secondary); margin: 0; }
.wjs-summary__pay { display: flex; gap: var(--space-8); justify-content: center; flex-wrap: wrap; }
.wjs-summary__pay img { height: 20px; width: auto; display: block; }
@media (max-width: 599px) { .wjs-summary { padding: var(--space-24) var(--space-16); } }

/* ---------- Page layouts ---------- */
.wjs-pdp { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); gap: var(--space-64); align-items: start; }
.wjs-pdp__info { display: flex; flex-direction: column; gap: var(--space-24); }
.wjs-pdp__head { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-pdp__buy { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-pdp__sticky { display: none; }
.wjs-pdp__decide { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; padding: var(--space-16) var(--page-gutter); background: var(--surface-inverse); color: var(--fg-on-inverse); font-size: var(--fs-body-14); }
.wjs-pdp__decide .wjs-chip { background: transparent; color: var(--fg-on-inverse); border-color: var(--bg-black); }
.wjs-pdp__decide .wjs-chip[aria-pressed="true"] { background: var(--fg-on-inverse); color: var(--surface-inverse); }
@media (max-width: 1023px) { .wjs-pdp { grid-template-columns: 1fr; gap: var(--space-40); } }
@media (max-width: 599px) {
  .wjs-pdp__sticky { display: flex; position: sticky; bottom: 0; z-index: var(--z-header); gap: var(--space-16); align-items: center; padding: var(--space-16) var(--page-gutter-m); background: var(--surface-card); border-top: 1px solid var(--divider); }
  .wjs-pdp__sticky .wjs-btn { flex: 1; }
  .wjs-pdp__decide { padding: var(--space-16) var(--page-gutter-m); }
}
.wjs-cart { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-64); align-items: start; }
.wjs-cart__aside { position: sticky; top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
@media (max-width: 1023px) { .wjs-cart { grid-template-columns: 1fr; gap: var(--space-40); } .wjs-cart__aside { position: static; } }
.wjs-plp-head { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-40); padding-bottom: var(--space-40); }
.wjs-plp-head__intro { max-width: 720px; color: var(--fg-secondary); margin: 0; }
@media (max-width: 599px) { .wjs-plp-head { padding-top: var(--space-16); padding-bottom: var(--space-24); gap: var(--space-16); } }

/* ---------- Page scaffolding (templates) ---------- */
.wjs-skip { position: fixed; left: var(--space-16); top: -120px; z-index: calc(var(--z-drawer) + 10); padding: var(--space-16) var(--space-16); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--fg-primary); font: 400 var(--fs-body-16)/1.2 var(--font-text); text-decoration: none; box-shadow: var(--focus-ring); }
.wjs-skip:focus { top: var(--space-16); }
.wjs-main:focus { outline: none; box-shadow: none; }
.wjs-ibtn.is-added { color: var(--bg-black); border-color: var(--bg-black); cursor: default; }
span.wjs-pcard__notify { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--fg-secondary); }

/* ===================== WJS Home shape and voice =====================
   Pill buttons and chips, Mulish Bold for every label, walnut as the only dark, red only for sale and errors,
   control borders at 3:1 or more (control-border / action-secondary-border). */
.wjs-btn { font-family: var(--font-title); font-weight: 700; border-radius: var(--radius-pill); transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.wjs-btn--lg { height: var(--control-lg); padding: 0 var(--space-24); border-radius: var(--radius-pill); font-size: var(--fs-title-16); }
.wjs-btn--md { height: var(--control-md); padding: 0 var(--space-24); border-radius: var(--radius-pill); font-size: var(--fs-title-16); }
.wjs-btn--sm { height: var(--control-md); padding: 0 var(--space-16); border-radius: var(--radius-pill); font-size: var(--fs-title-14); }
.wjs-btn:active:not([disabled]) { transform: scale(.98); }
.wjs-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.wjs-btn--primary:hover { background: var(--action-primary-hover-bg); }
.wjs-btn--primary:active { background: var(--action-primary-active-bg); }
.wjs-btn--secondary, .wjs-btn--outlined { background: var(--surface-card); border: 1.5px solid var(--action-secondary-border); color: var(--action-secondary-fg); }
.wjs-btn--secondary:hover, .wjs-btn--outlined:hover { background: var(--action-secondary-hover-bg); color: var(--action-secondary-fg); }
.wjs-btn--secondary:active, .wjs-btn--outlined:active { background: var(--action-secondary-hover-bg); color: var(--action-secondary-fg); }
.wjs-btn--warm { background: var(--action-warm-bg); color: var(--fg-primary); }
.wjs-btn--warm:hover { background: var(--action-warm-hover-bg); }
.wjs-btn--inverse { background: var(--action-inverse-bg); color: var(--fg-primary); }
.wjs-btn--inverse:hover { box-shadow: var(--shadow-lift); }
.wjs-btn--inverse:focus-visible { box-shadow: var(--focus-ring-inverse); }
.wjs-btn--ghost { color: var(--fg-primary); }
.wjs-btn--primary[disabled], .wjs-btn--secondary[disabled], .wjs-btn--outlined[disabled], .wjs-btn--warm[disabled] { background: var(--surface-section); border-color: var(--surface-section); color: var(--fg-secondary); }
.wjs-ibtn, .wjs-ibtn--lg, .wjs-ibtn--md, .wjs-ibtn--sm { border-radius: var(--radius-pill); }
.wjs-ibtn--secondary, .wjs-ibtn--outlined { background: var(--surface-card); border: 1.5px solid var(--action-secondary-border); color: var(--fg-primary); }
.wjs-ibtn--surface { background: var(--surface-card); border-color: var(--control-border); color: var(--fg-primary); }
.wjs-ibtn--ghost:hover { background: var(--surface-section); }
.wjs-ibtn[disabled] { color: var(--fg-secondary); border-color: var(--divider-strong); opacity: .6; }
.wjs-link:hover { color: var(--fg-primary); }

/* badges: pill, Mulish 14, original case */
.wjs-badge { padding: 2px var(--space-16); border-radius: var(--radius-pill); font: 700 var(--fs-title-14)/1.4 var(--font-title); }
.wjs-badge--soldout { background: var(--surface-card); color: var(--fg-primary); border: 1px solid var(--control-border); }

/* price: red only at 24px and up; smaller sale prices stay walnut with a sale badge */
.wjs-price--md .wjs-price__now { font-size: var(--fs-title-16); line-height: 1.4; }
.wjs-price--sm .wjs-price__now { font-size: var(--fs-title-16); line-height: 1.4; }
.wjs-price--lg .wjs-price__now { font-size: var(--fs-title-24); line-height: 1.4; }
.wjs-price--sale.wjs-price--lg .wjs-price__now { color: var(--price-sale-large); }
.wjs-price__was { font-family: var(--font-text); font-weight: 400; color: var(--price-compare); }

/* controls: visible boundaries (control-border 5.82:1), selected = walnut 2px */
.wjs-opt, .wjs-config, .wjs-chip { border: 1px solid var(--control-border); }
.wjs-opt { border-radius: var(--radius-pill); font: 700 var(--fs-title-14)/1.4 var(--font-title); }
.wjs-opt[aria-checked="true"], .wjs-config[aria-checked="true"] { border: 2px solid var(--fg-primary); background: var(--surface-card); color: var(--fg-primary); }
.wjs-chip { border-radius: var(--radius-pill); font: 700 var(--fs-title-14)/1.4 var(--font-title); color: var(--fg-primary); }
.wjs-chip[aria-pressed="true"] { background: var(--action-primary-bg); border-color: var(--action-primary-bg); color: var(--action-primary-fg); }
.wjs-config { border-radius: var(--radius-md); color: var(--fg-primary); }
.wjs-swatch[aria-checked="true"] { border: 2px solid var(--fg-primary); }
.wjs-swatch__chip, .wjs-swatch { border-radius: var(--radius-pill); }
.wjs-swatch__chip { overflow: hidden; display: block; width: 100%; height: 100%; }
.wjs-swatch__chip svg { width: 100%; height: 100%; display: block; }
.wjs-choice__box { border-color: var(--control-border); }
.wjs-field__label { font: 700 var(--fs-title-14)/1.4 var(--font-title); }
.wjs-field__error { color: var(--fg-primary); }
.wjs-field__error .wjs-icon { color: var(--feedback-error-accent); }
.wjs-field__success .wjs-icon { color: var(--feedback-neutral-accent); }
.wjs-input.is-invalid { border-color: var(--control-border-error); }
.wjs-qty { border-color: var(--control-border); border-radius: var(--radius-pill); }

/* alerts: no green or yellow in the palette; icon + text carry the meaning */
.wjs-alert { border-radius: var(--radius-lg); }
.wjs-alert--error { border-color: var(--feedback-error-accent); }
.wjs-alert--error > .wjs-icon { color: var(--feedback-error-accent); }

/* header: warm page ground, walnut nav in Mulish */
.wjs-header { background: var(--surface-page); }
.wjs-header__logo img { display: block; height: 28px; width: auto; }
.wjs-nav a { font: 700 var(--fs-title-16)/1.4 var(--font-title); color: var(--fg-primary); }
.wjs-announce { background: var(--surface-inverse); color: var(--fg-on-inverse); font: 400 var(--fs-body-14)/1.4 var(--font-text); }
.wjs-announce a { color: var(--fg-on-inverse); }
.wjs-announce a:focus-visible { box-shadow: var(--focus-ring-inverse); }

/* footer */
.wjs-footer__brand img { height: 32px; width: auto; display: block; }
.wjs-footer a:focus-visible, .wjs-footer button:focus-visible { box-shadow: var(--focus-ring-inverse); }

/* logo */
.wjs-logo { display: block; height: 28px; width: auto; }

/* product card: photo or placeholder on the warm ground */
.wjs-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.wjs-pcard__media img.wjs-pcard__alt { opacity: 0; }
.wjs-pcard:hover .wjs-pcard__media.has-alt img.wjs-pcard__alt, .wjs-pcard:focus-within .wjs-pcard__media.has-alt img.wjs-pcard__alt { opacity: 1; }
.wjs-pcard:hover .wjs-pcard__media:not(.has-alt) img:first-child { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .wjs-pcard__media img { transition: none; } }
.wjs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-img { border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--surface-warm); }
.wjs-gallery__main .wjs-img img, .wjs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* collection card (series entry): photo on a warm block, rounded */
.wjs-coll { display: flex; flex-direction: column; gap: var(--space-16); text-decoration: none; color: var(--fg-primary); background: var(--surface-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); height: 100%; }
.wjs-coll__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-warm); overflow: hidden; }
.wjs-coll__media img, .wjs-coll__media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wjs-coll__body { display: flex; flex-direction: column; gap: var(--space-8); padding: 0 var(--space-24) var(--space-24); }
.wjs-coll__more { display: inline-flex; align-items: center; gap: var(--space-4); font: 700 var(--fs-title-14)/1.4 var(--font-title); text-decoration: underline; text-underline-offset: 3px; }
.wjs-coll:hover { box-shadow: var(--shadow-lift); }
.wjs-coll:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* hero, split: warm colour block + photo (the brand's colour-blocking) */
.wjs-hero--split { background: transparent; border-radius: 0; min-height: 0; grid-template-columns: 5fr 6fr; }
.wjs-hero--split .wjs-hero__content { background: var(--surface-warm); border-radius: var(--radius-xl) 0 0 var(--radius-xl); gap: var(--space-16); }
.wjs-hero--split .wjs-hero__media { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; overflow: hidden; background: var(--surface-sand); min-height: 420px; }
.wjs-hero--split .wjs-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wjs-hero--split .wjs-hero__tag { font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-primary); margin: 0; }
@media (max-width: 1023px) {
  .wjs-hero--split { grid-template-columns: 1fr; }
  .wjs-hero--split .wjs-hero__media { order: -1; border-radius: var(--radius-xl) var(--radius-xl) 0 0; min-height: 0; aspect-ratio: 4 / 3; }
  .wjs-hero--split .wjs-hero__content { border-radius: 0 0 var(--radius-xl) var(--radius-xl); padding: var(--space-24); }
}

/* steps (washable: unzip, wash, zip back) */
.wjs-step h3 { font: 700 var(--fs-title-18)/1.4 var(--font-title); }

/* sample-content note in templates */
.wjs-sample { display: inline-flex; align-items: center; gap: var(--space-8); font: 400 var(--fs-body-12)/1.4 var(--font-text); color: var(--fg-secondary); }
.wjs-sample::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--global-primary); }

/* cart notes: the three fixed lines */
.wjs-cartnotes { list-style: none; margin: 0; padding: var(--space-16) var(--space-24); background: var(--surface-card); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-cartnotes li { display: flex; gap: var(--space-8); align-items: flex-start; font: 400 var(--fs-body-14)/1.4 var(--font-text); }
.wjs-cartnotes .wjs-icon { margin-top: 1px; }

/* ===================== Chinese (zh-Hans-US) =====================
   Same sizes as English; Chinese body line height 1.7; Chinese body text never below 14px. */
.wjs-lang-zh { --font-title: var(--font-zh-title); --font-text: var(--font-zh-text); font-family: var(--font-zh-text); line-break: strict; word-break: normal; overflow-wrap: break-word; font-synthesis: none; }
.wjs-lang-zh .wjs-body-l, .wjs-lang-zh .wjs-body, .wjs-lang-zh .wjs-acc__panel p, .wjs-lang-zh .wjs-hero__sub, .wjs-lang-zh .wjs-pcard__desc, .wjs-lang-zh .wjs-body-s, .wjs-lang-zh .wjs-field__hint, .wjs-lang-zh .wjs-field__error { line-height: 1.7; }
.wjs-lang-zh .wjs-caption, .wjs-lang-zh .wjs-delivery, .wjs-lang-zh .wjs-cartnotes li { font-size: var(--fs-body-14); line-height: 1.7; }
.wjs-lang-zh em, .wjs-lang-zh i, .wjs-lang-zh cite { font-style: normal; }
.wjs-lang-zh [lang="en"] { font-family: var(--font-text); }

/* badge tones */
.wjs-badge--feature, .wjs-badge--neutral, .wjs-badge--bestseller { background: var(--badge-feature-bg); color: var(--badge-feature-fg); }
.wjs-badge--new { background: var(--badge-new-bg); color: var(--badge-new-fg); }
.wjs-badge--sale { background: var(--badge-sale-bg); color: var(--badge-sale-fg); }
/* round colour swatches everywhere */
.wjs-swatches--sm .wjs-swatch, .wjs-swatches--sm .wjs-swatch__chip { border-radius: var(--radius-pill); }
.wjs-pdp__info .wjs-qty-wrap, .wjs-pdp__info .wjs-qty { align-self: flex-start; width: auto; }
.wjs-cline__thumb img, .wjs-added__thumb img, .wjs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-cline__thumb, .wjs-added__thumb { overflow: hidden; }
.wjs-footer .wjs-btn--inverse, .wjs-footer .wjs-btn--inverse:hover { color: var(--fg-primary); }
/* rating stars only sit on surface-card / surface-raised (3.12:1); review area and PDP buy box are cards */
.wjs-reviews { background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-40); }
.wjs-pdp__info { background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-24); }
@media (max-width: 599px) { .wjs-reviews { padding: var(--space-24) var(--space-16); } .wjs-pdp__info { padding: var(--space-16); } }
/* on the warm and sand grounds every text is fg-primary (fg-secondary is 4.12 / 4.06:1 there) */
.wjs-section--warm .wjs-muted, .wjs-section--warm .wjs-eyebrow, .wjs-section--warm .wjs-subtle, .wjs-section--warm .wjs-step p, .wjs-section--warm .wjs-sh__intro, .wjs-section--warm .wjs-delivery,
.wjs-cta--brand .wjs-muted, .wjs-cta--brand .wjs-eyebrow, .wjs-hero--split .wjs-muted, .wjs-trust--panel .wjs-trust__desc { color: var(--fg-primary); }
/* product card on small screens: badge never runs under the wishlist button; fewer lines */
.wjs-pcard__badge .wjs-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wjs-pcard__badge { right: 56px; }
@media (max-width: 599px) {
  .wjs-pcard .wjs-swatches--sm .wjs-swatch { width: 20px; height: 20px; }
  .wjs-pcard .wjs-delivery { display: none; }
  .wjs-pcard .wjs-rating { flex-wrap: nowrap; white-space: nowrap; font-size: var(--fs-body-12); }
}

/* ===== Store-backed pieces (real wjshomestore.com data) ===== */
.wjs-section--tight { padding-top: var(--space-16); padding-bottom: var(--space-40); }
/* Black Friday Early Access tiers */
.wjs-tiers { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-tiers__ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); }
.wjs-tiers__ladder li { background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-card); }
.wjs-tiers__ladder li:last-child { background: var(--surface-inverse); color: var(--fg-on-inverse); }
.wjs-tiers__ladder li:last-child .wjs-tiers__spend { color: var(--fg-on-inverse-secondary); }
.wjs-tiers__spend { font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-secondary); }
.wjs-tiers__save { font: 700 var(--fs-title-24)/1.3 var(--font-title); white-space: nowrap; }
.wjs-tiers--progress { background: var(--surface-sand); border-radius: var(--radius-lg); padding: var(--space-16); gap: var(--space-8); }
.wjs-tiers__head { margin: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-8); font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-primary); }
.wjs-tiers__meter { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--surface-card); margin: var(--space-8) 0; }
.wjs-tiers__meter > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--fg-primary); }
.wjs-tiers__meter > i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--radius-pill); background: var(--surface-card); border: 2px solid var(--fg-primary); }
.wjs-tiers__meter > i.is-on { background: var(--fg-primary); }
.wjs-tiers__marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.wjs-tiers__marks li { display: flex; flex-direction: column; align-items: center; white-space: nowrap; font: 400 var(--fs-body-12)/1.4 var(--font-text); color: var(--fg-primary); text-align: center; }
.wjs-tiers__marks li strong { font-weight: 700; }
@media (max-width: 767px) { .wjs-tiers__ladder { grid-template-columns: 1fr 1fr; } .wjs-tiers__ladder li:last-child { grid-column: 1 / -1; } .wjs-tiers__marks li { font-size: 11px; } }
/* Sibling links (shape, color) */
.wjs-sibs { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-sibs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.wjs-sib { display: flex; align-items: center; gap: var(--space-8); text-decoration: none; color: var(--fg-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: var(--space-8); background: var(--surface-card); min-height: 48px; }
.wjs-sib:hover { border-color: var(--fg-primary); }
.wjs-sib[aria-current="page"] { border: 2px solid var(--fg-primary); padding: 7px; }
.wjs-sib:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-sibs--shape ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.wjs-sibs--shape .wjs-sib { flex-direction: column; align-items: flex-start; }
.wjs-sib__thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-warm); }
.wjs-sib__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-sib__chip { width: 32px; height: 32px; border-radius: var(--radius-pill); overflow: hidden; flex: none; border: 1px solid var(--divider-strong); }
.wjs-sib__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-sib__text { display: flex; flex-direction: column; gap: 2px; }
.wjs-sib__name { font: 700 var(--fs-title-14)/1.4 var(--font-title); }
.wjs-sib__meta { font: 400 var(--fs-body-12)/1.4 var(--font-text); color: var(--fg-secondary); }
.wjs-sib__price { font: 400 var(--fs-body-14)/1.4 var(--font-text); font-variant-numeric: tabular-nums; }
.wjs-sibs--color .wjs-sib { padding-right: var(--space-16); }
.wjs-sibs--color .wjs-sib[aria-current="page"] { padding-right: 15px; }
/* Bundle: spare cover */
.wjs-bundle { border: 1px solid var(--control-border); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); background: var(--surface-card); }
.wjs-bundle.is-on { border: 2px solid var(--fg-primary); padding: 15px; }
.wjs-bundle__label { display: flex; flex-direction: column; gap: 2px; }
.wjs-bundle__item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-16); align-items: center; }
.wjs-bundle__thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; display: block; }
.wjs-bundle__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-bundle__text { display: flex; flex-direction: column; gap: 2px; }
.wjs-bundle__text a { color: var(--fg-primary); }
.wjs-bundle .wjs-price { margin: 0; }
/* Key facts */
.wjs-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.wjs-facts li { display: flex; align-items: center; gap: var(--space-8); background: var(--surface-section); border-radius: var(--radius-md); padding: var(--space-8) var(--space-16); }
.wjs-facts li > span { display: flex; flex-direction: column; }
.wjs-facts strong { font: 700 var(--fs-title-16)/1.4 var(--font-title); }
/* Buy row */
.wjs-pdp__buyrow { display: grid; grid-template-columns: auto 1fr; gap: var(--space-16); align-items: center; }
/* Story card (one reason, one photo) */
.wjs-story { display: flex; flex-direction: column; background: var(--surface-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); height: 100%; }
.wjs-story__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-warm); }
.wjs-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-story__body { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-story__body p { margin: 0; }
/* Post card (Home Ideas) */
.wjs-post { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-post__media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-warm); margin-bottom: var(--space-8); }
.wjs-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-post p { margin: 0; }
.wjs-post__title { margin: 0; }
.wjs-post__title a { color: var(--fg-primary); text-decoration: none; }
.wjs-post__title a:hover { text-decoration: underline; }
.wjs-post__title a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* Shop the look */
.wjs-look { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-40); align-items: center; }
.wjs-look__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-warm); }
.wjs-look__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-hotspot { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: var(--radius-pill); border: 2px solid var(--global-white); background: var(--surface-inverse); color: var(--fg-on-inverse); font: 700 var(--fs-title-14)/1 var(--font-title); cursor: pointer; box-shadow: var(--shadow-lift); display: grid; place-items: center; }
.wjs-hotspot[aria-pressed="true"] { background: var(--global-white); color: var(--fg-primary); border-color: var(--surface-inverse); }
.wjs-hotspot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-look__panel { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-look__panel p { margin: 0; }
.wjs-look__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-look__row { display: grid; grid-template-columns: 28px 64px 1fr auto; gap: var(--space-16); align-items: center; padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid transparent; }
.wjs-look__row.is-active { border-color: var(--fg-primary); }
.wjs-look__num { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--fg-on-inverse); display: grid; place-items: center; font: 700 var(--fs-title-14)/1 var(--font-title); }
.wjs-look__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; }
.wjs-look__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-look__name { display: flex; flex-direction: column; gap: 2px; }
.wjs-look__name a { color: var(--fg-primary); text-decoration: none; }
.wjs-look__name a:hover { text-decoration: underline; }
.wjs-look__name .wjs-price { margin: 0; }
@media (max-width: 1023px) { .wjs-look { grid-template-columns: 1fr; gap: var(--space-24); } }
/* Reviews: real text with photos */
.wjs-review-list { display: flex; flex-direction: column; }
.wjs-review.has-photo { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-24); align-items: start; }
.wjs-review__photo { width: 120px; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); }
.wjs-review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-review__text { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-review__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.wjs-reviews--compact { grid-template-columns: 320px 1fr; }
.wjs-reviews--compact .wjs-review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.wjs-reviews--compact .wjs-review { border-bottom: 0; padding: 0; }
.wjs-reviews--compact .wjs-review.has-photo { display: flex; flex-direction: column; }
.wjs-reviews--compact .wjs-review__photo { width: 100%; aspect-ratio: 4 / 3; }
.wjs-reviews--compact .wjs-review .wjs-body { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1023px) { .wjs-reviews--compact { grid-template-columns: 1fr; } .wjs-reviews--compact .wjs-review-list { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .wjs-review.has-photo { grid-template-columns: 88px 1fr; gap: var(--space-16); } .wjs-review__photo { width: 88px; } }
/* Will it fit */
.wjs-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.wjs-fit__fig { margin: 0; background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-fit__fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.wjs-fit__tables { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-40); align-items: start; }
.wjs-fit__tables h3 { margin: var(--space-16) 0 0; }
.wjs-fit__tables h3:nth-of-type(1) { grid-column: 1; grid-row: 1; } .wjs-fit__tables h3:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.wjs-fit__tables table:nth-of-type(1) { grid-column: 1; grid-row: 2; } .wjs-fit__tables table:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.wjs-spec { width: 100%; }
.wjs-spec th { text-align: left; font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-secondary); width: 42%; vertical-align: top; }
.wjs-spec td { font: 400 var(--fs-body-14)/1.4 var(--font-text); }
.wjs-spec__line { display: block; }
@media (max-width: 767px) { .wjs-fit, .wjs-fit__tables { grid-template-columns: 1fr; } .wjs-fit__tables h3, .wjs-fit__tables table { grid-column: 1 !important; grid-row: auto !important; } }
/* Black Friday explainer and offer */
.wjs-bf { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-40); align-items: center; background: var(--surface-warm); border-radius: var(--radius-xl); padding: var(--space-40); }
.wjs-bf__text { display: flex; flex-direction: column; gap: var(--space-16); }
.wjs-bf__text p, .wjs-bf__text h2 { margin: 0; }
.wjs-bf .wjs-body.wjs-muted { color: var(--fg-primary); }
.wjs-offer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: center; background: var(--surface-sand); border-radius: var(--radius-xl); padding: var(--space-40); }
.wjs-offer__media img { width: 100%; height: auto; display: block; }
.wjs-offer__text { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.wjs-offer__text p, .wjs-offer__text h2 { margin: 0; }
.wjs-offer .wjs-body.wjs-muted { color: var(--fg-primary); }
@media (max-width: 1023px) { .wjs-bf, .wjs-offer { grid-template-columns: 1fr; padding: var(--space-24); } }
/* PLP banner */
.wjs-plp-banner { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-24); align-items: center; background: var(--surface-warm); border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-16); }
.wjs-plp-banner__text { padding: var(--space-24) var(--space-40); display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-plp-banner__text h1, .wjs-plp-banner__text p { margin: 0; }
.wjs-plp-banner__media { height: 100%; min-height: 160px; }
.wjs-plp-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .wjs-plp-banner { grid-template-columns: 1fr; } .wjs-plp-banner__text { padding: var(--space-24) var(--space-16) 0; } .wjs-plp-banner__media { min-height: 120px; } }
/* progress track (rating distribution, load more, rails) */
.wjs-progress { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: var(--surface-section); overflow: hidden; }
.wjs-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--fg-primary); }
.wjs-dist li { grid-template-columns: 28px 1fr 48px; }
.wjs-dist li > span:last-child { text-align: right; }
/* product card spec line: two lines */
.wjs-pcard__desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* reviews, compact (home): photo as a thumbnail beside the text */
.wjs-reviews--compact .wjs-review.has-photo { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-16); }
.wjs-reviews--compact .wjs-review__photo { width: 72px; aspect-ratio: 1 / 1; }
.wjs-reviews--compact .wjs-review-list { align-items: start; }
/* trust list inside the buy box: one row each */
.wjs-pdp__info .wjs-trust--panel { grid-template-columns: 1fr; padding: var(--space-16) var(--space-24); gap: var(--space-8); }
/* rating link on warm grounds */
.wjs-section--warm .wjs-link--subtle, .wjs-section--warm .wjs-rating, .wjs-hero--split .wjs-link--subtle { color: var(--fg-primary); }
/* gallery: room photos are 4:3; drawings and infographics are shown whole */
.wjs-gallery > *, .wjs-gallery__main { min-width: 0; }
.wjs-gallery__main .wjs-img { aspect-ratio: 4 / 3; }
.wjs-gallery__main .wjs-img img.is-contain { object-fit: contain; background: var(--global-white); }
.wjs-gallery__thumb img.is-contain { object-fit: contain; background: var(--global-white); }
@media (max-width: 599px) {
  .wjs-cline { grid-template-columns: 80px 1fr 40px; }
  .wjs-cline__thumb { grid-row: 1 / span 3; }
  .wjs-cline__qty { grid-column: 2; grid-row: 2; }
  .wjs-cline__total { grid-column: 2 / 4; grid-row: 3; justify-self: end; }
}
.wjs-bf .wjs-eyebrow, .wjs-offer .wjs-eyebrow, .wjs-plp-banner .wjs-eyebrow { color: var(--fg-primary); }
.wjs-reviews--compact .wjs-review-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wjs-reviews > *, .wjs-review-list > *, .wjs-review__text { min-width: 0; }
.wjs-pdp > *, .wjs-cart > *, .wjs-cline > * { min-width: 0; }
@media (max-width: 599px) { .wjs-pdp__buyrow { grid-template-columns: 1fr; justify-items: start; } .wjs-pdp__buyrow .wjs-pdp__add { width: 100%; } }
@media (max-width: 1023px) { .wjs-pdp__sticky:not(.is-on) { visibility: hidden; transform: translateY(100%); } .wjs-pdp__sticky { transition: transform var(--dur-base) var(--ease-soft), visibility var(--dur-base); } }
@media (prefers-reduced-motion: reduce) { .wjs-pdp__sticky { transition: none; } }

/* Gallery: the thumbnail rail never makes the gallery taller than the main image; it scrolls instead. */
@media (min-width: 600px) {
  .wjs-gallery { align-items: stretch; }
  .wjs-gallery__thumbs { height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; scroll-behavior: smooth; padding-right: 2px; }
  .wjs-gallery__thumbs li { flex: 0 0 auto; }
}

/* ---------- Hero banner: full-bleed photo; live text stays on the 8 locked styles (title-28), scrim only behind the text ---------- */
.wjs-hero--banner { min-height: clamp(480px, 40vw, 600px); }
.wjs-hero--banner .wjs-hero__scrim { display: none; }
.wjs-hero--banner .wjs-hero__content { padding: 80px var(--page-gutter) 72px; gap: var(--space-16); max-width: 760px; }
.wjs-hero--banner .wjs-hero__content::before { inset: 4% -6% 0; background: radial-gradient(closest-side, var(--overlay-scrim-strong), var(--overlay-scrim) 55%, transparent); }
.wjs-hero--banner .wjs-hero__actions { margin-top: var(--space-8); }
.wjs-hero--banner .wjs-h1, .wjs-hero--banner .wjs-hero__sub { color: var(--global-white); }
.wjs-hero__eyebrow { margin: 0; font: 700 var(--fs-title-16)/1.4 var(--font-title); color: var(--global-white); }
.wjs-hero--banner .wjs-hero__tag { margin: 0; font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--global-white); }
.wjs-hero--banner .wjs-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) {
  .wjs-hero--banner { min-height: 480px; }
  .wjs-hero--banner .wjs-hero__content { padding: 64px var(--page-gutter-m) 48px; }
}

/* ---------- Layout links (every configuration of one model, by room size) ---------- */
.wjs-sibs--layout .wjs-optgroup__legend { width: 100%; }
.wjs-sibs__count { margin-left: auto; font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-secondary); }
.wjs-sibs__rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--surface-warm); border-radius: var(--radius-md); }
.wjs-sibs__room { display: flex; flex-direction: column; align-items: center; gap: 0; padding: var(--space-8) 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-primary); cursor: pointer; font: inherit; min-height: 48px; }
.wjs-sibs__room:hover { background: var(--surface-card); }
.wjs-sibs__room[aria-pressed="true"] { background: var(--surface-card); box-shadow: var(--shadow-card); }
.wjs-sibs__room:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-sibs__room-name { font: 700 var(--fs-title-14)/1.4 var(--font-title); }
.wjs-sibs__room-sub { font: 400 var(--fs-body-12)/1.4 var(--font-text); color: var(--fg-primary); }
.wjs-sibs__summary { margin: 0; min-height: 40px; font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-secondary); }
.wjs-sibs__summary strong { font-family: var(--font-title); font-weight: 700; color: var(--fg-primary); }
.wjs-sibs ul.wjs-sibs__layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-8); }
.wjs-sib--layout { flex-direction: column; justify-content: space-between; gap: 4px; padding: 6px 4px; height: 100%; min-height: 76px; }
.wjs-sib--layout[aria-current="page"] { padding: 5px 3px; }
.wjs-sib__plan { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.wjs-sib__plan img { display: block; max-width: 100%; height: auto; }
.wjs-sib--layout .wjs-sib__price { font-size: var(--fs-body-14); }

/* ---------- PhotoTiles ---------- */
.wjs-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--tile-cols, 4), minmax(0, 1fr)); gap: var(--space-16); }
.wjs-tiles--2 { --tile-cols: 2; } .wjs-tiles--3 { --tile-cols: 3; } .wjs-tiles--4 { --tile-cols: 4; }
.wjs-tile { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.wjs-tile__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-warm); }
.wjs-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wjs-tile__text { display: flex; flex-direction: column; gap: 4px; }
.wjs-tile__text p { margin: 0; }
.wjs-tiles--sm { gap: var(--space-16) var(--space-16); }
@media (max-width: 1023px) { .wjs-tiles--4 { --tile-cols: 2; } }
@media (max-width: 599px) { .wjs-tiles--3, .wjs-tiles--4 { --tile-cols: 2; } .wjs-tiles { gap: var(--space-16) var(--space-8); } }

/* ---------- CompareTable ---------- */
.wjs-compare { position: relative; overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); }
.wjs-compare:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wjs-compare__table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.wjs-compare__table th, .wjs-compare__table td { text-align: left; vertical-align: top; padding: var(--space-16); border-bottom: 1px solid var(--divider); font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-primary); }
.wjs-compare__table tbody th { font-family: var(--font-title); font-weight: 700; color: var(--fg-secondary); width: 180px; }
.wjs-compare__table tbody tr:last-child th, .wjs-compare__table tbody tr:last-child td { border-bottom: 0; }
.wjs-compare__corner { width: 180px; vertical-align: bottom !important; }
.wjs-compare__head { font-weight: 400 !important; }
.wjs-compare__cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.wjs-compare__product { display: flex; flex-direction: column; gap: var(--space-8); text-decoration: none; color: var(--fg-primary); }
.wjs-compare__product:hover .wjs-h6 { text-decoration: underline; }
.wjs-compare__thumb { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-warm); }
.wjs-compare__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) { .wjs-compare__table { min-width: 560px; } .wjs-compare__table tbody th, .wjs-compare__corner { width: 120px; } }

/* PDP: the gallery stays in view while the buy box scrolls (desktop) */
@media (min-width: 1024px) { .wjs-pdp > .wjs-gallery { position: sticky; top: var(--space-24); } }
.wjs-sibs__room-n { display: none; }
@media (max-width: 599px) { .wjs-sibs__room-desc { display: none; } .wjs-sibs__room-n { display: inline; } }

/* Footer email sign-up (the live footer has one) */
.wjs-footer__news { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: var(--space-24) var(--space-64); align-items: center; padding-bottom: var(--space-40); margin-bottom: var(--space-40); border-bottom: 1px solid var(--divider-inverse, rgba(255,255,255,.2)); }
.wjs-footer__news-text { display: flex; flex-direction: column; gap: var(--space-8); }
.wjs-footer__news-text h2, .wjs-footer__news-text p { margin: 0; color: var(--fg-on-inverse); }
.wjs-footer__form { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.wjs-footer__input { flex: 1 1 220px; min-width: 0; height: var(--control-md, 40px); padding: 0 var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--global-white); background: transparent; color: var(--fg-on-inverse); font: 400 var(--fs-body-16)/1.4 var(--font-text); }
.wjs-footer__input::placeholder { color: var(--fg-on-inverse); opacity: .8; }
.wjs-footer__input:focus-visible { outline: none; box-shadow: var(--focus-ring-inverse); }
.wjs-footer__news-err { flex-basis: 100%; margin: 0; font: 400 var(--fs-body-14)/1.4 var(--font-text); color: var(--fg-on-inverse); }
.wjs-footer__news-done { margin: 0; display: flex; align-items: center; gap: var(--space-8); font: 700 var(--fs-title-16)/1.4 var(--font-title); color: var(--fg-on-inverse); }
@media (max-width: 1023px) { .wjs-footer__news { grid-template-columns: 1fr; } }
/* announcement: the link never breaks inside itself; on phones it drops under the text */
.wjs-announce { flex-wrap: wrap; text-align: center; }
.wjs-announce a { white-space: nowrap; }
@media (max-width: 599px) { .wjs-announce { flex-direction: column; gap: 2px; } }

/* ---------- Surfaces (Allen, 2026-10-21): large areas use only the page off-white, white and walnut.
   Secondary colors (sand, warm, section beige, taupe) stay small: badges, chips, icon tiles, selected states, tracks, image placeholders. ---------- */
.wjs-section--band, .wjs-section--warm { background: var(--surface-card); }
.wjs-section--band .wjs-reviews, .wjs-section--warm .wjs-reviews, .wjs-section--band .wjs-compare, .wjs-section--band .wjs-story, .wjs-section--warm .wjs-story { box-shadow: none; border: 1px solid var(--divider); }
.wjs-trust--panel { background: var(--surface-page); }
.wjs-cta--brand, .wjs-cta--plain { background: var(--surface-page); }
.wjs-hero--split .wjs-hero__content { background: var(--surface-card); border: 1px solid var(--divider); border-right: 0; }
.wjs-hero--split .wjs-hero__media { background: var(--surface-page); }
.wjs-tiers--progress { background: var(--surface-card); border: 1px solid var(--divider); }
.wjs-tiers__meter { background: var(--surface-section); }
.wjs-tiers__ladder li { box-shadow: none; border: 1px solid var(--divider); }
.wjs-tiers__ladder li:last-child { border-color: var(--surface-inverse); }
.wjs-bf, .wjs-offer, .wjs-plp-banner { background: var(--surface-card); border: 1px solid var(--divider); }
.wjs-facts li { background: var(--surface-page); }
.wjs-sibs__rooms { background: var(--surface-page); border: 1px solid var(--divider); }
.wjs-removed { background: var(--surface-page); }
.wjs-section--band .wjs-compare:focus-visible, .wjs-section--warm .wjs-compare:focus-visible { box-shadow: var(--focus-ring); }