/* ------------------------------------------------------------------
   Components — nav, hamburger drawer, hero, product card, footer, forms
   Mobile-first; breakpoints layer on at 768px and 1024px.
   ------------------------------------------------------------------ */

/* ---- Sticky nav -------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.site-nav__inner {
    height: var(--nav-height-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .site-nav__inner { height: var(--nav-height); }
}

.site-nav__brand {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.1;
}
.site-nav__brand:hover { text-decoration: none; }
.site-nav__brand small {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media (max-width: 479px) {
    /* At the narrowest widths, drop the "PREORDER" subtitle so the brand
       sits comfortably alongside the action buttons without wrapping. */
    .site-nav__brand { font-size: var(--font-size-base); }
    .site-nav__brand small { display: none; }
}

.site-nav__links {
    display: none;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__links a {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    padding: var(--space-2) 0;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
}
@media (min-width: 1024px) {
    .site-nav__links { display: flex; }
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
@media (max-width: 767px) {
    /* Declutter the top bar on mobile — Sign in / Account live in the drawer. */
    .site-nav__actions [data-auth-signin],
    .site-nav__actions [data-auth-account] {
        display: none;
    }
    .site-nav__actions { gap: var(--space-2); }
}

.vat-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    user-select: none;
}
.vat-toggle__switch {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #ddd;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
}
.vat-toggle__switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: left 0.15s ease;
}
.vat-toggle[data-state="inc"] .vat-toggle__switch {
    background: var(--color-primary);
}
.vat-toggle[data-state="inc"] .vat-toggle__switch::after {
    left: 18px;
}

/* Hamburger */
.hamburger {
    width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.hamburger span {
    width: 20px; height: 2px; background: var(--color-text);
    position: relative;
}
.hamburger span::before, .hamburger span::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-text);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 80%; max-width: 360px;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 200;
    padding: var(--space-5);
    overflow-y: auto;
}
.nav-drawer[aria-hidden="false"] { transform: translateX(0); }
.nav-drawer__backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    z-index: 150;
}
.nav-drawer[aria-hidden="false"] + .nav-drawer__backdrop,
.nav-drawer__backdrop[data-open="true"] {
    opacity: 1; pointer-events: auto;
}
.nav-drawer ul { list-style: none; padding: 0; }
.nav-drawer li { margin: 0 0 var(--space-3); }
.nav-drawer a {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}
.nav-drawer__close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    background: transparent; border: none; font-size: 24px; cursor: pointer;
}

/* ---- Hero -------------------------------------------------------- */
.hero {
    padding: var(--space-6) 0 var(--space-7);
    text-align: center;
}
.hero__title {
    font-size: var(--font-size-h1);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
    .hero { padding: var(--space-8) 0; }
    .hero__title { font-size: var(--font-size-hero); }
}
.hero__subtitle { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.hero__preorder-band {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

/* ---- Product grid + card ---------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
}

.product-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex; flex-direction: column;
    position: relative;
}
.product-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.product-card__image {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    object-fit: contain;
    margin-bottom: var(--space-3);
}
.product-card__name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    line-height: 1.3;
    color: var(--color-text);
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__sku { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.product-card__pack { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.product-card__eta {
    font-size: var(--font-size-xs);
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    padding: 2px var(--space-2);
    border-radius: 10px;
    display: inline-block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
}
.product-card__price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: auto;
    margin-bottom: var(--space-2);
}
.product-card__price small { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-body); }
.product-card__add {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
}

/* ---- Product detail --------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}
@media (min-width: 768px) {
    .product-detail { grid-template-columns: 5fr 6fr; gap: var(--space-7); }
}
.product-detail__image {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    object-fit: contain;
    width: 100%;
}
.product-detail__price { font-size: 28px; font-weight: var(--font-weight-bold); margin: var(--space-3) 0; }
.qty-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 120px;
}
.qty-input button { background: #fff; border: none; width: 36px; height: 42px; cursor: pointer; font-size: 18px; }
.qty-input button:hover { background: var(--color-bg-alt); }
.qty-input input { border: none; text-align: center; flex: 1; height: 42px; padding: 0; }
.qty-input input:focus { outline: none; }

/* ---- Cart + checkout tables -------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.cart-table th { font-weight: var(--font-weight-medium); color: var(--color-text-muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.cart-totals { max-width: 360px; margin-left: auto; margin-top: var(--space-5); }
.cart-totals__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; }
.cart-totals__row--grand { border-top: 2px solid var(--color-text); padding-top: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); }

/* ---- Footer ------------------------------------------------------ */
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    background: var(--color-bg-dark);
    color: #c9c9c9;
    font-size: var(--font-size-sm);
}
.site-footer a { color: #fff; }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__col h4 { color: #fff; font-size: var(--font-size-base); margin-bottom: var(--space-3); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-2); }
.site-footer__legal { border-top: 1px solid #333; margin-top: var(--space-5); padding-top: var(--space-4); color: #999; }

/* ---- Incoming shipments panel (homepage) ------------------------- */
.incoming-countries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.country-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    border-radius: 14px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.country-chip__flag {
    font-size: var(--font-size-base);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.country-chip__flag .flag-img {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    object-fit: cover;
}

/* Generic flag image + placeholder (shared across homepage + PO page). */
.flag-img {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    object-fit: cover;
    vertical-align: middle;
}
.flag-placeholder {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
}

/* Month headers between shipment groups */
.shipments-group-heading {
    color: var(--color-primary);
    font-size: var(--font-size-h3);
    letter-spacing: 0.04em;
    margin: var(--space-5) 0 var(--space-3);
}
.shipments-group-heading:first-child { margin-top: 0; }

.shipments-card {
    padding: 0;
    overflow: hidden;
}
.shipments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.shipments-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}
.shipments-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.shipments-table tbody tr:last-child td { border-bottom: none; }
.shipments-table tbody tr:hover { background: var(--color-bg-alt); }

.shipments-table__flag { width: 64px; }
.shipments-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
}
.shipments-flag .flag-img {
    width: 40px;
    height: 30px;
}
.shipments-table__id { width: 120px; white-space: nowrap; }
.shipments-id-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    font-size: var(--font-size-base);
}
.shipments-id-link:hover { text-decoration: underline; }
.shipments-table__details { min-width: 280px; }
.shipments-table__action { width: 120px; text-align: right; }

.btn-order {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.btn-order:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }

@media (max-width: 767px) {
    /* Stack the shipment row on mobile */
    .shipments-table thead { display: none; }
    .shipments-table tbody tr { display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
    .shipments-table tbody td { padding: 0; border: none; }
    .shipments-table__flag { grid-row: 1 / span 2; }
    .shipments-table__id { grid-column: 2; grid-row: 1; }
    .shipments-table__details { grid-column: 2; grid-row: 2; min-width: 0; }
    .shipments-table__action { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

/* ---- Single-PO detail page (/po.html) ---------------------------- */
.po-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}
@media (min-width: 1024px) {
    .po-page-layout { grid-template-columns: 240px 1fr; gap: var(--space-6); }
}

/* Breadcrumbs (above PO hero) */
.po-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
}
.po-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.po-breadcrumbs a:hover { color: var(--color-primary); }
.po-breadcrumbs__arrow { color: var(--color-border-strong); }
.po-breadcrumbs__current { color: var(--color-primary); font-weight: var(--font-weight-bold); }

/* PO hero: big "SHIPMENT …" + status + due */
.po-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.po-hero__flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
}
.po-hero__flag .flag-img {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
}
.po-hero__body { flex: 1; min-width: 260px; }
.po-hero__title {
    color: var(--color-primary);
    font-size: 36px;
    letter-spacing: 0.03em;
    margin: 0 0 var(--space-2);
    line-height: 1.1;
    word-break: break-word;
}
@media (max-width: 640px) {
    .po-hero__title { font-size: 26px; }
}
.po-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-base);
}
.po-hero__meta strong { font-weight: var(--font-weight-bold); }
.po-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.po-intro { max-width: 760px; }
.po-intro p { margin: 0 0 var(--space-2); }

/* --- Legacy header card (kept for backwards-compat, not currently used) --- */
.po-header-card {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.po-header-card__flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 54px;
}
.po-header-card__flag .flag-img {
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
}
.po-header-card__flag .flag-placeholder {
    font-size: 48px;
}
.po-header-card__body h1 { font-size: var(--font-size-h2); margin: 0; }

.po-sidebar {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    align-self: start;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-3));
}
.po-filter-group { margin-bottom: var(--space-5); }
.po-filter-group:last-child { margin-bottom: 0; }
.po-filter-heading {
    font-size: var(--font-size-base);
    margin: 0;
    display: inline-block;
}
.po-filter-subheading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}
.po-filter-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: var(--space-2);
}
.po-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
}
.po-filter-item input { width: auto; margin: 0; }
.po-filter-item:hover { color: var(--color-primary); }

.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ---- PO quick-order table (/po.html) ---------------------------- */
.po-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.po-products-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-3);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
}
.po-products-table tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.po-products-table tbody tr:last-child td { border-bottom: none; }
.po-products-table tbody tr:hover { background: var(--color-bg-alt); }

.po-products-table__img { width: 56px; }
.po-products-table__img img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
}
.po-products-table__sku {
    width: 90px;
    white-space: nowrap;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}
.po-products-table__name { min-width: 240px; }
.po-products-table__name a { color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; }
.po-products-table__name a:hover { text-decoration: underline; }
.po-products-table__price { text-align: right; white-space: nowrap; }
.po-products-table__qty { text-align: right; white-space: nowrap; width: 90px; }
.po-products-table__order { width: 110px; }
.po-products-table__order .order-input {
    width: 80px;
    padding: 6px 8px;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}
.po-products-table__order .order-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-color: var(--color-primary);
}
.po-products-table__action { width: 110px; text-align: right; }

.btn-update {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
}
.btn-update:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-update:disabled { background: #ccc; cursor: not-allowed; }

/* ---- My account page --------------------------------------------- */
.account-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}
.account-tab {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.account-tab:hover { color: var(--color-primary); }
.account-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.account-filter-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-alt);
    padding: 4px;
    border-radius: var(--radius-md);
}
.account-filter {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}
.account-filter[aria-selected="true"] {
    background: #fff;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm);
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}
.address-card {
    position: relative;
    padding: var(--space-4);
}
.address-card--default {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.address-card__lines { color: var(--color-text); line-height: 1.6; }
.address-default-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    vertical-align: middle;
    margin-left: 4px;
}

/* Checkout address picker (radio cards) */
.address-pick {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    cursor: pointer;
    background: #fff;
}
.address-pick:hover { border-color: var(--color-primary); }
.address-pick input[type=radio] { margin-top: 4px; width: auto; }
.address-pick--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
    background: var(--color-primary-tint);
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.orders-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}
.orders-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.orders-table tbody tr:last-child td { border-bottom: none; }
.orders-table tbody tr:hover { background: var(--color-bg-alt); }

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: #e2e3e5;
    color: #383d41;
}
.status-pill--pending_payment { background: #fff3cd; color: #856404; }
.status-pill--paid            { background: #fde5ee; color: var(--color-primary-dark); }
.status-pill--ow_so_created   { background: #d4edda; color: #155724; }
.status-pill--ow_so_failed    { background: #f8d7da; color: #721c24; }
.status-pill--fulfilled       { background: #d4edda; color: #155724; }
.status-pill--cancelled       { background: #e2e3e5; color: #383d41; }
.status-pill--refunded        { background: #f8d7da; color: #721c24; }

/* ---- Form layouts ------------------------------------------------ */
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}