/**
 * APW Product Configurator — default theme.
 *
 * Theme-inheriting structural styles driven entirely by --apwpc-*
 * custom properties. Sites override the variables (later mapped from
 * appearance settings) without touching selectors. No brand colours:
 * the palette is theme text plus a small set of neutral greys and one
 * functional error red. Selected and focus states never rely on colour
 * alone.
 */

.apwpc-configurator {
  --apwpc-max-width: 62rem;
  --apwpc-gap: 1.5rem;
  --apwpc-field-gap: 1rem;
  --apwpc-field-height: 2.75rem;
  --apwpc-border-width: 1px;
  --apwpc-border-color: #dcdcde;
  --apwpc-radius: 4px;
  --apwpc-section-bg: #ffffff;
  --apwpc-section-padding: 1rem;
  --apwpc-accent: #50575e;
  --apwpc-selected-bg: #f0f0f0;
  --apwpc-selected-border: #50575e;
  --apwpc-focus-ring: currentColor;
  --apwpc-font-size: 1rem;
  --apwpc-label-weight: 600;
  --apwpc-muted: #767676;
  --apwpc-error: #b32d2e;
  --apwpc-button-bg: #50575e;
  --apwpc-button-text: #ffffff;
  --apwpc-button-radius: 4px;
  --apwpc-button-height: 2.75rem;
  --apwpc-swatch-size: 36px;
  --apwpc-swatch-gap: 8px;
  --apwpc-dropdown-swatch-size: 20px;
  --apwpc-focus-width: 2px;
  --apwpc-heading-size: 1.05em;
  --apwpc-size-cols-desktop: 6;
  --apwpc-size-cols-tablet: 4;
  --apwpc-size-cols-mobile: 2;
  font: inherit;
  color: inherit;
  font-size: var(--apwpc-font-size, 1rem);
  max-width: var(--apwpc-max-width, 62rem);
}

/*
 * Font family (store-wide setting, delivered as a root class). The
 * default, inherit, adds nothing: the root keeps `font: inherit`.
 */
.apwpc-configurator.apwpc-ap-font-family--system {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.apwpc-configurator.apwpc-ap-font-family--serif {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.apwpc-configurator.apwpc-ap-font-family--monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.apwpc-configurator [hidden] {
  display: none !important;
}

.apwpc-configurator .apwpc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * The root carries both classes (apwpc-configurator apwpc-layout
 * apwpc-layout--<mode>), so this is a same-element selector. It keeps
 * the maximum width the root already takes from --apwpc-max-width.
 */
.apwpc-configurator.apwpc-layout {
  display: block;
}

.apwpc-configurator .apwpc-group {
  margin: 0 0 var(--apwpc-gap, 1.5rem);
  padding: 0;
  border: 0;
}

.apwpc-configurator .apwpc-group--boxed {
  background: var(--apwpc-section-bg, #ffffff);
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  padding: var(--apwpc-section-padding, 1rem);
}

.apwpc-configurator .apwpc-group__title {
  margin: 0 0 0.5rem;
  font-size: var(--apwpc-heading-size, 1.05em);
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-group__description {
  margin: 0 0 var(--apwpc-field-gap, 1rem);
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-group--cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--apwpc-field-gap, 1rem);
}

.apwpc-configurator .apwpc-group--cols-2 .apwpc-group__title,
.apwpc-configurator .apwpc-group--cols-2 .apwpc-group__description {
  grid-column: 1 / -1;
}

.apwpc-configurator .apwpc-group--cols-2 .apwpc-field--w-full {
  grid-column: 1 / -1;
}

.apwpc-configurator .apwpc-field {
  margin: 0 0 var(--apwpc-field-gap, 1rem);
  min-width: 0;
}

/*
 * Fields per row (section layout): a grid of two or three cells.
 * Wide controls and width "full" span the row; hidden fields take no
 * cell. Tablet keeps at most two columns, phones one.
 */
.apwpc-configurator .apwpc-group.apwpc-group--fields-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--apwpc-field-gap, 1rem);
  align-items: start;
}

.apwpc-configurator .apwpc-group.apwpc-group--fields-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--apwpc-field-gap, 1rem);
  align-items: start;
}

.apwpc-configurator .apwpc-group.apwpc-group--fields-2 .apwpc-group__title,
.apwpc-configurator .apwpc-group.apwpc-group--fields-2 .apwpc-group__description,
.apwpc-configurator .apwpc-group.apwpc-group--fields-3 .apwpc-group__title,
.apwpc-configurator .apwpc-group.apwpc-group--fields-3 .apwpc-group__description,
.apwpc-configurator .apwpc-group.apwpc-group--fields-2 .apwpc-field--span-row,
.apwpc-configurator .apwpc-group.apwpc-group--fields-3 .apwpc-field--span-row {
  grid-column: 1 / -1;
}

.apwpc-configurator .apwpc-group.apwpc-group--fields-2 .apwpc-field,
.apwpc-configurator .apwpc-group.apwpc-group--fields-3 .apwpc-field {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .apwpc-configurator .apwpc-group.apwpc-group--fields-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Label left of the field: one field's own metadata
 * (apwpc-field--label-left) or the store-wide Layout setting
 * (apwpc-layout--label_left on the root).
 */
.apwpc-configurator .apwpc-field--label-left,
.apwpc-configurator.apwpc-layout--label_left .apwpc-field {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
}

.apwpc-configurator .apwpc-field--label-left .apwpc-field__help,
.apwpc-configurator .apwpc-field--label-left .apwpc-field__control,
.apwpc-configurator .apwpc-field--label-left .apwpc-field__error,
.apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__help,
.apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__control,
.apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__error {
  grid-column: 2;
}

.apwpc-configurator .apwpc-field__label {
  display: block;
  font-weight: var(--apwpc-label-weight, 600);
  margin-bottom: 0.25rem;
}

.apwpc-configurator .apwpc-field__required {
  color: var(--apwpc-error, #b32d2e);
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-field__help {
  margin: 0.25rem 0 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-field__control {
  margin-top: 0.25rem;
  min-width: 0;
}

.apwpc-configurator .apwpc-field--label-left .apwpc-field__control,
.apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__control {
  margin-top: 0;
}

/*
 * Section label position. Four classes, so a section's own answer beats
 * the root label-left rules whatever the order.
 */
.apwpc-configurator .apwpc-group.apwpc-group--labels-stacked .apwpc-field {
  display: block;
}

.apwpc-configurator .apwpc-group.apwpc-group--labels-stacked .apwpc-field .apwpc-field__control {
  margin-top: 0.25rem;
}

.apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
}

.apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__help,
.apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__control,
.apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__error {
  grid-column: 2;
}

.apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__control {
  margin-top: 0;
}

/*
 * An artwork slot whose label position says stacked. Four classes, so
 * it beats a site rule that lays out .apwpc-field--artwork as a grid.
 * A left label uses the .apwpc-field--label-left rules above.
 */
.apwpc-configurator .apwpc-field.apwpc-field--artwork.apwpc-field--label-stacked {
  display: block;
}

.apwpc-configurator .apwpc-field.apwpc-field--artwork.apwpc-field--label-stacked > .apwpc-field__control {
  margin-top: 0.25rem;
}

.apwpc-configurator .apwpc-field__error {
  margin: 0.25rem 0 0;
  font-size: 0.875em;
  font-weight: var(--apwpc-label-weight, 600);
  color: var(--apwpc-error, #b32d2e);
}

/*
 * Label position (store-wide setting). "left" reaches each field
 * through its own wrapper class. "stacked" is also an explicit answer
 * to the Layout setting: with the label-left layout mode, fields
 * stack again.
 */
.apwpc-configurator.apwpc-layout--label_left.apwpc-ap-label-position--stacked .apwpc-field {
  display: block;
}

.apwpc-configurator.apwpc-layout--label_left.apwpc-ap-label-position--stacked .apwpc-field .apwpc-field__control {
  margin-top: 0.25rem;
}

.apwpc-configurator .apwpc-field__error[data-apwpc-issue-kind="incomplete"] {
  color: var(--apwpc-muted, #767676);
  font-weight: normal;
}

.apwpc-configurator .apwpc-field__error:empty {
  display: none;
}

.apwpc-configurator .apwpc-field__missing {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  border: var(--apwpc-border-width, 1px) dashed var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator .apwpc-control {
  display: block;
}

.apwpc-configurator .apwpc-control select,
.apwpc-configurator .apwpc-control input[type="text"],
.apwpc-configurator .apwpc-control input[type="number"],
.apwpc-configurator .apwpc-control textarea {
  font: inherit;
  color: inherit;
  min-height: var(--apwpc-field-height, 2.75rem);
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  padding: 0.375rem 0.625rem;
  background: transparent;
  max-width: 100%;
}

.apwpc-configurator .apwpc-control textarea {
  min-height: calc(var(--apwpc-field-height, 2.75rem) * 2);
  resize: vertical;
}

/*
 * Keyboard focus: every focusable configurator control, the summary
 * buttons included, gets a visible outline whose width is the
 * store-wide focus width.
 */
.apwpc-configurator :focus-visible {
  outline: var(--apwpc-focus-width, 2px) solid var(--apwpc-focus-ring, #50575e);
  outline-offset: 2px;
}

.apwpc-configurator .apwpc-option {
  font: inherit;
  font-size: var(--apwpc-option-font-size, 1em);
  color: inherit;
  background: transparent;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  padding: var(--apwpc-option-pad-y, 0.5rem) var(--apwpc-option-pad-x, 0.75rem);
  cursor: pointer;
  transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out;
}

/*
 * Hover is a preview cue only: a dashed accent border on an option
 * that is not selected. It never reuses the selected treatment (solid
 * heavier border, check mark, bold label), so the pointer resting on a
 * button can not be mistaken for the customer's choice.
 */
.apwpc-configurator button.apwpc-option:not(.is-selected):hover {
  border-color: var(--apwpc-accent, #50575e);
  border-style: dashed;
}

/*
 * Selected does not rely on colour: a solid border one step heavier
 * than the resting border (padding gives that step back so the
 * button does not change size), a bold label and the check mark.
 */
.apwpc-configurator .apwpc-option.is-selected {
  background: var(--apwpc-selected-bg, #f0f0f0);
  border-color: var(--apwpc-selected-border, #50575e);
  border-style: solid;
  border-width: calc(var(--apwpc-border-width, 1px) + 1px);
  padding: calc(var(--apwpc-option-pad-y, 0.5rem) - 1px) calc(var(--apwpc-option-pad-x, 0.75rem) - 1px);
  font-weight: 600;
}

.apwpc-configurator .apwpc-option__check {
  display: none;
  margin-left: 0.375rem;
  font-weight: 600;
}

.apwpc-configurator .apwpc-option.is-selected .apwpc-option__check {
  display: inline;
}

.apwpc-configurator .apwpc-option.is-disabled,
.apwpc-configurator .apwpc-control .is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.apwpc-configurator button.apwpc-option.is-disabled:hover {
  border-color: var(--apwpc-border-color, #dcdcde);
  border-style: solid;
}

/*
 * Selected-choice style (store-wide setting, delivered as a root
 * class) for buttons, cards, radio options and swatches. Every style
 * keeps a cue that is not colour: the check mark, a heavier border, or
 * both. Cards have no mark element, so theirs is generated.
 *
 * check-and-border (default): the check mark and a heavier border.
 */
.apwpc-configurator.apwpc-ap-selected-indicator--check-and-border .apwpc-option.is-selected {
  border-width: calc(var(--apwpc-border-width, 1px) + 1px);
  padding: calc(var(--apwpc-option-pad-y, 0.5rem) - 1px) calc(var(--apwpc-option-pad-x, 0.75rem) - 1px);
}

.apwpc-configurator.apwpc-ap-selected-indicator--check-and-border .apwpc-option.is-selected .apwpc-option__check {
  display: inline;
}

/* border: a 3px border and a bold label, no check mark. */
.apwpc-configurator.apwpc-ap-selected-indicator--border .apwpc-option.is-selected {
  border-width: 3px;
  padding: calc(var(--apwpc-option-pad-y, 0.5rem) + var(--apwpc-border-width, 1px) - 3px) calc(var(--apwpc-option-pad-x, 0.75rem) + var(--apwpc-border-width, 1px) - 3px);
  font-weight: 700;
}

.apwpc-configurator.apwpc-ap-selected-indicator--border .apwpc-option.is-selected .apwpc-option__check,
.apwpc-configurator.apwpc-ap-selected-indicator--border .apwpc-swatch__check,
.apwpc-configurator.apwpc-ap-selected-indicator--border .apwpc-card.is-selected::after {
  display: none;
}

/* filled: the selected background and the check mark, resting border. */
.apwpc-configurator.apwpc-ap-selected-indicator--filled .apwpc-option.is-selected {
  background: var(--apwpc-selected-bg, #f0f0f0);
  border-width: var(--apwpc-border-width, 1px);
  padding: var(--apwpc-option-pad-y, 0.5rem) var(--apwpc-option-pad-x, 0.75rem);
}

.apwpc-configurator.apwpc-ap-selected-indicator--filled .apwpc-option.is-selected .apwpc-option__check {
  display: inline;
}

.apwpc-configurator .apwpc-card.is-selected::after {
  content: "\2713";
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  font-weight: 600;
}

.apwpc-configurator .apwpc-option__help {
  display: block;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
}

.apwpc-configurator .apwpc-card img {
  max-width: 100%;
  height: auto;
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator .apwpc-card__label {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-card__help {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-control--buttons [role="radio"],
.apwpc-configurator .apwpc-control--yes_no [role="radio"] {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
}

/*
 * Option size (store-wide setting, delivered as a root class): the
 * padding and text size of option buttons, cards and radio/checkbox
 * options, through custom properties the option rules read. Medium is
 * the stylesheet default; swatch controls reset these to it.
 */
.apwpc-configurator.apwpc-ap-choice-size--small {
  --apwpc-option-pad-y: 0.25rem;
  --apwpc-option-pad-x: 0.5rem;
  --apwpc-option-font-size: 0.875em;
}

.apwpc-configurator.apwpc-ap-choice-size--medium {
  --apwpc-option-pad-y: 0.5rem;
  --apwpc-option-pad-x: 0.75rem;
  --apwpc-option-font-size: 1em;
}

.apwpc-configurator.apwpc-ap-choice-size--large {
  --apwpc-option-pad-y: 0.75rem;
  --apwpc-option-pad-x: 1rem;
  --apwpc-option-font-size: 1.125em;
}

/*
 * Option columns (store-wide setting, delivered as a root class): a
 * grid of N equal columns for the button, card and radio option lists.
 * "auto" adds nothing and keeps the wrapping the controls always had.
 * The small-screen block below collapses every grid to one column.
 */
.apwpc-configurator.apwpc-ap-choice-columns--1 .apwpc-control--buttons,
.apwpc-configurator.apwpc-ap-choice-columns--1 .apwpc-control--cards,
.apwpc-configurator.apwpc-ap-choice-columns--1 .apwpc-control--radio fieldset {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-ap-choice-columns--2 .apwpc-control--buttons,
.apwpc-configurator.apwpc-ap-choice-columns--2 .apwpc-control--cards,
.apwpc-configurator.apwpc-ap-choice-columns--2 .apwpc-control--radio fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-ap-choice-columns--3 .apwpc-control--buttons,
.apwpc-configurator.apwpc-ap-choice-columns--3 .apwpc-control--cards,
.apwpc-configurator.apwpc-ap-choice-columns--3 .apwpc-control--radio fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-ap-choice-columns--4 .apwpc-control--buttons,
.apwpc-configurator.apwpc-ap-choice-columns--4 .apwpc-control--cards,
.apwpc-configurator.apwpc-ap-choice-columns--4 .apwpc-control--radio fieldset {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-ap-choice-columns--1 .apwpc-control--radio fieldset,
.apwpc-configurator.apwpc-ap-choice-columns--2 .apwpc-control--radio fieldset,
.apwpc-configurator.apwpc-ap-choice-columns--3 .apwpc-control--radio fieldset,
.apwpc-configurator.apwpc-ap-choice-columns--4 .apwpc-control--radio fieldset {
  min-width: 0;
}

/* Grid cells are spaced by the grid gap, not by the inline margins. */
.apwpc-configurator.apwpc-ap-choice-columns--1 .apwpc-control--buttons [role="radio"],
.apwpc-configurator.apwpc-ap-choice-columns--2 .apwpc-control--buttons [role="radio"],
.apwpc-configurator.apwpc-ap-choice-columns--3 .apwpc-control--buttons [role="radio"],
.apwpc-configurator.apwpc-ap-choice-columns--4 .apwpc-control--buttons [role="radio"] {
  margin: 0;
}

.apwpc-configurator .apwpc-swatch__chip {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  background-color: var(--apwpc-swatch, transparent);
  vertical-align: middle;
  overflow: hidden;
}

/*
 * Swatch size and gap (store-wide settings). Chips of the colour and
 * image swatch controls take the swatch size; a text chip may grow
 * wider than it is tall. The names of unavailable swatches stay in
 * title and aria-label either way.
 */
.apwpc-configurator .apwpc-control--multi .apwpc-swatch__chip,
.apwpc-configurator .apwpc-control--color_swatch .apwpc-swatch__chip,
.apwpc-configurator .apwpc-control--image_swatch .apwpc-swatch__chip {
  width: var(--apwpc-swatch-size, 36px);
  height: var(--apwpc-swatch-size, 36px);
}

.apwpc-configurator .apwpc-control--multi .apwpc-swatch__chip--text,
.apwpc-configurator .apwpc-control--color_swatch .apwpc-swatch__chip--text,
.apwpc-configurator .apwpc-control--image_swatch .apwpc-swatch__chip--text {
  width: auto;
  min-width: var(--apwpc-swatch-size, 36px);
  padding: 0 0.5rem;
  box-sizing: border-box;
  line-height: calc(var(--apwpc-swatch-size, 36px) - 2 * var(--apwpc-border-width, 1px));
  white-space: nowrap;
}

.apwpc-configurator .apwpc-control--multi,
.apwpc-configurator .apwpc-control--color_swatch,
.apwpc-configurator .apwpc-control--image_swatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--apwpc-swatch-gap, 8px);
  /* The option size setting never applies to swatches. */
  --apwpc-option-pad-y: 0.5rem;
  --apwpc-option-pad-x: 0.75rem;
  --apwpc-option-font-size: 1em;
}

.apwpc-configurator .apwpc-control--multi > .apwpc-swatch-selected,
.apwpc-configurator .apwpc-control--multi > .apwpc-apparel-legacy,
.apwpc-configurator .apwpc-control--multi > .apwpc-swatch__limit {
  flex-basis: 100%;
  margin: 0;
}

/* Swatch shape (store-wide setting, delivered as a root class). */
.apwpc-configurator.apwpc-ap-swatch-shape--circle .apwpc-swatch__chip {
  border-radius: 50%;
}

.apwpc-configurator.apwpc-ap-swatch-shape--rounded .apwpc-swatch__chip {
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator.apwpc-ap-swatch-shape--square .apwpc-swatch__chip {
  border-radius: 0;
}

/*
 * Swatch dropdown (choice/swatch_dropdown): a button showing the chosen
 * colour chip and name, and a scrollable list of the same. Chip size and
 * shape follow the dropdown swatch settings, apart from the apparel
 * swatches above.
 */
.apwpc-configurator .apwpc-control--swatch-dropdown {
  position: relative;
}

.apwpc-configurator .apwpc-swatch-select__button {
  display: flex;
  align-items: center;
  gap: var(--apwpc-swatch-select-gap, 0.5rem);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--apwpc-field-height, 2.5rem);
  padding: 0.25rem 0.75rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  background: var(--apwpc-section-bg, #fff);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.apwpc-configurator .apwpc-swatch-select__button:focus-visible {
  outline: var(--apwpc-focus-width, 2px) solid var(--apwpc-focus-ring, #50575e);
  outline-offset: 2px;
}

.apwpc-configurator .apwpc-swatch-select__button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.apwpc-configurator .apwpc-swatch-select__button[aria-invalid="true"] {
  border-color: var(--apwpc-error, #b32d2e);
}

.apwpc-configurator .apwpc-swatch-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apwpc-configurator .apwpc-swatch-select__value.is-placeholder {
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-swatch-select__caret {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.apwpc-configurator .apwpc-control--swatch-dropdown.is-open .apwpc-swatch-select__caret {
  transform: rotate(225deg);
}

.apwpc-configurator .apwpc-swatch-select__chip {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--apwpc-dropdown-swatch-size, 20px);
  height: var(--apwpc-dropdown-swatch-size, 20px);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
}

.apwpc-configurator .apwpc-swatch-select__chip--light {
  border-color: rgba(0, 0, 0, 0.55);
}

.apwpc-configurator .apwpc-swatch-select__chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apwpc-configurator.apwpc-ap-dropdown-swatch-shape--rounded .apwpc-swatch-select__chip {
  border-radius: 4px;
}

.apwpc-configurator.apwpc-ap-dropdown-swatch-shape--circle .apwpc-swatch-select__chip {
  border-radius: 50%;
}

.apwpc-configurator .apwpc-swatch-select__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  max-height: min(20rem, 60vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--apwpc-section-bg, #fff);
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.apwpc-configurator .apwpc-swatch-select__option {
  display: flex;
  align-items: center;
  gap: var(--apwpc-swatch-select-gap, 0.5rem);
  margin: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.apwpc-configurator .apwpc-swatch-select__option.is-active {
  background: var(--apwpc-selected-bg, #f0f0f0);
  background: color-mix(in srgb, var(--apwpc-selected-bg, #f0f0f0) 60%, transparent);
}

.apwpc-configurator .apwpc-swatch-select__option.is-selected {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-swatch-select__check {
  flex: none;
  margin-inline-start: auto;
}

.apwpc-configurator .apwpc-swatch-select__option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (pointer: coarse) {
  .apwpc-configurator .apwpc-swatch-select__option {
    min-height: 44px;
  }
}

/*
 * A swatch that cannot be ordered is muted and crossed by a
 * diagonal line, so it never relies on colour alone.
 */
.apwpc-configurator .apwpc-option.is-disabled .apwpc-swatch__chip,
.apwpc-configurator .apwpc-option.is-unavailable .apwpc-swatch__chip {
  position: relative;
  opacity: 0.55;
}

.apwpc-configurator .apwpc-option.is-disabled .apwpc-swatch__chip::after,
.apwpc-configurator .apwpc-option.is-unavailable .apwpc-swatch__chip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 2px),
    var(--apwpc-muted, #767676) calc(50% - 2px),
    var(--apwpc-muted, #767676) calc(50% - 1px),
    var(--apwpc-section-bg, #ffffff) calc(50% - 1px),
    var(--apwpc-section-bg, #ffffff) calc(50% + 1px),
    var(--apwpc-muted, #767676) calc(50% + 1px),
    var(--apwpc-muted, #767676) calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}

.apwpc-configurator .apwpc-swatch__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apwpc-configurator .apwpc-swatch__label {
  margin-left: 0.5rem;
  vertical-align: middle;
}

.apwpc-configurator .apwpc-swatch__check {
  margin-left: 0.375rem;
  font-weight: var(--apwpc-label-weight, 600);
  vertical-align: middle;
}

.apwpc-configurator .apwpc-swatch__limit,
.apwpc-configurator .apwpc-multi__limit {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-toggle__on,
.apwpc-configurator .apwpc-toggle__off {
  display: inline-block;
  padding: 0 0.5rem;
}

.apwpc-configurator [role="switch"][aria-checked="false"] .apwpc-toggle__on,
.apwpc-configurator [role="switch"][aria-checked="true"] .apwpc-toggle__off {
  opacity: 0.55;
}

.apwpc-configurator .apwpc-unit {
  margin-left: 0.375rem;
  color: var(--apwpc-muted, #767676);
}

/* A unit shown in the caption reads as part of the label's text. */
.apwpc-configurator .apwpc-unit.apwpc-unit--caption {
  margin-left: 0;
  font-weight: normal;
}

/*
 * Input width (store-wide setting, delivered as a root class) for the
 * text, number, quantity number and dimension inputs, which carry
 * apwpc-input. "auto" adds nothing: the inputs keep their own width.
 * Widths are written for the text itself, so the padding and border
 * are added on top.
 */
.apwpc-configurator.apwpc-ap-input-width--narrow .apwpc-input {
  box-sizing: border-box;
  width: calc(8ch + 1.25rem + 2 * var(--apwpc-border-width, 1px));
  max-width: 100%;
}

.apwpc-configurator.apwpc-ap-input-width--medium .apwpc-input {
  box-sizing: border-box;
  width: calc(16ch + 1.25rem + 2 * var(--apwpc-border-width, 1px));
  max-width: 100%;
}

.apwpc-configurator.apwpc-ap-input-width--full .apwpc-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Full width dimension inputs take a row each, so the times sign goes. */
.apwpc-configurator.apwpc-ap-input-width--full .apwpc-control--dimensions .apwpc-dimension__label {
  display: flex;
  width: 100%;
}

.apwpc-configurator.apwpc-ap-input-width--full .apwpc-control--dimensions .apwpc-dimension__times {
  display: none;
}

/*
 * Dimensions layout (store-wide setting). Inline keeps the width, the
 * times sign and the height on one line (the way the field always
 * flowed); stacked puts each side on its own row. The modifier class
 * the renderer puts on its own root says the same thing.
 */
.apwpc-configurator.apwpc-ap-dimensions-layout--inline .apwpc-control--dimensions,
.apwpc-configurator .apwpc-control--dimensions.apwpc-dimensions--inline {
  display: block;
}

.apwpc-configurator.apwpc-ap-dimensions-layout--stacked .apwpc-control--dimensions,
.apwpc-configurator .apwpc-control--dimensions.apwpc-dimensions--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-ap-dimensions-layout--stacked .apwpc-dimension__times,
.apwpc-configurator .apwpc-control--dimensions.apwpc-dimensions--stacked .apwpc-dimension__times {
  display: none;
}

.apwpc-configurator .apwpc-counter,
.apwpc-configurator .apwpc-number__hint,
.apwpc-configurator .apwpc-quantity__range {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
  margin: 0.25rem 0 0;
}

.apwpc-configurator .apwpc-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.apwpc-configurator table.apwpc-grid,
.apwpc-configurator table.apwpc-matrix {
  border-collapse: collapse;
  min-width: 100%;
}

.apwpc-configurator table.apwpc-grid th,
.apwpc-configurator table.apwpc-grid td,
.apwpc-configurator table.apwpc-matrix th,
.apwpc-configurator table.apwpc-matrix td {
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  padding: 0.375rem 0.5rem;
  text-align: left;
}

.apwpc-configurator table.apwpc-grid input,
.apwpc-configurator table.apwpc-matrix input {
  width: 4.5rem;
  max-width: 100%;
}

.apwpc-configurator .apwpc-grid__total,
.apwpc-configurator .apwpc-matrix__grand-total {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-grid__hint {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-grid__unavailable,
.apwpc-configurator .apwpc-matrix__na {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/*
 * Per-size quantity controls (store-wide settings size_layout,
 * size_columns_*, size_quantity_control, size_price and
 * size_unavailable). The default is cards: one bordered box per size
 * with the label above the control, laid out in --apwpc-size-cols-*
 * columns for each screen width. Grid drops the boxes for compact
 * columns; table is one row per size (label, control, price) whatever
 * the column settings say. Steppers and the number field stay at
 * least 44px tall so they work on touch screens.
 */
.apwpc-configurator .apwpc-sizes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(var(--apwpc-size-cols-desktop, 6), minmax(0, 1fr));
}

@media (min-width: 641px) and (max-width: 1024px) {
  .apwpc-configurator .apwpc-sizes__list {
    grid-template-columns: repeat(var(--apwpc-size-cols-tablet, 4), minmax(0, 1fr));
  }
}

.apwpc-configurator .apwpc-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  padding: 0.5rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator .apwpc-size__label {
  flex: 0 0 100%;
  text-align: center;
  font-weight: var(--apwpc-label-weight, 600);
  overflow-wrap: anywhere;
}

/*
 * The minus button, the number and the plus button are one control, the
 * stepper. Its wrapper draws no box of its own, so the card lays the
 * three parts out exactly as it laid them out as direct children.
 */
.apwpc-configurator .apwpc-size__stepper {
  display: contents;
}

.apwpc-configurator .apwpc-size__input {
  flex: 1 1 3rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  text-align: center;
}

.apwpc-configurator .apwpc-size__step {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: inherit;
  background: var(--apwpc-section-bg, #ffffff);
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  cursor: pointer;
}

.apwpc-configurator .apwpc-size__step:hover:not(:disabled) {
  background: var(--apwpc-selected-bg, #f0f0f0);
}

.apwpc-configurator .apwpc-size__step:disabled {
  color: var(--apwpc-muted, #767676);
  cursor: not-allowed;
}

.apwpc-configurator .apwpc-size__price,
.apwpc-configurator .apwpc-size__unavailable {
  flex: 0 0 100%;
  text-align: center;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/* Why a typed quantity is not being sent; nothing is drawn until there is a reason. */
.apwpc-configurator .apwpc-size__hint {
  flex: 0 0 100%;
  margin: 0;
  text-align: center;
  font-size: 0.875em;
  color: var(--apwpc-error, #b32d2e);
}

.apwpc-configurator .apwpc-size__hint:empty {
  display: none;
}

/* Unavailable sizes read as such without colour: dashed box, struck label, note. */
.apwpc-configurator .apwpc-size.is-unavailable {
  border-style: dashed;
}

.apwpc-configurator .apwpc-size.is-unavailable .apwpc-size__label {
  text-decoration: line-through;
}

.apwpc-configurator .apwpc-sizes__total,
.apwpc-configurator .apwpc-sizes__minimum,
.apwpc-configurator .apwpc-sizes__empty {
  margin: 0.5rem 0 0;
}

.apwpc-configurator .apwpc-sizes__total {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-sizes__minimum {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/* What a colour change did to the quantities, said under the cards. */
.apwpc-configurator .apwpc-sizes__moved {
  margin: 0.5rem 0 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/* Said once above the cards while stock is unconfirmed; the cards stay usable. */
.apwpc-configurator .apwpc-sizes__notice {
  margin: 0 0 0.5rem;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/* Grid: compact columns without a box around each size. */
.apwpc-configurator.apwpc-ap-size-layout--grid .apwpc-sizes__list {
  gap: 0.25rem;
}

.apwpc-configurator.apwpc-ap-size-layout--grid .apwpc-size {
  padding: 0.25rem 0;
  border-width: 0;
  border-radius: 0;
}

.apwpc-configurator.apwpc-ap-size-layout--grid .apwpc-size__label {
  font-size: 0.875em;
}

/*
 * Table: one row per size. The column settings do not apply; the
 * header row the script adds is visually hidden (it only names the
 * columns for assistive technology).
 */
.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-sizes__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size {
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) auto minmax(2.5rem, 5rem) auto minmax(3.5rem, auto);
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.375rem 0;
  border-width: 0 0 var(--apwpc-border-width, 1px);
  border-radius: 0;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__label {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__step[data-step="-1"] {
  grid-column: 2;
  grid-row: 1;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__input {
  grid-column: 3;
  grid-row: 1;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__step[data-step="1"] {
  grid-column: 4;
  grid-row: 1;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__hint {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: left;
}

.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__price,
.apwpc-configurator.apwpc-ap-size-layout--table .apwpc-size__unavailable {
  grid-column: 5;
  grid-row: 1;
  text-align: right;
}

/*
 * The size grid renderer (size_quantity_grid) shares the per-size
 * classes above for its cards and grid layouts. In its table layout
 * the minus and plus buttons sit beside the number field on one line,
 * with the unavailable note under them.
 */
.apwpc-configurator .apwpc-control--size_grid .apwpc-sizes__list + .apwpc-grid__total {
  margin-top: 0.5rem;
}

.apwpc-configurator table.apwpc-grid td.apwpc-grid__cell--stepper {
  white-space: nowrap;
}

.apwpc-configurator table.apwpc-grid td.apwpc-grid__cell--stepper .apwpc-size__step,
.apwpc-configurator table.apwpc-grid td.apwpc-grid__cell--stepper .apwpc-size__input {
  vertical-align: middle;
}

.apwpc-configurator table.apwpc-grid td.apwpc-grid__cell--stepper .apwpc-grid__unavailable {
  display: block;
}

.apwpc-configurator .apwpc-dimension__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.5rem;
}

.apwpc-configurator .apwpc-dimension__caption {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-dimension__times {
  margin: 0 0.375rem;
}

.apwpc-configurator .apwpc-upload {
  border: var(--apwpc-border-width, 1px) dashed var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  padding: var(--apwpc-section-padding, 1rem);
}

.apwpc-configurator .apwpc-upload.is-dragover {
  border-style: solid;
  border-color: var(--apwpc-accent, #50575e);
}

.apwpc-configurator .apwpc-upload__instructions {
  margin: 0.5rem 0;
}

.apwpc-configurator .apwpc-upload__accepted {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
  margin: 0.25rem 0 0;
}

.apwpc-configurator .apwpc-upload__bar {
  height: 0.625rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  overflow: hidden;
  margin: 0.5rem 0;
}

.apwpc-configurator .apwpc-upload__fill {
  height: 100%;
  width: 0;
  background: var(--apwpc-accent, #50575e);
}

.apwpc-configurator .apwpc-upload__files {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.apwpc-configurator .apwpc-upload__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.375rem 0;
  border-top: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
}

.apwpc-configurator .apwpc-upload__quality,
.apwpc-configurator .apwpc-upload__quality-summary {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  padding-left: 0.5rem;
  border-left: 2px solid currentColor;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-upload__quality--below {
  color: var(--apwpc-warning, #8a5700);
}

.apwpc-configurator .apwpc-upload__quality--blocking {
  color: var(--apwpc-error, #b32d2e);
}

.apwpc-configurator .apwpc-upload__quality--meets,
.apwpc-configurator .apwpc-upload__quality--not_applicable,
.apwpc-configurator .apwpc-upload__quality--unverified,
.apwpc-configurator .apwpc-upload__quality--needs_size {
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-upload__quality.is-checking,
.apwpc-configurator .apwpc-upload__quality-summary.is-checking {
  opacity: 0.55;
}

.apwpc-configurator .apwpc-upload__preview {
  max-width: 3rem;
  max-height: 3rem;
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator .apwpc-upload__name {
  font-weight: var(--apwpc-label-weight, 600);
  word-break: break-all;
}

.apwpc-configurator .apwpc-upload__meta {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/*
 * Upload layout (store-wide setting). The renderer writes the layout
 * on the slot control as data-apwpc-upload-layout. Card is the dashed
 * box above and needs no rule. Compact lays the control out as one
 * row (button, instructions, accepted types) with tight padding;
 * dropzone is a large centred target with a heavier dashed border
 * that also takes a dropped file. Both keep the dragover feedback of
 * the base box (a solid accent border) because they leave the border
 * style and colour alone.
 */
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="compact"] .apwpc-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="compact"] .apwpc-upload__instructions,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="compact"] .apwpc-upload__accepted {
  margin: 0;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="dropzone"] .apwpc-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  text-align: center;
  border-width: calc(var(--apwpc-border-width, 1px) + 1px);
}

.apwpc-configurator .apwpc-upload__drop-hint {
  margin: 0.5rem 0;
  color: var(--apwpc-muted, #767676);
}

/*
 * Minimal dropzone (upload_layout = minimal). The box has no frame of
 * its own: the drop label is the dashed, rounded, centred target with a
 * small upload icon and the browse text; the visually hidden file input
 * before it rings the label on keyboard focus. Under it, one muted line
 * of accepted formats and the slot's instructions, then compact file
 * rows (thumbnail or type badge, name, size, View, Replace, Remove).
 * Every colour, border, corner and spacing comes from the appearance
 * custom properties; the fallbacks are the plugin defaults.
 */
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--apwpc-field-gap, 1rem) / 2);
  box-sizing: border-box;
  min-height: 6rem;
  margin: 0;
  padding: var(--apwpc-section-padding, 1rem);
  border: var(--apwpc-border-width, 1px) dashed var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  text-align: center;
  cursor: pointer;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__drop:hover,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload.is-dragover .apwpc-upload__drop {
  border-color: var(--apwpc-accent, #50575e);
  background: var(--apwpc-selected-bg, transparent);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__input:focus-visible + .apwpc-upload__drop {
  outline: var(--apwpc-focus-width, 2px) solid var(--apwpc-focus-ring, #50575e);
  outline-offset: 2px;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--apwpc-accent, currentColor);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__drop-text {
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__accepted,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__instructions {
  margin: calc(var(--apwpc-field-gap, 1rem) / 2) 0 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__files {
  margin: calc(var(--apwpc-field-gap, 1rem) / 2) 0 0;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--apwpc-field-gap, 1rem) / 2) calc(var(--apwpc-field-gap, 1rem) * 0.75);
  padding: calc(var(--apwpc-field-gap, 1rem) / 2) 0;
  border-top: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__preview,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__type {
  flex: none;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  max-width: none;
  max-height: none;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__preview {
  object-fit: cover;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--apwpc-selected-bg, transparent);
  color: var(--apwpc-muted, #767676);
  font-size: 0.6875rem;
  font-weight: var(--apwpc-label-weight, 600);
  line-height: 1;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__name {
  flex: 1 1 8rem;
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__meta {
  white-space: nowrap;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__view {
  color: var(--apwpc-accent, currentColor);
  font-size: 0.875em;
  text-decoration: underline;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__replace,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__remove {
  margin: 0;
  padding: calc(var(--apwpc-field-gap, 1rem) / 4) calc(var(--apwpc-field-gap, 1rem) * 0.625);
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-button-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875em;
  line-height: 1.3;
  cursor: pointer;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__replace:hover,
.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__remove:hover {
  border-color: var(--apwpc-accent, #50575e);
  background: var(--apwpc-selected-bg, transparent);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__file.is-replacing {
  opacity: 0.55;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__status {
  margin: calc(var(--apwpc-field-gap, 1rem) / 2) 0 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

@media (pointer: coarse) {
  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__drop,
  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__view,
  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__replace,
  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__remove {
    min-height: 44px;
  }

  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__view {
    display: inline-flex;
    align-items: center;
  }
}

@media (forced-colors: active) {
  .apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__drop {
    border: max(var(--apwpc-border-width, 1px), 1px) dashed CanvasText;
  }
}

/*
 * Upload icon and action copy (upload_icon, upload_main_text,
 * upload_secondary, upload_secondary_text), for every upload style.
 * With the settings unset the renderer draws none of these beyond what
 * each style always had (Minimal's icon and prompt, Dropzone's cue, the
 * apparel button), so the rules below only shape what the owner turns
 * on: an icon above (Compact: before) the native control or inside the
 * apparel button, a main prompt line and a smaller, muted secondary
 * line. Copy is plain text set by the renderer, never generated here.
 */
.apwpc-configurator .apwpc-upload__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--apwpc-accent, currentColor);
}

.apwpc-configurator .apwpc-upload > .apwpc-upload__icon {
  display: block;
  flex: none;
  margin: 0 0 0.25rem;
}

.apwpc-configurator .apwpc-upload__button .apwpc-upload__icon {
  flex: none;
  margin: 0 0.5rem 0 0;
}

.apwpc-configurator p.apwpc-upload__main {
  margin: 0.5rem 0;
}

.apwpc-configurator .apwpc-upload__secondary {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__secondary {
  margin: 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/*
 * The limits line under the target (upload_formats, upload_max_size):
 * the formats and the size are separate nodes in the muted line, so
 * either can be hidden on its own; the size never breaks inside "max 5 MB".
 */
.apwpc-configurator .apwpc-upload__size {
  white-space: nowrap;
}

/*
 * Collapsed artwork instructions (upload_instructions = collapsed): a
 * native details/summary, "Artwork Requirements", inside the upload box
 * and outside the click target. The summary keeps the browser's own
 * disclosure marker and keyboard behaviour and the configurator's focus
 * ring; the instructions inside keep their own line rules.
 */
.apwpc-configurator .apwpc-upload__requirements {
  margin: 0.5rem 0;
}

.apwpc-configurator .apwpc-upload__requirements-title {
  cursor: pointer;
  font-weight: var(--apwpc-label-weight, 600);
}

.apwpc-configurator .apwpc-upload__requirements .apwpc-upload__instructions {
  margin: 0.25rem 0 0;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__requirements {
  margin: calc(var(--apwpc-field-gap, 1rem) / 2) 0 0;
}

.apwpc-configurator .apwpc-control--upload[data-apwpc-upload-layout="minimal"] .apwpc-upload__requirements-title {
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

/*
 * A full slot with upload_after_success = hide_when_full: the renderer
 * sets hidden on the whole .apwpc-upload box. The Compact and Dropzone
 * rules above give that box display: flex at the same specificity, so
 * this later rule makes sure the hidden box stays hidden.
 */
.apwpc-configurator .apwpc-control--upload .apwpc-upload[hidden] {
  display: none;
}

.apwpc-configurator .apwpc-summary {
  border-top: calc(var(--apwpc-border-width, 1px) + 1px) solid var(--apwpc-border-color, #dcdcde);
  margin-top: var(--apwpc-gap, 1.5rem);
  padding-top: var(--apwpc-field-gap, 1rem);
}

.apwpc-configurator .apwpc-summary__total {
  font-size: 1.25em;
  font-weight: var(--apwpc-label-weight, 600);
  margin: 0 0 0.5rem;
}

.apwpc-configurator .apwpc-summary__per-piece {
  color: var(--apwpc-muted, #767676);
  margin: 0 0 0.5rem;
}

.apwpc-configurator .apwpc-summary__status {
  font-weight: var(--apwpc-label-weight, 600);
  margin: 0 0 0.5rem;
}

.apwpc-configurator .apwpc-summary__notices {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.apwpc-configurator .apwpc-summary__notice {
  border-left: calc(var(--apwpc-border-width, 1px) * 3) solid var(--apwpc-accent, #50575e);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.375rem;
}

.apwpc-configurator .apwpc-summary__dismiss {
  margin-left: 0.5rem;
}

.apwpc-configurator .apwpc-add-to-cart {
  font: inherit;
  min-height: var(--apwpc-button-height, 2.75rem);
  padding: 0.5rem 1.25rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-button-bg, #50575e);
  border-radius: var(--apwpc-button-radius, 4px);
  background: var(--apwpc-button-bg, #50575e);
  color: var(--apwpc-button-text, #ffffff);
  cursor: pointer;
  transition: opacity 120ms ease-in-out;
}

.apwpc-configurator .apwpc-add-to-cart[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * A Designer that collects fields itself leads until the job can be
 * bought: its button takes the cart button's look and Add to cart steps
 * back to an outline. Once the job can be bought the classes drop and
 * both buttons are as they always were.
 */
.apwpc-configurator .apwpc-design-now--primary {
  font: inherit;
  min-height: var(--apwpc-button-height, 2.75rem);
  padding: 0.5rem 1.25rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-button-bg, #50575e);
  border-radius: var(--apwpc-button-radius, 4px);
  background: var(--apwpc-button-bg, #50575e);
  color: var(--apwpc-button-text, #ffffff);
  cursor: pointer;
}

.apwpc-configurator .apwpc-design-now--primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.apwpc-configurator .apwpc-add-to-cart.apwpc-add-to-cart--secondary {
  background: transparent;
  color: var(--apwpc-button-bg, #50575e);
}

.apwpc-configurator .apwpc-summary__designer-hint {
  margin: 0 0 0.5rem;
  color: var(--apwpc-muted, #767676);
}

/*
 * Add to cart width and size (store-wide settings, delivered as root
 * classes). They change the button's box only; the disabled state and
 * the click behaviour are the same for every value.
 */
.apwpc-configurator.apwpc-ap-cart-button-width--full .apwpc-add-to-cart {
  box-sizing: border-box;
  width: 100%;
}

.apwpc-configurator.apwpc-ap-cart-button-size--medium .apwpc-add-to-cart {
  min-height: var(--apwpc-button-height, 2.75rem);
}

.apwpc-configurator.apwpc-ap-cart-button-size--large .apwpc-add-to-cart {
  min-height: calc(var(--apwpc-button-height, 2.75rem) * 1.25);
  padding: 0.75rem 1.75rem;
  font-size: 1.125em;
}

.apwpc-configurator .apwpc-configurator__loading[aria-busy="true"] {
  cursor: progress;
}

.apwpc-configurator .apwpc-configurator__notice {
  color: var(--apwpc-muted, #767676);
}

@media (max-width: 640px) {
  .apwpc-configurator .apwpc-group.apwpc-group--fields-2,
  .apwpc-configurator .apwpc-group.apwpc-group--fields-3 {
    grid-template-columns: 1fr;
  }

  .apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field {
    grid-template-columns: 1fr;
  }

  .apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__help,
  .apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__control,
  .apwpc-configurator .apwpc-group.apwpc-group--labels-left .apwpc-field .apwpc-field__error {
    grid-column: 1;
  }

  .apwpc-configurator .apwpc-group--cols-2 {
    grid-template-columns: 1fr;
  }

  .apwpc-configurator .apwpc-group--cols-2 .apwpc-field--w-full,
  .apwpc-configurator .apwpc-group--cols-2 .apwpc-field--w-half {
    grid-column: 1 / -1;
  }

  .apwpc-configurator .apwpc-field--w-half {
    width: 100%;
  }

  .apwpc-configurator .apwpc-field--label-left,
  .apwpc-configurator.apwpc-layout--label_left .apwpc-field {
    grid-template-columns: 1fr;
  }

  .apwpc-configurator .apwpc-field--label-left .apwpc-field__help,
  .apwpc-configurator .apwpc-field--label-left .apwpc-field__control,
  .apwpc-configurator .apwpc-field--label-left .apwpc-field__error,
  .apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__help,
  .apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__control,
  .apwpc-configurator.apwpc-layout--label_left .apwpc-field .apwpc-field__error {
    grid-column: 1;
  }

  .apwpc-configurator .apwpc-control--buttons [role="radiogroup"],
  .apwpc-configurator [role="radiogroup"] {
    display: flex;
    flex-wrap: wrap;
  }

  .apwpc-configurator .apwpc-scroll {
    overflow-x: auto;
  }

  .apwpc-configurator .apwpc-sizes__list {
    grid-template-columns: repeat(var(--apwpc-size-cols-mobile, 2), minmax(0, 1fr));
  }

  /* Option columns collapse to one column on small screens. */
  .apwpc-configurator[class*="apwpc-ap-choice-columns--"] .apwpc-control--buttons,
  .apwpc-configurator[class*="apwpc-ap-choice-columns--"] .apwpc-control--cards,
  .apwpc-configurator[class*="apwpc-ap-choice-columns--"] .apwpc-control--radio fieldset {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Two columns: the groups sit side by side from 768px up and stack
 * below it (the summary and any message span both columns).
 */
@media (min-width: 768px) {
  .apwpc-configurator.apwpc-layout--two_column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--apwpc-gap, 1.5rem);
    align-items: start;
  }

  .apwpc-configurator.apwpc-layout--two_column > .apwpc-configurator__summary,
  .apwpc-configurator.apwpc-layout--two_column > .apwpc-configurator__loading,
  .apwpc-configurator.apwpc-layout--two_column > .apwpc-configurator__error {
    grid-column: 1 / -1;
  }
}

/*
 * Summary layout (store-wide setting): with "inline" the price lines
 * and the buttons share one row from 641px up; messages, the retry
 * button and notices keep a full row each below them. The script puts
 * the buttons ahead of the messages in the markup for this layout, so
 * reading order and tab order match what is shown. Narrower screens
 * stack as usual.
 */
@media (min-width: 641px) {
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__total,
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__per-piece {
    margin: 0;
  }

  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-add-to-cart {
    margin-left: auto;
  }

  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__status,
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__designer-hint,
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__retry,
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-summary__notices,
  .apwpc-configurator.apwpc-ap-summary-layout--inline .apwpc-design-now__error {
    flex: 0 0 100%;
    margin: 0;
  }
}

/*
 * Upload columns (store-wide setting): two artwork slots per row on
 * wide screens, one below 768px. Everything else in the group keeps
 * the full row. One slot per row ("1") needs no rule, and a group
 * that its package already set to two columns keeps those columns.
 */
@media (min-width: 768px) {
  .apwpc-configurator.apwpc-ap-upload-columns--2 .apwpc-group:not(.apwpc-group--cols-2):not(.apwpc-group--fields-2):not(.apwpc-group--fields-3) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--apwpc-field-gap, 1rem);
    align-items: start;
  }

  .apwpc-configurator.apwpc-ap-upload-columns--2 .apwpc-group:not(.apwpc-group--cols-2):not(.apwpc-group--fields-2):not(.apwpc-group--fields-3) > * {
    grid-column: 1 / -1;
  }

  .apwpc-configurator.apwpc-ap-upload-columns--2 .apwpc-group:not(.apwpc-group--cols-2):not(.apwpc-group--fields-2):not(.apwpc-group--fields-3) > .apwpc-field--artwork {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apwpc-configurator .apwpc-option,
  .apwpc-configurator .apwpc-add-to-cart {
    transition: none;
  }
}

@media (forced-colors: active) {
  .apwpc-configurator .apwpc-group--boxed,
  .apwpc-configurator .apwpc-option,
  .apwpc-configurator .apwpc-upload,
  .apwpc-configurator table.apwpc-grid th,
  .apwpc-configurator table.apwpc-grid td,
  .apwpc-configurator table.apwpc-matrix th,
  .apwpc-configurator table.apwpc-matrix td {
    border-color: CanvasText;
  }

  .apwpc-configurator .apwpc-option.is-selected {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
    outline: 2px solid HighlightText;
  }

  .apwpc-configurator .apwpc-add-to-cart,
  .apwpc-configurator .apwpc-design-now--primary {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
}

/*
 * ==== Apparel colour swatches (single-colour mode) ====
 *
 * Plain circles like the reference storefront: no square frame, no
 * check mark and no visible name. Every rule below is scoped under
 * .apwpc-swatch-single, the root the swatch renderer gives a colour
 * field that is paired with a size matrix. Print-product swatches,
 * legacy multi-colour groups and the choice swatch fields never carry
 * it (nor the .apwpc-swatch button class), so they keep the rules
 * above unchanged.
 *
 * The button selector repeats .apwpc-option, which lifts it above the
 * generic option frame, the selected-indicator variants, the hover
 * cue and the theme's button rules; the block sits at the end of the
 * file so equal specificity is won by source order. Selected uses its
 * own ring variable, never --apwpc-selected-bg / --apwpc-selected-border
 * (a site may set those to transparent), and keyboard focus is a
 * different ring from the selected one.
 */
.apwpc-configurator .apwpc-swatch-single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--apwpc-swatch-gap, 8px);
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: var(--apwpc-swatch-size, 36px);
  height: var(--apwpc-swatch-size, 36px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  transition: none;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}

/* The chip fills the circle; its hairline is drawn over the photo too. */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: top;
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

/* A light HEX (relative luminance above 0.75) gets a boundary of at least 3:1 on white. */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch--light .apwpc-swatch__chip::before {
  box-shadow: inset 0 0 0 1px var(--apwpc-swatch-light-border, #8c8f94);
}

/* The swatch shape setting still applies (circle is the default). */
.apwpc-configurator.apwpc-ap-swatch-shape--rounded .apwpc-swatch-single .apwpc-swatch.apwpc-option,
.apwpc-configurator.apwpc-ap-swatch-shape--rounded .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip {
  border-radius: var(--apwpc-radius, 4px);
}

.apwpc-configurator.apwpc-ap-swatch-shape--square .apwpc-swatch-single .apwpc-swatch.apwpc-option,
.apwpc-configurator.apwpc-ap-swatch-shape--square .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip {
  border-radius: 0;
}

/* A colour without a HEX or a photo is a pill as tall as a swatch, never a blank shape or an ellipse. */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-swatch--text.apwpc-option {
  width: auto;
  min-width: var(--apwpc-swatch-size, 36px);
  height: var(--apwpc-swatch-size, 36px);
  border-radius: 999px;
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-swatch--text .apwpc-swatch__chip--text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: var(--apwpc-swatch-size, 36px);
  height: 100%;
  padding: 0 0.75em;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Selected: the reference ring around the circle. */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-selected {
  outline: 2px solid var(--apwpc-swatch-ring, #1d2327);
  outline-offset: 2px;
}

/*
 * Keyboard focus is a different ring: a white gap and a blue ring. A
 * focused swatch that is also selected keeps its selected ring one
 * step further out. The transparent outline is what forced-colors
 * mode paints when it drops the shadow.
 */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--apwpc-focus-ring-color, #2271b1);
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-selected:focus-visible {
  outline: 2px solid var(--apwpc-swatch-ring, #1d2327);
  outline-offset: 4px;
}

/* The line under the swatches shows a previewed name tentatively. */
.apwpc-configurator .apwpc-swatch-single > .apwpc-swatch-selected.is-preview {
  color: var(--apwpc-muted, #767676);
}

/*
 * Unavailable: the chip is muted and crossed by a diagonal line, and
 * it is never hidden by the stylesheet. Only the chip dims, so the
 * selected ring of a selected-but-unavailable colour stays crisp.
 */
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-disabled,
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option[aria-disabled="true"] {
  opacity: 1;
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-disabled .apwpc-swatch__chip,
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option[aria-disabled="true"] .apwpc-swatch__chip {
  opacity: 0.55;
}

.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-disabled .apwpc-swatch__chip::after,
.apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option[aria-disabled="true"] .apwpc-swatch__chip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 2px),
    var(--apwpc-muted, #767676) calc(50% - 2px),
    var(--apwpc-muted, #767676) calc(50% - 1px),
    var(--apwpc-section-bg, #ffffff) calc(50% - 1px),
    var(--apwpc-section-bg, #ffffff) calc(50% + 1px),
    var(--apwpc-muted, #767676) calc(50% + 1px),
    var(--apwpc-muted, #767676) calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}

/* Touch screens: at least a 40px target, whatever the size setting. */
@media (pointer: coarse) {
  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option {
    width: 40px;
    height: 40px;
    width: max(var(--apwpc-swatch-size, 36px), 40px);
    height: max(var(--apwpc-swatch-size, 36px), 40px);
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-swatch--text.apwpc-option {
    width: auto;
    min-width: 40px;
    min-width: max(var(--apwpc-swatch-size, 36px), 40px);
    height: 40px;
    height: max(var(--apwpc-swatch-size, 36px), 40px);
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-swatch--text .apwpc-swatch__chip--text {
    min-width: 40px;
    min-width: max(var(--apwpc-swatch-size, 36px), 40px);
  }
}

/*
 * Forced colours: the chip keeps its own colour, the hairline becomes a
 * real border (shadows are dropped), and the rings use Highlight. The
 * generic rule above paints a selected option with a Highlight
 * background, which would show as a square behind the circle.
 */
@media (forced-colors: active) {
  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option,
  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option .apwpc-swatch__chip {
    forced-color-adjust: none;
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch .apwpc-swatch__chip {
    border: 1px solid CanvasText;
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option {
    color: CanvasText;
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-selected {
    background: transparent;
    border-color: transparent;
    color: CanvasText;
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option:focus-visible {
    outline: 2px dashed Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .apwpc-configurator .apwpc-swatch-single .apwpc-swatch.apwpc-option.is-selected:focus-visible {
    outline: 4px double Highlight;
    outline-offset: 2px;
  }
}

/*
 * ==== Apparel size cards ====
 *
 * The per-size cards of the apparel quantity list (the root the
 * size_quantities renderer draws, .apwpc-sizes): a wrapping grid of
 * compact cards, each a column of label, price and ONE horizontal
 * stepper that never wraps. Every rule below is scoped under
 * .apwpc-sizes, so the print-product size grid (which shares the
 * per-size classes above but has no .apwpc-sizes root) keeps its own
 * rules. The card rules leave the table layout alone; it keeps the
 * row grid defined above.
 *
 * Controls are written one step more specific than the theme's button
 * and number-field rules and the site's own control rules, so a
 * theme's pill buttons, padding and widths cannot distort them.
 */
.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-sizes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      max(7.25rem, calc((100% - (var(--apwpc-size-cols-desktop, 6) - 1) * 8px) / var(--apwpc-size-cols-desktop, 6))),
      1fr
    )
  );
}

@media (min-width: 641px) and (max-width: 1024px) {
  .apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-sizes__list {
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        max(7.25rem, calc((100% - (var(--apwpc-size-cols-tablet, 4) - 1) * 8px) / var(--apwpc-size-cols-tablet, 4))),
        1fr
      )
    );
  }
}

@media (max-width: 640px) {
  .apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-sizes__list {
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        max(7.25rem, calc((100% - (var(--apwpc-size-cols-mobile, 2) - 1) * 8px) / var(--apwpc-size-cols-mobile, 2))),
        1fr
      )
    );
  }
}

/* A card is a column: label, price or note, stepper, hint. */
.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
  min-width: 0;
  margin: 0;
  padding: 0.5em 0.25em;
  text-align: center;
}

.apwpc-configurator .apwpc-sizes[data-apwpc-size-layout="cards"] .apwpc-size {
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: 8px;
  background: var(--apwpc-section-bg, #ffffff);
}

.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size__label {
  flex: 0 0 auto;
  margin: 0;
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
}

.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size__price,
.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size__unavailable,
.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size__hint {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

/* One horizontal control: minus, number, plus, never wrapped. */
.apwpc-configurator .apwpc-sizes:not([data-apwpc-size-layout="table"]) .apwpc-size__stepper {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.apwpc-configurator .apwpc-sizes .apwpc-size button.apwpc-size__step {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 36px;
  margin: 0;
  padding: 0 0.4em;
  border: 1px solid var(--apwpc-size-step-border, #c3c4c7);
  border-radius: 4px 0 0 4px;
  background: var(--apwpc-size-step-bg, #f6f7f7);
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-transform: none;
  text-shadow: none;
  cursor: pointer;
}

.apwpc-configurator .apwpc-sizes .apwpc-size button.apwpc-size__step[data-step="1"] {
  border-radius: 0 4px 4px 0;
}

.apwpc-configurator .apwpc-sizes .apwpc-size button.apwpc-size__step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* A centred whole number, about 3.5em wide, without native spinners. */
.apwpc-configurator .apwpc-sizes .apwpc-size input.apwpc-size__input {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 3.5em;
  min-width: 2em;
  max-width: none;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 0.25em;
  border: 1px solid var(--apwpc-size-step-border, #c3c4c7);
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 0;
  background: var(--apwpc-section-bg, #ffffff);
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Alone (the plain number field setting) it is a field of its own. */
.apwpc-configurator .apwpc-sizes .apwpc-size > input.apwpc-size__input {
  flex: 0 1 auto;
  border-width: 1px;
  border-radius: 4px;
}

.apwpc-configurator .apwpc-sizes .apwpc-size input.apwpc-size__input::-webkit-outer-spin-button,
.apwpc-configurator .apwpc-sizes .apwpc-size input.apwpc-size__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* A focused part sits above its neighbours so its ring is not clipped. */
.apwpc-configurator .apwpc-sizes .apwpc-size button.apwpc-size__step:focus-visible,
.apwpc-configurator .apwpc-sizes .apwpc-size input.apwpc-size__input:focus-visible {
  position: relative;
  z-index: 1;
}

/* Not available: the same card, dashed and greyed, struck label, no controls. */
.apwpc-configurator .apwpc-sizes .apwpc-size.is-unavailable {
  border-style: dashed;
  color: var(--apwpc-size-na-color, #787c82);
}

.apwpc-configurator .apwpc-sizes[data-apwpc-size-layout="cards"] .apwpc-size.is-unavailable {
  background: var(--apwpc-size-na-bg, #f6f7f7);
}

.apwpc-configurator .apwpc-sizes .apwpc-size.is-unavailable .apwpc-size__label {
  text-decoration: line-through;
}

.apwpc-configurator .apwpc-sizes .apwpc-size.is-unavailable .apwpc-size__unavailable {
  color: var(--apwpc-size-na-note, #50575e);
}

/* Touch screens: 44px targets. */
@media (pointer: coarse) {
  .apwpc-configurator .apwpc-sizes .apwpc-size button.apwpc-size__step {
    min-width: 44px;
    min-height: 44px;
  }

  .apwpc-configurator .apwpc-sizes .apwpc-size input.apwpc-size__input {
    min-height: 44px;
  }
}

/*
 * ==== Apparel decoration choice buttons ====
 *
 * Method and ink-count buttons of an apparel configurator. Every
 * selector starts with .apwpc-configurator.apwpc-configurator--apparel,
 * the root class configurator.js sets while the form pairs a colour
 * with a size matrix, so a print product keeps the generic option
 * frame above and matches none of these rules.
 *
 * Selected: a 2px inset ring from its own variable plus the check
 * mark. Site CSS that recolours --apwpc-selected-bg and
 * --apwpc-selected-border (or the store-wide selected style) leaves
 * both in place, so the choice is never only bold text.
 *
 * Hover on a button that is not selected is the dashed preview cue with
 * no ring and no fill: it can not be mistaken for the choice.
 */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons button.apwpc-option.is-selected {
  box-shadow: inset 0 0 0 2px var(--apwpc-choice-ring, #1d2327);
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons .apwpc-option.is-selected .apwpc-option__check {
  display: inline;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons button.apwpc-option:not(.is-selected):not(.is-disabled):hover {
  box-shadow: none;
  background-color: transparent;
  border-style: dashed;
  border-color: var(--apwpc-accent, #50575e);
}

/*
 * Compact: a control whose visible labels are all one or two
 * characters (ink counts "1".."8") is a row of fixed squares, at
 * least 2.5rem, that wraps only when the column is narrower than all
 * of them.
 */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons.apwpc-control--compact {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons.apwpc-control--compact [role="radio"] {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons.apwpc-control--compact [role="radio"] {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
}

/*
 * ==== Apparel location checkboxes ====
 *
 * The print location checkboxes of an apparel configurator (a
 * multi_choice field drawn by the checkboxes renderer). Every selector
 * starts with .apwpc-configurator.apwpc-configurator--apparel, so a
 * print product keeps the fieldset and option boxes it has today.
 *
 * The fieldset is reset (a theme draws a box, padding and a margin
 * around every fieldset) and the rows become compact chips in one
 * wrapping row. A checked chip carries the same inset ring as a
 * selected choice button next to the native checkbox, so the state is
 * not only the small tick.
 */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes fieldset {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes .apwpc-option {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-width: var(--apwpc-border-width, 1px);
  border-radius: 999px;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes .apwpc-option__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  cursor: pointer;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes .apwpc-option.is-selected {
  padding: 0.25rem 0.625rem;
  border-width: var(--apwpc-border-width, 1px);
  box-shadow: inset 0 0 0 2px var(--apwpc-choice-ring, #1d2327);
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes .apwpc-option.is-disabled .apwpc-option__label {
  cursor: not-allowed;
}

/*
 * ==== Apparel print size fields ====
 *
 * A dimensions field of an apparel configurator, in the order it is
 * read: one row "Width [ ] in x Height [ ] in", one guidance line with
 * the largest print area, then (outside the control) the definition
 * help and the validation text, each with the same small top margin.
 * The renderer builds this markup only inside an apparel configurator
 * and every selector starts with
 * .apwpc-configurator.apwpc-configurator--apparel, so a print product
 * keeps the field it has today.
 *
 * The inputs are about 5.5em wide and never stretched: the store-wide
 * input width setting and theme rules for text inputs do not reach
 * them. The full range is read out by assistive technology from a
 * visually hidden element; it is not drawn.
 */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  margin: 0;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__times {
  display: inline;
  margin: 0;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__label input.apwpc-input {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 5.5em;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-unit {
  margin-left: 0;
}

/* A store that stacks the two sides keeps doing so, one per line. */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions.apwpc-dimensions--stacked .apwpc-dimension__row {
  flex-direction: column;
  align-items: flex-start;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions.apwpc-dimensions--stacked .apwpc-dimension__times {
  display: none;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__max {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.875em;
  color: var(--apwpc-muted, #767676);
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__hint {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.875em;
}

/*
 * ==== Apparel upload cards ====
 *
 * An artwork slot of an apparel configurator is one clean card. The
 * renderer builds this markup only inside an apparel configurator and
 * every selector starts with
 * .apwpc-configurator.apwpc-configurator--apparel, so a print product
 * keeps the card it has today.
 *
 * The slot's label is printed once, by the layout. In the card the
 * native file input is visually hidden but still focusable and still
 * the real control; its label is the styled "Upload file" button. The
 * input comes first in the markup so its keyboard focus can ring the
 * button next to it. Under the button: the chosen file name and the
 * accepted types and size.
 */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload {
  position: relative;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.375rem 1rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-accent, #50575e);
  border-radius: var(--apwpc-button-radius, 4px);
  background: transparent;
  color: inherit;
  font-weight: var(--apwpc-label-weight, 600);
  line-height: 1.2;
  cursor: pointer;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__button:hover {
  background: var(--apwpc-selected-bg, #f0f0f0);
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__input:focus-visible + .apwpc-upload__button {
  outline: var(--apwpc-focus-width, 2px) solid var(--apwpc-focus-ring, #50575e);
  outline-offset: 2px;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__input:disabled + .apwpc-upload__button {
  opacity: 0.55;
  cursor: not-allowed;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__chosen {
  display: inline-block;
  min-width: 0;
  margin: 0 0 0 0.75rem;
  font-weight: var(--apwpc-label-weight, 600);
  overflow-wrap: anywhere;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload[data-apwpc-upload-layout="dropzone"] .apwpc-upload__chosen {
  margin: 0.5rem 0 0;
}

@media (forced-colors: active) {
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-control--upload .apwpc-upload__button {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/*
 * ==== Apparel theme collisions and narrow screens ====
 *
 * What a theme does to an apparel configurator by element rather than by
 * class: Astra and WooCommerce style every button, text input, number
 * input and list on the page (a pill with a blue fill and white text, a
 * padded rounded box, a margin of 3em and bullets). Inside an apparel
 * configurator the Configurator's own look wins over those rules, and
 * the column wraps from 320px up without overflowing its root.
 *
 * Every selector starts with
 * .apwpc-configurator.apwpc-configurator--apparel, so print products
 * keep what they have today. The button reset names the buttons that
 * carry a look of their own (options and swatches, size steppers) or
 * follow the theme on purpose (Add to cart and the designer launch) and
 * leaves them alone; it only reaches the plain buttons such as Dismiss,
 * Try again, Cancel, Remove and Replace.
 */
.apwpc-configurator.apwpc-configurator--apparel *,
.apwpc-configurator.apwpc-configurator--apparel *::before,
.apwpc-configurator.apwpc-configurator--apparel *::after {
  box-sizing: border-box;
}

.apwpc-configurator.apwpc-configurator--apparel .apwpc-group,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-field,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-field__control,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-sizes,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-size,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-upload,
.apwpc-configurator.apwpc-configurator--apparel .apwpc-summary {
  min-width: 0;
}

.apwpc-configurator.apwpc-configurator--apparel img,
.apwpc-configurator.apwpc-configurator--apparel svg,
.apwpc-configurator.apwpc-configurator--apparel video,
.apwpc-configurator.apwpc-configurator--apparel canvas,
.apwpc-configurator.apwpc-configurator--apparel input,
.apwpc-configurator.apwpc-configurator--apparel select,
.apwpc-configurator.apwpc-configurator--apparel textarea {
  max-width: 100%;
}

.apwpc-configurator.apwpc-configurator--apparel button:not(.apwpc-option):not(.apwpc-size__step):not(.apwpc-add-to-cart):not(.apwpc-design-now) {
  padding: 0.375rem 0.75rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}

.apwpc-configurator.apwpc-configurator--apparel button:hover:not(.apwpc-option):not(.apwpc-size__step):not(.apwpc-add-to-cart):not(.apwpc-design-now) {
  background: var(--apwpc-selected-bg, #f0f0f0);
  border-color: var(--apwpc-accent, #50575e);
  color: inherit;
}

.apwpc-configurator.apwpc-configurator--apparel button:not(.apwpc-option):not(.apwpc-size__step):not(.apwpc-add-to-cart):not(.apwpc-design-now)[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.apwpc-configurator.apwpc-configurator--apparel input[type="text"],
.apwpc-configurator.apwpc-configurator--apparel input[type="number"] {
  padding: 0.375rem 0.625rem;
  border: var(--apwpc-border-width, 1px) solid var(--apwpc-border-color, #dcdcde);
  border-radius: var(--apwpc-radius, 4px);
  color: inherit;
}

.apwpc-configurator.apwpc-configurator--apparel ul,
.apwpc-configurator.apwpc-configurator--apparel ol {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.apwpc-configurator.apwpc-configurator--apparel ul:not([class]),
.apwpc-configurator.apwpc-configurator--apparel ol:not([class]) {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* A caption, an input and a unit that do not fit one line wrap inside their label. */
.apwpc-configurator.apwpc-configurator--apparel .apwpc-control--dimensions .apwpc-dimension__label {
  flex-wrap: wrap;
  max-width: 100%;
}

/*
 * Narrow screens (544px and below): the configurator, its summary and
 * its actions take the full width of the column, and swatches, ink
 * counts, chips and size cards wrap instead of overflowing.
 */
@media (max-width: 544px) {
  .apwpc-configurator.apwpc-configurator--apparel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .apwpc-configurator.apwpc-configurator--apparel .apwpc-summary,
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-add-to-cart,
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-design-now {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .apwpc-configurator.apwpc-configurator--apparel .apwpc-swatch-single,
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-control--buttons,
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-control--checkboxes fieldset,
  .apwpc-configurator.apwpc-configurator--apparel .apwpc-dimension__row {
    flex-wrap: wrap;
  }

  .apwpc-configurator.apwpc-configurator--apparel .apwpc-field {
    width: 100%;
    max-width: 100%;
  }
}