/* ============================================================================
   WOS — design layer
   ----------------------------------------------------------------------------
   Loaded AFTER the legacy style.css, so these rules win. It exists because the
   legacy sheet was written for a 2015 marketing page: a `position: absolute`
   page band that floats over the content beneath it, 40 uses of one grey
   hairline for all structure, and a saturated green used for links, headings,
   tiles and state all at once.

   Design rules applied here:
   - Structure comes from a surface LADDER (page → chrome → content), not from
     borders. Borders only separate peers at the same elevation.
   - One hue, one job: the brand green is for INTERACTION only (primary button,
     link, active nav). It is never a surface and never a state.
   - Hover and selected are different fills, because they answer different
     questions.
   - Everything sits in a real container with a spacing scale, so nothing is
     jammed into the top-left corner.
   ============================================================================ */

:root {
    /* Surfaces — three real steps of lightness, so structure reads without borders */
    --bg: #f3f6f4;
    --chrome: #ffffff;
    --surface: #ffffff;
    --sunken: #f7f9f8;
    --hover: #eef3f0;
    --selected: #e2efe6;

    /* Text */
    --text: #16201a;
    --text-muted: #5a6b60;
    --text-faint: #8b9a91;
    --on-accent: #ffffff;

    /* One hue, one job: interaction */
    --accent: #0f8f18;
    --accent-dark: #0a6d12;
    --accent-soft: #e8f5ea;

    /* State — lifecycle only, deliberately not the accent hue */
    --warn-bg: #fff8e6;
    --warn-border: #f0d9a0;
    --warn-text: #6b4e00;
    --danger-bg: #fdeceb;
    --danger-border: #f2c2be;
    --danger-text: #8c2f28;

    --border: #dfe6e1;
    --border-strong: #c6d2ca;

    --radius: 6px;
    --radius-sm: 4px;
    --shadow-sm: 0 1px 2px rgba(16, 40, 24, .06);
    --shadow: 0 2px 8px rgba(16, 40, 24, .08);
    --shadow-lg: 0 8px 24px rgba(16, 40, 24, .12);

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --header-h: 56px;
    --container: 1240px;
}

/* ---------------------------------------------------------------- base ---- */

html, body {
    background: var(--bg);
}

body {
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

#pageIndex {
    width: 100%;
    /* The legacy header is absolutely positioned, so the page needs to clear it. */
    padding-top: var(--header-h);
}

.widthWrapper {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-5);
    box-sizing: border-box;
}

.clearBoth {
    clear: both;
}

/* --------------------------------------------------------------- header --- */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: var(--header-h);
    background: var(--chrome);
    border-top: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

header .widthWrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    height: var(--header-h);
}

header .logoWrapper {
    float: none;
    width: auto;
    height: auto;
    padding-top: 0;
    margin-right: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

header .logoWrapper img {
    width: auto;
    height: 26px;
    display: block;
}

#topNavi {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--sp-2);
    min-width: 0;
}

#topNavi .leftNavi,
#topNavi .rightNavi {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

#topNavi .leftNavi {
    gap: 2px;
    flex-wrap: wrap;
}

#topNavi .rightNavi {
    margin-left: auto;
    gap: var(--sp-2);
}

#topNavi li {
    float: none;
    margin: 0;
}

#topNavi li a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover and selected must not be the same fill. */
#topNavi li a:hover {
    background: var(--hover);
    color: var(--text);
}

#topNavi li a.selected {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

#topNavi li a.selected:hover {
    background: var(--selected);
}

#topNavi li img {
    height: 18px;
    width: auto;
    display: block;
    opacity: .75;
}

#topNavi li a:hover img {
    opacity: 1;
}

/* The hamburger is a mobile affordance; there is already a full nav on desktop. */
#btnMenu {
    display: none;
}

/* --------------------------------------------------------- page heading --- */

/* The legacy band is absolutely positioned and floats over the content beneath it, which is
   why the catalog table and the cart's controls were painted underneath it. Made static: a
   normal page header that occupies its own space. */
.subNavi {
    position: static;
    z-index: auto;
    width: auto;
    background: none;
    margin: 0;
    clear: both;
    border-bottom: 1px solid var(--border);
    background: var(--chrome);
}

.subNavi .widthWrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 64px;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}

.subNavi .labelHolder {
    float: none;
}

.subNavi h1 {
    height: auto;
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text);
}

.subNavi a {
    color: var(--accent);
}

/* ----------------------------------------------------------- containers --- */

/* .secListing is the legacy content wrapper: a fixed 1100px column with a 70px top margin and
   a decorative background image. Replaced with a normal container. */
#pageIndex .secListing,
.secListing {
    width: auto;
    max-width: var(--container);
    margin: var(--sp-5) auto var(--sp-6);
    padding: 0 var(--sp-5);
    background: none;
    box-sizing: border-box;
}

.secListing h2,
#pageIndex .secListing h2 {
    position: static;
    top: auto;
    margin: 0 0 var(--sp-4);
    padding: 0;
    background: none;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --------------------------------------------------------------- cards ---- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card + .card {
    margin-top: var(--sp-4);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.card-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
}

.card-body {
    padding: var(--sp-5);
}

/* ------------------------------------------------------------- toolbar ---- */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.toolbar .spacer {
    margin-left: auto;
}

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

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13.5px;
}

.table thead th,
.table > thead > tr > th {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    background: var(--sunken);
    border-bottom: 1px solid var(--border-strong);
    padding: 10px var(--sp-4);
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.table tbody td,
.table > tbody > tr > td {
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.table tbody tr:hover td {
    background: var(--hover);
}

/* Numeric columns line up when the digits do. */
.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table tfoot td {
    padding: var(--sp-4);
    border-top: 1px solid var(--border-strong);
    font-weight: 650;
    background: var(--sunken);
}

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* NOT overflow:hidden — that makes this element a scroll container, and a sticky thead then
       positions against it and gets clipped (shifted up by --header-h, showing only half). */
    overflow: visible;
}

/* ------------------------------------------------------------ controls ---- */

input[type="search"],
input[type="text"],
input[type="number"],
select {
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.4;
}

input[type="search"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="number"] {
    width: 72px;
    text-align: right;
}

/* Controls size to their content. A search box stretched across a 1240px page reads as a
   layout mistake, and a single-value select does not need the full width either. */
input[type="search"],
input[type="text"],
select {
    width: 100%;
    max-width: 420px;
}

form.toolbar {
    margin: 0 0 var(--sp-4);
}

form.toolbar button {
    flex: 0 0 auto;
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

button:hover:not(:disabled),
.btn:hover {
    background: var(--hover);
    border-color: var(--border-strong);
}

/* Primary = interaction = the accent hue, and nothing else uses it. */
button.primary,
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

button.primary:hover:not(:disabled),
.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

button:disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-sm {
    padding: 4px 9px;
    font-size: 12px;
}

a {
    color: var(--accent);
}

/* -------------------------------------------------------------- alerts ---- */

.alert {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin: 0 0 var(--sp-4);
    font-size: 13.5px;
}

.alert strong {
    font-weight: 650;
}

/* Sample data is a PROVENANCE signal, not a state — so it is deliberately monochrome and
   structural rather than spending a hue that means something else. */
.alert-warning {
    background: var(--sunken);
    border-color: var(--border);
    border-left-color: var(--text-faint);
    color: var(--text-muted);
}

.alert-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    border-left-color: var(--danger-text);
    color: var(--danger-text);
}

.alert-info {
    background: var(--sunken);
    border-color: var(--border);
    border-left-color: var(--accent);
    color: var(--text-muted);
}

/* --------------------------------------------------------- empty state ---- */

.empty {
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* An empty state is a message, not a full-width panel. */
    max-width: 560px;
    margin-inline: auto;
}

.empty .btn {
    width: auto;
}

.empty p {
    margin: 0 0 var(--sp-3);
}

.empty p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------- deals grid ----- */

/* The legacy tiles are floated <li> at a fixed 328px. A grid does the same job without the
   uneven wrap, and reflows instead of collapsing. */
#pageIndex .secListing ul,
.secListing ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-5);
}

#pageIndex .secListing li,
.secListing li {
    float: none;
    width: auto;
    margin: 0;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

#pageIndex .secListing li:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

#pageIndex .secListing li:last-child {
    margin-right: 0;
}

#pageIndex .secListing a,
.secListing a {
    display: block;
    color: var(--text);
    text-decoration: none;
}

#pageIndex .secListing .imgHolder,
.secListing .imgHolder {
    width: 100%;
    height: 190px;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--sunken);
    overflow: hidden;
}

#pageIndex .secListing .imgHolder img,
.secListing .imgHolder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#pageIndex .secListing h3 {
    margin: var(--sp-3) var(--sp-4) 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
}

#pageIndex .secListing h4 {
    margin: 2px var(--sp-4) var(--sp-4);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-faint);
}

/* Makes the card's clickability legible; the whole tile is the link, but nothing said so. */
.card-cta {
    display: block;
    margin: 0 var(--sp-4) var(--sp-4);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}

#pageIndex .secListing li:hover .card-cta {
    text-decoration: underline;
}

/* ------------------------------------------------------------- helpers ---- */

.muted {
    color: var(--text-muted);
}

.faint {
    color: var(--text-faint);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.section-title {
    font-size: 15px;
    font-weight: 650;
    margin: 0 0 var(--sp-3);
}

/* The Blazor template's error bar must stay hidden; the legacy sheet loads after app.css and
   was un-hiding it. */
#blazor-error-ui {
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-border);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: 12px var(--sp-5);
    position: fixed;
    width: 100%;
    z-index: 1100;
    color: var(--warn-text);
    font-size: 13.5px;
}

/* ------------------------------------------------- specificity corrections ---- */
/* The legacy sheet scopes much of its content styling to #pageIndex, and an ID outranks any
   class-based rule here no matter what order the files load in. Anything that must win inside
   the content area has to be ID-scoped here too — this is why the empty-state button was
   stretching to 510px despite `width: auto` further up. */

#pageIndex .empty .btn,
#pageIndex .empty a.btn {
    display: inline-flex;
    width: auto;
}

#pageIndex .table a {
    text-decoration: none;
}

/* The home page's search field sat with no visible box at all. */
#pageIndex .subNavi input[type="search"],
#pageIndex .subNavi input[type="text"] {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: none;
}

/* --------------------------------------------------------------- the hero ---- */
/* The legacy slider is a decorative banner that was eating two-thirds of the page before any
   content appeared, most of it blank. It is a banner, not a billboard. */
#slider {
    max-height: 240px;
    overflow: hidden;
    background: var(--sunken);
    margin: 0;
}

#slider .imgHolderRight {
    width: 100%;
    float: none;
    max-width: var(--container);
    margin: 0 auto;
}

#slider .imgHolderRight img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center right;
    display: block;
}

#slider .slides-container {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A hairline between the page nav and the utility icons reads as stray chrome sitting next to
   two icons; the gap separates them well enough on its own. It is a background IMAGE
   (border-topnavi.png), not a border, so clearing the border alone left it on screen. */
#topNavi .rightNavi {
    border-left: 0;
    padding: 0;
    background: none;
    float: none;
    text-align: right;
}

/* The legacy rule forces `width: 250%` on the logo, which leaves it scaled oddly and soft. */
header .logoWrapper img {
    width: auto;
    height: 30px;
}

/* ---------------------------------------------------------- the footer ---- */
/* The legacy floats four columns inside a charcoal band. A grid does the same job and reflows
   on narrow screens instead of collapsing into a stack of overlapping floats.

   The layout also keeps the footer at the bottom of the viewport on short pages: the header is
   fixed (so out of flow), the main wrapper takes the free space, and the footer sits under it.
   On a short page like an empty cart that is the difference between a page and a stranded band
   floating in the middle. */

html,
body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mainWrapper {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    background: #23282b;
    color: #9fada6;
    padding: var(--sp-6) 0;
    margin-top: var(--sp-6);
    clear: both;
}

footer .widthWrapper {
    display: grid;
    grid-template-columns: 1.1fr 2.2fr 1fr 1fr;
    gap: var(--sp-6);
    align-items: start;
}

footer .logoHolder {
    /* The wordmark is dark charcoal artwork. On a charcoal band it is invisible, so it sits on a
       light panel rather than being recoloured with a filter, which would destroy the crown's
       gold. This works whatever the artwork's own colours are. */
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 18px;
    display: inline-block;
}

footer .logoHolder img {
    width: auto;
    height: 44px;
    display: block;
}

footer h4 {
    margin: 0 0 var(--sp-3);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer li {
    margin: 0 0 var(--sp-2);
    font-size: 12.5px;
    line-height: 1.6;
    color: #9fada6;
}

footer a {
    color: #c9d1cd;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

footer .titleHolder {
    color: #fff;
    font-weight: 600;
    margin-bottom: var(--sp-2);
    /* The block is deliberately two lines (ES ENG SHENG / ESF ENG SHENG FOOD); nowrap stops the
       narrow column from wrapping each line again mid-name. */
    white-space: nowrap;
}

/* The link lists are short labels. Without nowrap a narrow column breaks "SO History" across two
   lines, which reads as two separate links. */
footer .secSitemap li,
footer .secAaccount li {
    white-space: nowrap;
}

/* The ES / ESF prefixes are the one place the brand green survives in the footer. */
footer .titleHolder span {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 900px) {
    footer .widthWrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    footer .widthWrapper {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Mobile — the minimum to make these screens usable on a phone. Not a redesign.

   The first attempt kept the header `position: fixed` at exactly --header-h and
   made the nav a sideways-scrolling single row. That failed for a reason worth
   recording: the nav had to share its one 56px row with the logo AND the three
   right-hand items, so on a phone it was crushed down to a single clipped word
   ("HOM"). A control that is technically present but effectively invisible is
   worse than one that is absent.

   Fix: below this width the header leaves the fixed positioning and joins the
   normal flow. That removes the whole class of problem, because the height
   constraint existed only to keep a fixed header's offset arithmetic honest —
   #pageIndex pads itself by --header-h to clear a fixed header, and if the
   header is in the flow that padding must go. Now the header can be as tall as
   the nav needs, nothing can overlap it, and nothing can be hidden behind it.

   Layout: logo and the cart/profile/logout items keep the first row; the six
   links wrap onto their own row and take as many lines as they need.
   ============================================================================ */
@media (max-width: 780px) {

    header {
        position: static;
        height: auto;
    }

    /* Only needed because the header was fixed. In the flow it would double the gap. */
    #pageIndex {
        padding-top: 0;
    }

    header .widthWrapper {
        flex-wrap: wrap;
        height: auto;
        row-gap: var(--sp-1);
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    /* Removes #topNavi's own box so its children become items of .widthWrapper directly, which is
       what lets the links be ordered onto a row of their own while the logo and icons stay put. */
    #topNavi {
        display: contents;
    }

    header .logoWrapper {
        order: 1;
    }

    /* The cart/profile/logout items stay on the logo's row, pinned right. */
    #topNavi .rightNavi {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* The links get a full row and wrap across as many lines as they need. */
    #topNavi .leftNavi {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Spacer divs from the legacy markup — meaningless once the box is `display: contents`, and as
       flex items they would each add a gap. */
    header .clearBoth {
        display: none;
    }

    /* Labels must not break mid-phrase: "SO History" on two lines reads as two separate links. */
    #topNavi li a {
        white-space: nowrap;
        padding: 6px 9px;
        font-size: 13px;
    }


    /* Wide data tables scroll inside their own card. Without this they push the entire page
       sideways, which breaks the fixed header and everything under it. */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* `overflow-x: auto` above makes this card a scroll container — which is exactly what made the
       sticky thead clip (see the comment on .table-wrap further up). On mobile the thead gives up
       its stickiness so the card can scroll horizontally without the header half-disappearing. */
    .table thead th,
    .table > thead > tr > th {
        position: static;
    }

    /* Columns stop being crushed to nothing; the card scrolls instead. */
    .table-wrap table {
        min-width: 560px;
    }

    /* Tighter gutters buy width back for the tables. */
    .widthWrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}