/* ==========================================================================
   RICHBURY COMPATIBLE MASTER STYLESHEET
   File: fleamart.css

   Richbury-compatible build using the Vapelody glass/mobile improvements.
   Shared colours, glass, buttons, navigation, header and footer are defined once.
   Page-specific rules control structure and content only.
   No public/internal theme split.
   ========================================================================== */

/* =========================================================
   VARIABLES, DOCUMENT, SITE HEADER
   ========================================================= */

html {
    --page-bg: #111111;
    --elevated-bg: rgba(9, 12, 22, .66);
    --glass: rgba(255, 255, 255, .07);
    --glass-strong: rgba(255, 255, 255, .11);
    --blue: #59a2ff;
    --pink: #e80074;
    --orange: #e95233;
    --ink: var(--page-bg);
    --text: #ffffff;
    --soft: #d4d7df;
    --muted: #9a9fac;
    --line: rgba(255, 255, 255, .12);
    --line2: rgba(89, 162, 255, .28);
    --line-strong: rgba(255, 255, 255, .24);
    --positive: #72d8a8;
    --warning: #f2c968;
    --destructive: #ff718e;
    --glow-blue: rgba(89, 162, 255, .32);
    --glow-pink: rgba(232, 0, 116, .28);
    --radius: 20px;
    --shadow: 0 28px 80px rgba(0, 0, 0, .38);
    --max: 1500px;
    --fm-blue: var(--blue);
    --fm-border: var(--line);
    --fm-muted: var(--muted);
    --fm-panel: var(--glass);
    --fm-pink: var(--pink);
    --fm-shadow: var(--shadow);
    background: var(--ink);
    scroll-behavior: smooth;
    --neon-blue: #59A2FF;
    --neon-pink: #E80074;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 0 0, hsla(197, 100%, 49%, .5), transparent 34rem), radial-gradient(circle at 56% 0, hsla(339, 100%, 45%, .5), transparent 38rem), radial-gradient(circle at 100% 8%, hsla(11, 80%, 55%, .5), transparent 34rem), linear-gradient(180deg, #111111 0%, #111111 46%, #111111 100%);
    min-height: 100vh;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image: linear-gradient(rgba(255, 255, 255, 0) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

a {
    color: inherit;
}

.wrap {
    width: min(calc(100% - 48px), var(--max));
    margin: auto;
}

.micro {
    font: 800 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blue);
}

.site-head {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
}

.head-in {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    font-weight: 1000;
    font-style: italic;
    letter-spacing: .06em;
    text-decoration: none;
    font-size: 28px;
    white-space: nowrap;
}

.brand span {
    color: var(--pink);
}

.nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav a {
    padding: 10px 12px;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 10px;
}

.nav a:hover, .nav a.active {
    border-color: var(--line2);
    background: rgba(255, 255, 255, .15);
    color: #fff;
}


/* =========================================================
   COLOURED MENU BUTTONS
   ========================================================= */


.nav a.nav-demo--supplier {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.nav a.nav-demo--retailer {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.nav a.nav-demo:hover {
    color: #fff;
    transform: translateY(-1px);
}

.nav a.nav-demo--supplier:hover {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 0 22px rgba(89, 162, 255, .35);
}

.nav a.nav-demo--retailer:hover {
    background: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 0 22px rgba(232, 0, 116, .35);
}
.nav a.nav-login {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.nav a.nav-login:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, .18);
}


/* =========================================================
   PROFILE TOOLTIP AND LEGACY CTA BUTTONS
   ========================================================= */

.zagran-profile-flag {
    position: relative;
    width: 30px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--fm-border);
    border-radius: 3px;
    overflow: visible;
    background: rgba(255,255,255,.04);
}

.zagran-profile-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 10px;
    border: 1px solid var(--fm-border);
    border-radius: 7px;
    background: #111;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s ease;
}

.zagran-profile-flag:hover .zagran-profile-tooltip {
    opacity: 1;
    visibility: visible;
}

.zagran-profile-flag img:hover {
    transform: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.btn {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 17px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
    font: 900 12px/1 ui-sans-serif, system-ui;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .2s;
}

.btn:hover {
    transform: translateY(-1px);
    border-color: #59a2ff;
    box-shadow: 0 0 26px rgba(89, 162, 255, .3);
}

.btn.primary {
    background: linear-gradient(135deg, var(--blue), #59a2ff);
    border-color: #59a2ff;
    color: #fff;
}

.btn.hot {
    background: linear-gradient(135deg, var(--pink), #e80074);
    border-color: #e80074;
}

.btn.danger {
    border-color: rgba(232, 0, 116, .45);
    color: #e80074;
}

.btn.danger-full {
    border-color: rgba(232, 0, 116, .45);
    background: rgba(232, 0, 116, .45);
    color: #ffffff;
}

.btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.context .glass {
    box-shadow: none;
}

/* =========================================================
   REPORT CHOOSER
   ========================================================= */

.report-chooser-row > td {
    padding: 0 !important;
    border: 1px solid rgba(255, 113, 142, .36) !important;
    border-radius: 9px !important;
    background: rgba(255, 113, 142, .07) !important;
    overflow: hidden;
}

.report-chooser {
    padding: 24px 28px 28px;
    border: 0;
    background: transparent;
}

.report-chooser__header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.report-chooser__header strong {
    font-size: 15px;
}

.report-chooser__header span {
    font-size: 12px;
    opacity: .65;
}

.report-chooser__fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.report-chooser__field {
    min-width: 0;
}

.report-chooser__field label {
    display: block;
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .72;
}

.report-chooser__control {
    position: relative;
}

.report-chooser__control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1px solid rgba(255, 255, 255, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    transform: rotate(45deg);
    pointer-events: none;
}

.report-chooser select, .report-chooser input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 0 42px 0 14px;
    color: #ffffff;
    background: rgba(255, 113, 142, .07);
    border: 1px solid rgba(255, 113, 142, .36);
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    outline: none;
}

.report-chooser select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.report-chooser select:hover, .report-chooser input[type="date"]:hover {
    border-color: rgba(255, 113, 142, .50);
    background: rgba(255, 113, 142, .09);
}

.report-chooser select:focus, .report-chooser input[type="date"]:focus {
    border-color: rgba(255, 113, 142, .60);
    background: rgba(255, 113, 142, .09);
    box-shadow: 0 0 0 3px
        rgba(255, 113, 142, .10);
}

.report-chooser select option {
    color: #ffffff;
    background: #2a141c;
}

.report-chooser__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-column: span 2;
}

.report-chooser__dates[hidden] {
    display: none !important;
}

.report-chooser input[type="date"] {
    padding-right: 12px;
    color-scheme: dark;
}

.report-chooser input[type="date"] ::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .65;
    cursor: pointer;
}

.report-chooser__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 113, 142, .20);
}

.report-chooser__summary {
    min-width: 0;
}

.report-chooser__summary span {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .55;
}

.report-chooser__summary strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.report-chooser__actions {
    display: flex;
    gap: 10px;
}

.zagran-data-table tr.report-row-open > td {
    background: rgba(255, 113, 142, .035);
}

.zagran-data-table tr.report-row-open > td:first-child {
    box-shadow: inset 2px 0 0 rgba(255, 113, 142, .36);
}

@media (max-width: 1050px) {
    .report-chooser__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .report-chooser {
        padding: 20px;
    }

    .report-chooser__header {
        display: block;
    }

    .report-chooser__header span {
        display: block;
        margin-top: 5px;
    }

    .report-chooser__fields, .report-chooser__dates {
        grid-template-columns: 1fr;
    }

    .report-chooser__dates {
        grid-column: auto;
    }

    .report-chooser__footer {
        display: block;
    }

    .report-chooser__actions {
        margin-top: 18px;
    }
}

/* =========================================================
   PAGE TITLES AND INTERNAL HERO ARTWORK
   ========================================================= */

.section {
    padding: 100px 0;
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 198px;
    gap: 50px;
    align-items: center;
    margin-bottom: 42px;
}

.section-head h2 {
    margin: 8px 0 0;
    font-size: clamp(38px,5vw,72px);
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase;
    font-style: italic;
}

.section-head p {
    margin: 0;
    color: var(--soft);
    font-size: 17px;
    line-height: 1.75;
    max-width: 780px;
}

.section-head > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-head > div:last-child img {
    display: block;
}

.glass {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}

.long-hero {
    position: relative;
    padding: 80px 0 36px;
}

.long-hero h1 {
    font-size: clamp(54px, 7vw, 100px);
    text-transform: uppercase;
    font-style: italic;
    line-height: .82;
    letter-spacing: -.055em;
    margin: 12px 0 18px;
}

.long-hero .lead {
    margin: 1em 0;
    max-width: none;
    color: #f7f9fc;
    font-size: 16px;
    line-height: normal;
}

.admin-long-hero {
    padding-right: 300px;
}

.admin-long-hero__image {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: block;
    width: 250px;
    height: 250px;
    object-fit: contain;
}

/* =========================================================
   WORKSPACE, TABLES, FORMS AND METRICS
   ========================================================= */

.workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 290px;
    min-height: 760px;
    overflow: hidden;
}

.work {
    padding: 30px;
}

.context {
    padding: 30px 20px;
    background: transparent;
}

.page-title h2 {
    font-size: 42px;
    line-height: 1;
    margin: 5px 0 25px;
}

.panel {
    padding: 22px;
    margin-bottom: 18px;
}

.toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.toolbar h3 {
    margin: 0;
    font-size: 18px;
}

.toolbar small {
    color: var(--muted);
}

.balance h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.money {
    font-size: 35px;
    font-weight: 950;
    margin: 8px 0 20px;
}

.balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.balance-grid div {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
}

.balance-grid span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.balance-grid strong {
    display: block;
    margin-top: 5px;
}

.balance .btn {
    width: 100%;
    margin-top: 10px;
}

.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 9px;
    min-width: 850px;
}

.data th {
    text-align: left;
    color: #aaa;
    font: 900 9px ui-monospace, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 11px 4px;
}

.data td {
    padding: 13px 11px;
    background: rgba(0, 0, 0, .3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

.data td:first-child {
    border-left: 1px solid var(--line);
    border-radius: 9px 0 0 9px;
}

.data td:last-child {
    border-right: 1px solid var(--line);
    border-radius: 0 9px 9px 0;
}

.data tbody tr:hover td {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(89, 162, 255, .2);
}

.data small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.data td.num input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    padding: 12px;
    color: #fff;
    font: inherit;
    outline: none;
}

.data td.num input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(89, 162, 255, .1);
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    display: grid;
    gap: 7px;
}

.field.full {
    grid-column: 1/-1;
}

.field label {
    font: 900 10px ui-monospace, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #aaa;
}

.field input, .field select, .field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
    padding: 12px;
    color: #fff;
    font: inherit;
    outline: none;
}

.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(89, 162, 255, .1);
}

.field small {
    color: var(--muted);
    line-height: 1.5;
}

.upload {
    border: 1px dashed rgba(89, 162, 255, .3);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    background: rgba(89, 162, 255, .1);
}

.alert {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    margin-bottom: 14px;
}

.alert.warn {
    border-color: rgba(233, 82, 51, .3);
}

.pagination {
    display: flex;
    gap: 7px;
    margin-top: 18px;
}

.pagination a {
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    font-size: 11px;
}

.pagination a.active {
    border-color: var(--blue);
    background: rgba(89, 162, 255, .1);
}

#supplier-password-form {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.component-grid .panel {
    margin: 0;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.store {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, .3);
}

.store h4 {
    margin: 5px 0 14px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.metric {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0, 0, 0, .3);
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.metric strong {
    font-size: 24px;
    display: block;
    margin-top: 6px;
}

.metrics .metric:nth-child(1) {
    border-color: rgba(93,214,160,.35);
    background: rgba(93,214,160,.07);
}

.metrics .metric:nth-child(2) {
    border-color: rgba(89,162,255,.35);
    background: rgba(89,162,255,.07);
}

.metrics .metric:nth-child(3) {
    border-color: rgba(242,201,104,.35);
    background: rgba(242,201,104,.07);
}

.metrics .metric:nth-child(4) {
    border-color: rgba(255,113,142,.36);
    background: rgba(255,113,142,.07);
}

.metrics .metric:nth-child(5) {
    border-color: rgba(255,113,142,.36);
    background: rgba(255,113,142,.07);
}

/* =========================================================
   FOOTER AND RESPONSIVE SHELL
   ========================================================= */

.site-foot {
    border-top: 1px solid var(--line);
    padding: 34px 0 40px;
    background: rgba(0, 0, 0, .6);
}

.foot-grid {
    display: grid;
    grid-template-columns: .7fr auto .7fr;
    gap: 30px;
    align-items: center;
}

.footer-logos {
    width: 350px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.footer-logos img {
    width: 100px;
    height: auto;
    display: block;
}

.foot-big {
    font-size: 20px;
    font-weight: 950;
    font-style: italic;
    text-transform: uppercase;
}

.foot-copy {
    color: #666;
    font: 800 10px/1.8 ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: right;
}

.floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    width: 192px;
    height: 192px;
    border-radius: 50%;
    border: 7px solid #DE4B74;
    background: #0C1E51;
    box-shadow: 0 0 0 7px rgba(232,130,157,.9),
        0 8px 16px rgba(0,0,0,.2),
        0 6px 20px rgba(0,0,0,.19);
    display: grid;
    place-items: center;
    text-align: center;
    text-decoration: none;
    font: 950 9px/1.15 ui-monospace, monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow: visible;
    transition: border-color .5s, box-shadow .5s;
}

.floating:hover {
    border-color: rgba(232,130,157,.9);
    box-shadow: 0 0 0 7px #DE4B74,
        0 8px 16px rgba(0,0,0,.2),
        0 6px 20px rgba(0,0,0,.19);
    transform: none;
}

.floating img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    border: 0;
    padding: 0;
    filter:
        drop-shadow(0 8px 10px rgba(0,0,0,.50))
        drop-shadow(0 0 3px rgba(218,170,70,.28));
    transition: transform .28s ease, filter .28s ease;
}

@media (max-width:1500px) {
    .foot-grid {
        grid-template-columns: 1fr auto;
    }

    .foot-copy {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (max-width:1100px) {
    .workspace {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .context {
        grid-column: 1/-1;
        border-left: 0;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .metrics {
        grid-template-columns: repeat(3, 1fr);
    }
	.foot-grid {
    grid-template-columns: 1fr;
}

.footer-logos {
    width: 100%;
}

.foot-copy {
    text-align: left;
}
}

@media (max-width:780px) {
    .wrap {
        width: min(calc(100% - 28px), var(--max));
    }

    .head-in {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .nav {
        width: 100%;
        order: 3;
        overflow: visible;
    padding-bottom: 3px;
    justify-content: center;
    flex-wrap: wrap;
    }

    .zagran-app-nav {
        border-right: 0;
        border-bottom: 1px solid var(--fm-border);
        overflow: visible;
    }

    .zagran-app-nav nav {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .zagran-app-nav a {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    .section-head {
        grid-template-columns: 1fr;
    }

    .section-head > div:first-child {
        text-align: center;
    }

    .component-grid, .store-grid {
        grid-template-columns: 1fr;
    }

    .workspace {
        display: block;
    }

    .context {
        display: block;
        padding: 18px;
    }

    .context .panel {
        margin-bottom: 12px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .metrics {
        grid-template-columns: 1fr 1fr;
    }

    .foot-grid {
        grid-template-columns: 1fr;
    }

    .foot-copy {
        text-align: left;
    }

    .floating {
        width: 74px;
        height: 74px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .floating:hover {
        transform: translateX(-50%);
    }

    .admin-long-hero {
        padding-right: 0;
        display: flex;
        flex-direction: column;
    }

    .admin-long-hero .micro {
        order: 1;
        text-align: center;
    }

    .admin-long-hero h1 {
        order: 2;
        text-align: center;
    }

    .admin-long-hero__image {
        order: 3;
        position: static;
        top: auto;
        right: auto;
        transform: none;
        width: 250px;
        height: 250px;
        margin: 18px auto 22px;
        object-fit: contain;
    }

    .admin-long-hero .lead {
        order: 4;
        width: 100%;
        margin: 0;
        text-align: left;
    }
}

/* =========================================================
   FLEAMART BUTTONS, BADGES AND STATUSES
   ========================================================= */

.fm-kicker {
    margin: 0 0 14px;
    color: var(--fm-blue);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 900;
    font-size: .74rem;
}

.fm-btn {
    appearance: none;
    border: 1px solid var(--fm-border);
    border-radius: 11px;
    padding: 12px 17px;
    background: rgba(255,255,255,.055);
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .18s ease;
}

.fm-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.09);
}

.fm-btn--primary {
    background: linear-gradient(135deg,#e80074,#b6005a);
    border-color: #ff3c9c;
    box-shadow: 0 12px 34px rgba(232,0,116,.18);
}

.fm-btn--blue {
    background: linear-gradient(135deg,#2d78d9,#59a2ff);
    border-color: #76b4ff;
    color: #06111f;
}

.fm-btn--positive {
    border-color: rgba(93,214,160,.5);
    background: rgba(93,214,160,.1);
    color: #b8ffdb;
}

.fm-btn--warning {
    border-color: rgba(242,201,104,.5);
    background: rgba(242,201,104,.1);
    color: #ffe8ad;
}

.fm-btn--danger {
    border-color: rgba(255,113,142,.5);
    background: rgba(255,113,142,.1);
    color: #ffd2db;
}

.fm-btn--ghost {
    background: transparent;
}

.fm-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.fm-card {
    border: 1px solid var(--fm-border);
    background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    border-radius: var(--fm-radius-lg);
    box-shadow: var(--fm-shadow);
    backdrop-filter: blur(16px);
    padding: 26px;
}

.fm-grid-2 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.fm-card h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.fm-card p {
    color: var(--fm-muted);
    margin: 0;
}

.fm-card ul {
    padding-left: 20px;
    color: #c8d2df;
}

.fm-card li+li {
    margin-top: 7px;
}

.zagran-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--fm-border);
    padding: 5px 9px;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: rgba(232,0,116,.1);
    color: #ffb9da;
    border-color: rgba(232,0,116,.36);
}

.zagran-store-actions .logo-link {
    margin-left: auto;
    display: block;
}

.zagran-store-actions .logo-link img {
    display: block;
    width: 80px;
    height: auto;
}

.fm-badge {
    display: inline-block;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 0;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
    vertical-align: middle;
    align-items: center;
    gap: 6px;
    letter-spacing: .07em;
    background: rgba(255,255,255,.04);
}

.fm-badge--blue {
    background: #59A2FF;
    color: #fff;
    border-color: rgba(89,162,255,.34);
}

.fm-badge--pink {
    background: #E80074;
    color: #fff;
    border-color: rgba(232,0,116,.36);
}

.fm-badge--orange {
    background: #E95233;
    color: #fff;
    border-color: rgba(233,82,51,.36);
}

.fm-badge--green {
    background: #00C9A7;
    color: #fff;
}

.fm-badge--yellow {
    background: #FFC400;
    color: #111;
}

.fm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--fm-border);
    padding: 5px 9px;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: rgba(255,255,255,.04);
}

.fm-status--blue {
    color: #9cc9ff;
    border-color: rgba(89,162,255,.34);
    background: rgba(89,162,255,.1);
}

.fm-status--pink {
    color: #ffb9da;
    border-color: rgba(232,0,116,.36);
    background: rgba(232,0,116,.1);
}

.fm-status--orange {
    color: #ffc1b5;
    border-color: rgba(233,82,51,.36);
    background: rgba(233,82,51,.1);
}

.fm-status--green {
    color: #b8ffdb;
    border-color: rgba(93,214,160,.36);
    background: rgba(93,214,160,.1);
}

.fm-status--teal {
    color: #008B8B;
    border-color: rgba(0, 139, 139, .36);
    background: rgba(0, 139, 139, .1);
}

.fm-status--purple {
    color: #845EC2;
    border-color: rgba(132, 94, 194, .36);
    background: rgba(132, 94, 194, .1);
}

.fm-status--yellow {
    color: #ffe9b0;
    border-color: rgba(242,201,104,.36);
    background: rgba(242,201,104,.1);
}

/* =========================================================
   PROFILE VIDEO PLAYER
   ========================================================= */

.video-wrapper.self-hosted {
    position: relative;
    border-radius: 12px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    line-height: 0;
}

video {
    width: 100%;
    height: auto;
    filter: contrast(1.1) brightness(0.9);
}

.scanline {
    width: 100%;
    height: 2px;
    background: rgba(89, 162, 255, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    animation: scan 4s linear infinite;
}

@keyframes scan {
    0% { top: 0%; }
        100% { top: 100%; }
}

.overlay-data {
    position: absolute;
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    color: var(--neon-blue);
    text-transform: uppercase;
    padding: 10px;
    pointer-events: none;
    text-shadow: 0 0 5px var(--neon-blue);
}

.top-right {
    top: 0;
    right: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.video-controls-bar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.play-trigger {
    background: var(--glass);
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    padding: 8px 15px;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.play-trigger:hover {
    background: var(--neon-blue);
    color: #fff;
    box-shadow: 0 0 15px var(--neon-blue);
}

.progress-track {
    flex-grow: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.hyper-slider {
    -webkit-appearance: none;
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
}

.hyper-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-blue);
    cursor: pointer;
    transition: 0.2s;
}

.hyper-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-blue);
    cursor: pointer;
    border: none;
}

/* =========================================================
   SUPPLIER, RETAILER AND ADMIN COMPONENTS
   ========================================================= */

.fm-demo-section {
    margin-top: 38px;
    scroll-margin-top: 100px;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.fm-demo-section>h2 {
    font-size: 1.8rem;
    margin: 0 0 15px;
}

.fm-demo-section>p {
    color: var(--fm-muted);
    margin-top: -7px;
}

.zagran-app-demo {
    border: 1px solid var(--fm-border);
    border-radius: 22px;
    overflow: hidden;
    background: #0c1016;
    box-shadow: var(--fm-shadow);
}

.zagran-app-demo .workspace {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.zagran-app-header {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: rgba(9,12,17,.92);
}

.zagran-brand {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 950;
    font-style: italic;
    letter-spacing: .11em;
}

.zagran-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fm-muted);
    font-size: .76rem;
}

.zagran-role-badge {
    color: var(--fm-blue);
    font-weight: 900;
    text-transform: uppercase;
}

.zagran-app-nav {
    padding: 20px 12px;
}

.zagran-app-nav nav {
    display: grid;
    gap: 5px;
}

.zagran-app-nav a {
    padding: 10px 12px;
    border-radius: 9px;
    color: #c8d2df;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.zagran-app-nav a:hover, .zagran-app-nav a.is-active {
    background: rgba(89,162,255,.09);
    border-color: rgba(89,162,255,.2);
    color: var(--fm-blue);
}

.zagran-profile-card, .zagran-data-panel, .zagran-review-card, .zagran-store-card {
    border: 1px solid var(--fm-border);
    border-radius: 16px;
    background: var(--fm-panel);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}

.zagran-alert {
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    padding: 13px 15px;
    background: rgba(255,255,255,.035);
    margin-bottom: 14px;
}

.zagran-alert-success {
    border-color: rgba(93,214,160,.35);
    background: rgba(93,214,160,.07);
}

.zagran-alert-error {
    border-color: rgba(255,113,142,.36);
    background: rgba(255,113,142,.07);
}

.zagran-alert-info {
    border-color: rgba(89,162,255,.35);
    background: rgba(89,162,255,.07);
}

.zagran-profile-summary {
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-bottom: 1px solid var(--fm-border);
}

.zagran-profile-logo {
    width: 98px;
    height: 98px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fm-border);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    font-weight: 950;
}

.zagran-profile-logo img {
    width: 98px;
    height: 98px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    transition: all .3s ease;
    cursor: default;
}

.zagran-profile-logo img:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 20px var(--neon-blue);
    transform: translateY(-5px);
}

.zagran-profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zagran-profile-name-row h2 {
    margin: 0;
}

.zagran-profile-company-number {
    display: block;
    margin-top: 5px;
    margin-bottom: 8px;
    color: var(--fm-muted);
    font-size: .78rem;
}

.zagran-profile-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    transition: all .3s ease;
    cursor: default;
}

.zagran-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.zagran-profile-field {
    padding: 16px 18px;
    border-bottom: 1px solid var(--fm-border);
}

.zagran-profile-field:nth-child(odd) {
    border-right: 1px solid var(--fm-border);
}

.zagran-profile-field:nth-child(13), .zagran-profile-field:nth-child(14) {
    border-bottom: 0;
}

.zagran-field-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .78rem;
    font-weight: 850;
}

.zagran-field-value, .zagran-muted {
    color: var(--fm-muted);
}

.zagran-inline-edit {
    margin-top: 10px;
}

.zagran-inline-edit form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.zagran-inline-edit summary {
    color: var(--fm-blue);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
}

.zagran-data-panel {
    padding: 18px;
}

.zagran-data-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.zagran-data-toolbar strong {
    margin: 0;
}

.zagran-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.zagran-table-scroll {
    overflow: auto;
}

.zagran-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    min-width: 780px;
}

.zagran-data-table th {
    text-align: left;
    color: #718096;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 0 11px 3px;
}

.zagran-data-table td {
    padding: 12px 11px;
    border-block: 1px solid var(--fm-border);
    background: rgba(0,0,0,.24);
    font-size: .78rem;
    vertical-align: middle;
}

.zagran-data-table td:first-child {
    border-left: 1px solid var(--fm-border);
    border-radius: 9px 0 0 9px;
}

.zagran-data-table td:last-child {
    border-right: 1px solid var(--fm-border);
    border-radius: 0 9px 9px 0;
}

.zagran-data-table tbody tr:hover td {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(89, 162, 255, .2);
}

.zagran-data-table .report-chooser-row:hover > td {
    background: rgba(255, 113, 142, .07) !important;
    border-color: rgba(255, 113, 142, .36) !important;
}

.zagran-data-table small {
    display: block;
    color: #6f7b8d;
}

.zagran-mono {
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.zagran-mono2 {
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    background: rgba(255,113,142,.07) !important;
}

.zagran-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.zagran-form-wide {
    grid-column: 1/-1;
}

.zagran-form-field label {
    display: block;
    color: #cbd5df;
    font-size: .72rem;
    font-weight: 850;
    margin-bottom: 6px;
}

.zagran-inline-edit input {
    width: 100%;
    border: 1px solid var(--fm-border);
    border-radius: 9px;
    background: rgba(0,0,0,.35);
    color: white;
    padding: 10px 11px;
    font: inherit;
}

.zagran-form-help {
    color: var(--fm-muted);
    font-size: .72rem;
    margin-top: 6px;
}

.zagran-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.zagran-form-actions button, .zagran-inline-edit button:not(.fm-btn) {
    border: 1px solid rgba(232,0,116,.46);
    border-radius: 9px;
    padding: 9px 12px;
    background: var(--fm-pink);
    color: white;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.zagran-bulk-columns {
    grid-column: 1/-1;
    padding: 14px;
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    background: rgba(0,0,0,.2);
}

.zagran-bulk-columns code {
    color: var(--fm-blue);
    white-space: normal;
}

.zagran-store-grid, .zagran-review-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.zagran-store-card, .zagran-review-card {
    padding: 16px;
}

.zagran-store-card-head, .zagran-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.zagran-store-meta {
    display: grid;
    gap: 6px;
    color: var(--fm-muted);
    font-size: .8rem;
    margin: 12px 0;
}

.zagran-store-actions, .zagran-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zagran-admin-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
}

.zagran-admin-metrics>div {
    padding: 16px;
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    background: rgba(0,0,0,.2);
}

.zagran-admin-metrics span {
    display: block;
    color: var(--fm-muted);
    font-size: .7rem;
    text-transform: uppercase;
}

.zagran-admin-metrics strong {
    display: block;
    font-size: 1.4rem;
    margin-top: 4px;
}

.zagran-admin-metrics > div:nth-child(1) {
    border-color: rgba(93,214,160,.35);
    background: rgba(93,214,160,.07);
}

.zagran-admin-metrics > div:nth-child(2) {
    border-color: rgba(89,162,255,.35);
    background: rgba(89,162,255,.07);
}

.zagran-admin-metrics > div:nth-child(3) {
    border-color: rgba(242,201,104,.35);
    background: rgba(242,201,104,.07);
}

.zagran-admin-metrics > div:nth-child(4) {
    border-color: rgba(255,113,142,.36);
    background: rgba(255,113,142,.07);
}

.zagran-review-images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.zagran-review-images span {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--fm-border);
    background: linear-gradient(145deg,rgba(89,162,255,.14),rgba(232,0,116,.09));
    display: grid;
    place-items: center;
    color: var(--fm-muted);
    font-size: .65rem;
}

.zagran-finance-form {
    padding: 14px;
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    background: rgba(0,0,0,.22);
    margin-top: 12px;
}

/* =========================================================
   DATA VISUALISATION AND RESPONSIVE COMPONENTS
   ========================================================= */

.fm-bar-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.fm-bar-row {
    display: grid;
    grid-template-columns: minmax(120px,1fr) 3fr auto;
    gap: 12px;
    align-items: center;
    font-size: 12px;
}

.fm-bar-track {
    height: 9px;
    border: 1px solid var(--fm-border);
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    overflow: hidden;
}

.fm-bar-fill {
    height: 100%;
    width: var(--value);
    background: var(--fm-blue);
    box-shadow: 0 0 18px rgba(89,162,255,.28);
}

.fm-bar-row:nth-child(even) .fm-bar-fill {
    background: var(--fm-pink);
    box-shadow: 0 0 18px rgba(232,0,116,.24);
}

.fm-bar-row strong {
    font-variant-numeric: tabular-nums;
}

.report-chooser__field[hidden], .report-chooser__snapshot-date[hidden] {
    display: none !important;
}

@media (max-width:980px) {
    .zagran-admin-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px) {
    .fm-bar-row {
        grid-template-columns: 1fr auto;
    }

    .fm-bar-track {
        grid-column: 1/-1;
    }

    .zagran-inline-edit form {
        grid-template-columns: 1fr 1fr;
    }

    .zagran-inline-edit form input {
        grid-column: 1/-1;
    }

    .fm-grid-2, .zagran-profile-grid, .zagran-form-grid, .zagran-store-grid, .zagran-review-grid, .zagran-admin-metrics {
        grid-template-columns: 1fr;
    }

    .zagran-profile-field:nth-child(odd) {
        border-right: 0;
    }

    .zagran-form-wide {
        grid-column: auto;
    }
}

/* =========================================================
   ACCESSIBILITY AND PERFORMANCE
   ========================================================= */

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   VARIABLES, DOCUMENT AND SITE HEADER
   ========================================================= */

/* =========================================================
   HOME HERO, COMMERCE PANEL AND NETWORK BAND
   ========================================================= */

.hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(380px,.7fr);
    gap: 60px;
    align-items: center;
    padding: 86px 0 80px;
}

.hero h1 {
    margin: 15px 0 20px;
    font-size: clamp(64px,8vw,136px);
    line-height: .78;
    letter-spacing: -.065em;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 1000;
}

.hero h1 em {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.78);
    font-style: inherit;
    font-size: .74em;
    white-space: nowrap;
    margin-top: .16em;
	letter-spacing: -.04em;
}

.hero .lead {
    max-width: 820px;
    font-size: clamp(18px,2vw,28px);
    line-height: 1.32;
    color: #dbe4ef;
}

.hero .sub {
    max-width: 760px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.hero-panel {
    position: relative;
    padding: 1px;
    border-radius: 26px;
    background: linear-gradient(135deg,rgba(89,162,255,.6),rgba(232,0,116,.35),rgba(233,82,51,.35));
    box-shadow: 0 35px 100px rgba(0,0,0,.5),0 0 45px rgba(89,162,255,.08);
}

.hero-panel-in {
    border-radius: 25px;
    padding: 28px;
    background: linear-gradient(180deg,rgba(10,17,28,.94),rgba(5,9,15,.95));
    min-height: 420px;
}

.hero-panel h2 {
    font-size: 13px;
    margin: 0 0 24px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.signal {
    display: grid;
    gap: 12px;
}

.signal article {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.signal span {
    display: block;
    color: var(--muted);
    font: 800 10px ui-monospace,monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.signal strong {
    display: block;
    margin-top: 7px;
    font-size: 20px;
}

.signal small {
    display: block;
    margin-top: 5px;
    color: #8ea0b6;
}

.flow {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: 800 10px ui-monospace,monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #d8e2ef;
    background: rgba(0,0,0,.23);
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 12px currentColor;
}

.dot.pink {
    background: var(--pink);
}

.dot.orange {
    background: var(--orange);
}

.band {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,.26);
}

.band-in {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.band-in div {
    padding: 26px 24px;
    border-right: 1px solid var(--line);
}

.band-in div:last-child {
    border-right: 0;
}

.band span {
    display: block;
    color: var(--muted);
    font: 800 10px ui-monospace,monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.band strong {
    display: block;
    margin-top: 7px;
    font-size: 17px;
    text-transform: uppercase;
}

/* =========================================================
   SHARED COMPONENTS
   ========================================================= */

/* =========================================================
   LEGAL / POLICY LONG-FORM PAGES
   ========================================================= */

.article-layout {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 100px;
}

.toc {
    position: sticky;
    top: 100px;
    padding: 18px;
}

.toc a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #96a7bb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.article {
    padding: 38px;
}

.article h2 {
    font-size: 27px;
    margin: 36px 0 12px;
    text-transform: uppercase;
}

.article h2:first-child {
    margin-top: 0;
}

.article h3 {
    font-size: 18px;
    margin-top: 28px;
}

.article p, .article li {
    color: #c5d0de;
    line-height: 1.78;
}

.article hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 36px 0;
}

.callout {
    padding: 18px;
    border-left: 3px solid var(--pink);
    background: rgba(232,0,116,.05);
    margin: 22px 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
}

.legal-table th, .legal-table td {
    border: 1px solid var(--line);
    padding: 12px;
    text-align: left;
}

.legal-table th {
    background: rgba(255,255,255,.04);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9aabbe;
}

/* =========================================================
   CONTACT PAGE
   Two-column contact form based on the established Fleamart
   glass-panel language. Uses existing .long-hero, .glass,
   .micro, .lead and .btn components wherever possible.
   ========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 28px;
    align-items: stretch;
    padding-bottom: 100px;
}

.contact-card {
    padding: 38px;
}

.contact-card h2 {
    margin: 0 0 10px;
    font-size: 27px;
    text-transform: uppercase;
}

.contact-intro {
    margin: 0;
    color: #c5d0de;
    line-height: 1.7;
}

.contact-form-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
    margin-top: 28px;
}

.contact-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field label {
    color: #9aabbe;
    font: 800 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.contact-field input, .contact-field select, .contact-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 14px;
    background: rgba(0,0,0,.26);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color .2s,box-shadow .2s,background .2s;
}

.contact-field input::placeholder, .contact-field textarea::placeholder {
    color: #728195;
}

.contact-field select {
    color-scheme: dark;
}

.contact-field select option {
    background: #09111d;
    color: #fff;
}

.contact-field textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.55;
}

.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
    border-color: rgba(89,162,255,.62);
    background: rgba(0,0,0,.34);
    box-shadow: 0 0 0 3px rgba(89,162,255,.10);
}

.contact-field .input-error {
    border-color: rgba(232,0,116,.72);
    box-shadow: 0 0 0 3px rgba(232,0,116,.10);
}

.contact-field .input-error::placeholder {
    color: #ff9bc8;
}

.contact-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-action-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.contact-action-panel p {
    margin: 0;
    color: #c5d0de;
    line-height: 1.7;
}

.contact-divider {
    margin: 26px 0;
    border-top: 1px solid var(--line);
}

.contact-direct-label {
    display: block;
    color: #9aabbe;
    font: 800 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-direct-email {
    display: block;
    margin: 10px 0 8px;
	color: var(--blue);
    font: 900 clamp(16px,1.92vw,25.6px)/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-direct-email:hover {
    color: var(--pink);
}

.contact-meta {
    color: #728195;
    font: 800 10px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contact-actions {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.contact-actions .btn {
    width: 100%;
}

.contact-status {
    margin-top: 22px;
    padding: 16px 18px;
    border-left: 3px solid var(--pink);
    background: rgba(232,0,116,.06);
    color: #ffd5e8;
    line-height: 1.6;
}

.contact-confirmation {
    margin-bottom: 100px;
    padding: 38px;
}

.contact-confirmation h2 {
    margin: 8px 0 12px;
    font-size: 27px;
    text-transform: uppercase;
}

.contact-confirmation p {
    max-width: 760px;
    color: #c5d0de;
    line-height: 1.78;
}

@media (max-width:980px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:780px) {
    .contact-card, .contact-confirmation {
        padding: 24px;
    }

    .contact-form-fields {
        grid-template-columns: 1fr;
    }

    .contact-field--full {
        grid-column: auto;
    }

    .contact-grid, .contact-confirmation {
        padding-bottom: 70px;
    }
}

/* =========================================================
   RETAILER SUBSCRIPTION PLANS
   Public plan comparison layout used by retailers.html.
   Unique pricing-* / price-plan* selectors avoid collision
   with the existing subscription checkout classes below.
   ========================================================= */

.pricing-stage {
    padding: 0 0 96px;
}

.pricing-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.price-plan {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
    min-height: 540px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) padding-box,
        linear-gradient(
            135deg,
            rgba(89, 162, 255, .60),
            rgba(232, 0, 116, .35),
            rgba(233, 82, 51, .35)
        ) border-box;
    box-shadow: 0 30px 85px rgba(0, 0, 0, .42);
    backdrop-filter: blur(20px);
}

.price-plan__body {
    padding: 34px 30px 32px;
}

.price-plan__body .fm-kicker {
    margin-bottom: 14px;
}

.price-plan__body h2 {
    margin: 0 0 10px;
    font-size: clamp(34px, 3.2vw, 54px);
    line-height: .92;
    letter-spacing: -.035em;
    text-transform: uppercase;
    font-style: italic;
}

.price-plan__body > p {
    margin: 0 0 24px;
    color: #aaa;
    line-height: 1.68;
}

.price-plan__allowance {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(0, 0, 0, .22);
}

.price-plan__allowance span {
    display: block;
    color: #888;
    font: 800 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.price-plan__allowance strong {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    text-transform: uppercase;
}

.price-plan__feature {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.price-plan__feature b {
    color: #59a2ff;
    font: 900 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.price-plan--advanced .price-plan__feature b,
.price-plan--premier .price-plan__feature b {
    color: #e80074;
}

.price-plan__feature span {
    color: #d7d7d7;
    font-size: 13px;
    line-height: 1.48;
}

.price-plan__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 30px 22px;
    border-left: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px 0 0 22px;
    background:
        radial-gradient(circle at 50% 0, rgba(89, 162, 255, .17), transparent 58%),
        rgba(0, 0, 0, .28);
    text-align: center;
}

.price-plan--advanced .price-plan__side,
.price-plan--premier .price-plan__side {
    background:
        radial-gradient(circle at 50% 0, rgba(232, 0, 116, .18), transparent 58%),
        rgba(0, 0, 0, .28);
}

.price-plan__price-card {
    padding: 24px 16px 22px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(0, 0, 0, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.price-plan__price-card--medallion {
    display: grid;
    place-items: center;
    padding: 16px;
}

.price-plan__medallion {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.price-plan__price-card > span {
    display: block;
    color: #888;
    font: 800 9px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.price-plan__breakdown {
    margin-top: 18px;
    color: #aaa !important;
    letter-spacing: .07em !important;
}

.price-plan__price-card strong {
    display: block;
    margin: 9px 0 7px;
    color: #59a2ff;
    font-size: clamp(36px, 3vw, 48px);
    line-height: .92;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}

.price-plan--advanced .price-plan__price-card strong,
.price-plan--premier .price-plan__price-card strong {
    color: #e80074;
}

.price-plan__monthly {
    color: #fff !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
}

.price-plan__side .btn {
    width: 100%;
    justify-content: center;
}

.price-plan__billing-note {
    margin: -10px 0 0;
    color: #777;
    font: 800 9px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .price-plan {
        grid-template-columns: 1fr;
    }

    .price-plan__side {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
        border-radius: 22px 22px 0 0;
    }
}

@media (max-width: 820px) {
    .pricing-stage {
        width: min(calc(100% - 28px), 1500px);
        padding: 58px 0 76px;
    }

    .pricing-pair {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RETAILER SUBSCRIPTION CHECKOUT
   Secure-looking business application and Direct Debit
   instruction layout. Reuses the established Fleamart
   .long-hero, .glass, .micro and .btn visual language.
   ========================================================= */

.subscription-checkout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 380px;
    gap: 28px;
    align-items: start;
    padding-bottom: 100px;
}

.subscription-card {
    padding: 38px;
}

.subscription-card + .subscription-card {
    margin-top: 24px;
}

.subscription-card h2, .subscription-summary h2 {
    margin: 0 0 10px;
    font-size: 27px;
    text-transform: uppercase;
}

.subscription-intro {
    margin: 0;
    color: #c5d0de;
    line-height: 1.7;
}

.subscription-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
    margin-top: 28px;
}

.subscription-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.subscription-field--full {
    grid-column: 1 / -1;
}

.subscription-field label {
    color: #9aabbe;
    font: 800 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.subscription-field input, .subscription-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 14px;
    background: rgba(0,0,0,.26);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color .2s,box-shadow .2s,background .2s;
}

.subscription-field input::placeholder {
    color: #728195;
}

.subscription-field select {
    color-scheme: dark;
}

.subscription-field select option {
    background: #09111d;
    color: #fff;
}

.subscription-field input:focus, .subscription-field select:focus {
    border-color: rgba(89,162,255,.62);
    background: rgba(0,0,0,.34);
    box-shadow: 0 0 0 3px rgba(89,162,255,.10);
}

.subscription-field .input-error {
    border-color: rgba(232,0,116,.72);
    box-shadow: 0 0 0 3px rgba(232,0,116,.10);
}

.subscription-field .input-error::placeholder {
    color: #ff9bc8;
}

.subscription-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.subscription-dd-note {
    margin-top: 24px;
    padding: 18px;
    border-left: 3px solid var(--blue);
    background: rgba(89,162,255,.055);
    color: #c5d0de;
    line-height: 1.7;
}

.subscription-dd-note strong {
    color: #fff;
}

.subscription-summary {
    position: static;
    align-self: start;
    padding: 30px;
}

.subscription-plan-name {
    margin: 4px 0 22px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.subscription-price-list {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.subscription-price-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    color: #aebccc;
    font-size: 13px;
}

.subscription-price-row + .subscription-price-row {
    border-top: 1px solid rgba(255,255,255,.07);
}

.subscription-price-row strong {
    color: #fff;
    text-align: right;
}

.subscription-price-row--discount strong {
    color: #9ad0ff;
}

.subscription-total {
    padding: 24px 0 18px;
    text-align: center;
}

.subscription-total span {
    display: block;
    color: #9aabbe;
    font: 800 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.subscription-total strong {
    display: block;
    margin-top: 7px;
    font-size: clamp(42px,5vw,62px);
    line-height: 1;
    color: var(--pink);
    font-variant-numeric: tabular-nums;
}

.subscription-renewal {
    margin: 0;
    color: #c5d0de;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.subscription-consents {
    display: grid;
    gap: 13px;
    margin-top: 24px;
}

.subscription-check {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    color: #c5d0de;
    font-size: 12px;
    line-height: 1.6;
}

.subscription-check input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--pink);
}

.subscription-check a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subscription-actions {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}

.subscription-actions .btn {
    width: 100%;
}

.subscription-smallprint {
    margin: 18px 0 0;
    color: #728195;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.subscription-status {
    margin-bottom: 24px;
    padding: 16px 18px;
    border-left: 3px solid var(--pink);
    background: rgba(232,0,116,.06);
    color: #ffd5e8;
    line-height: 1.6;
}

.subscription-confirmation {
    padding-bottom: 100px;
}

.subscription-confirmation-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 28px;
    align-items: start;
}

.subscription-confirmation-card {
    padding: 38px;
}

.subscription-confirmation-card h2 {
    margin: 0 0 14px;
    font-size: 27px;
    text-transform: uppercase;
}

.subscription-confirmation-card h3 {
    margin: 28px 0 8px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.subscription-confirmation-card p, .subscription-confirmation-card li {
    color: #c5d0de;
    line-height: 1.75;
}

.subscription-confirmation-card ul {
    padding-left: 20px;
}

.subscription-confirmation-card li + li {
    margin-top: 8px;
}

.subscription-zero {
    padding: 30px;
    text-align: center;
}

.subscription-zero .micro {
    margin-bottom: 8px;
}

.subscription-zero strong {
    display: block;
    color: var(--pink);
    font-size: clamp(48px,6vw,72px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.subscription-zero p {
    margin: 14px 0 0;
    color: #c5d0de;
    line-height: 1.7;
}

.subscription-reference {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: #9aabbe;
    font: 800 10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

@media (max-width:980px) {
    .subscription-checkout, .subscription-confirmation-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:780px) {
    .subscription-card, .subscription-confirmation-card, .subscription-zero {
        padding: 24px;
    }

    .subscription-form-grid {
        grid-template-columns: 1fr;
    }

    .subscription-field--full {
        grid-column: auto;
    }

    .subscription-checkout, .subscription-confirmation {
        padding-bottom: 70px;
    }
}

/* =========================================================
   FOOTER AND FLOATING ZAGRAN LINK
   ========================================================= */

/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width:1100px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        max-width: 680px;
    }
}

@media (max-width:780px) {
    /* Internal-page mobile title alignment: match Admin, Supplier and Retailer pages. */

    .long-hero .micro, .long-hero h1 {
        text-align: center;
    }

    .long-hero .lead {
        text-align: left;
    }

    .hero {
        padding: 58px 0;
    }

    .hero h1 {
        font-size: 60px;
    }

    .band-in {
        grid-template-columns: 1fr 1fr;
    }

    .band-in div:nth-child(2) {
        border-right: 0;
    }

    .band-in div:nth-child(-n/**/+2) {
        border-bottom: 1px solid var(--line);
    }

    .article-layout {
        grid-template-columns: 1fr;
    }

    .toc {
        position: static;
    }

    .article {
        padding: 24px;
    }

    .hero > div > .cta-row {
        justify-content: center;
    }
}

/* =========================================================
   HOME INFORMATION SECTIONS AND CARDS
   ========================================================= */

.fm-section {
    --fm-border: rgba(255,255,255,.105);
    --fm-muted: #93a0b3;
    --fm-blue: #59A2FF;
    --fm-radius-lg: 24px;
    --fm-shadow: 0 28px 80px rgba(0,0,0,.34);
    --fm-max: 1220px;
    padding: 72px 0;
    color: #f8fafc;
    font: 16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.fm-section--deep {
    border-block: 1px solid var(--fm-border);
    background: rgba(0,0,0,.18);
}

.fm-container {
    width: min(calc(100% - 40px),var(--fm-max));
    margin-inline: auto;
}

.fm-section__head {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(320px,1fr);
    gap: 40px;
    margin-bottom: 30px;
}

.fm-section h2 {
    margin: 0;
    font-size: clamp(2rem,5vw,4.2rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.fm-section__head p {
    margin: 0;
    color: #b5c0cf;
    font-size: 1.05rem;
}

.fm-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}

.fm-card li + li {
    margin-top: 7px;
}

.fm-card__number {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(89,162,255,.3);
    background: rgba(89,162,255,.1);
    color: var(--fm-blue);
    font-weight: 900;
    margin-bottom: 18px;
}

.fm-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.fm-hero__lead {
    max-width: 780px;
    margin: 26px 0 0;
    color: #c4cfdd;
    font-size: clamp(1.05rem,2vw,1.3rem);
}

.fm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.fm-timeline {
    display: grid;
    gap: 10px;
}

.fm-timeline__item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
}

.fm-timeline__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--fm-blue);
    box-shadow: 0 0 0 5px rgba(89,162,255,.08);
}

.fm-timeline__item p {
    margin: 0;
    color: var(--fm-muted);
}

/* =========================================================
   HOME TITLE AND SMALL-SCREEN ADJUSTMENTS
   ========================================================= */

@media (max-width: 980px) {
    .fm-section__head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .nav {
        justify-content: center;
    }

    .hero h1 {
        text-align: center;
    }

    .hero h1 em {
        font-size: .58em;
		letter-spacing: 0;
        margin-top: .20em;
    }
}

@media (max-width: 700px) {
    .fm-container {
        width: min(calc(100% - 24px),var(--fm-max));
    }

    .fm-grid-2, .fm-grid-3 {
        grid-template-columns: 1fr;
    }

    .fm-section {
        padding: 52px 0;
    }

    .fm-actions .fm-btn {
        flex: 1 1 180px;
    }
}

/* =========================================================
   SISTER DROPSHIPPING PLATFORM ADVERT
   ========================================================= */

.fm-manifesto {
    padding: 36px 40px;
    border: 1px solid transparent;
    border-radius: 28px;
    background: linear-gradient(180deg,rgba(10,17,28,.94),rgba(5,9,15,.95)) padding-box,
        linear-gradient(135deg,rgba(89,162,255,.6),rgba(232,0,116,.35),rgba(233,82,51,.35)) border-box;
    box-shadow: 0 35px 100px rgba(0,0,0,.5),0 0 45px rgba(89,162,255,.08);
}

.fm-sister-platform {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,.8fr);
    grid-template-areas: "intro brand"
        "body brand";
    gap: 22px 42px;
    align-items: center;
}

.fm-sister-platform__intro {
    grid-area: intro;
}

.fm-sister-platform__body {
    grid-area: body;
}

.fm-sister-platform h2 {
    margin: 0;
    font-size: clamp(1.8rem,3.4vw,3rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.fm-sister-platform__copy {
    max-width: 860px;
    margin: 0;
    color: #c5d0de;
    font-size: 1rem;
    line-height: 1.72;
}

.fm-sister-platform .fm-actions {
    margin-top: 22px;
}

.fm-sister-platform__brand {
    grid-area: brand;
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-sister-platform__logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 700px) {
    .fm-manifesto {
        padding: 28px 26px;
    }

    .fm-sister-platform {
        grid-template-columns: 1fr;
        grid-template-areas: "intro"
            "brand"
            "body";
        gap: 22px;
    }

    .fm-sister-platform__brand {
        align-self: auto;
    }

    .fm-sister-platform__logo {
        width: 100%;
        height: auto;
    }
}


/* =========================================================
   RICHBURY COMPATIBILITY NOTES
   - Retains legacy .price-plan--advanced styling.
   - Also supports .price-plan--premier used by Vapelody.
   - Vapelody glass, accessibility and narrow-viewport fixes are retained.
   ========================================================= */

/* =========================================================
   VAPELODY 2026 GLASS SYSTEM + SHARED PRIVACY UI
   ========================================================= */
:root { --cookie-banner-height: 0px; }
body {
    background-color: var(--page-bg);
    background-image:
        radial-gradient(at 0% 0%, hsla(197,100%,49%,.48) 0, transparent 48%),
        radial-gradient(at 50% 0%, hsla(339,100%,45%,.46) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(11,80%,55%,.43) 0, transparent 48%),
        radial-gradient(at 50% 100%, hsla(214,100%,68%,.28) 0, transparent 52%);
    background-attachment: fixed;
}
.site-head {
    background: rgba(7, 8, 13, .42);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    border-bottom-color: rgba(255,255,255,.13);
    box-shadow: 0 10px 34px rgba(0,0,0,.14), inset 0 -1px rgba(255,255,255,.035);
}
.glass, .hero-panel-in, .fm-card, .membership-card, .price-plan, .article, .toc, .supplier-action-card, .supplier-form-panel {
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    backdrop-filter: blur(22px) saturate(125%);
    box-shadow: 0 22px 55px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}
.btn, button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(89,162,255,.85); outline-offset: 3px; }
.nav a[aria-current="page"], .nav a.active { box-shadow: inset 0 0 0 1px rgba(89,162,255,.24), 0 0 18px rgba(89,162,255,.13); }
.floating {
    width: 192px; height: 192px; right: max(18px, env(safe-area-inset-right));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--cookie-banner-height));
    border: 0; background: transparent;
box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.cookie-banner-visible .floating { bottom: max(18px, env(safe-area-inset-bottom)); }
.floating:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.floating:hover img {
    transform: scale(1.045);
    filter:
        brightness(1.08)
        contrast(1.04)
        saturate(1.08)
        drop-shadow(0 10px 14px rgba(0,0,0,.55))
        drop-shadow(0 0 8px rgba(235,190,85,.48))
        drop-shadow(0 0 18px rgba(218,151,40,.22));
}
.footer-cookie-settings { display:inline; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.footer-cookie-settings:hover, .footer-cookie-settings:focus-visible { color:var(--blue); text-decoration:underline; }

.membership-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch; }
.membership-card { border-radius:22px; padding:26px; display:flex; flex-direction:column; min-width:0; position:relative; overflow:hidden; }
.membership-card::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg,var(--blue),transparent 68%); opacity:.85; }
.membership-card--premier::before { background:linear-gradient(90deg,var(--pink),var(--orange),transparent 75%); }
.membership-medallion { width:74px; height:74px; object-fit:contain; border-radius:50%; margin:0 0 18px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.membership-card h2 { margin:.4rem 0 .8rem; }
.membership-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:12px 0; }
.membership-price strong { font:900 clamp(2rem,3.2vw,3.1rem)/1 ui-monospace,monospace; color:#fff; text-shadow:0 0 22px var(--glow-blue); }
.membership-card--premier .membership-price strong { text-shadow:0 0 22px var(--glow-pink); }
.membership-price span, .membership-equivalent { color:var(--soft); font-weight:750; }
.membership-allowance { padding:12px 14px; border:1px solid var(--line); background:rgba(0,0,0,.2); border-radius:12px; }
.membership-card ul { padding-left:1.2rem; color:var(--soft); line-height:1.55; flex:1; }
.membership-card .btn { margin-top:auto; text-align:center; }
.plus-block, .pricing-footnote { margin-top:22px; border-radius:22px; padding:26px; }
.plus-block { border-color:rgba(233,82,51,.4); background:linear-gradient(145deg,rgba(233,82,51,.12),rgba(255,255,255,.045)); }
.plus-block a { color:#fff; font-weight:800; }
.pricing-footnote p:last-child { margin-bottom:0; }

.vp-cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); background:rgba(6,7,12,.68); border-top:1px solid rgba(255,255,255,.15); -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); box-shadow:0 -18px 50px rgba(0,0,0,.28); }
.vp-cookie-banner[hidden], .vp-cookie-preferences[hidden] { display:none !important; }
.vp-cookie-inner { width:min(1500px,100%); margin:auto; }
.vp-cookie-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.vp-cookie-summary h2 { margin:.2rem 0 .25rem; font-size:1.2rem; }
.vp-cookie-summary p { margin:0; color:var(--soft); max-width:900px; font-size:.92rem; line-height:1.5; }
.vp-cookie-summary a { color:#fff; }
.vp-cookie-actions, .vp-cookie-save-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.vp-cookie-btn { min-height:42px; border:1px solid var(--line-strong); border-radius:10px; padding:10px 14px; background:rgba(255,255,255,.055); color:#fff; cursor:pointer; font-weight:800; }
.vp-cookie-btn:hover { background:rgba(255,255,255,.12); }
.vp-cookie-btn--accept { border-color:rgba(89,162,255,.7); background:rgba(89,162,255,.18); }
.vp-cookie-btn--reject { border-color:rgba(255,113,142,.65); background:rgba(255,113,142,.10); }
.vp-cookie-btn--neutral { margin-left:auto; background:transparent; border-color:var(--line); }
.vp-cookie-preferences { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.vp-cookie-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.vp-cookie-option { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); }
.vp-cookie-option input { margin-top:3px; accent-color:var(--blue); }
.vp-cookie-option span { display:grid; gap:3px; }
.vp-cookie-option small { color:var(--muted); line-height:1.35; }
.vp-cookie-option--essential { opacity:.82; }
.vp-cookie-status { min-height:1.25em; margin:10px 0; color:#fff; font-weight:800; }

.legal-table { width:100%; overflow-wrap:anywhere; }
@media (max-width:1180px) { .membership-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:780px) {
    .nav { width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
    .nav a { flex:0 0 auto; }
    .membership-grid { grid-template-columns:1fr; }
    .vp-cookie-summary { grid-template-columns:1fr; gap:10px; }
    .vp-cookie-actions { display:grid; grid-template-columns:1fr 1fr; }
    .vp-cookie-actions .vp-cookie-btn:last-child { grid-column:1/-1; }
    .vp-cookie-options { grid-template-columns:1fr; }
    .vp-cookie-save-row { display:grid; grid-template-columns:1fr 1fr; }
    .vp-cookie-btn--neutral { grid-column:1/-1; margin-left:0; }
    .floating { width:64px; height:64px; border-width:4px; }
	.floating:hover { transform: translateX(-50%); }
}
@media (max-width:430px) {
    .wrap { width:min(calc(100% - 24px), var(--max)); }
    .membership-card, .plus-block, .pricing-footnote { padding:20px; border-radius:18px; }
    .vp-cookie-banner { padding:10px 10px max(10px,env(safe-area-inset-bottom)); }
    .vp-cookie-summary p { font-size:.84rem; }
    .vp-cookie-btn { padding:9px 10px; font-size:.82rem; }
    .vp-cookie-actions, .vp-cookie-save-row { grid-template-columns:1fr; }
    .vp-cookie-actions .vp-cookie-btn:last-child, .vp-cookie-btn--neutral { grid-column:auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================
   FINAL NARROW-VIEWPORT HARDENING
   Prevent min-content expansion in hero, subscription and admin UI.
   ========================================================= */
@media (max-width: 780px) {
    .hero > *,
    .hero-panel,
    .hero-panel-in,
    .zagran-store-grid,
    .zagran-review-grid,
    .zagran-store-card,
    .zagran-review-card,
    .zagran-review-header,
    .zagran-store-card-head,
    .zagran-store-meta,
    .zagran-review-actions,
    .zagran-store-actions {
        min-width: 0;
    }

    .hero h1 em {
        white-space: normal;
    }

    .zagran-store-grid,
    .zagran-review-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zagran-review-header,
    .zagran-store-card-head,
    .zagran-header-meta {
        flex-wrap: wrap;
    }

    .zagran-app-header {
        height: auto;
        min-height: 70px;
        gap: 10px 16px;
        padding-block: 12px;
        flex-wrap: wrap;
    }

    .zagran-header-meta {
        min-width: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 430px) {
    .long-hero h1 {
        font-size: clamp(38px, 11vw, 48px);
        overflow-wrap: anywhere;
    }

    .hero h1 {
        font-size: clamp(46px, 15vw, 60px);
        overflow-wrap: anywhere;
    }

    .vp-cookie-actions {
        grid-template-columns: 1fr 1fr;
    }

    .vp-cookie-actions .vp-cookie-btn:last-child {
        grid-column: 1 / -1;
    }

    .vp-cookie-save-row {
        grid-template-columns: 1fr;
    }
}