/* =========================================================================
   LETS — the shopper's personal area.  CANONICAL SOURCE.
   bin/build-plugin.sh copies this verbatim into the WordPress plugin and
   HARD-FAILS if the two drift. Never edit the plugin's copy.

   TOKENS
   Every colour, radius, spacing and size literal is a --la-* custom property
   declared once in the token block below. Components consume the vars through
   classes and never re-declare a token. Two things are deliberate:

   1. Tokens live on the block roots (.lets-acct, .lets-shell, .la-nav), NOT
      :root. This CSS sits inside somebody else's theme; a token on :root would
      leak into their buttons. The shell and the nav carry the same block
      because they wrap WooCommerce's own markup, which we re-skin below.
   2. TYPE IS THE SHOP'S BY DEFAULT. Rendering natively instead of in an iframe
      is what lets the area inherit the merchant's own typography, so it belongs
      to their shop rather than looking like a widget bolted onto it — and that
      stays the default and the recommendation. The ONLY font declarations in
      this file sit behind `[data-font='heebo']` and `[data-font='system']`, for
      the merchant who asked; `theme`, the default, has no rule at all. Never
      add a font declaration outside that opt-in.

   Continuous values (accent, radius) arrive as custom properties written by
   the renderer (mount) or by wp_add_inline_style (shell). Enum values (theme,
   density, card) arrive as data-* attributes the stylesheet selects on — the
   same split lets-ppu.css uses.

   RTL comes from logical properties throughout (inline-start/end, margin-inline),
   so there is no mirrored stylesheet to keep in sync.

   THE PAGE IS A TAKEOVER. My Account is not a widget dropped into a theme
   column: the plugin renders its own shell, its own navigation and its own
   width, and WooCommerce's own screens (orders, addresses, account details)
   are re-skinned with the same tokens at the end of this file. Their MARKUP
   and their BEHAVIOUR stay WooCommerce's — reimplementing address validation
   and password changes would be risk for no gain — but nothing on the page is
   left looking like a different product.
   ========================================================================= */

.lets-acct,
.lets-shell,
.la-nav {
    /* Surfaces */
    --la-bg: transparent;
    --la-card: #ffffff;
    --la-card-2: #f7f8fa;
    --la-border: #e6e8ec;
    --la-border-strong: #d3d7de;

    /* Ink */
    --la-fg: #101828;
    --la-muted: #667085;
    --la-faint: #98a2b3;

    /* Brand — overwritten by the renderer (mount) and by the shell's tokens */
    --la-accent: #101828;
    --la-accent-fg: #ffffff;
    --la-accent-soft: rgba(16, 24, 40, 0.08);

    /* Status */
    --la-ok: #047857;
    --la-ok-soft: #ecfdf5;
    --la-warn: #b45309;
    --la-warn-soft: #fffbeb;
    --la-stop: #b91c1c;
    --la-stop-soft: #fef2f2;
    --la-calm: #1d4ed8;
    --la-calm-soft: #eff6ff;

    /* Shape + rhythm. The area breathes: a personal area a shopper opens once
       a month should read like a statement, not like a settings table. */
    --la-radius: 16px;
    --la-radius-sm: 10px;
    --la-gap: 24px;
    --la-pad: 28px;
    --la-rail: 340px;
    --la-nav-w: 268px;

    --la-shadow: none;
    --la-ring: 0 0 0 3px var(--la-accent-soft);

    color: var(--la-fg);
    /* font-family is INHERITED on purpose — see the header. */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.lets-acct {
    background: var(--la-bg);
}

/* --- Typeface -----------------------------------------------------------
   The DEFAULT is still no font-family at all: the area inherits the shop's
   type, which is what makes it read as part of the shop rather than as a
   widget inside it. `data-font` exists for the merchant whose theme font
   cannot carry a page of numbers and Hebrew labels — and it is opt-in, so a
   shop that never opens the setting is byte-for-byte what it was.

   The value is set on the three block roots, and inherits from there; the
   webfont itself is only fetched when heebo is the choice.
   ----------------------------------------------------------------------- */

.lets-acct[data-font='heebo'],
.lets-shell[data-font='heebo'],
.la-nav[data-font='heebo'] {
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.lets-acct[data-font='system'],
.lets-shell[data-font='system'],
.la-nav[data-font='system'] {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* WooCommerce's own screens sit inside the shell, so they follow the choice
   too — otherwise a merchant who picked a font would get it on half a page. */
.lets-shell[data-font='heebo'] input,
.lets-shell[data-font='heebo'] select,
.lets-shell[data-font='heebo'] textarea,
.lets-shell[data-font='heebo'] button,
.lets-shell[data-font='system'] input,
.lets-shell[data-font='system'] select,
.lets-shell[data-font='system'] textarea,
.lets-shell[data-font='system'] button {
    font-family: inherit;
}

/* --- The theme's link rules stop at our door ----------------------------
   A theme that underlines every anchor underlines our navigation, our order
   numbers and our banners with it, and its link colour turns them pink. Our
   own rules said `text-decoration: none` already and lost — not on
   specificity but on ORDER: a theme stylesheet enqueued after ours wins a tie.
   Doubling the block class buys one class of specificity, which settles it
   without reaching for !important and without touching anything outside the
   page we own.

   Only the DECORATION is claimed here. Colour stays with the components, so
   `.la-btn--danger` and the rest keep deciding what they look like.
   ----------------------------------------------------------------------- */

.lets-acct.lets-acct a,
.lets-shell.lets-shell a,
.la-nav.la-nav a {
    text-decoration: none;
}

.lets-acct.lets-acct a:hover,
.lets-shell.lets-shell a:hover,
.la-nav.la-nav a:hover {
    text-decoration: none;
}

/* --- Theme ------------------------------------------------------------- */

.lets-acct[data-theme='dark'],
.lets-shell[data-theme='dark'],
.la-nav[data-theme='dark'] {
    --la-card: #111827;
    --la-card-2: #0e1626;
    --la-border: #1f2937;
    --la-border-strong: #374151;
    --la-fg: #f3f4f6;
    --la-muted: #9ca3af;
    --la-faint: #6b7280;
    --la-ok-soft: rgba(4, 120, 87, 0.16);
    --la-warn-soft: rgba(180, 83, 9, 0.16);
    --la-stop-soft: rgba(185, 28, 28, 0.16);
    --la-calm-soft: rgba(29, 78, 216, 0.16);
}

/* "Follow the shopper's device" — the merchant chose not to choose. */
@media (prefers-color-scheme: dark) {
    .lets-acct[data-theme='auto'],
    .lets-shell[data-theme='auto'],
    .la-nav[data-theme='auto'] {
        --la-card: #111827;
        --la-card-2: #0e1626;
        --la-border: #1f2937;
        --la-border-strong: #374151;
        --la-fg: #f3f4f6;
        --la-muted: #9ca3af;
        --la-faint: #6b7280;
        --la-ok-soft: rgba(4, 120, 87, 0.16);
        --la-warn-soft: rgba(180, 83, 9, 0.16);
        --la-stop-soft: rgba(185, 28, 28, 0.16);
        --la-calm-soft: rgba(29, 78, 216, 0.16);
    }
}

/* --- Density + card style ---------------------------------------------- */

.lets-acct[data-density='compact'],
.lets-shell[data-density='compact'],
.la-nav[data-density='compact'] {
    --la-gap: 16px;
    --la-pad: 18px;
}

.lets-acct[data-card='flat'] {
    --la-card: transparent;
    --la-border: transparent;
}

.lets-acct[data-card='raised'],
.lets-shell[data-card='raised'],
.la-nav[data-card='raised'] {
    --la-border: transparent;
    --la-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.08);
}

/* =========================================================================
   Layout — one hero, then main + rail
   ========================================================================= */

.lets-acct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--la-gap);
    align-items: start;
}

/* The rail appears only when there is room for it AND something to put in it —
   an empty 340px column is worse than no column. */
@media (min-width: 1080px) {
    .lets-acct__grid.has-rail {
        grid-template-columns: minmax(0, 1fr) var(--la-rail);
    }
}

.lets-acct__main,
.lets-acct__rail {
    display: flex;
    flex-direction: column;
    gap: var(--la-gap);
    min-width: 0;
}

/* =========================================================================
   Primitives
   ========================================================================= */

.la-card {
    background: var(--la-card);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
    padding: var(--la-pad);
}

/* A titled group that is NOT itself a card — its children are. */
.la-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.la-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
}

.la-block > .la-section__head {
    margin-block-end: 0;
}

.la-section__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.la-block > .la-section__head .la-section__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--la-muted);
}

.la-section__aside {
    font-size: 0.8125rem;
    color: var(--la-muted);
}

.la-muted {
    color: var(--la-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.la-empty {
    color: var(--la-muted);
    font-size: 0.9375rem;
    margin: 0;
    padding: 6px 0;
}

/* Numbers, ids and dates read left-to-right even inside an RTL page. */
.la-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* --- Buttons ----------------------------------------------------------- */

.la-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: var(--la-radius-sm);
    border: 1px solid var(--la-border-strong);
    background: var(--la-card);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.la-btn:hover:not(:disabled) {
    background: var(--la-card-2);
    border-color: var(--la-border-strong);
}

.la-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.la-btn:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
}

.la-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.la-btn--primary {
    background: var(--la-accent);
    border-color: var(--la-accent);
    color: var(--la-accent-fg);
}

.la-btn--primary:hover:not(:disabled) {
    background: var(--la-accent);
    border-color: var(--la-accent);
    opacity: 0.9;
}

/* Cancel is destructive and irreversible. It reads as a link, not a button,
   so it never sits at the same visual weight as "skip this month". */
.la-btn--quiet {
    border-color: transparent;
    background: transparent;
    padding-inline: 10px;
    color: var(--la-muted);
    font-weight: 500;
}

.la-btn--danger {
    border-color: transparent;
    background: transparent;
    padding-inline: 10px;
    color: var(--la-stop);
    font-weight: 500;
}

.la-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: 20px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--la-border);
}

.la-actions__spacer {
    flex: 1 1 auto;
}

/* --- Badges ------------------------------------------------------------ */

.la-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.la-badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
}

.la-badge[data-tone='active'] { color: var(--la-ok);   background: var(--la-ok-soft); }
.la-badge[data-tone='paused'] { color: var(--la-warn); background: var(--la-warn-soft); }
.la-badge[data-tone='attention'] { color: var(--la-stop); background: var(--la-stop-soft); }
.la-badge[data-tone='ended']  { color: var(--la-muted); background: var(--la-card-2); }

/* =========================================================================
   Hero — the greeting plus the three numbers a shopper came to check
   ========================================================================= */

.la-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--la-gap);
    padding-block-end: 4px;
}

.la-hero__text {
    min-width: 0;
    flex: 1 1 320px;
}

.la-welcome__title {
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.la-hero .la-muted {
    font-size: 1rem;
    max-inline-size: 52ch;
}

/* The stat strip. Every value here is a number the SERVER sent — nothing is
   derived in the browser, so the strip can never disagree with the cards. */
.la-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    flex: 1 1 320px;
}

.la-stat {
    padding: 14px 18px;
    border-radius: var(--la-radius-sm);
    background: var(--la-card);
    border: 1px solid var(--la-border);
    box-shadow: var(--la-shadow);
    min-width: 0;
}

.la-stat__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--la-muted);
    margin-block-end: 4px;
}

.la-stat__value {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* =========================================================================
   Subscription card
   ========================================================================= */

.la-subs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.la-sub {
    position: relative;
    overflow: hidden;
}

/* A hairline of the merchant's brand along the top of every live plan. The
   ended ones stay grey — the accent means "this is running". */
.la-sub::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--la-accent);
}

.la-sub[data-tone='ended']::before { background: var(--la-border); }
.la-sub[data-tone='paused']::before { background: var(--la-warn); }
.la-sub[data-tone='attention']::before { background: var(--la-stop); }

.la-sub__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.la-sub__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.la-sub__id {
    font-size: 0.75rem;
    color: var(--la-faint);
}

.la-sub__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-block-start: 12px;
    flex-wrap: wrap;
}

.la-sub__amount {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* The pre-discount price, struck through — a shopper on an intro rate should
   be able to see what they are actually saving. */
.la-sub__was {
    font-size: 1rem;
    color: var(--la-faint);
    text-decoration: line-through;
}

.la-sub__cadence {
    font-size: 0.9375rem;
    color: var(--la-muted);
}

.la-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-block-start: 20px;
}

.la-fact {
    padding: 12px 14px;
    border-radius: var(--la-radius-sm);
    background: var(--la-card-2);
    min-width: 0;
}

.la-fact__label {
    display: block;
    font-size: 0.75rem;
    color: var(--la-muted);
    margin-block-end: 3px;
}

.la-fact__value {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* --- Progress (installments + intro window) ---------------------------- */

.la-progress {
    margin-block-start: 20px;
}

.la-progress__bar {
    block-size: 8px;
    border-radius: 999px;
    background: var(--la-card-2);
    border: 1px solid var(--la-border);
    overflow: hidden;
}

.la-progress__fill {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    background: var(--la-accent);
    transition: inline-size 0.4s ease;
}

.la-progress__label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--la-muted);
    margin-block-start: 8px;
}

/* --- Queued next-order contents ---------------------------------------- */

.la-queued {
    margin-block-start: 16px;
    padding: 14px 16px;
    border-radius: var(--la-radius-sm);
    background: var(--la-calm-soft);
    font-size: 0.9375rem;
}

.la-queued__title {
    font-weight: 600;
    margin: 0 0 4px;
}

.la-queued .la-muted {
    font-size: 0.875rem;
}

/* --- Card on file ------------------------------------------------------ */

.la-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--la-fg);
}

.la-card-chip__brand {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid var(--la-border-strong);
    background: var(--la-card);
    color: var(--la-fg);
}

/* --- Payments table ---------------------------------------------------- */

.la-payments {
    margin-block-start: 18px;
    border-block-start: 1px solid var(--la-border);
    padding-block-start: 16px;
}

.la-payments summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--la-muted);
    list-style-position: inside;
}

.la-payments summary:hover {
    color: var(--la-fg);
}

.la-payments summary:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
    border-radius: 4px;
}

/* Any table can overflow a narrow column; it scrolls inside itself so the page
   body never scrolls sideways. */
.la-table-wrap {
    overflow-x: auto;
    margin-block-start: 12px;
}

.la-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.la-table th,
.la-table td {
    text-align: start;
    padding: 10px 12px;
    border-block-end: 1px solid var(--la-border);
    white-space: nowrap;
}

.la-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--la-muted);
}

.la-table tr:last-child td {
    border-block-end: 0;
}

/* =========================================================================
   Benefit timeline — "what's next"
   ========================================================================= */

.la-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.la-tl {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-block-end: 1px solid var(--la-border);
}

.la-tl:first-child { padding-block-start: 0; }

.la-tl:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

/* The date rail. Fixed width so the labels align into a readable column even
   when one entry has no date at all. */
.la-tl__when {
    flex: 0 0 74px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    padding-block-start: 1px;
}

.la-tl__when small {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--la-muted);
}

/* An undated row says so rather than borrowing the row above's date. */
.la-tl__when--none {
    color: var(--la-faint);
    font-weight: 500;
}

.la-tl__dot {
    flex: 0 0 auto;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    margin-block-start: 6px;
    background: var(--la-calm);
    box-shadow: 0 0 0 4px var(--la-calm-soft);
}

.la-tl[data-tone='good'] .la-tl__dot { background: var(--la-ok); box-shadow: 0 0 0 4px var(--la-ok-soft); }
.la-tl[data-tone='warn'] .la-tl__dot { background: var(--la-warn); box-shadow: 0 0 0 4px var(--la-warn-soft); }

.la-tl__body { min-width: 0; }

.la-tl__label {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.la-tl__meta {
    font-size: 0.8125rem;
    color: var(--la-muted);
    margin: 2px 0 0;
}

/* =========================================================================
   Loyalty card
   ========================================================================= */

.la-loyalty {
    background: linear-gradient(140deg, var(--la-accent), color-mix(in srgb, var(--la-accent) 68%, #000));
    color: var(--la-accent-fg);
    border: 0;
}

.la-loyalty .la-section__title,
.la-loyalty .la-section__aside {
    color: inherit;
}

.la-loyalty__points {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.la-loyalty__worth {
    font-size: 0.875rem;
    opacity: 0.85;
}

.la-loyalty__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.875rem;
}

/* =========================================================================
   Support
   ========================================================================= */

.la-support__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* =========================================================================
   Side rail banners
   ========================================================================= */

.la-banner {
    display: block;
    border-radius: var(--la-radius);
    border: 1px solid var(--la-border);
    background: var(--la-card);
    box-shadow: var(--la-shadow);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.la-banner:hover {
    border-color: var(--la-border-strong);
    transform: translateY(-2px);
}

a.la-banner:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
}

.la-banner__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
}

.la-banner__body {
    padding: 16px var(--la-pad);
}

.la-banner__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
}

.la-banner__subtext {
    font-size: 0.8125rem;
    color: var(--la-muted);
    margin: 4px 0 0;
}

/* =========================================================================
   Top banners — the same banner, full width, above the two columns

   Nothing here restyles the banner: it is the rail card laid on its side, so
   the two placements cannot drift into two designs. Direction is left to the
   page — a flex row follows the writing direction, so the image leads on the
   right in Hebrew and on the left in English without a single LTR rule.
   ========================================================================= */

.la-topbanners {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block: var(--la-gap);
}

.la-banner--top {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.la-banner--top .la-banner__body {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-inline-size: 0;
}

.la-banner--top .la-banner__heading {
    font-size: 1.0625rem;
}

.la-banner--top .la-banner__subtext {
    font-size: 0.875rem;
}

/* The image spans the full width at every size, with the text beneath it —
   the base .la-banner__img rule (inline-size: 100%, block-size: auto) already
   says exactly that, so there is no wide-screen override to make. It used to
   take a third of the row and crop; a top banner is an announcement, and an
   announcement's picture is not a thumbnail beside the words. */

/* =========================================================================
   Sign-in prompt (logged out)
   ========================================================================= */

.la-signin {
    text-align: center;
    padding: 48px var(--la-pad);
}

.la-signin__text {
    font-size: 1.0625rem;
    margin: 0 0 16px;
}

/* =========================================================================
   Inline editors (date picker, item rows) — revealed in place, never a modal:
   a dialog inside somebody else's theme fights their z-index and their scroll.
   ========================================================================= */

.la-editor {
    margin-block-start: 16px;
    padding: 16px;
    border-radius: var(--la-radius-sm);
    background: var(--la-card-2);
    border: 1px solid var(--la-border);
}

.la-editor[hidden] {
    display: none;
}

.la-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
}

.la-field__label {
    font-weight: 600;
    color: var(--la-muted);
}

.la-input {
    font: inherit;
    font-size: 0.9375rem;
    padding: 11px 13px;
    border-radius: var(--la-radius-sm);
    border: 1px solid var(--la-border-strong);
    background: var(--la-card);
    color: inherit;
    inline-size: 100%;
    max-inline-size: 280px;
}

.la-input:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
    border-color: var(--la-accent);
}

.la-editor__actions {
    display: flex;
    gap: 8px;
    margin-block-start: 14px;
}

/* --- Item rows --------------------------------------------------------- */

.la-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-block-end: 1px solid var(--la-border);
    font-size: 0.875rem;
}

.la-item-row:last-of-type {
    border-block-end: 0;
}

.la-qty {
    inline-size: 72px;
    max-inline-size: 72px;
}

/* =========================================================================
   Feedback
   ========================================================================= */

.la-toast {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--la-fg);
    color: var(--la-card);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22);
}

.la-toast[data-tone='bad'] {
    background: var(--la-stop);
    color: #ffffff;
}

/* The whole area dims while a verb is in flight, so a shopper cannot fire two
   cancels at a subscription while the first is still travelling. */
.lets-acct.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Skeleton ---------------------------------------------------------- */

.la-skeleton {
    border-radius: var(--la-radius);
    background: linear-gradient(90deg, var(--la-card-2) 25%, var(--la-border) 37%, var(--la-card-2) 63%);
    background-size: 400% 100%;
    animation: la-shimmer 1.3s ease-in-out infinite;
    block-size: 132px;
}

@keyframes la-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .la-skeleton { animation: none; }
    .la-progress__fill,
    .la-banner,
    .la-btn { transition: none; }
    a.la-banner:hover { transform: none; }
}

/* =========================================================================
   Preview mode — the admin's iframe. Every control is inert; a merchant
   dragging a colour picker must not be able to cancel a sample subscription.
   ========================================================================= */

.lets-acct[data-preview] .la-btn {
    pointer-events: none;
}

/* =========================================================================
   THE SHELL — our own My Account page.

   `templates/myaccount/my-account.php` wraps the whole screen in .lets-shell
   and `lets-account-shell.js` measures how much room the theme actually gave
   it, writing --la-shell-w / --la-shell-pull when the page deserves more. The
   defaults below are inert, so a theme we cannot measure simply keeps its own
   width instead of overflowing.
   ========================================================================= */

.lets-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    inline-size: var(--la-shell-w, auto);
    max-inline-size: none;
    margin-inline-start: var(--la-shell-pull, 0px);
}

@media (min-width: 900px) {
    .lets-shell {
        grid-template-columns: var(--la-nav-w) minmax(0, 1fr);
    }
}

/* WooCommerce's own containers stop deciding the width — the shell decides. */
.lets-shell .woocommerce-MyAccount-navigation,
.lets-shell .woocommerce-MyAccount-content {
    inline-size: auto;
    max-inline-size: none;
    float: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lets-shell .woocommerce-MyAccount-content::after {
    content: '';
    display: table;
    clear: both;
}

/* --- Our navigation ---------------------------------------------------- */

.la-nav {
    min-width: 0;
}

@media (min-width: 900px) {
    .la-nav__inner {
        position: sticky;
        inset-block-start: 24px;
        border: 1px solid var(--la-border);
        border-radius: var(--la-radius);
        background: var(--la-card);
        box-shadow: var(--la-shadow);
        padding: 14px;
    }
}

/* Who is signed in. On a shared machine this is the first thing worth being
   sure of, and it is the line the theme's own header rarely shows. */
.la-nav__me {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 16px;
    margin-block-end: 10px;
    border-block-end: 1px solid var(--la-border);
    min-width: 0;
}

@media (min-width: 900px) {
    .la-nav__me { display: flex; }
}

.la-nav__avatar {
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--la-accent);
    color: var(--la-accent-fg);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.la-nav__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.la-nav__name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.la-nav__email {
    font-size: 0.75rem;
    color: var(--la-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.la-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    /* Mobile: one scrollable strip of pills instead of a stack that pushes the
       content a screen and a half down. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.la-nav ul::-webkit-scrollbar {
    display: none;
}

@media (min-width: 900px) {
    .la-nav ul {
        flex-direction: column;
        overflow: visible;
    }
}

.la-nav li {
    margin: 0;
    list-style: none;
    flex: 0 0 auto;
}

.la-nav li::before,
.la-nav li::marker {
    content: none;
}

.la-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--la-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--la-fg);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.la-nav a:hover {
    background: var(--la-card-2);
}

.la-nav a:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
}

.la-nav__icon {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    color: var(--la-muted);
}

.la-nav__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.la-nav li.is-active > a {
    background: var(--la-accent-soft);
    color: var(--la-accent);
    font-weight: 700;
}

.la-nav li.is-active .la-nav__icon {
    color: currentColor;
}

/* Signing out is not a destination; it never sits in the same list as one. */
.la-nav__foot {
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--la-border);
}

.la-nav__foot a {
    color: var(--la-muted);
    font-size: 0.875rem;
}

@media (max-width: 899px) {
    .la-nav {
        margin-inline: calc(var(--la-pad) * -0.5);
        padding-inline: calc(var(--la-pad) * 0.5);
    }

    .la-nav__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .la-nav ul {
        padding-block-end: 4px;
    }

    .la-nav a {
        border: 1px solid var(--la-border);
        background: var(--la-card);
    }

    .la-nav li.is-active > a {
        border-color: var(--la-accent);
    }

    .la-nav__foot {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .la-nav__foot ul {
        margin-block-start: 4px;
    }
}

/* --- The tab heading we print above WooCommerce's own screens ---------- */

.la-shell__title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    color: var(--la-fg);
}

/* =========================================================================
   Re-skin of WooCommerce's OWN My Account screens.
   Orders, addresses and account details are WooCommerce's markup and its
   behaviour — reimplementing them would mean re-testing address validation
   and password changes for no gain. They are restyled with the same tokens so
   the whole page reads as one product.
   ========================================================================= */

/* --- Notices ----------------------------------------------------------- */

.lets-shell .woocommerce-message,
.lets-shell .woocommerce-info,
.lets-shell .woocommerce-error,
.lets-shell .woocommerce-Message {
    list-style: none;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--la-border);
    border-inline-start: 3px solid var(--la-calm);
    border-radius: var(--la-radius-sm);
    background: var(--la-card);
    color: var(--la-fg);
    font-size: 0.9375rem;
}

.lets-shell .woocommerce-message {
    border-inline-start-color: var(--la-ok);
    background: var(--la-ok-soft);
}

.lets-shell .woocommerce-error {
    border-inline-start-color: var(--la-stop);
    background: var(--la-stop-soft);
}

.lets-shell .woocommerce-error li {
    list-style: none;
}

/* --- Buttons -------------------------------------------------------------
   Doubled block class throughout this section, for the same reason as the link
   rules above: WooCommerce themes carry long, high-specificity button selectors
   (`.woocommerce #respond input#submit, .woocommerce a.button, …`) and a plain
   `.lets-shell .button` loses to them on a shop we have never seen.
   ------------------------------------------------------------------------ */

.lets-shell.lets-shell .button,
.lets-shell.lets-shell .woocommerce-Button,
.lets-shell.lets-shell button[type='submit'],
.lets-shell.lets-shell input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: var(--la-radius-sm);
    border: 1px solid var(--la-accent);
    background: var(--la-accent);
    color: var(--la-accent-fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.lets-shell.lets-shell .button:hover,
.lets-shell.lets-shell .woocommerce-Button:hover,
.lets-shell.lets-shell button[type='submit']:hover,
.lets-shell.lets-shell input[type='submit']:hover {
    opacity: 0.9;
    color: var(--la-accent-fg);
}

/* A row of order actions is a row of SECONDARY verbs — view, invoice, pay,
   cancel. Only the page's own primary action keeps the brand fill. */
.lets-shell.lets-shell .woocommerce-orders-table__cell-order-actions .button,
.lets-shell.lets-shell .woocommerce-Address .edit,
.lets-shell.lets-shell .woocommerce-MyAccount-downloads .button {
    background: var(--la-card);
    border-color: var(--la-border-strong);
    color: var(--la-fg);
}

.lets-shell.lets-shell .woocommerce-orders-table__cell-order-actions .button:hover,
.lets-shell.lets-shell .woocommerce-Address .edit:hover,
.lets-shell.lets-shell .woocommerce-MyAccount-downloads .button:hover {
    background: var(--la-card-2);
    color: var(--la-fg);
    opacity: 1;
}

/* Two or three verbs share the cell (view + invoice). A margin rather than a
   flex container, because the phone layout below turns every cell into a flex
   row of its own and two competing display modes is a bug waiting to happen. */
.lets-shell.lets-shell .woocommerce-orders-table__cell-order-actions .button + .button {
    margin-inline-start: 8px;
}

/* The document is the quieter of the two: a shopper on this row came for the
   order, and finds the receipt beside it. */
.lets-shell.lets-shell .woocommerce-orders-table__cell-order-actions .lets_invoice {
    color: var(--la-muted);
}

.lets-shell.lets-shell .woocommerce-orders-table__cell-order-actions .lets_invoice:hover {
    color: var(--la-fg);
}

/* The same receipt on the SINGLE order page. The section used to have no rule
   at all, so the link arrived in the theme's default link colour while its
   sibling in the history table was dressed; it now reads as the same quiet
   secondary verb in both places. */
.lets-shell.lets-shell .lets-order-document p {
    margin: 8px 0 0;
}

.lets-shell.lets-shell .lets-order-document a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--la-border-strong);
    border-radius: var(--la-radius-sm);
    background: var(--la-card);
    color: var(--la-fg);
    text-decoration: none;
    transition: background 0.2s ease;
}

.lets-shell.lets-shell .lets-order-document a:hover {
    background: var(--la-card-2);
    color: var(--la-fg);
    text-decoration: none;
}

/* --- Links inside WooCommerce's own tables ------------------------------
   The order number identifies the row; it is not a link out into the theme's
   palette. It takes the page's ink, and earns an underline on hover — where an
   underline means "this goes somewhere" rather than "this is a link, always".
   ------------------------------------------------------------------------ */

.lets-shell.lets-shell table.shop_table a:not(.button) {
    color: var(--la-fg);
    font-weight: 600;
}

.lets-shell.lets-shell table.shop_table a:not(.button):hover {
    color: var(--la-accent);
    text-decoration: underline;
}

.lets-shell.lets-shell table.shop_table a:focus-visible,
.lets-shell.lets-shell .la-nav a:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
    border-radius: 4px;
}

/* --- Tables ------------------------------------------------------------ *

   DOUBLED CLASS, on purpose. WooCommerce themes ship their own
   `.woocommerce table.shop_table`, which is (0,2,1) — the SAME specificity as
   `.lets-shell table.shop_table`. A tie is broken by load order, and the theme's
   stylesheet is enqueued after ours, so on some themes the theme simply won:
   its own padding, 5px radius, right-aligned text and a -1px left margin came
   through and knocked the table out of line with the cards beside it.
   `.lets-shell.lets-shell` is (0,3,1) and settles it without !important — the
   same trick the link rules above already use for the same fight.

   The theme's own paddings are also reset explicitly rather than left to be
   inherited: a table that carries both its padding and ours is a table with two
   different gutters. */

.lets-shell.lets-shell table.shop_table,
.lets-shell.lets-shell table.woocommerce-orders-table,
.lets-shell.lets-shell table.woocommerce-MyAccount-orders {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    background: var(--la-card);
    box-shadow: var(--la-shadow);
    overflow: hidden;
    margin: 0 0 20px;
    padding: 0;
    text-align: start;
    font-size: 0.9375rem;
}

.lets-shell.lets-shell table.shop_table th,
.lets-shell.lets-shell table.shop_table td {
    text-align: start;
    padding: 14px 18px;
    border: 0;
    border-block-end: 1px solid var(--la-border);
    vertical-align: middle;
}

.lets-shell.lets-shell table.shop_table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--la-muted);
    background: var(--la-card-2);
}

.lets-shell.lets-shell table.shop_table tbody tr:last-child td {
    border-block-end: 0;
}

.lets-shell table.shop_table tbody tr:hover td {
    background: var(--la-card-2);
}

/* --- The order's totals ------------------------------------------------- *

   WooCommerce puts subtotal, discount, shipping and total in the SAME table as
   the products, as more rows of equal weight. Read cold, an order then has no
   shape: the line the shopper is actually looking for — what they paid — sits in
   the last row looking exactly like the shipping method above it.

   So the tfoot is drawn as a summary rather than as more table: the labels step
   back, the figures come forward, a heavier rule separates it from the goods,
   and the final row is the conclusion it actually is. Amounts are tabular so the
   digits line up in a column instead of drifting.

   Doubled class throughout: themes ship `background:#fff` for thead/tfoot/odd
   rows at the same specificity as ours, and a tie goes to whoever loaded last. */

.lets-shell.lets-shell table.shop_table tfoot tr:first-child td,
.lets-shell.lets-shell table.shop_table tfoot tr:first-child th {
    border-block-start: 2px solid var(--la-border-strong);
}

.lets-shell.lets-shell table.shop_table tfoot td,
.lets-shell.lets-shell table.shop_table tfoot th {
    background: var(--la-card);
    padding-block: 10px;
    font-variant-numeric: tabular-nums;
}

/* The label column: this is scaffolding, not the answer. */
.lets-shell.lets-shell table.shop_table tfoot th {
    font-weight: 500;
    color: var(--la-muted);
}

/* The figure column. */
.lets-shell.lets-shell table.shop_table tfoot td {
    font-weight: 600;
    text-align: end;
}

/* The last line is what the shopper came to read. */
.lets-shell.lets-shell table.shop_table tfoot tr:last-child th,
.lets-shell.lets-shell table.shop_table tfoot tr:last-child td {
    padding-block: 16px;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--la-fg);
    background: var(--la-card-2);
    border-block-end: 0;
}

/* Products: the name leads, the money aligns with the totals below it. */
.lets-shell.lets-shell table.shop_table tbody td {
    background: var(--la-card);
    font-variant-numeric: tabular-nums;
}

.lets-shell.lets-shell table.shop_table tbody th,
.lets-shell.lets-shell table.shop_table tbody .product-name {
    font-weight: 600;
    background: var(--la-card);
}

.lets-shell.lets-shell table.shop_table tbody .product-total,
.lets-shell.lets-shell table.shop_table tbody td:last-child {
    text-align: end;
}

/* A theme's zebra striping cuts across the split we just drew. */
.lets-shell.lets-shell table.shop_table tbody tr:nth-child(odd) > td,
.lets-shell.lets-shell table.shop_table tbody tr:nth-child(odd) > th {
    background: var(--la-card);
}

/* "Order #2939 was placed on … and is currently …" — the sentence that opens
   the screen, given the standing of a lead rather than of body copy. */
.lets-shell.lets-shell .woocommerce-order > p:first-of-type,
.lets-shell.lets-shell p.woocommerce-thankyou-order-received {
    padding: 14px 18px;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    background: var(--la-card-2);
    color: var(--la-fg);
    font-size: 1rem;
    margin: 0 0 var(--la-gap);
}

.lets-shell.lets-shell .woocommerce-order > p:first-of-type mark,
.lets-shell.lets-shell p.woocommerce-thankyou-order-received mark {
    background: transparent;
    color: var(--la-fg);
    font-weight: 700;
}

/* Below the fold of a phone a five-column table is unreadable; each row
   becomes a stacked card with WooCommerce's own data-title as the label. */
@media (max-width: 719px) {
    .lets-shell table.shop_table thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lets-shell table.shop_table tbody tr {
        display: block;
        padding: 6px 0;
        border-block-end: 1px solid var(--la-border);
    }

    .lets-shell table.shop_table tbody tr:last-child {
        border-block-end: 0;
    }

    .lets-shell table.shop_table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border: 0;
        padding: 8px 18px;
        text-align: end;
    }

    .lets-shell table.shop_table tbody td::before {
        content: attr(data-title);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--la-muted);
        text-align: start;
    }

    .lets-shell table.shop_table tbody tr:hover td {
        background: transparent;
    }
}

/* --- Pagination -------------------------------------------------------- */

.lets-shell .woocommerce-pagination ul,
.lets-shell .woocommerce-Pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.lets-shell .woocommerce-pagination li {
    border: 0;
    margin: 0;
}

.lets-shell .woocommerce-pagination a,
.lets-shell .woocommerce-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 40px;
    padding: 8px 12px;
    border-radius: var(--la-radius-sm);
    border: 1px solid var(--la-border);
    background: var(--la-card);
    color: var(--la-fg);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.lets-shell .woocommerce-pagination .current {
    background: var(--la-accent);
    border-color: var(--la-accent);
    color: var(--la-accent-fg);
}

/* --- Addresses --------------------------------------------------------- */

.lets-shell .woocommerce-Addresses,
.lets-shell .u-columns.addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 0;
}

.lets-shell .woocommerce-Address {
    inline-size: auto;
    float: none;
    padding: var(--la-pad);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    background: var(--la-card);
    box-shadow: var(--la-shadow);
}

.lets-shell .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 12px;
}

.lets-shell .woocommerce-Address-title h2,
.lets-shell .woocommerce-Address-title h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.lets-shell .woocommerce-Address address {
    font-style: normal;
    color: var(--la-muted);
    line-height: 1.7;
    margin: 0;
}

/* --- Forms ------------------------------------------------------------- */

.lets-shell form.woocommerce-EditAccountForm,
.lets-shell form.woocommerce-address-fields,
.lets-shell form.edit-account {
    padding: var(--la-pad);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    background: var(--la-card);
    box-shadow: var(--la-shadow);
}

.lets-shell .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    float: none;
    inline-size: auto;
}

.lets-shell .form-row label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--la-muted);
}

.lets-shell .input-text,
.lets-shell .woocommerce-Input,
.lets-shell select,
.lets-shell textarea,
.lets-shell .select2-container .select2-selection {
    font: inherit;
    font-size: 0.9375rem;
    padding: 11px 13px;
    border-radius: var(--la-radius-sm);
    border: 1px solid var(--la-border-strong);
    background: var(--la-card);
    color: var(--la-fg);
    inline-size: 100%;
    block-size: auto;
    box-sizing: border-box;
}

.lets-shell .input-text:focus,
.lets-shell .woocommerce-Input:focus,
.lets-shell select:focus,
.lets-shell textarea:focus {
    outline: none;
    box-shadow: var(--la-ring);
    border-color: var(--la-accent);
}

.lets-shell fieldset {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-block-start: 1px solid var(--la-border);
}

.lets-shell fieldset legend {
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
}

.lets-shell .woocommerce-form-row .required {
    color: var(--la-stop);
    text-decoration: none;
}

.lets-shell em,
.lets-shell .woocommerce-password-hint {
    color: var(--la-muted);
    font-size: 0.8125rem;
}

/* --- Order detail + downloads ------------------------------------------ */

.lets-shell.lets-shell .woocommerce-order-details__title,
.lets-shell.lets-shell .woocommerce-column__title,
.lets-shell.lets-shell .woocommerce-order-downloads__title,
.lets-shell.lets-shell .woocommerce-customer-details h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--la-fg);
}

/* The order screen is three blocks — the sentence, the table, the addresses —
   and they need air between them or the page reads as one long ledger. */
.lets-shell.lets-shell .woocommerce-order-details,
.lets-shell.lets-shell .woocommerce-customer-details {
    margin-block-start: var(--la-gap);
}

/* Stacked, not side by side. Two address cards in a narrow account column were
   cramped at every width the rail leaves them, and an address reads better full
   width than squeezed into half of one. The children keep their own spacing. */
.lets-shell .woocommerce-customer-details .col2-set,
.lets-shell .woocommerce-columns--addresses {
    display: block;
}

.lets-shell .woocommerce-customer-details .col2-set > * + *,
.lets-shell .woocommerce-columns--addresses > * + * {
    margin-block-start: 16px;
}

.lets-shell .woocommerce-customer-details .col-1,
.lets-shell .woocommerce-customer-details .col-2,
.lets-shell .woocommerce-columns--addresses .col-1,
.lets-shell .woocommerce-columns--addresses .col-2 {
    inline-size: auto;
    float: none;
    padding: var(--la-pad);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    background: var(--la-card);
}

.lets-shell .woocommerce-customer-details address {
    font-style: normal;
    border: 0;
    padding: 0;
    color: var(--la-muted);
    line-height: 1.7;
}

/* =========================================================================
   Themes we could not measure, or a merchant who kept their own account
   template: the shell never rendered, so at least strip the float layout that
   squeezes our area into a third of the page.
   ========================================================================= */

.lets-acct-shell .woocommerce-MyAccount-content {
    inline-size: auto;
    max-inline-size: none;
    float: none;
}

/* =========================================================================
   The sign-in panel on the login form: one-time codes, and — when the
   merchant configured a client id — Google. The card should read as ONE way
   in with three doors, not three stacked widgets: Google first (a single
   click beats typing a code), a quiet "or" line, then the code flow with the
   channel chips. Google's own button is an iframe GIS renders; we only own
   the box it sits in, so the centring happens on the container.
   ========================================================================= */

.lets-acct .la-login {
    max-inline-size: 420px;
    margin-block-start: var(--la-gap);
}

.lets-acct .la-login .la-section__title {
    margin-block-end: 6px;
}

.la-login__google {
    display: flex;
    justify-content: center;
    margin-block-start: 14px;
    /* GIS pops in async; reserving the button's height keeps the card from
       jumping when it lands. */
    min-block-size: 44px;
}

.la-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 18px 4px;
    color: var(--la-faint);
}

.la-login__divider::before,
.la-login__divider::after {
    content: '';
    block-size: 1px;
    flex: 1;
    background: var(--la-border);
}

.la-login__divider-word {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Email / SMS as one segmented control: the choice is a mode, not two links. */
.la-login__channels {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-block: 4px 14px;
    border: 1px solid var(--la-border);
    border-radius: calc(var(--la-radius-sm) + 4px);
    background: var(--la-card-2);
}

.la-chip {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--la-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 18px;
    border-radius: var(--la-radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.la-chip:hover {
    color: var(--la-fg);
}

.la-chip.is-active {
    background: var(--la-accent);
    color: var(--la-accent-fg);
}

.la-chip:focus-visible {
    outline: none;
    box-shadow: var(--la-ring);
}