@layer components {
/* Selectable card for widget choices. Native inputs own selection state so
   server-rendered checked values, form submission, and Alpine x-model all
   stay aligned. */

.psw-choice-card-field {
    display: block;
    width: 100%;
}

.psw-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    padding: calc(var(--space-4) - var(--border-width-sm));
    color: var(--color-content-high);
    background: var(--color-white);
    border: var(--border-width-sm) solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

/* Hover wash gated on (hover: hover): touch browsers keep :hover latched on
   the last-tapped element, which left the just-selected card stuck in the
   gray wash. :active below still gives touch its pressed feedback. */
@media (hover: hover) {
    .psw-choice-card:not(.psw-choice-card--disabled):hover:not(:has(.psw-choice-card__action-btn:hover)) {
        background:
            linear-gradient(rgba(15, 15, 15, 0.04), rgba(15, 15, 15, 0.04)),
            var(--color-white);
    }
}

.psw-choice-card:not(.psw-choice-card--disabled):active:not(:has(.psw-choice-card__action-btn:active)) {
    background:
        linear-gradient(rgba(15, 15, 15, 0.08), rgba(15, 15, 15, 0.08)),
        var(--color-white);
}

.psw-choice-card:has(.psw-choice-card__input:checked) {
    border-color: var(--theme-primary, var(--theme-primary-default));
    box-shadow: inset 0 0 0 var(--border-width-sm) var(--theme-primary, var(--theme-primary-default));
}

.psw-choice-card-field--error .psw-choice-card {
    border-color: var(--color-danger-400);
}

.psw-choice-card:has(.psw-choice-card__input:user-invalid) {
    border-color: var(--color-danger-400);
}

.psw-choice-card-field--error .psw-choice-card:has(.psw-choice-card__input:checked) {
    border-color: var(--color-danger-400);
    box-shadow: inset 0 0 0 var(--border-width-sm) var(--color-danger-400);
}

.psw-choice-card:has(.psw-choice-card__input:user-invalid:checked) {
    border-color: var(--color-danger-400);
    box-shadow: inset 0 0 0 var(--border-width-sm) var(--color-danger-400);
}

.psw-choice-card:has(.psw-choice-card__input:not(:disabled):focus-visible) {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--theme-primary, var(--theme-primary-default));
}

.psw-choice-card-field--error .psw-choice-card:has(.psw-choice-card__input:not(:disabled):focus-visible) {
    box-shadow: 0 0 0 3px var(--color-danger-400);
}

.psw-choice-card:has(.psw-choice-card__input:user-invalid:not(:disabled):focus-visible) {
    box-shadow: 0 0 0 3px var(--color-danger-400);
}

.psw-choice-card-field--disabled .psw-choice-card,
.psw-choice-card--disabled {
    color: var(--color-content-disabled);
    border-color: var(--color-border-disabled);
    cursor: not-allowed;
}

.psw-choice-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    width: 100%;
}

.psw-choice-card__corner-actions {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
}

.psw-choice-card__corner-action--selected,
.psw-choice-card:has(.psw-choice-card__input:checked) .psw-choice-card__corner-action--select {
    display: none;
}

.psw-choice-card:has(.psw-choice-card__input:checked) .psw-choice-card__corner-action--selected {
    display: inline-flex;
}

.psw-choice-card--with-avatar .psw-choice-card__content {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.psw-choice-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: pointer;
}

.psw-choice-card__title {
    min-width: 0;
    color: var(--color-content-high);
    font-family: var(--font-sans);
    font-size: var(--text-label-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-label-lg--line-height);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.psw-choice-card__price {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    color: var(--color-content-high);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-choice-card__price-was {
    color: var(--color-content-medium);
}

.psw-choice-card__subtitle,
.psw-choice-card__quantity-label {
    color: var(--color-content-medium);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

/* The "N payments of $X" label and the BNPL marks render on one line, clear of
   the card image (Figma): the row is its own grid child spanning the full card
   width, below both the text stack and the image, so the avatar column can
   never squeeze it into wrapping. The negative margin nets the 16px grid gap
   back down to the 4px text-stack rhythm. */
.psw-choice-card__icon-row {
    grid-column: 1 / -1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: calc(var(--space-1) - var(--space-4));
    flex-wrap: nowrap;
    cursor: pointer;
}

.psw-choice-card__icons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.psw-choice-card__icons .psw-icon,
.psw-choice-card__icons .psw-payment-icon {
    width: 20px;
    height: 20px;
}

.psw-choice-card__avatar-wrap {
    grid-column: 2;
    align-self: start;
    cursor: pointer;
}

.psw-choice-card__description {
    grid-column: 1 / -1;
    min-width: 0;
}

/* The avatar spans both rows so the description starts under the text rows
   rather than under the avatar — an 80px avatar is taller than a title +
   subtitle, and a full-width description would clear it by ~50px instead of
   the 16px rhythm (Figma 2596:216858). Desktop already places them this way.
   A card carrying the BNPL icon row is exempt: that row is deliberately
   full-width at this breakpoint (ENG-37101), so it already clears the avatar
   and the description follows it. */
.psw-choice-card__content:not(:has(.psw-choice-card__icon-row)) .psw-choice-card__avatar-wrap {
    grid-row: 1 / span 2;
}

.psw-choice-card__content:not(:has(.psw-choice-card__icon-row)) .psw-choice-card__description {
    grid-column: 1;
}

/* When the avatar is taller than the text it spans — a one-line title over a
   one-line description is 64px against an 80px avatar — grid splits the
   surplus evenly across the two tracks it crosses, so the 16px gap renders as
   24px. Sizing the description's track with a flex factor takes it out of that
   distribution (the surplus lands in the flexible track instead), leaving the
   gap at 16px and the leftover height below the description where it belongs.
   The "Any team member" card is the reported case; it applies to any avatar
   card whose text is short. */
.psw-choice-card__content:not(:has(.psw-choice-card__icon-row)):has(.psw-choice-card__avatar-wrap) {
    grid-template-rows: auto 1fr;
}

.psw-choice-card__description .psw-sneak-peek {
    color: var(--color-content-medium);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-choice-card__description .psw-sneak-peek__toggle {
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-choice-card__quantity {
    display: none;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
}

.psw-choice-card:has(.psw-choice-card__input:checked) .psw-choice-card__quantity {
    display: flex;
}

/* Removable cart counter (checkbox quantity cards): the trash button clears
   the item at the minimum quantity and swaps to a minus once the quantity
   climbs above it. data-at-min on the wrap — kept current by
   psw-choice-card.js — decides which of the two rendered buttons shows. */
.psw-choice-card__quantity[data-at-min="false"] .psw-choice-card__quantity-btn--remove,
.psw-choice-card__quantity[data-at-min="true"] .psw-choice-card__quantity-btn--decrement {
    display: none;
}

.psw-choice-card__quantity-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.psw-choice-card__action-btn {
    flex: 0 0 auto;
}

.psw-choice-card--disabled .psw-choice-card__text,
.psw-choice-card--disabled .psw-choice-card__avatar-wrap,
.psw-choice-card--disabled .psw-choice-card__icon-row,
.psw-choice-card--disabled .psw-choice-card__action-btn {
    cursor: not-allowed;
}

.psw-choice-card--disabled .psw-choice-card__price,
.psw-choice-card--disabled .psw-choice-card__price-was,
.psw-choice-card--disabled .psw-choice-card__subtitle,
.psw-choice-card--disabled .psw-choice-card__quantity-label,
.psw-choice-card--disabled .psw-choice-card__description .psw-sneak-peek {
    color: var(--color-content-disabled);
}

@media (min-width: 769px) {
    /* Desktop cards pad 24px on every side (the 1px border is inside the box,
       so it comes off the padding — same trick as the 16px base). */
    .psw-choice-card {
        padding: calc(var(--space-6) - var(--border-width-sm));
    }

    .psw-choice-card__avatar-wrap {
        grid-row: 1 / span 2;
    }

    .psw-choice-card__icon-row,
    .psw-choice-card__description {
        grid-column: 1;
    }
}
}