/* =========================================================================
   Cosmetics Manufacturing ERP — shared stylesheet
   Hand-written, no framework, self-contained (works as-is on Hostinger).
   ========================================================================= */

:root {
    --admin-sidebar-width: 232px;
    --bg: #faf7f8;
    --surface: #ffffff;
    --surface-2: #f4eef1;
    --border: #ecdfe6;
    --ink: #2b232a;
    --ink-soft: #6d6270;
    --muted: #9a8f96;
    --primary: #c0417a;        /* rose */
    --primary-dark: #9c2f61;
    --primary-soft: #fbeaf2;
    --accent: #6c4bb6;         /* plum */
    --ok: #2e9e6b;
    --ok-soft: #e5f5ec;
    --warn: #d98a2b;
    --warn-soft: #fbf0df;
    --danger: #d5453f;
    --danger-soft: #fbe6e5;
    --info: #3a78c2;
    --info-soft: #e6f0fb;
    --shadow: 0 1px 2px rgba(43,35,42,.05), 0 6px 20px rgba(43,35,42,.06);
    --radius: 12px;
    --radius-sm: 8px;
    --maxw: 1200px;
    --font: "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
small { color: var(--ink-soft); }

/* ---- layout helpers ---------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row.between { justify-content: space-between; align-items: center; }
.row.middle { align-items: center; }
.grow { flex: 1 1 auto; }
.stack > * + * { margin-top: 14px; }
.muted { color: var(--muted); }
.soft { color: var(--ink-soft); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.mt0 { margin-top: 0; }
.mono { font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: 16px; }
.grid.tight { gap: 12px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1150px) {
    .grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
    .grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- top bar ----------------------------------------------------------- */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 40;
}
.topbar .inner {
    max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; gap: 18px;
}
.brand {
    font-weight: 750; font-size: 1.15rem; color: var(--ink);
    display: flex; align-items: center; gap: 8px; letter-spacing: -.02em;
}
.brand .dot { width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent)); }
.topnav { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav a {
    padding: 7px 12px; border-radius: 999px; color: var(--ink-soft);
    font-weight: 550; font-size: .92rem;
}
.topnav a:hover { background: var(--surface-2); text-decoration: none; }
.topnav a.active { background: var(--primary-soft); color: var(--primary-dark); }

/* ---- cards ------------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.card.pad-lg { padding: 24px; }
.card h2, .card h3 { margin-top: 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---- stat tiles -------------------------------------------------------- */
.stat {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 12px; box-shadow: var(--shadow);
}
.stat .label { color: var(--ink); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; line-height: 1.25; }
.stat .value { font-size: 1.125rem; font-weight: 700; margin-top: 2px;
    letter-spacing: -.01em; color: var(--ink); }
.stat .sub { margin-top: 2px; font-size: .625rem; line-height: 1.25; color: var(--ink-soft); }
.stat .value.rose { color: var(--primary-dark); }
/* #3 - money reads green when earned, red when owed. */
.stat .value.pos { color: var(--ok); }
.stat .value.neg { color: var(--danger); }

/* Icon chip, top-right (#1). Tinted per card, mirroring the Beverage cards. */
.stat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-row > div:first-child { min-width: 0; }
.stat .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: auto; border: 0; background: none;
    font-size: 2.1rem; line-height: 1;
}
/* Colour classes are kept so the markup and the card tint still agree; they
   now only set a text colour, which matters for any non-emoji glyph. */
.stat-ico.c-rose   { color: var(--primary-dark); }
.stat-ico.c-ok     { color: var(--ok); }
.stat-ico.c-warn   { color: var(--warn); }
.stat-ico.c-danger { color: var(--danger); }
.stat-ico.c-info   { color: var(--info); }
.stat-ico.c-plum   { color: var(--accent); }

/* clickable KPI card (#2 - the chevron arrow is gone; the icon carries it now) */
a.stat.link { display: block; text-decoration: none; transition: .15s; }
a.stat.link:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(43,35,42,.12); border-color: var(--primary); text-decoration: none; }

/* ---- dashboard box cards & clickable table rows ---- */
.dashboard-box-card { display: flex; flex-direction: column; min-height: 300px; }
.dashboard-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.dashboard-box-header h3 { margin: 0; }
.dashboard-box-card .table-wrap { flex: 1 1 auto; overflow-y: auto; max-height: 250px; }
.report-wide-chart { min-height: 270px; }
.dashboard-detail-modal {
    height: min(50vh, 440px);
    max-height: calc(100vh - 32px);
}
.dashboard-detail-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Every popup opened from the dashboard uses the same compact viewport and
   keeps long record lists inside the modal body. */
body.dashboard-page .modal {
    height: min(50vh, 440px);
    max-height: calc(100vh - 32px);
}
body.dashboard-page .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.data tr.clickable-row { cursor: pointer; transition: background-color .15s ease; }
.data tr.clickable-row:hover { background-color: var(--surface-2, #fbf7f9); }
.data tr.clickable-row td a { color: var(--primary-dark); text-decoration: none; }
.data tr.clickable-row:hover td a { text-decoration: underline; }

/* ---- lightweight report charts ---------------------------------------- */
.chart-card { min-height: 230px; padding: 13px; }
.dashboard-chart-grid .chart-card { height: 288px; min-height: 288px; overflow: hidden; }
.dashboard-chart-grid { gap: 10px; }
.dashboard-box-card { min-height: 250px; padding: 13px; }
.dashboard-box-card .dashboard-box-header { margin-bottom: 8px; }
.chart-card h3 { margin-bottom: 0; }
.bar-chart { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: minmax(82px, 1fr) minmax(90px, 3fr) auto; align-items: center; gap: 10px; font-size: .84rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.bar-track { height: 13px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; min-width: 3px; border-radius: inherit; background: var(--primary); }
.bar-value { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.pie-layout { display: flex; align-items: center; justify-content: center; gap: 26px; min-height: 190px; }
.pie-chart {
    width: 156px; height: 156px; flex: 0 0 156px; border-radius: 50%;
    background: var(--surface-2); position: relative;
    display: flex; align-items: center; justify-content: center;
}
/* A wide hole, so the ring reads as a band like the reference donut. */
.pie-chart::after { content: ""; position: absolute; inset: 30px; border-radius: 50%; background: var(--surface); }
.pie-centre { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.pie-centre b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.pie-centre i {
    display: block; margin-top: 2px; font-style: normal; font-size: .6rem;
    font-weight: 700; letter-spacing: .08em; color: var(--muted);
}
/* label | count | percent, so the columns line up down the legend. */
.chart-legend { display: grid; gap: 10px; min-width: 190px; flex: 1 1 auto; }
.chart-legend-item {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px;
    align-items: center; gap: 9px; font-size: .85rem;
}
.chart-legend-item .legend-value { font-weight: 700; color: var(--ink); text-align: right; }
.chart-legend-item .legend-pct { color: var(--muted); text-align: right; font-size: .8rem; }
.legend-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; }
.legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.legend-value { margin-left: auto; font-weight: 650; }
.chart-empty { color: var(--muted); text-align: center; padding: 50px 12px; }
@media (max-width: 520px) {
    .pie-layout { gap: 14px; }
    .pie-chart { width: 112px; height: 112px; flex-basis: 112px; }
    .pie-chart::after { inset: 27px; }
    .chart-legend { min-width: 0; flex: 1; }
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 9px 16px; font-size: .93rem; font-weight: 600; cursor: pointer;
    background: var(--surface-2); color: var(--ink); transition: .15s;
    font-family: inherit; text-decoration: none;
}
.btn:hover { filter: brightness(.98); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---- badges ------------------------------------------------------------ */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--surface-2); color: var(--ink-soft); }

/* ---- forms ------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; color: var(--ink); }
.field { margin-bottom: 14px; }
input, select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit;
    background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; }
.help { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.err { color: var(--danger); font-size: .82rem; margin-top: 4px; }

/* password show/hide toggle */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 42px; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px 6px; line-height: 1;
    font-size: 1.05rem; color: var(--muted); border-radius: 6px;
}
.pw-toggle:hover { background: var(--surface-2); }

/* ---- tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { color: var(--ink-soft); font-weight: 650; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em; background: var(--surface-2); position: sticky; top: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- product catalogue (Amazon / Flipkart-style) ---------------------- */
.catalog-toolbar {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 18px;
}
.catalog-toolbar .field { margin-bottom: 0; }
.catalog-count { color: var(--ink-soft); font-size: .88rem; margin: 0 0 12px; }

.catalog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.catalog-sidebar { background: #fff; color: var(--primary-dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; box-shadow: var(--shadow); position: sticky; top: 18px; }
.catalog-sidebar .field { margin-bottom: 14px; }
.catalog-sidebar .field:last-child { margin-bottom: 0; }
.catalog-category-box { background: #fff; color: var(--primary-dark); border: 1px solid var(--primary); border-radius: 10px; padding: 13px 14px; margin-bottom: 16px; }
.catalog-category-box span { display:block; font-size:.68rem; letter-spacing:.08em; opacity:.85; }
.catalog-category-box strong { display:block; margin-top:3px; font-size:1.05rem; }
.category-list { display:flex; flex-direction:column; gap:3px; margin-top:10px; }
.category-choice { display:flex; align-items:center; gap:9px; border:0; border-radius:7px; padding:7px 8px; text-align:left; background:transparent; color:var(--primary-dark); cursor:pointer; font:inherit; font-size:.82rem; }
.category-choice input { width:16px; height:16px; margin:0; accent-color:var(--primary); cursor:pointer; }
.category-choice:hover, .category-choice.active { background:var(--primary-soft); color:var(--primary-dark); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.product-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(43,35,42,.13); border-color: #e2c9d7; }

/* Media box — white with the product image contained (clean e-commerce look). */
.pcard-media { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.pcard-media .layer {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.pcard-media img, .pcard-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-media .hover-layer { opacity: 0; transition: opacity .25s ease; }
.pcard-media.colour-selected .hover-layer { opacity: 0 !important; }
.product-card:hover .pcard-media .hover-layer,
.product-row:hover .pcard-media .hover-layer { opacity: 0; }
.pcard-media .placeholder {
    width: 100%; height: 100%; font-size: 2.6rem; font-weight: 700; color: var(--primary-dark);
    background: linear-gradient(135deg, var(--primary-soft), #efe7f6);
}
.pcard-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
    background: rgba(20,12,18,.72); color: #fff; font-size: .68rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(2px);
}

.product-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-title {
    font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.pcard-rating { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.stars { color: #f5a623; letter-spacing: 1.5px; font-size: .82rem; line-height: 1; }
.stars .off { color: #dbccd3; }
.price { font-size: 1.2rem; font-weight: 750; color: var(--ink); }
.pcard-stock { font-size: .8rem; font-weight: 600; color: var(--ok); }
.pcard-stock.low { color: var(--warn); }
.pcard-stock.out { color: var(--danger); }
.delivery-note {
    font-size: .82rem; background: var(--info-soft); color: var(--info);
    padding: 6px 10px; border-radius: var(--radius-sm);
}
.delivery-note.warn { background: var(--warn-soft); color: var(--warn); }
.delivery-note.ok { background: var(--ok-soft); color: var(--ok); }

/* ---- timeline ---------------------------------------------------------- */
.timeline { display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0; }
.tl-step { flex: 1 1 0; min-width: 90px; text-align: center; position: relative; padding-top: 26px; }
.tl-step::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 3px;
    background: var(--border); z-index: 0;
}
.tl-step:last-child::before { display: none; }
.tl-dot {
    width: 16px; height: 16px; border-radius: 50%; background: var(--border);
    position: absolute; top: 2px; left: calc(50% - 8px); z-index: 1; border: 3px solid var(--surface);
}
.tl-step.done .tl-dot { background: var(--ok); }
.tl-step.active .tl-dot { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.tl-label { font-size: .78rem; color: var(--ink-soft); }
.tl-step.done .tl-label, .tl-step.active .tl-label { color: var(--ink); font-weight: 600; }

/* ---- toast ------------------------------------------------------------- */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow); font-size: .9rem; max-width: 340px; animation: slidein .2s ease;
}
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; } }

/* ---- modal ------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(43,35,42,.45); z-index: 60;
    display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow: hidden;
}
.modal {
    background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 560px;
    height: min(760px, calc(100vh - 48px)); max-height: calc(100vh - 48px);
    box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 22px;
    display: flex; flex-direction: column;
}
.modal.compact { height: auto; max-height: calc(100vh - 32px); }
.modal.compact .modal-body { overflow-y: auto; }
.product-stock-media { align-items: start; }
.product-stock-media > .field { margin-bottom: 0; }
.report-chart-pair { align-items: stretch; }
.report-chart-pair > .chart-card { min-height: 230px; }
.report-table-grid > .card { min-height: 250px; display: flex; flex-direction: column; }
.report-table-grid > .card .table-wrap { overflow-y: auto; max-height: 230px; }

/* Desktop dashboard charts: keep the visual and legend close together instead
   of reserving a large empty area underneath them. */
@media (min-width: 821px) {
    .dashboard-chart-grid .chart-card {
        height: 246px; min-height: 246px; padding: 10px;
    }
    .dashboard-chart-grid .pie-layout { min-height: 168px; gap: 18px; }
    .dashboard-chart-grid .pie-chart { width: 138px; height: 138px; flex-basis: 138px; }
    .dashboard-chart-grid .pie-chart::after { inset: 27px; }
    .dashboard-chart-grid .chart-legend { gap: 7px; min-width: 160px; }
    .dashboard-box-card { min-height: 220px; padding: 10px; }
    .dashboard-box-card .table-wrap { max-height: 190px; }
}
.modal.lg { max-width: 820px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }

/* ---- misc -------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.spinner {
    width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--primary);
    border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cart-badge {
    background: var(--primary); color: #fff; border-radius: 999px; font-size: .72rem;
    padding: 1px 7px; margin-left: 4px; font-weight: 700;
}
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .92rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 550; }

/* ---- auth pages -------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(135deg, var(--primary-soft), #efe7f6); }
.auth-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
    padding: 32px; width: 100%; max-width: 400px; }

/* ---- admin shell ------------------------------------------------------- */
.admin { display: grid; grid-template-columns: var(--admin-sidebar-width) 1fr; min-height: 100vh; }
.sidebar {
    background: #2b232a; color: #eaded9; padding: 18px 12px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .brand { color: #fff; padding: 6px 10px 16px; }
.sidebar #sideMenu { flex: 1 1 auto; }
/* Logout pinned bottom-right of the sidebar (#1). */
/* 1.11 - account tile at the foot of the rail; Logout expands above it. */
.sidebar-foot {
    margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10);
    display: flex; flex-direction: column; gap: 8px;
}
.acct-card {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px; border-radius: 14px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    transition: background .15s, border-color .15s;
}
.acct-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); }
.acct-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-weight: 800; font-size: .8rem;
}
.acct-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.acct-name { font-size: .8rem; font-weight: 700; color: #fff; }
.acct-mail { font-size: .66rem; color: #b7a9b1; }
.acct-name, .acct-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { color: #b7a9b1; font-size: .7rem; transition: transform .15s; }
.acct-card.open .acct-caret { transform: rotate(180deg); }
.acct-logout {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 12px; border-radius: 12px; cursor: pointer; font-family: inherit;
    font-size: .78rem; font-weight: 700;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #eaded9;
    transition: background .15s, color .15s, border-color .15s;
}
.acct-logout:hover { background: var(--danger-soft); color: var(--danger); border-color: #f2c9c7; }
.side-link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
    color: #cdc0c8; font-weight: 550; font-size: .92rem; cursor: pointer; margin-bottom: 2px;
}
.side-link:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.side-link.active { background: var(--primary); color: #fff; }
.side-link .side-label { flex: 1 1 auto; }
/* WhatsApp-style pending-count badge. */
.nav-badge {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #e0322e; color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px;
    text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.side-link.active .nav-badge { background: #fff; color: var(--primary-dark); }
.side-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8f8189;
    padding: 14px 12px 6px; }
.admin-main { padding: 22px 26px; min-width: 0; }
/* Sticky top bar, mirroring the Beverage header: translucent white, blurred,
   hairline bottom border, sits above the scrolling content. The negative
   margins + padding let it span the full width of the padded <main>. */
.admin-head {
    position: sticky; top: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: nowrap; gap: 14px;
    margin: -22px -26px 16px; padding: 10px 26px;
    min-height: 72px;
    background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(43,35,42,.05);
}
.admin-head > h1 { flex: 0 0 auto; white-space: nowrap; }
/* The dashboard's greeting lives inside the header; it collapses when empty. */
.head-greet { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.head-greet:empty { display: none; }
@media (max-width: 900px) {
    .admin-head { flex-wrap: wrap; margin: -16px -16px 14px; padding: 10px 16px; }
    .admin-head > h1 { font-size: 1.25rem; }
}
@media (max-width: 820px) {
    .admin { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 4px; }
    .side-group { width: 100%; }
}

/* ---- 3-dot action menu (#2) ------------------------------------------- */
.actions { display: inline-block; }
.action-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; line-height: 1;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-soft);
    font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.action-toggle:hover { background: var(--surface-2); color: var(--ink); }
.action-menu {
    position: fixed; display: none; z-index: 80; min-width: 172px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px;
}
.actions.open .action-menu { display: block; }
.action-menu button, .action-menu a {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 8px 12px; border: none; border-radius: var(--radius-sm);
    background: none; color: var(--ink); font-size: .9rem; font-weight: 550;
    font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.action-menu button:hover, .action-menu a:hover { background: var(--surface-2); text-decoration: none; }
.action-menu button[data-off], .action-menu button.danger { color: var(--danger); }

/* ---- quantity input with unit suffix (#6) ----------------------------- */
.unit-input { position: relative; }
.unit-input > input { padding-right: 52px; }
.unit-suffix {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .85rem; font-weight: 600; pointer-events: none;
}

/* ---- recipe calculator: equal at rest, independent while calculating ----
   align-items:start keeps each card's height tied to its OWN content, so
   calculating in one mode never resizes the other. The shared min-height keeps
   them level at rest (both mode cards always show the same fixed fields). */
.calc-grid { align-items: start; }
.calc-grid > .card { min-height: 280px; }
.calc-out { margin-top: 14px; }

/* ---- dashboard KPI tiles open a detail popup (#2) --------------------- */
/* Card-shaped button. The border is set width/style only - the shorthand would
   out-specify .stat.tint-* and reset every tinted card's border back to grey. */
button.stat.link {
    display: block; width: 100%; text-align: left;
    border-width: 1px; border-style: solid;
    font: inherit; cursor: pointer;
}
button.stat.link:hover {
    transform: translateY(-2px); box-shadow: 0 8px 26px rgba(43,35,42,.12);
    border-color: var(--primary);
}

/* ---- Zomato-style add-to-cart quantity stepper (customer storefront) --- */
.qty-stepper {
    display: flex; align-items: stretch; justify-content: space-between; width: 100%;
    border: 1px solid var(--primary); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--primary-soft);
}
.qty-stepper button {
    flex: 0 0 34px; border: none; background: var(--primary); color: #fff;
    font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
}
.qty-stepper button:hover { background: var(--primary-dark); }
.qty-stepper .qty-input-wrap {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
    color: var(--primary-dark); font-weight: 650; font-size: .9rem; white-space: nowrap;
}
.qty-stepper .qty-count {
    width: 4.5rem; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit;
    font: inherit; text-align: right; padding: 5px 2px;
}
.qty-stepper .qty-count:focus { background: var(--surface); }
.qty-stepper .qty-unit { padding: 5px 6px 5px 2px; }

/* ---- product media: admin gallery grid (#6/#7) ------------------------- */
.media-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px; margin: 6px 0 12px;
}
.media-cell {
    position: relative; aspect-ratio: 1/1; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; background: var(--primary-soft);
}
.media-cell img, .media-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cell .media-tag {
    position: absolute; left: 4px; bottom: 4px; font-size: .68rem; font-weight: 600;
    background: rgba(0,0,0,.6); color: #fff; padding: 1px 5px; border-radius: 4px;
}
.media-cell .media-del {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
    font-size: 1rem; line-height: 1; cursor: pointer;
}
.media-cell .media-del:hover { background: var(--danger, #c0392b); }

/* ---- customer product detail: Amazon-style gallery (#6) ---------------- */
.gallery-main {
    aspect-ratio: 1/1; border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; background: var(--primary-soft); display: flex;
    align-items: center; justify-content: center;
}
.gallery-main img, .gallery-main video { width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.gallery-main .gallery-fallback { font-size: 5rem; font-weight: 700; color: var(--primary-dark); }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumbs .thumb {
    width: 62px; height: 62px; border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--primary-soft); position: relative;
}
.gallery-thumbs .thumb.active { border-color: var(--primary); }
.gallery-thumbs .thumb img, .gallery-thumbs .thumb video { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .thumb .vtag {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; background: rgba(0,0,0,.35);
}

/* ---- clickable catalogue cards (#1) ------------------------------------ */
.product-link { text-decoration: none; }
.product-link:hover { text-decoration: none; }
a.product-title:hover { color: var(--primary-dark) !important; }

/* ---- form line rows (material + qty + price, one row) ------------------ */
.line-row { display: grid; grid-template-columns: 1fr 92px 92px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.line-row.no-price { grid-template-columns: 1fr 120px auto; }
.line-row select, .line-row input { min-width: 0; }
@media (max-width: 520px) {
    .line-row, .line-row.no-price { grid-template-columns: 1fr 1fr auto; }
    .line-row select { grid-column: 1 / -1; }
}

/* ---- profile photo upload + avatar ------------------------------------- */
.avatar {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border);
    background: var(--primary-soft); display: inline-block;
}
.avatar-lg { width: 110px; height: 110px; }
.photo-field { display: flex; align-items: center; gap: 14px; }
.photo-field .avatar-fallback {
    width: 84px; height: 84px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; flex: 0 0 auto;
}

/* ---- attached documents list ------------------------------------------ */
.doc-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.doc-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.doc-row .doc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .doc-size { color: var(--muted); font-size: .8rem; }

/* ---- pending badges on the Customers→Orders tab + toggle --------------- */
.tab-badge {
    display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
    border-radius: 999px; background: #e0322e; color: #fff; font-size: .7rem; font-weight: 700;
    line-height: 18px; text-align: center; vertical-align: middle;
}
.btn .pill {
    display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 2px; border-radius: 999px;
    background: rgba(0,0,0,.14); font-size: .74rem; font-weight: 700; line-height: 18px;
}
.btn-primary .pill { background: rgba(255,255,255,.28); }

/* =======================================================================
   Beverage-parity dashboard chrome, toggles & filters (UI batch)
   ======================================================================= */

/* ---- greeting bar (#6) ------------------------------------------------ */
/* Inside the sticky header the greeting is bare - the header already supplies
   the surface, border and shadow, so no card of its own. */
.greet-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-width: 0;
}
.greet-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.greet-who > div { min-width: 0; }
.greet-hi, .greet-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .greet-sub { display: none; } }
@media (max-width: 820px) { .greet-date { display: none; } }
.greet-logo {
    height: 34px; width: auto; max-width: 155px; object-fit: contain;
    flex: 0 0 auto; display: block;
}
/* 1.7 - the account avatar was removed from the greeting; it lives in the
   sidebar account tile instead. The class is kept for the sign-in fallback. */
.greet-logo-fallback { display: none; }
.greet-hi { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.mobile-page-label { font-size: 1.05rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .greet-hi { font-size: 1.1rem; } }
.greet-sub { margin: 2px 0 0; font-size: .7rem; color: var(--ink-soft); }
.greet-date {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 6px 12px; border-radius: 12px; font-size: .75rem; font-weight: 700;
    background: var(--primary-soft); color: var(--primary-dark); border: 1px solid #f3cede;
}

/* ---- on/off toggle switch (#7) ---------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    position: relative; width: 38px; height: 21px; border-radius: 999px;
    background: #d9d0d5; transition: background .18s; flex: 0 0 auto;
}
.switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
    transition: transform .18s;
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch .switch-text { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.switch input:checked ~ .switch-text { color: var(--ok); }
.switch.busy { opacity: .55; pointer-events: none; }

/* ---- icon button with hover tooltip (#8) ------------------------------ */
.icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--primary-dark);
    font-size: 1.05rem; line-height: 1; text-decoration: none; transition: .15s;
}
.icon-btn:hover { background: var(--primary-soft); border-color: var(--primary); text-decoration: none; }
.icon-btn-with-badge { position: relative; }
.icon-badge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff;
    font-size: .65rem; font-weight: 800; line-height: 18px; text-align: center;
    border: 2px solid var(--surface);
}
.icon-btn.is-refreshing { pointer-events: none; opacity: .6; }
.icon-btn.is-refreshing { animation: spin-refresh .7s linear infinite; }
@keyframes spin-refresh { to { transform: rotate(360deg); } }
.notification-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.notification-item:last-child { border-bottom: 0; }
.notification-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.notification-link:hover { text-decoration: none; color: var(--primary-dark); }
.notification-item strong { font-size: .9rem; }
.notification-item > strong, .notification-link strong { display: block; margin-bottom: 4px; }
.notification-item span { color: var(--ink-soft); font-size: .82rem; line-height: 1.35; }
.notification-popover {
    position: fixed; z-index: 100; width: min(340px, calc(100vw - 16px));
    max-height: min(360px, calc(100vh - 24px)); overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(43,35,42,.2);
}
.notification-popover-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 1rem;
}
.notification-head-actions { display: flex; align-items: center; gap: 8px; }
.notification-head-actions .btn { white-space: nowrap; }
.notification-close {
    width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--ink-soft); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.notification-close:hover { background: var(--surface-2); color: var(--ink); }
.notification-popover-body { padding: 6px 12px 10px; max-height: 280px; overflow-y: auto; }
.notification-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.notification-item.is-read { opacity: .62; }
.icon-btn[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0;
    padding: 5px 9px; border-radius: 8px; background: var(--ink); color: #fff;
    font-size: .7rem; font-weight: 600; white-space: nowrap; opacity: 0;
    pointer-events: none; transform: translateY(-3px); transition: .15s; z-index: 60;
}
.icon-btn[data-tip]:hover::after { opacity: 1; transform: translateY(0); }

/* ---- icons inside the 3-dot action menu (#11) ------------------------- */
.action-menu button, .action-menu a { display: flex; align-items: center; gap: 9px; }
.action-menu .ai {
    flex: 0 0 auto; width: 18px; text-align: center; font-size: .95rem; line-height: 1;
}

/* ---- shared filter bar (reports / products) --------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-bar .field { margin: 0; }
.filter-bar .field.grow { flex: 0 1 300px; max-width: 300px; }
/* Search boxes in both filter styles stay compact instead of eating the row. */
.inline-form .field.grow { flex: 0 1 300px; max-width: 300px; }
@media (max-width: 620px) {
    .filter-bar .field.grow, .inline-form .field.grow { flex: 1 1 100%; max-width: none; }
}

/* ---- segmented switch between two sub-screens (#13) ------------------- */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border); }
.seg button {
    border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 6px 14px; border-radius: 9px; font-size: .82rem; font-weight: 650; color: var(--ink-soft);
}
.seg button.on { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow); }

/* ---- brand logo replaces the wordmark in the sidebar and on sign-in ---- */
.brand-logo { width: 100%; max-width: 190px; height: auto; object-fit: contain; display: block; }
.brand-logo-lg { max-width: 230px; margin-bottom: 4px; }
/* 1.8 - same height as .admin-head so the wordmark lines up with the greeting. */
/* The brand block is pulled up out of .sidebar's 18px/12px padding so it
   starts at y=0, exactly like .admin-head does via its negative margins. Both
   are then 64px tall and vertically centred, so the wordmark sits on the same
   line as the greeting. If .sidebar's padding changes, change these too. */
.sidebar .brand {
    display: flex; align-items: center; gap: 10px;
    min-height: 72px; margin: -18px -12px 10px; padding: 10px 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-close, .sidebar-toggle { display: none; }
.sidebar-close {
    margin-left: auto; width: 32px; height: 32px; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent;
    color: #fff; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.sidebar-close:hover { background: rgba(255,255,255,.12); }
.sidebar-toggle {
    flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--primary-dark); font-size: 1.05rem; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--primary-soft); border-color: var(--primary); }

/* hidden must win over component display rules (e.g. .btn) */
[hidden] { display: none !important; }

/* ---- a pie and a bar for the same series -------------------------------
   Stacked, not side by side: the pie needs ~310px (142px disc + 145px legend)
   and these cards sit in a 2-column grid, so side-by-side made them collide. */
.dual-chart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.dual-chart > .pie-layout { min-width: 0; }
.dual-chart > .bar-chart {
    min-width: 0; padding-top: 14px; border-top: 1px dashed var(--border);
}

/* =======================================================================
   Colourful metric cards, column charts and the image lightbox
   ======================================================================= */

/* ---- tinted KPI cards -------------------------------------------------- */
.stat.tint-rose   { background: linear-gradient(155deg, #fdeef5 0%, #fff 78%); border-color: #f4d3e2; }
.stat.tint-ok     { background: linear-gradient(155deg, #e7f6ee 0%, #fff 78%); border-color: #c7e8d6; }
.stat.tint-warn   { background: linear-gradient(155deg, #fdf2e0 0%, #fff 78%); border-color: #f0dfbe; }
.stat.tint-danger { background: linear-gradient(155deg, #fdeae9 0%, #fff 78%); border-color: #f4cdcb; }
.stat.tint-info   { background: linear-gradient(155deg, #e8f1fc 0%, #fff 78%); border-color: #cbdff5; }
.stat.tint-plum   { background: linear-gradient(155deg, #f1ebfb 0%, #fff 78%); border-color: #ded4f3; }
/* On a tinted card the chip goes solid so it still reads as a distinct mark. */
.stat[class*="tint-"] .stat-ico { background: none; border: 0; }
.stat[class*="tint-"] .label { color: var(--ink); }

/* ---- vertical bar graph with a value axis ------------------------------
   Mirrors the Beverage chart: horizontal dashed gridlines only, tick labels
   down the left, no axis lines, uniform bars with rounded tops. */
.axis-chart { --ac-h: 168px; --ac-yw: 38px; width: 100%; }
.ac-body { display: grid; grid-template-columns: var(--ac-yw) minmax(0, 1fr); height: var(--ac-h); }

.ac-yaxis { position: relative; }
.ac-yaxis span {
    position: absolute; right: 8px; transform: translateY(50%);
    font-size: 10px; line-height: 1; color: #64748b; white-space: nowrap;
}

.ac-plot { position: relative; min-width: 0; }
.ac-grid { position: absolute; inset: 0; }
.ac-grid i {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 1px dashed #e2e8f0;
}

.ac-bars {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    gap: 10px; padding: 0 4px;
}
.ac-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.ac-bar {
    width: 100%; max-width: 74px; margin: 0 auto;
    background: var(--primary); border-radius: 6px 6px 0 0;
    transition: height .25s ease;
}
.ac-col:hover .ac-bar { background: var(--primary-dark); }

.ac-foot { display: grid; grid-template-columns: var(--ac-yw) minmax(0, 1fr); margin-top: 6px; }
.ac-labels { display: flex; gap: 10px; padding: 0 4px; min-width: 0; }
.ac-labels span {
    flex: 1 1 0; min-width: 0; text-align: center;
    font-size: 10px; color: #64748b; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- product media manager -------------------------------------------- */
.media-manager { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface-2); }
.media-manager .mm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.media-manager .mm-count { font-size: .78rem; color: var(--ink-soft); }
.media-cell .media-dl {
    position: absolute; top: 3px; right: 29px; width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
    font-size: .78rem; line-height: 1; cursor: pointer; text-decoration: none;
}
.media-cell .media-dl:hover { background: var(--info); text-decoration: none; }
.media-cell .media-open { cursor: zoom-in; }

/* ---- in-page image lightbox (no new browser tab) ---------------------- */
.lightbox {
    position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; padding: 24px;
    background: rgba(28,22,27,.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lightbox img, .lightbox video {
    max-width: min(92vw, 1100px); max-height: 78vh; border-radius: 10px;
    background: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.lightbox .lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lightbox .lb-name { color: #fff; font-size: .85rem; opacity: .85; max-width: 60vw; overflow-wrap: anywhere; }
.lightbox .lb-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 8px 15px; border-radius: 10px; font-size: .85rem; font-weight: 650;
    border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
    color: #fff; font-family: inherit; text-decoration: none;
}
.lightbox .lb-btn:hover { background: rgba(255,255,255,.24); text-decoration: none; }
.lightbox .lb-close { position: absolute; top: 16px; right: 20px; font-size: 1.7rem; }

/* ---- storefront gallery prev / next ----------------------------------- */
.gallery-main { position: relative; }
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 38px; height: 38px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--ink);
    font-size: 1.05rem; line-height: 1; font-family: inherit;
    box-shadow: 0 2px 10px rgba(43,35,42,.18); transition: .15s;
}
.gallery-nav:hover { background: #fff; border-color: var(--primary); color: var(--primary-dark); }
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
@media (max-width: 620px) { .gallery-nav { width: 32px; height: 32px; font-size: .9rem; } }

/* ---- rendered description copy ---------------------------------------- */
.prose { font-size: .92rem; line-height: 1.6; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 .7rem; }
.prose h4, .prose h5, .prose h6 { margin: 1.05rem 0 .4rem; font-weight: 700; color: var(--ink); }
.prose h4 { font-size: 1rem; }
.prose h5 { font-size: .92rem; }
.prose h6 { font-size: .86rem; }
.prose ul, .prose ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .25rem; }
.prose strong { font-weight: 700; }
.prose code {
    background: var(--surface-2); border-radius: 4px; padding: 1px 5px;
    font-size: .85em; font-family: ui-monospace, Consolas, monospace;
}

/* ---- per-screen page heading -------------------------------------------
   The page <h1> in index.html is intentionally commented out, so each screen
   carries its own heading in the toolbar row instead of sitting untitled. */
.section-title { gap: 14px; }
.page-head { min-width: 0; }
.page-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.page-sub { margin-top: 2px; font-size: .78rem; color: var(--ink-soft); }
.section-title .row.middle { flex: 0 0 auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) {
    .section-title { flex-wrap: wrap; }
    .page-title { font-size: 1.05rem; }
}

/* ---- settings: two fields per row so the form fits without scrolling --- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.settings-grid .field { margin-bottom: 12px; min-width: 0; }
.settings-grid .field.span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .settings-grid { grid-template-columns: 1fr; } }

/* ---- ghost buttons need a real hover ----------------------------------
   ".btn-ghost" is transparent, so the base ".btn:hover{filter:brightness(.98)}"
   produced no visible change - "View all", "View details", "Clear",
   "← Back", the toolbar buttons etc. all looked inert. This gives every one of
   them the same feedback. (The sidebar Logout keeps its own hover: an
   #id selector outranks this.) */
.btn-ghost {
    background: transparent; border-color: var(--border); color: var(--ink);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-ghost:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-dark);
    filter: none;
    box-shadow: 0 2px 8px rgba(43,35,42,.08);
    text-decoration: none;
}
.btn-ghost:active { background: var(--primary-soft); border-color: var(--primary-dark); }
.btn-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ---- 3.2 universal footer --------------------------------------------- */
.app-footer {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
    gap: 8px; margin-top: 26px; padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: .85rem; color: var(--ink-soft); text-align: center;
    white-space: nowrap;
}

/* Pinned to the foot of the viewport. .admin-main is the scrolling column, so
   the footer is sticky within it rather than fixed - fixed would sit over the
   sidebar and ignore the content column's width. */
.admin-main > .app-footer {
    position: fixed; left: var(--admin-sidebar-width); right: 0; bottom: 0; z-index: 30;
    min-height: 54px; margin: 0; padding: 10px 26px;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* The shell fills the viewport so a short page still puts the footer at the
   bottom rather than floating under the content. */
.admin-main { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 56px; }
.admin-main > #view { flex: 1 0 auto; }
/* Only wrap when the viewport genuinely cannot fit one line. */
@media (max-width: 460px) { .app-footer { flex-wrap: wrap; white-space: normal; } }
@media (max-width: 820px) {
    .admin { grid-template-columns: 1fr; }
    .admin-main > .app-footer { left: 0; }
}
.app-footer strong { color: var(--ink); font-weight: 700; }
.app-footer .sep { color: rgba(43, 35, 42, .55); }
.app-footer a { color: var(--primary-dark); font-weight: 650; }
.app-footer a:hover { text-decoration: underline; }

/* Mobile admin shell: keep navigation usable without a tall sidebar and keep
   the footer in normal flow so it never covers the last card or table row. */
@media (max-width: 820px) {
    .sidebar { position: static; height: auto; overflow: visible; padding: 8px 10px 10px; }
    .sidebar .brand { min-height: 48px; margin: -8px -10px 8px; padding: 8px 14px; }
    .sidebar #sideMenu { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .sidebar .side-link { flex: 0 0 auto; margin: 0; padding: 8px 10px; font-size: .82rem; }
    .sidebar-foot { padding-top: 8px; gap: 6px; }
    .admin-main { padding: 16px; padding-bottom: 16px; }
    .admin-main > .app-footer { position: static; min-height: 0; margin: 14px -16px -16px; padding: 10px 16px; flex-wrap: wrap; white-space: normal; }
}

@media (max-width: 620px) {
    .dashboard-chart-grid { grid-template-columns: 1fr; }
    .dashboard-chart-grid .chart-card { height: 300px; min-height: 300px; }
    .card { padding: 14px; }
    .section-title { align-items: flex-start; }
    .table-wrap { margin-right: -2px; }
}

/* Admin phones: retain the left navigation and turn every data table into
   readable, labelled cards instead of forcing horizontal scrolling. */
@media (max-width: 820px) {
    .admin { display: block; min-height: 100vh; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 240px; height: 100vh; min-height: 100vh; overflow-y: auto;
        display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
        padding: 10px 8px; z-index: 40; transform: translateX(0); transition: transform .2s ease;
    }
    .sidebar-close { display: inline-flex; }
    .sidebar-toggle { display: inline-flex; }
    body:not(.sidebar-open) .sidebar { transform: translateX(-100%); }
    body.sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(43,35,42,.42); z-index: 35; }
    body.sidebar-open .admin-main { position: relative; z-index: 1; }
    .sidebar .brand { min-height: 52px; margin: -10px -8px 10px; padding: 10px 12px; }
    .sidebar .brand-logo { max-width: 150px; }
    .sidebar #sideMenu { display: block; overflow: visible; padding: 0; }
    .sidebar .side-link { display: flex; width: 100%; margin: 0 0 3px; padding: 8px 8px; font-size: .78rem; gap: 6px; }
    .sidebar .side-link > span:first-child { flex: 0 0 18px; text-align: center; }
    .sidebar .side-label { min-width: 0; overflow-wrap: anywhere; }
    .sidebar-foot { padding-top: 8px; gap: 6px; }
    .acct-card { padding: 7px; gap: 6px; }
    .acct-name { font-size: .7rem; }
    .acct-mail { font-size: .58rem; }
    .admin-main { min-width: 0; padding: 12px; padding-bottom: 12px; }
    .admin-main > .app-footer { position: static; margin: 12px -12px -12px; padding: 9px 12px; }
    .admin-head { position: sticky; z-index: 20; margin: -12px -12px 12px; padding: 8px 12px; min-height: 58px; flex-wrap: nowrap; gap: 8px; }
    .admin-head .head-greet { min-width: 0; overflow: hidden; }
    .admin-head .greet-date { display: none; }
    .admin-head #storefrontLink { display: inline-flex; }
    .admin-head .row.middle { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
}

@media (max-width: 620px) {
    .dashboard-page .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dashboard-page .grid.cols-4 .stat { padding: 9px; border-radius: 12px; }
    .dashboard-page .grid.cols-4 .stat-ico { font-size: 1.7rem; }
    .dashboard-page .grid.cols-4 .stat .label { font-size: .62rem; }
    .dashboard-page .grid.cols-4 .stat .value { font-size: 1rem; }
    .dashboard-page .grid.cols-4 .stat .sub { font-size: .58rem; }
    table.data, table.data thead, table.data tbody, table.data tr, table.data td { display: block; }
    table.data { width: 100%; font-size: .84rem; }
    table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.data tbody { display: grid; gap: 10px; }
    table.data tbody tr {
        border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
        box-shadow: 0 2px 8px rgba(43,35,42,.04); overflow: hidden;
    }
    table.data tbody tr:hover { background: var(--surface); }
    table.data tbody td {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        padding: 8px 10px; min-height: 34px; border-bottom: 1px solid var(--border); text-align: right;
        overflow-wrap: anywhere;
    }
    table.data tbody td::before {
        content: attr(data-label); flex: 0 0 38%; color: var(--ink-soft); font-size: .7rem;
        font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left;
    }
    table.data tbody td:last-child { border-bottom: 0; }
    table.data tbody td.num { text-align: right; }
    table.data tbody td[colspan] { display: block; text-align: center; }
    table.data tbody td[colspan]::before { display: none; }
    table.data tbody td:last-child .actions { margin-left: auto; }
    .table-wrap { overflow: visible; margin: 0; }
    .pager { align-items: flex-start; }
    .section-title { gap: 8px; flex-wrap: wrap; }
    .section-title > .row { width: 100%; }
    .section-title > .row .btn { flex: 1 1 auto; }
    .page-title { font-size: 1rem; }
    .filter-bar, .inline-form {
        flex-wrap: nowrap; overflow: visible; align-items: flex-end; gap: 4px;
        padding-bottom: 2px; min-width: 0;
    }
    .filter-bar .field, .inline-form .field,
    .filter-bar .field.grow, .inline-form .field.grow {
        flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin-bottom: 0;
    }
    .filter-bar .field.grow, .inline-form .field.grow { flex-grow: 1.35; }
    .filter-bar label, .inline-form label { font-size: .65rem; white-space: nowrap; }
    .filter-bar input, .filter-bar select, .inline-form input, .inline-form select {
        min-width: 0; padding: 7px 5px; font-size: .75rem;
    }
    .filter-bar > .btn, .inline-form > .btn {
        flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: 7px 7px; font-size: .75rem;
    }
    #cf_table table.data tbody { grid-template-columns: 1fr; gap: 8px; }
    #cf_table table.data tbody td { padding: 6px 7px; gap: 5px; font-size: .75rem; }
    #cf_table table.data tbody td::before { flex-basis: 42%; font-size: .6rem; }

    /* Raw-material filters have a long label, so keep them in a clean
       two-column form instead of forcing the label and select to collide. */
    #rw_inv .inline-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; overflow: visible; }
    #rw_inv .inline-form .field, #rw_inv .inline-form .field.grow {
        display: block; width: auto; max-width: none; min-width: 0; flex: none;
    }
    #rw_inv .inline-form .field.grow { grid-column: 1 / -1; }
    #rw_inv .inline-form label { white-space: normal; min-height: 2.1em; line-height: 1.15; }
    #rw_inv .inline-form > .btn { width: 100%; }
}

@media (max-width: 430px) {
    .sidebar { width: 226px; }
    .sidebar .brand-logo { max-width: 150px; }
    .sidebar .side-link { font-size: .72rem; padding-left: 5px; padding-right: 5px; }
    .sidebar .side-link > span:first-child { flex-basis: 15px; }
    .admin-main { padding: 9px; }
    .admin-head { margin: -9px -9px 10px; padding: 7px 9px; }
    .admin-head .greet-hi { font-size: .9rem; }
}

/* Shared PWA install prompt. */
.pwa-banner { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 12px 32px rgba(43,35,42,.22); }
.pwa-banner-content { display: flex; align-items: center; gap: 10px; }
.pwa-banner-icon { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.pwa-banner-text { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.pwa-banner-text strong { font-size: .86rem; }
.pwa-banner-text span { color: var(--ink-soft); font-size: .74rem; }
.pwa-btn-install, .pwa-btn-close { border: 0; cursor: pointer; font: inherit; }
.pwa-btn-install { padding: 8px 13px; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; }
.pwa-btn-close { padding: 5px; background: transparent; color: var(--muted); font-size: 1.2rem; }

/* This navigation is rendered for phones only; without this rule it appears
   as an unstyled duplicate row directly below the desktop header. */
.mobile-bottom-nav { display: none; }

/* Compact customer storefront on phones. */
.catalog-filter-btn { display: none; }
@media (max-width: 700px) {
    .customer-home-page .topbar .inner { padding: 0 14px; }
    .customer-home-page main { padding: 12px 14px 24px !important; }
    .customer-home-page .catalog-header-box { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
    .customer-home-page .catalog-header-box h1 { font-size: 1.45rem; }
    .customer-home-page .catalog-filter-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid #efb9c7; border-radius: 8px; background: #fff; color: var(--primary-dark); font: inherit; font-weight: 700; }
    .customer-home-page .catalog-search-top { grid-column: 1 / -1; width: 100%; margin: 0; }
    .customer-home-page .catalog-layout { display: block; height: auto; }
    .customer-home-page .catalog-sidebar { display: none; position: static; height: auto; margin-bottom: 12px; }
    .customer-home-page .catalog-sidebar.open { display: block; }
    .customer-home-page .catalog-results { height: auto; overflow: visible; }
    .customer-home-page .catalog-grid { height: auto; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .customer-home-page .pcard-media { height: auto; aspect-ratio: 1 / 1; }
    .customer-home-page .product-card .product-body { padding: 9px; gap: 5px; }
    .customer-home-page .product-title { font-size: .88rem; }
    .customer-home-page .pcard-features { font-size: .7rem; }
    .customer-home-page .delivery-note { font-size: .7rem; padding: 5px 7px; }
    body.customer-home-page .app-footer { margin: 12px -14px -24px; padding: 10px 14px; }
    .pwa-banner { display: block; }
    .mobile-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        display: flex; justify-content: space-around; gap: 4px;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.98); border-top: 1px solid var(--border);
        box-shadow: 0 -4px 18px rgba(43,35,42,.10);
    }
    .mobile-bottom-nav .nav-item {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
        gap: 2px; border: 0; background: transparent; color: var(--ink-soft);
        font: inherit; font-size: .68rem; text-decoration: none; cursor: pointer;
    }
    .mobile-bottom-nav .nav-item.active { color: var(--primary-dark); font-weight: 700; }
    .mobile-bottom-nav .nav-icon { position: relative; font-size: 1.1rem; line-height: 1; }
    .mobile-cart-badge { position: absolute; top: -6px; right: -10px; min-width: 15px; padding: 1px 4px; border-radius: 99px; background: var(--primary); color: #fff; font-size: .62rem; text-align: center; }
    body.customer-home-page { padding-bottom: 58px; }
}

/* Keep every row action at the far edge of its table, including the shared
   three-dot menus used by dispatch and all purchase-status panels. */
.data th:last-child, .data td:last-child { text-align: right; }
.data td:last-child .actions { margin-left: auto; }

/* Customer order cards: keep the amount, payment method and actions on one
   clean line instead of stacking the View details control below the card. */
.order-summary { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:nowrap; white-space:nowrap; min-width:130px; }
@media (max-width: 760px) {
    .order-summary { gap:8px; }
    .order-summary { min-width:0; }
}
@media (max-width: 560px) {
    .order-summary { flex-wrap:wrap; justify-content:flex-start; white-space:normal; margin-top:10px; width:100%; }
    .order-summary { width:auto; margin-top:10px; }
}

/* ---- 1.5 role badges: one colour per role ------------------------------ */
.role-badge { font-weight: 700; }
.role-admin     { background: #f6e4ef; color: #8d2a5c; }
.role-customer  { background: #e6f0fb; color: #2c5f9e; }
.role-driver    { background: #e7f6ee; color: #1f7a52; }
.role-inventory { background: #efe9fa; color: #543a95; }
.role-production{ background: #fdf2e0; color: #96601c; }
.role-purchase  { background: #e4f3f4; color: #1f6b71; }
.role-dispatch  { background: #fdeae9; color: #a53029; }
.role-vendor    { background: #f0f0f4; color: #4a4a58; }
.role-stockin   { background: #e7f6ee; color: #1f7a52; }
.role-stockout  { background: #fdf2e0; color: #96601c; }

/* ---- table pagination bar ---------------------------------------------- */
.pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pager-info { font-size: .8rem; color: var(--ink-soft); }
.pager .row.middle { gap: 8px; }

/* =======================================================================
   Storefront: Flipkart/Amazon-style product rows, price slider, cart icon
   ======================================================================= */

/* 2.1 storefront wordmark -> logo */
.topbar .brand { display: inline-flex; align-items: center; }
.topbar .brand .brand-logo { max-width: 148px; height: auto; }

/* 2.6 cart icon in the nav */
.cart-ico { display:inline-flex; width:25px; height:25px; vertical-align:middle; }
.cart-ico svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cart-control { position:relative; display:inline-flex; align-items:center; gap:4px; min-height:42px; padding:5px 7px; border-radius:4px; background:transparent; color:#fff; font-weight:750; line-height:1; }
.cart-control .cart-ico { width:36px; height:31px; }
.cart-control .cart-ico svg { stroke-width:2.15; }
.cart-count-inside { position:absolute; top:0; left:27px; color:#ffd1e7; font-size:.82rem; font-weight:850; min-width:12px; text-align:center; line-height:1; }
.cart-label { color:#fff; font-size:1rem; font-weight:750; }
.topbar .topnav a.active .cart-control { background:transparent; color:#fff; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 2.2 max-price slider */
.price-field { min-width: 200px; }
.price-field label { display: flex; align-items: baseline; gap: 6px; }
.price-out { font-weight: 700; color: var(--primary-dark); font-size: .82rem; }
.price-field input[type="range"] {
    width: 100%; accent-color: var(--primary); height: 26px; padding: 0; cursor: pointer;
}

/* 2.3 one product per row: media | details | price + action */
.catalog-list { display: flex; flex-direction: column; gap: 12px; }
.product-row {
    display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; gap: 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.product-row:hover { border-color: var(--primary); box-shadow: 0 8px 26px rgba(43,35,42,.10); }
.product-row .pcard-media { border-radius: 10px; align-self: start; }
.product-row .product-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 2px 0; }
.product-row .product-title { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.plist-desc {
    margin: 2px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.plist-buy {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
    gap: 8px; text-align: right; border-left: 1px solid var(--border); padding-left: 18px;
}
.plist-buy .price { font-size: 1.35rem; }
@media (max-width: 900px) {
    .product-row { grid-template-columns: 150px minmax(0, 1fr); }
    .plist-buy {
        grid-column: 1 / -1; flex-direction: row; align-items: center;
        justify-content: space-between; border-left: 0; padding-left: 0;
        border-top: 1px solid var(--border); padding-top: 10px; text-align: left;
    }
}
@media (max-width: 560px) {
    .product-row { grid-template-columns: 1fr; }
    .product-row .pcard-media { max-width: 220px; }
}

/* 2.5 buy actions on the product page */
.buy-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.buy-actions .btn { flex: 1 1 160px; }
.go-cart { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 600; }

/* ---- 3.1 centred auth cards ------------------------------------------- */
.auth-card .brand { display: flex; justify-content: center; margin-bottom: 6px; }
.auth-card .brand .brand-logo { margin-left: auto; margin-right: auto; }
.auth-card > h2 { text-align: center; }
/* 3.2 footer inside the auth card, on the card's own light-on-dark palette */
.auth-footer {
    margin-top: 14px; padding: 10px 0 0; border-top-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.80); font-size: .68rem; gap: 6px;
}
.auth-footer strong { color: #fff; }
.auth-footer .sep { color: rgba(255,255,255,.35); }
.auth-footer a { color: #ffd9ea; }

/* =======================================================================
   Storefront: pink header, Amazon-style cards, product page, reviews
   ======================================================================= */

/* ---- pink header, white logo, centred nav ----------------------------- */
.topbar { background: var(--primary); border-bottom-color: rgba(255,255,255,.18); }
.topbar .inner { gap: 14px; }
.topbar .brand { flex: 0 0 auto; }
.topbar .brand .brand-logo { max-width: 150px; }
/* The nav takes the middle and centres itself between logo and account. */
.topbar .topnav { flex: 1 1 auto; justify-content: center; gap: 6px; }
.topbar .topnav a { color: rgba(255,255,255,.88); font-weight: 600; }
.topbar .topnav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.topbar .topnav a.active { background: transparent; color: #fff; }
.topbar .row.middle { flex: 0 0 auto; }
.topbar .soft { color: rgba(255,255,255,.92) !important; }
.topbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.topbar .btn-primary { background: #fff; color: var(--primary-dark); }
.topbar .btn-primary:hover { background: rgba(255,255,255,.88); }
.topbar .cart-badge { background: #fff; color: var(--primary-dark); }
.topbar .topnav { align-items: center; gap: 10px; }
.topbar .topnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 14px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.topbar .topnav a, .topbar .cart-label { font-size: 1rem; font-weight: 750; }
.topbar .topnav a.active:hover { background: rgba(255,255,255,.16); color:#fff; }
.topbar .topnav .cart-control { min-height:42px; padding:5px 7px; }
@media (max-width: 760px) { .topbar .topnav { justify-content: flex-start; } }

/* ---- Amazon-style catalogue card -------------------------------------- */
.product-card { display: flex; flex-direction: column; }
.product-card .product-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.pcard-swatches { display: flex; gap: 6px; }
.pcard-colour-switcher { display: flex; align-items: center; gap: 9px; min-height: 22px; }
.pcard-colour-label { color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.pcard-swatches .swatch {
    width: 15px; height: 15px; border-radius: 50%; display: inline-block;
    border: 1px solid rgba(0,0,0,.18); box-shadow: 0 0 0 2px transparent; padding:0; cursor:pointer;
}
.pcard-swatches .swatch.active { box-shadow: 0 0 0 2px var(--ink); }
.pcard-cat { color: var(--ink-soft); }
.pcard-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    color: var(--ink-soft);
    font-size: .78rem;
    line-height: 1.3;
}
.pcard-features li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcard-features li::before {
    content: '•';
    color: var(--primary);
    font-weight: 800;
    margin-right: 6px;
}
.pcard-rating { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.rating-num { font-weight: 600; color: var(--ink); }
.stars { letter-spacing: 1px; }
.stars .on { color: #e6a400; }
.stars .off { color: #d8cfd4; }
.rating-count { color: var(--info); }
.pcard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.pcard-off { color: var(--danger); font-weight: 700; font-size: 1rem; }
.pcard-price .price { font-size: 1.35rem; }
.pcard-mrp { color: var(--muted); font-size: .78rem; text-decoration: line-through; }

/* ---- product detail: sticky media column ------------------------------ */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.pd-info > h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.pd-media { position: sticky; top: 84px; align-self: start; }
@media (max-width: 900px) {
    .pd-layout { grid-template-columns: 1fr; }
    .pd-media { position: static; }
}
.pd-rating { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: .9rem; }
.pd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin: 10px 0 4px; }
.pd-off { color: var(--danger); font-weight: 700; font-size: 1.4rem; }
.pd-price .price { font-size: 1.9rem; }
.pd-mrp { color: var(--muted); font-size: .85rem; text-decoration: line-through; }
.pd-tax { flex-basis: 100%; font-size: .8rem; color: var(--ink-soft); }
.pd-colour-label { margin: 12px 0 6px; font-size: .9rem; color: var(--ink-soft); }
.pd-colour-label b { color: var(--ink); }
.pd-swatches { display: flex; gap: 10px; margin-bottom: 14px; }
.swatch-lg {
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer; padding: 0;
    border: 1px solid rgba(0,0,0,.15); box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s;
}
.swatch-lg:hover { box-shadow: 0 0 0 2px var(--border); }
.swatch-lg.active { box-shadow: 0 0 0 2px var(--primary); }

/* ---- product spec table ------------------------------------------------ */
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .88rem; }
.spec-table th, .spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.spec-table th { width: 190px; background: var(--surface-2); font-weight: 650; color: var(--ink); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---- reviews ----------------------------------------------------------- */
.review-item { padding: 12px 0; border-top: 1px solid var(--border); }
.review-head { display: flex; align-items: center; gap: 9px; }
.review-meta { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }
.review-body { margin: 6px 0 0; font-size: .9rem; line-height: 1.55; }
.review-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.star-pick { display: flex; gap: 4px; }
.star-btn {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    font-size: 1.7rem; line-height: 1; color: #d8cfd4;
}
.star-btn.on { color: #e6a400; }

/* ---- admin: colour options editor -------------------------------------- */
.colors-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 14px; }
.color-row { display: grid; grid-template-columns: 46px minmax(100px, 1fr) minmax(135px, 1fr) auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.color-row input[type="color"] { padding: 2px; height: 36px; cursor: pointer; }
.pd-right { display: flex; flex-direction: column; min-width: 0; }

/* ---- storefront account menu (person icon) ----------------------------- */
.acct-menu { position: relative; }
/* Circular icon button, per the reference. */
.acct-icon {
    width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid rgba(255,255,255,.85);
    color: var(--primary-dark); font-size: 1.15rem; line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.16); transition: transform .15s, box-shadow .15s;
}
.acct-icon:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.acct-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.acct-icon img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.acct-pop {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 232px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: 0 12px 34px rgba(43,35,42,.20); padding: 6px; overflow: hidden;
}
.acct-pop-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-pop-head b { display: block; font-size: .92rem; color: var(--ink); }
.acct-pop-head span { display: block; font-size: .74rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.acct-pop button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--ink);
}
.acct-pop button:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* ---- product key features (fills the space beside the buy box) --------- */
/* Sits directly under the product name, so the buying facts start with what
   the product actually does. */
.pd-features { margin: 10px 0 14px; padding: 12px 14px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pd-features h4 { margin: 0 0 8px; font-size: .92rem; }
.pd-features ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pd-features li {
    position: relative; padding-left: 24px; font-size: .87rem;
    line-height: 1.45; color: var(--ink);
}
.pd-features li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--ok); font-weight: 700;
}
/* Guest menu links share the button styling; logout reads as destructive. */
.acct-pop a {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 12px; border-radius: 10px;
    font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.acct-pop a:hover { background: var(--primary-soft); color: var(--primary-dark); text-decoration: none; }
.acct-pop .acct-danger { color: var(--danger); }
.acct-pop .acct-danger:hover { background: var(--danger-soft); color: var(--danger); }
.mobile-header-account { display: none; }
.account-action-list { display: grid; gap: 8px; }
.account-action-list button {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.account-action-list button:hover { background: var(--primary-soft); color: var(--primary-dark); }
.account-action-list .account-action-danger { color: var(--danger); }

@media (max-width: 760px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar { position: static; }
}
@media (max-width: 480px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .catalog-sidebar { padding: 12px; }
}

/* Customer catalogue layout matching the reference marketplace UI. */
.customer-catalog-page { background: #fbf9fa; color: #1c2433; }
.customer-catalog-page .topbar { background: #fff; color: #162033; border-top: 2px solid var(--primary); border-bottom: 1px solid #f0d9e3; box-shadow: 0 2px 8px rgba(40,20,32,.05); }
.customer-catalog-page .topbar .inner { min-height: 72px; max-width: 1800px; padding: 0 48px; }
.customer-catalog-page .topbar .brand-logo { max-width: 190px; max-height: 48px; object-fit: contain; }
.customer-catalog-page .topbar .topnav, .customer-catalog-page .topbar .row.middle { display: none; }
.customer-catalog-page .catalog-login { margin-left: auto; background: #e50919; color: #fff; border-radius: 9px; padding: 11px 23px; font-weight: 750; box-shadow: 0 4px 12px rgba(229,9,25,.2); text-decoration: none; }
.customer-catalog-page .catalog-login:hover { background: #bf0715; text-decoration: none; }
.customer-catalog-page main.container { max-width: 1800px; padding-left: 36px !important; padding-right: 36px !important; }
.catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin: 34px 0 26px; }
.catalog-heading h1 { font-size: 2.25rem; letter-spacing:-.03em; color:#101827; margin-bottom:5px; }
.catalog-subtitle { margin:0; color:#4f6074; font-size:1.05rem; }
.catalog-top-search { width: 250px; }
.catalog-top-search input { height:42px; border-color:#efb9c7; border-radius:10px; background:#fff; }
.catalog-layout { grid-template-columns: 375px minmax(0, 1fr); gap:26px; }
.catalog-sidebar { padding:0; overflow:hidden; border-color:#f0baca; border-radius:14px; box-shadow:none; }
.filter-head { display:flex; justify-content:space-between; align-items:center; padding:22px; border-bottom:1px solid #f1ccd7; font-size:1.05rem; }
.filter-head button { border:0; background:none; color:#ed0717; font:inherit; font-size:.86rem; font-weight:750; cursor:pointer; }
.catalog-sidebar .catalog-category-box { margin:0 22px; border:0; border-bottom:1px solid #f1ccd7; border-radius:0; padding:24px 0; }
.catalog-category-box span { color:#b33868; }
.catalog-category-box strong { font-size:1.2rem; color:#a62e60; }
.category-list { max-height:290px; overflow:auto; margin-top:14px; }
.category-choice { padding:9px 12px; font-size:.93rem; color:#b33868; }
.category-choice:hover, .category-choice.active { background:#fae8f0; color:#a62e60; }
.catalog-sidebar > .field { margin:0 22px; padding:22px 0; border-bottom:1px solid #f1ccd7; }
.catalog-sidebar > .field:last-child { border-bottom:0; }
.catalog-sidebar label { color:#30343b; font-size:.95rem; font-weight:700; }
.catalog-results { min-width:0; }
.catalog-count { margin:0 0 12px; color:#53657a; font-size:1.05rem; }
.catalog-grid { gap:22px; }
.product-card { border-color:#f1dbe3; border-radius:15px; box-shadow:0 2px 8px rgba(51,29,42,.04); }
.product-card:hover { transform:none; box-shadow:0 10px 24px rgba(51,29,42,.12); border-color:#eeaabd; }
.pcard-media { aspect-ratio: 1.22 / 1; }
.product-card .product-body { padding:17px 15px 18px; gap:9px; }
.product-title { font-size:1.04rem; color:#20202b; }
.pcard-price .price { font-size:1.45rem; }
@media (max-width: 900px) {
    .customer-catalog-page .topbar .inner { padding:0 18px; }
    .customer-catalog-page main.container { padding-left:18px !important; padding-right:18px !important; }
    .catalog-layout { grid-template-columns: 250px minmax(0,1fr); }
    .catalog-heading h1 { font-size:1.8rem; }
}
@media (max-width: 700px) {
    .catalog-heading { display:block; margin-top:22px; }
    .catalog-top-search { width:100%; margin-top:16px; }
    .catalog-layout { grid-template-columns:1fr; }
}

/* The catalogue uses the full available width and scrolls naturally so every
   product remains reachable below the fold. */
.customer-home-page { min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; }
.customer-home-page main { width: 100%; max-width: none; height: auto; min-height: calc(100vh - 116px); overflow: visible; padding-left: 32px !important; padding-right: 32px !important; }
.customer-home-page .catalog-layout { grid-template-columns: 375px minmax(0, 1fr); }
.customer-home-page .catalog-category-box { max-height: 452px; overflow-y: auto; overflow-x: hidden; }
.customer-home-page .category-list { max-height: none; overflow: visible; }
.customer-home-page .catalog-heading-row { align-items: center; margin-bottom: 26px; }
.customer-home-page .catalog-heading-row h1 { margin: 0; }
.customer-home-page .catalog-header-box { background: #fff; border: 1px solid #f0baca; border-radius: 12px; padding: 9px 18px; box-shadow: 0 3px 12px rgba(51,29,42,.04); }
.customer-home-page .catalog-search-top { width: min(450px, 42vw); display: flex; align-items: center; align-self: center; gap: 14px; margin: 0; }
.customer-home-page .search-input-wrap { position: relative; width: 100%; margin: 0; }
.customer-home-page .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--primary-dark); width: 20px; height: 20px; pointer-events: none; }
.customer-home-page .search-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.customer-home-page .catalog-search-top input { height: 40px; width: 100%; padding-left: 42px; border-color: #efb9c7; border-radius: 9px; background: #fff; }
.customer-home-page .catalog-heading-row h1 { font-size: 1.9rem; }
.customer-home-page .catalog-results { min-width: 0; }
.customer-home-page .catalog-count { display: none; }
.customer-home-page .catalog-grid { align-items: start; }
.customer-home-page .product-card { min-width: 0; }
.customer-home-page .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.customer-home-page .topbar .brand .brand-logo { max-width: 205px; max-height: 54px; }
.customer-home-page .topbar .inner { min-height: 82px; }
.customer-topbar .brand .brand-logo { max-width: 200px; max-height: 44px; }
.customer-topbar .inner { position: relative; width: 100%; max-width: none; min-height: 104px; padding: 0 52px; }
.customer-topbar { position: sticky; top: 0; z-index: 60; }
.customer-topbar .brand { position: static; transform: none; z-index: 1; }
.customer-topbar .topnav { flex: 1 1 auto; margin-left: 0; justify-content: center; }
.customer-topbar .row.middle { margin-left: 0; }
.customer-topbar .acct-icon { width: 46px; height: 46px; background: var(--primary); border: 0; box-shadow: none; }
.customer-topbar .acct-icon img { width: 34px; height: 34px; display: block; }
.customer-home-page .acct-icon { width: 46px; height: 46px; background: transparent; border: 0; box-shadow: none; }
.customer-home-page .acct-icon img { width: 34px; height: 34px; }
.customer-home-page .pcard-swatches .swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-dark); }
.customer-home-page .category-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.customer-home-page .category-list { margin-top: 8px; }
.customer-home-page .catalog-category-box { padding-top: 14px; padding-bottom: 14px; }
.customer-home-page .category-choice { padding-top: 6px; padding-bottom: 6px; }
.customer-home-page .catalog-sidebar > .field { padding-top: 14px; padding-bottom: 14px; }
.customer-home-page .category-count { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #f8e4ed; color: var(--primary-dark); font-size: .72rem; font-weight: 800; text-align: center; }
.customer-home-page .category-choice.active .category-count { background: #fff; }

/* ---- Amazon-style dense product card ----------------------------------- */
/* Square image fills the full card top — no gaps, no side bars */
.customer-home-page .pcard-media {
    aspect-ratio: 1 / 1;
}
.customer-home-page .pcard-media img,
.customer-home-page .pcard-media video {
    object-fit: contain;
    object-position: center;
    background: #fff;
}
/* Ultra-compact body */
.customer-home-page .product-card .product-body {
    padding: 10px 12px 12px;
    gap: 3px;
}
/* Title: 2 lines, no wasted min-height */
.customer-home-page .product-title {
    font-size: .88rem;
    min-height: 0;
    -webkit-line-clamp: 2;
}
/* Rating row tighter */
.customer-home-page .pcard-rating { font-size: .74rem; gap: 4px; }
/* Category label hidden — redundant with features */
.customer-home-page .pcard-cat { display: none; }
/* Feature list: 1 line max, smaller */
.customer-home-page .pcard-features { gap: 0; font-size: .74rem; }
.customer-home-page .pcard-features li:nth-child(n+2) { display: none; }
/* Price */
.customer-home-page .pcard-price { gap: 5px; }
.customer-home-page .pcard-price .price { font-size: 1.1rem; }
.customer-home-page .pcard-off { font-size: .82rem; }
/* Hide bulky delivery-note box from catalogue cards — visible on detail page */
.customer-home-page .delivery-note { display: none; }
/* Stock: plain tiny text */
.customer-home-page .pcard-stock { font-size: .74rem; }
@media (max-width: 700px) {
    .customer-topbar .inner { position: relative; min-height: 76px; padding: 0 18px; }
    .customer-topbar .brand { position: absolute; left: 50%; transform: translateX(-50%); }
    .customer-topbar .brand .brand-logo { max-width: 180px; max-height: 46px; }
    .customer-topbar .topnav, .customer-topbar .row.middle { display: none; }
    .customer-home-page .catalog-heading-row { display: block; }
    .customer-home-page .catalog-search-top { width: 100%; margin-top: 16px; }
    .customer-home-page .catalog-header-box { position: sticky; top: 104px; z-index: 50; }
    .customer-home-page .catalog-sidebar { position: sticky; top: 92px; z-index: 20; }
}
.customer-home-page .catalog-grid { scrollbar-width: thin; scrollbar-color: var(--primary) #f8edf2; }
@media (min-width: 701px) {
    .customer-home-page { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
    .customer-home-page .customer-topbar .inner { min-height: 70px; }
    .customer-home-page main { height: auto; min-height: 0; overflow: visible; padding-top: 16px !important; padding-bottom: 18px !important; }
    .customer-home-page .catalog-header-box { padding-top: 8px; padding-bottom: 8px; margin-bottom: 16px; position: sticky; top: 70px; z-index: 50; align-items: center; }
    .customer-home-page .catalog-layout { height: max(620px, calc(100vh - 280px)); align-items: stretch; }
    .customer-home-page .catalog-sidebar { height: 100%; position: sticky; top: 122px; }
    .customer-home-page .catalog-category-box { max-height: none; overflow: visible; }
    .customer-home-page .catalog-results { height: 100%; min-height: 0; overflow: hidden; }
    .customer-home-page .catalog-grid { height: calc(100% - 38px); min-height: 0; overflow-y: auto; padding-right: 8px; align-content: start; }
    .customer-home-page .app-footer { position: static; height: auto; display: flex; align-items: center; justify-content: center; margin: 0; background: #fff; border-top: 1px solid var(--border); }

    /* Fixed catalogue shell: only the product grid is scrollable. */
    body.customer-home-page { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }
    body.customer-home-page .customer-topbar { position: static; flex: 0 0 auto; }
    body.customer-home-page main { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
    body.customer-home-page .catalog-header-box { position: static; flex: 0 0 auto; }
    body.customer-home-page .catalog-layout { flex: 1 1 auto; height: auto; min-height: 0; }
    body.customer-home-page .catalog-sidebar { height: 100%; position: static; overflow: hidden; }
    body.customer-home-page .catalog-results { height: 100%; min-height: 0; overflow: hidden; }
    body.customer-home-page .catalog-grid { height: 100%; min-height: 0; overflow-y: auto; grid-auto-rows: max-content; align-items: start; align-content: start; row-gap: 24px; }
    body.customer-home-page .product-card { height: max-content; align-self: start; }
    body.customer-home-page .product-card .product-body { position: relative; z-index: 1; background: #fff; }
    body.customer-home-page .app-footer { flex: 0 0 auto; }
}
.customer-home-page .catalog-sidebar { position: sticky; top: 122px; align-self: start; }
.catalog-search-top { display:flex; align-items:end; justify-content:flex-end; gap:10px; margin:0 0 14px; }
.catalog-search-top label { color:var(--ink); font-weight:650; font-size:.88rem; }
.catalog-search-top input { width:min(360px, 100%); }
@media (max-width: 620px) {
    .catalog-search-top { display:block; }
    .catalog-search-top label { display:block; margin-bottom:4px; }
    .catalog-search-top input { width:100%; }
}
@media (max-width: 900px) {
    .customer-home-page main { padding-left: 18px !important; padding-right: 18px !important; }
    .customer-home-page .catalog-layout { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .customer-home-page .catalog-layout { grid-template-columns: 1fr; }
    .customer-home-page .catalog-header-box { position: sticky; top: 76px; z-index: 50; }
    .customer-home-page .catalog-sidebar { position: static; top: auto; z-index: 20; }
}

/* Hard desktop guard: the phone navigation and install prompt must never
   consume space in the desktop storefront. */
@media (min-width: 701px) {
    .mobile-bottom-nav, .pwa-banner { display: none !important; }
    .customer-home-page .catalog-layout { display: grid; grid-template-columns: 375px minmax(0, 1fr); }
    .customer-home-page .catalog-sidebar { display: block; }
    .customer-home-page .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Final mobile catalogue overrides. These come after the desktop catalogue
   guard so the phone never inherits the three-column desktop grid. */
@media (max-width: 700px) {
    body.customer-home-page { padding-bottom: 64px; }
    .customer-home-page main {
        width: 100%; min-height: 0; padding: 12px 14px 78px !important;
        overflow: visible; display: block;
    }
    .customer-home-page .catalog-header-box {
        display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
        position: static; margin: 0 0 16px; padding: 14px 12px;
    }
    .customer-home-page .catalog-heading-row h1 { grid-column: 1 / -1; font-size: 1.7rem; line-height: 1.2; }
    .customer-home-page .catalog-filter-btn { grid-column: 1; grid-row: 2; justify-self: start; }
    .customer-home-page .catalog-search-top { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
    .customer-home-page .catalog-layout { display: block; height: auto; }
    .customer-home-page .catalog-sidebar { display: none; position: static; height: auto; margin-bottom: 12px; }
    .customer-home-page .catalog-sidebar.open { display: block; }
    .customer-home-page .catalog-results { height: auto; min-height: 0; overflow: visible; }
    .customer-home-page .catalog-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px; height: auto; min-height: 0; overflow: visible; padding: 0;
        align-content: start; align-items: start;
    }
    .customer-home-page .product-card { min-width: 0; width: 100%; height: auto; align-self: start; }
    .customer-home-page .product-card .product-body { padding: 9px 10px 11px; gap: 4px; }
    .customer-home-page .product-title { font-size: .9rem; line-height: 1.25; }
    .customer-home-page .pcard-price .price { font-size: 1.05rem; }
    .customer-home-page .pcard-rating,
    .customer-home-page .pcard-features,
    .customer-home-page .pcard-stock { font-size: .72rem; }
    .customer-home-page .app-footer { margin: 12px -14px -78px; padding: 10px 14px; }
    .customer-home-page .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; }
    .customer-home-page .mobile-bottom-nav { display: none !important; }
    .customer-home-page .customer-topbar .inner {
        min-height: 104px; padding: 8px 12px 0; display: flex; flex-wrap: wrap; align-content: center;
    }
    .customer-home-page .customer-topbar .brand { position: static; transform: none; width: 100%; justify-content: center; }
    .customer-home-page .customer-topbar .brand .brand-logo { max-width: 170px; max-height: 40px; }
    .customer-home-page .customer-topbar .topnav {
        display: flex; order: 2; flex: 1 1 100%; width: 100%; justify-content: space-around;
        align-items: center; gap: 2px; margin: 4px 0 0;
    }
    .customer-home-page .customer-topbar .topnav > a,
    .customer-home-page .customer-topbar .topnav > .mobile-header-account {
        display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
        min-width: 0; padding: 7px 3px; border-radius: 8px; font-size: .7rem;
        color: #fff; white-space: nowrap; text-align: center;
    }
    .customer-home-page .customer-topbar .topnav > a.active { background: rgba(255,255,255,.18); color: #fff; }
    .customer-home-page .customer-topbar .topnav .cart-control { min-height: 0; padding: 0; color: inherit; font-size: inherit; }
    .customer-home-page .customer-topbar .topnav .cart-ico { width: 18px; height: 18px; }
    .customer-home-page .customer-topbar .topnav .cart-label { display: none; }
    .customer-home-page .mobile-header-account { border: 0; background: transparent; font: inherit; cursor: pointer; }
    .customer-home-page .customer-topbar .row.middle { display: none; }
}

/* Customer mobile navigation is shared by Catalogue, Orders, Cart and all
   other customer pages, not only the catalogue body class. */
@media (max-width: 700px) {
    .mobile-bottom-nav { display: none !important; }
    .customer-topbar .inner {
        min-height: 104px; padding: 8px 12px 0; display: flex; flex-wrap: wrap; align-content: center;
    }
    .customer-topbar .brand { position: static; transform: none; width: 100%; justify-content: center; }
    .customer-topbar .brand .brand-logo { max-width: 170px; max-height: 40px; }
    .customer-topbar .topnav {
        display: flex; order: 2; flex: 1 1 100%; width: 100%; justify-content: space-around;
        align-items: center; gap: 2px; margin: 4px 0 0;
    }
    .customer-topbar .topnav > a,
    .customer-topbar .topnav > .mobile-header-account {
        display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0;
        min-width: 0; padding: 7px 3px; border-radius: 8px; font-size: .7rem;
        color: #fff; white-space: nowrap; text-align: center;
    }
    .customer-topbar .topnav > a.active { background: rgba(255,255,255,.18); color: #fff; }
    .customer-topbar .topnav .cart-control { min-height: 0; padding: 0; color: inherit; font-size: inherit; }
    .customer-topbar .topnav .cart-ico { width: 18px; height: 18px; }
    .customer-topbar .topnav .cart-label { display: none; }
    .customer-topbar .mobile-header-account { display: inline-flex; border: 0; background: transparent; font: inherit; cursor: pointer; }
    .customer-topbar .row.middle { display: none; }
}