/* ===================================================================
   BerTabien.NET production UI
   =================================================================== */

:root {
    /* Royal navy + gold premium palette */
    --lnm-primary: #0b1f4d;
    --lnm-primary-2: #15336f;
    --lnm-navy-deep: #061233;
    --lnm-accent: #c79a2e;
    --lnm-accent-2: #f1d27a;
    --lnm-accent-3: #fbe9b0;
    --lnm-accent-soft: rgba(199, 154, 46, .12);
    --lnm-teal: #0f766e;
    --lnm-bg: #f5f6f9;
    --lnm-surface: #ffffff;
    --lnm-ink: #1f2937;
    --lnm-muted: #667085;
    --lnm-line: #e5e7eb;
    --lnm-radius: 8px;
    --lnm-shadow-sm: 0 1px 2px rgba(11, 31, 77, .06);
    --lnm-shadow: 0 16px 40px rgba(11, 31, 77, .12);
    /* Reusable royal navy gradient + gold frame for hero / plates */
    --lnm-navy-grad: linear-gradient(155deg, #15336f 0%, #0b1f4d 45%, #061233 100%);
    --lnm-gold-grad: linear-gradient(145deg, #f6e3a4 0%, #d8af45 48%, #b8851f 100%);
    --lnm-font: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lnm-display: 'Playfair Display', Georgia, serif;
    /* Plate number font. Order of preference:
       1) "ThaiPlate" — drop the real DLT plate font into /assets/fonts/ to use
          it (see @font-face below); 2) "Chakra Petch" — loopless geometric
          Google font, closest free match to real Thai plates; 3) Kanit. */
    --lnm-plate-font: 'ThaiPlate', 'Chakra Petch', 'Kanit', 'Prompt', system-ui, sans-serif;
}

/* Optional: real Thai license-plate font. Not bundled by default, so the
   stack above falls back to Chakra Petch. To enable it, drop the font files
   in public_html/assets/fonts/ and UN-COMMENT the @font-face below — leaving
   it commented avoids 404s for the missing files.

@font-face {
    font-family: 'ThaiPlate';
    src: url('../fonts/thai-plate.woff2') format('woff2'),
         url('../fonts/thai-plate.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
}
*/

* { scroll-behavior: smooth; }

body {
    background: var(--lnm-bg);
    color: var(--lnm-ink);
    font-family: var(--lnm-font);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .fw-bold {
    font-weight: 600;
    letter-spacing: 0;
}

a {
    color: var(--lnm-primary);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a:hover { color: var(--lnm-accent); }

.lnm-public main { min-height: 62vh; }
.lnm-gold { color: var(--lnm-accent) !important; }
.text-navy { color: var(--lnm-primary) !important; }
.lnm-narrow-copy { max-width: 560px; }

.lnm-skip-link {
    position: fixed;
    left: 1rem;
    top: .75rem;
    z-index: 2000;
    transform: translateY(-150%);
    background: var(--lnm-primary);
    color: #fff;
    border-radius: var(--lnm-radius);
    padding: .55rem .8rem;
}
.lnm-skip-link:focus { transform: translateY(0); color: #fff; }

.lnm-eyebrow {
    color: var(--lnm-accent);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section { padding: 4.5rem 0; }
.lnm-section-head { max-width: 720px; margin-inline: auto; }

/* Buttons */
.btn {
    border-radius: var(--lnm-radius);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem 1rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: .45rem .75rem; }
.btn-lg { padding: .82rem 1.15rem; }

.lnm-btn-gold {
    background: #d6aa3d;
    border: 1px solid #c99b31;
    color: #141a26;
    box-shadow: 0 8px 18px rgba(199, 151, 45, .22);
}
.lnm-btn-gold:hover {
    background: #e0b64d;
    color: #141a26;
    box-shadow: 0 10px 24px rgba(199, 151, 45, .28);
}
.lnm-btn-outline {
    background: #fff;
    border: 1px solid var(--lnm-line);
    color: var(--lnm-primary);
}
.lnm-btn-outline:hover {
    border-color: var(--lnm-accent);
    background: var(--lnm-accent-soft);
    color: var(--lnm-primary);
}
.lnm-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--lnm-muted);
}
.lnm-btn-ghost:hover {
    background: #f3f4f6;
    border-color: var(--lnm-line);
    color: var(--lnm-primary);
}

/* Navbar */
.lnm-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(229, 231, 235, .9);
    backdrop-filter: blur(14px);
    padding: .82rem 0;
    transition: box-shadow .2s ease, padding .2s ease;
}
.lnm-navbar.scrolled {
    padding: .6rem 0;
    box-shadow: 0 8px 22px rgba(23, 32, 51, .08);
}
.lnm-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--lnm-primary);
    font-size: 1.08rem;
}
.lnm-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lnm-primary);
    color: var(--lnm-accent-2);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}
.lnm-navbar .nav-link {
    color: #475467 !important;
    font-weight: 500;
    padding: .55rem .75rem !important;
    border-radius: var(--lnm-radius);
}
.lnm-navbar .nav-link:hover {
    color: var(--lnm-primary) !important;
    background: #f2f4f7;
}

/* Shared cards and forms */
.lnm-card {
    background: var(--lnm-surface);
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    box-shadow: var(--lnm-shadow-sm);
}
.form-control,
.form-select {
    border-color: #d0d5dd;
    border-radius: var(--lnm-radius);
    padding: .6rem .78rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--lnm-accent);
    box-shadow: 0 0 0 .2rem var(--lnm-accent-soft);
}
.form-label {
    color: #344054;
    font-weight: 500;
}
.input-group-text {
    background: #fff;
    border-color: #d0d5dd;
    color: var(--lnm-muted);
}

/* Hero and page headers */
.lnm-hero,
.lnm-page-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--lnm-line);
}
.lnm-hero { padding: 4.5rem 0 3.75rem; }
.lnm-page-hero { padding: 2.4rem 0; }
.lnm-detail-hero { padding-bottom: 2rem; }
.lnm-hero h1 {
    max-width: 760px;
    font-size: 3rem;
    line-height: 1.18;
}
.lnm-hero .lead {
    max-width: 650px;
    color: var(--lnm-muted);
    font-size: 1.08rem;
}
.lnm-search { max-width: 680px; }
.lnm-search .input-group {
    background: #fff;
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    box-shadow: var(--lnm-shadow);
    padding: .25rem;
}
.lnm-search .form-control,
.lnm-search .input-group-text {
    border: none;
    box-shadow: none !important;
}
.lnm-search .input-group-text { padding-left: .9rem; }
.lnm-search-compact {
    max-width: none;
}
.lnm-search-compact .input-group {
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-quick-links,
.lnm-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.lnm-quick-links a,
.lnm-active-filters span,
.lnm-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--lnm-line);
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: .84rem;
    font-weight: 500;
    padding: .35rem .65rem;
}
.lnm-quick-links a:hover {
    border-color: var(--lnm-accent);
    background: var(--lnm-accent-soft);
}
.lnm-chip-strong {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}
.lnm-hero-proof {
    display: grid;
    gap: .6rem;
    color: #475467;
}
.lnm-hero-proof div {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.lnm-hero-proof i { color: var(--lnm-teal); }
.lnm-hero-panel {
    background: var(--lnm-primary);
    color: #fff;
    border-radius: var(--lnm-radius);
    padding: 1.1rem;
    box-shadow: 0 22px 50px rgba(23, 32, 51, .18);
}
.lnm-hero-panel .lnm-chip {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}
.lnm-showcase-list {
    display: grid;
    gap: .65rem;
}
.lnm-showcase-item,
.lnm-showcase-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--lnm-radius);
    background: rgba(255, 255, 255, .06);
    padding: .85rem;
    color: #fff;
}
.lnm-showcase-item:hover {
    color: #fff;
    border-color: rgba(231, 198, 108, .65);
    background: rgba(255, 255, 255, .1);
}
.lnm-showcase-number {
    font-family: var(--lnm-display);
    font-size: 1.35rem;
    font-weight: 700;
}
.lnm-showcase-meta {
    grid-column: 1;
    color: rgba(255, 255, 255, .66);
    font-size: .84rem;
}
.lnm-showcase-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--lnm-accent-2);
    font-weight: 700;
    white-space: nowrap;
}

/* Home sections */
.lnm-home-hero {
    position: relative;
    overflow: hidden;
    padding: 4.75rem 0 3.75rem;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.lnm-home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(199, 151, 45, .55), transparent);
}
.lnm-home-hero > .container {
    position: relative;
    z-index: 1;
}
.lnm-hero-grid {
    min-height: 480px;
}
.lnm-home-hero .lnm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(199, 151, 45, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    padding: .35rem .65rem;
}
.lnm-home-hero .lnm-eyebrow::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--lnm-teal);
}
.lnm-home-hero h1 {
    max-width: 720px;
    color: var(--lnm-primary);
    text-wrap: balance;
}
.lnm-home-hero .lead {
    max-width: 620px;
    margin-bottom: 1.35rem !important;
}
.lnm-home-search {
    max-width: 720px;
}
.lnm-home-search .input-group {
    border: 1px solid rgba(23, 32, 51, .1);
    box-shadow: 0 14px 34px rgba(23, 32, 51, .1);
}
.lnm-home-search .form-control {
    min-height: 54px;
}
.lnm-home-hero .lnm-quick-links {
    max-width: 720px;
    gap: .45rem;
}
.lnm-home-hero .lnm-quick-links a {
    background: rgba(255, 255, 255, .76);
    border-color: rgba(23, 32, 51, .1);
}
.lnm-home-hero .lnm-quick-links a::after {
    content: none;
}
.lnm-home-hero .lnm-hero-proof {
    max-width: 720px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.lnm-home-hero .lnm-hero-proof div {
    min-height: 56px;
    align-items: flex-start;
    border: 1px solid rgba(23, 32, 51, .09);
    border-radius: var(--lnm-radius);
    background: #fff;
    padding: .75rem .85rem;
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-home-contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    max-width: 720px;
}
.lnm-home-contact-strip a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: var(--lnm-radius);
    background: #f0fdfa;
    color: #0f5f59;
    font-weight: 600;
    padding: .55rem .8rem;
}
.lnm-home-contact-strip a:hover {
    color: #0b4f4a;
    border-color: rgba(15, 118, 110, .35);
    background: #ccfbf1;
}
.lnm-home-hero .lnm-hero-proof i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(15, 118, 110, .1);
    flex: 0 0 auto;
}
.lnm-home-showcase {
    position: relative;
    padding: 1.25rem;
    background:
        linear-gradient(180deg, rgba(37, 48, 71, .96), rgba(23, 32, 51, 1)),
        var(--lnm-primary);
}
.lnm-home-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(231, 198, 108, .2);
    pointer-events: none;
}
.lnm-home-showcase .lnm-showcase-list {
    gap: .75rem;
}
.lnm-home-showcase .lnm-eyebrow {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
.lnm-home-showcase .lnm-eyebrow::before {
    display: none;
}
.lnm-home-showcase .lnm-showcase-item {
    min-height: 88px;
    align-items: center;
    background: rgba(255, 255, 255, .075);
}
.lnm-home-showcase .lnm-showcase-number {
    font-size: 1.55rem;
    letter-spacing: .03em;
}
.lnm-home-showcase .lnm-showcase-price {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .1);
}
.lnm-home-categories {
    background: #fff;
}
.lnm-home-categories .lnm-section-head h2,
.lnm-featured-section h2,
.lnm-home-steps h2,
.lnm-home-cta-section h2 {
    text-wrap: balance;
}
.lnm-category-tile {
    min-height: 170px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-category-tile:hover {
    color: var(--lnm-primary);
    border-color: rgba(199, 151, 45, .45);
    box-shadow: var(--lnm-shadow);
}
.lnm-home-categories .lnm-category-tile {
    min-height: 188px;
    padding: 1.35rem;
    border-color: rgba(23, 32, 51, .08);
    background:
        linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}
.lnm-home-categories .lnm-category-tile > span:nth-child(2) {
    max-width: 520px;
}
.lnm-home-categories .lnm-category-tile > .bi-arrow-right {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f2f4f7;
    color: var(--lnm-primary);
}
.lnm-feature-icon,
.lnm-process-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--lnm-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lnm-accent-soft);
    color: var(--lnm-accent);
    font-size: 1.35rem;
    flex: 0 0 auto;
}
.lnm-band {
    background: var(--lnm-primary);
    color: #fff;
}
.lnm-featured-section {
    background: linear-gradient(180deg, #fff 0%, var(--lnm-bg) 100%);
}
.lnm-home-section-title {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lnm-line);
}
.lnm-popular-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.lnm-popular-groups a {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(199, 151, 45, .24);
    border-radius: var(--lnm-radius);
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    color: var(--lnm-primary);
    box-shadow: var(--lnm-shadow-sm);
    font-size: 1rem;
    font-weight: 700;
}
.lnm-popular-groups a:hover {
    color: var(--lnm-primary);
    border-color: rgba(199, 151, 45, .52);
    box-shadow: var(--lnm-shadow);
    transform: translateY(-2px);
}
.lnm-popular-groups a i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    font-size: 1.2rem;
}
.lnm-home-steps {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #111827 0%, #172033 54%, #123f43 100%);
}
.lnm-home-steps::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 96px);
    pointer-events: none;
}
.lnm-home-steps > .container {
    position: relative;
    z-index: 1;
}
.lnm-band .text-muted { color: rgba(255, 255, 255, .66) !important; }
.lnm-process-step {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--lnm-radius);
    padding: 1.25rem;
    background: rgba(255, 255, 255, .05);
}
.lnm-home-steps .lnm-process-step {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    background: rgba(255, 255, 255, .065);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
.lnm-home-steps .lnm-process-step h3 {
    line-height: 1.45;
}
.lnm-process-icon {
    margin-bottom: 1rem;
    background: rgba(231, 198, 108, .16);
    color: var(--lnm-accent-2);
}
.lnm-home-cta-section {
    padding: 4rem 0 4.5rem;
    background: linear-gradient(180deg, var(--lnm-bg) 0%, #fff 100%);
}
.lnm-home-contact-section {
    background: var(--lnm-bg);
    padding: 3.5rem 0;
}
.lnm-contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 1.5rem;
    align-items: center;
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    background: #fff;
    padding: 1.5rem;
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.lnm-contact-action {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 54px;
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    background: #fbfcfe;
    color: var(--lnm-primary);
    font-weight: 600;
    padding: .75rem .85rem;
    overflow-wrap: anywhere;
}
.lnm-contact-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--lnm-accent-soft);
    color: var(--lnm-accent);
    flex: 0 0 auto;
}
.lnm-contact-action:hover {
    color: var(--lnm-primary);
    border-color: rgba(199, 151, 45, .42);
    background: #fff;
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-home-cta-section .container {
    max-width: 820px;
    border: 1px solid rgba(23, 32, 51, .08);
    border-radius: var(--lnm-radius);
    background: #fff;
    padding: 2.35rem 1.25rem;
    box-shadow: var(--lnm-shadow-sm);
}

/* Product cards */
.lnm-product-card {
    display: block;
    overflow: hidden;
    color: var(--lnm-ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lnm-product-card:hover {
    color: var(--lnm-ink);
    transform: translateY(-3px);
    border-color: rgba(199, 151, 45, .5);
    box-shadow: var(--lnm-shadow);
}
.lnm-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
    padding: .75rem;
}
.lnm-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lnm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.lnm-product-type {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 2;
}
/* Brand watermark layer sitting over the thumbnail (gray placeholder or image). */
.lnm-product-brand {
    gap: .22rem;
    padding: .12rem .4rem;
    background: rgba(255, 255, 255, .55);
    border-color: rgba(23, 32, 51, .07);
    color: rgba(23, 32, 51, .58);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.lnm-product-brand::before {
    content: "";
    width: .32rem;
    height: .32rem;
    border-radius: 50%;
    background: var(--lnm-accent);
    opacity: .7;
    flex: 0 0 auto;
}
.lnm-product-featured {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    border-color: rgba(199, 151, 45, .35);
    background: #fff8e6;
    color: #8a6111;
}
/* "จองแล้ว / ขายแล้ว" stamp, centred over the plate artwork. */
.lnm-reserved-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
    z-index: 4;
    padding: .26em 1.15em;
    border-radius: 7px;
    background: rgba(192, 16, 72, .94);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .03em;
    line-height: 1.25;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 6px 18px rgba(125, 8, 40, .35);
    pointer-events: none;
}
.lnm-number-badge {
    width: 100%;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lnm-radius);
    background: #172033;
    color: var(--lnm-accent-2);
    font-family: var(--lnm-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    padding: 1rem;
    box-shadow: inset 0 0 0 1px rgba(231, 198, 108, .25);
    overflow-wrap: anywhere;
}
.lnm-number-lg {
    min-height: 310px;
    font-size: 3rem;
    padding: 2rem;
}
.lnm-product-body {
    padding: 1rem;
}
/* Bootstrap 5 ships no min-width utility, but the product card markup relies on
   `.min-w-0` to let the left column shrink so its `.text-truncate` subtitle
   actually clips — without it a long subtitle widens the column and shoves the
   price off the card's right edge. */
.min-w-0 {
    min-width: 0;
}
/* Admin "จัดการสินค้า" status summary cards. */
.lnm-stat-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.lnm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .1);
    color: inherit;
}
.lnm-stat-card.is-active {
    border-color: var(--lnm-primary);
    box-shadow: inset 0 0 0 1px var(--lnm-primary);
}
.lnm-stat-card .lnm-stat-num {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lnm-primary);
}
.lnm-stat-card .lnm-stat-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    display: inline-block;
}
.lnm-product-number {
    color: var(--lnm-primary);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.lnm-product-price {
    color: #9b6d12;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0; /* keep the price intact; never squeeze/clip it */
}
.lnm-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .7rem;
    margin-top: .9rem;
    color: var(--lnm-muted);
    font-size: .82rem;
}
.lnm-product-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Reference tags (#เลขตอง ...) — plain chips on cards, clickable on detail. */
.lnm-product-tags,
.lnm-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .7rem;
}
.lnm-tag {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border: 1px solid rgba(199, 151, 45, .3);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
a.lnm-tag:hover {
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    border-color: #b8851f;
}

/* "เหมาะกับ…" suitability badge on product cards. */
.lnm-product-suit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .55rem;
    padding: .14rem .6rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    border: 1px solid rgba(199, 151, 45, .3);
    color: #8a6111;
    font-size: .76rem;
    font-weight: 600;
    max-width: 100%;
}
.lnm-product-suit > i { font-size: .7rem; }

/* Share buttons (product detail). */
.lnm-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
}
.lnm-share-label {
    color: var(--lnm-muted);
    font-size: .85rem;
    font-weight: 600;
}
.lnm-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: #344054;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lnm-share-btn:hover { background: #f2f4f7; color: var(--lnm-primary); }
.lnm-share-btn.line { background: #06c755; border-color: #06c755; color: #fff; }
.lnm-share-btn.line:hover { background: #05b34c; color: #fff; }
.lnm-share-btn.fav.is-active { background: #fff1f4; border-color: #f3b6c2; color: #e11d48; }

/* Favorites — heart toggle on cards + header link/badge. */
.lnm-card-foot { display: flex; align-items: stretch; gap: .4rem; }
.lnm-card-foot .lnm-compare-toggle { flex: 1 1 auto; width: auto; }
.lnm-fav-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    border-radius: var(--lnm-radius);
    color: #98a2b3;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lnm-fav-toggle:hover { color: #f0476a; border-color: #f3b6c2; background: #fff5f7; }
.lnm-fav-toggle.is-active { color: #e11d48; border-color: #f3b6c2; background: #fff1f4; }
.lnm-fav-link { position: relative; }
.lnm-fav-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
/* Header favorites link with a "โปรด" label (desktop). */
.shw-actions .lnm-fav-link-labeled {
    width: auto;
    border-radius: 999px;
    gap: .35rem;
    padding: 0 .8rem;
}
.lnm-fav-text { font-size: .9rem; font-weight: 600; }

/* Toast confirming a save, with a shortcut to the favorites list. */
.lnm-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(20px);
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 92vw;
    padding: .6rem .55rem .6rem .9rem;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.lnm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.lnm-toast > i { color: #fb7185; }
.lnm-toast a {
    color: #111827;
    background: #fcd34d;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    padding: .25rem .7rem;
    border-radius: 999px;
}
.lnm-badge-score {
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border: 1px solid rgba(199, 151, 45, .35);
    border-radius: 999px;
    padding: .3rem .65rem;
}

/* Listing page */
.lnm-market { margin-bottom: 3rem; }
.lnm-filter-panel {
    position: sticky;
    top: 92px;
}
.lnm-result-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.lnm-empty-state i {
    color: var(--lnm-accent);
    font-size: 2rem;
}
.pagination .page-link {
    color: var(--lnm-primary);
    border-color: var(--lnm-line);
}
.pagination .active .page-link {
    background: var(--lnm-primary);
    border-color: var(--lnm-primary);
}

/* Detail and analysis */
.lnm-product-media {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}
.lnm-product-media img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 6px;
}
.lnm-gallery-strip {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.lnm-gallery-strip img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    background: #fff;
}
.lnm-purchase-panel {
    position: sticky;
    top: 92px;
}
.lnm-detail-price {
    color: #9b6d12;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
}
.lnm-score-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    background: var(--lnm-accent-soft);
    color: #8a6111;
    font-weight: 700;
    padding: .45rem .7rem;
    white-space: nowrap;
}
.lnm-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.lnm-detail-meta-grid div,
.lnm-insight-box {
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    background: #fbfcfe;
    padding: .85rem;
}
.lnm-detail-meta-grid span {
    display: block;
    color: var(--lnm-muted);
    font-size: .82rem;
}
.lnm-detail-meta-grid strong {
    display: block;
    color: var(--lnm-primary);
    font-size: 1rem;
    overflow-wrap: anywhere;
}
.lnm-description {
    color: #475467;
    border-top: 1px solid var(--lnm-line);
    padding-top: 1rem;
}
.lnm-detail-actions {
    display: grid;
    gap: .65rem;
}
.lnm-reserved-notice {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    border: 1px solid #f1d9a8;
    background: #fff8ec;
    border-radius: 12px;
    color: #8a6d3b;
}
.lnm-reserved-notice > i {
    font-size: 1.25rem;
    line-height: 1.4;
    color: #c8962f;
}
.lnm-reserved-notice strong {
    color: #6b4f1d;
}
.lnm-analysis-panel .progress,
.lnm-analysis-score .progress {
    width: 190px;
    height: 8px;
    background: #edf0f5;
}
.lnm-pair-list {
    display: grid;
    gap: .6rem;
}
.lnm-pair-list li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: .8rem;
    border-bottom: 1px solid var(--lnm-line);
    padding-bottom: .6rem;
}
.lnm-pair-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.lnm-pair-list strong {
    color: var(--lnm-accent);
}
.lnm-fortune-form .form-label {
    margin-bottom: .5rem;
}

/* Footer */
.lnm-footer {
    background: #111827;
    color: rgba(255, 255, 255, .72);
    margin-top: 4rem;
}
.lnm-footer h6 { color: #fff; }
.lnm-footer a {
    color: rgba(255, 255, 255, .7);
    display: inline-block;
    padding: .18rem 0;
}
.lnm-footer a:hover { color: var(--lnm-accent-2); }
.lnm-footer .lnm-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Breadcrumb */
.breadcrumb a { color: var(--lnm-muted); }
.breadcrumb .active { color: var(--lnm-ink); }

/* ===================================================================
   Admin layout
   =================================================================== */
.lnm-admin-body { background: #f4f6f8; }

.lnm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 1045;
    background: #111827;
    color: rgba(255, 255, 255, .82);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
    overflow-y: auto;
}
.lnm-sidebar-brand {
    padding: 1.3rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lnm-sidebar-brand a { color: #fff; }
.lnm-sidebar-nav {
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.lnm-sidebar-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1rem;
    border-radius: var(--lnm-radius);
    color: rgba(255, 255, 255, .78);
    font-weight: 400;
    font-size: .98rem;
    transition: background-color .2s ease, color .2s ease;
}
.lnm-sidebar-link i {
    font-size: 1.15rem;
    width: 1.3rem;
    text-align: center;
}
.lnm-sidebar-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}
.lnm-sidebar-link.active {
    background: rgba(199, 151, 45, .16);
    color: var(--lnm-accent-2);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--lnm-accent);
}
.lnm-sidebar-sep {
    border-color: rgba(255, 255, 255, .08);
    margin: .75rem .5rem;
}
.lnm-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1044;
    display: none;
}
.lnm-sidebar-backdrop.show { display: block; }
.lnm-admin-main {
    margin-left: 260px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.lnm-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    padding: .85rem 1.5rem;
    border-bottom: 1px solid var(--lnm-line);
    box-shadow: 0 1px 8px rgba(23, 32, 51, .04);
}
.lnm-admin-content {
    padding: 1.75rem 1.5rem;
    flex: 1;
}
.lnm-topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tables and blog */
.table-responsive > .table { min-width: 560px; }
.badge-soft {
    background: var(--lnm-accent-soft);
    color: #8a6111;
    border-radius: 999px;
}
.lnm-spec li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--lnm-line);
}
.lnm-spec li:last-child { border-bottom: none; }
.lnm-blog-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eef1f5;
}
.lnm-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lnm-blog-thumb-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: #172033;
}
.lnm-article-body {
    font-size: 1.08rem;
    line-height: 1.9;
    color: #2f3848;
}
.lnm-article-shell {
    max-width: 820px;
}
/* On the mobile shell the Bootstrap container only gives ~12px of side padding,
   so long-form article text reads too close to the screen edge. Inset it a touch
   more than the app's 1rem rhythm for comfortable reading. Mobile-only so the
   centered desktop layout (820px max-width) is untouched. */
body.lnm-app .lnm-article-shell {
    padding-inline: 1.15rem;
}
.lnm-article-body h2 {
    font-size: 1.5rem;
    margin: 1.6rem 0 .8rem;
}
.lnm-article-body h3 {
    font-size: 1.25rem;
    margin: 1.3rem 0 .6rem;
}
.lnm-article-body p {
    margin-bottom: 1.1rem;
}
.lnm-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--lnm-radius);
    margin: 1rem 0;
}
.lnm-article-body ul,
.lnm-article-body ol {
    margin-bottom: 1.1rem;
    padding-left: 1.4rem;
}
.lnm-article-body a {
    color: #9b6d12;
    text-decoration: underline;
}
.lnm-article-body blockquote {
    border-left: 4px solid var(--lnm-accent);
    background: var(--lnm-accent-soft);
    padding: .8rem 1.2rem;
    border-radius: 0 var(--lnm-radius) var(--lnm-radius) 0;
    margin: 1.2rem 0;
}

/* Responsive refinements */
@media (max-width: 991.98px) {
    .lnm-hero { padding: 3rem 0; }
    .lnm-home-hero { padding: 3.4rem 0 3rem; }
    .lnm-hero-grid { min-height: auto; }
    .lnm-hero h1 { font-size: 2.35rem; }
    .lnm-home-hero h1,
    .lnm-home-hero .lead,
    .lnm-home-search,
    .lnm-home-hero .lnm-quick-links,
    .lnm-home-hero .lnm-hero-proof,
    .lnm-home-contact-strip {
        max-width: none;
    }
    .lnm-home-showcase {
        margin-top: .25rem;
    }
    .lnm-filter-panel,
    .lnm-purchase-panel {
        position: static;
    }
    .lnm-result-toolbar {
        flex-direction: column;
    }
    .lnm-admin-main { margin-left: 0; }
    .lnm-sidebar { transform: translateX(-100%); }
    .lnm-sidebar.show { transform: none; }
}

@media (max-width: 767.98px) {
    .section { padding: 3rem 0; }
    .lnm-home-categories,
    .lnm-featured-section,
    .lnm-home-steps,
    .lnm-home-contact-section,
    .lnm-home-cta-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .lnm-page-hero { padding: 1.75rem 0; }
    .lnm-home-hero {
        padding: 2.75rem 0;
    }
    .lnm-home-hero .lnm-hero-proof {
        grid-template-columns: 1fr;
    }
    .lnm-search .input-group {
        padding: .2rem;
    }
    .lnm-search .btn {
        padding-left: .8rem;
        padding-right: .8rem;
    }
    .lnm-category-tile {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .lnm-home-categories .lnm-category-tile {
        min-height: auto;
        padding: 1rem;
    }
    .lnm-category-tile > .bi-arrow-right {
        display: none;
    }
    .lnm-home-section-title {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .lnm-home-section-title .btn {
        width: 100%;
    }
    .lnm-popular-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lnm-popular-groups a {
        min-height: 76px;
    }
    .lnm-home-steps .lnm-process-step {
        min-height: auto;
    }
    .lnm-contact-panel {
        grid-template-columns: 1fr;
        padding: 1.15rem;
    }
    .lnm-contact-actions {
        grid-template-columns: 1fr;
    }
    .lnm-detail-meta-grid {
        grid-template-columns: 1fr;
    }
    .lnm-product-media {
        min-height: 260px;
    }
    .lnm-number-lg {
        /* Let aspect-ratio (34/16) and the cqi font drive the size on phones
           too; a fixed min-height/font-size here forced the plate taller than
           its real proportion (looked square) and broke auto-scaling. */
        min-height: 0;
        max-width: none;
    }
    .lnm-pair-list li {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
}

@media (max-width: 575.98px) {
    .lnm-hero h1 { font-size: 2rem; }
    .lnm-hero .lead { font-size: 1rem; }
    .lnm-home-search .input-group {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .25rem;
    }
    .lnm-home-search .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
    }
    .lnm-home-hero .lnm-quick-links a {
        flex: 1 1 calc(50% - .5rem);
        justify-content: center;
    }
    .lnm-popular-groups {
        grid-template-columns: 1fr;
    }
    .lnm-home-contact-strip a {
        flex: 1 1 100%;
        justify-content: center;
    }
    .lnm-showcase-item {
        grid-template-columns: 1fr;
    }
    .lnm-showcase-price {
        grid-column: 1;
        grid-row: auto;
    }
    .lnm-home-showcase .lnm-showcase-price {
        padding-left: 0;
        border-left: 0;
    }
    .lnm-home-cta-section .container {
        width: calc(100% - 1.5rem);
        padding: 1.5rem 1rem;
    }
    .lnm-result-toolbar form {
        width: 100%;
        justify-content: space-between;
    }
    .lnm-admin-content {
        padding: 1.1rem .85rem;
    }
    .lnm-topbar {
        padding: .7rem 1rem;
    }
    .table {
        font-size: .9rem;
    }
    .lnm-thumb {
        min-height: 140px;
    }
    .lnm-number-badge {
        font-size: 1.35rem;
        letter-spacing: .05em;
    }
    #bulkForm .row > .col-auto {
        width: 100%;
    }
    #bulkForm .form-select,
    #bulkForm input[type="number"] {
        width: 100% !important;
        margin-bottom: .4rem;
    }
    #bulkForm .btn {
        width: 100%;
    }
    #img-sortable {
        gap: .75rem !important;
        justify-content: center;
    }
}

/* ===================================================================
   Mobile app-style layer (separate mobile UX, < 992px)
   Desktop keeps its existing layout; these components only appear and
   take over on phones/tablets to make real-world use comfortable.
   =================================================================== */
:root {
    --lnm-bottom-nav-h: 60px;
    --lnm-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hidden by default — revealed only on mobile breakpoints below. */
.lnm-mobile-only { display: none !important; }

@media (max-width: 991.98px) {
    .lnm-mobile-only { display: flex !important; }

    /* Reserve space so the fixed bottom nav never hides page content. */
    body.lnm-public {
        padding-bottom: calc(var(--lnm-bottom-nav-h) + var(--lnm-safe-bottom));
    }
    /* Detail pages also carry a sticky buy-bar above the nav. */
    body.lnm-public:has(.lnm-mobile-buybar) {
        padding-bottom: calc(var(--lnm-bottom-nav-h) + 70px + var(--lnm-safe-bottom));
    }

    /* The desktop top navbar stays, but trims down for small screens. */
    .lnm-navbar { padding: .5rem 0; }
    .lnm-navbar .navbar-brand { font-size: 1rem; }

    /* ---- Bottom tab bar ---- */
    .lnm-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 0;
        height: calc(var(--lnm-bottom-nav-h) + var(--lnm-safe-bottom));
        padding: 6px 4px var(--lnm-safe-bottom);
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--lnm-line);
        backdrop-filter: blur(14px);
        box-shadow: 0 -6px 20px rgba(23, 32, 51, .07);
        /* Clip any sub-pixel horizontal overflow while letting the raised
           center button still poke above the bar (overflow-y stays visible). */
        overflow-x: clip;
    }
    .lnm-bottom-link {
        flex: 1 1 0;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 2px 1px;
        border-radius: 10px;
        color: var(--lnm-muted);
        font-size: .66rem;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
    }
    .lnm-bottom-link i { font-size: 1.2rem; line-height: 1; }
    .lnm-bottom-link span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lnm-bottom-link:active { background: #f2f4f7; }
    .lnm-bottom-link.active {
        color: var(--lnm-primary);
        font-weight: 600;
    }
    .lnm-bottom-link.active i { color: var(--lnm-accent); }

    /* Center "search" action gets a raised gold pill, native-app style. */
    .lnm-bottom-search { color: var(--lnm-primary); }
    .lnm-bottom-search-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-top: -22px;
        margin-bottom: 1px;
        border-radius: 50%;
        background: #d6aa3d;
        border: 3px solid #fff;
        color: #141a26;
        font-size: 1.25rem;
        box-shadow: 0 8px 18px rgba(199, 151, 45, .35);
    }
    .lnm-bottom-search-fab i { font-size: 1.25rem; }
    /* Keep the raised FAB icon dark even when its tab is the active one. */
    .lnm-bottom-link.active .lnm-bottom-search-fab i { color: #141a26; }

    /* ---- Sticky purchase bar on product detail ---- */
    .lnm-mobile-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--lnm-bottom-nav-h) + var(--lnm-safe-bottom));
        z-index: 1039;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .9rem;
        background: #fff;
        border-top: 1px solid var(--lnm-line);
        box-shadow: 0 -8px 22px rgba(23, 32, 51, .1);
    }
    .lnm-mobile-buybar-info {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        min-width: 0;
    }
    .lnm-mobile-buybar-label {
        color: var(--lnm-muted);
        font-size: .7rem;
    }
    .lnm-mobile-buybar-price {
        color: #9b6d12;
        font-size: 1.05rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .lnm-mobile-buybar-actions {
        display: flex;
        gap: .5rem;
        margin-left: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
    }
    .lnm-mobile-buybar-actions .btn {
        min-height: 46px;
        padding-left: .9rem;
        padding-right: .9rem;
    }
    .lnm-mobile-buybar-actions .btn-success span,
    .lnm-mobile-buybar-actions .lnm-btn-gold span { font-weight: 600; }

    /* ---- Filter as a bottom sheet ---- */
    .lnm-filter-canvas.offcanvas-bottom {
        height: auto;
        max-height: 86vh;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .lnm-filter-canvas .offcanvas-header {
        position: relative;
        justify-content: center;
        padding: 1rem 1.25rem .5rem;
        border-bottom: 1px solid var(--lnm-line);
    }
    /* Grab handle for the sheet. */
    .lnm-filter-canvas .offcanvas-header::before {
        content: "";
        position: absolute;
        top: .45rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d0d5dd;
    }
    .lnm-filter-canvas .offcanvas-header .btn-close {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-25%);
    }
    .lnm-filter-canvas .lnm-filter-panel {
        flex: 1 1 auto;
        overflow-y: auto;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding-bottom: calc(1rem + var(--lnm-safe-bottom)) !important;
    }
    .lnm-filter-apply {
        position: sticky;
        bottom: 0;
        margin-top: .5rem;
    }

    /* ---- Results toolbar ---- */
    .lnm-result-toolbar { gap: .75rem; }
    .lnm-toolbar-controls {
        width: 100%;
        justify-content: space-between;
    }
    .lnm-filter-trigger { font-weight: 600; }
    .lnm-filter-count {
        background: var(--lnm-accent);
        color: #141a26;
        font-size: .7rem;
    }

    /* Denser two-up product grid on phones for faster scanning. */
    .lnm-product-body { padding: .8rem; }
    .lnm-product-number { font-size: 1.05rem; }
}

@media (max-width: 575.98px) {
    .lnm-bottom-link span { font-size: .64rem; }
    .lnm-mobile-buybar-actions .btn span { display: inline; }
    /* Keep both CTAs usable on the narrowest phones. */
    .lnm-mobile-buybar { padding: .55rem .7rem; gap: .5rem; }
    .lnm-mobile-buybar-actions .btn {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ===================================================================
   Royal navy + gold theme (premium look)
   Loaded last so it re-skins the shared components above.
   =================================================================== */

/* Gold buttons get a richer metallic gradient. */
.lnm-btn-gold {
    background: var(--lnm-gold-grad);
    border: 1px solid #b8851f;
    color: #3a2a05;
    box-shadow: 0 8px 18px rgba(184, 133, 31, .28);
}
.lnm-btn-gold:hover {
    background: linear-gradient(145deg, #fbeab4 0%, #e2bb53 48%, #c4912a 100%);
    color: #3a2a05;
    box-shadow: 0 10px 24px rgba(184, 133, 31, .34);
}

/* Top navbar becomes a royal header that blends into the hero. */
.lnm-navbar {
    background: var(--lnm-navy-grad);
    border-bottom: 1px solid rgba(241, 210, 122, .22);
}
.lnm-navbar.scrolled { box-shadow: 0 8px 22px rgba(6, 18, 51, .35); }
.lnm-navbar .navbar-brand { color: #fff; }
.lnm-brand-mark {
    background: var(--lnm-gold-grad);
    color: var(--lnm-navy-deep);
    box-shadow: 0 2px 8px rgba(184, 133, 31, .4);
}
.lnm-navbar .nav-link { color: rgba(255, 255, 255, .82) !important; }
.lnm-navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .1);
}
.lnm-navbar .lnm-btn-ghost { color: rgba(255, 255, 255, .82); }
.lnm-navbar .lnm-btn-ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}
.lnm-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .28);
}
.lnm-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- Home hero: deep royal navy with gold accents ---- */
.lnm-home-hero {
    background: var(--lnm-navy-grad);
    border-bottom: 1px solid rgba(241, 210, 122, .2);
}
.lnm-home-hero::after {
    background: linear-gradient(90deg, transparent, rgba(241, 210, 122, .7), transparent);
}
.lnm-home-hero h1 { color: #fff; }
.lnm-home-hero .lead { color: rgba(255, 255, 255, .82); }
.lnm-home-hero .lnm-eyebrow {
    color: var(--lnm-accent-2);
    border-color: rgba(241, 210, 122, .35);
    background: rgba(255, 255, 255, .06);
}
.lnm-home-hero .lnm-eyebrow::before { background: var(--lnm-accent-2); }
.lnm-home-hero .lnm-quick-links a {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
.lnm-home-hero .lnm-quick-links a:hover {
    background: rgba(241, 210, 122, .16);
    border-color: rgba(241, 210, 122, .5);
    color: #fff;
}
.lnm-home-hero .lnm-hero-proof { color: rgba(255, 255, 255, .82); }
.lnm-home-hero .lnm-hero-proof div {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}
.lnm-home-hero .lnm-hero-proof i {
    background: rgba(241, 210, 122, .16);
    color: var(--lnm-accent-2);
}
.lnm-home-contact-strip a {
    border-color: rgba(241, 210, 122, .28);
    background: rgba(255, 255, 255, .06);
    color: var(--lnm-accent-3);
}
.lnm-home-contact-strip a:hover {
    border-color: rgba(241, 210, 122, .55);
    background: rgba(241, 210, 122, .12);
    color: #fff;
}
/* Home search keeps a white field but a navy submit, like the mockup. */
.lnm-home-search .btn,
.lnm-home-search .btn.lnm-btn-gold {
    background: var(--lnm-primary);
    border: 1px solid var(--lnm-primary);
    color: #fff;
    box-shadow: none;
}
.lnm-home-search .btn:hover {
    background: var(--lnm-primary-2);
    color: #fff;
}

/* ---- License-plate styled number badge ---- */
/* Make the badge's parent a sizing container so the number font scales
   proportionally with the plate width (cqi units below). */
.lnm-thumb-inner,
.lnm-product-media { container-type: inline-size; }
/* When the media card shows a plate badge (no photo), cap the card so the
   cqi-based number size stays in sync with the plate and it doesn't balloon
   on wide desktops. Photo listings are unaffected. */
.lnm-product-media:has(.lnm-number-lg) {
    max-width: 520px;
    margin-inline: auto;
}

.lnm-number-badge {
    /* Real Thai car plate proportions: 34 cm × 16 cm (≈ 2.125 : 1). */
    aspect-ratio: 34 / 16;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 0.5rem 1.2rem;
    /* Realistic plate artwork (navy base, gold frame, gloss, crown, prang
       skyline, sparkles) drawn as a crisp SVG, stretched to the plate box. */
    /* --plate-art (set inline per product) overrides the default plate art so
       different plate styles render without touching CSS. */
    background: var(--plate-art, url("../images/plate-bg.svg?v=2")) center / 100% 100% no-repeat, var(--lnm-navy-deep);
    border-radius: 14px;
    color: var(--lnm-accent-2);
    /* Plate-style font instead of the decorative serif. */
    font-family: var(--lnm-plate-font);
    font-weight: 600;
    letter-spacing: .06em;
    /* Stack number + province like a real Thai plate. */
    flex-direction: column;
    gap: 0.04em;
    /* Width-, height- and font-size scale together with the plate. */
    font-size: 12.5cqi;
    line-height: 1.05;
    box-shadow: 0 14px 30px rgba(6, 18, 51, .28);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
/* Number row (dominant) and province row (smaller), both scale with cqi. */
.lnm-plate-number {
    display: block;
    max-width: 100%;
    font-size: calc(1em * var(--plate-fit-scale, 1));
    line-height: 1;
    overflow-wrap: normal;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}
.lnm-plate-province {
    font-size: 0.3em;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.1;
    color: var(--lnm-accent-3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* Real Thai plates: the number fills most of the plate height, with a small
   province line beneath. Plate badges enlarge the number accordingly; phone
   fallbacks keep the smaller, longer-number-friendly size. */
.lnm-plate-badge {
    /* Real plates: the characters fill most of the plate face. Larger cqi +
       tight padding so the number reads big against the frame. */
    font-size: 24cqi;
    gap: 0.02em;
    letter-spacing: .01em;
    padding: 0.14em 0.5em;
}
.lnm-number-lg.lnm-plate-badge {
    font-size: 21cqi;
    padding: 0.2em 0.6em;
}
/* Graphic plates use a light scenic face, so flip the number to dark ink
   (the default badge text is gold-on-navy). */
.lnm-number-badge[data-plate-style="graphic"] {
    color: #1b1e26;
    text-shadow: none;
}
.lnm-number-badge[data-plate-style="graphic"] .lnm-plate-province {
    color: #3a3f4a;
    text-shadow: none;
}
.lnm-number-lg {
    aspect-ratio: 34 / 16;
    min-height: 0;
    height: auto;
    /* Cap the plate on wide desktops so it doesn't balloon to the full
       col-lg-7 width; keep it centred within the media card. */
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: 1rem 1.8rem;
    /* Same plate proportion at detail size. */
    font-size: 13cqi;
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(6, 18, 51, .32);
}

/* Prices read in confident navy (mockup style). */
.lnm-product-price,
.lnm-detail-price { color: var(--lnm-primary); }

/* Featured badge -> gold metallic pill. */
.lnm-product-featured {
    background: var(--lnm-gold-grad);
    border-color: #b8851f;
    color: #3a2a05;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(184, 133, 31, .3);
}

/* ---- Bottom nav: navy/gold, with a royal navy search FAB ---- */
.lnm-bottom-link.active { color: var(--lnm-primary); }
.lnm-bottom-link.active i { color: var(--lnm-accent); }
.lnm-bottom-search-fab {
    background: var(--lnm-primary);
    border: 3px solid #fff;
    color: #fff;
    box-shadow:
        0 0 0 2px rgba(241, 210, 122, .9),
        0 10px 20px rgba(11, 31, 77, .4);
}
.lnm-bottom-link.active .lnm-bottom-search-fab i { color: #fff; }

/* Footer + admin sidebar deepen to match the royal navy. */
.lnm-footer { background: var(--lnm-navy-deep); }
.lnm-sidebar { background: linear-gradient(180deg, #0b1f4d 0%, #061233 100%); }

/* ---- Expandable advanced filter under the hero search ---- */
.lnm-adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    font-weight: 500;
}
.lnm-adv-toggle:hover {
    border-color: rgba(241, 210, 122, .5);
    background: rgba(241, 210, 122, .14);
    color: #fff;
}
.lnm-adv-caret { transition: transform .2s ease; font-size: .8rem; }
.lnm-adv-toggle[aria-expanded="true"] .lnm-adv-caret { transform: rotate(180deg); }
.lnm-adv-panel { max-width: 720px; }
.lnm-adv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--lnm-radius);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.lnm-adv-span2 { grid-column: 1 / -1; }
.lnm-adv-field label {
    display: block;
    margin-bottom: .2rem;
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
    font-weight: 500;
}

/* ---- Home: most-viewed articles list ---- */
.lnm-popular-list li + li { border-top: 1px solid var(--lnm-line); }
.lnm-popular-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 0;
    color: var(--lnm-ink);
}
.lnm-popular-item:hover { color: var(--lnm-primary); }
.lnm-popular-item:hover .lnm-popular-title { color: var(--lnm-accent); }
.lnm-popular-rank {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    background: var(--lnm-accent-soft);
    color: #8a6111;
}
.lnm-popular-item:first-child .lnm-popular-rank {
    background: var(--lnm-gold-grad);
    color: #3a2a05;
}
.lnm-popular-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    line-height: 1.4;
}
.lnm-popular-meta {
    display: block;
    margin-top: .15rem;
    color: var(--lnm-muted);
    font-size: .78rem;
}

/* ---- Home numerology call-to-action ---- */
.lnm-fortune-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: 1.5rem 2.25rem;
    align-items: center;
    padding: 2.25rem;
    border: 1px solid rgba(241, 210, 122, .22);
    border-radius: var(--lnm-radius);
    background: var(--lnm-navy-grad);
    box-shadow: var(--lnm-shadow);
    color: rgba(255, 255, 255, .82);
}
.lnm-fortune-cta::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 210, 122, .18), transparent 70%);
    pointer-events: none;
}
.lnm-fortune-cta .lnm-eyebrow { color: var(--lnm-accent-2); }
.lnm-fortune-cta-form { position: relative; z-index: 1; max-width: none; }
.lnm-fortune-cta .lnm-quick-links a {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}
.lnm-fortune-cta .lnm-quick-links a:hover {
    background: rgba(241, 210, 122, .16);
    border-color: rgba(241, 210, 122, .5);
    color: #fff;
}
@media (max-width: 767.98px) {
    .lnm-fortune-cta {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
    }
}

/* Notification bell in the mobile app-bar (matches the header mockup). */
.lnm-navbar-bell {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 1.15rem;
    flex: 0 0 auto;
}
.lnm-navbar-bell:hover {
    color: var(--lnm-accent-2);
    border-color: rgba(241, 210, 122, .5);
    background: rgba(241, 210, 122, .12);
}

/* ---- Listing page hero: royal navy header with a car image ---- */
.lnm-listing-hero {
    position: relative;
    overflow: hidden;
    background: var(--lnm-navy-grad);
    border-bottom: 1px solid rgba(241, 210, 122, .22);
    color: #fff;
    padding: 2rem 0 2.25rem;
}
.lnm-listing-hero-inner {
    position: relative;
    z-index: 2;
}
.lnm-listing-hero h1 { color: #fff; }
.lnm-listing-hero .lnm-eyebrow { color: var(--lnm-accent-2); }
.lnm-listing-hero .lnm-hero-sub {
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
}
.lnm-listing-hero .breadcrumb a { color: rgba(255, 255, 255, .7); }
.lnm-listing-hero .breadcrumb .active { color: rgba(255, 255, 255, .92); }
.lnm-listing-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }
.lnm-listing-search { max-width: 560px; }
.lnm-listing-search .form-control { min-height: 50px; }
.lnm-hero-car {
    position: absolute;
    z-index: 1;
    right: -2%;
    bottom: 4%;
    width: 46%;
    max-width: 540px;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .35));
}
@media (max-width: 991.98px) {
    .lnm-listing-hero { padding: 1.5rem 0 1.75rem; }
    .lnm-hero-car {
        width: 62%;
        right: -6%;
        top: 0.5rem;
        bottom: auto;
        opacity: 0.4;
    }
    .lnm-listing-hero .lnm-hero-sub { max-width: none; }
}
@media (max-width: 575.98px) {
    .lnm-hero-car { width: 70%; opacity: 0.28; }
}

/* Chrome emblem logo (replaces the old "BT" tile). */
.lnm-brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
}
.lnm-brand-logo-lg { width: 48px; height: 48px; }

/* Horizontal lockup logo (coin + "BerTabien.NET" wordmark) — sized by height,
   width auto. The wordmark is light/silver so it reads on the navy headers. */
.lnm-brand-logo-full {
    height: 38px;
    width: auto;
    max-width: min(62vw, 240px);
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
}
.lnm-brand-logo-full.lnm-brand-logo-lg { height: 46px; width: auto; }

/* ===================================================================
   Compare plates feature
   =================================================================== */
/* Card now wraps a link + a footer action; keep the footer pinned bottom. */
.lnm-product-card { display: flex; flex-direction: column; }
.lnm-product-link { display: block; flex: 1 1 auto; color: var(--lnm-ink); }
.lnm-product-link:hover { color: var(--lnm-ink); }
.lnm-card-foot {
    border-top: 1px solid var(--lnm-line);
    padding: .35rem .5rem;
}
.lnm-compare-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--lnm-radius);
    background: transparent;
    color: var(--lnm-muted);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
}
.lnm-compare-toggle:hover { background: #f3f4f6; color: var(--lnm-primary); }
.lnm-compare-toggle.is-active { background: var(--lnm-accent-soft); color: #8a6111; }

/* Floating compare bar */
.lnm-compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    z-index: 1041;
    pointer-events: none;
}
.lnm-compare-bar[hidden] { display: none; }
.lnm-compare-bar-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 720px;
    padding: .6rem .9rem;
    border: 1px solid rgba(241, 210, 122, .3);
    border-radius: 999px;
    background: var(--lnm-navy-grad);
    box-shadow: 0 14px 34px rgba(6, 18, 51, .35);
    color: #fff;
}
.lnm-compare-bar-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .9rem;
}
.lnm-compare-bar-info i { color: var(--lnm-accent-2); }
.lnm-compare-bar-numbers {
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lnm-compare-bar-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.lnm-compare-bar-actions .lnm-btn-ghost { color: rgba(255, 255, 255, .82); }
.lnm-compare-bar-actions .lnm-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lnm-compare-bar-actions .btn.disabled { opacity: .55; pointer-events: none; }

@media (max-width: 991.98px) {
    .lnm-compare-bar { bottom: calc(var(--lnm-bottom-nav-h) + var(--lnm-safe-bottom) + .4rem); }
    .lnm-compare-bar-inner { border-radius: var(--lnm-radius); }
    .lnm-compare-bar-numbers { display: none; }
}

/* Compare table */
.lnm-compare-wrap {
    border: 1px solid var(--lnm-line);
    border-radius: var(--lnm-radius);
    background: #fff;
    box-shadow: var(--lnm-shadow-sm);
}
.lnm-compare-table { min-width: 560px; margin: 0; }
.lnm-compare-table th,
.lnm-compare-table td {
    vertical-align: middle;
    border-color: var(--lnm-line);
    text-align: center;
}
.lnm-compare-rowhead {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 130px;
    min-width: 110px;
    text-align: left !important;
    background: #f8fafc;
    color: var(--lnm-primary);
    font-weight: 600;
}
.lnm-compare-col { min-width: 150px; position: relative; }
.lnm-compare-col.is-top,
.lnm-compare-best {
    background: rgba(199, 154, 46, .08);
}
.lnm-compare-top-badge {
    display: inline-block;
    margin-bottom: .4rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--lnm-gold-grad);
    color: #3a2a05;
    font-size: .72rem;
    font-weight: 700;
}
.lnm-compare-plate { container-type: inline-size; width: 100%; max-width: 170px; margin: 0 auto; }
.lnm-compare-price { color: var(--lnm-primary); font-weight: 700; }
.lnm-compare-progress { height: 6px; background: #edf0f5; margin-top: .35rem; }
.lnm-compare-remove {
    display: inline-block;
    margin-top: .35rem;
    color: #b42318;
    font-size: .78rem;
}
.lnm-compare-remove:hover { color: #912018; }

/* Mobile: comfortable side-by-side compare — narrower sticky label + columns so
   two products fit at once, with column scroll-snap for the rest. */
@media (max-width: 575.98px) {
    .lnm-compare-table { min-width: 0; }
    .lnm-compare-wrap {
        scroll-snap-type: x proximity;
        scroll-padding-left: 88px; /* land snapped column clear of the sticky label */
    }
    .lnm-compare-rowhead {
        width: 88px;
        min-width: 88px;
        font-size: .76rem;
        padding: .5rem .45rem;
        line-height: 1.25;
    }
    .lnm-compare-col {
        min-width: 134px;
        scroll-snap-align: start;
    }
    .lnm-compare-table th,
    .lnm-compare-table td {
        padding: .5rem .45rem;
        font-size: .84rem;
    }
    .lnm-compare-table .small { font-size: .72rem; }
    .lnm-compare-plate { max-width: 116px; }
    .lnm-compare-price { font-size: .9rem; }
    .lnm-compare-top-badge { font-size: .58rem; padding: .1rem .4rem; margin-bottom: .25rem; }
    .lnm-compare-remove { font-size: .72rem; }
    .lnm-compare-table .btn-sm { padding: .3rem .4rem; font-size: .78rem; }
}

/* ---- AI numerology narrative ---- */
.lnm-ai-narrative {
    position: relative;
    border: 1px solid rgba(199, 154, 46, .3);
    border-radius: var(--lnm-radius);
    background: linear-gradient(180deg, #fffdf6 0%, #fff 100%);
    padding: 1.1rem 1.25rem;
}
.lnm-ai-narrative-head {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
    color: #8a6111;
    font-weight: 700;
    font-size: .9rem;
}
.lnm-ai-narrative-head i { color: var(--lnm-accent); }
.lnm-ai-narrative p {
    color: #2f3848;
    line-height: 1.85;
}
.lnm-ai-narrative-note {
    margin-top: .6rem;
    color: var(--lnm-muted);
    font-size: .76rem;
}

/* ---- Fortune profile: category score bars, chips, warning & tip boxes ---- */
.lnm-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem 1.4rem;
}
.lnm-score-row .lnm-score-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .35rem;
    font-size: .85rem;
}
.lnm-score-row .lnm-score-row-head b { font-weight: 700; }
.lnm-score-row .lnm-score-row-head .v { color: var(--lnm-muted); font-size: .8rem; }
.lnm-score-row .lnm-score-track {
    height: 7px;
    border-radius: 6px;
    background: #edf0f5;
    overflow: hidden;
}
.lnm-score-row .lnm-score-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--lnm-gold-grad);
    transition: width .5s ease;
}
.lnm-score-row.is-mid .lnm-score-fill { background: linear-gradient(145deg, #9fb6e0, #6b8fd4); }
.lnm-score-row.is-low .lnm-score-fill { background: linear-gradient(145deg, #e6b27a, #d98a3c); }

.lnm-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.lnm-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    line-height: 1.2;
    border: 1px solid var(--lnm-line);
    background: #fbfcfe;
    color: #344054;
}

/* "หรือ" divider between the normal search form and the AI search box. */
.lnm-or-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: var(--lnm-muted, #667085);
    font-size: .85rem;
}
.lnm-or-divider::before,
.lnm-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lnm-line);
}
.lnm-chip.is-good { border-color: #bfe3c9; background: #f1fbf4; color: #1c6b3a; }
.lnm-chip.is-warn { border-color: #f1d9a8; background: #fff8ec; color: #8a6111; }

.lnm-note-box {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1.05rem;
    border-radius: var(--lnm-radius);
    font-size: .88rem;
    line-height: 1.7;
}
.lnm-note-box > i { font-size: 1.1rem; line-height: 1.6; flex: 0 0 auto; }
.lnm-note-box.is-warn { border: 1px solid #f1d9a8; background: #fff8ec; color: #6b4f1d; }
.lnm-note-box.is-warn > i { color: #c8962f; }
.lnm-note-box.is-tip {
    border: 1px solid rgba(199, 154, 46, .3);
    background: linear-gradient(180deg, #fffdf6 0%, #fff 100%);
    color: #2f3848;
}
.lnm-note-box.is-tip > i { color: var(--lnm-accent); }

/* ---- ทักษา birthday overlay for plate letters ---- */
.lnm-taksa-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.lnm-taksa-pick-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #344054;
    margin-right: .1rem;
}
.lnm-taksa-day {
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--lnm-line);
    background: #fff;
    color: #475467;
    font-size: .8rem;
    line-height: 1.3;
    cursor: pointer;
}
.lnm-taksa-day:hover { border-color: var(--lnm-accent); color: var(--lnm-accent); }
.lnm-taksa-day.active {
    background: var(--lnm-gold-grad);
    border-color: transparent;
    color: #3a2c05;
    font-weight: 600;
}
.lnm-taksa-clear { color: var(--lnm-muted); }
.lnm-taksa [data-taksa-letters] .lnm-chip { transition: background .2s, border-color .2s, color .2s; }

/* About page credit — small and faint */
.lnm-about-credit {
    font-size: .72rem;
    letter-spacing: .02em;
    color: rgba(102, 112, 133, .45);
}

/* ---- Realistic Thai car plate (type=plate) ----
   Standard private-car plates are a reflective cream/white sheet with black
   characters and a black province line. Phone-number badges keep the navy +
   gold premium look (they aren't plates). Defined last so it overrides the
   shared .lnm-number-badge background/colour above. */
.lnm-plate-badge {
    /* Real blank-plate photo (white sheet, embossed guilloché + ขส seal,
       black rim). --plate-art (set inline per product) overrides it so graphic
       plates render their province artwork here too. */
    background: var(--plate-art, url("../images/plate-photo.png")) center / 100% 100% no-repeat, #f4f1e8;
    color: #15171c;
    text-shadow: none;
    /* The photo already carries the black rim + rounded corners. */
    box-shadow: 0 14px 30px rgba(6, 18, 51, .18);
    overflow: hidden;
}
.lnm-plate-badge .lnm-plate-province {
    color: #15171c;
    text-shadow: none;
    /* Province sits ~1/3 the height of the registration, like a real plate.
       em is relative to the badge size, so it always scales with the number.
       Tune --plate-province-scale to taste. */
    font-size: calc(1em * var(--plate-province-scale, 0.36));
    /* Real plates print the province in a fairly heavy weight. */
    font-weight: 600;
    margin-top: 0.06em;
}
/* Equal cap height for Thai letters vs digits on plates.
   Kanit draws digits a touch taller than Thai consonants, so the digit run
   is scaled down to match. Fine-tune the one number below to taste:
   raise it if the letters look smaller, lower it if the digits look bigger. */
:root { --plate-num-scale: 0.92; --plate-province-scale: 0.40; }
.pl-th { font-size: 1em; }
.pl-nm {
    font-size: calc(1em * var(--plate-num-scale));
    /* Sit on the same baseline so the scaled digits align with the letters. */
    vertical-align: baseline;
}
.lnm-number-lg.lnm-plate-badge {
    box-shadow: 0 20px 44px rgba(6, 18, 51, .22);
}

/* License plates use Sarabun for Thai letterforms and province text. */
.lnm-plate-badge,
.lnm-plate-badge .lnm-plate-number,
.lnm-plate-badge .lnm-plate-province {
    font-family: 'Sarabun', var(--lnm-font);
}

/* Sarabun is wider/taller than the previous plate face. Product cards need a
   smaller registration line so the province stays inside the printed plate. */
.lnm-thumb-inner .lnm-plate-badge {
    --plate-num-scale: 0.86;
    --plate-province-scale: 0.36;
    font-size: 18.6cqi;
    gap: 0;
    padding: 0.18em 0.62em 0.22em;
}

.lnm-thumb-inner .lnm-plate-badge .lnm-plate-number {
    transform: translateY(0.02em);
    line-height: 0.92;
}

.lnm-thumb-inner .lnm-plate-badge .lnm-plate-province {
    line-height: 1;
    margin-top: 0.14em;
    transform: translateY(0.80em);
}

.lnm-number-badge.lnm-plate-badge .lnm-plate-number,
.lnm-number-badge.lnm-plate-badge[data-plate-style="graphic"] .lnm-plate-number {
    transform: translateY(-0.10em);
}

.lnm-number-badge.lnm-plate-badge .lnm-plate-province,
.lnm-number-badge.lnm-plate-badge[data-plate-style="graphic"] .lnm-plate-province {
    transform: translateY(0.50em);
}