/* Arg Sanat «پیشخوان کارخانه» — checkout.html (SPEC §6.4) and tracking.html (SPEC §6.5).
   Loaded after assets/site.css; uses only its tokens. Nothing under 16px. Red = buying only;
   blue = information/trust; gold = current step; --ok = completed. */

/* ===================== shared to both pages ===================== */
/* these pages toggle many flex/grid blocks with the hidden attribute */
[hidden]{display:none!important}
/* headings and panels that receive focus from script (step changes) show no ring; real controls keep theirs */
[tabindex="-1"]:focus{outline:none}
.pg-head{padding:28px 0 6px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;list-style:none;font-size:16px;color:var(--ink-2);margin-bottom:6px}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.crumbs li+li::before{content:"/";margin-inline-end:10px;color:var(--ctl)}
.pg-head h1{font-size:44px;line-height:1.4}
.pg-head .lead{margin-top:4px;font-size:18px}
.phone-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:16px;color:var(--ink-2);line-height:1.7}
.phone-line .ico{width:20px;height:20px;color:var(--blue)}
.phone-line a{font-weight:800;color:var(--ink);text-decoration:none}
.phone-line a:hover{text-decoration:underline}
.box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:22px 24px}
.box>h2,.box__h{font-size:22px;line-height:1.5;margin-bottom:12px}
.box__h{display:flex;align-items:center;gap:10px}
.box__h .ico{color:var(--blue);width:26px;height:26px}
.alert{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;border-radius:var(--r2);padding:18px 20px;border:2px solid var(--red-2);background:var(--red-tint);color:var(--ink)}
.alert>.ico{grid-row:span 3;width:30px;height:30px;color:var(--red-2);margin-top:4px}
.alert h2,.alert h3{font-size:21px;color:var(--red-2);line-height:1.5}
.alert p{font-size:17px;line-height:1.85}
.alert__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.note-ok{display:flex;align-items:flex-start;gap:10px;color:var(--ok);font-weight:700;font-size:17px;line-height:1.7}
.note-ok .ico{width:22px;height:22px;margin-top:3px}
.promise-mini{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;border:2px solid var(--ok);border-radius:var(--r2);padding:14px 16px;background:var(--paper)}
.promise-mini .ico{grid-row:span 2;width:28px;height:28px;color:var(--ok);margin-top:4px}
.promise-mini b{font-size:17px;line-height:1.6}
.promise-mini p{font-size:16px;line-height:1.8;color:var(--ink-2)}
.otp{display:flex;flex-direction:column;gap:10px}
.otp__row{display:flex;gap:10px;align-items:stretch}
.otp__row .input{flex:1;min-width:0}
.otp__row .btn{flex:none}
.input-code{direction:ltr;text-align:center;font:800 26px/1 var(--fd);letter-spacing:.35em;padding-inline:12px}
.input-code::placeholder{font:500 18px/1 var(--fb);letter-spacing:0}
.otp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:16px;color:var(--ink-2)}
.btn-text{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--blue);font:700 16px/1.4 var(--fb);text-decoration:underline;text-underline-offset:4px}
.btn-text[disabled]{color:var(--ink-2);text-decoration:none;cursor:default}
.field small,.help-line{font-size:16px;color:var(--ink-2);line-height:1.6}
.field .msg-err{margin:0}
textarea.input{min-height:104px;padding:12px 16px;line-height:1.8;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-inline-end:16px;padding-inline-start:44px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1C1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center/20px 20px}
.check{display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:12px 16px;border:2px solid var(--ctl);border-radius:var(--r1);background:var(--paper);cursor:pointer;font-size:17px;line-height:1.7}
.check input{width:24px;height:24px;margin:3px 0 0;flex:none;accent-color:var(--ink)}
.check small{display:block;font-size:16px;color:var(--ink-2)}
.check:has(input:checked){border-color:var(--ink)}
.check:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

/* ===================== checkout.html ===================== */
.co{padding-bottom:72px}
.co-progress{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 24px;counter-reset:cs}
.co-progress li{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;border-radius:var(--r1);background:var(--paper);border:1px solid var(--line);font-weight:700;font-size:17px;color:var(--ink-2)}
.co-progress li::before{counter-increment:cs;content:counter(cs,persian);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ctl);font:800 17px/1 var(--fd);color:var(--ink-2);background:var(--paper)}
.co-progress li[aria-current="step"]{border:2px solid var(--ink);color:var(--ink)}
.co-progress li[aria-current="step"]::before{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.co-progress li.is-done{color:var(--ok)}
.co-progress li.is-done::before{content:"";border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/20px 20px}
.co-progress small{font-size:16px;font-weight:500}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.co-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.co-mtotal{display:none}

.co-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2)}
.co-step[data-state="open"]{border:2px solid var(--ink)}
.co-step__h{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;padding:16px 22px}
.co-step__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--ctl);font:800 19px/1 var(--fd);color:var(--ink-2)}
.co-step[data-state="open"] .co-step__n{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.co-step[data-state="done"] .co-step__n{background:var(--ok);border-color:var(--ok);color:#fff}
.co-step__h h2{font-size:23px;line-height:1.5}
.co-step[data-state="todo"] .co-step__h h2{color:var(--ink-2)}
.co-step__sum{grid-column:2;font-size:16px;color:var(--ink-2);line-height:1.7}
.co-step__sum:empty{display:none}
.co-step__edit{grid-row:1;grid-column:3}
.co-step:not([data-state="done"]) .co-step__edit{display:none}
.co-step__b{padding:4px 22px 22px;display:flex;flex-direction:column;gap:18px}
.co-step:not([data-state="open"]) .co-step__b{display:none}
.co-sub{font:800 19px/1.5 var(--fd);margin-bottom:-6px}
.co-next{display:flex;flex-direction:column;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.co-next .btn{min-height:56px}

/* cart lines */
.co-lines{list-style:none;display:flex;flex-direction:column}
.co-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"img info total" "img qty total";gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.co-line:first-child{padding-top:4px}
.co-line .photo-band{grid-area:img;width:96px;height:96px;border-radius:var(--r1)}
.co-line__info{grid-area:info;min-width:0}
.co-line__info b{display:block;font-size:18px;line-height:1.55}
.co-line__info a{color:var(--ink);text-decoration:none}
.co-line__info a:hover{text-decoration:underline}
.co-line__meta{font-size:16px;color:var(--ink-2);line-height:1.7}
.co-line__qty{grid-area:qty;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.co-line__qty .stepper{width:184px}
.co-line__total{grid-area:total;text-align:end;white-space:nowrap}
.co-line__total b{display:block;font:800 22px/1.3 var(--fd)}
.co-line__total span{font-size:16px;color:var(--ink-2)}
.co-line__total b{color:var(--ink)}
.co-line__lbl{display:none}
.co-rm{color:var(--ink-2)}
.co-empty{text-align:center;padding:28px 12px 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.co-empty .ico{width:56px;height:56px;color:var(--ctl);stroke-width:1.6}
.co-empty h3{font-size:24px}
.co-empty p{color:var(--ink-2);max-width:30em}
.co-empty__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* phone + OTP */
.co-verified{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 16px;border-radius:var(--r1);background:#E3F0E7;color:var(--ok);font-weight:700}
.co-verified .ico{width:22px;height:22px}
.co-verified .ltr{color:var(--ink)}
.co-verified .btn-text{margin-inline-start:auto}
.co-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.co-fields .wide{grid-column:1/-1}

/* delivery cards */
.ships{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ships legend{padding:0;margin-bottom:4px}
.ship{position:relative;display:block;cursor:pointer}
.ship input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.ship__box{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 16px 14px;border:2px solid var(--ctl);border-radius:var(--r2);background:var(--paper);transition:border-color .15s,box-shadow .15s}
.ship:hover .ship__box{border-color:var(--ink)}
.ship input:checked+.ship__box{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:#FCFBF8}
.ship input:focus-visible+.ship__box{outline:3px solid var(--blue);outline-offset:2px}
.ship__top{display:flex;align-items:center;gap:10px}
.ship__top .ico{width:28px;height:28px;color:var(--blue)}
.ship__top b{font-size:19px;line-height:1.4}
.ship__radio{margin-inline-start:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--ctl);flex:none;display:grid;place-items:center;background:var(--paper)}
.ship input:checked+.ship__box .ship__radio{border-color:var(--ink);background:var(--ink)}
.ship input:checked+.ship__box .ship__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.ship__rows{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:16px;line-height:1.7;margin:2px 0}
.ship__rows dt{color:var(--ink-2)}
.ship__rows dd{margin:0;font-weight:700}
.ship__note{font-size:16px;line-height:1.75;color:var(--ink-2)}
.ship__warn{font-size:16px;line-height:1.7;color:var(--ink);background:var(--plaster);border-radius:8px;padding:6px 10px}
.ship__warn[hidden]{display:none}

/* payment */
.pay-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px solid var(--ink);border-radius:var(--r2);background:#FCFBF8}
.pay-opt .ico{width:30px;height:30px;color:var(--blue)}
.pay-opt b{display:block;font-size:18px}
.pay-opt span{font-size:16px;color:var(--ink-2)}
.pay-safe{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.8;color:var(--ink-2);background:var(--blue-tint);border-radius:var(--r1);padding:10px 14px}
.pay-safe .ico{width:22px;height:22px;color:var(--blue);margin-top:3px}
.pay-safe b{color:var(--ink)}
.co-review{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:17px;line-height:1.7}
.co-review dt{color:var(--ink-2)}
.co-review dd{margin:0;font-weight:500}
.co-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 24px;border:2px solid var(--ok)}
.co-done>.ico{width:60px;height:60px;color:var(--ok)}
.co-done h2{font-size:30px}
.co-done .tcode{font:800 34px/1.3 var(--fd);color:var(--blue);letter-spacing:.02em}
.co-done p{color:var(--ink-2);max-width:32em}
.co-done .phone-line{justify-content:center;text-align:center}
.co-done__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.co-done__code{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;margin-top:-4px}
.co-receipt{width:100%;max-width:34em;margin:4px 0;padding:8px 18px;text-align:start;border:1px solid var(--line);border-radius:var(--r1);background:#FCFBF8}
.co-receipt>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.6}
.co-receipt>div:last-child{border-bottom:0}
.co-receipt dt{color:var(--ink-2)}
.co-receipt dd{margin:0;font-weight:700;color:var(--ink)}
.co-receipt__paid dt{color:var(--ok);font-weight:700}
.co-receipt__paid dt::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ok);margin-inline-end:8px;vertical-align:1px}

/* summary */
.co-sum{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.co-sum .box{padding:20px}
.co-sum h2{font-size:22px}
.co-sum__items{list-style:none;display:flex;flex-direction:column;gap:10px;margin:4px 0 12px}
.co-sum__items li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:16px;line-height:1.55}
.co-sum__items .photo-band{width:56px;height:56px;border-radius:8px}
.co-sum__items b{display:block;font-weight:500}
.co-sum__items small{font-size:16px;color:var(--ink-2)}
.co-sum__items .amt{font-weight:700;white-space:nowrap}
/* empty cart: the one-line note spans the whole row (it fell into the 56px photo column) */
.co-sum__items li>.muted:only-child{grid-column:1/-1}
.co-tot{margin:0;border-top:1px solid var(--line);padding-top:8px}
.co-tot>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:17px;line-height:1.6}
.co-tot dt{color:var(--ink-2)}
.co-tot dd{margin:0;text-align:end;font-weight:700}
.co-tot .ph{font-size:16px;font-weight:500}
.co-tot__vat{flex-direction:column;align-items:stretch!important;gap:4px!important}
.co-tot__vat dd{text-align:start}
.co-tot__pay{border-top:2px solid var(--ink);margin-top:6px;padding-top:12px!important}
.co-tot__pay dt{color:var(--ink);font-weight:700}
.co-tot__pay dd b{font:800 28px/1.2 var(--fd)}
.co-tot dd small{display:block;font-size:16px;font-weight:500;color:var(--ink-2);line-height:1.6}
.co-tot__pay .ph{font:700 18px/1.5 var(--fb)}
/* the gateway amount: label on its own line, the (placeholder) amount under it, never squeezed beside it */
.co-tot__pay,.co-tot__later{flex-direction:column;align-items:stretch!important;gap:2px!important}
.co-tot__pay dd,.co-tot__later dd{text-align:start}
.co-tot__pay dt{font-size:18px}
/* before a delivery method is picked the bold figure is the goods subtotal, named as such */
.co-tot__sub dt{color:var(--ink);font-weight:700}
.co-tot__sub dd b{font:800 24px/1.2 var(--fd)}
.co-tot__note{font-size:16px;line-height:1.7;color:var(--ink-2);padding-top:4px}
.co-tot__later{background:var(--plaster);border-radius:8px;padding:8px 10px!important;margin-top:8px}
.co-tot__later dt{color:var(--ink);font-weight:700}
/* one summary per screen: step 1 is the cart, step 3 has its own collapsible summary (#co-sumdet) */
.co[data-step="cart"] #co-sumbox,.co[data-step="pay"] #co-sumbox{display:none}
.co-sumdet{border:1px solid var(--ctl);border-radius:var(--r1);background:#FCFBF8}
.co-sumdet summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:52px;padding:8px 14px;padding-inline-end:46px;position:relative;cursor:pointer;list-style:none;border-radius:var(--r1)}
.co-sumdet summary::-webkit-details-marker{display:none}
.co-sumdet summary::after{content:"";position:absolute;inset-inline-end:16px;top:50%;width:11px;height:11px;margin-top:-8px;border:solid var(--ink);border-width:0 0 3px 3px;transform:rotate(-45deg);transition:transform .15s}
.co-sumdet[open] summary::after{transform:rotate(135deg);margin-top:-2px}
.co-sumdet summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.co-sumdet__t{font-weight:700;font-size:17px}
.co-sumdet__s{font-size:16px;color:var(--ink-2)}
.co-sumdet__s .ltr{font-weight:700;color:var(--ink)}
.co-sumdet .co-sum__items{margin:0;padding:4px 14px 14px;border-top:1px solid var(--line)}
.co-sumdet .co-sum__items li:first-child{margin-top:8px}
#co-paybtn>span{display:inline}
#co-paybtn .ph{color:var(--ph-ink)}

/* ===================== tracking.html ===================== */
.tr{padding-bottom:72px}
.tr-demo{margin:10px 0 0;font-size:16px}
.tr-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:18px}
.tr-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.tr-status{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r3);padding:24px 28px 22px;position:relative;overflow:hidden}
.tr-code{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:17px;color:var(--ink-2)}
.tr-code b{font:800 24px/1.3 var(--fd);color:var(--blue);letter-spacing:.02em}
.tr-code .btn-text{margin-inline-start:auto}
.tr-status h1{font-size:40px;line-height:1.45;margin-top:8px}
.tr-eta{display:flex;align-items:flex-start;gap:10px;margin-top:6px;font-size:19px;line-height:1.7}
.tr-eta .ico{width:26px;height:26px;color:var(--blue);margin-top:4px}
.tr-eta b{font-weight:800}
.tr-status .muted{font-size:17px;margin-top:2px}
/* the road: factory (start, right in RTL) to your city (end, left) */
.road{position:relative;margin:22px 0 4px;padding-top:58px}
.road__line{position:relative;height:12px;border-radius:6px;background:repeating-linear-gradient(to left,var(--line) 0 16px,transparent 16px 26px)}
.road__done{position:absolute;inset-block:0;inset-inline-start:0;width:var(--p,60%);border-radius:6px;background:var(--blue)}
.road__truck{position:absolute;top:0;inset-inline-start:var(--p,60%);width:92px;height:60px;margin-inline-start:-46px;transform:scaleX(-1)}
.road__pins{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:16px;line-height:1.5}
.road__pins>span{display:flex;align-items:center;gap:6px;font-weight:700}
.road__pins .ico{width:22px;height:22px;color:var(--blue)}
.road__pins>span>span{white-space:nowrap}
.road__pins small{display:block;font-weight:500;color:var(--ink-2);font-size:16px}
.road__stops{position:absolute;inset-inline:0;bottom:-1px;top:58px;pointer-events:none}
.road__stops i{position:absolute;top:-4px;width:20px;height:20px;margin-inline-start:-10px;border-radius:50%;background:var(--paper);border:3px solid var(--line)}
.road__stops i.ok{border-color:var(--blue);background:var(--blue)}
/* timeline (k1/k3) */
.tl{list-style:none;margin:6px 0 0;padding:0}
.tl li{position:relative;padding:0 0 22px;padding-inline-start:54px;min-height:56px}
.tl li:last-child{padding-bottom:0}
.tl .dot{position:absolute;inset-inline-start:0;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff}
.tl .dot .ico{width:20px;height:20px;stroke-width:2.6}
.tl li::after{content:"";position:absolute;inset-inline-start:17px;top:42px;bottom:4px;width:4px;border-radius:2px;background:var(--ok)}
.tl li:last-child::after{display:none}
.tl li.now .dot{background:var(--gold);color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.tl li.now::after{background:repeating-linear-gradient(to bottom,var(--ctl) 0 6px,transparent 6px 12px)}
.tl li.todo .dot{background:var(--paper);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--ctl)}
.tl b{display:block;font-size:19px;line-height:1.5}
.tl li.now b{color:var(--ink)}
.tl li.todo b{color:var(--ink-2)}
.tl time,.tl .when{display:block;font-size:16px;color:var(--ink-2);line-height:1.7}
.tl p{font-size:16px;line-height:1.75;color:var(--ink-2);margin-top:2px}
.tl .tag-now{display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:0 8px;font-size:16px;font-weight:700;margin-inline-start:6px;vertical-align:2px;line-height:1.6}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0 18px;margin:0}
.kv dt,.kv dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.7}
.kv dt{color:var(--ink-2);white-space:nowrap}
.kv dd{font-weight:500}
.kv>:nth-last-child(-n+2){border-bottom:0}
.tr-carrier .btn{margin-top:14px}
.parcel{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.parcel__ph{aspect-ratio:1/1;border:2px dashed #B88A00;border-radius:var(--r1);background:var(--ph-bg);color:var(--ph-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;font-size:16px;line-height:1.5;font-weight:500}
.parcel__ph .ico{width:44px;height:44px;stroke-width:1.5}
.parcel figcaption{font-size:16px;line-height:1.85;color:var(--ink-2)}
.parcel figcaption b{color:var(--ink);font-size:17px}
.tr-items{list-style:none;display:flex;flex-direction:column}
.tr-items li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tr-items li:last-child{border-bottom:0;padding-bottom:0}
.tr-items .photo-band{width:72px;height:72px;border-radius:var(--r1)}
.tr-items b{display:block;font-size:17px;line-height:1.55}
.tr-items small{font-size:16px;color:var(--ink-2);line-height:1.6}
.tr-count{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.tr-count span{display:inline-flex;align-items:center;gap:6px;background:var(--blue-tint);color:var(--blue-2);border-radius:8px;padding:2px 12px;font-weight:700;font-size:16px}
.tr-private{border:2px solid var(--blue)}
.tr-private>p{color:var(--ink-2);font-size:17px;line-height:1.85}
.tr-private .btn{margin-top:12px}
.tr-otp{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tr-otp[hidden],.tr-unlocked[hidden]{display:none}
.tr-unlocked{margin-top:12px}
.inv{width:100%;border-collapse:collapse;margin-top:12px;font-size:16px}
.inv th,.inv td{padding:8px 0;border-bottom:1px solid var(--line);text-align:start;line-height:1.6;vertical-align:top}
.inv th{color:var(--ink-2);font-weight:500}
.inv td:last-child,.inv th:last-child{text-align:end;white-space:nowrap}
.inv tfoot td{font-weight:700;border-bottom:0}
.inv tfoot tr.sum td{border-top:2px solid var(--ink)}
.tr-help__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-report{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tr-report[hidden]{display:none}
.tr-report fieldset{border:0;margin:0;padding:0;min-width:0}
.tr-report legend{font-weight:700;font-size:17px;padding:0;margin-bottom:8px}
.radio-chips{display:flex;flex-wrap:wrap;gap:8px}
.radio-chips label{position:relative}
.radio-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.radio-chips span{display:inline-flex;align-items:center;min-height:44px;padding:4px 16px;border:2px solid var(--ctl);border-radius:999px;background:var(--paper);font-size:16px;font-weight:500}
.radio-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.radio-chips input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.tr-look{margin-top:24px}
.tr-look .tform{display:flex;gap:10px;margin-top:10px;max-width:560px}
.tr-look .tform .input{flex:1;min-width:0;min-height:56px}
.tr-look .msg-err{margin-top:8px}
.tr-bad{max-width:640px}
.tr-bad[hidden],.tr-ok[hidden]{display:none}

/* ===================== responsive ===================== */
@media (max-width:1100px){
  .co-grid{grid-template-columns:minmax(0,1fr) 340px;gap:20px}
}
@media (max-width:1020px){
  .co-grid,.tr-grid{grid-template-columns:1fr}
  .co-sum{position:static}
}
@media (max-width:719px){
  .pg-head{padding:16px 0 0}
  .pg-head h1{font-size:30px}
  .pg-head .lead{font-size:16px;line-height:1.8}
  .crumbs{display:none}
  .co-progress{margin:12px 0 14px;gap:6px}
  .co-progress li{flex-direction:column;justify-content:center;gap:2px;padding:8px 4px;font-size:16px;text-align:center;line-height:1.35}
  .co-progress li::before{width:30px;height:30px;font-size:16px}
  .co-progress small{display:none}
  .co[data-step="address"] .co-mtotal{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r1);padding:8px 14px;font-size:16px;line-height:1.5}
  .co-mtotal b{font:800 20px/1.3 var(--fd)}
  .co-mtotal a{font-weight:700;min-height:44px;display:inline-flex;align-items:center}
  .co-step__h{padding:14px 16px;gap:2px 12px}
  .co-step__n{width:36px;height:36px;font-size:17px}
  .co-step__h h2{font-size:20px}
  .co-step__b{padding:2px 16px 18px;gap:16px}
  .co-line{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"img info" "qty qty" "total total";gap:8px 12px}
  .co-line .photo-band{width:76px;height:76px}
  .co-line__info b{font-size:17px}
  .co-line__qty{justify-content:space-between}
  .co-line__qty .stepper{width:auto;flex:1;max-width:220px}
  .co-line__total{display:flex;justify-content:space-between;align-items:baseline;text-align:start;border-top:1px dashed var(--line);padding-top:6px}
  .co-line__total b{font-size:20px;display:inline}
  .co-line__lbl{display:inline}
  .co-fields{grid-template-columns:1fr}
  .co-tot__sub{flex-wrap:wrap}
  .co-tot__sub dd{white-space:nowrap}
  .ships{grid-template-columns:1fr}
  .otp__row{flex-direction:column}
  .otp__row .btn{width:100%}
  .co-review{grid-template-columns:1fr;gap:0}
  .co-review dd{margin-bottom:8px}
  .co-sum .box{padding:16px}
  .co-done{padding:24px 16px}
  .co-done h2{font-size:24px}
  .co-done .tcode{font-size:28px}
  .co-done__btns .btn{width:100%}
  .alert{padding:14px 16px;gap:2px 10px}
  .alert>.ico{width:26px;height:26px}
  .alert__btns .btn{width:100%}
  .box{padding:16px}
  .box>h2,.box__h{font-size:20px}
  .tr-status{padding:16px 16px 14px;border-radius:var(--r2)}
  .tr-status h1{font-size:28px;margin-top:4px}
  .tr-code b{font-size:21px}
  .tr-eta{font-size:17px}
  .road{margin-top:16px;padding-top:50px}
  .road__truck{width:76px;height:50px;margin-inline-start:-38px}
  .road__stops{top:50px}
  .tl li{padding-inline-start:50px}
  .tl b{font-size:17px}
  .kv dt,.kv dd{font-size:16px;padding:7px 0}
  .parcel{grid-template-columns:116px minmax(0,1fr);gap:12px}
  .tr-help__btns .btn{padding-inline:8px}
  .tr-look .tform{flex-direction:column}
}