/* order-list.css (2026-10-19) - the Order List, the part page's buying block and the "Order request submitted" page.
   The site's own colours and fonts: yellow #ffd000 for the main action, the dark #050B20 text, the #E1E1E1 border. Touch
   targets >= 44px, visible labels, focus rings, reduced motion respected (ui-ux-pro-max). Loaded after anthe-fit.css. */
:root {
    --ol-yellow: #ffd000;
    --ol-dark: #050B20;
    --ol-border: #E1E1E1;
    --ol-muted: rgba(5, 11, 32, .64);
    --ol-soft: #f4f5f8;
    --ol-ok: #1f7a3a;
    --ol-err: #b42318;
}

/* ---- the header button ---- */
.ol-open { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-right: 6px; background: none; border: 0; border-radius: 12px; color: var(--ol-dark); cursor: pointer; }
.ol-open:hover { background: var(--ol-soft); }
.ol-open:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--ol-yellow); color: #000; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ol-badge[hidden] { display: none; }
.ol-badge.is-bump { animation: ol-bump .35s ease; }
@keyframes ol-bump { 50% { transform: scale(1.35); } }
.boxcar-header .right-box { display: flex; align-items: center; }
.ol-open { flex-shrink: 0; }   /* the header's flex row never squeezes the cart (10-19) */
.ol-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the drawer ---- */
.ol-backdrop { position: fixed; inset: 0; z-index: 100029; background: rgba(5, 11, 32, .5); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s; }
.ol-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100030; width: min(92vw, 440px); display: flex; flex-direction: column;
    background: #fff; color: var(--ol-dark); box-shadow: 0 0 32px rgba(5, 11, 32, .25); transform: translateX(105%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s; }
.ol-on .ol-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.ol-on .ol-drawer { transform: none; visibility: visible; transition: transform .25s ease; }
body.ol-on { overflow: hidden; }
.ol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--ol-border); }
.ol-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.ol-title__n { color: var(--ol-muted); font-weight: 500; }
.ol-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0;
    border-radius: 12px; font-size: 30px; line-height: 1; color: inherit; cursor: pointer; }
.ol-close:focus-visible, .ol-remove:focus-visible, .ol-back:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ol-step[hidden] { display: none; }
.ol-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 20px 16px; }
.ol-foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ol-border); background: #fff; }
.ol-summary { margin-bottom: 10px; color: var(--ol-muted); font-size: 15px; }
.ol-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 20px; border: 1px solid var(--ol-yellow);
    border-radius: 12px; background: var(--ol-yellow); color: #000; font: inherit; font-weight: 600; font-size: 17px; cursor: pointer; transition: filter .15s ease; }
.ol-primary:hover { filter: brightness(.96); }
.ol-primary:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.ol-primary.is-busy { cursor: progress; }

/* the lines */
.ol-lines { list-style: none; margin: 0; padding: 0; }
.ol-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ol-border); }
.ol-line:last-child { border-bottom: 0; }
.ol-line__img { flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid var(--ol-border); border-radius: 10px; overflow: hidden; background: #fff; }
.ol-line__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ol-line__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ol-line__name { color: var(--ol-dark); font-weight: 600; font-size: 15px; line-height: 1.35; text-transform: uppercase; }
.ol-line__oem { color: var(--ol-muted); font-size: 14px; overflow-wrap: anywhere; }
.ol-line__status { color: var(--ol-muted); font-size: 13px; }
.ol-line__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ol-line__type { display: block; margin: 6px 0 0; }
.ol-type { max-width: 100%; min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--ol-border); border-radius: 12px; background-color: #fff;
    color: var(--ol-dark); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ol-type:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 1px; }
.ol-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0;
    border-radius: 12px; color: var(--ol-muted); cursor: pointer; }
.ol-remove:hover { background: var(--ol-soft); color: var(--ol-err); }
.ol-empty { padding: 32px 0; text-align: center; color: var(--ol-muted); }
.ol-empty[hidden] { display: none; }
.ol-empty p { margin-bottom: 8px; }
.ol-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ol-dark); text-decoration: underline; }
.ol-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 6px 6px 6px 14px;
    border-radius: 12px; background: var(--ol-dark); color: #fff; font-size: 14px; }
.ol-undo[hidden] { display: none; }
.ol-undo__btn { min-height: 40px; padding: 0 14px; background: none; border: 0; color: var(--ol-yellow); font-weight: 700; cursor: pointer; }

/* the quantity stepper - the part page's and the list's */
.ol-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ol-border); border-radius: 12px; overflow: hidden; background: #fff; }
.ol-qty__btn { width: 48px; min-height: 48px; background: var(--ol-soft); border: 0; color: var(--ol-dark); font-size: 22px; line-height: 1; cursor: pointer; }
.ol-qty__btn:hover { background: #e9eaef; }
.ol-qty__btn:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: -2px; }
.ol-qty__input { width: 72px; min-height: 48px; border: 0; border-left: 1px solid var(--ol-border); border-right: 1px solid var(--ol-border);
    text-align: center; font: inherit; font-size: 17px; font-weight: 600; color: var(--ol-dark); -moz-appearance: textfield; appearance: textfield; }
.ol-qty__input::-webkit-outer-spin-button, .ol-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ol-qty__input:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: -2px; }
.ol-qty--sm .ol-qty__btn { width: 44px; min-height: 44px; font-size: 20px; }
.ol-qty--sm .ol-qty__input { width: 64px; min-height: 44px; font-size: 16px; }

/* the contact form */
.ol-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 2px -4px; padding: 0 4px; background: none; border: 0;
    color: var(--ol-dark); font: inherit; font-weight: 600; cursor: pointer; }
.ol-lead { margin: 4px 0 14px; color: var(--ol-muted); font-size: 15px; line-height: 1.5; }
.ol-field { margin-bottom: 14px; }
.ol-field[hidden] { display: none; }
.ol-field label, .ol-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; color: var(--ol-dark); }
.ol-phone { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.ol-field .ol-phone__code { text-align: center; padding-left: 8px; padding-right: 8px; }
.ol-req { color: var(--ol-err); }
.ol-opt { color: var(--ol-muted); font-weight: 400; }
.ol-field input, .ol-field select, .ol-field textarea { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ol-border);
    border-radius: 12px; background: #fff; color: var(--ol-dark); font: inherit; font-size: 16px; }
.ol-field textarea { min-height: 88px; resize: vertical; }
.ol-field input:focus, .ol-field select:focus, .ol-field textarea:focus { outline: 2px solid var(--ol-dark); outline-offset: 1px; border-color: var(--ol-dark); }
.ol-field [aria-invalid="true"] { border-color: var(--ol-err); }
.ol-err { margin: 6px 0 0; color: var(--ol-err); font-size: 14px; line-height: 1.45; }
.ol-err:empty { display: none; }
.ol-hint { margin: 6px 0 0; color: var(--ol-muted); font-size: 13px; line-height: 1.45; }
.ol-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ol-form-err { margin: 0 0 10px; color: var(--ol-err); font-size: 14px; }
.ol-form-err:empty { display: none; }
.ol-fine { margin: 8px 0 0; text-align: center; color: var(--ol-muted); font-size: 13px; line-height: 1.45; }

/* ---- the part page ---- */
.pd-stock { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 6px 12px; border-radius: 999px; background: var(--ol-soft);
    color: var(--ol-dark); font-size: 15px; }
.pd-stock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ol-yellow); box-shadow: 0 0 0 2px rgba(5, 11, 32, .12); }
.pd-stock.is-in .pd-stock__dot { background: var(--ol-ok); }
.pd-buy { margin-top: 18px; }
.pd-buy__label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.pd-buy__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pd-buy__row .ol-add { flex: 1 1 200px; }
.ol-add { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1px solid var(--ol-yellow);
    border-radius: 12px; background: var(--ol-yellow); color: #000; font: inherit; font-weight: 600; font-size: 17px; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.ol-add:hover { filter: brightness(.96); }
.ol-add:active { transform: scale(.98); }
.ol-add:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-add.is-done { filter: brightness(.92); }
.pd-buy__hint { min-height: 24px; margin: 10px 0 0; font-size: 15px; color: var(--ol-dark); }
/* the part type - two choices side by side, Aftermarket (ANTHE) chosen at the start */
.pd-type { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.pd-type legend { float: none; width: auto; padding: 0; }
.pd-type__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-type__opt { position: relative; margin: 0; cursor: pointer; }
.pd-type__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pd-type__opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--ol-border);
    border-radius: 12px; background: #fff; color: var(--ol-dark); font-size: 15px; font-weight: 600; transition: border-color .15s ease, background .15s ease; }
.pd-type__opt span::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid var(--ol-border); border-radius: 50%; background: #fff; }
.pd-type__opt input:checked + span { border-color: var(--ol-dark); background: #fffdf0; }
.pd-type__opt input:checked + span::before { border-color: var(--ol-dark); background: radial-gradient(circle, var(--ol-dark) 0 4px, #fff 5px); }
.pd-type__opt input:focus-visible + span { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
/* the catalogue card's quick add (10-19) */
.cc-add-wrap { container-type: inline-size; margin-top: 10px; }
.cc-add { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-add .ol-qty { flex: 0 0 auto; }
.cc-add .ol-qty__input { width: 56px; }
.cc-add__btn { flex: 1 1 140px; min-height: 44px; padding: 0 12px; font-size: 16px; white-space: nowrap; }
/* a narrow card (4 to a row, or the phone's photo-beside-text card): the stepper on one row, the button under it, both full width */
@container (max-width: 299px) {
    .cc-add .ol-qty { flex: 1 1 100%; }
    .cc-add .ol-qty__input { flex: 1 1 auto; width: auto; min-width: 0; }
    .cc-add__btn { flex: 1 1 100%; }
}
.pd-buy__view { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; background: none; border: 0; color: var(--ol-dark);
    font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pd-contact__lead { margin: 22px 0 8px; color: var(--ol-dark); font-size: 15px; font-weight: 600; line-height: 1.4; }   /* owner 10-19: say what the two buttons are for */
.pd-contact { display: flex; gap: 10px; margin: 0 0 36px; }
.pd-contact__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px;
    border: 1px solid var(--ol-border); border-radius: 12px; background: #fff; color: var(--ol-dark); font-weight: 600; font-size: 15px; }
.pd-contact__btn:hover { background: var(--ol-soft); color: var(--ol-dark); }
.pd-contact__btn:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.pd-contact__btn img { width: 20px; height: 20px; }

/* ---- the "Order request submitted" page ---- */
.os-wrap { max-width: 680px; margin: 0 auto; padding: 36px 0 80px; }
.os-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
    background: var(--ol-yellow); color: #000; }
.os-title { margin: 0 0 10px; text-align: center; font-size: 32px; line-height: 1.2; text-wrap: balance; }
.os-sub { margin: 0 auto 26px; max-width: 520px; text-align: center; color: var(--ol-muted); font-size: 17px; line-height: 1.55; }
.os-ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border: 2px dashed var(--ol-yellow);
    border-radius: 16px; background: #fffdf0; }
.os-ref__k { display: block; color: var(--ol-muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.os-ref__v { display: block; font-size: 26px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.os-copy { min-height: 44px; padding: 0 18px; border: 1px solid var(--ol-dark); border-radius: 12px; background: #fff; color: var(--ol-dark); font: inherit; font-weight: 600; cursor: pointer; }
.os-copy:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.os-card { margin-top: 18px; padding: 20px; border: 1px solid var(--ol-border); border-radius: 16px; background: #fff; }
.os-card h2 { margin: 0 0 12px; font-size: 20px; }
.os-steps { margin: 0; padding: 0; list-style: none; counter-reset: os; }
.os-steps li { position: relative; padding: 0 0 14px 44px; line-height: 1.5; counter-increment: os; }
.os-steps li:last-child { padding-bottom: 0; }
.os-steps li::before { content: counter(os); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--ol-soft);
    color: var(--ol-dark); font-weight: 700; text-align: center; line-height: 30px; }
.os-parts { margin: 0; padding: 0; list-style: none; }
.os-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ol-border); font-size: 15px; }
.os-parts li:last-child { border-bottom: 0; }
.os-parts__q { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.os-parts__type { color: var(--ol-muted); }
.os-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.os-contact a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px; border: 1px solid var(--ol-border);
    border-radius: 14px; color: var(--ol-dark); font-weight: 600; text-align: center; }
.os-contact a:hover { background: var(--ol-soft); }
.os-contact a.is-main { border-color: var(--ol-yellow); background: var(--ol-yellow); color: #000; }
.os-contact a:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.os-contact img, .os-contact svg { width: 24px; height: 24px; }
.os-more { display: flex; justify-content: center; margin-top: 22px; }
@media (max-width: 575.98px) {
    .os-wrap { padding: 20px 0 56px; }
    .os-title { font-size: 26px; }
    .os-ref__v { font-size: 22px; }
    .os-contact { grid-template-columns: 1fr; }
    .os-contact a { flex-direction: row; min-height: 52px; }
}

/* ---- Finalise (owner, 2026-10-20): signed in = a summary of who sends + how we reach them, then the note; not signed in =
   Sign in at the top and "Create my account" with the password ---- */
.ol-contact[hidden], .ol-newacct [hidden] { display: none; }
.ol-drawer strong, .ol-in strong, .os-wrap strong { font-weight: 700; }   /* the template sets <strong> to its normal weight */
.ol-me { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--ol-border); border-radius: 12px; background: var(--ol-soft); }
.ol-me__who { margin: 0 0 4px; font-size: 16px; color: var(--ol-dark); }
.ol-me__line { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ol-dark); overflow-wrap: anywhere; }
.ol-me__line a { color: var(--ol-dark); font-weight: 700; text-decoration: underline; }
.ol-me__edit { display: inline-flex; align-items: center; min-height: 40px; margin: 4px 0 -6px; padding: 0; background: none; border: 0;
    color: var(--ol-dark); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ol-me__edit[hidden] { display: none; }
.ol-me__edit:focus-visible, .ol-signin:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-signin { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin: 6px 0 12px; padding: 0 14px;
    border: 1.5px solid var(--ol-dark); border-radius: 12px; background: #fff; color: var(--ol-dark); font-size: 15px; text-decoration: none; }
.ol-signin:hover { background: var(--ol-soft); color: var(--ol-dark); }
.ol-newacct { margin: 0 0 14px; padding: 12px 14px 2px; border: 1px solid #b7dcc2; border-radius: 12px; background: #f3faf5; }
.ol-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ol-dark); cursor: pointer; }
.ol-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ol-dark); }
.ol-newacct .ol-field label { font-size: 14px; }

/* ---- "4 in your Order List" under every Add button (owner, 2026-10-20) - green tick, the count, tap = open the list ---- */
.ol-in { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; margin: 10px 0 0; padding: 6px 8px 6px 10px; border: 0;
    border-radius: 10px; background: #e9f5ec; color: #14532d; font: inherit; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; }
.ol-in[hidden] { display: none; }
.ol-in svg { flex: none; }
.ol-in__txt { flex: 1 1 auto; min-width: 0; }
.ol-in__det { color: #3f6b4e; }
.ol-in__chev { opacity: .7; }
.ol-in:hover { background: #dcefe1; }
.ol-in:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ol-in.is-new { animation: ol-in-pop .35s ease; }
@keyframes ol-in-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.cc-add .ol-in { flex: 1 1 100%; margin-top: 0; font-size: 13px; }
.pd-buy__hint:empty { display: none; }

/* ---- Phase B (10-19): the buyer's account ---- */
.ac-open { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px;
    margin-right: 2px; border-radius: 12px; color: var(--ol-dark); }
.ac-open:hover { background: var(--ol-soft); color: var(--ol-dark); }
.ac-open:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ac-open__initial { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--ol-dark); color: var(--ol-yellow); font-weight: 700; font-size: 15px; line-height: 1; }
.ol-acct { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--ol-soft); font-size: 14px; line-height: 1.45; }
.ol-acct a, .ol-err a, .ol-form-err a, .os-acct a { color: var(--ol-dark); font-weight: 700; text-decoration: underline; }
.ac-pw { position: relative; }
.ol-field .ac-pw input { padding-right: 52px; }
.ac-pw__eye { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: none; border: 0; border-radius: 10px; color: var(--ol-muted); cursor: pointer; }
.ac-pw__eye[aria-pressed="true"] { color: var(--ol-dark); }
.ac-pw__eye:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: -2px; }
.os-acct { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--ol-soft); font-size: 15px; }
.os-acct[hidden] { display: none; }

.ac-section { padding: 28px 0 72px; color: var(--ol-dark); }
.ac-auth { max-width: 460px; margin: 0 auto; padding: 28px 24px; border: 1px solid var(--ol-border); border-radius: 20px; background: #fff; }
.ac-auth--wide { max-width: 560px; }
.ac-title { margin: 0 0 6px; font-size: 30px; line-height: 1.2; text-wrap: balance; }
.ac-sub { margin: 0 0 18px; color: var(--ol-muted); font-size: 15px; line-height: 1.5; }
.ac-perks { margin: 4px 0 18px; padding: 0; list-style: none; }
.ac-perks li { position: relative; padding: 3px 0 3px 26px; font-size: 15px; line-height: 1.45; }
.ac-perks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 14px; height: 8px; border-left: 2.5px solid var(--ol-dark);
    border-bottom: 2.5px solid var(--ol-dark); transform: rotate(-45deg); }
.ac-form .ol-primary { margin-top: 6px; }
.ac-row { margin: 14px 0 0; text-align: center; }
.ac-row--split { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.ac-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ol-border); text-align: center; font-size: 15px; }
.ac-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ol-dark); font-weight: 700; text-decoration: underline; }
.ac-link:hover { color: var(--ol-dark); }
.ac-textbtn { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--ol-dark); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ac-code { letter-spacing: .3em; font-size: 20px !important; font-variant-numeric: tabular-nums; }
.ac-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; }
.ac-alert--ok { background: #e9f5ec; color: #14532d; }
.ac-alert--err { background: #fdecea; color: var(--ol-err); }
.ac-alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.ac-note { margin: 0 0 14px; color: var(--ol-muted); font-size: 14px; }
.ac-muted { color: var(--ol-muted); }

.ac-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ac-head .ac-sub { margin-bottom: 0; overflow-wrap: anywhere; }
.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 992px) { .ac-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.ac-side { display: grid; gap: 20px; }
.ac-card { padding: 22px 20px; border: 1px solid var(--ol-border); border-radius: 20px; background: #fff; scroll-margin-top: 110px; }
.ac-h2 { margin: 0 0 14px; font-size: 21px; line-height: 1.3; }
.ac-count { color: var(--ol-muted); font-weight: 500; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ol-yellow); border-radius: 12px;
    background: var(--ol-yellow); color: #000; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: filter .15s ease; }
.ac-btn:hover { filter: brightness(.96); }
.ac-btn:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ac-btn--ghost { background: #fff; border-color: var(--ol-border); color: var(--ol-dark); }
.ac-btn--ghost:hover { background: var(--ol-soft); filter: none; }
.ac-btn--full { width: 100%; min-height: 48px; }
.ac-empty { padding: 8px 0 4px; }
.ac-empty p { margin: 0 0 8px; }
.ac-empty__btn { display: inline-flex; width: auto; margin-top: 6px; padding: 0 22px; }
.ac-order { padding: 16px 0; border-top: 1px solid var(--ol-border); }
.ac-order:first-of-type { border-top: 0; padding-top: 4px; }
.ac-order__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ac-order__ref { font-size: 18px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ac-order__meta { margin: 4px 0 8px; color: var(--ol-muted); font-size: 14px; }
.ac-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.ac-pill.is-new { background: var(--ol-soft); color: var(--ol-dark); }
.ac-pill.is-talk, .ac-pill.is-quote { background: #fff4c2; color: #5c4a00; }
.ac-pill.is-won { background: #e9f5ec; color: #14532d; }
.ac-pill.is-closed { background: #eceef2; color: rgba(5, 11, 32, .6); }
.ac-order__parts summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 600; font-size: 15px; }
.ac-order__parts summary:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; border-radius: 6px; }
.ac-order__parts ul { margin: 4px 0 6px; padding: 0; list-style: none; }
.ac-order__parts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ol-border); font-size: 14px; }
.ac-order__parts li:last-child { border-bottom: 0; }
.ac-qty { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
@media (max-width: 575.98px) {
    .ac-section { padding: 18px 0 56px; }
    .ac-auth { padding: 22px 16px; border-radius: 16px; }
    .ac-title { font-size: 26px; }
    .ac-card { padding: 18px 14px; border-radius: 16px; }
    .ac-order__actions .ac-btn { width: 100%; }
}

/* ---- 2026-10-20 (owner): the account icon's menu; My Account and My Order Requests as two pages; details read-only until Edit;
   Change password folded; pictures of the parts; long lists a page at a time ---- */
.ac-menu-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ac-menu-wrap .ac-open { padding: 0; background: none; border: 0; cursor: pointer; }
.ac-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100040; min-width: 236px; padding: 6px; border: 1px solid var(--ol-border);
    border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(5, 11, 32, .16); text-align: left; }
.ac-menu[hidden] { display: none; }
.ac-menu__who { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 8px 12px 10px; border-bottom: 1px solid var(--ol-border); font-size: 15px; line-height: 1.3; color: var(--ol-dark); }
.ac-menu__who strong { font-weight: 700; }
.ac-menu__who span { color: var(--ol-muted); font-size: 13px; overflow-wrap: anywhere; }
.ac-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
    color: var(--ol-dark); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer; }
.ac-menu__item:hover, .ac-menu__item:focus-visible { background: var(--ol-soft); color: var(--ol-dark); outline: none; }
.ac-menu__out { margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--ol-border); }
.ac-page--narrow { max-width: 760px; margin: 0 auto; }
.ac-page--narrow > .ac-card { margin-bottom: 16px; }
.ac-tabs { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; }
.ac-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ol-border); border-radius: 999px; background: #fff;
    color: var(--ol-dark); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.ac-tab:hover { background: var(--ol-soft); color: var(--ol-dark); }
.ac-tab.is-active { background: var(--ol-dark); border-color: var(--ol-dark); color: #fff; }
.ac-tab:focus-visible, .ac-fold summary:focus-visible, .ac-linkcard:focus-visible, .pg__btn:focus-visible { outline: 2px solid var(--ol-dark); outline-offset: 2px; }
.ac-card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ac-card__h .ac-h2 { margin: 0; }
.ac-btn svg { margin-right: 6px; }
.ac-btn[hidden], .ac-form[hidden], .ac-dl[hidden] { display: none; }
.ac-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; font-size: 15px; line-height: 1.4; }
.ac-dl dt { color: var(--ol-muted); font-weight: 500; }
.ac-dl dd { margin: 0; color: var(--ol-dark); overflow-wrap: anywhere; }
.ac-row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; }
.ac-fold summary::-webkit-details-marker { display: none; }
.ac-fold summary .ac-h2 { margin: 0; }
.ac-fold summary h2.ac-h2 { font-size: 21px; }
.ac-fold__chev { flex: none; color: var(--ol-muted); transition: transform .2s ease; }
.ac-fold[open] .ac-fold__chev { transform: rotate(180deg); }
.ac-fold__body { margin-top: 12px; }
.ac-linkcard { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; color: var(--ol-dark); text-decoration: none; }
.ac-linkcard:hover { background: var(--ol-soft); color: var(--ol-dark); }
.ac-count-line { margin: 0 0 10px; color: var(--ol-muted); font-size: 14px; }
.ac-thumbs { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.ac-thumbs img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--ol-border); border-radius: 8px; background: #fff; }
.ac-thumbs__more { padding-left: 4px; color: var(--ol-muted); font-size: 14px; font-weight: 700; }
.ac-items { list-style: none; margin: 6px 0 0; padding: 0; }
.ac-items li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ol-border); }
.ac-items li:last-child { border-bottom: 0; }
.ac-items img { flex: none; width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--ol-border); border-radius: 8px; background: #fff; }
.ac-items__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.35; }
.ac-items__name { color: var(--ol-dark); font-weight: 600; text-transform: uppercase; }
.ac-hint { margin: 8px 0 0; color: var(--ol-muted); font-size: 13px; line-height: 1.45; }
ul[data-paginate] > li[hidden] { display: none !important; }
.pg { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; }
.pg--pages { margin: 4px 0 16px; }
.pg__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ol-border); border-radius: 10px; background: #fff;
    color: var(--ol-dark); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pg__btn:hover { background: var(--ol-soft); color: var(--ol-dark); }
.pg__btn:disabled { opacity: .4; cursor: default; background: #fff; }
.pg__n { color: var(--ol-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.os-parts li { align-items: center; }
.os-parts__img { flex: none; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--ol-border); border-radius: 8px; background: #fff; }
.os-parts__txt { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .ol-drawer, .ol-backdrop, .ol-add, .ol-primary, .pd-type__opt span { transition: none !important; }
    .ol-in.is-new { animation: none; }
    .ac-fold__chev { transition: none; }
    .ol-badge.is-bump { animation: none; }
}