.wl-account,.wl-checkout-card{container-type:inline-size;container-name:loyalty-storefront}
:root {
    --wl-accent: var(--wtds-action, var(--ds-action, #7c3aed));
    --wl-text: var(--wtds-ink, var(--ds-ink, #111827));
    --wl-muted: var(--wtds-ink-3, var(--ds-ink-3, #6b7280));
    --wl-border: var(--wtds-separator-soft, var(--ds-separator-soft, rgba(15, 23, 42, .1)));
    --wl-surface: var(--wtds-surface, var(--ds-surface, #fff));
    --wl-soft: color-mix(in srgb, var(--wl-accent) 8%, transparent);
    --wl-radius: var(--wtds-r-lg, var(--ds-r-lg, 1rem));
    --wl-warning: var(--wtds-warning, #b45309);
    --wl-warning-soft: var(--wtds-warning-soft, color-mix(in srgb, var(--wl-warning) 9%, transparent));
    --wl-success: var(--wtds-success, #047857);
    --wl-success-soft: var(--wtds-success-soft, color-mix(in srgb, var(--wl-success) 9%, transparent));
    --wl-danger: var(--wtds-danger, #b91c1c);
}

.wapu-loyalty-account {
    color: var(--wl-text);
    font-family: inherit;
}

.wl-checkout-card {
    margin: 0 0 1.25rem;
    padding: 1.125rem;
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    background: linear-gradient(145deg, var(--wl-soft), var(--wl-surface) 64%);
}

.wl-checkout-card__head {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.wl-checkout-card__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    place-items: center;
    border-radius: .75rem;
    background: var(--wl-soft);
}

.wl-checkout-card__title {
    margin: 0;
    color: var(--wl-text);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.wl-checkout-card__meta,
.wl-checkout-help,
.wl-checkout-feedback {
    margin: .3125rem 0 0;
    color: var(--wl-muted);
    font-size: .75rem;
    line-height: 1.55;
}

.wl-checkout-state,
.wl-checkout-applied {
    margin-top: 1rem;
    padding: .75rem .875rem;
    border: 1px solid var(--wl-border);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--wl-text) 3%, transparent);
    font-size: .8125rem;
}

.wl-checkout-state strong,
.wl-checkout-state span,
.wl-checkout-applied strong,
.wl-checkout-applied span {
    display: block;
}

.wl-checkout-state span,
.wl-checkout-applied span {
    margin-top: .1875rem;
    color: var(--wl-muted);
    font-size: .75rem;
}

.wl-checkout-state--warning {
    border-color: color-mix(in srgb, var(--wl-warning) 28%, transparent);
    background: var(--wl-warning-soft);
}

.wl-checkout-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: color-mix(in srgb, var(--wl-success) 26%, transparent);
    background: var(--wl-success-soft);
}

.wl-checkout-form {
    margin-top: 1rem;
}

.wl-checkout-label {
    display: block;
    margin-bottom: .4375rem;
    color: var(--wl-muted);
    font-size: .75rem;
    font-weight: 600;
}

.wl-checkout-form__controls {
    display: flex;
    gap: .5rem;
}

.wl-checkout-input {
    width: min(9.0625rem, 42%);
    min-height: 2.625rem;
    padding: .5rem .75rem;
    border: 1px solid var(--wl-border);
    border-radius: .6875rem;
    background: var(--wl-surface);
    color: var(--wl-text);
    font: inherit;
    text-align: center;
}

.wl-checkout-button:disabled,
.wl-checkout-link:disabled {
    cursor: wait;
    opacity: .58;
}

.wl-checkout-feedback.is-error {
    color: var(--wl-danger);
}

.wapu-loyalty-account {
    display: grid;
    gap: 1.5rem;
}

.wl-account-hero,
.wl-account-card {
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    background: var(--wl-surface);
}

.wl-account-hero {
    padding: clamp(1.375rem, 4vw, 2.125rem);
    text-align: center;
    background: linear-gradient(145deg, var(--wl-soft), var(--wl-surface) 68%);
}

.wl-account-level {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .8125rem;
    border: 1px solid color-mix(in srgb, var(--wl-accent) 18%, transparent);
    border-radius: 62.4375rem;
    background: var(--wl-soft);
    color: var(--wl-accent);
    font-size: .8125rem;
    font-weight: 700;
}

.wl-account-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 29.375rem;
    margin: 1.375rem auto 0;
}

.wl-account-metric {
    padding: .25rem 1.25rem;
}

.wl-account-metric + .wl-account-metric {
    border-left: 1px solid var(--wl-border);
}

.wl-account-metric strong {
    display: block;
    color: var(--wl-text);
    font-size: clamp(1.5625rem, 5vw, 2.125rem);
    line-height: 1.1;
}

.wl-account-metric:first-child strong {
    color: var(--wl-accent);
}

.wl-account-metric span {
    display: block;
    margin-top: .375rem;
    color: var(--wl-muted);
    font-size: .75rem;
}

.wl-account-progress {
    max-width: 26.875rem;
    margin: 1.5rem auto 0;
}

.wl-account-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    color: var(--wl-muted);
    font-size: .75rem;
}

.wl-account-progress progress {
    display: block;
    width: 100%;
    height: .5625rem;
    overflow: hidden;
    border: 0;
    border-radius: 62.4375rem;
    background: color-mix(in srgb, var(--wl-text) 5%, transparent);
}

.wl-account-progress progress::-webkit-progress-bar {
    background: color-mix(in srgb, var(--wl-text) 5%, transparent);
    border-radius: 62.4375rem;
}

.wl-account-progress progress::-webkit-progress-value {
    background: var(--wl-accent);
    border-radius: 62.4375rem;
}

.wl-account-progress progress::-moz-progress-bar {
    background: var(--wl-accent);
    border-radius: 62.4375rem;
}

.wl-account-progress__hint {
    margin: .5rem 0 0;
    color: var(--wl-muted);
    font-size: .6875rem;
}

.wl-account-card {
    overflow: hidden;
}

.wl-account-card__head {
    padding: 1.0625rem 1.125rem;
    border-bottom: 1px solid var(--wl-border);
}

.wl-account-card__title {
    margin: 0;
    color: var(--wl-text);
    font-size: .875rem;
    font-weight: 700;
}

.wl-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.125rem;
}

.wl-account-row + .wl-account-row {
    border-top: 1px solid var(--wl-border);
}

.wl-account-row__main {
    min-width: 0;
}

.wl-account-row__title {
    color: var(--wl-text);
    font-size: .8125rem;
    font-weight: 600;
}

.wl-account-row__meta {
    margin-top: .1875rem;
    color: var(--wl-muted);
    font-size: .6875rem;
}

.wl-account-status,
.wapu-loyalty-ea-pill,
.wapu-loyalty-catalog-badge {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .25rem .625rem;
    border-radius: 62.4375rem;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.wl-account-status--active {
    background: var(--wl-success-soft);
    color: var(--wl-success);
}

.wl-account-status--locked {
    background: color-mix(in srgb, var(--wl-text) 5%, transparent);
    color: var(--wl-muted);
}

.wl-account-points {
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.wl-account-points--earn,
.wl-account-points--restore {
    color: var(--wl-success);
}

.wl-account-points--redeem {
    color: var(--wl-danger);
}

.wl-account-empty {
    padding: 1.75rem 1.125rem;
    color: var(--wl-muted);
    font-size: .8125rem;
    text-align: center;
}

.wapu-loyalty-product-points {
    margin-top: .625rem;
    color: var(--wl-muted);
    font-size: .8125rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: .25rem;
}

.wapu-loyalty-product-points__icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wapu-loyalty-product-points__icon svg { width: 1rem; height: 1rem; }
.wapu-loyalty-product-points a,
.wapu-loyalty-product-points a:hover,
.wapu-loyalty-product-points a:focus { color: inherit; text-decoration: none; border-bottom: 0; }
.wapu-loyalty-product-points strong {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.wapu-loyalty-product-multiplier {
    color: var(--wl-success);
    font-size: .6875rem;
}

.wapu-loyalty-catalog-badge {
    position: absolute;
    z-index: 2;
    top: .5rem;
    left: .5rem;
    background: color-mix(in srgb, var(--wl-accent) 92%, #000);
    color: #fff;
}

.wapu-loyalty-ea-badge {
    margin-bottom: 1rem;
}

.wapu-loyalty-ea-pill {
    border: 1px solid color-mix(in srgb, var(--wl-accent) 22%, transparent);
    background: var(--wl-soft);
    color: var(--wl-accent);
}

.wapu-loyalty-ea-locked {
    margin-bottom: 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--wl-border);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--wl-text) 3%, transparent);
    color: var(--wl-muted);
    font-size: .8125rem;
}
.wapu-loyalty-launch{display:flex;align-items:center;gap:10px;margin-top:7px;font-family:var(--wtds-font-text,inherit)}
.wapu-loyalty-launch__label{font-size:11px;font-weight:600;color:var(--wtds-ink-3,#676767)}
.wapu-loyalty-launch__time{display:inline-flex;padding:4px 7px;border:1px solid var(--wtds-outline,#e5e7eb);border-radius:4px;background:var(--wtds-surface-2,#fafafa);color:var(--wtds-ink,#121212);font:600 12px/1.2 var(--wtds-font-text,inherit);font-variant-numeric:tabular-nums;letter-spacing:.035em}
.wapu-loyalty-confetti{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none}
.wapu-loyalty-confetti i{position:absolute;top:-20px;left:var(--x);width:6px;height:10px;background:hsl(var(--hue) 75% 60%);opacity:.8;animation:wapu-loyalty-confetti-fall var(--duration) linear var(--delay) infinite}
@keyframes wapu-loyalty-confetti-fall{to{transform:translate3d(30px,110vh,0) rotate(720deg)}}
@media(prefers-reduced-motion:reduce){.wapu-loyalty-confetti{display:none}}

.wapu-loyalty-levels-table-wrap{max-width:100%;overflow-x:auto;margin:1rem 0}
.wapu-loyalty-levels-table{width:100%;border-collapse:collapse;background:var(--wtds-surface,#fff);color:var(--wtds-ink,#222);font-size:.9rem}
.wapu-loyalty-levels-table caption{text-align:left;font-weight:600;font-size:1rem;padding:0 0 .75rem}
.wapu-loyalty-levels-table th,.wapu-loyalty-levels-table td{text-align:left;vertical-align:top;padding:.875rem 1rem;border-bottom:1px solid var(--wtds-outline,#e5e5e5)}
.wapu-loyalty-levels-table thead th{font-weight:600;color:var(--wtds-ink-3,#666);background:var(--wtds-surface-2,#fafafa)}
.wapu-loyalty-levels-table td ul{display:grid;gap:.25rem;margin:0;padding-left:1.1rem}
.wapu-loyalty-levels-table td li{margin:0}
@media(max-width:600px){.wapu-loyalty-levels-table{min-width:540px}}
.wapu-loyalty-level-guide{margin:1.5rem 0;color:var(--wtds-ink,#222)}
.wapu-loyalty-level-guide>h2{font-size:1.2rem;margin:0 0 1rem}
.wapu-loyalty-level-guide__scroll{max-width:100%;overflow-x:auto;border-top:1px solid var(--wtds-separator-soft,#e5e5e5);border-bottom:1px solid var(--wtds-separator-soft,#e5e5e5);scrollbar-width:thin}
.wapu-loyalty-level-guide__scroll:focus-visible{outline:2px solid var(--wtds-action,#222);outline-offset:2px}
.wapu-loyalty-level-guide__table{width:100%;min-width:max-content;margin:0;border:0;border-collapse:separate;border-spacing:0;background:transparent;color:inherit;font-family:var(--wtds-font-text,inherit);font-size:var(--wtds-fs-footnote,.8125rem);line-height:var(--wtds-lh-base,1.4)}
.wapu-loyalty-level-guide__table th,.wapu-loyalty-level-guide__table td{min-width:7.5rem;padding:.8rem .875rem;border:0;border-bottom:1px solid var(--wtds-separator-soft,#e5e5e5);background:var(--wtds-surface,#fff);text-align:left;vertical-align:middle;white-space:nowrap}
.wapu-loyalty-level-guide__table tr:last-child th,.wapu-loyalty-level-guide__table tr:last-child td{border-bottom:0}
.wapu-loyalty-level-guide__table thead th{color:var(--wtds-ink-3,#666);font-weight:var(--wtds-fw-medium,500)}
.wapu-loyalty-level-guide__table tbody th{position:sticky;left:0;z-index:1;min-width:9.5rem;font-weight:var(--wtds-fw-medium,500)}
.wapu-loyalty-level-guide__table thead th:first-child{position:sticky;left:0;z-index:2}
.wapu-loyalty-level-guide__member{display:inline-flex;align-items:center;gap:.55rem}
.wapu-loyalty-level-guide__emoji{display:inline-grid;flex:none;width:1.75rem;height:1.75rem;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--wapu-loyalty-level-color) 10%,white);font-size:1rem;line-height:1}
.wapu-loyalty-level-guide__table .wapu-loyalty-level-guide__empty{color:var(--wtds-ink-3,#777)}

@container (max-width: 32.5rem) {
    .wl-checkout-form__controls {
        align-items: stretch;
        flex-direction: column;
    }

    .wl-checkout-input,
    .wl-checkout-button {
        width: 100%;
    }

    .wl-account-metric {
        padding-inline: .625rem;
    }

    .wl-account-row {
        align-items: flex-start;
    }
}

/* Private My Account benefit-first guide; public shortcodes retain their tables. */
.wapu-loyalty-account .wl-account-benefits { display:grid; gap:var(--wtds-s-3,24px); margin-top:var(--wtds-s-4,32px); min-width:0; }
.wl-account-benefits header h2 { margin:0; font-size:var(--wtds-fs-title-3,20px); color:var(--wtds-ink); }
.wl-account-benefits header p { margin:8px 0 0; color:var(--wtds-ink-3); font-size:var(--wtds-fs-footnote,13px); }
.wl-account-benefits__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--wtds-s-2,16px); }
.wl-account-benefit { min-width:0; padding:var(--wtds-s-2,16px); border-radius:var(--wtds-r-md,16px); background:var(--wtds-surface-2); color:var(--wtds-ink); }
.wl-account-benefit h3 { margin:0 0 16px; font-size:var(--wtds-fs-body,16px); font-weight:var(--wtds-fw-semibold,600); }
.wl-account-benefit__levels { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.wl-account-benefit__level { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:12px; border-radius:var(--wtds-r-sm,12px); }
.wl-account-benefit__level.is-current { background:var(--wtds-surface); box-shadow:inset 3px 0 var(--wtds-info,#2563eb); }
.wl-account-benefit__detail { display:grid; gap:4px; min-width:0; flex:1 1 150px; overflow-wrap:anywhere; }
.wl-account-benefit__value { font-size:var(--wtds-fs-body,16px); font-weight:var(--wtds-fw-semibold,600); }
.wl-account-benefit__name { font-size:var(--wtds-fs-footnote,13px); }
.wl-account-benefit__points { font-size:var(--wtds-fs-caption-1,12px); color:var(--wtds-ink-3); }
.wl-account-benefit__current { font-size:var(--wtds-fs-caption-1,12px); font-weight:var(--wtds-fw-medium,500); color:var(--wtds-info,#2563eb); }
