/* ============================================================================
   LoyalStar — customer visual language (v1.41.0, S4 clean-neutral)
   Design tokens + one unifying surface pattern. Neutral surfaces with ONE
   merchant-configurable accent (--ls-accent, overridden via wp_add_inline_style
   from the accent_color setting). Inherit theme fonts — never force a family.
   ========================================================================== */
:root {
    /* Color roles (6) */
    --ls-paper:      #ffffff;            /* base surface for nested cards */
    --ls-ink:        #18181b;            /* primary text, solid pills */
    --ls-muted:      #71717a;            /* secondary text, metadata */
    --ls-linen:      #fafafa;            /* structural fill, tier chip */
    --ls-linen-line: #ececec;            /* hairline border */
    --ls-sage:       #f0fdf4;            /* positive / earn */
    --ls-sage-ink:   #166534;            /* readable text on/for sage */
    --ls-clay:       var(--ls-accent-light); /* accent tint fill */
    --ls-clay-ink:   var(--ls-accent);   /* accent text */

    /* Merchant accent (overridden via wp_add_inline_style on wp_enqueue_scripts) */
    --ls-accent:       #c2410c;
    --ls-accent-hover: color-mix(in srgb, var(--ls-accent), #ffffff 12%);
    --ls-accent-light: color-mix(in srgb, var(--ls-accent), #ffffff 92%);
    --ls-shadow:       0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04);

    /* Radius */
    --ls-r-sm: 8px;
    --ls-r-md: 12px;
    --ls-r-pill: 9999px;

    /* Spacing (4px grid) */
    --ls-s-2xs: 4px;
    --ls-s-xs:  8px;
    --ls-s-sm:  16px;
    --ls-s-md:  24px;
    --ls-s-lg:  40px;
    --ls-s-xl:  64px;

    /* Type scale (inherit family; set size/weight/tracking only) */
    --ls-fs-display-lg: 2rem;
    --ls-fs-display-md: 1.5rem;
    --ls-fs-body:       0.9375rem;
    --ls-fs-sm:         0.8125rem;
    --ls-fs-label:      0.6875rem;
    --ls-tracking-label: 0.08em;

    /* Elevation — flat by default; only floating overlays lift */
    --ls-shadow-float: 0 8px 30px rgba(26, 26, 23, 0.06);
    --ls-ease-float: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Unifying surface pattern (§B) -----------------------------------------
   Parent = flat Linen frame (no border). Child = Paper inset + hairline.
   Resolves card-in-card: parent never borders, child never shadows. --------- */
.loyalstar__surface {
    background: var(--ls-linen);
    border-radius: var(--ls-r-md);
    padding: var(--ls-s-md);
}
.loyalstar__card {
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    padding: var(--ls-s-sm);
}
/* Typographic lockup shared by every card header */
.loyalstar__kicker {
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
    font-weight: 500;
    margin: 0 0 var(--ls-s-2xs);
}

/* LoyalStar — My Account Dashboard */
.loyalstar { max-width: 800px; }

/* Summary cards */
.loyalstar__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.loyalstar__balance-card,
.loyalstar__tier-card,
.loyalstar__lifetime-card {
    padding: var(--ls-s-md);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    box-shadow: var(--ls-shadow);
    text-align: center;
}
.loyalstar__balance-number,
.loyalstar__lifetime-number {
    font-size: var(--ls-fs-display-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ls-ink);
}
.loyalstar__balance-label {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    margin-top: var(--ls-s-2xs);
}
.loyalstar__balance-value { color: var(--ls-ink); }
.loyalstar__pending {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    margin-top: var(--ls-s-xs);
}

/* Tier badge */
.loyalstar__tier-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--ls-r-pill);
}
.loyalstar__tier--linen { background: var(--ls-linen); border: 1px solid var(--ls-linen-line); color: var(--ls-ink); }
.loyalstar__tier--thread { background: var(--ls-linen); border: 1px solid var(--ls-linen-line); color: var(--ls-ink); }
.loyalstar__tier--weave { background: var(--ls-linen); border: 1px solid var(--ls-linen-line); color: var(--ls-ink); }
.loyalstar__tier--atelier { background: var(--ls-accent-light, #fff7ed); border: 1px solid var(--ls-linen-line); color: var(--ls-accent, #c2410c); }
.loyalstar__tier-multiplier {
    font-size: 0.85rem;
    color: var(--ls-muted);
    margin-top: 0.5rem;
}

/* Progress bar */
.loyalstar__progress-section {
    margin-bottom: var(--ls-s-md);
    padding: var(--ls-s-md);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    box-shadow: var(--ls-shadow);
}
.loyalstar__progress-section h3 {
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
    font-weight: 500;
    margin: 0 0 var(--ls-s-sm);
}
.loyalstar__progress-bar {
    height: 4px;
    background: var(--ls-linen);
    border-radius: var(--ls-r-pill);
    overflow: hidden;
}
.loyalstar__progress-fill {
    height: 100%;
    background: var(--ls-ink);
    border-radius: var(--ls-r-pill);
    transition: width 0.5s var(--ls-ease-float);
}
.loyalstar__progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    margin-top: var(--ls-s-xs);
}
.loyalstar__progress-text {
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
    margin-top: var(--ls-s-sm);
}

/* Tabs */
.loyalstar__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ls-linen-line);
    margin-bottom: var(--ls-s-md);
}
.loyalstar__tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.loyalstar__tab:hover { color: var(--ls-ink); }
.loyalstar__tab.active {
    color: var(--ls-ink);
    border-bottom-color: var(--ls-ink);
    font-weight: 600;
}

/* Panel */
.loyalstar__panel { min-height: 200px; }
.loyalstar__empty {
    text-align: center;
    color: var(--ls-muted);
    padding: 3rem 1rem;
}

/* History table */
.loyalstar__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.loyalstar__table th {
    text-align: left;
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ls-linen-line);
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
}
.loyalstar__table td {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ls-linen);
}
.loyalstar__col-right { text-align: right; }
.loyalstar__points-pos { color: var(--ls-sage-ink); font-weight: 600; }
.loyalstar__points-neg { color: var(--ls-ink); font-weight: 600; }
.loyalstar__badge-pending {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: var(--ls-linen);
    color: var(--ls-clay-ink);
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Pagination */
.loyalstar__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}
.loyalstar__pagination button {
    padding: 0.3rem 0.6rem;
    background: var(--ls-linen);
    border: 1px solid var(--ls-linen-line);
    cursor: pointer;
}
.loyalstar__pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Earn cards */
.loyalstar__earn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ls-s-xs);
    margin-bottom: var(--ls-s-md);
}
.loyalstar__earn-card {
    /* child card */
    padding: var(--ls-s-sm);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    text-align: center;
}
.loyalstar__earn-icon { font-size: 1.5rem; margin-bottom: var(--ls-s-xs); }
.loyalstar__earn-card h4 {
    font-size: var(--ls-fs-body);
    font-weight: 500;
    color: var(--ls-ink);
    margin: 0 0 var(--ls-s-2xs);
}
.loyalstar__earn-card p {
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
    margin: 0;
}
.loyalstar__earn-note {
    font-size: var(--ls-fs-label);
    color: var(--ls-muted);
    margin-top: var(--ls-s-2xs);
}

/* Birthday form */
.loyalstar__birthday-form {
    padding: var(--ls-s-sm);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
}
.loyalstar__birthday-form h4 {
    font-size: var(--ls-fs-sm);
    font-weight: 500;
    color: var(--ls-ink);
    margin: 0 0 var(--ls-s-xs);
}
.loyalstar__birthday-inputs {
    display: flex;
    gap: var(--ls-s-xs);
    align-items: center;
    flex-wrap: wrap;
}
.loyalstar__birthday-inputs select {
    padding: 0.5rem var(--ls-s-xs);
    border: none;
    background: var(--ls-linen);
    border-radius: var(--ls-r-sm);
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
    min-height: 44px;
}

/* Tiers grid */
.loyalstar__tiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ls-s-xs);
}
.loyalstar__tier-card-full {
    /* child card per tier */
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    overflow: hidden;
}
.loyalstar__tier-current {
    /* active tier: thin ink wrap */
    border: 1px solid var(--ls-ink);
    box-shadow: 0 0 0 1px var(--ls-ink);
}
.loyalstar__tier-header {
    padding: var(--ls-s-xs) var(--ls-s-xs);
    text-align: center;
    font-weight: 600;
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    position: relative;
}
/* Tier header chips — neutral for all; atelier (current-tier candidate) uses accent */
.loyalstar__tier-card-full .loyalstar__tier--linen  { background: var(--ls-linen); color: var(--ls-ink); }
.loyalstar__tier-card-full .loyalstar__tier--thread { background: var(--ls-linen); color: var(--ls-ink); }
.loyalstar__tier-card-full .loyalstar__tier--weave  { background: var(--ls-linen); color: var(--ls-ink); }
.loyalstar__tier-card-full .loyalstar__tier--atelier { background: var(--ls-accent-light, #fff7ed); color: var(--ls-accent, #c2410c); }
.loyalstar__tier-you {
    display: block;
    font-size: var(--ls-fs-label);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-top: var(--ls-s-2xs);
    color: var(--ls-muted);
}
.loyalstar__tier-body {
    padding: var(--ls-s-xs);
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
}
.loyalstar__tier-spend {
    font-weight: 500;
    color: var(--ls-ink);
    margin-bottom: var(--ls-s-2xs);
}
.loyalstar__tier-mult,
.loyalstar__tier-birthday {
    color: var(--ls-muted);
    margin-bottom: var(--ls-s-2xs);
}
.loyalstar__tier-perks {
    list-style: none;
    padding: 0;
    margin: var(--ls-s-xs) 0 0;
}
.loyalstar__tier-perks li {
    font-size: var(--ls-fs-label);
    padding: 2px 0;
    color: var(--ls-ink);
}
.loyalstar__tier-perks li::before {
    content: "\2713 ";
    color: var(--ls-sage-ink);
}

/* Referral */
.loyalstar__referral-hero {
    text-align: center;
    padding: var(--ls-s-md);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    margin-bottom: var(--ls-s-sm);
}
.loyalstar__referral-hero h3 {
    font-size: var(--ls-fs-display-md);
    font-weight: 500;
    color: var(--ls-ink);
    margin: 0 0 var(--ls-s-xs);
}
.loyalstar__referral-hero p {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    margin: 0;
}
.loyalstar__referral-link {
    display: flex;
    gap: var(--ls-s-xs);
    margin-bottom: var(--ls-s-sm);
}
.loyalstar__referral-link input {
    flex: 1;
    padding: 0.6rem var(--ls-s-xs);
    border: none;
    background: var(--ls-linen);
    border-radius: var(--ls-r-sm);
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
    min-height: 44px;
}
.loyalstar__referral-stats {
    display: flex;
    gap: var(--ls-s-xs);
    text-align: center;
}
.loyalstar__referral-stats > div {
    flex: 1;
    padding: var(--ls-s-sm);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
}
.loyalstar__referral-stats strong {
    display: block;
    font-size: var(--ls-fs-display-lg);
    font-weight: 600;
    color: var(--ls-ink);
}
.loyalstar__referral-stats span {
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
}

/* Buttons */
.loyalstar__btn {
    padding: 0.5rem var(--ls-s-sm);
    background: var(--ls-ink);
    color: var(--ls-paper);
    border: none;
    border-radius: var(--ls-r-pill);
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: opacity 0.15s;
}
.loyalstar__btn:hover { opacity: 0.82; }
.loyalstar__btn:disabled { opacity: 0.45; cursor: default; }
.loyalstar__btn-link {
    background: none;
    border: none;
    color: var(--ls-ink);
    text-decoration: underline;
    font-size: var(--ls-fs-sm);
    cursor: pointer;
}

/* Checkout widget */
.loyalstar-checkout-widget { margin-bottom: 1.5rem; }
.loyalstar__checkout-box {
    padding: 1rem 1.25rem;
    border: 1px solid var(--ls-linen-line);
    background: var(--ls-paper);
    border-radius: var(--ls-r-sm);
}
.loyalstar__checkout-box h4 {
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}
.loyalstar__checkout-box p {
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
    color: var(--ls-muted);
}
.loyalstar__checkout-input {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.loyalstar__checkout-input input {
    width: 100px;
    padding: 0.4rem;
    border: 1px solid var(--ls-linen-line);
    font-size: 0.85rem;
}
.loyalstar__checkout-value {
    font-size: 0.85rem;
    color: var(--ls-sage-ink);
    font-weight: 500;
}
.loyalstar__checkout-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.loyalstar__checkout-applied {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--ls-sage-ink);
}

/* Mobile */
@media (max-width: 640px) {
    .loyalstar__summary { grid-template-columns: 1fr; }
    .loyalstar__earn-grid { grid-template-columns: 1fr; }
    .loyalstar__tiers-grid { grid-template-columns: repeat(2, 1fr); }
    .loyalstar__tabs { overflow-x: auto; }
    .loyalstar__tab { white-space: nowrap; font-size: 0.8rem; padding: 0.6rem 0.75rem; }
    .loyalstar__referral-stats { flex-direction: column; gap: 0.75rem; }
}

/* === Alpine x-cloak (hide until Alpine hydrates) === */
[x-cloak] { display: none !important; }

/* === Earn messages (product + cart pages) === */
.loyalstar-earn-msg {
    font-size: var(--ls-fs-sm);
    color: var(--ls-ink);
    margin: var(--ls-s-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--ls-s-2xs);
    flex-wrap: wrap;
}
.loyalstar-earn-msg a { color: var(--ls-ink); text-decoration: underline; }
.loyalstar-earn-msg a:hover { opacity: 0.7; }

/* Cart nudge — slim sage strip, no icons */
.loyalstar-earn-msg--cart {
    padding: var(--ls-s-xs) var(--ls-s-sm);
    background: var(--ls-sage);
    border: none;
    border-radius: var(--ls-r-sm);
    margin-bottom: var(--ls-s-xs);
    color: var(--ls-ink);
}

/* Phase 2 — cart nudge variants: all get the sage strip */
.loyalstar-earn-msg--cart-far,
.loyalstar-earn-msg--cart-close,
.loyalstar-earn-msg--cart-crosses {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ls-s-2xs);
    background: var(--ls-sage);
    border: none;
    color: var(--ls-ink);
}
.loyalstar-earn-msg__standard,
.loyalstar-earn-msg__nudge,
.loyalstar-earn-msg__tier {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ls-s-2xs);
    flex-wrap: wrap;
}
.loyalstar-earn-msg__nudge {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
}
.loyalstar-earn-msg--cart-close .loyalstar-earn-msg__tier,
.loyalstar-earn-msg--cart-crosses .loyalstar-earn-msg__tier {
    font-weight: 600;
}

/* Phase 3 — "Get there faster" dashboard recommendations */
.loyalstar__recs {
    /* parent surface */
    background: var(--ls-linen);
    border-radius: var(--ls-r-md);
    padding: var(--ls-s-md);
    margin: var(--ls-s-md) 0;
    border: none;
}
.loyalstar__recs h3 {
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: var(--ls-muted);
    font-weight: 500;
    margin: 0 0 var(--ls-s-sm);
}
.loyalstar__recs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ls-s-xs);
}
.loyalstar__recs-pick {
    /* child card */
    display: flex;
    flex-direction: column;
    padding: var(--ls-s-xs);
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    text-decoration: none;
    color: var(--ls-ink);
    transition: background 0.3s var(--ls-ease-float);
    position: relative; /* for points overlay */
}
.loyalstar__recs-pick:hover { background: var(--ls-linen); }
.loyalstar__recs-img-wrap {
    position: relative;
    margin-bottom: var(--ls-s-xs);
}
.loyalstar__recs-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ls-r-sm);
    display: block;
}
/* "+N pts" sage pill overlay */
.loyalstar__recs-pts {
    position: absolute;
    top: var(--ls-s-2xs);
    right: var(--ls-s-2xs);
    background: var(--ls-sage);
    color: var(--ls-ink);
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    font-weight: 500;
    padding: 2px var(--ls-s-xs);
    border-radius: var(--ls-r-pill);
    white-space: nowrap;
    text-transform: uppercase;
}
.loyalstar__recs-name {
    font-size: var(--ls-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ls-ink);
    margin-bottom: var(--ls-s-2xs);
}
.loyalstar__recs-price {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
}
.loyalstar__recs-badge {
    margin-top: var(--ls-s-xs);
    font-size: var(--ls-fs-label);
    color: var(--ls-sage-ink);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-tracking-label);
}

/* Phase 3 — launcher footer slot */
.loyalstar-launcher__recs {
    display: flex;
    align-items: center;
    gap: var(--ls-s-xs);
    margin: var(--ls-s-xs) 0;
    padding: var(--ls-s-xs);
    background: var(--ls-linen);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
    text-decoration: none;
    color: var(--ls-ink);
    transition: background 0.2s var(--ls-ease-float);
}
.loyalstar-launcher__recs:hover { background: #ece9e1; }
.loyalstar-launcher__recs-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--ls-r-sm);
    flex-shrink: 0;
}
.loyalstar-launcher__recs-body {
    font-size: var(--ls-fs-sm);
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.loyalstar-launcher__recs-headline {
    font-weight: 500;
    color: var(--ls-ink);
    margin-bottom: 0.15rem;
}
.loyalstar-launcher__recs-pick {
    color: var(--ls-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Shortcodes === */
.loyalstar-sc--balance { font-weight: 600; }
.loyalstar-sc--tier {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.loyalstar-sc--guest { color: var(--ls-muted); font-size: 0.85rem; }

/* === Floating launcher widget === */
/* Desktop + mobile: typographic pill, bottom-right. Kill the vertical edge-tab. */
.loyalstar-launcher {
    position: fixed;
    bottom: calc(var(--ls-s-sm) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--ls-s-sm) + env(safe-area-inset-right, 0px));
    z-index: 9999;
}
.loyalstar-launcher--left {
    right: auto;
    left: calc(var(--ls-s-sm) + env(safe-area-inset-left, 0px));
}

/* Pill handle — horizontal, ink, tracked label, no icons */
.loyalstar-launcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--ls-s-sm);
    background: var(--ls-ink);
    color: var(--ls-paper);
    border: none;
    border-radius: var(--ls-r-pill);
    font-size: var(--ls-fs-label);
    font-weight: 500;
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    box-shadow: var(--ls-shadow-float);
    transition: opacity 0.15s var(--ls-ease-float);
    /* Reset vertical writing */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}
.loyalstar-launcher__btn:hover { opacity: 0.82; }
.loyalstar-launcher__btn.active { opacity: 0.75; }
/* Hide SVG icon — typographic pill relies on label only */
.loyalstar-launcher__btn svg { display: none; }

/* Panel — Paper + shadow-float + radius-md, slides up from button */
.loyalstar-launcher__panel {
    display: none;
    position: absolute;
    bottom: calc(100% + var(--ls-s-xs));
    right: 0;
    width: min(290px, calc(100vw - 2 * var(--ls-s-sm)));
    background: var(--ls-paper);
    border-radius: var(--ls-r-md);
    box-shadow: var(--ls-shadow-float);
    padding: var(--ls-s-md);
    font-size: var(--ls-fs-sm);
    border: 1px solid var(--ls-linen-line);
}
.loyalstar-launcher--left .loyalstar-launcher__panel { right: auto; left: 0; }
.loyalstar-launcher__panel--open { display: block; }

.loyalstar-launcher__header {
    font-size: var(--ls-fs-display-md);
    font-weight: 500;
    color: var(--ls-ink);
    margin-bottom: var(--ls-s-xs);
}
.loyalstar-launcher__balance {
    margin-bottom: var(--ls-s-xs);
    color: var(--ls-ink);
}
.loyalstar-launcher__balance strong {
    font-size: var(--ls-fs-display-md);
    font-weight: 600;
    color: var(--ls-ink);
}
.loyalstar-launcher__balance-val {
    font-size: var(--ls-fs-label);
    color: var(--ls-muted);
}
.loyalstar-launcher__tier {
    display: flex;
    align-items: center;
    gap: var(--ls-s-xs);
    margin-bottom: var(--ls-s-xs);
}
.loyalstar-launcher__tier .loyalstar__tier-badge {
    font-size: var(--ls-fs-label);
    padding: 2px var(--ls-s-xs);
}
.loyalstar-launcher__mult {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
}
.loyalstar-launcher__progress { margin-bottom: var(--ls-s-xs); }
.loyalstar-launcher__progress small {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    display: block;
    margin-top: var(--ls-s-2xs);
}
.loyalstar-launcher__link {
    display: block;
    text-align: center;
    padding: var(--ls-s-xs) 0 0;
    border-top: 1px solid var(--ls-linen-line);
    margin-top: var(--ls-s-xs);
    color: var(--ls-ink);
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}
.loyalstar-launcher__link:hover { opacity: 0.7; }
.loyalstar-launcher__desc {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
    margin: 0 0 var(--ls-s-sm);
    line-height: 1.5;
}
.loyalstar-launcher__join {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Phase 7 — Streak card (child-card + dot-array polish) */
.loyalstar-streak-card {
    /* child card */
    display: flex;
    align-items: center;
    gap: var(--ls-s-sm);
    padding: var(--ls-s-sm) var(--ls-s-md);
    margin: var(--ls-s-xs) 0;
    background: var(--ls-paper);
    border: 1px solid var(--ls-linen-line);
    border-radius: var(--ls-r-sm);
}
.loyalstar-streak-card--warning {
    /* keep same card; border hint */
    border-color: var(--ls-accent);
}
.loyalstar-streak-card--visit {
    border-color: var(--ls-linen-line);
}
/* Hide emoji icon in favor of dot-array */
.loyalstar-streak-card__icon { display: none; }
.loyalstar-streak-card__body {
    flex: 1;
    min-width: 0;
}
.loyalstar-streak-card__label {
    font-size: var(--ls-fs-display-md);
    font-weight: 500;
    color: var(--ls-ink);
    margin-bottom: var(--ls-s-2xs);
}
.loyalstar-streak-card__next {
    font-size: var(--ls-fs-sm);
    color: var(--ls-muted);
}
.loyalstar-streak-card__warning {
    font-size: var(--ls-fs-sm);
    color: var(--ls-clay-ink);
    font-weight: 500;
    margin-top: var(--ls-s-2xs);
}

/* Dot-array (horizontal spans injected by loyalty.php) */
.loyalstar-streak-card__dots {
    display: flex;
    align-items: center;
    gap: var(--ls-s-2xs);
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 120px;
}
.loyalstar-streak-card__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ls-r-pill);
    background: var(--ls-linen-line);
}
.loyalstar-streak-card__dot--done  { background: var(--ls-ink); }
.loyalstar-streak-card__dot--current {
    background: var(--ls-sage);
    /* pulse animation */
    animation: ls-pulse 2s ease-in-out infinite;
}
.loyalstar-streak-card__dot--warn {
    background: var(--ls-accent);
    animation: ls-pulse 1.2s ease-in-out infinite;
}
@keyframes ls-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    .loyalstar-streak-card__dot--current,
    .loyalstar-streak-card__dot--warn { animation: none; }
}

/* Phase 9 — Surprise multiplier banner (solid Accent fill + Paper text) */
.loyalstar-boost-banner {
    display: flex;
    align-items: center;
    gap: var(--ls-s-sm);
    padding: var(--ls-s-sm) var(--ls-s-md);
    margin: var(--ls-s-xs) 0;
    background: var(--ls-accent);
    border: none;
    border-radius: var(--ls-r-sm);
    /* no gradient, no icon-heavy color */
}
.loyalstar-boost-banner--urgent {
    /* accent with slight darkening */
    background: color-mix(in srgb, var(--ls-accent), #000000 12%);
}
/* Hide emoji icon — spec: solid clay fill, tracked uppercase text only */
.loyalstar-boost-banner__icon { display: none; }
.loyalstar-boost-banner__body {
    flex: 1;
    min-width: 0;
}
.loyalstar-boost-banner__title {
    font-size: var(--ls-fs-body);
    font-weight: 600;
    color: var(--ls-paper);
    margin-bottom: var(--ls-s-2xs);
    display: flex;
    align-items: baseline;
    gap: var(--ls-s-xs);
    flex-wrap: wrap;
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
}
.loyalstar-boost-banner__multiplier {
    font-size: var(--ls-fs-display-md);
    font-weight: 700;
    color: var(--ls-paper);
    letter-spacing: -0.02em;
    text-transform: none;
}
.loyalstar-boost-banner__copy {
    font-size: var(--ls-fs-sm);
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
}
/* Countdown digits in monospace for stability */
.loyalstar-boost-banner__countdown {
    text-align: center;
    flex-shrink: 0;
    padding-left: var(--ls-s-sm);
    border-left: 1px solid rgba(255,255,255,0.3);
    min-width: 90px;
}
.loyalstar-boost-banner__countdown-value {
    font-family: ui-monospace, monospace;
    font-size: var(--ls-fs-display-md);
    font-weight: 600;
    color: var(--ls-paper);
    font-variant-numeric: tabular-nums;
}
.loyalstar-boost-banner__countdown-label {
    font-size: var(--ls-fs-label);
    letter-spacing: var(--ls-tracking-label);
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-top: var(--ls-s-2xs);
}
@media (max-width: 520px) {
    .loyalstar-boost-banner {
        flex-direction: column;
        text-align: center;
        gap: var(--ls-s-xs);
        padding: var(--ls-s-sm);
    }
    .loyalstar-boost-banner__countdown {
        padding-left: 0;
        border-left: none;
        padding-top: var(--ls-s-xs);
        border-top: 1px solid rgba(255,255,255,0.3);
        width: 100%;
    }
    .loyalstar-boost-banner__title { justify-content: center; }
}