/* --------------------------------------------- */
/* 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: 20px;
}

.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: 16px;
    margin-bottom: 2px;
}

.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-price-display="hide"] .psc-choice-price {
    display: none;
}

.psc-hideinputs input {
    display: none;
}

.psc-choice {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #AAA;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 5px;
}

.psc-choice:has(input:checked) {
    border: 2px solid #4c80ed;
}

.psc-choice label {
    border: transparent solid 1px;
}

.psc-choice:hover label {
    border: unset !important;
}

.psc-choice:has(input:checked) label {
    border: unset !important;
}

.psc-choice:hover {
    border: 2px solid #888;
}

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

.psc-choice input {
    width: 20px;
    height: 20px;
    margin: auto 8px auto 10px;
    cursor: pointer;
}

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

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

.psc-select {
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    border-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: 18px;
}

div.psc-option input {
    width: 100%;
    max-width: 100px;
    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-price="0"] ) .psc-choice-price[data-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;
}

.psc-product-page .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: 150px;
    min-width: 250px;
    min-height: 100px;
    max-width: 700px;
    max-height: 500px;
}

.psc-choice-description {
    margin: 0;
    padding: 0 10px 10px 10px;
    font-size: 12px;
}

.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;
}

.psc-choice span {
    font-size: 16px;
}

.psc-swatches-radio-option .psc-choices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.psc-small-format .psc-swatches-radio-option .psc-choice label {
    padding: 2px 10px;
}

.psc-swatches-checkbox-option .psc-choices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.psc-small-format .psc-swatches-checkbox-option .psc-choice label {
    padding: 2px 10px;
}

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

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

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

.psc-color-block {
    width: var(--psc-swatch-size, 25px);
    height: var(--psc-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-swatch-size, 28px);
    height: var(--psc-swatch-size, 28px);
}

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

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

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

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

.psc-color-radio-option .psc-choices input {
    display: none !important;
}

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

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

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

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

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

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

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

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

/* Full (non-padded) swatch types: the choice itself IS the color */
.psc-color-radio-option .psc-swatch-square,
.psc-color-radio-option .psc-swatch-circle {
    border: none;
    padding: 0;
    overflow: hidden;
}
.psc-color-radio-option .psc-swatch-square label,
.psc-color-radio-option .psc-swatch-circle label {
    justify-content: center;
    min-height: 34px;
    padding: 4px 8px;
}
.psc-color-radio-option .psc-swatch-circle {
    border-radius: 50%;
}
.psc-color-radio-option .psc-swatch-square:has(input:checked),
.psc-color-radio-option .psc-swatch-circle:has(input:checked) {
    outline: 2px solid #4c80ed;
    outline-offset: 2px;
    border: none;
}
.psc-color-radio-option .psc-noshow-text.psc-swatch-square,
.psc-color-radio-option .psc-noshow-text.psc-swatch-circle {
    width: var(--psc-swatch-size, 34px);
    height: var(--psc-swatch-size, 34px);
}
.psc-color-radio-option .psc-noshow-text.psc-swatch-square label,
.psc-color-radio-option .psc-noshow-text.psc-swatch-circle label {
    padding: 0;
    width: 100%;
    height: 100%;
}
.psc-small-format .psc-color-radio-option .psc-noshow-text.psc-swatch-square,
.psc-small-format .psc-color-radio-option .psc-noshow-text.psc-swatch-circle {
    width: var(--psc-swatch-size, 28px);
    height: var(--psc-swatch-size, 28px);
}

/* Icon-based swatch types (drop, splash, paintcan, paintbrush) */
.psc-color-icon {
    width: var(--psc-swatch-size, 25px);
    height: var(--psc-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-swatch-size, 28px);
    height: var(--psc-swatch-size, 28px);
    margin: auto;
}
.psc-small-format .psc-color-radio-option .psc-color-icon {
    width: var(--psc-swatch-size, 17px);
    height: var(--psc-swatch-size, 17px);
}
.psc-small-format .psc-color-radio-option .psc-noshow-text .psc-color-icon {
    width: var(--psc-swatch-size, 25px);
    height: var(--psc-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;
}

/* --------------------------------------------- */
/* 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;
}