/* Customer portal — shares the public website's palette and typography. */
.account-page { background: var(--color-bg-light); }
.account-main { padding-block: 126px 32px; }
.account-auth-layout { display: grid; grid-template-columns: 1.03fr 1fr; min-height: 680px; background: white; border: 1px solid rgba(44,48,122,.09); box-shadow: 0 18px 70px rgba(20,22,61,.05); }
.account-story { position: relative; min-height: 680px; overflow: hidden; color: white; background: var(--color-midnight); display: flex; flex-direction: column; justify-content: space-between; padding: 42px; isolation: isolate; }
.account-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.account-story::after, .account-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,22,61,.18) 15%, rgba(20,22,61,.48) 48%, rgba(20,22,61,.97) 100%); }
.account-story-top { display: flex; align-items: center; gap: 12px; font-size: .68rem; letter-spacing: .16em; font-weight: 600; }
.account-story-line { width: 24px; height: 1px; background: var(--color-mint); }
.account-story-copy { padding-block-start: 150px; }
.account-story .eyebrow { margin-block-end: 20px; }
.account-story h2 { color: white; font-size: clamp(3.3rem, 4.8vw, 5.7rem); letter-spacing: -.025em; line-height: 1.03; max-width: 570px; }
.account-story h2 em { display: block; }
.account-story-copy > p:not(.eyebrow) { max-width: 360px; margin-block: 24px 32px; color: #d8daea; font-size: 1rem; line-height: 1.8; }
.account-story-foot { border-block-start: 1px solid rgba(255,255,255,.2); padding-block-start: 20px; display: flex; justify-content: space-between; align-items: center; color: #d8daea; font-size: .76rem; }
.account-story-foot > span:last-child { font-size: 1.7rem; color: var(--color-mint); }
.account-auth-panel { padding: 48px clamp(24px, 4.2vw, 76px); align-self: center; min-width: 0; }
.account-form-heading { margin-block-end: 30px; }
.account-heading-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(95,187,148,.35); background: #f0f8f4; color: var(--color-deep-blue); margin-block-end: 26px; }
.account-form-heading .eyebrow { margin-block-end: 14px; font-size: .65rem; }
.account-form-heading h1 { font-size: clamp(2.5rem, 3.3vw, 3.6rem); font-weight: 600; color: var(--color-midnight); text-transform: uppercase; }
.account-form-heading > p:last-child { color: #696e87; margin-block: 15px 0; line-height: 1.8; font-size: .94rem; }
.account-card { display: grid; gap: 22px; background: white; border: 1px solid #e5e7ee; padding: 32px; }
.account-auth-panel > .account-card { padding: 0; border: 0; }
.account-field label { color: var(--color-midnight); font-size: .82rem; font-weight: 600; margin-block-end: 9px; }
.account-input { display: block; width: 100%; min-height: 52px; border: 1px solid #dcdfea; border-radius: 3px; padding: 12px 15px; color: var(--color-midnight); background: #fbfcfe; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.account-input:hover { border-color: #a8aece; }
.account-input:focus { outline: none; border-color: var(--color-mint); box-shadow: 0 0 0 3px rgba(95,187,148,.15); background: white; }
.account-input[aria-invalid="true"] { border-color: #b64141; }
.account-input[type="email"], .account-input[type="tel"] { direction: ltr; text-align: start; }
.account-page input[type="checkbox"] { accent-color: var(--color-deep-blue); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.account-card label:has(input[type="checkbox"]) { font-size: .85rem; color: #5b607f; }
.account-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 25px; border: 1px solid transparent; border-radius: 3px; color: var(--color-midnight); background: var(--color-mint); font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.account-submit:hover { background: var(--color-deep-blue); color: white; }
.account-submit:focus-visible { outline-color: var(--color-brass); }
.account-link { color: var(--color-deep-blue); font-weight: 600; }
.account-link a:hover, a.account-link:hover, button.account-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.account-form-note { display: flex; justify-content: center; align-items: center; gap: 9px; margin-block: 28px 0; border-block-start: 1px solid #eef0f5; padding-block-start: 22px; color: #757b91; font-size: .72rem; line-height: 1.7; }
.account-form-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.account-feedback { padding: 15px 18px; border-inline-start: 3px solid; margin-block-end: 24px; font-size: .88rem; line-height: 1.8; }
.account-feedback-success { background: #eef8f2; color: #236345; border-color: var(--color-mint); }
.account-feedback-error { background: #fff1f1; color: #982e2e; border-color: #c15b5b; }
.account-banner { position: relative; isolation: isolate; overflow: hidden; min-height: 265px; padding: 44px; display: flex; align-items: end; color: white; background: var(--color-midnight); }
.account-banner .account-cover { object-position: 50% 46%; }
.account-banner::after { background: linear-gradient(90deg, rgba(20,22,61,.9), rgba(20,22,61,.45)); }
.account-banner h1 { font-size: clamp(2.5rem, 4vw, 4.3rem); font-weight: 600; }
.account-banner .eyebrow { margin-block-end: 15px; }
.account-banner-content > p:last-child { color: #d9ddeb; margin-block-start: 16px; }
.account-banner-signature { margin-inline-start: auto; align-self: start; font-size: .65rem; letter-spacing: .14em; opacity: .7; }
.account-dashboard { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; padding-block-start: 30px; align-items: start; }
.account-sidebar { background: white; border: 1px solid #e5e7ee; position: sticky; top: 100px; }
.account-identity { padding: 28px 22px; display: flex; align-items: center; flex-direction: column; gap: 9px; text-align: center; border-block-end: 1px solid #eef0f5; }
.account-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-midnight); color: var(--color-mint); font-size: 1.7rem; font-weight: 600; margin-block-end: 5px; }
.account-identity strong { font-size: 1rem; overflow-wrap: anywhere; }
.account-identity > span:last-child { color: #7a8095; font-size: .78rem; overflow-wrap: anywhere; max-width: 100%; }
.account-menu { padding: 16px 12px; display: grid; gap: 5px; }
.account-menu a, .account-menu button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: start; padding: 14px 12px; font-size: .86rem; color: #616781; border-inline-start: 3px solid transparent; }
.account-menu a[aria-current="page"] { background: #edf6f1; border-color: var(--color-mint); color: var(--color-deep-blue); font-weight: 700; }
.account-menu a:hover { background: #f6f7fa; color: var(--color-deep-blue); }
.account-menu button { color: #a95151; cursor: pointer; }
.account-menu button:hover { background: #fff5f5; }
.account-back { display: flex; justify-content: space-between; margin: 0 24px; padding-block: 20px; border-block-start: 1px solid #eef0f5; color: #757b91; font-size: .76rem; }
.account-workspace { min-width: 0; }
.account-card h2 { font-size: 1.65rem; line-height: 1.3; letter-spacing: 0; text-transform: none; font-weight: 600; }
.account-card-heading { display: flex; align-items: center; gap: 15px; padding-block-end: 22px; border-block-end: 1px solid #edf0f5; }
.account-card-heading p { margin-block-start: 7px; color: #787e93; font-size: .82rem; }
.account-section-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--color-deep-blue); background: #f0f6f4; }
.account-workspace .account-submit { justify-self: start; min-width: 170px; }
.account-notification { padding: 20px; border: 1px solid #e5e7ee; border-inline-start: 3px solid #dce0e8; }
.account-notification-unread { background: #f1f8f4; border-inline-start-color: var(--color-mint); }
.account-empty { display: flex; align-items: center; flex-direction: column; gap: 18px; padding: 48px 16px; color: #838aa1; text-align: center; }
.account-empty svg { width: 38px; height: 38px; color: var(--color-mint); }
.account-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-block-start: 1px solid #e0e3ec; padding-block: 24px 30px; color: #7c8299; font-size: .72rem; }
.account-footer > span:first-child { letter-spacing: .09em; }
.account-footer a { color: var(--color-deep-blue); }
html[dir="rtl"] .account-story h2 { font-size: clamp(2.6rem, 3.8vw, 4.7rem); line-height: 1.5; }
html[dir="rtl"] .account-form-heading h1 { font-size: clamp(2rem, 2.6vw, 3rem); line-height: 1.5; }
html[dir="rtl"] .account-card h2 { font-size: 1.25rem; line-height: 1.6; }
html[dir="rtl"] .account-story-top, html[dir="rtl"] .account-banner-signature { letter-spacing: 0; }
html[dir="rtl"] .account-banner::after { background: linear-gradient(270deg, rgba(20,22,61,.9), rgba(20,22,61,.45)); }
@media (min-width: 1500px) { .account-main { max-width: 1320px; } }
@media (max-width: 1050px) {
    .account-story { padding: 30px; }
    .account-auth-panel { padding: 35px 28px; }
    .account-dashboard { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    .account-main { padding-block-start: 106px; }
    .account-auth-layout { grid-template-columns: 1fr; }
    .account-story { min-height: 245px; padding: 25px; }
    .account-story-copy { padding-block-start: 30px; }
    .account-story h2, html[dir="rtl"] .account-story h2 { font-size: 2.4rem; line-height: 1.25; }
    .account-story h2 em { display: inline; }
    .account-story-copy > p:not(.eyebrow), .account-story-foot, .account-story-copy .eyebrow { display: none; }
    .account-story .account-cover { object-position: 50% 40%; }
    .account-story::after { background: linear-gradient(180deg, rgba(20,22,61,.2), rgba(20,22,61,.85)); }
    .account-auth-panel { padding: 30px 24px; }
    .account-heading-icon { display: none; }
    .account-dashboard { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-identity { flex-direction: row; flex-wrap: wrap; padding: 18px; justify-content: start; text-align: start; gap: 12px; }
    .account-avatar { width: 40px; height: 40px; font-size: 1.2rem; margin: 0; }
    .account-identity > span:last-child { width: 100%; }
    .account-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; }
    .account-menu a, .account-menu button { justify-content: center; flex-direction: column; gap: 7px; padding: 10px 3px; font-size: .72rem; border-inline-start: 0; border-block-end: 2px solid transparent; }
    .account-back { display: none; }
    .account-banner { min-height: 215px; padding: 28px; }
    .account-banner-signature { display: none; }
    .account-card { padding: 24px; }
    .account-footer { flex-wrap: wrap; }
    .account-footer > span:nth-child(2) { display: none; }
}
/* Orders and shipment tracking */
.order-back { justify-self: start; display: inline-flex; gap: 8px; font-size: .82rem; }
.order-table-wrap { overflow-x: auto; }
.order-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.order-table th { text-align: start; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #7a8095; font-weight: 600; padding: 10px 12px; border-block-end: 1px solid #e5e7ee; white-space: nowrap; }
.order-table td { padding: 14px 12px; border-block-end: 1px solid #eef0f5; vertical-align: top; color: var(--color-midnight); }
.order-table tfoot th { text-align: end; text-transform: none; letter-spacing: 0; font-size: .85rem; border-block-end: 0; padding-block: 8px; }
.order-table tfoot td { border-block-end: 0; padding-block: 8px; }
.order-table .is-numeric { text-align: end; white-space: nowrap; }
.order-table .order-grand-total th, .order-table .order-grand-total td { font-weight: 700; color: var(--color-midnight); border-block-start: 1px solid #e5e7ee; }
.order-muted { color: #7a8095; font-size: .78rem; }
.order-status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: #eef0f5; color: #4d536d; }
.order-status-info { background: #eaf0fb; color: #2a4d8f; }
.order-status-warning { background: #fdf3e2; color: #8a5a12; }
.order-status-success { background: #eef8f2; color: #236345; }
.order-status-danger { background: #fff1f1; color: #982e2e; }
.order-summary, .order-details { display: grid; gap: 16px 22px; margin: 0; }
.order-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.order-details { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.order-summary div, .order-details div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.order-summary dt, .order-details dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #7a8095; }
.order-summary dd, .order-details dd { margin: 0; color: var(--color-midnight); font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.shipment-card { display: grid; gap: 20px; border: 1px solid #e5e7ee; padding: 24px; }
.shipment-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.shipment-card-header h3 { font-size: 1.15rem; font-weight: 600; color: var(--color-midnight); }
.shipment-eyebrow, .shipment-section-title { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7a8095; font-weight: 600; }
.shipment-section-title { margin-block-end: 12px; }
.shipment-contents { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: #4d536d; }
.shipment-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.shipment-timeline li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding-block-end: 22px; }
.shipment-timeline li::before { content: ""; position: absolute; inset-block: 20px 0; inset-inline-start: 8px; width: 2px; background: #e5e7ee; }
.shipment-timeline li:last-child { padding-block-end: 0; }
.shipment-timeline li:last-child::before { display: none; }
.shipment-timeline-dot { width: 18px; height: 18px; margin-block-start: 2px; border-radius: 50%; border: 2px solid #cfd4e2; background: white; }
.shipment-timeline li.is-current .shipment-timeline-dot { border-color: var(--color-mint); background: var(--color-mint); box-shadow: 0 0 0 4px rgba(95,187,148,.18); }
.shipment-timeline strong { color: var(--color-midnight); font-size: .92rem; }
.shipment-timeline p { margin-block-start: 4px; color: #5b607f; font-size: .85rem; line-height: 1.7; }
.shipment-timeline time, .shipment-location { display: block; margin-block-start: 4px; color: #7a8095; font-size: .76rem; }
html[dir="rtl"] .order-summary dt, html[dir="rtl"] .order-details dt, html[dir="rtl"] .order-table th, html[dir="rtl"] .shipment-eyebrow, html[dir="rtl"] .shipment-section-title { letter-spacing: 0; }
@media (max-width: 760px) {
    .shipment-card { padding: 18px; }
    .order-table th, .order-table td { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .account-page *, .account-page *::before, .account-page *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Utility classes used by the customer views. Previously supplied by Tailwind via
   @vite; inlined here so account pages need no build step to render. */
.account-page .block { display: block; }
.account-page .grid { display: grid; }
.account-page .flex { display: flex; }
.account-page .flex-wrap { flex-wrap: wrap; }
.account-page .items-center { align-items: center; }
.account-page .justify-between { justify-content: space-between; }
.account-page .gap-2 { gap: .5rem; }
.account-page .gap-3 { gap: .75rem; }
.account-page .gap-4 { gap: 1rem; }
.account-page .gap-8 { gap: 2rem; }
.account-page .mb-2 { margin-bottom: .5rem; }
.account-page .mt-2 { margin-top: .5rem; }
.account-page .mt-3 { margin-top: .75rem; }
.account-page .font-semibold { font-weight: 600; }
.account-page .font-bold { font-weight: 700; }
.account-page .text-sm { font-size: .875rem; line-height: calc(1.25 / .875); }
.account-page .text-xl { font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
.account-page .text-red-700 { color: #c10007; color: oklch(50.5% .213 27.518); }
.account-page .text-slate-500 { color: #62748e; color: oklch(55.4% .046 257.417); }
.account-page .text-slate-600 { color: #45556c; color: oklch(44.6% .043 257.281); }
.account-page .break-words { overflow-wrap: break-word; }
.account-page .list-disc { list-style-type: disc; }
.account-page .list-inside { list-style-position: inside; }
.account-page .hover\:underline:hover { text-decoration-line: underline; }