/* One presentation for chosen fabric variants. No pricing or control behaviour. */
html body {
  --rtf-variant-base-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l8.4 4.3-8.4 4.3-8.4-4.3zM3.6 12.2l8.4 4.3 8.4-4.3M3.6 16.5l8.4 4.3 8.4-4.3'/%3E%3C/svg%3E");
  --rtf-variant-scale-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM7 7v4M11 7v6M15 7v4M19 7v6'/%3E%3C/svg%3E");
}
/* Important declarations in this named layer supersede the older unlayered
   component overrides without repeating their increasing specificity. */
@layer rtf-variants {
  html body .rtf-variant-list {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important; grid-template-areas: none !important;
    grid-auto-flow: row !important; gap: 6px !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    overflow: visible !important; list-style: none !important;
  }
  html body .rtf-variant-group { display: contents !important; }
  html body :is(.rtf-variant-row, .rtf-variant-field) {
    display: grid !important; grid-template-columns: 5.5em minmax(0, 1fr) !important;
    grid-template-rows: auto !important; grid-template-areas: none !important;
    align-items: start !important; align-content: start !important;
    justify-items: stretch !important; justify-content: stretch !important;
    grid-column: 1 / -1 !important; grid-row: auto !important;
    box-sizing: border-box !important; min-width: 0 !important; width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; gap: 6px 8px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; text-align: left !important;
    font-size: .875rem !important; line-height: 1.5 !important;
  }
  html body [data-rtf-variant-kind='base'] { --rtf-variant-icon: var(--rtf-variant-base-icon); }
  html body [data-rtf-variant-kind='scale'] { --rtf-variant-icon: var(--rtf-variant-scale-icon); }
  html body .rtf-variant-row[data-rtf-variant-kind='base'] { order: 0 !important; }
  html body .rtf-variant-row[data-rtf-variant-kind='scale'] { order: 1 !important; }
  html body .rtf-variant-label {
    position: relative !important; display: block !important; grid-column: 1 !important;
    grid-row: 1 !important; align-self: start !important; box-sizing: border-box !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important;
    padding: 0 0 0 24px !important; border: 0 !important; background: transparent !important;
    color: var(--ink-muted) !important; font-family: inherit !important;
    font-size: .8125rem !important; font-weight: 500 !important; line-height: 1.6154 !important;
    text-align: left !important; text-transform: none !important; letter-spacing: normal !important; white-space: normal !important;
    overflow: visible !important; clip: auto !important; clip-path: none !important;
  }
  html body .rtf-variant-label::before {
    content: '' !important; position: absolute !important; display: block !important;
    width: 16px !important; height: 16px !important; left: 0 !important; top: 3px !important;
    margin: 0 !important; padding: 0 !important; background: var(--brand-strong) !important;
    mask: var(--rtf-variant-icon) center/contain no-repeat !important;
    -webkit-mask: var(--rtf-variant-icon) center/contain no-repeat !important;
  }
  html body .rtf-variant-label[data-rtf-variant-colon]::after { content: ':' !important; }
  html body .rtf-variant-has-icon::before { content: none !important; display: none !important; }
  html body .rtf-variant-label > :is(.rtf-stage-icon, .rtf-purchase-summary__icon, .icon) {
    position: absolute !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: 16px !important; height: 16px !important;
    left: 0 !important; top: 3px !important; margin: 0 !important; color: var(--brand-strong) !important;
  }
  html body .rtf-variant-label .icon { width: 16px !important; height: 16px !important; }
  html body .rtf-variant-value {
    display: block !important; position: static !important; align-self: start !important;
    grid-column: 2 !important; grid-row: 1 !important; box-sizing: border-box !important;
    min-width: 0 !important; width: auto !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; color: var(--ink) !important;
    font-size: .875rem !important; font-weight: 600 !important; line-height: 1.5 !important;
    text-align: left !important; white-space: normal !important; overflow: visible !important;
    overflow-wrap: anywhere !important; text-overflow: clip !important; -webkit-line-clamp: unset !important;
  }
  html body .rtf-variant-value > p { margin: 0 !important; padding: 0 !important; font: inherit !important; }
  html body :is(.rtf-variant-list, .rtf-variant-group, .rtf-variant-row, .rtf-variant-value)::after,
  html body .rtf-variant-row::before { content: none !important; display: none !important; }
  html body .rtf-variant-field > .rtf-variant-label { align-self: center !important; }
  html body .rtf-variant-field .rtf-choice { min-width: 0 !important; width: 100% !important; }
  html body .rtf-variant-field .rtf-choice-button {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important; gap: 8px !important; width: 100% !important;
    height: auto !important; min-height: 44px !important; padding: 10px 12px !important;
    font-size: .875rem !important; line-height: 1.5 !important;
  }
  html body .rtf-variant-field .rtf-choice-value {
    min-width: 0 !important; max-height: none !important; white-space: normal !important;
    overflow: visible !important; overflow-wrap: anywhere !important; text-overflow: clip !important;
    font-size: .875rem !important; font-weight: 600 !important; line-height: 1.5 !important;
  }
  html body .rtf-variant-field .rtf-choice-arrow { justify-self: end !important; }
  html body .rtf-variant-field .rtf-variant-error { grid-column: 1 / -1 !important; grid-row: auto !important; }
  html body :is(.rtf-variant-list, .rtf-variant-row, .rtf-variant-field)[hidden] { display: none !important; }
  @media (forced-colors: active) {
    html body .rtf-variant-label::before { background: CanvasText !important; forced-color-adjust: none; }
  }
}
