.merchant-portal {
    min-height: 100vh;
    background: #f7faf8;
    color: #17382c;
    font-family: var(--font-sans);
}

.merchant-topbar {
    background: #fff;
    border-bottom: 1px solid #e2ebe5;
}

.merchant-topbar__inner { padding-block: 0.75rem; }
.merchant-topbar__brand img { width: 2.75rem; height: 2.75rem; }
.merchant-topbar__brand strong { font-size: 0.95rem; }
.merchant-topbar__brand span { font-size: 0.78rem; }
.merchant-topbar__context small { color: #61776a; font-size: 0.78rem; }

.merchant-portal__shell { gap: 0; padding-block: 0 3rem; }
.merchant-nav {
    justify-content: flex-start;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid #e2ebe5;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.merchant-nav__links { gap: 0.45rem; }
.merchant-nav__links a {
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    color: #526c5d;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}
.merchant-nav__links a.active,
.merchant-nav__links a:hover { background: #176d4a; color: #fff; }

.merchant-ordering { display: grid; gap: 1.7rem; padding-top: 1.8rem; }
.merchant-ordering__back { display: inline-flex; align-items: center; gap: 0.3rem; width: fit-content; color: #176d4a; font-weight: 700; text-decoration: none; }
.merchant-ordering__heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid #dbe6de; }
.merchant-ordering__heading > div:first-child { min-width: 0; }
.merchant-ordering__eyebrow { color: #2b7958; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.merchant-ordering__heading h1 { margin: 0.35rem 0 0.35rem; color: #0e543c; font-family: var(--font-sans); font-size: clamp(1.9rem, 3vw, 2.45rem); font-weight: 800; line-height: 1.1; letter-spacing: 0; }
.merchant-ordering__heading p { margin: 0; color: #60776a; font-size: 0.92rem; }
.merchant-ordering__context { display: grid; gap: 0.12rem; min-width: 15rem; padding-left: 1.2rem; border-left: 1px solid #dbe6de; }
.merchant-ordering__context span { color: #64796e; font-size: 0.75rem; }
.merchant-ordering__context strong { color: #17382c; font-size: 0.94rem; }
.merchant-ordering__context small { color: #64796e; font-size: 0.75rem; }
.merchant-ordering__scope { display: flex; align-items: end; gap: 0.7rem; flex-wrap: wrap; }
.merchant-ordering__scope label { width: 100%; color: #294c3a; font-size: 0.8rem; font-weight: 700; }
.merchant-ordering__scope .text-input { width: min(22rem, 100%); }
.merchant-ordering__scope .button { min-height: 2.8rem; }

.merchant-ordering__section-heading { display: grid; gap: 0.2rem; margin-bottom: 0.9rem; }
.merchant-ordering__section-heading h2 { margin: 0; color: #17382c; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.merchant-ordering__section-heading p { margin: 0; color: #64796e; font-size: 0.82rem; }
.merchant-ordering__insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.merchant-ordering__insight { display: grid; align-content: start; gap: 0.65rem; min-width: 0; padding: 0.9rem; border: 1px solid #dce7df; border-radius: 8px; background: #fff; }
.merchant-ordering__insight-title { display: flex; align-items: start; justify-content: space-between; gap: 0.5rem; }
.merchant-ordering__insight-title strong { min-width: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.merchant-ordering__insight p { margin: 0; color: #61776a; font-size: 0.79rem; }
.merchant-ordering__insight-meta { display: flex; justify-content: space-between; gap: 0.6rem; color: #61776a; font-size: 0.76rem; }
.merchant-ordering__insight-meta strong { color: #17382c; }
.merchant-ordering__insight .button { justify-self: start; }

.merchant-ordering__columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); align-items: start; gap: 1.2rem; }
.merchant-ordering__catalog { min-width: 0; }
.merchant-ordering__catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.merchant-ordering__search { display: flex; align-items: center; gap: 0.5rem; width: min(18rem, 100%); min-height: 2.45rem; padding: 0 0.7rem; border: 1px solid #d9e5dd; border-radius: 6px; background: #fff; color: #637a6a; }
.merchant-ordering__search:focus-within { border-color: #176d4a; outline: 2px solid #a4cdb7; outline-offset: 1px; }
.merchant-ordering__search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #17382c; font: inherit; font-size: 0.82rem; }
.merchant-ordering__products { display: grid; gap: 0.65rem; }
.merchant-ordering__product { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; min-width: 0; padding: 0.7rem; border: 1px solid #dce7df; border-radius: 8px; background: #fff; }
.merchant-ordering__product-image { display: block; width: 5.4rem; height: 5.4rem; border-radius: 5px; object-fit: cover; background: #edf5ef; }
.merchant-ordering__product-image--empty { display: grid; place-items: center; color: #438064; }
.merchant-ordering__product-copy { min-width: 0; }
.merchant-ordering__product-copy span { display: block; color: #39765a; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.merchant-ordering__product-copy h3 { margin: 0.2rem 0; color: #17382c; font-family: var(--font-sans); font-size: 0.91rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.merchant-ordering__product-copy p { margin: 0.2rem 0; color: #64796e; font-size: 0.76rem; }
.merchant-ordering__product-copy small { color: #526c5d; font-size: 0.72rem; }
.merchant-ordering__product-action { display: grid; justify-items: end; gap: 0.6rem; white-space: nowrap; }
.merchant-ordering__product-action strong { font-size: 0.87rem; }
.merchant-ordering .button--primary { background: #176d4a; border-color: #176d4a; color: #fff; }
.merchant-ordering .button--primary:hover:not(:disabled) { background: #0e543c; border-color: #0e543c; }
.merchant-ordering .button:disabled { opacity: 0.55; cursor: not-allowed; }

.merchant-ordering__draft { position: sticky; top: 1rem; display: grid; gap: 0.9rem; min-width: 0; padding: 1rem; border: 1px solid #dce7df; border-radius: 8px; background: #fff; }
.merchant-ordering__draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.merchant-ordering__draft-heading h2 { margin: 0; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; }
.merchant-ordering__draft-heading span { color: #64796e; font-size: 0.76rem; white-space: nowrap; }
.merchant-ordering__draft-meta { display: flex; justify-content: space-between; gap: 0.4rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5ede7; color: #61776a; font-size: 0.74rem; }
.merchant-ordering__draft-meta span { overflow-wrap: anywhere; }
.merchant-ordering__draft-line { display: grid; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid #e5ede7; }
.merchant-ordering__draft-line h3 { margin: 0; font-family: var(--font-sans); font-size: 0.86rem; font-weight: 800; }
.merchant-ordering__draft-line p { margin: 0.15rem 0 0; color: #64796e; font-size: 0.72rem; }
.merchant-ordering__draft-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.merchant-ordering__draft-controls .quantity-button { width: 1.8rem; height: 1.8rem; min-height: 0; border-radius: 5px; }
.merchant-ordering__draft-controls strong { margin-left: auto; font-size: 0.78rem; white-space: nowrap; }
.merchant-ordering__remove { padding: 0; border: 0; background: transparent; color: #a0443c; font-size: 0.75rem; text-decoration: underline; }
.merchant-ordering__notes textarea { min-height: 4.5rem; }
.merchant-ordering__total { display: flex; justify-content: space-between; gap: 0.7rem; padding-top: 0.8rem; border-top: 1px solid #dce7df; font-size: 0.9rem; font-weight: 700; }
.merchant-ordering__submit { width: 100%; justify-content: center; }
.merchant-ordering__empty { display: grid; place-content: center; justify-items: center; gap: 0.25rem; min-height: 7rem; padding: 1.2rem; border: 1px dashed #cdded2; border-radius: 8px; color: #64796e; font-size: 0.82rem; text-align: center; }
.merchant-ordering__empty strong { color: #254b36; }
.merchant-ordering__empty--draft { min-height: 9rem; }

.merchant-ordering__history { min-width: 0; padding-top: 0.4rem; }
.merchant-ordering__history .date-range-slider { width: min(100%, 29rem); margin: 0 0 1rem auto; }
.merchant-ordering__error { color: #a0443c; font-size: 0.82rem; }
.merchant-ordering__table-wrap { overflow-x: auto; border: 1px solid #dce7df; border-radius: 8px; background: #fff; }
.merchant-ordering__table { width: 100%; border-collapse: collapse; text-align: left; }
.merchant-ordering__table th { padding: 0.75rem 0.9rem; background: #f1f6f2; color: #60776a; font-size: 0.71rem; text-transform: uppercase; }
.merchant-ordering__table td { padding: 0.8rem 0.9rem; border-top: 1px solid #e5ede7; color: #294939; font-size: 0.82rem; }
.merchant-ordering__table td:last-child { font-weight: 700; }

@media (max-width: 900px) {
    .merchant-ordering__insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .merchant-ordering__columns { grid-template-columns: minmax(0, 1fr); }
    .merchant-ordering__draft { position: static; }
}

@media (max-width: 760px) {
    .merchant-topbar__inner { flex-direction: row; align-items: center; }
    .merchant-topbar__brand span,
    .merchant-topbar__context small { display: none; }
    .merchant-topbar__context { margin-left: auto; }
    .merchant-topbar__context .portal-account-menu__toggle { max-width: 9rem; }
    .merchant-topbar__context .portal-account-menu__toggle > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .merchant-nav { flex-direction: row; align-items: center; }
    .merchant-ordering { gap: 1.4rem; padding-top: 1.2rem; }
    .merchant-ordering__heading { align-items: start; flex-direction: column; gap: 0.8rem; }
    .merchant-ordering__context { min-width: 0; padding-left: 0; border-left: 0; }
    .merchant-ordering__catalog-heading { align-items: stretch; flex-direction: column; }
    .merchant-ordering__search { width: 100%; }
    .merchant-ordering__insight-grid { grid-template-columns: minmax(0, 1fr); }
    .merchant-ordering__product { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.65rem; }
    .merchant-ordering__product-image { width: 4.5rem; height: 4.5rem; }
    .merchant-ordering__product-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 0.45rem; border-top: 1px solid #edf2ee; }
    .merchant-ordering__history .date-range-slider { margin-left: 0; }
    .merchant-ordering__table-wrap { border: 0; background: transparent; }
    .merchant-ordering__table thead { display: none; }
    .merchant-ordering__table,
    .merchant-ordering__table tbody,
    .merchant-ordering__table tr,
    .merchant-ordering__table td { display: block; width: 100%; }
    .merchant-ordering__table tr { margin-bottom: 0.65rem; padding: 0.4rem 0.7rem; border: 1px solid #dce7df; border-radius: 8px; background: #fff; }
    .merchant-ordering__table td { display: flex; justify-content: space-between; gap: 0.7rem; padding: 0.4rem 0; border: 0; }
    .merchant-ordering__table td::before { content: attr(data-label); color: #64796e; font-weight: 600; }
}