/* --------------------------------------------- */
/* Purple Star Commerce FrontEnd --------------------------------------------------------------------------------- */
/* --------------------------------------------- */

/* Long meta values (40+ chars, wrapped in .psc-meta-long by the cart output)
   drop onto their own row beneath the label instead of compressing the label
   into a narrow column. Themes wrap each label/value pair differently (<dl
   class="variation">, a bare <div>, etc.) and lay the dt/dd out side by side
   via float, flex, or grid, so we force the pair's wrapper back to block and
   stack just the dt/dd belonging to the marked value. The selectors key off
   .psc-meta-long, which only the long values carry, so short rows are left
   inline and unrelated markup is untouched. !important guards against theme
   cart rules of equal specificity that may load after this sheet. */
:has(> dd .psc-meta-long) {
    display: block !important;
}
dt:has(+ dd .psc-meta-long),
dd:has(.psc-meta-long) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

.psc-flex-row {
    display: flex;
    flex-direction: row;
}

.psc-hidden {
    display: none !important;
}

.psc-option {
    margin-bottom: 10px;
    padding: 15px 12px 15px 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.psc-option legend,
.psc-option-group-box > legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

.psc-option legend span,
.psc-option-group-box > legend span {
    font-size: var(--psc-cp-name-size, 20px);
    font-weight: var(--psc-cp-site-nameweight, inherit);
}
/* The option's value in its legend — the Default Option Output's
   {{option_value}}, a span of its own (psc-legend-value): the Site tab's
   Option Value Size and Bold (1.1.24). */
.psc-option legend span.psc-legend-value {
    font-size: var(--psc-cp-site-valuesize, inherit);
    font-weight: var(--psc-cp-site-valueweight, inherit);
}

.psc-option abbr.required {
    color: red;
    font-size: 16px;
    position: relative;
    top: -3px;
}

div.psc-number-option abbr.required,
fieldset.psc-number-option abbr.required {
    left: -5px;
}

.psc-number-fields-row {
    gap: 8px;
    flex-wrap: wrap;
}

/* Each choice is a label-over-input column. */
.psc-number-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

.psc-number-field > label {
    font-size: var(--psc-cp-text-size, 16px);
    margin-bottom: 2px;
}

/* Hide Label: out of view and out of the layout, but still in the page. */
.psc-number-field > label.psc-number-label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.psc-number-field > input {
    width: 100%;
    box-sizing: border-box;
    /* Columns stretch to the tallest label in the row; pin the input to the
       bottom so inputs line up even when some labels wrap or carry a "*". */
    margin-top: auto;
}

/* Per-choice width (set in the admin). One full gap is subtracted so the columns
   plus their gaps never exceed a row, letting wider inputs (e.g. 100%) drop onto
   their own line instead of all squeezing onto one. */
.psc-number-field.psc-cw-25  { flex: 0 0 calc(25% - 8px); }
.psc-number-field.psc-cw-50  { flex: 0 0 calc(50% - 8px); }
.psc-number-field.psc-cw-75  { flex: 0 0 calc(75% - 8px); }
.psc-number-field.psc-cw-100 { flex: 0 0 100%; }

.psc-required {
    color: red;
    margin-left: 2px;
}

/* Price Display: "Hide Prices" suppresses each choice's price label. (Dropdown
   prices live in the <option> text and are omitted server-side instead.) */
.psc-option[data-psc-price-display="hide"] .psc-choice-price {
    display: none;
}

/* An input the option does not show, and a colour swatch's: kept in the
   document, sizeless and invisible, rather than display:none — a radio
   display:none is out of the tab order and out of its arrow-key group, so
   the option could not be operated from the keyboard (1.1.55). In flow at
   0×0 so no theme's radio size or margin shows, and focus scrolls to the
   choice, not to the page's corner as an absolutely placed input would. */
.psc-hideinputs input,
.psc-kind-color .psc-choices input {
    appearance: none;
    -webkit-appearance: none;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
/* Keyboard focus on a choice, drawn on the choice since its input is
   invisible; a click shows nothing, as before. */
.psc-product-options .psc-choice:has(input:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.psc-choice {
    display: flex;
    flex-direction: row-reverse;
    /* Keep the border WIDTH constant (2px) across default/hover/checked and
       only change its color. A 1px -> 2px width change on hover grows the box
       by a pixel per side, which visibly nudges the option; holding the width
       fixed removes that jitter without needing any compensating hack. */
    border: var(--psc-cp-border-width, 2px) solid var(--psc-cp-border-color, #AAA);
    border-radius: var(--psc-cp-radius, 5px);
    cursor: pointer;
    padding: 0;
    margin-bottom: 5px;
}

.psc-choice:has(input:checked) {
    border-color: var(--psc-cp-checked-color, #4c80ed);
}

.psc-choice:hover {
    border-color: var(--psc-cp-hover-color, #888);
}

.psc-choice label {
    display: flex;
    width: 100%;
    padding: var(--psc-cp-choice-padding, 10px);
    margin: 0;
    text-indent: 0;
    cursor: pointer;
}

.psc-choice input {
    width: var(--psc-cp-input-size, 20px);
    height: var(--psc-cp-input-size, 20px);
    margin: auto 8px auto 10px;
    cursor: pointer;
}

.psc-choice-text {
    font-weight: 600;
    font-size: var(--psc-cp-text-size, 18px);
    margin-right: auto;
    width: 100%;
}

.psc-choice-price {
    padding-left: 10px;
}

.psc-select {
    padding: var(--psc-cp-choice-padding, 10px);
    font-size: var(--psc-cp-text-size, 18px);
    font-weight: 600;
    border-radius: var(--psc-cp-radius, 4px);
    cursor: pointer;
    appearance: none;
}

.psc-choices:has(.psc-select) {
    position: relative;
}

.psc-choices:has(.psc-select)::before,
.psc-choices:has(.psc-select)::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: 1rem;
  pointer-events: none;
}

.psc-choices:has(.psc-select)::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

.psc-choices:has(.psc-select)::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}

div.psc-option{
    padding: 0;
    margin-top: 15px;
    margin-bottom: 30px;
}

div.psc-option label {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: var(--psc-cp-text-size, 18px);
}

div.psc-option input {
    width: 100%;
    max-width: 100px;
    padding: var(--psc-cp-choice-padding, 10px) !important;
}

.psc-option-single-description {
    margin-top: 10px;
}

.psc-choice:has(input:checked) .psc-choice-price {
    display: none;
}

.psc-option:has( .psc-option-price[data-psc-price="0"] ) .psc-choice-price[data-psc-price="0"] {
    display: none;
}

.psc-product-page .psc-variation-price bdi, .psc-product-page .psc-simple-price bdi {
    font-size: 1.5em;
    color: #77a464;
    font-weight: unset;
}

/* The product's own price, in its summary — not every price on the page:
   unscoped, the related products' and upsells' prices grew too (1.1.36). */
.psc-product-page .summary .woocommerce-Price-amount {
    font-size: 1.5rem;
}

.psc-product-options {
    display: flex;
    flex-direction: column;
}

.psc-simple-price {
    margin: 12px 0;
}

.psc-text-option .psc-option-text-container input {
    max-width: unset !important;
    padding-right: 60px !important;
}

.psc-option-text-container {
    position: relative;
}

.psc-text-char-count {
    position: absolute;
    right: 10px;
    top: 14px;
    font-size: 12px;
    color: #AAA;
}

.psc-option textarea {
    height: var(--psc-cp-area-height, 150px);
    min-width: 250px;
    min-height: 100px;
    max-width: 700px;
    max-height: 500px;
}

/* The values a choice shows (1.1.67): the Values list's eyes decide which,
   its order their order, each in a span of its class inside the label. The
   description is a line of its own wherever it stands in the order; until
   1.1.67 it was a paragraph under the row. */
.psc-choice label {
    flex-wrap: wrap;
    align-items: center;
}
.psc-choice .psc-choice-description {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    font-size: 12px;
    font-weight: 400;
}
.psc-choice .psc-choice-sku,
.psc-choice .psc-choice-urlpart,
.psc-choice .psc-choice-cartname,
.psc-choice .psc-choice-cv {
    padding-left: 10px;
    opacity: 0.85;
}
.psc-choice .psc-choice-image {
    display: block;
    max-width: 100%;
    height: auto;
}
/* A swatch's tile holds its values laid out as the option's Layout says
   (1.1.67): psc-layout-column stacked, psc-layout-row side by side. */
.psc-swatch-option .psc-choice label {
    gap: 4px 8px;
    justify-content: center;
}
.psc-swatch-option.psc-layout-column .psc-choice label {
    flex-direction: column;
    text-align: center;
}
.psc-swatch-option.psc-layout-row .psc-choice label {
    flex-direction: row;
    flex-wrap: nowrap;
}
.psc-swatch-option .psc-choice-text { margin-right: 0; }
.psc-swatch-option .psc-choice .psc-choice-price,
.psc-swatch-option .psc-choice .psc-choice-sku,
.psc-swatch-option .psc-choice .psc-choice-urlpart,
.psc-swatch-option .psc-choice .psc-choice-cartname,
.psc-swatch-option .psc-choice .psc-choice-cv { padding-left: 0; }
.psc-swatch-option .psc-choice .psc-choice-description { padding: 0; }
.psc-kind-image .psc-choice .psc-choice-image,
.psc-kind-text-swatch .psc-choice .psc-choice-image {
    width: var(--psc-cp-swatches-imagesize, 80px);
    height: var(--psc-cp-swatches-imagesize, 80px);
    object-fit: cover;
    border-radius: calc(var(--psc-cp-radius, 5px) / 2);
}
.psc-kind-color .psc-choice .psc-choice-image {
    width: var(--psc-cp-swatch-size, 25px);
    height: var(--psc-cp-swatch-size, 25px);
    object-fit: cover;
}

.psc-checkbox-option .psc-choice, .psc-radio-option .psc-choice {
    flex-direction: column;
}

.psc-checkbox-option .psc-choice .psc-flex-row, .psc-radio-option .psc-choice .psc-flex-row {
    flex-direction: row-reverse;
}

.psc-small-format .psc-option {
    padding: 0;
    border: unset;
    margin-bottom: 15px;
}

.psc-small-format .psc-option legend span {
    font-size: 16px;
    font-weight: 700;
    padding: 0;
}

.psc-small-format .psc-option legend {
    padding: 0;
    margin-bottom: 6px;
}

/* Every span in a choice — the text, the price, a colour's name — at the
   type's Choice Text Size. A fixed 16px here outranked .psc-choice-text's
   variable (a later rule of higher specificity) and the control did
   nothing until 1.1.20. */
.psc-choice span {
    font-size: var(--psc-cp-text-size, 16px);
}

/* Text and image swatches (1.1.67: .psc-kind-text-swatch is both Text Swatches
   types, .psc-kind-image both Image Swatches types, .psc-kind-color both
   Color Swatches types, .psc-swatch-option any of the six; the fieldset
   carries them beside its type, ps_commerce_type_classes). */
.psc-kind-text-swatch .psc-choices,
.psc-kind-image .psc-choices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.psc-small-format .psc-kind-text-swatch .psc-choice label,
.psc-small-format .psc-kind-image .psc-choice label {
    padding: 2px 10px;
}

.psc-kind-color .psc-choices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
}

.psc-kind-color .psc-choice {
    flex-grow: 1;
}

.psc-kind-color .psc-choice span {
    margin-right: 15px;
}

.psc-color-block {
    width: var(--psc-cp-swatch-size, 25px);
    height: var(--psc-cp-swatch-size, 25px);
    border-radius: 3px;
    margin-left: auto;
    box-sizing: border-box;
}

.psc-noshow-text label {
    padding: 3px;
    margin: 0;
}

.psc-noshow-text .psc-color-block {
    margin: auto;
    padding: 0;
    width: var(--psc-cp-swatch-size, 28px);
    height: var(--psc-cp-swatch-size, 28px);
}

.psc-noshow-text {
    flex-grow: unset !important;
}

.psc-small-format .psc-kind-color .psc-choice {
    flex-grow: unset;
}

.psc-small-format .psc-kind-color .psc-choices {
    justify-content: unset;
}

.psc-small-format .psc-kind-color .psc-choice label {
    padding: 2px 10px;
}

.psc-small-format .psc-kind-color .psc-choice label {
    padding: 3px 6px !important;
    display: flex;
}

.psc-small-format .psc-kind-color .psc-choice span {
    margin-right: 10px;
}

.psc-small-format .psc-kind-color .psc-choice .psc-color-block {
    width: var(--psc-cp-swatch-size, 17px);
    height: var(--psc-cp-swatch-size, 17px);
    border-radius: 2px;
    margin: auto;
}

.psc-small-format .psc-kind-color .psc-noshow-text label {
    padding: 1px 2px !important;
    display: flex;
}

.psc-small-format .psc-kind-color .psc-noshow-text:has(input:checked) label {
    padding: 2px 2px !important;
}

.psc-small-format .psc-kind-color .psc-noshow-text .psc-color-block {
    width: 25px;
    height: 25px;
    border-radius: 3px;
}

.psc-kind-color .psc-choices:has(.psc-noshow-text) {
    justify-content: unset;
}

/* Padded circle swatch: same as padded square but with circular color block */
.psc-kind-color .psc-swatch-padded-circle .psc-color-block {
    border-radius: 50%;
}

/* Full (non-padded) swatch types: the choice itself IS the color. Not
   clipped (1.1.75): the tile paints itself, its blur takes its radius
   (border-radius: inherit), and overflow: hidden cut away the Show Choice
   Name Tooltip (1.1.68), which sits above the tile. */
.psc-kind-color .psc-swatch-square,
.psc-kind-color .psc-swatch-circle {
    border: none;
    padding: 0;
}
.psc-kind-color .psc-swatch-square label,
.psc-kind-color .psc-swatch-circle label {
    justify-content: center;
    min-height: 34px;
    padding: 4px 8px;
}
.psc-kind-color .psc-swatch-circle {
    border-radius: 50%;
}
.psc-kind-color .psc-swatch-square:has(input:checked),
.psc-kind-color .psc-swatch-circle:has(input:checked) {
    outline: 2px solid #4c80ed;
    outline-offset: 2px;
    border: none;
}
/* A ticked tile with keyboard focus (1.1.75): the chosen outline above
   ties with the focus ring's selector and, later, won, so Tab onto a
   chosen colour showed nothing. A ring outside the outline keeps both. */
.psc-product-options .psc-kind-color .psc-swatch-square:has(input:checked:focus-visible),
.psc-product-options .psc-kind-color .psc-swatch-circle:has(input:checked:focus-visible) {
    box-shadow: 0 0 0 6px currentColor;
}
.psc-kind-color .psc-noshow-text.psc-swatch-square,
.psc-kind-color .psc-noshow-text.psc-swatch-circle {
    width: var(--psc-cp-swatch-size, 34px);
    height: var(--psc-cp-swatch-size, 34px);
}
.psc-kind-color .psc-noshow-text.psc-swatch-square label,
.psc-kind-color .psc-noshow-text.psc-swatch-circle label {
    padding: 0;
    width: 100%;
    height: 100%;
}
.psc-small-format .psc-kind-color .psc-noshow-text.psc-swatch-square,
.psc-small-format .psc-kind-color .psc-noshow-text.psc-swatch-circle {
    width: var(--psc-cp-swatch-size, 28px);
    height: var(--psc-cp-swatch-size, 28px);
}

/* Icon-based swatch types (drop, splash, paintcan, paintbrush) */
.psc-color-icon {
    width: var(--psc-cp-swatch-size, 25px);
    height: var(--psc-cp-swatch-size, 25px);
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.psc-color-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.psc-noshow-text .psc-color-icon {
    width: var(--psc-cp-swatch-size, 28px);
    height: var(--psc-cp-swatch-size, 28px);
    margin: auto;
}
.psc-small-format .psc-kind-color .psc-color-icon {
    width: var(--psc-cp-swatch-size, 17px);
    height: var(--psc-cp-swatch-size, 17px);
}
.psc-small-format .psc-kind-color .psc-noshow-text .psc-color-icon {
    width: var(--psc-cp-swatch-size, 25px);
    height: var(--psc-cp-swatch-size, 25px);
}




/* Connected-product upsell choice: disabled when the connected product is
   out of stock. */
.psc-choice-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.psc-choice-disabled input,
.psc-choice-disabled select {
    cursor: not-allowed;
}
/* A choice no variation has with the other choices made, or one out of
   stock: greyed the way WooCommerce greys its own select's options, and
   not pickable until the other choices change (1.1.3). */
.psc-choice-unavailable {
    opacity: 0.45;
}
.psc-choice-unavailable input,
.psc-choice-unavailable label {
    cursor: not-allowed;
}

/* --------------------------------------------- */
/* Option Groups + Text Blocks (frontend) ------- */
/* --------------------------------------------- */

.psc-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.psc-product-options fieldset {
    display: block;
    min-inline-size: min-content;
    margin-inline: 2px;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;
}
.psc-product-options .psc-option {
    display: flex;
    flex-direction: column;
    padding: 15px 12px;
}
.psc-option-group-box {
    display: block;
    min-inline-size: min-content;
    margin: 10px 2px;
    border-width: 2px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    border-radius: 4px;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;
}
.psc-product-options .psc-option.psc-no-box {
    border: none;
    padding: 0;
}
.psc-product-options .psc-option.psc-no-box legend {
    padding: 0;
    margin-bottom: 5px;
}

.psc-text-block {
    margin: 6px 0;
}
/* Text-block styling controls (set in the admin Visibility dialog). */
.psc-text-block.psc-text-row {
    display: block;
}
.psc-text-block.psc-text-inline {
    display: inline;
    margin: 0;
}
.psc-text-block.psc-text-bold {
    font-weight: 700;
}
.psc-text-block.psc-text-italic {
    font-style: italic;
}
/* Font sizes — desktop defaults (Medium 18px, Small 13px). */
.psc-text-block.psc-text-size-large  { font-size: 24px; }
.psc-text-block.psc-text-size-medium { font-size: 18px; }
.psc-text-block.psc-text-size-small  { font-size: 13px; }
@media only screen and (max-width: 1024px) {
    .psc-text-block.psc-text-size-large  { font-size: 22px; }
    .psc-text-block.psc-text-size-medium { font-size: 17px; }
    .psc-text-block.psc-text-size-small  { font-size: 13px; }
}
@media only screen and (max-width: 600px) {
    .psc-text-block.psc-text-size-large  { font-size: 20px; }
    .psc-text-block.psc-text-size-medium { font-size: 16px; }
    .psc-text-block.psc-text-size-small  { font-size: 12px; }
}

/* Order Summary panel ------------------------------------------------------ */
.psc-order-summary {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: #fff;
}
.psc-order-summary .psc-summary-heading {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
}
.psc-order-summary .psc-summary-row {
    margin: 4px 0;
    line-height: 1.5;
}
.psc-order-summary .psc-summary-name {
    font-weight: 700;
}
.psc-order-summary .psc-summary-value {
    font-weight: 400;
}
.psc-order-summary .psc-summary-text {
    margin: 6px 0;
}
.psc-order-summary .psc-summary-total {
    margin-top: 12px;
    font-size: 16px;
}
.psc-order-summary .psc-summary-total-label {
    font-weight: 700;
}
.psc-order-summary .psc-summary-total-value {
    font-weight: 700;
    color: #2e8b57;
}

/* ---------------------------------------------------------------------------
   Custom Button blocks (regular buttons + toggle switches)
   --------------------------------------------------------------------------- */
/* The wrapper handles horizontal alignment (and is where Width % is measured
   from). Regular buttons keep the theme's native button styling — only width
   and alignment are applied, never color/border. */
.psc-custom-button-wrap {
    display: flex;
    margin: 10px 0;
}
.psc-custom-button-wrap.psc-halign-left   { justify-content: flex-start; }
.psc-custom-button-wrap.psc-halign-center { justify-content: center; }
.psc-custom-button-wrap.psc-halign-right  { justify-content: flex-end; }

/* Toggle switch layout: labels flank (or follow) the switch. */
.psc-custom-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.psc-toggle-label {
    font-size: 14px;
    color: #50575e;
}
.psc-custom-toggle.psc-toggle-on .psc-toggle-label-active,
.psc-custom-toggle.psc-toggle-on .psc-toggle-label-single {
    color: #1f6b6b;
    font-weight: 600;
}
/* The switch itself: a pill track with a sliding knob. Fully self-styled (the
   regular button keeps native theme styling, so there is no base to inherit). */
.psc-custom-button.psc-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    padding: 0;
    border-radius: 12px;
    background: #ccc;
    border: 1px solid #b5b5b5;
    flex: 0 0 auto;
    box-sizing: border-box;
    cursor: pointer;
}
.psc-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
}
.psc-custom-toggle.psc-toggle-on .psc-toggle-switch {
    background: #2c8c8c;
    border-color: #1f6b6b;
}
.psc-custom-toggle.psc-toggle-on .psc-toggle-knob {
    left: 22px;
}

/* Always-visible toggle label: position relative to the switch via DOM order
   [switch, label] + flex-direction. */
.psc-custom-toggle.psc-toggle-align-right  { flex-direction: row; }
.psc-custom-toggle.psc-toggle-align-left   { flex-direction: row-reverse; }
.psc-custom-toggle.psc-toggle-align-bottom { flex-direction: column; align-items: center; }
.psc-custom-toggle.psc-toggle-align-top    { flex-direction: column-reverse; align-items: center; }

/* Sides toggle stacked vertically: inactive label above, active label below the
   switch (DOM order is inactive, switch, active). */
.psc-custom-toggle.psc-toggle-sides-vertical {
    flex-direction: column;
    align-items: center;
}

/* Options pick the variation (includes/psc-variations.php): a variation
   form row whose select an option drives is hidden, and the whole table
   once every select is. The price, stock and button beneath stay. */
.psc-variation-row-driven { display: none; }
.psc-variations-driven table.variations,
.psc-variations-driven .reset_variations { display: none !important; }

/* Styling from the site settings (1.1.10, includes/psc-site-settings.php):
   each type's tab sets --psc-cp-<tab>-<prop> on :root, printed inline
   after this sheet, and each option type's fieldset maps its tab's onto
   the local properties the rules above read, with this sheet's old
   values as the fallbacks. A drawn variation picker is one of these
   fieldsets too. */
.psc-product-options .psc-option {
    /* The one Option Name Size, the Site tab's (1.1.22; each type tab had
       its own until then). */
    --psc-cp-name-size: var(--psc-cp-site-namesize, 20px);
}
.psc-radio-option {
    --psc-cp-text-size: var(--psc-cp-radio-textsize, 18px);
    /* Each side its own while the tab's sides are unlinked (1.1.57); the
       one value, printed alone while they are linked, otherwise. */
    --psc-cp-choice-padding: var(--psc-cp-radio-paddingtop, var(--psc-cp-radio-padding, 10px)) var(--psc-cp-radio-paddingright, var(--psc-cp-radio-padding, 10px)) var(--psc-cp-radio-paddingbottom, var(--psc-cp-radio-padding, 10px)) var(--psc-cp-radio-paddingleft, var(--psc-cp-radio-padding, 10px));
    --psc-cp-border-width: var(--psc-cp-radio-borderwidth, 2px);
    --psc-cp-border-color: var(--psc-cp-radio-bordercolor, #AAA);
    --psc-cp-hover-color: var(--psc-cp-radio-hovercolor, #888);
    --psc-cp-checked-color: var(--psc-cp-radio-checkedcolor, #4c80ed);
    --psc-cp-radius: var(--psc-cp-radio-radius, 5px);
    --psc-cp-bg-even: var(--psc-cp-radio-bgeven, transparent);
    --psc-cp-bg-odd: var(--psc-cp-radio-bgodd, transparent);
    --psc-cp-bg-hover: var(--psc-cp-radio-bghover, transparent);
    --psc-cp-bg-selected: var(--psc-cp-radio-bgselected, transparent);
    --psc-cp-input-size: var(--psc-cp-radio-inputsize, 20px);
    --psc-cp-input-border: var(--psc-cp-radio-inputborder, 2px);
    --psc-cp-input-bordercolor: var(--psc-cp-radio-inputbordercolor, #888888);
    --psc-cp-input-fill: var(--psc-cp-radio-inputfill, #ffffff);
    --psc-cp-input-checkedcolor: var(--psc-cp-radio-inputcheckedcolor, #4c80ed);
    --psc-cp-input-checkedfill: var(--psc-cp-radio-inputcheckedfill, #4c80ed);
    --psc-cp-input-markcolor: var(--psc-cp-radio-inputmarkcolor, #ffffff);
    --psc-cp-input-marksize: var(--psc-cp-radio-inputmarksize, 50%);
}
.psc-checkbox-option {
    --psc-cp-text-size: var(--psc-cp-checkbox-textsize, 18px);
    /* Each side its own while the tab's sides are unlinked (1.1.57); the
       one value, printed alone while they are linked, otherwise. */
    --psc-cp-choice-padding: var(--psc-cp-checkbox-paddingtop, var(--psc-cp-checkbox-padding, 10px)) var(--psc-cp-checkbox-paddingright, var(--psc-cp-checkbox-padding, 10px)) var(--psc-cp-checkbox-paddingbottom, var(--psc-cp-checkbox-padding, 10px)) var(--psc-cp-checkbox-paddingleft, var(--psc-cp-checkbox-padding, 10px));
    --psc-cp-border-width: var(--psc-cp-checkbox-borderwidth, 2px);
    --psc-cp-border-color: var(--psc-cp-checkbox-bordercolor, #AAA);
    --psc-cp-hover-color: var(--psc-cp-checkbox-hovercolor, #888);
    --psc-cp-checked-color: var(--psc-cp-checkbox-checkedcolor, #4c80ed);
    --psc-cp-radius: var(--psc-cp-checkbox-radius, 5px);
    --psc-cp-bg-even: var(--psc-cp-checkbox-bgeven, transparent);
    --psc-cp-bg-odd: var(--psc-cp-checkbox-bgodd, transparent);
    --psc-cp-bg-hover: var(--psc-cp-checkbox-bghover, transparent);
    --psc-cp-bg-selected: var(--psc-cp-checkbox-bgselected, transparent);
    --psc-cp-input-size: var(--psc-cp-checkbox-inputsize, 20px);
    --psc-cp-input-border: var(--psc-cp-checkbox-inputborder, 2px);
    --psc-cp-input-bordercolor: var(--psc-cp-checkbox-inputbordercolor, #888888);
    --psc-cp-input-fill: var(--psc-cp-checkbox-inputfill, #ffffff);
    --psc-cp-input-checkedcolor: var(--psc-cp-checkbox-inputcheckedcolor, #4c80ed);
    --psc-cp-input-checkedfill: var(--psc-cp-checkbox-inputcheckedfill, #4c80ed);
    --psc-cp-input-markcolor: var(--psc-cp-checkbox-inputmarkcolor, #ffffff);
    --psc-cp-input-marksize: var(--psc-cp-checkbox-inputmarksize, 50%);
}
.psc-swatch-option {
    --psc-cp-text-size: var(--psc-cp-swatches-textsize, 18px);
    /* Each side its own while the tab's sides are unlinked (1.1.57); the
       one value, printed alone while they are linked, otherwise. */
    --psc-cp-choice-padding: var(--psc-cp-swatches-paddingtop, var(--psc-cp-swatches-padding, 10px)) var(--psc-cp-swatches-paddingright, var(--psc-cp-swatches-padding, 10px)) var(--psc-cp-swatches-paddingbottom, var(--psc-cp-swatches-padding, 10px)) var(--psc-cp-swatches-paddingleft, var(--psc-cp-swatches-padding, 10px));
    --psc-cp-border-width: var(--psc-cp-swatches-borderwidth, 2px);
    --psc-cp-border-color: var(--psc-cp-swatches-bordercolor, #AAA);
    --psc-cp-hover-color: var(--psc-cp-swatches-hovercolor, #888);
    --psc-cp-checked-color: var(--psc-cp-swatches-checkedcolor, #4c80ed);
    --psc-cp-radius: var(--psc-cp-swatches-radius, 5px);
    --psc-cp-input-size: var(--psc-cp-swatches-inputsize, 20px);
    --psc-cp-input-border: var(--psc-cp-swatches-inputborder, 2px);
    --psc-cp-input-bordercolor: var(--psc-cp-swatches-inputbordercolor, #888888);
    --psc-cp-input-fill: var(--psc-cp-swatches-inputfill, #ffffff);
    --psc-cp-input-checkedcolor: var(--psc-cp-swatches-inputcheckedcolor, #4c80ed);
    --psc-cp-input-checkedfill: var(--psc-cp-swatches-inputcheckedfill, #4c80ed);
    --psc-cp-input-markcolor: var(--psc-cp-swatches-inputmarkcolor, #ffffff);
    --psc-cp-input-marksize: var(--psc-cp-swatches-inputmarksize, 50%);
}
.psc-dropdown-option {
    --psc-cp-text-size: var(--psc-cp-dropdown-textsize, 18px);
    --psc-cp-choice-padding: var(--psc-cp-dropdown-padding, 10px);
    --psc-cp-radius: var(--psc-cp-dropdown-radius, 4px);
}
.psc-number-option {
    --psc-cp-text-size: var(--psc-cp-number-labelsize, 16px);
}
.psc-text-option,
.psc-textarea-option {
    --psc-cp-text-size: var(--psc-cp-text-labelsize, 18px);
    --psc-cp-area-height: var(--psc-cp-text-areaheight, 150px);
}

/* A radio's and a checkbox's tile backgrounds (the Radio and Checkbox
   tabs' Background Colours, 1.1.22): by row, then on hover, then chosen. */
.psc-radio-option .psc-choices > .psc-choice:nth-child(odd),
.psc-checkbox-option .psc-choices > .psc-choice:nth-child(odd) {
    background-color: var(--psc-cp-bg-odd, transparent);
}
.psc-radio-option .psc-choices > .psc-choice:nth-child(even),
.psc-checkbox-option .psc-choices > .psc-choice:nth-child(even) {
    background-color: var(--psc-cp-bg-even, transparent);
}
.psc-radio-option .psc-choices > .psc-choice:hover,
.psc-checkbox-option .psc-choices > .psc-choice:hover {
    background-color: var(--psc-cp-bg-hover, transparent);
}
.psc-radio-option .psc-choices > .psc-choice:has(input:checked),
.psc-checkbox-option .psc-choices > .psc-choice:has(input:checked) {
    background-color: var(--psc-cp-bg-selected, transparent);
}

/* Drawn inputs (1.1.22). A choice type's tab may give its inputs a shape
   other than the browser's: the fieldset then carries data-psc-input (the
   shape) and data-psc-mark (the mark inside a chosen one) from
   ps_commerce_input_attrs, and the input is drawn here — a bordered box in
   the tab's colours at the tab's size, its ::after the mark (a dot, a
   square, or a check or cross cut by a mask), a triangle a clipped box in
   the border colour with its fill as ::before. Default leaves the
   browser's own input at the tab's size. Nothing here sets display, so
   Show Choice Inputs off (.psc-hideinputs) still hides them; a Color
   option's inputs stay hidden. */
.psc-option[data-psc-input] .psc-choice input {
    /* No type attribute here: the per-shape rules below name the input
       alone, and a base rule of greater specificity kept every shape
       square (1.1.24). Nothing but a radio or checkbox is in a choice. */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    position: relative;
    padding: 0;
    border: var(--psc-cp-input-border, 2px) solid var(--psc-cp-input-bordercolor, #888888);
    border-radius: 0;
    background: var(--psc-cp-input-fill, #ffffff);
    outline-offset: 2px;
}
.psc-option[data-psc-input] .psc-choice input:checked {
    border-color: var(--psc-cp-input-checkedcolor, #4c80ed);
    background: var(--psc-cp-input-checkedfill, #4c80ed);
}
.psc-option[data-psc-input="circle"] .psc-choice input {
    border-radius: 50%;
}
.psc-option[data-psc-input="rounded"] .psc-choice input {
    border-radius: 25%;
}
.psc-option[data-psc-input="diamond"] .psc-choice input {
    transform: rotate(45deg) scale(0.8);
}
.psc-option[data-psc-input="triangle"] .psc-choice input {
    border: 0;
    background: var(--psc-cp-input-bordercolor, #888888);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.psc-option[data-psc-input="triangle"] .psc-choice input:checked {
    background: var(--psc-cp-input-checkedcolor, #4c80ed);
}
.psc-option[data-psc-input="triangle"] .psc-choice input::before {
    content: "";
    position: absolute;
    inset: calc(var(--psc-cp-input-border, 2px) * 2.2) calc(var(--psc-cp-input-border, 2px) * 1.3) var(--psc-cp-input-border, 2px);
    background: var(--psc-cp-input-fill, #ffffff);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.psc-option[data-psc-input="triangle"] .psc-choice input:checked::before {
    background: var(--psc-cp-input-checkedfill, #4c80ed);
}
.psc-option[data-psc-input] .psc-choice input::after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--psc-cp-input-marksize, 50%);
    height: var(--psc-cp-input-marksize, 50%);
    background: var(--psc-cp-input-markcolor, #ffffff);
}
.psc-option[data-psc-input] .psc-choice input:checked::after {
    display: block;
}
.psc-option[data-psc-mark="dot"] .psc-choice input::after {
    border-radius: 50%;
}
.psc-option[data-psc-mark="check"] .psc-choice input::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.psc-option[data-psc-mark="cross"] .psc-choice input::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.psc-option[data-psc-input="diamond"] .psc-choice input::after {
    transform: rotate(-45deg);
}
.psc-option[data-psc-input="triangle"] .psc-choice input::after {
    inset: 30% 0 0 0;
}

/* Swatch tooltips and the marks (the Swatches tab, 1.1.10; the pickers'
   own until then; the marks as SVG, with the checkmark, 1.1.18). A swatch
   carrying data-psc-tooltip shows the value's name over itself while the
   pointer is on it or its input has focus. The X and the checkmark are
   inline SVGs a swatch carries (ps_commerce_swatch_mark_svg): stroked
   polylines, hidden until called for; the wider stroke beneath each line
   (.psc-mark-border) is the Solid border style, a drop shadow on the glyph
   the Dropshadow one, and both widths are screen pixels however the glyph
   is scaled. The options' section and the pickers' carry the site's and
   the tab's choices as classes (ps_commerce_swatch_section_class): a
   choice the availability mirror marked .psc-choice-unavailable is taken
   out by psc-hide-unavailable, whatever its type (the Site tab's Disabled
   Variations, 1.1.28; the Swatches tab decided it for swatches alone until
   then), or left in by psc-show-unavailable — a radio or a checkbox greyed,
   a swatch at full strength with its tile blurred (a backdrop filter on a
   pseudo-element, so a full colour tile blurs as a padded one does) and,
   under psc-cross-unavailable, the X over it, sharp; psc-check-selected
   shows the checkmark over a chosen colour swatch, centred on its colour,
   where ps_commerce_color_swatch_parts put it (a text swatch carried one
   in its corner until 1.1.28); psc-cross-solid|shadow and psc-check-solid|
   shadow are the border styles. */
.psc-product-options .psc-choice {
    position: relative;
}
.psc-product-options .psc-choice[data-psc-tooltip]::after {
    content: attr(data-psc-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 3px;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 5;
}
.psc-product-options .psc-choice[data-psc-tooltip]:hover::after,
.psc-product-options .psc-choice[data-psc-tooltip]:focus-within::after {
    opacity: 1;
}
/* The marks themselves: hidden, unfilled, round-ended, their strokes in
   screen pixels. */
.psc-swatch-mark {
    display: none;
    pointer-events: none;
    overflow: visible;
}
.psc-swatch-mark path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.psc-swatch-mark .psc-mark-border {
    display: none;
}
.psc-swatch-cross .psc-mark-line {
    stroke: var(--psc-cp-swatches-crosscolor, #e53935);
    stroke-width: 2px;
}
.psc-swatch-cross .psc-mark-border {
    stroke: var(--psc-cp-swatches-crossbordercolor, #ffffff);
    stroke-width: calc(2px + 2 * var(--psc-cp-swatches-crossbordersize, 1px));
}
.psc-swatch-check .psc-mark-line {
    stroke: var(--psc-cp-swatches-checkcolor, #ffffff);
    stroke-width: 2px;
}
.psc-swatch-check .psc-mark-border {
    stroke: var(--psc-cp-swatches-checkbordercolor, #000000);
    stroke-width: calc(2px + 2 * var(--psc-cp-swatches-checkbordersize, 1px));
}
.psc-product-options.psc-cross-solid .psc-swatch-cross .psc-mark-border,
.psc-product-options.psc-check-solid .psc-swatch-check .psc-mark-border {
    display: block;
}
/* A filled figure (a dot, a square, a diamond, a star — the Checkmark
   Shape, 1.1.22): the line path filled in the mark's colour, the border
   path beneath filled and stroked in the border colour at twice the
   border size, so it shows around the figure by that size. */
.psc-swatch-mark.psc-mark-filled .psc-mark-line {
    stroke: none;
}
.psc-swatch-check.psc-mark-filled .psc-mark-line {
    fill: var(--psc-cp-swatches-checkcolor, #ffffff);
}
.psc-swatch-check.psc-mark-filled .psc-mark-border {
    fill: var(--psc-cp-swatches-checkbordercolor, #000000);
    stroke-width: calc(2 * var(--psc-cp-swatches-checkbordersize, 1px));
}
.psc-product-options.psc-cross-shadow .psc-swatch-cross {
    filter: drop-shadow(var(--psc-cp-swatches-crossshadowx, 0px) var(--psc-cp-swatches-crossshadowy, 1px) var(--psc-cp-swatches-crossshadowblur, 2px) var(--psc-cp-swatches-crossshadowcolor, #000000));
}
.psc-product-options.psc-check-shadow .psc-swatch-check {
    filter: drop-shadow(var(--psc-cp-swatches-checkshadowx, 0px) var(--psc-cp-swatches-checkshadowy, 1px) var(--psc-cp-swatches-checkshadowblur, 2px) var(--psc-cp-swatches-checkshadowcolor, #000000));
}

/* A choice no variation is sold with: gone, whatever its type … */
.psc-product-options.psc-hide-unavailable .psc-choice-unavailable,
.psc-product-options.psc-hide-unavailable option.psc-choice-unavailable {
    display: none;
}
/* … or left in: a swatch at full strength, blurred behind the mark … */
.psc-product-options.psc-show-unavailable .psc-swatch-option .psc-choice-unavailable {
    opacity: 1;
}
.psc-product-options.psc-show-unavailable .psc-swatch-option .psc-choice-unavailable::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(var(--psc-cp-swatches-blur, 1px));
    backdrop-filter: blur(var(--psc-cp-swatches-blur, 1px));
}
/* … and under the X while the Swatches tab shows the disabled mark. */
.psc-product-options.psc-cross-unavailable .psc-swatch-option .psc-choice-unavailable > .psc-swatch-cross {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--psc-cp-swatches-crosssize, 76%);
    height: var(--psc-cp-swatches-crosssize, 76%);
    z-index: 2;
}

/* The checkmark over a chosen colour swatch (a colour swatch's alone
   since 1.1.28). */
.psc-product-options.psc-check-selected .psc-kind-color .psc-choice:has(input:checked) .psc-swatch-check {
    display: block;
}
.psc-color-block,
.psc-color-icon {
    position: relative;
}
.psc-color-block > .psc-swatch-check,
.psc-color-icon > svg.psc-swatch-check,
.psc-kind-color .psc-swatch-square .psc-swatch-check,
.psc-kind-color .psc-swatch-circle .psc-swatch-check {
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--psc-cp-swatches-checksize, 70%);
    height: var(--psc-cp-swatches-checksize, 70%);
    z-index: 3;
    fill: none;
}

/* A grouped product's list (1.1.58, includes/frontend/psc-grouped.php),
   while the Site tab replaces WooCommerce's, in the Grouped tab's styling
   (1.1.59; the Checkbox tab's tile until then): each product a tile — its
   padding, border, corner radius and colours, the backgrounds by row, on
   hover and once a quantity is chosen — with its image, name and stock, its
   price, and a quantity between a minus and a plus, in the Grouped tab's
   Column Order (1.1.71: the parts are flex items in the order the markup
   prints them, the name the one that grows; a product's row and a
   variation's each have their own order, image, stock and sizes). A
   variable product listing its variations is a tile of its own with its
   image and name at the top and a row inside it per variation, the
   variation's attributes (name and value) for its name. */
.psc-grouped {
    --psc-cp-choice-padding: var(--psc-cp-grouped-paddingtop, var(--psc-cp-grouped-padding, 10px)) var(--psc-cp-grouped-paddingright, var(--psc-cp-grouped-padding, 10px)) var(--psc-cp-grouped-paddingbottom, var(--psc-cp-grouped-padding, 10px)) var(--psc-cp-grouped-paddingleft, var(--psc-cp-grouped-padding, 10px));
    --psc-cp-border-width: var(--psc-cp-grouped-borderwidth, 2px);
    --psc-cp-border-color: var(--psc-cp-grouped-bordercolor, #AAA);
    --psc-cp-hover-color: var(--psc-cp-grouped-hovercolor, #888);
    --psc-cp-checked-color: var(--psc-cp-grouped-checkedcolor, #4c80ed);
    --psc-cp-radius: var(--psc-cp-grouped-radius, 5px);
    --psc-cp-bg-even: var(--psc-cp-grouped-bgeven, transparent);
    --psc-cp-bg-odd: var(--psc-cp-grouped-bgodd, transparent);
    --psc-cp-bg-hover: var(--psc-cp-grouped-bghover, transparent);
    --psc-cp-bg-selected: var(--psc-cp-grouped-bgselected, transparent);
    --psc-cp-image-size: var(--psc-cp-grouped-imagesize, 56px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
}
.psc-grouped-item,
.psc-grouped-group {
    box-sizing: border-box;
    border: var(--psc-cp-border-width, 2px) solid var(--psc-cp-border-color, #AAA);
    border-radius: var(--psc-cp-radius, 5px);
    padding: var(--psc-cp-choice-padding, 10px);
}
.psc-grouped-item {
    display: flex;
    align-items: center;
    gap: 6px 16px;
}
.psc-grouped > :nth-child(odd) { background-color: var(--psc-cp-bg-odd, transparent); }
.psc-grouped > :nth-child(even) { background-color: var(--psc-cp-bg-even, transparent); }
.psc-grouped .psc-grouped-item:hover {
    border-color: var(--psc-cp-hover-color, #888);
    background-color: var(--psc-cp-bg-hover, transparent);
}
.psc-grouped .psc-grouped-item.psc-grouped-chosen {
    border-color: var(--psc-cp-checked-color, #4c80ed);
    background-color: var(--psc-cp-bg-selected, transparent);
}
.psc-grouped-unavailable { opacity: 0.6; }
.psc-grouped .psc-grouped-media { flex: 0 0 auto; }
.psc-grouped .psc-grouped-media img {
    display: block;
    width: var(--psc-cp-image-size, 56px);
    height: var(--psc-cp-image-size, 56px);
    max-width: none;
    object-fit: cover;
    margin: 0;
    border-radius: calc(var(--psc-cp-radius, 5px) / 2);
}
.psc-grouped-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
/* The text in the Grouped tab's sizes, weights and colours, set on every
   element that holds it rather than inherited (1.1.60): a theme that sizes
   span, a and p outright — one sets each at 18px — outranks anything
   inherited, and the list's names, attributes and prices came out at the
   theme's size. Held with !important against a theme that does so with it.
   The price's box is .psc-grouped-cost, no class with "price" in it, which
   a theme's rules for WooCommerce's price reach — one sized every row's as
   the page's headline figure. */
.psc-grouped .psc-grouped-name {
    display: block;
    margin: 0;
    line-height: 1.3;
    cursor: inherit;
}
.psc-grouped .psc-grouped-name,
.psc-grouped .psc-grouped-name * {
    color: var(--psc-cp-grouped-productcolor, #222222) !important;
    font-size: var(--psc-cp-grouped-productsize, 16px) !important;
    font-weight: var(--psc-cp-grouped-productweight, 400) !important;
    line-height: 1.3 !important;
}
.psc-grouped .psc-grouped-name a { text-decoration: none; }
.psc-grouped .psc-grouped-name a:hover { text-decoration: underline; }
/* A listed variation's attributes for its name: "Colour: Black", the
   name and the value each in its colour, several side by side. */
.psc-grouped .psc-grouped-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0;
    cursor: inherit;
}
.psc-grouped .psc-grouped-attrs,
.psc-grouped .psc-grouped-attrs * {
    font-size: var(--psc-cp-grouped-attrsize, 15px) !important;
    line-height: 1.3 !important;
}
.psc-grouped .psc-grouped-attrs .psc-grouped-attr-name {
    color: var(--psc-cp-grouped-attrnamecolor, #6b6b6b) !important;
    font-weight: 400 !important;
}
.psc-grouped .psc-grouped-attrs .psc-grouped-attr-value {
    color: var(--psc-cp-grouped-attrvaluecolor, #222222) !important;
    font-weight: 600 !important;
}
.psc-grouped .psc-grouped-stock .stock {
    margin: 0 !important;
    font-size: var(--psc-cp-grouped-stocksize, 13px) !important;
    font-weight: 400;
    line-height: 1.3 !important;
}
.psc-grouped .psc-grouped-stock .stock.in-stock { color: var(--psc-cp-grouped-instockcolor, #2e7d32) !important; }
.psc-grouped .psc-grouped-stock .stock.available-on-backorder { color: var(--psc-cp-grouped-backordercolor, #b26a00) !important; }
.psc-grouped .psc-grouped-stock .stock.out-of-stock { color: var(--psc-cp-grouped-outstockcolor, #b32d2e) !important; }
/* A variation's row in the Variations panel's own sizes and colours
   (1.1.71): its stock, its price and its image, each the product's until
   the panel is saved. */
.psc-grouped .psc-grouped-variation .psc-grouped-stock .stock { font-size: var(--psc-cp-grouped-vstocksize, 13px) !important; }
.psc-grouped .psc-grouped-variation .psc-grouped-stock .stock.in-stock { color: var(--psc-cp-grouped-vinstockcolor, #2e7d32) !important; }
.psc-grouped .psc-grouped-variation .psc-grouped-stock .stock.available-on-backorder { color: var(--psc-cp-grouped-vbackordercolor, #b26a00) !important; }
.psc-grouped .psc-grouped-variation .psc-grouped-stock .stock.out-of-stock { color: var(--psc-cp-grouped-voutstockcolor, #b32d2e) !important; }
.psc-grouped .psc-grouped-cost {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}
.psc-grouped .psc-grouped-item .psc-grouped-cost,
.psc-grouped .psc-grouped-item .psc-grouped-cost * {
    color: var(--psc-cp-grouped-pricecolor, #222222) !important;
    font-size: var(--psc-cp-grouped-pricesize, 16px) !important;
    font-weight: var(--psc-cp-grouped-priceweight, 400) !important;
    line-height: 1.3 !important;
    background: none;
    text-decoration: none;
}
.psc-grouped .psc-grouped-item .psc-grouped-cost del,
.psc-grouped .psc-grouped-item .psc-grouped-cost del * {
    font-size: calc(var(--psc-cp-grouped-pricesize, 16px) * 0.85) !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    opacity: 0.6;
}
.psc-grouped .psc-grouped-item .psc-grouped-cost del * { opacity: 1; }
.psc-grouped .psc-grouped-variation .psc-grouped-cost,
.psc-grouped .psc-grouped-variation .psc-grouped-cost * {
    color: var(--psc-cp-grouped-vpricecolor, #222222) !important;
    font-size: var(--psc-cp-grouped-vpricesize, 16px) !important;
    font-weight: var(--psc-cp-grouped-vpriceweight, 400) !important;
}
.psc-grouped .psc-grouped-variation .psc-grouped-cost del,
.psc-grouped .psc-grouped-variation .psc-grouped-cost del * {
    font-size: calc(var(--psc-cp-grouped-vpricesize, 16px) * 0.85) !important;
    font-weight: 400 !important;
}
.psc-grouped-buy {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}
/* The quantity: the number between a minus and a plus, one box in the
   tile's border. The browser's own spinner is hidden. */
.psc-qty {
    display: inline-flex;
    align-items: stretch;
    border: var(--psc-cp-border-width, 2px) solid var(--psc-cp-border-color, #AAA);
    border-radius: var(--psc-cp-radius, 5px);
    overflow: hidden;
    background: #fff;
}
.psc-qty-step {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.psc-qty-step:hover { background: rgba(0, 0, 0, 0.06); }
.psc-qty-step:focus-visible {
    outline: 2px solid var(--psc-cp-checked-color, #4c80ed);
    outline-offset: -2px;
}
.psc-grouped .psc-qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    width: 3.2em;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-left: 1px solid var(--psc-cp-border-color, #AAA);
    border-right: 1px solid var(--psc-cp-border-color, #AAA);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.psc-grouped .psc-qty-input::-webkit-inner-spin-button,
.psc-grouped .psc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.psc-grouped .psc-grouped-single,
.psc-grouped .psc-grouped-single span {
    font-size: 15px;
}
.psc-grouped-single {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}
.psc-grouped .psc-grouped-choose {
    font-size: 15px;
}
.psc-grouped-choose {
    display: inline-block;
    padding: 7px 14px;
    border: var(--psc-cp-border-width, 2px) solid var(--psc-cp-checked-color, #4c80ed);
    border-radius: var(--psc-cp-radius, 5px);
    color: var(--psc-cp-checked-color, #4c80ed);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.psc-grouped-choose:hover,
.psc-grouped-choose:focus-visible {
    background: var(--psc-cp-checked-color, #4c80ed);
    color: #fff;
}
/* A product listing its variations: its image (while the Products panel
   shows one) and name, then a row per variation — its own image only where
   it has one, at the Variations panel's size. */
.psc-grouped-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.psc-grouped-variations {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* "See All N Options" under a product's variations where it has more than
   its Max lists (1.1.61): its page, for the rest. */
.psc-grouped .psc-grouped-more {
    display: block;
    padding: 4px 0 0;
    color: var(--psc-cp-checked-color, #4c80ed);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}
.psc-grouped .psc-grouped-more:hover,
.psc-grouped .psc-grouped-more:focus-visible { text-decoration: underline; }
.psc-grouped .psc-grouped-variation {
    border-width: 1px;
    padding: 8px 12px;
}
.psc-grouped .psc-grouped-variation .psc-grouped-media img {
    width: var(--psc-cp-grouped-vimagesize, 40px);
    height: var(--psc-cp-grouped-vimagesize, 40px);
}
/* On a narrow screen the quantity takes a line of its own, wherever the
   order puts it. */
@media (max-width: 480px) {
    .psc-grouped-item { flex-wrap: wrap; }
    .psc-grouped-buy { flex: 1 0 100%; justify-content: flex-start; }
}