/* ============================================================
   VenueChief Shop Module Styles
   ============================================================
   
   Customer-facing storefront for memberships, gift cards,
   and merchandise purchases.
   
   Most rules are scoped under .scm-mod-Shop to avoid conflicts.

   EXCEPTION — the three checkout components in this module
   (ShopCustomerForm, ShopDeliveryForm, ShopPaymentForm) are also
   rendered by the CART module, where the root class is
   .scm-mod-Cart. Rules that style THOSE components therefore carry
   :is(.scm-mod-Shop,.scm-mod-Cart), and the token block below is
   declared on both roots — the rules reference var(--shop-*) 13
   times, so re-anchoring the rules without the tokens would give
   correct layout with dead colours.

   Scoping them to .scm-mod-Shop alone is what left /cart's payment
   step completely unstyled: a bare oversized <h2>Payment</h2>, a
   full-bleed form and a stretched card element, while the basket
   above it looked fine because that markup is styled by
   SCMUIKit.cart.css.

   Anything NOT part of those three components stays .scm-mod-Shop —
   in particular .cart-summary and .btn, which the cart already
   styles differently through the UI kit.

   A component shared between modules must never have its CSS
   anchored to one module's root class.
   ============================================================ */

/* ---- Container ---- */
.scm-mod-Shop,
.scm-mod-Cart {
    /* ── Theme bridge tokens ── */
    --shop-accent: var(--scm-accent, #2563eb);
    --shop-accent-light: var(--scm-accent-light, #eff6ff);
    --shop-accent-border: var(--scm-accent-border, #93c5fd);
    --shop-accent-glow: var(--scm-accent-glow, rgba(37, 99, 235, 0.15));

    --shop-text: var(--scm-surface-contrast, #0f172a);
    --shop-text-body: var(--scm-text-body, #334155);
    --shop-text-secondary: var(--scm-text-secondary, #475569);
    --shop-text-muted: var(--scm-text-muted, #64748b);
    --shop-text-dim: var(--scm-text-dim, #94a3b8);

    --shop-bg: var(--scm-surface, #fff);
    --shop-bg-subtle: var(--scm-surface-muted, #f8fafc);
    --shop-bg-hover: var(--scm-surface-hover, #f1f5f9);
    --shop-bg-glass: rgba(255, 255, 255, 0.95);

    --shop-border: var(--scm-border, #e2e8f0);
    --shop-border-light: var(--scm-border-light, #f1f5f9);

    --shop-success: var(--scm-success, #16a34a);
    --shop-error: var(--scm-error, #dc2626);

    font-family: inherit;
    color: var(--shop-text);
    width: 100%;
    /* Tokenised so the Display Size setting has something to move. The literals are the
       values that shipped, so the default size is unchanged. */
    --shop-max-width: 960px;
    --shop-pad: 1rem;
    max-width: var(--shop-max-width);
    margin: 0 auto;
    padding: var(--shop-pad);
}

/* Display Size, from the module's theme panel. The setting was reaching the settings table
   and stopping there: the root element carried no size class, so all four options rendered
   identically. */
.scm-mod-Shop.scm-mod-compact {
    --shop-max-width: 760px;
    --shop-pad: 0.5rem;
}

.scm-mod-Shop.scm-mod-large {
    --shop-max-width: 1200px;
    --shop-pad: 1.5rem;
}

.scm-mod-Shop.scm-mod-fullheight {
    --shop-max-width: none;
    min-height: 100vh;
}

/* ---- Loading / Empty States ---- */
.scm-mod-Shop .scm-mod-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--shop-text-muted);
}

.scm-mod-Shop .scm-mod-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--shop-border);
    border-top-color: var(--shop-accent);
    border-radius: 50%;
    animation: shop-spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes shop-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-Shop .shop-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--shop-text-muted);
}

.scm-mod-Shop .shop-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--shop-text-dim);
}

/* ============================================================
   HEADER
   ============================================================ */
.scm-mod-Shop .shop-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--shop-bg-glass);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--shop-border);
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
}

.scm-mod-Shop .header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.scm-mod-Shop .btn-back {
    background: none;
    border: none;
    padding: 0.5rem;
    font-size: 1.25rem;
    color: var(--shop-text-secondary);
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

.scm-mod-Shop .btn-back:hover {
    background: var(--shop-bg-hover);
}

.scm-mod-Shop .header-spacer {
    width: 2.25rem;
}

.scm-mod-Shop .header-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    flex: 1;
}


/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */
.scm-mod-Shop .shop-progress {
    margin-bottom: 2rem;
}

.scm-mod-Shop .progress-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.scm-mod-Shop .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.scm-mod-Shop .progress-step + .progress-step::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--shop-border);
}

.scm-mod-Shop .progress-step.completed + .progress-step::before,
.scm-mod-Shop .progress-step.completed + .progress-step.current::before {
    background: var(--shop-accent);
}

.scm-mod-Shop .step-indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    position: relative;
    z-index: 1;
    background: var(--shop-border);
    color: var(--shop-text-dim);
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.scm-mod-Shop .progress-step.current .step-indicator {
    background: var(--shop-accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--shop-accent-glow);
}

.scm-mod-Shop .progress-step.completed .step-indicator {
    background: var(--shop-accent);
    color: #fff;
}

.scm-mod-Shop .step-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shop-text-dim);
    text-align: center;
    line-height: 1.3;
    min-height: calc(2 * 0.7rem * 1.3);
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scm-mod-Shop .progress-step.current .step-label {
    color: var(--shop-accent);
}

.scm-mod-Shop .progress-step.completed .step-label {
    color: var(--shop-text-secondary);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.scm-mod-Shop .shop-content {
    min-height: 300px;
}

/* ============================================================
   CATEGORY NAV
   ============================================================ */
.scm-mod-Shop .shop-category-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.scm-mod-Shop .category-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--shop-border);
    border-radius: 999px;
    background: var(--shop-bg);
    color: var(--shop-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.scm-mod-Shop .category-tab:hover {
    border-color: var(--shop-accent-border);
    color: var(--shop-accent);
}

.scm-mod-Shop .category-tab.active {
    background: var(--shop-accent);
    border-color: var(--shop-accent);
    color: #fff;
}

/* ============================================================
   MEMBERSHIP PLANS
   ============================================================ */
.scm-mod-Shop .membership-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.scm-mod-Shop .plan-card {
    position: relative;
    background: var(--shop-bg);
    border: 1px solid var(--shop-border);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.scm-mod-Shop .plan-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--shop-accent-border);
}

.scm-mod-Shop .plan-featured {
    border-color: var(--shop-accent);
    box-shadow: 0 0 0 1px var(--shop-accent);
}

.scm-mod-Shop .plan-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--shop-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.scm-mod-Shop .plan-icon {
    font-size: 2rem;
    color: var(--shop-accent);
    margin-bottom: 0.75rem;
}

.scm-mod-Shop .plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.scm-mod-Shop .plan-tagline {
    font-size: 0.875rem;
    color: var(--shop-text-muted);
    margin: 0 0 1rem;
}

.scm-mod-Shop .plan-price {
    margin-bottom: 0.5rem;
}

.scm-mod-Shop .price-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--shop-text);
}

.scm-mod-Shop .price-interval {
    font-size: 0.875rem;
    color: var(--shop-text-muted);
    margin-left: 0.15rem;
}

.scm-mod-Shop .plan-setup-fee {
    font-size: 0.8rem;
    color: var(--shop-text-dim);
    margin: 0 0 0.5rem;
}

.scm-mod-Shop .plan-trial {
    font-size: 0.8rem;
    color: var(--shop-success);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.scm-mod-Shop .plan-description {
    font-size: 0.875rem;
    color: var(--shop-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.scm-mod-Shop .plan-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
}

.scm-mod-Shop .plan-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--shop-text-body);
}

.scm-mod-Shop .plan-benefits li i {
    color: var(--shop-success);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.scm-mod-Shop .plan-benefits .more-benefits {
    color: var(--shop-text-muted);
    font-style: italic;
    padding-left: 1.5rem;
}

.scm-mod-Shop .plan-select-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   GIFT CARD DESIGNER
   ============================================================ */
.scm-mod-Shop .gift-card-designer {
    background: var(--shop-bg);
    border: 1px solid var(--shop-border);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    max-width: 540px;
    margin: 0 auto;
}

.scm-mod-Shop .designer-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.scm-mod-Shop .designer-subtitle {
    font-size: 0.9rem;
    color: var(--shop-text-muted);
    margin: 0 0 1.5rem;
}

.scm-mod-Shop .gc-section {
    margin-bottom: 1.5rem;
}

.scm-mod-Shop .gc-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shop-text-secondary);
    margin-bottom: 0.5rem;
}

.scm-mod-Shop .gc-preset-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.scm-mod-Shop .preset-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--shop-border);
    border-radius: 0.5rem;
    background: var(--shop-bg);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--shop-text-body);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.scm-mod-Shop .preset-btn:hover {
    border-color: var(--shop-accent-border);
    color: var(--shop-accent);
}

.scm-mod-Shop .preset-btn.active {
    background: var(--shop-accent);
    border-color: var(--shop-accent);
    color: #fff;
}

.scm-mod-Shop .gc-custom-amount {
    margin-top: 0.75rem;
}

.scm-mod-Shop .gc-field-error {
    color: var(--shop-error);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.scm-mod-Shop .gc-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--shop-text-dim);
    margin-top: 0.25rem;
}

.scm-mod-Shop .gc-summary {
    background: var(--shop-bg-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.scm-mod-Shop .gc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--shop-text-secondary);
}

.scm-mod-Shop .gc-summary-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--shop-text);
}

.scm-mod-Shop .gc-add-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   STEP ACTIONS
   ============================================================ */
:is(.scm-mod-Shop,.scm-mod-Cart) .shop-step-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--shop-border);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .shop-step-actions .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
}


/* ============================================================
   CART SUMMARY (Order Review Step)
   ============================================================ */
.scm-mod-Shop .cart-summary {
    background: var(--shop-bg);
    border: 1px solid var(--shop-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.scm-mod-Shop .summary-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.scm-mod-Shop .summary-items {
    margin-bottom: 1rem;
}

.scm-mod-Shop .summary-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--shop-border-light);
}

.scm-mod-Shop .summary-item:last-child {
    border-bottom: none;
}

.scm-mod-Shop .summary-item-icon {
    font-size: 1.125rem;
    color: var(--shop-accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.scm-mod-Shop .summary-item-details {
    flex: 1;
    min-width: 0;
}

.scm-mod-Shop .summary-item-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.scm-mod-Shop .summary-item-subtitle {
    font-size: 0.8rem;
    color: var(--shop-text-muted);
}

.scm-mod-Shop .summary-item-recipient {
    font-size: 0.75rem;
    color: var(--shop-text-dim);
    margin-top: 0.15rem;
}

.scm-mod-Shop .summary-item-qty {
    font-size: 0.75rem;
    color: var(--shop-text-dim);
}

.scm-mod-Shop .summary-item-price {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.scm-mod-Shop .summary-divider {
    height: 1px;
    background: var(--shop-border);
    margin: 0.75rem 0;
}

.scm-mod-Shop .summary-totals {
    padding-top: 0.25rem;
}

.scm-mod-Shop .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--shop-text-secondary);
}

.scm-mod-Shop .summary-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--shop-text);
    border-top: 1px solid var(--shop-border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

/* ============================================================
   CUSTOMER FORM
   ============================================================ */
:is(.scm-mod-Shop,.scm-mod-Cart) .shop-customer-form {
    max-width: 480px;
    margin: 0 auto;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .shop-customer-form h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .form-subtitle {
    color: var(--shop-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .customer-account-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--shop-accent-light);
    border: 1px solid var(--shop-accent-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--scm-accent-active, #1e40af);
    margin-bottom: 1.5rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .customer-continue-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================================
   PAYMENT FORM
   ============================================================ */
:is(.scm-mod-Shop,.scm-mod-Cart) .shop-payment-form {
    max-width: 480px;
    margin: 0 auto;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .shop-payment-form h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--shop-bg-subtle);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--shop-text-secondary);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--shop-text);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-card-section {
    margin-bottom: 1.25rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .stripe-card-placeholder {
    border: 1px solid var(--shop-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--shop-bg);
    margin-top: 0.35rem;
}

.scm-mod-Shop .card-input-mock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--shop-text-dim);
    font-size: 0.9rem;
}

.scm-mod-Shop .card-brands {
    margin-left: auto;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-error {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--shop-error);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--shop-text-muted);
    margin-bottom: 1.5rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-security i {
    color: var(--shop-success);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .payment-submit-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ---- Value Redemption (gift cards & member credits) ---- */
:is(.scm-mod-Shop,.scm-mod-Cart) .value-redemption-section {
    padding: 1rem 1.25rem;
    background: var(--shop-bg-subtle);
    border: 1px solid var(--shop-border);
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .fully-covered-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(22, 163, 74, 0.06);
    border: 2px solid var(--shop-success);
    border-radius: 0.75rem;
    color: var(--shop-success);
    margin-bottom: 1.25rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .fully-covered-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .fully-covered-banner strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

:is(.scm-mod-Shop,.scm-mod-Cart) .fully-covered-banner span {
    display: block;
    font-size: 0.85rem;
    color: var(--shop-text-secondary);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .partial-value-applied {
    background: rgba(22, 163, 74, 0.04);
    border-color: var(--shop-success);
}

:is(.scm-mod-Shop,.scm-mod-Cart) .partial-value-applied .payment-total {
    color: var(--shop-success);
}

/* ============================================================
   CONFIRMATION
   ============================================================ */
.scm-mod-Shop .shop-confirmation {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 540px;
    margin: 0 auto;
}

.scm-mod-Shop .confirmation-icon {
    font-size: 3.5rem;
    color: var(--shop-success);
    margin-bottom: 1rem;
}

.scm-mod-Shop .confirmation-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.scm-mod-Shop .confirmation-subtitle {
    font-size: 1rem;
    color: var(--shop-text-muted);
    margin: 0 0 0.75rem;
}

.scm-mod-Shop .confirmation-email {
    font-size: 0.9rem;
    color: var(--shop-text-secondary);
    margin-bottom: 2rem;
}

.scm-mod-Shop .confirmation-summary {
    text-align: left;
    background: var(--shop-bg-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.scm-mod-Shop .confirmation-summary h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.scm-mod-Shop .confirmation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.875rem;
}

.scm-mod-Shop .confirmation-item .item-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--shop-text-body);
}

.scm-mod-Shop .confirmation-item .item-amount {
    font-weight: 600;
}

.scm-mod-Shop .confirmation-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--shop-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 700;
}

/* The reverse-charge invoice legend: quiet and factual, beside the total it explains. */
.scm-mod-Shop .confirmation-vat {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--shop-text-muted, #6b7280);
    text-align: left;
}

.scm-mod-Shop .confirmation-next-steps {
    text-align: left;
    margin-bottom: 2rem;
}

.scm-mod-Shop .confirmation-next-steps h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.scm-mod-Shop .confirmation-next-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scm-mod-Shop .confirmation-next-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--shop-text-body);
}

.scm-mod-Shop .confirmation-next-steps li i {
    color: var(--shop-accent);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.scm-mod-Shop .confirmation-actions {
    margin-top: 1rem;
}

.scm-mod-Shop .confirmation-actions .btn {
    padding: 0.65rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .scm-mod-Shop {
        padding: 0.5rem;
    }

    .scm-mod-Shop .membership-plans-grid {
        grid-template-columns: 1fr;
    }

    .scm-mod-Shop .header-title {
        font-size: 1.05rem;
    }

    .scm-mod-Shop .price-amount {
        font-size: 1.5rem;
    }

    .scm-mod-Shop .gift-card-designer {
        padding: 1.25rem 1rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .scm-mod-Shop,
    .scm-mod-Shop *,
    .scm-mod-Shop *::before,
    .scm-mod-Shop *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Promo code entry (§7a.2) ─────────────────────────────────────────────
   Sits above the totals on the payment step, where the shopper is already
   looking at what they will pay. Errors render beside the field rather than
   as a toast: the correction happens in the box they just typed into. */

.scm-mod-Shop .shop-promo {
    margin-bottom: 1rem;
}

.scm-mod-Shop .shop-promo-entry {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.scm-mod-Shop .shop-promo-entry .form-control {
    /* Codes are short and often shouted down a phone — uppercase and spaced
       so a mistyped character is visible before it is submitted. */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scm-mod-Shop .shop-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--shop-success);
    border-radius: 8px;
    background: color-mix(in srgb, var(--shop-success) 8%, transparent);
    color: var(--shop-text);
}

.scm-mod-Shop .shop-promo-applied .btn-link {
    padding: 0;
    text-decoration: underline;
    color: var(--shop-text-muted);
}

.scm-mod-Shop .shop-promo-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--shop-error);
}

/* The one green row in a column of black ones: the saving should be the thing
   the eye lands on. */
.scm-mod-Shop .totals-row--discount {
    color: var(--shop-success);
}

/* ── Back-in-stock request (§7a.3) ───────────────────────────────────────── */

.scm-mod-Shop .shop-notify {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--shop-border);
    border-radius: 10px;
    background: var(--shop-border-light);
}

.scm-mod-Shop .shop-notify-entry {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scm-mod-Shop .shop-notify-entry .form-control {
    flex: 1 1 14rem;
}

.scm-mod-Shop .shop-notify-done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--shop-success);
}

@media (max-width: 480px) {
    .scm-mod-Shop .shop-promo-entry {
        flex-wrap: wrap;
    }

    .scm-mod-Shop .shop-promo-entry .form-control {
        flex: 1 1 100%;
    }
}

/* ── Guest order tracking (§7a.4) ─────────────────────────────────────────
   Its own page, not a checkout step: whoever lands here arrived from a receipt
   with no cart and no session. */

.scm-mod-Shop .order-tracker {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.scm-mod-Shop .order-tracker-header h1 {
    font-size: 1.5rem;
    color: var(--shop-text);
}

.scm-mod-Shop .order-tracker-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.scm-mod-Shop .order-tracker-result {
    border: 1px solid var(--shop-border);
    border-radius: 12px;
    padding: 1.25rem;
    background: var(--shop-border-light);
}

.scm-mod-Shop .order-tracker-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--shop-border);
}

.scm-mod-Shop .order-tracker-summary .label {
    display: block;
    font-size: 0.8125rem;
    color: var(--shop-text-muted);
}

.scm-mod-Shop .order-tracker-lines {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.scm-mod-Shop .order-tracker-lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--shop-border);
}

.scm-mod-Shop .order-tracker-lines li:last-child {
    border-bottom: 0;
}

/* The answer to "where is my order?" — it should read as a status, not as body text. */
.scm-mod-Shop .order-tracker-lines .line-status {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--shop-accent);
    white-space: nowrap;
}

/* ============================================================
   ADDED-TO-BASKET CONFIRMATION

   Replaces the cart drawer. The drawer was the acknowledgement that an item had
   landed; with one basket living on /cart, something still has to confirm the add
   or it becomes an act of faith. This says it and leaves.

   Bottom-anchored and non-modal on purpose: it must not cover what the shopper is
   reading, and it must not stop them adding a second thing.
   ============================================================ */
.scm-mod-Shop .shop-added-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 2rem);
    max-width: 30rem;
    padding: 0.75rem 0.875rem 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--shop-bg, #fff);
    border: 1px solid var(--shop-border, #e2e8f0);
    box-shadow: 0 8px 28px rgb(0 0 0 / 15%);
    font-size: 0.9375rem;
    animation: shop-added-toast-in 0.22s ease-out;
}

@keyframes shop-added-toast-in {
    from { opacity: 0; transform: translate(-50%, 0.75rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Respect a shopper who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .scm-mod-Shop .shop-added-toast { animation: none; }
}

.scm-mod-Shop .shop-added-toast > .bi-check-circle-fill {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--shop-success, #15803d);
}

/* Takes the slack so the button and close sit hard right. Truncates rather than
   wraps: a long product name must not push the action off a phone screen. */
.scm-mod-Shop .shop-added-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scm-mod-Shop .shop-added-toast .btn {
    flex: 0 0 auto;
}

.scm-mod-Shop .shop-added-toast-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0.25rem 0.375rem;
    line-height: 1;
    color: var(--shop-text-secondary, #64748b);
    cursor: pointer;
    border-radius: 0.375rem;
}

.scm-mod-Shop .shop-added-toast-close:hover {
    background: var(--shop-bg-hover, #f1f5f9);
}

/* On a narrow screen the name gets its own line so the actions keep full width. */
@media (max-width: 26rem) {
    .scm-mod-Shop .shop-added-toast {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .scm-mod-Shop .shop-added-toast-text {
        flex: 1 1 100%;
        order: -1;
        white-space: normal;
    }

    .scm-mod-Shop .shop-added-toast .btn {
        flex: 1 1 auto;
    }
}