/* ===================================================================
   BerTabien.NET — redesigned customer front end
   Two separate shells share the existing navy + gold palette (vars
   come from app.css). All new rules are namespaced under .lnm-webapp
   (desktop "web app") or .lnm-app (phone "mobile app") so nothing here
   touches the legacy public pages.
   =================================================================== */

:root {
    --sh-nav-h: 72px;
    --sh-tab-h: 64px;
    --sh-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sh-safe-top: env(safe-area-inset-top, 0px);
    --sh-glass: rgba(255, 255, 255, .08);
    --sh-glass-line: rgba(241, 210, 122, .22);
    --sh-card-shadow: 0 18px 44px rgba(6, 18, 51, .12);
}

/* Shared helpers ---------------------------------------------------- */
.sh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--lnm-accent);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sh-eyebrow::before {
    content: "";
    width: 1.4rem;
    height: 2px;
    border-radius: 2px;
    background: var(--lnm-gold-grad);
}
.sh-gold-text {
    background: var(--lnm-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ===================================================================
   WEB APP SHELL (desktop)
   =================================================================== */
body.lnm-webapp {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(199, 154, 46, .07), transparent 60%),
        var(--lnm-bg);
}

/* ---- Slim utility bar above the main header ---- */
.shw-utility {
    background: var(--lnm-navy-deep);
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    border-bottom: 1px solid rgba(241, 210, 122, .12);
}
.shw-utility .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
}
.shw-utility a { color: rgba(255, 255, 255, .8); }
.shw-utility a:hover { color: var(--lnm-accent-2); }
.shw-utility-contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.shw-utility-contact i { color: var(--lnm-accent); margin-right: .3rem; }
.shw-utility-meta { display: flex; align-items: center; gap: 1rem; }

/* ---- Main header / nav ---- */
.shw-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(8, 19, 46, .92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sh-glass-line);
    transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.shw-header.scrolled {
    background: rgba(6, 14, 36, .97);
    box-shadow: 0 14px 34px rgba(6, 18, 51, .4);
}
.shw-header .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--sh-nav-h);
}
.shw-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.12rem;
    white-space: nowrap;
}
.shw-brand:hover { color: #fff; }
.shw-brand img { width: 40px; height: 40px; }
/* Horizontal lockup logo overrides the square icon sizing above. */
.shw-brand img.lnm-brand-logo-full { width: auto; height: 34px; max-width: 62vw; }
.shw-brand small {
    display: block;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--lnm-accent-2);
    text-transform: uppercase;
}
.shw-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0 auto 0 .5rem;
}
.shw-nav a {
    position: relative;
    padding: .55rem .85rem;
    border-radius: var(--lnm-radius);
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}
.shw-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.shw-nav a.active { color: var(--lnm-accent-2); }
.shw-nav a.active::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--lnm-gold-grad);
}
.shw-actions { display: flex; align-items: center; gap: .6rem; }
.shw-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 1.15rem;
}
.shw-icon-btn:hover {
    color: var(--lnm-navy-deep);
    background: var(--lnm-accent-2);
    border-color: var(--lnm-accent-2);
}
.shw-user {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem .35rem .4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-weight: 500;
    font-size: .9rem;
}
.shw-user:hover { color: #fff; border-color: var(--sh-glass-line); }
.shw-user .shw-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lnm-gold-grad);
    color: var(--lnm-navy-deep);
    font-weight: 700;
}

/* ---- Hero ---- */
.shw-hero {
    position: relative;
    overflow: hidden;
    background: var(--lnm-navy-grad);
    color: #fff;
    padding: 4.5rem 0 5.5rem;
}
.shw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 320px at 12% 8%, rgba(241, 210, 122, .16), transparent 70%),
        radial-gradient(560px 360px at 92% 90%, rgba(15, 118, 110, .22), transparent 70%);
    pointer-events: none;
}
.shw-hero .container { position: relative; z-index: 1; }
.shw-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: 3rem;
    align-items: center;
}
.shw-hero h1 {
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    line-height: 1.14;
    color: #fff;
    text-wrap: balance;
    margin: 1rem 0 1.1rem;
}
.shw-hero .lead {
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.1rem;
}
.shw-searchbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    padding: .5rem .5rem .5rem 1.1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(6, 18, 51, .35);
}
.shw-searchbar i.bi-search { color: var(--lnm-muted); font-size: 1.15rem; }
.shw-searchbar input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    min-height: 48px;
    font-size: 1.02rem;
    color: var(--lnm-ink);
    background: transparent;
}
.shw-searchbar .btn { min-height: 48px; padding-inline: 1.6rem; white-space: nowrap; }
.shw-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.shw-chips a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .9);
    font-size: .86rem;
    font-weight: 500;
}
.shw-chips a:hover {
    color: #fff;
    border-color: rgba(241, 210, 122, .5);
    background: rgba(241, 210, 122, .14);
}
/* Primary "advanced filters" chip — gold-accented so it reads as the main
   entry point to the full filter panel on /products. */
.shw-chips a.is-filter {
    border-color: rgba(241, 210, 122, .55);
    background: rgba(241, 210, 122, .16);
    color: #f1d27a;
    font-weight: 600;
}
.shw-chips a.is-filter:hover {
    color: #16233f;
    background: #f1d27a;
    border-color: #f1d27a;
}
.shw-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.25rem;
    max-width: 560px;
}
.shw-hero-stats .num {
    font-family: var(--lnm-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--lnm-accent-2);
    line-height: 1;
}
.shw-hero-stats span { display: block; color: rgba(255, 255, 255, .7); font-size: .85rem; margin-top: .35rem; }

/* Floating featured card on the hero */
.shw-hero-card {
    border-radius: 20px;
    border: 1px solid var(--sh-glass-line);
    background:
        linear-gradient(180deg, rgba(37, 48, 71, .72), rgba(8, 19, 46, .82));
    box-shadow: var(--sh-card-shadow);
    padding: 1.4rem;
    backdrop-filter: blur(8px);
}
.shw-hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.shw-hero-card-head h2 { font-size: 1.05rem; color: #fff; margin: 0; }
.shw-feature-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .35rem 1rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    margin-bottom: .65rem;
}
.shw-feature-row:hover {
    color: #fff;
    border-color: rgba(241, 210, 122, .5);
    background: rgba(241, 210, 122, .1);
}
.shw-feature-row:last-child { margin-bottom: 0; }
.shw-feature-num {
    font-family: var(--lnm-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.shw-feature-meta { grid-column: 1; color: rgba(255, 255, 255, .65); font-size: .82rem; }
.shw-feature-price {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: var(--lnm-accent-2);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Generic web section ---- */
.shw-section { padding: 4.5rem 0; }
/* On tablet / narrowed web, cap a product-card section to two rows so it stays
   compact (the "ดูทั้งหมด" button leads to the full list). Cards use
   col-sm-6 (2-up) / col-lg-4 (3-up), so two rows = 4 cards at 2-up and 2 cards
   at 1-up. At >=992px (3-up) the six cards already form two rows, so nothing is
   hidden there. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .shw-grid-2rows > *:nth-child(n+5) { display: none; }
}
@media (max-width: 575.98px) {
    .shw-grid-2rows > *:nth-child(n+3) { display: none; }
}
.shw-section-head { max-width: 680px; }
.shw-section-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); margin: .6rem 0 0; text-wrap: balance; }
.shw-section-head.center { margin-inline: auto; text-align: center; }
.shw-section-head.center .sh-eyebrow { justify-content: center; }

/* Category split */
.shw-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.shw-cat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: 1.75rem;
    border-radius: 18px;
    border: 1px solid var(--lnm-line);
    background: linear-gradient(160deg, #fff, #fbfcfe);
    box-shadow: var(--lnm-shadow-sm);
    color: var(--lnm-ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shw-cat:hover {
    color: var(--lnm-ink);
    transform: translateY(-4px);
    border-color: rgba(199, 151, 45, .5);
    box-shadow: var(--sh-card-shadow);
}
.shw-cat::after {
    content: "\2192"; /* → */
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lnm-accent-soft);
    color: var(--lnm-accent);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform .25s ease;
}
.shw-cat:hover::after { transform: translateX(4px); }
.shw-cat-icon {
    position: absolute;
    top: 1.5rem;
    left: 1.75rem;
    font-size: 2.4rem;
    color: var(--lnm-primary);
    opacity: .9;
}
.shw-cat h3 { font-size: 1.5rem; color: var(--lnm-primary); margin: 0 0 .4rem; }
.shw-cat p { color: var(--lnm-muted); margin: 0; max-width: 30ch; }

/* Featured grid heading row */
.shw-row-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* Fortune band */
.shw-fortune {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(135deg, #111827 0%, #172033 50%, #123f43 100%);
    box-shadow: var(--sh-card-shadow);
}
.shw-fortune::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 88px);
    pointer-events: none;
}
.shw-fortune > * { position: relative; }
.shw-fortune h2 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.shw-fortune p { color: rgba(255, 255, 255, .78); max-width: 46ch; }
.shw-fortune .shw-searchbar { margin-top: 1.5rem; }
/* Decorative car illustration filling the empty right side of the card.
   Sits behind the text/form (which stay on the left via max-width). */
.shw-fortune-car {
    position: absolute;
    right: 1.5rem;
    bottom: 0;
    width: min(44%, 430px);
    height: auto;
    opacity: .92;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 991.98px) {
    /* On narrow layouts the text spans full width, so hide the car to avoid
       overlapping the copy and search box. */
    .shw-fortune-car { display: none; }
}

/* Steps */
.shw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.shw-step {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 18px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    box-shadow: var(--lnm-shadow-sm);
}
.shw-step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -18px;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--lnm-navy-grad);
    color: var(--lnm-accent-2);
    font-family: var(--lnm-display);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(6, 18, 51, .28);
}
.shw-step h3 { font-size: 1.12rem; color: var(--lnm-primary); margin: .4rem 0 .5rem; }
.shw-step p { color: var(--lnm-muted); margin: 0; }

/* Contact + CTA */
.shw-contact {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2rem;
    align-items: center;
    border-radius: 22px;
    padding: 2.5rem;
    background: var(--lnm-navy-grad);
    color: #fff;
    box-shadow: var(--sh-card-shadow);
}
.shw-contact h2 { color: #fff; }
.shw-contact p { color: rgba(255, 255, 255, .8); }
.shw-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.shw-contact-action {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 56px;
    padding: .75rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--sh-glass-line);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.shw-contact-action:hover { color: var(--lnm-navy-deep); background: var(--lnm-accent-2); border-color: var(--lnm-accent-2); }
.shw-contact-action i { font-size: 1.2rem; color: var(--lnm-accent-2); }
.shw-contact-action:hover i { color: var(--lnm-navy-deep); }

/* ---- Web footer ---- */
.shw-footer { background: var(--lnm-navy-deep); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 1.75rem; }
.shw-footer h6 { color: #fff; margin-bottom: 1rem; }
.shw-footer a { color: rgba(255, 255, 255, .7); display: inline-block; padding: .18rem 0; }
.shw-footer a:hover { color: var(--lnm-accent-2); }
.shw-footer .shw-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.5rem; padding-top: 1.5rem; }

@media (max-width: 991.98px) {
    .shw-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .shw-hero-card { order: -1; }
    .shw-cat-grid, .shw-steps, .shw-contact, .shw-contact-actions { grid-template-columns: 1fr; }
    .shw-nav { display: none; }
}

/* ===================================================================
   MOBILE APP SHELL (phone)
   =================================================================== */
body.lnm-app {
    background: var(--lnm-bg);
    padding-bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom));
    -webkit-tap-highlight-color: transparent;
    /* Hard guard: nothing in the mobile shell may push past the viewport. */
    overflow-x: hidden;
}
body.lnm-app * { min-width: 0; }
body.lnm-app img { max-width: 100%; }

/* ---- App top bar ---- */
.sha-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: calc(.7rem + var(--sh-safe-top)) 1rem .7rem;
    background: var(--lnm-navy-grad);
    color: #fff;
    border-bottom: 1px solid var(--sh-glass-line);
}
.sha-topbar-row { display: flex; align-items: center; gap: .75rem; }
.sha-brand { display: inline-flex; align-items: center; min-width: 0; }
.sha-brand img.lnm-brand-logo-full { width: auto; height: 32px; max-width: 60vw; }
.sha-greet { line-height: 1.2; min-width: 0; }
.sha-greet small { display: block; color: rgba(255, 255, 255, .65); font-size: .72rem; }
.sha-greet strong {
    display: block;
    font-size: 1.02rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sha-topbar-actions { margin-left: auto; display: flex; gap: .5rem; }
.sha-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.2rem;
}
.sha-icon-btn .sha-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lnm-accent);
    border: 1px solid var(--lnm-navy-deep);
}
.sha-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .85rem;
    padding: .65rem .9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    color: var(--lnm-muted);
    font-size: .95rem;
}
.sha-search i { font-size: 1.1rem; flex: 0 0 auto; }
.sha-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--lnm-ink);
    font-size: .95rem;
    min-height: 24px;
}
.sha-search input::placeholder { color: var(--lnm-muted); }
.sha-search-go {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    width: 34px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--lnm-gold-grad);
    color: var(--lnm-navy-deep);
    font-size: 1rem;
}

/* ---- Segmented category pills (horizontal scroll) ---- */
.sha-segment {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .9rem 1rem .3rem;
    scrollbar-width: none;
}
.sha-segment::-webkit-scrollbar { display: none; }
.sha-seg {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: var(--lnm-ink);
    font-size: .88rem;
    font-weight: 500;
}
.sha-seg.active {
    border-color: transparent;
    background: var(--lnm-navy-grad);
    color: #fff;
}
.sha-seg.active i { color: var(--lnm-accent-2); }

/* ---- App content sections ---- */
.sha-section { padding: 1.25rem 1rem 0; }
.sha-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}
.sha-section-head h2 { font-size: 1.08rem; margin: 0; color: var(--lnm-ink); }
.sha-section-head a { font-size: .84rem; font-weight: 600; color: var(--lnm-accent); }

/* Promo hero card */
.sha-promo {
    position: relative;
    overflow: hidden;
    margin: 1rem 1rem 0;
    padding: 1.4rem;
    border-radius: 18px;
    background: var(--lnm-navy-grad);
    color: #fff;
    box-shadow: 0 14px 30px rgba(6, 18, 51, .25);
}
.sha-promo::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 210, 122, .28), transparent 70%);
}
.sha-promo h2 { font-size: 1.3rem; color: #fff; margin: .5rem 0 .4rem; position: relative; }
.sha-promo p { color: rgba(255, 255, 255, .82); font-size: .9rem; margin: 0 0 1rem; position: relative; }
.sha-promo .btn { position: relative; }

/* Contact hero composition: text left, car illustration top-right, full-width
   โทร + LINE buttons below. The car is a real accent (not a faint watermark);
   the heading/copy reserve right space so they never collide with it. */
.sha-contact-hero::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 4px;
    width: 156px;
    height: 92px;
    background: url("../images/hero-car.svg") right top / contain no-repeat;
    opacity: .92;
    filter: drop-shadow(0 6px 10px rgba(6, 18, 51, .35));
    pointer-events: none;
}
.sha-contact-hero .sh-eyebrow,
.sha-contact-hero h2,
.sha-contact-hero p {
    position: relative;
    z-index: 1;
    padding-right: 120px;
}
.sha-contact-hero-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .6rem;
}
/* Tablet and up: lay the contact buttons out in a single equal-width row.
   On phones (< 600px) they stay stacked one per line for easy tapping. */
@media (min-width: 600px) {
    .sha-contact-hero-actions {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}
.chero-btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .95rem;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(6, 18, 51, .28);
}
.chero-btn i { font-size: 1.55rem; flex: 0 0 auto; }
.chero-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.chero-txt small { font-size: .72rem; font-weight: 500; opacity: .85; }
.chero-txt strong { font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chero-btn.call { background: var(--lnm-gold-grad); color: #3a2a05; }
.chero-btn.line { background: #06c755; color: #fff; }
.chero-btn:active { transform: translateY(1px); }

/* Horizontal number-card rail */
.sha-rail {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    padding: .25rem 1rem 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.sha-rail::-webkit-scrollbar { display: none; }
.sha-num-card {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lnm-line);
    box-shadow: var(--lnm-shadow-sm);
    color: var(--lnm-ink);
}
.sha-num-card:hover, .sha-num-card:active { color: var(--lnm-ink); }
.sha-num-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .05rem;
    /* Real Thai plate proportion (34cm x 16cm) so the plate keeps its shape
       as the card widens on tablet/desktop instead of going flat and wide. */
    aspect-ratio: 34 / 16;
    min-height: 0;
    background: var(--lnm-navy-deep);
    color: var(--lnm-accent-2);
    font-family: var(--lnm-plate-font);
    font-weight: 700;
    letter-spacing: .02em;
    /* Number size lives on the container so the province can scale from it.
       Sized big to fill the plate face like a real plate. */
    font-size: clamp(1.5rem, 8.5vw, 2.2rem);
}
.sha-num-plate .n {
    display: block;
    font-size: calc(1em * var(--plate-fit-scale, 1));
    line-height: 1.05;
    max-width: 100%;
    padding: 0 .5rem;
    text-align: center;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}
.sha-num-plate .p { font-size: calc(1em * var(--plate-province-scale, 0.36)); color: var(--lnm-accent-3); font-weight: 600; }
/* Plate-type items use the real blank-plate photo. */
.sha-num-plate.is-plate {
    background: var(--plate-art, url("../images/plate-photo.png")) center / 100% 100% no-repeat, #f4f1e8;
    color: #15171c;
}
.sha-num-plate.is-plate .p { color: #15171c; }
.sha-num-plate.is-plate,
.sha-num-plate.is-plate .n,
.sha-num-plate.is-plate .p {
    font-family: 'Sarabun', var(--lnm-font);
}
.sha-num-plate.is-plate {
    --plate-province-scale: 0.34;
    font-size: clamp(1.55rem, 8.8vw, 2.25rem);
}
.sha-num-plate.is-plate .n { transform: translateY(0.02em); line-height: .92; }
.sha-num-plate.is-plate .p { transform: translateY(0.80em); line-height: 1; }
.sha-num-plate.is-plate[data-plate-style="graphic"] .n { transform: translateY(0.02em); }
.sha-num-plate.is-plate[data-plate-style="graphic"] .p { transform: translateY(0.80em); }
.sha-num-body { padding: .75rem .85rem; }
.sha-num-body .row1 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sha-num-body .sub { color: var(--lnm-muted); font-size: .78rem; }
.sha-num-body .price { color: #9b6d12; font-weight: 700; white-space: nowrap; }
.sha-perfect-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    min-height: 24px;
    padding: .16rem .48rem;
    border-radius: 999px;
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    border: 1px solid #b8851f;
    box-shadow: 0 6px 14px rgba(184, 133, 31, .24);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}
.sha-crown-icon {
    width: .9em;
    height: .9em;
    flex: 0 0 auto;
    fill: currentColor;
    transform: translateY(-.04em);
}
.sha-num-tags { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.sha-tag {
    font-size: .7rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border: 1px solid rgba(199, 151, 45, .3);
}
.sha-popular-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}
.sha-popular-groups a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 54px;
    padding: .68rem .72rem;
    border-radius: 14px;
    border: 1px solid rgba(199, 151, 45, .24);
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    color: var(--lnm-primary);
    font-size: .78rem;
    font-weight: 700;
    box-shadow: var(--lnm-shadow-sm);
}
.sha-popular-groups a i {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    font-size: .95rem;
}
.sha-popular-groups a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Listing-count badge, e.g. "VIP (16)" */
.sha-pop-count {
    font-weight: 600;
    font-size: .9em;
    color: var(--lnm-accent-2, #c7972d);
}

/* Quick action grid */
.sha-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.sha-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .3rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--lnm-line);
    color: var(--lnm-ink);
    font-size: .74rem;
    font-weight: 500;
    text-align: center;
}
.sha-quick a i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--lnm-accent-soft);
    color: var(--lnm-accent);
    font-size: 1.25rem;
}

/* Fortune mini card (always rendered inside a .sha-section, which supplies
   the horizontal inset — so no own side margin to avoid doubling it). */
.sha-fortune {
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #172033, #123f43);
    color: #fff;
}
.sha-fortune h2 { font-size: 1.1rem; color: #fff; margin: 0 0 .35rem; }
.sha-fortune p { font-size: .85rem; color: rgba(255, 255, 255, .78); margin: 0 0 .9rem; }
.sha-fortune-input {
    display: flex;
    gap: .5rem;
    padding: .35rem .35rem .35rem .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
}
.sha-fortune-input input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; min-height: 42px; color: var(--lnm-ink); }

/* Contact strip */
.sha-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sha-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 50px;
    border-radius: 14px;
    font-weight: 600;
    font-size: .92rem;
}
.sha-contact a.call { background: #f0fdfa; color: #0f5f59; border: 1px solid rgba(15, 118, 110, .2); }
.sha-contact a.line { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }

/* ---- Bottom tab bar ---- */
.sha-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    height: calc(var(--sh-tab-h) + var(--sh-safe-bottom));
    padding: 6px 6px var(--sh-safe-bottom);
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--lnm-line);
    backdrop-filter: blur(14px);
    box-shadow: 0 -6px 20px rgba(6, 18, 51, .08);
    overflow-x: clip;
}
.sha-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    color: var(--lnm-muted);
    font-size: .66rem;
    font-weight: 500;
}
.sha-tab i { font-size: 1.25rem; }
.sha-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Favorites tab: heart with a count badge. */
.sha-tab-fav-icon { position: relative; display: inline-flex; line-height: 1; }
.sha-tab-fav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: .56rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
/* Keep the save toast clear of the bottom tab bar on the app shell. */
body.lnm-app .lnm-toast { bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom) + 14px); }
.sha-tab:active { background: #f2f4f7; }
.sha-tab.active { color: var(--lnm-primary); font-weight: 600; }
.sha-tab.active i { color: var(--lnm-accent); }
/* Hover feedback on devices with a pointer (desktop / narrowed web): every tab
   — including วิเคราะห์ — tints gold like the active state, so the bar responds
   consistently instead of a tab looking permanently "dull". */
@media (hover: hover) {
    .sha-tab:not(.active):hover { color: var(--lnm-primary); }
    .sha-tab:not(.active):hover i { color: var(--lnm-accent); }
}
.sha-tab-fab { color: var(--lnm-primary); }
.sha-tab-fab .fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-top: -24px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--lnm-gold-grad);
    border: 3px solid #fff;
    color: var(--lnm-navy-deep);
    font-size: 1.3rem;
    box-shadow: 0 8px 18px rgba(184, 133, 31, .4);
}

/* Floating variant toggle (lets either device preview the other shell) */
.sh-view-toggle {
    position: fixed;
    right: 12px;
    bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom) + 12px);
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(8, 19, 46, .9);
    color: #fff;
    font-size: .76rem;
    border: 1px solid var(--sh-glass-line);
    backdrop-filter: blur(8px);
}
.sh-view-toggle:hover { color: var(--lnm-accent-2); }
body.lnm-webapp .sh-view-toggle { bottom: 16px; }

/* ===================================================================
   Legacy-content compatibility
   The interior pages (products list/detail, fortune, blog, …) still use
   the shared app.css components. These rules let that content live inside
   the two new shells without the old bottom-nav assumptions.
   =================================================================== */

/* Give interior pages a comfortable minimum height in either shell. */
body.lnm-webapp main, body.lnm-app main { min-height: 60vh; }

/* Desktop "web app": never show the legacy phone-only widgets, even when
   the window is narrow (tablets are served the web shell on purpose). */
body.lnm-webapp .lnm-mobile-only,
body.lnm-webapp .lnm-bottom-nav,
body.lnm-webapp .lnm-mobile-buybar { display: none !important; }

/* Mobile app shell: align the legacy sticky buy-bar (product detail) with
   the new tab bar height, and reserve space so content isn't hidden. */
body.lnm-app {
    --lnm-bottom-nav-h: var(--sh-tab-h);
}
body.lnm-app .lnm-bottom-nav { display: none !important; } /* layout owns the tab bar */
body.lnm-app .lnm-mobile-buybar {
    bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom));
}
body.lnm-app:has(.lnm-mobile-buybar) {
    padding-bottom: calc(var(--sh-tab-h) + 72px + var(--sh-safe-bottom));
}

/* ===================================================================
   PRODUCT LISTING — web app (desktop)
   =================================================================== */
.shw-listing-hero {
    background: var(--lnm-navy-grad);
    color: #fff;
    padding: 2.5rem 0 2.25rem;
    border-bottom: 1px solid var(--sh-glass-line);
}
.shw-listing-hero .breadcrumb { margin-bottom: .9rem; }
.shw-listing-hero .breadcrumb a { color: rgba(255, 255, 255, .7); }
.shw-listing-hero .breadcrumb-item.active,
.shw-listing-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }
.shw-listing-hero h1 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0 0 .4rem; }
.shw-listing-hero p { color: rgba(255, 255, 255, .8); margin: 0; }
.shw-listing-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    max-width: 620px;
    padding: .4rem .4rem .4rem 1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(6, 18, 51, .3);
}
.shw-listing-search i.bi-search { color: var(--lnm-muted); }
.shw-listing-search input { flex: 1 1 auto; border: 0; outline: 0; min-height: 46px; background: transparent; color: var(--lnm-ink); }
.shw-listing-tabs { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.shw-listing-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .9);
    font-size: .86rem;
    font-weight: 500;
}
.shw-listing-tabs a.active,
.shw-listing-tabs a:hover {
    color: var(--lnm-navy-deep);
    background: var(--lnm-accent-2);
    border-color: var(--lnm-accent-2);
}

.shw-goal-chips {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}
.shw-goal-chips-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--lnm-accent-2);
    margin-right: .15rem;
}
.shw-goal-chips a {
    padding: .28rem .75rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .25);
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
}
.shw-goal-chips a.active,
.shw-goal-chips a:hover {
    color: var(--lnm-navy-deep);
    background: var(--lnm-accent-2);
    border-style: solid;
    border-color: var(--lnm-accent-2);
}

.shw-listing-body { padding: 2rem 0 3.5rem; }
.shw-filter {
    position: sticky;
    top: 88px;
    border: 1px solid var(--lnm-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--lnm-shadow-sm);
    padding: 1.25rem;
}
.shw-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.shw-filter-head h2 { font-size: 1.02rem; margin: 0; }
.shw-filter-group { margin-bottom: 1.1rem; }
.shw-filter-group > label { font-size: .82rem; font-weight: 500; color: #344054; display: block; margin-bottom: .35rem; }

.shw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.shw-toolbar-count { font-weight: 600; color: var(--lnm-ink); }
.shw-toolbar-count b { color: var(--lnm-primary); }
.shw-active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.shw-active-filters span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    border: 1px solid rgba(199, 151, 45, .3);
    color: #8a6111;
    font-size: .8rem;
}
.shw-sort { display: flex; align-items: center; gap: .5rem; }

/* ===================================================================
   PRODUCT LISTING — mobile app (phone)
   =================================================================== */
.sha-listing-control {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 1rem .25rem;
    flex-wrap: wrap;
}
.sha-listing-control form { min-width: 0; }
.sha-listing-control select.sha-ctrl-btn { max-width: 42vw; }
.sha-listing-count { font-size: .82rem; color: var(--lnm-muted); margin-right: auto; white-space: nowrap; }
.sha-listing-count b { color: var(--lnm-primary); }
.sha-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: var(--lnm-ink);
    font-size: .82rem;
    font-weight: 600;
}
.sha-ctrl-btn .sha-ctrl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--lnm-accent);
    color: var(--lnm-navy-deep);
    font-size: .68rem;
}
.sha-active-filters { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 1rem 0; scrollbar-width: none; }
.sha-active-filters::-webkit-scrollbar { display: none; }
.sha-active-filters span {
    flex: 0 0 auto;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    border: 1px solid rgba(199, 151, 45, .3);
    color: #8a6111;
    font-size: .76rem;
}

.sha-grid {
    display: grid;
    /* Phone: 2 plates per row. Wider screens add columns so each plate stays a
       comfortable size instead of stretching huge (see breakpoints below). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: .75rem 1rem 0;
}
/* Tablet / wide phone: 3 plates per row. */
@media (min-width: 600px) {
    .sha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Desktop: 4 plates per row. */
@media (min-width: 992px) {
    .sha-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sha-gcard {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lnm-line);
    box-shadow: var(--lnm-shadow-sm);
    color: var(--lnm-ink);
}
/* Stretched link: the whole card is tappable, while in-body controls (the
   compare button) stay clickable by sitting above it. */
.sha-gcard-stretch { position: absolute; inset: 0; z-index: 1; }

/* Row 1: number (left) + compare button (right). */
.sha-gcard-r1 { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.sha-gcard-r1 .sha-gcard-num { min-width: 0; }
.sha-gcard-compare {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: #475467;
    font-size: .95rem;
}
.sha-gcard-compare.is-active {
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border-color: rgba(199, 151, 45, .5);
}

/* Row 3: score + sum, side by side. */
.sha-gcard-r3 { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.sha-gcard-sum {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #eef1f6;
    color: #475467;
    border: 1px solid var(--lnm-line);
    white-space: nowrap;
}
/* Keep the floating compare bar above the bottom tab bar on the app shell. */
body.lnm-app .lnm-compare-bar {
    bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom) + .5rem);
    z-index: 1041;
}
.sha-gcard:active { color: var(--lnm-ink); }
.sha-gcard-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .05rem;
    /* Keep the real plate proportion (34:16) as the grid card widens. */
    aspect-ratio: 34 / 16;
    min-height: 0;
    background: var(--lnm-navy-deep);
    color: var(--lnm-accent-2);
    font-family: var(--lnm-plate-font);
    font-weight: 700;
    letter-spacing: .02em;
    font-size: clamp(1.15rem, 7.5vw, 1.7rem);
}
.sha-gcard-plate img { width: 100%; height: 100%; object-fit: cover; }
.sha-gcard-plate .n {
    display: block;
    font-size: calc(1em * var(--plate-fit-scale, 1));
    line-height: 1.05;
    max-width: 100%;
    padding: 0 .35rem;
    text-align: center;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}
.sha-gcard-plate .p { font-size: calc(1em * var(--plate-province-scale, 0.36)); color: var(--lnm-accent-3); font-weight: 600; }
.sha-gcard-plate.is-plate {
    background: var(--plate-art, url("../images/plate-photo.png")) center / 100% 100% no-repeat, #f4f1e8;
    color: #15171c;
}
.sha-gcard-plate.is-plate .p { color: #15171c; }
.sha-gcard-plate.is-plate,
.sha-gcard-plate.is-plate .n,
.sha-gcard-plate.is-plate .p {
    font-family: 'Sarabun', var(--lnm-font);
}
.sha-gcard-plate.is-plate {
    --plate-province-scale: 0.34;
    font-size: clamp(1.2rem, 7.6vw, 1.7rem);
}
.sha-gcard-plate.is-plate .n { transform: translateY(0.02em); line-height: .92; }
.sha-gcard-plate.is-plate .p { transform: translateY(0.80em); line-height: 1; }
.sha-gcard-plate.is-plate[data-plate-style="graphic"] .n { transform: translateY(0.02em); }
.sha-gcard-plate.is-plate[data-plate-style="graphic"] .p { transform: translateY(0.80em); }
.sha-gcard-plate.is-plate .sha-gcard-badge { background: #fff; }
.sha-gcard-badge {
    position: absolute;
    top: .4rem;
    left: .4rem;
    font-size: .62rem;
    padding: .08rem .4rem;
    border-radius: 999px;
    background: #fff8e6;
    color: #8a6111;
    border: 1px solid rgba(199, 151, 45, .35);
}
/* "จองแล้ว / ขายแล้ว" stamp, centred over the plate (mobile cards & rails). */
.lnm-reserved-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
    z-index: 4;
    padding: .2em .9em;
    border-radius: 6px;
    background: rgba(192, 16, 72, .94);
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    line-height: 1.2;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 4px 12px rgba(125, 8, 40, .35);
    pointer-events: none;
}
.sha-gcard-body { padding: .6rem .7rem .7rem; }
.sha-gcard-num { font-weight: 700; color: var(--lnm-primary); font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.sha-gcard-sub { color: var(--lnm-muted); font-size: .74rem; }
.sha-gcard-suit {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .3rem;
    padding: .08rem .45rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    border: 1px solid rgba(199, 151, 45, .3);
    color: #8a6111;
    font-size: .66rem;
    font-weight: 600;
    max-width: 100%;
}
.sha-gcard-suit > i { font-size: .62rem; }
.sha-gcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .4rem; }
.sha-gcard-price { color: #9b6d12; font-weight: 700; font-size: .95rem; white-space: nowrap; margin-top: .35rem; }
.sha-gcard-score {
    font-size: .68rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border: 1px solid rgba(199, 151, 45, .3);
}
.sha-gcard-score.is-perfect {
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    border-color: #b8851f;
    box-shadow: 0 5px 12px rgba(184, 133, 31, .22);
    font-weight: 800;
}

.sha-empty { text-align: center; padding: 3rem 1.5rem; color: var(--lnm-muted); }
.sha-empty i { font-size: 2rem; color: var(--lnm-accent); }

.sha-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; }
.sha-pager a, .sha-pager span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: var(--lnm-primary);
    font-weight: 600;
    font-size: .88rem;
}
.sha-pager .disabled { color: var(--lnm-muted); opacity: .5; }
.sha-pager .sha-pager-pos { border: 0; background: transparent; color: var(--lnm-muted); }

/* Filter bottom sheet (mobile) */
.sha-filter-sheet.offcanvas-bottom {
    height: auto;
    max-height: 88vh;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    display: flex;
    flex-direction: column;
}
.sha-filter-sheet .offcanvas-header {
    position: relative;
    justify-content: center;
    padding: 1rem 1.25rem .5rem;
    border-bottom: 1px solid var(--lnm-line);
}
.sha-filter-sheet .offcanvas-header::before {
    content: "";
    position: absolute;
    top: .45rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #d0d5dd;
}
.sha-filter-sheet .offcanvas-header .btn-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-25%); }
.sha-filter-sheet .offcanvas-body { padding: 1rem 1.25rem; }
.sha-filter-sheet .shw-filter-group > label { font-size: .82rem; font-weight: 500; color: #344054; display: block; margin-bottom: .35rem; }
.sha-filter-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .6rem;
    padding: .85rem 1.25rem calc(.85rem + var(--sh-safe-bottom));
    background: #fff;
    border-top: 1px solid var(--lnm-line);
}

/* ===================================================================
   PRODUCT DETAIL — web app (desktop)
   =================================================================== */
.shw-detail-hero {
    background: var(--lnm-navy-grad);
    color: #fff;
    padding: 2.25rem 0 2rem;
    border-bottom: 1px solid var(--sh-glass-line);
}
.shw-detail-hero .breadcrumb { margin-bottom: .8rem; }
.shw-detail-hero .breadcrumb a { color: rgba(255, 255, 255, .7); }
.shw-detail-hero .breadcrumb-item.active,
.shw-detail-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }
.shw-detail-hero h1 { color: #fff; font-family: var(--lnm-plate-font); letter-spacing: .04em; margin: .35rem 0 0; }
.shw-detail-body { padding: 2rem 0 3.5rem; }

.shw-buy {
    position: sticky;
    top: 88px;
    border: 1px solid var(--lnm-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sh-card-shadow);
    padding: 1.5rem;
}
.shw-buy-price { color: #9b6d12; font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.shw-meta-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; }
.shw-meta-chip {
    display: inline-flex;
    flex-direction: column;
    min-width: 88px;
    padding: .5rem .75rem;
    border-radius: 12px;
    border: 1px solid var(--lnm-line);
    background: #fbfcfe;
}
.shw-meta-chip span { color: var(--lnm-muted); font-size: .72rem; }
.shw-meta-chip strong { color: var(--lnm-primary); font-size: .98rem; overflow-wrap: anywhere; }
.shw-buy-actions { display: grid; gap: .6rem; margin-top: .5rem; }

/* ===================================================================
   PRODUCT DETAIL — mobile app (phone)
   =================================================================== */
body.lnm-app:has(.sha-buybar) {
    padding-bottom: calc(var(--sh-tab-h) + 70px + var(--sh-safe-bottom));
}
.sha-detail-media {
    margin: 0;
    padding: 1.25rem 1rem;
    background: var(--lnm-navy-grad);
}
.sha-detail-media .lnm-number-badge {
    margin-inline: auto;
    max-width: 320px;
    /* This context has no inline-size container, so override the cqi-based
       sizing with a predictable viewport clamp. */
    font-size: clamp(1.8rem, 11vw, 3rem);
}
.sha-detail-media img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; }
.sha-detail-gallery { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1rem 0; scrollbar-width: none; }
.sha-detail-gallery::-webkit-scrollbar { display: none; }
.sha-detail-gallery img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lnm-line); flex: 0 0 auto; }

.sha-card { margin: 1rem; padding: 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--lnm-line); box-shadow: var(--lnm-shadow-sm); }
.sha-detail-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sha-detail-num { font-size: 1.5rem; font-weight: 700; color: var(--lnm-primary); line-height: 1.2; overflow-wrap: anywhere; }
.sha-detail-type { color: var(--lnm-muted); font-size: .82rem; }
.sha-status-chip {
    flex: 0 0 auto;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #abefc6;
}
.sha-price-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--lnm-line); }
.sha-price-row .price { color: #9b6d12; font-size: 1.4rem; font-weight: 700; }
.sha-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .9rem; }
.sha-meta-grid div { padding: .55rem .7rem; border-radius: 10px; background: #fbfcfe; border: 1px solid var(--lnm-line); }
.sha-meta-grid span { display: block; color: var(--lnm-muted); font-size: .72rem; }
.sha-meta-grid strong { color: var(--lnm-primary); font-size: .92rem; overflow-wrap: anywhere; }

/* Analysis */
.sha-score-head { display: flex; align-items: center; gap: 1rem; }
.sha-score-ring {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    background: conic-gradient(var(--lnm-accent) calc(var(--score, 0) * 1%), rgba(199,151,45,.18) 0);
}
.sha-score-ring b { background: var(--lnm-navy-deep); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--lnm-accent-2); }
.sha-insight { padding: .75rem .85rem; border-radius: 12px; background: #fbfcfe; border: 1px solid var(--lnm-line); margin-top: .6rem; }
.sha-insight .h { font-weight: 600; color: var(--lnm-primary); margin-bottom: .15rem; }
.sha-insight .h i { color: var(--lnm-accent); }
.sha-insight p { font-size: .82rem; color: var(--lnm-muted); margin: 0; }
.sha-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sha-chips span { font-size: .76rem; padding: .2rem .6rem; border-radius: 999px; background: var(--lnm-accent-soft); color: #8a6111; border: 1px solid rgba(199,151,45,.3); }

/* Merged life-area rows (score bar + one-line meaning) */
.sha-cat-list { display: grid; gap: .85rem; }
.sha-cat-text { font-size: .78rem; color: var(--lnm-muted); margin: .3rem 0 0; line-height: 1.5; }

/* Collapsible secondary sections (keeps mobile short but thorough) */
.sha-acc { border-top: 1px solid var(--lnm-line); padding-top: .65rem; }
.sha-acc > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .88rem;
    color: var(--lnm-primary);
}
.sha-acc > summary::-webkit-details-marker { display: none; }
.sha-acc > summary > i { color: var(--lnm-muted); font-size: .8rem; transition: transform .2s; }
.sha-acc[open] > summary > i { transform: rotate(180deg); }
.sha-acc-body { margin-top: .7rem; }

/* Sticky buy bar */
.sha-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--sh-tab-h) + var(--sh-safe-bottom));
    z-index: 1039;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    background: #fff;
    border-top: 1px solid var(--lnm-line);
    box-shadow: 0 -8px 22px rgba(6, 18, 51, .1);
}
.sha-buybar-info { line-height: 1.1; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.sha-buybar-info small { color: var(--lnm-muted); font-size: .68rem; }
.sha-buybar-info strong {
    display: block;
    color: #9b6d12;
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sha-buybar-actions { display: flex; gap: .5rem; margin-left: auto; flex: 0 0 auto; }
.sha-buybar-actions .btn { min-height: 46px; padding-inline: .85rem; white-space: nowrap; }

/* ===================================================================
   FORTUNE / NUMEROLOGY — web app (desktop)
   =================================================================== */
.shw-tool-hero {
    background: var(--lnm-navy-grad);
    color: #fff;
    padding: 3rem 0 3.25rem;
    border-bottom: 1px solid var(--sh-glass-line);
    text-align: center;
}
.shw-tool-hero h1 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin: .6rem 0 .5rem; }
.shw-tool-hero p { color: rgba(255, 255, 255, .8); max-width: 540px; margin: 0 auto; }
.shw-tool-hero .sh-eyebrow { justify-content: center; color: var(--lnm-accent-2); }
.shw-tool-hero .shw-searchbar { margin: 1.75rem auto 0; max-width: 580px; }
.shw-tool-hero .shw-chips { justify-content: center; }

.shw-tool-body { padding: 2.5rem 0 3.5rem; }
.shw-tool-body .lnm-narrow { max-width: 880px; margin-inline: auto; }

.shw-tool-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--lnm-line);
    border-radius: 18px;
    background: #fff;
}
.shw-tool-empty .ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--lnm-accent-soft);
    color: var(--lnm-accent);
    font-size: 1.8rem;
}
.shw-example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; }
.shw-example-grid a {
    padding: .85rem;
    border-radius: 14px;
    border: 1px solid var(--lnm-line);
    background: #fbfcfe;
    color: var(--lnm-primary);
    font-family: var(--lnm-plate-font);
    font-weight: 700;
    font-size: 1.15rem;
}
.shw-example-grid a:hover { border-color: rgba(199, 151, 45, .5); background: var(--lnm-accent-soft); }

/* ===================================================================
   FORTUNE / NUMEROLOGY — mobile app (phone)
   =================================================================== */
.sha-tool-chips { display: flex; gap: .45rem; overflow-x: auto; padding: .75rem 1rem 0; scrollbar-width: none; }
.sha-tool-chips::-webkit-scrollbar { display: none; }
.sha-tool-chips a {
    flex: 0 0 auto;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: var(--lnm-primary);
    font-family: var(--lnm-plate-font);
    font-weight: 700;
    font-size: .95rem;
}
.sha-ai {
    margin-top: .6rem;
    padding: .85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15,118,110,.1), var(--lnm-accent-soft));
    border: 1px solid rgba(199, 151, 45, .25);
}
.sha-ai-head { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--lnm-primary); font-size: .88rem; margin-bottom: .35rem; }
.sha-ai-head i { color: var(--lnm-accent); }
.sha-ai p { margin: 0; font-size: .85rem; color: #475467; }
.sha-ai .note { font-size: .72rem; color: var(--lnm-muted); margin-top: .4rem; }

/* ===================================================================
   MOBILE APP POLISH
   Compact phone-first refinements scoped to the mobile shell only.
   =================================================================== */
body.lnm-app {
    --sh-tab-h: 58px;
}

body.lnm-app .btn {
    min-height: 38px;
    padding: .5rem .78rem;
    font-size: .88rem;
}

body.lnm-app .sha-topbar {
    padding: calc(.55rem + var(--sh-safe-top)) .85rem .6rem;
    box-shadow: 0 8px 22px rgba(6, 18, 51, .18);
}

body.lnm-app .sha-topbar-row { gap: .55rem; }
body.lnm-app .sha-greet small { font-size: .68rem; }
body.lnm-app .sha-greet strong { font-size: .96rem; }
body.lnm-app .sha-topbar-actions { gap: .4rem; }

body.lnm-app .sha-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
}

body.lnm-app .sha-icon-btn .sha-dot {
    top: 7px;
    right: 8px;
}

body.lnm-app .sha-search {
    margin-top: .6rem;
    padding: .5rem .72rem;
    border-radius: 12px;
    font-size: .86rem;
}

body.lnm-app .sha-segment {
    gap: .4rem;
    padding: .7rem .85rem .2rem;
    scroll-padding-inline: .85rem;
}

body.lnm-app .sha-seg {
    padding: .42rem .72rem;
    font-size: .8rem;
}

body.lnm-app .sha-section {
    padding: 1rem .85rem 0;
}

body.lnm-app .sha-section-head {
    margin-bottom: .65rem;
}

body.lnm-app .sha-section-head h2 {
    font-size: 1rem;
}

body.lnm-app .sha-section-head a {
    font-size: .78rem;
    white-space: nowrap;
}

body.lnm-app .sha-promo {
    margin: .75rem .85rem 0;
    padding: 1rem;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(6, 18, 51, .22);
}

body.lnm-app .sha-promo::after {
    right: -54px;
    top: -54px;
}

body.lnm-app .sha-promo .sh-eyebrow {
    font-size: .66rem;
    gap: .35rem;
}

body.lnm-app .sha-promo h2 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: .4rem 0 .3rem;
}

body.lnm-app .sha-promo p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.55;
    margin-bottom: .75rem;
}

body.lnm-app .sha-rail {
    gap: .65rem;
    padding: .15rem .85rem .85rem;
    scroll-padding-inline: .85rem;
}

body.lnm-app .sha-num-card {
    width: min(68vw, 204px);
    border-radius: 12px;
}

body.lnm-app .sha-num-plate {
    aspect-ratio: 34 / 16;
    min-height: 0;
    font-size: clamp(1.35rem, 7.5vw, 1.95rem);
}

body.lnm-app .sha-num-plate.is-plate {
    font-size: clamp(1.55rem, 8.8vw, 2.25rem);
}

body.lnm-app .sha-num-body {
    padding: .58rem .65rem .65rem;
}

body.lnm-app .sha-num-body .row1 {
    align-items: flex-start;
}

body.lnm-app .sha-num-body .sub {
    font-size: .72rem;
}

body.lnm-app .sha-num-body .price {
    font-size: .84rem;
}

body.lnm-app .sha-perfect-badge {
    min-height: 22px;
    padding: .12rem .42rem;
    font-size: .6rem;
}

body.lnm-app .sha-num-tags {
    gap: .3rem;
    margin-top: .38rem;
}

body.lnm-app .sha-tag {
    padding: .08rem .42rem;
    font-size: .64rem;
}

body.lnm-app .sha-popular-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

body.lnm-app .sha-popular-groups a {
    min-height: 48px;
    padding: .55rem .62rem;
    border-radius: 12px;
    font-size: .72rem;
}

body.lnm-app .sha-popular-groups a i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: .86rem;
}

body.lnm-app .sha-quick {
    gap: .45rem;
}

body.lnm-app .sha-quick a {
    min-height: 74px;
    gap: .28rem;
    padding: .62rem .25rem;
    border-radius: 12px;
    font-size: .68rem;
    line-height: 1.25;
}

body.lnm-app .sha-quick a i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1.05rem;
}

body.lnm-app .sha-fortune {
    padding: 1rem;
    border-radius: 14px;
}

body.lnm-app .sha-fortune h2 {
    font-size: 1rem;
}

body.lnm-app .sha-fortune p {
    font-size: .8rem;
    line-height: 1.55;
    margin-bottom: .7rem;
}

body.lnm-app .sha-fortune-input {
    gap: .35rem;
    padding: .28rem .28rem .28rem .68rem;
    border-radius: 10px;
}

body.lnm-app .sha-fortune-input input {
    min-height: 38px;
    font-size: .85rem;
}

body.lnm-app .sha-contact {
    gap: .45rem;
}

body.lnm-app .sha-contact a {
    min-height: 44px;
    border-radius: 12px;
    font-size: .84rem;
}

body.lnm-app .sha-tabbar {
    padding: 5px 5px var(--sh-safe-bottom);
}

body.lnm-app .sha-tab {
    border-radius: 10px;
    font-size: .6rem;
}

body.lnm-app .sha-tab i {
    font-size: 1.08rem;
}

body.lnm-app .sha-tab-fab .fab {
    width: 44px;
    height: 44px;
    margin-top: -19px;
    border-width: 2px;
    font-size: 1.12rem;
}

body.lnm-app .sh-view-toggle {
    right: 8px;
    padding: .34rem .58rem;
    font-size: .7rem;
}

body.lnm-app .sha-listing-control {
    gap: .4rem;
    padding: .35rem .85rem .2rem;
}

body.lnm-app .sha-listing-count {
    font-size: .76rem;
}

body.lnm-app .sha-ctrl-btn {
    padding: .35rem .58rem;
    font-size: .76rem;
}

body.lnm-app .sha-listing-control select.sha-ctrl-btn {
    max-width: 38vw;
}

body.lnm-app .sha-active-filters {
    padding: .4rem .85rem 0;
}

body.lnm-app .sha-grid {
    gap: .55rem;
    padding: .65rem .85rem 0;
}

body.lnm-app .sha-gcard {
    border-radius: 12px;
}

body.lnm-app .sha-gcard-plate {
    aspect-ratio: 34 / 16;
    min-height: 0;
    font-size: clamp(1rem, 6.6vw, 1.48rem);
}

body.lnm-app .sha-gcard-plate.is-plate {
    --plate-province-scale: 0.38;
    font-size: clamp(1.36rem, 8.9vw, 2rem);
}

body.lnm-app .sha-gcard-badge {
    top: .32rem;
    left: .32rem;
    padding: .06rem .34rem;
    font-size: .56rem;
}

body.lnm-app .sha-gcard-body {
    padding: .5rem .56rem .58rem;
}

body.lnm-app .sha-gcard-num {
    font-size: .9rem;
}

body.lnm-app .sha-gcard-sub {
    font-size: .68rem;
}

body.lnm-app .sha-gcard-foot {
    align-items: flex-end;
    margin-top: .32rem;
}

body.lnm-app .sha-gcard-price {
    min-width: 0;
    font-size: .78rem;
    white-space: normal;
    line-height: 1.25;
}

body.lnm-app .sha-gcard-score {
    flex: 0 0 auto;
    padding: .08rem .35rem;
    font-size: .62rem;
}

body.lnm-app .sha-gcard-score.is-perfect {
    padding-inline: .42rem;
}

body.lnm-app .sha-pager {
    gap: .45rem;
    padding: 1.1rem .85rem;
}

body.lnm-app .sha-pager a,
body.lnm-app .sha-pager span {
    padding: .42rem .72rem;
    font-size: .78rem;
}

body.lnm-app .sha-filter-sheet.offcanvas-bottom {
    max-height: 82vh;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

body.lnm-app .sha-filter-sheet .offcanvas-header {
    padding: .85rem 1rem .45rem;
}

body.lnm-app .sha-filter-sheet .offcanvas-body {
    padding: .85rem 1rem;
}

body.lnm-app .sha-filter-actions {
    padding: .7rem 1rem calc(.7rem + var(--sh-safe-bottom));
}

body.lnm-app .sha-detail-media {
    padding: .9rem .85rem;
}

body.lnm-app .sha-detail-media .lnm-number-badge {
    max-width: 292px;
    font-size: clamp(1.65rem, 10vw, 2.7rem);
}

/* Graphic plates carry the artwork themselves, so the registration should fill
   the plate like a real auction plate (bigger than the plain-photo plates).
   The province line is em-relative, so it scales up with the number. */
.sha-detail-media .lnm-number-badge.lnm-plate-badge,
.sha-detail-media .lnm-number-badge[data-plate-style="graphic"] {
    font-size: clamp(2.35rem, 14vw, 3.7rem);
}
body.lnm-app .sha-detail-media .lnm-number-badge.lnm-plate-badge,
body.lnm-app .sha-detail-media .lnm-number-badge[data-plate-style="graphic"] {
    font-size: clamp(2.15rem, 13vw, 3.4rem);
}
.sha-num-plate.is-plate[data-plate-style="graphic"] {
    font-size: clamp(1.55rem, 8.8vw, 2.25rem);
    --plate-province-scale: 0.34;
}
.sha-gcard-plate.is-plate[data-plate-style="graphic"] {
    font-size: clamp(1.2rem, 7.6vw, 1.7rem);
    --plate-province-scale: 0.34;
}
body.lnm-app .sha-gcard-plate.is-plate[data-plate-style="graphic"] {
    --plate-province-scale: 0.38;
    font-size: clamp(1.36rem, 8.9vw, 2rem);
}

body.lnm-app .sha-detail-gallery {
    padding: .6rem .85rem 0;
}

body.lnm-app .sha-card {
    margin: .8rem .85rem;
    padding: .9rem;
    border-radius: 13px;
}

body.lnm-app .sha-detail-headline {
    gap: .55rem;
}

body.lnm-app .sha-detail-num {
    font-size: 1.28rem;
}

body.lnm-app .sha-status-chip {
    padding: .2rem .52rem;
    font-size: .68rem;
}

body.lnm-app .sha-price-row {
    margin-top: .72rem;
    padding-top: .72rem;
}

body.lnm-app .sha-price-row .price {
    font-size: 1.2rem;
}

body.lnm-app .sha-meta-grid {
    gap: .42rem;
    margin-top: .72rem;
}

body.lnm-app .sha-meta-grid div {
    padding: .48rem .55rem;
    border-radius: 9px;
}

body.lnm-app .sha-score-head {
    gap: .75rem;
}

body.lnm-app .sha-score-ring {
    width: 62px;
    height: 62px;
    font-size: 1.05rem;
}

body.lnm-app .sha-score-ring b {
    width: 46px;
    height: 46px;
}

body.lnm-app .sha-insight {
    padding: .62rem .68rem;
    border-radius: 10px;
}

body.lnm-app .sha-buybar {
    gap: .45rem;
    padding: .45rem .75rem;
}

body.lnm-app .sha-buybar-actions {
    gap: .38rem;
}

body.lnm-app .sha-buybar-actions .btn {
    min-height: 40px;
    padding-inline: .7rem;
}

@media (max-width: 339.98px) {
    body.lnm-app {
        --sh-tab-h: 56px;
    }

    body.lnm-app .sha-grid {
        grid-template-columns: 1fr;
    }

    body.lnm-app .sha-gcard {
        display: grid;
        grid-template-columns: 42% minmax(0, 1fr);
        align-items: stretch;
    }

    body.lnm-app .sha-gcard-plate {
        height: 100%;
        min-height: 92px;
    }

    body.lnm-app .sha-quick {
        grid-template-columns: repeat(2, 1fr);
    }

    body.lnm-app .sha-num-card {
        width: 76vw;
    }

    body.lnm-app .sha-listing-control select.sha-ctrl-btn {
        max-width: 46vw;
    }
}