/* Hallmark · component: checkout with receipt printer · genre: modern-minimal · theme: brand (Buy2Africa flight deck) · states: 8 · contrast: pass · redesign: full · scope: component · v2.0.0
 * critique: the printer is the order summary, so the total, the approval and the receipt live in one object instead of a list plus a modal.
 * waive 64: .wp-tbl small.mono shows tracking numbers and shipment ids, which are codes, not labels.
 * answered: tokens below reuse the brand palette (--void, --ink, --amber, --cyan) and add only the paper, the plastic and the motion timings. */

:root{
  --co-plastic: #161d3d;
  --co-plastic-edge: #2a3463;
  --co-plastic-ink: #aab3cf;
  --co-plastic-name: #eef3ff;
  --co-screen: #060a18;
  --co-screen-ink: #c3cdea;
  --co-screen-hi: #eef3ff;
  --co-screen-mute: #8c97b8;
  --co-slot: #02040c;
  --co-paper: #fbfaf4;
  --co-paper-ink: #1b2238;
  --co-paper-mute: #5a6585;
  --co-paper-rule: #c9cedd;
  --co-paper-note: #fff1d6;
  --co-ok: var(--ok);
  --co-key: var(--amber);
  --co-key-hi: color-mix(in oklab, var(--amber) 70%, #ffffff);
  --co-key-lo: color-mix(in oklab, var(--amber) 85%, #000000);
  --co-key-edge: color-mix(in oklab, var(--amber) 55%, #000000);
  --co-key-ink: var(--amber-ink);
  --co-bad: var(--bad);
  --co-focus: var(--cyan);
  --co-shade: rgba(0, 0, 0, .45);
  --co-lift-1: rgba(255, 255, 255, .08);
  --co-lift-4: rgba(255, 255, 255, .4);
  --co-lift-5: rgba(255, 255, 255, .5);
  --co-lift-6: rgba(255, 255, 255, .6);
  --co-sink-1: rgba(0, 0, 0, .1);
  --co-sink-2: rgba(0, 0, 0, .24);
  --co-sink-9: rgba(0, 0, 0, .9);
  --co-dur-micro: 90ms;
  --co-dur-short: 180ms;
  --co-feed: 1.75s;
  --co-ease-out: cubic-bezier(.23, 1, .32, 1);
  --co-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --co-font-mono: var(--f-mono);
  --co-font-body: var(--f-body);
}

/* ---------- Checkout layout: choices on the left, the printer on the right ---------- */
.co{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start;margin-top:16px}
.co-form{display:grid;gap:16px;min-width:0}
.co-form h3{margin:0;overflow-wrap:break-word;min-width:0}
.co-side{position:sticky;top:88px;display:grid;justify-items:center;gap:16px;min-width:0}
.co-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
.co-note{margin:0;font:400 .85rem/1.5 var(--co-font-body);color:var(--slate);text-align:center;max-width:36ch}
@media (max-width:860px){.co{grid-template-columns:minmax(0,1fr)}.co-side{position:static}}

/* ---------- Receipt printer ---------- */
.rp{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px}
.rp-machine{position:relative;width:100%;border-radius:24px;padding:12px 12px 32px;background:var(--co-plastic);border:1px solid var(--co-plastic-edge);
  box-shadow:0 20px 36px -20px var(--co-shade),0 6px 14px -8px var(--co-shade),inset 0 1px 0 var(--co-lift-1),inset 0 -1px 0 var(--co-shade)}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;height:30px;padding:0 8px;font:500 .8rem/1 var(--co-font-body);color:var(--co-plastic-ink)}
.rp-head b{font-weight:600;color:var(--co-plastic-name)}
.rp-screen{position:relative;overflow:hidden;border-radius:12px;background:var(--co-screen);color:var(--co-screen-ink);padding:16px;border:1px solid var(--co-plastic-edge);
  box-shadow:inset 0 0 24px 4px var(--co-shade)}
.rp-status{display:flex;align-items:center;gap:8px;min-width:0;font:500 .82rem/1.2 var(--co-font-body)}
.rp-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-ind{position:relative;display:grid;place-items:center;width:20px;height:20px;flex:none}
.rp-ind svg{grid-area:1/1;width:18px;height:18px;transition:opacity var(--co-dur-short) var(--co-ease-out),transform var(--co-dur-short) var(--co-ease-out)}
.rp-spin{color:var(--co-screen-mute)}
.js .rp-spin{opacity:0;transform:scale(.94)}
.rp-done{color:var(--co-ok)}
.js .rp-done{opacity:0;transform:scale(.94)}
.rp-idle{color:var(--co-key);opacity:1}
.js .rp[data-stage="processing"] .rp-spin,.js .rp[data-stage="printing"] .rp-spin{opacity:1;transform:scale(1);animation:rp-rot .8s linear infinite}
.rp[data-stage="processing"] .rp-idle,.rp[data-stage="printing"] .rp-idle,.rp[data-stage="complete"] .rp-idle,.rp[data-stage="error"] .rp-idle{opacity:0}
.js .rp[data-stage="complete"] .rp-done{opacity:1;transform:scale(1)}
.rp[data-stage="error"] .rp-status{color:var(--co-bad)}
.rp-readout{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 1.5rem/1 var(--co-font-mono);color:var(--co-screen-hi);font-variant-numeric:tabular-nums}
.rp-readout small{font:400 .78rem/1.2 var(--co-font-body);color:var(--co-screen-mute)}
.rp-slot{position:absolute;left:24px;right:24px;bottom:12px;height:8px;border-radius:4px;background:var(--co-slot);box-shadow:inset 0 2px 4px var(--co-sink-9);z-index:3}

.rp-output{position:relative;z-index:4;width:calc(80% + 3rem);max-width:100%;margin-top:-16px;padding:0 24px;overflow:hidden;min-height:0}
.rp[data-stage="idle"] .rp-output,.rp[data-stage="processing"] .rp-output,.rp[data-stage="error"] .rp-output{height:0}
.rp-shade{position:absolute;left:24px;right:24px;top:-4px;height:8px;background:var(--co-shade);filter:blur(6px);z-index:2;pointer-events:none}
.rp-feed{position:relative}
.js .rp-feed{transform:translateY(calc(-100% + 2px));opacity:0}
.js .rp[data-stage="printing"] .rp-feed{opacity:1;animation:rp-feed var(--co-feed) linear forwards}
.js .rp[data-stage="complete"] .rp-feed{opacity:1;transform:translateY(0)}
.rp-paper{position:relative;padding:24px 24px 32px;background:var(--co-paper);color:var(--co-paper-ink);font:500 .8rem/1.5 var(--co-font-mono);display:grid;gap:8px;
  box-shadow:0 8px 24px var(--co-sink-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),97.5% 100%,95% calc(100% - 4px),92.5% 100%,90% calc(100% - 4px),87.5% 100%,85% calc(100% - 4px),82.5% 100%,80% calc(100% - 4px),77.5% 100%,75% calc(100% - 4px),72.5% 100%,70% calc(100% - 4px),67.5% 100%,65% calc(100% - 4px),62.5% 100%,60% calc(100% - 4px),57.5% 100%,55% calc(100% - 4px),52.5% 100%,50% calc(100% - 4px),47.5% 100%,45% calc(100% - 4px),42.5% 100%,40% calc(100% - 4px),37.5% 100%,35% calc(100% - 4px),32.5% 100%,30% calc(100% - 4px),27.5% 100%,25% calc(100% - 4px),22.5% 100%,20% calc(100% - 4px),17.5% 100%,15% calc(100% - 4px),12.5% 100%,10% calc(100% - 4px),7.5% 100%,5% calc(100% - 4px),2.5% 100%,0 calc(100% - 4px))}
.rp-paper h4{margin:0;text-align:center;font:700 .95rem/1.3 var(--co-font-mono);overflow-wrap:break-word;min-width:0}
.rp-paper .rp-sub{margin:0 0 4px;text-align:center;color:var(--co-paper-mute);font-size:.74rem}
.rp-rule{border:0;border-top:1px dashed var(--co-paper-rule);margin:4px 0}
.rp-line{display:flex;justify-content:space-between;gap:12px}
.rp-line span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-total{font-weight:700;font-size:.92rem}
.rp-pay{background:var(--co-paper-note);border-radius:6px;padding:8px;font-weight:600}
.rp-foot{text-align:center;color:var(--co-paper-mute);font-size:.72rem;padding-top:4px}

@keyframes rp-rot{to{transform:rotate(360deg)}}
/* stepped feed: the paper moves one line, stops, moves again (offsets from the reference ReceiptPrinter component) */
@keyframes rp-feed{
  0%{transform:translateY(calc(-100% + 2px))} 7.5%{transform:translateY(-91%)} 10.5%{transform:translateY(-91%)} 18%{transform:translateY(-81%)} 21%{transform:translateY(-81%)}
  28.5%{transform:translateY(-70%)} 31.5%{transform:translateY(-70%)} 39%{transform:translateY(-58%)} 42%{transform:translateY(-58%)} 49.5%{transform:translateY(-45%)} 52.5%{transform:translateY(-45%)}
  60%{transform:translateY(-32%)} 63%{transform:translateY(-32%)} 70.5%{transform:translateY(-20%)} 73.5%{transform:translateY(-20%)} 81%{transform:translateY(-10%)} 84%{transform:translateY(-10%)}
  91.5%{transform:translateY(-3%)} 94.5%{transform:translateY(-3%)} 100%{transform:translateY(0)}}

/* ---------- The key: a tactile button you press down (eight states) ---------- */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:12px;cursor:pointer;
  font:700 .95rem/1 var(--co-font-body);color:var(--co-key-ink);text-decoration:none;
  background:linear-gradient(180deg,var(--co-key-hi) 0%,var(--co-key) 55%,var(--co-key-lo) 100%);
  box-shadow:inset 0 1px 0 var(--co-lift-6),inset 0 -2px 0 var(--co-sink-1),0 4px 0 var(--co-key-edge),0 8px 18px -6px var(--co-shade);
  transform:translateY(0);transition:transform var(--co-dur-micro) var(--co-ease-out),box-shadow var(--co-dur-micro) var(--co-ease-out),filter var(--co-dur-short) var(--co-ease-out)}
.key svg{flex:none;width:14px;height:14px}
.key:hover,.key.is-hover{filter:brightness(1.05)}
.key:focus-visible,.key.is-focus{outline:2px solid var(--co-focus);outline-offset:4px;transition:none}
.key:active:not(:disabled),.key.is-active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--co-lift-5),inset 0 -1px 0 var(--co-sink-1),0 1px 0 var(--co-key-edge),0 3px 8px -4px var(--co-shade)}
.key:disabled,.key.is-disabled{filter:grayscale(.7) brightness(.8);cursor:not-allowed;box-shadow:inset 0 1px 0 var(--co-lift-4),0 2px 0 var(--co-key-edge)}
.key[aria-busy="true"],.key.is-loading{cursor:progress;transform:translateY(2px);box-shadow:inset 0 1px 0 var(--co-lift-5),0 2px 0 var(--co-key-edge)}
.key[aria-busy="true"] svg,.key.is-loading svg{animation:rp-rot .8s linear infinite}
.key.is-error{box-shadow:inset 0 1px 0 var(--co-lift-6),0 4px 0 var(--co-key-edge),0 0 0 2px var(--co-bad)}
.key.is-success{box-shadow:inset 0 1px 0 var(--co-lift-6),0 4px 0 var(--co-key-edge),0 0 0 2px var(--co-ok)}
.key--quiet{color:var(--ink);background:transparent;border:1px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong)}
.key--quiet:active:not(:disabled){box-shadow:0 0 0 var(--line-strong)}

@media (prefers-reduced-motion:reduce){
  .js .rp[data-stage="printing"] .rp-feed{animation:none;transform:translateY(0)}
  .rp[data-stage="processing"] .rp-spin,.rp[data-stage="printing"] .rp-spin,.key[aria-busy="true"] svg,.key.is-loading svg{animation:none}
  .key,.rp-ind svg{transition:none}
}

/* ---------- Dynamic copy button (addresses): Copy slides out, Copied slides in; the width never changes ---------- */
.dyn{position:relative;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;color:var(--ink);
  font:500 .78rem/1 var(--co-font-body);white-space:nowrap;cursor:pointer;overflow:hidden;
  transition:color var(--co-dur-short) var(--co-ease-out),background-color var(--co-dur-short) var(--co-ease-out),border-color var(--co-dur-short) var(--co-ease-out),transform var(--co-dur-micro) var(--co-ease-out)}
.dyn:hover{border-color:var(--co-focus)}
.dyn:active{transform:scale(.97)}
.dyn:focus-visible{outline:2px solid var(--co-focus);outline-offset:2px;transition:none}
.dyn:disabled{opacity:.55;cursor:not-allowed}
.dyn-ic,.dyn-tx{display:inline-grid;overflow:hidden}
.dyn-ic{width:15px;height:15px}
.dyn-ic svg{width:15px;height:15px;display:block}
.dyn-a,.dyn-b{grid-area:1/1;display:flex;align-items:center;transition:opacity var(--co-dur-short) var(--co-ease-out),transform var(--co-dur-short) var(--co-ease-out)}
.dyn-b{opacity:0;transform:translateY(8px)}
.dyn.is-done .dyn-a{opacity:0;transform:translateY(-8px)}
.dyn.is-done .dyn-b{opacity:1;transform:translateY(0)}
.dyn.is-done{border-color:var(--co-ok);color:var(--co-ok)}
.dyn--primary{height:40px;padding:0 16px;border-radius:999px;border-color:var(--co-key);background:var(--co-key);color:var(--co-key-ink);font-weight:700;font-size:.9rem}
.dyn--primary:hover{filter:brightness(1.05);border-color:var(--co-key)}
.dyn--primary.is-done{background:var(--co-ok);border-color:var(--co-ok);color:var(--co-key-ink)}
@media (prefers-reduced-motion:reduce){.dyn,.dyn-a,.dyn-b{transition:opacity var(--co-dur-short) linear}.dyn-b,.dyn.is-done .dyn-a{transform:none}}

/* ---------- Tracking links and warehouse notes on parcels ---------- */
.trk-link{color:var(--co-focus);font:500 .8rem/1.4 var(--co-font-body);text-underline-offset:3px}
.trk-link:hover{text-decoration-thickness:2px}
.trk-link:focus-visible{outline:2px solid var(--co-focus);outline-offset:2px}
.wh-line{display:block;color:var(--slate);font:400 .8rem/1.4 var(--co-font-body)}

/* ---------- Photo offer on parcels (paid first) ---------- */
.photo-offer{display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;border-radius:12px;border:1px dashed color-mix(in oklab,var(--co-key) 60%,transparent);
  background:color-mix(in oklab,var(--co-key) 10%,transparent);font:400 .85rem/1.4 var(--co-font-body);color:var(--ink)}
.photo-offer svg{flex:none;width:20px;height:20px;color:var(--co-key)}
.photo-offer span{flex:1;min-width:0}
.photo-offer.is-on{border-style:solid;border-color:color-mix(in oklab,var(--co-focus) 50%,transparent);background:color-mix(in oklab,var(--co-focus) 8%,transparent)}
.photo-offer.is-on svg{color:var(--co-focus)}
.key--sm{min-height:32px;padding:0 12px;font-size:.82rem;border-radius:8px;flex:none}
@media (max-width:640px){.photo-offer{flex-wrap:wrap}.photo-offer .key{width:100%}}

/* ---------- Back office: parcel list and packing estimate ---------- */
.wp-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.wp-head h3{margin:0}
.wp-q{min-width:min(100%,320px)}
.wp-tabs{margin:12px 0 4px;flex-wrap:wrap}
.wp-n{font:500 .75rem/1 var(--co-font-mono);color:var(--slate)}
.wp-tbl td{vertical-align:top}
.wp-tbl td b,.wp-tbl td small{display:block}
.wp-tbl td small{margin-top:4px;color:var(--slate);font:400 .8rem/1.35 var(--co-font-body)}
.wp-tbl td small.mono{font-family:var(--co-font-mono)}
.wp-id{white-space:nowrap;font:600 .9rem/1.3 var(--co-font-mono)}
.wp-st{min-width:150px}
.wp-photo{background:color-mix(in oklab,var(--co-key) 7%,transparent)}
.pk{display:grid;gap:8px;margin:12px 0}
.pk-meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.pk-meter i{display:block;height:100%;background:var(--co-ok);transform-origin:left;transition:transform var(--co-dur-short) var(--co-ease-out)}
.pk-facts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font:400 .85rem/1.4 var(--co-font-body);color:var(--mist)}
.pk-facts b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.pk-meter i{transition:none}}

/* ---------- Phones ---------- */
@media (max-width:640px){
  .pa-tbl thead{display:none}
  .pa-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .pa-tbl td{display:block;padding:0;border:0}
  .pa-tbl td:nth-child(2){grid-column:1}
  .pa-tbl td:nth-child(3){grid-column:1;color:var(--slate);font-size:.85rem}
  .pa-tbl td:nth-child(4){grid-column:2;grid-row:1 / span 3;align-self:center}
  .wp-tbl thead{display:none}
  .wp-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .wp-tbl td{display:block;padding:0;border:0}
  .wp-tbl td:nth-child(3),.wp-tbl td:nth-child(8){grid-column:1 / -1}
  .co-side{order:-1}
  .rp{max-width:320px}
  .rp-readout{font-size:1.25rem}
}
@media (min-width:641px){.wp-tbl td:nth-child(3){min-width:220px}.wp-tbl td:nth-child(4){white-space:nowrap}.wp-tbl td:nth-child(1){min-width:150px}}

/* ---------- Clickable rows (bills), terms tick ---------- */
.row-link{cursor:pointer;transition:background-color var(--co-dur-short) var(--co-ease-out)}
.row-link:hover{background:color-mix(in oklab,var(--co-focus) 8%,transparent)}
.row-link:focus-visible{outline:2px solid var(--co-focus);outline-offset:-2px}
.terms-tick{display:flex;gap:10px;align-items:flex-start;font:400 .95rem/1.5 var(--co-font-body);color:var(--ink);cursor:pointer}
.terms-tick input{margin-top:4px;width:18px;height:18px;flex:none}
.terms-tick a{color:var(--co-focus)}
.terms-gate{max-width:640px}
@media (prefers-reduced-motion:reduce){.row-link{transition:none}}
.bp{padding:4px 0}.bp + .bp{border-top:1px dashed var(--line)}
.bp small{display:block;color:var(--slate);font-size:.78rem}

/* ---------- Waiting for approval ---------- */
.wait-approve{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:8px 12px;border-radius:12px;border:1px solid color-mix(in oklab,var(--co-focus) 40%,transparent);font:400 .85rem/1.4 var(--co-font-body)}
.wait-approve b{color:var(--ink)}
.wait-approve span{color:var(--mist)}
.wait-approve.is-late{border-color:var(--co-bad)}
.wait-approve.is-late b{color:var(--co-bad)}
.acc-wait{display:block;margin:0 0 12px;padding:12px 16px;border-radius:12px;background:color-mix(in oklab,var(--co-key) 14%,transparent);border:1px solid color-mix(in oklab,var(--co-key) 50%,transparent);color:var(--ink);text-decoration:none;font:400 .95rem/1.4 var(--co-font-body)}
.acc-wait:hover{background:color-mix(in oklab,var(--co-key) 20%,transparent)}
.acc-wait:focus-visible{outline:2px solid var(--co-focus);outline-offset:2px}

/* ---------- Next shipment parcel list and detail ---------- */
.np-tbl td small{display:block;color:var(--slate);font-size:.78rem}
.pd-wrap{position:fixed;inset:0;z-index:9000;display:grid;justify-items:end;background:var(--co-shade)}
.pd{width:min(520px,100%);height:100%;overflow:auto;background:var(--deep);border-left:1px solid var(--line-strong);padding:24px}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.pd-head h3{margin:0;overflow-wrap:anywhere;min-width:0}
.pd-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.pd-dl dt{color:var(--slate);font:500 .85rem/1.4 var(--co-font-body)}
.pd-dl dd{margin:0;color:var(--ink);font:400 .9rem/1.4 var(--co-font-body);overflow-wrap:anywhere}

/* ---------- Insurance calculator (Shipping guide) and fixed item weight option ---------- */
.ins-calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px 16px;align-items:end;margin-bottom:16px}
.ins-out{display:grid;gap:4px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:12px}
.ins-out span,.ins-out small{color:var(--slate);font-size:.85rem}
.ins-out b{font-size:1.5rem;color:var(--ink)}
.ins-rules{margin:0;padding-left:20px;display:grid;gap:8px}
.ins-rules li{line-height:1.5}
.fx-wt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:8px 16px;align-items:end;margin:8px 0}

/* ---------- We buy for you page ---------- */
.buy-item{display:grid;gap:4px;margin-bottom:4px}
.buy-item b{overflow-wrap:anywhere;min-width:0}

/* Terms asterisk next to "all-in price up to Kampala" */
.tc{color:var(--cyan);text-decoration:none;font-weight:600;padding:0 2px}
.tc:hover{text-decoration:underline}
.tc:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.photo-pick{margin-bottom:12px}

/* Terms: version and date at the end, small */
.legal-ver{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);color:var(--slate);font-size:.8rem}

/* ---------- Picture ads (Announcements with a picture) ---------- */
.modal.pop .box.pop-box.ann-pic{padding:0 0 20px;max-width:min(560px,100%);overflow:auto}
.ann-pic .ann-img{display:block;width:100%;height:auto;max-height:calc(100vh - 160px);object-fit:contain;border-radius:28px 28px 0 0;background:var(--panel)}
.ann-pic .pop-x{z-index:2;background:var(--panel);box-shadow:0 2px 10px var(--co-shade)}
.ann-pic .pop-lead{margin:14px 20px 0}
.ann-pic .pop-acts{margin:14px 20px 0}
.ann-pic a:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.ad-pic{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ad-pic img{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.ad-cc{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 12px}
.app-tip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.app-tip p{margin:4px 0 0}

/* ---------- Back office menu on phones: one dropdown ---------- */
.adm-drop{display:none}
@media (max-width:900px){
  .adm .adm-nav{display:none}
  .adm-drop{display:block;position:sticky;top:76px;z-index:30;margin-bottom:12px}
  .adm-drop summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:14px;
    background:var(--panel);color:var(--ink);font-weight:600;cursor:pointer}
  .adm-drop summary::-webkit-details-marker{display:none}
  .adm-drop summary svg{width:18px;height:18px;flex:none}
  .adm-drop summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .adm-drop summary .chev{transition:transform .2s ease}
  .adm-drop[open] summary .chev{transform:rotate(180deg)}
  .adm-drop summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  .adm-drop nav{position:absolute;left:0;right:0;top:calc(100% + 6px);display:grid;gap:2px;padding:8px;max-height:70vh;overflow:auto;
    border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);box-shadow:0 18px 40px var(--co-shade)}
  .adm-drop nav a,.adm-drop nav .acc-out{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--mist);font-weight:600;background:none;border:0;width:100%;text-align:left}
  .adm-drop nav a.active{background:var(--blue);color:var(--on-accent)}
  .adm-drop nav svg{width:18px;height:18px;flex:none}
  .adm-drop nav a:focus-visible,.adm-drop nav .acc-out:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){.adm-drop summary .chev{transition:none}}
.field-tip{display:block;margin-top:6px;font-size:.8rem;line-height:1.4}

/* back office menu: main categories (open and close) with their sections */
.adm-groups{display:grid;gap:2px}
.adm-grp summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font-weight:700;font-size:.92rem}
.adm-grp summary::-webkit-details-marker{display:none}
.adm-grp summary svg{width:18px;height:18px;flex:none}
.adm-grp summary span{flex:1}
.adm-grp summary .chev{width:16px;height:16px;color:var(--slate);transition:transform .2s ease}
.adm-grp[open] summary .chev{transform:rotate(180deg)}
.adm-grp summary:hover{background:var(--panel-2)}
.adm-grp summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.adm-grp-items{display:grid;gap:2px;margin:2px 0 6px 18px;padding-left:8px;border-left:1px solid var(--line)}
.adm-nav .adm-grp-items a{padding:8px 10px;font-size:.88rem}
.adm-grp-h{margin:10px 12px 2px;font:600 .72rem var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.adm-crumb{margin:0 0 2px;font:600 .72rem var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
@media (prefers-reduced-motion:reduce){.adm-grp summary .chev{transition:none}}
@media (min-width:901px){body.backoffice .adm{grid-template-columns:250px minmax(0,1fr)}}   /* wide screens only: phones get one column with the dropdown menu */

/* Save mark next to a Save button */
.save-mark{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0 12px;font-size:.88rem;font-weight:600;vertical-align:middle}
.save-mark[data-state="saving"]{color:var(--slate)}
.save-mark[data-state="ok"]{color:var(--ok)}
.save-mark[data-state="ok"]::before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok);color:var(--on-accent);font-size:.75rem}
.save-mark[data-state="err"]{color:var(--bad)}

/* ---------- Character next to a page title (Shipping cost) ---------- */
.sec-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
.sec-row .sec-head{margin-bottom:clamp(24px,4vw,44px)}
.sec-art{width:clamp(150px,16vw,220px);height:auto;margin-right:clamp(0px,4vw,64px);animation:pop-float 5s ease-in-out infinite}
@media (max-width:760px){.sec-row{grid-template-columns:1fr}.sec-art{display:none}}
@media (prefers-reduced-motion:reduce){.sec-art{animation:none}}

/* ---------- Picture ad, text beside the picture ---------- */
.modal.pop .box.pop-box.ann-pic.ann-side{max-width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;text-align:center}
.ann-side .ann-text{display:grid;align-content:center;gap:4px;padding:40px 32px}
.ann-side .ann-text h2{margin:0 0 8px}
.ann-side .ann-text .pop-lead{margin:8px 0}
.ann-side .ann-text .pop-acts{margin:16px 0 0;justify-content:center}
.ann-side .ann-media{padding:12px}
.ann-side .ann-img{border-radius:18px;max-height:calc(100vh - 80px);height:100%;object-fit:cover}
@media (max-width:760px){
  .modal.pop .box.pop-box.ann-pic.ann-side{grid-template-columns:1fr}
  .ann-side .ann-media{order:-1;padding:0}
  .ann-side .ann-img{border-radius:28px 28px 0 0;max-height:45vh}
  .ann-side .ann-text{padding:20px}
}

/* Home: register button under the four pictures; returning-client greeting */
.cast-cta{display:grid;justify-items:center;gap:12px;margin:8px 0 32px}
.cast-cta a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:.92rem}
.chip.hello b{font-weight:700}
b > i.n{font:inherit;font-style:normal}
.why-abroad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.why-abroad li{display:grid;gap:6px}
.why-abroad b{font-size:1.05rem;color:var(--ink)}
.why-abroad span{color:var(--slate)}

/* Calculator: insurance option and its own line */
.ins-pick{margin-top:12px;align-items:flex-start}
.ins-pick input{width:22px;height:22px;flex:none;accent-color:var(--blue);margin-top:2px}
.ins-pick .muted{font-size:.88rem}
.ins-line small{display:block;color:var(--slate);font-size:.8rem;font-weight:400;margin-top:2px}
.total-line{font-weight:700}
.ins-how{display:inline-block;margin-top:4px;color:var(--cyan);font-weight:600;font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.cmp-go{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rate-ref{margin:6px 0 10px;color:var(--slate);font-size:.84rem;line-height:1.5}
.rate-ref a{color:var(--cyan);font-weight:600;white-space:nowrap}
.how-price h2{margin-bottom:12px}
#how-price,#insurance{scroll-margin-top:96px}

/* Shipping guide: a friendly character on each question; insurance in plain words, calculator on one line */
.acc-q{display:flex;align-items:center;gap:12px}
.acc-ic{width:60px;height:60px;flex:none;object-fit:contain}
.ins-short{margin:0 0 14px;font-size:1rem;line-height:1.55}
.ins-calc{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px}
.ins-calc input{width:110px;min-height:40px}
.ins-calc label{font-weight:600}
.ins-eq b{font-size:1.15rem;color:var(--ink)}
.ins-eq small{color:var(--slate)}
.ins-easy{margin:0;padding-left:18px;display:grid;gap:8px;line-height:1.5}
.ins-faq{margin:0;display:grid;gap:14px}
.ins-faq dt{font-weight:700;color:var(--ink)}
.ins-faq dd{margin:4px 0 0;color:var(--mist);line-height:1.55}
.ins-more{margin:14px 0 0}
.ins-more a{color:var(--cyan);font-weight:600}

/* ---------- Header menus: a clean list and one friendly feature card (no icon tiles) ---------- */
.nav .mega{grid-template-columns:minmax(0,1fr) 220px;gap:8px;padding:10px;min-width:620px;border-radius:20px}
.nav .mega .ic{display:none}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
.nav .mega .mega-links a{display:block;padding:12px 14px;border-radius:12px;border-left:3px solid transparent;transition:background-color .15s ease,border-color .15s ease}
.nav .mega .mega-links a:hover,.nav .mega .mega-links a:focus-visible{background:var(--panel-2);border-left-color:var(--amber)}
.nav .mega .mega-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.nav .mega .mega-links b{font-size:.95rem;font-weight:600;color:var(--ink)}
.nav .mega .mega-links small{display:block;margin-top:2px;font-size:.82rem;line-height:1.4;color:var(--slate)}
.nav .mega .mega-feat{display:grid;grid-template-columns:1fr;align-content:start;justify-items:start;text-align:left;gap:6px;padding:16px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);transition:border-color .15s ease}
.mega-feat:hover,.mega-feat:focus-visible{border-color:var(--amber)}
.mega-feat:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nav .mega .mega-feat img{width:96px;height:96px;margin:-4px 0 4px}
.mega-feat b{font-size:1rem;color:var(--ink)}
.mega-feat small{font-size:.84rem;line-height:1.45;color:var(--slate)}
.mega-cta{margin-top:6px;font-weight:700;font-size:.88rem;color:var(--amber)}
@media (prefers-reduced-motion:reduce){.nav .mega .mega-links a,.mega-feat{transition:none}}

/* ---------- Warehouse countries with flags ---------- */
.flag{width:24px;height:16px;border-radius:3px;flex:none;box-shadow:0 0 0 1px var(--line);object-fit:cover}
#c-lane button,#a-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#p-tabs{display:flex;flex-wrap:wrap;gap:10px}
#p-tabs .org-card{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);color:var(--ink);text-align:left;transition:border-color .15s ease,background-color .15s ease}
#p-tabs .org-card .flag{width:36px;height:24px;border-radius:4px}
#p-tabs .org-card b{display:block;font-size:1rem}
#p-tabs .org-card small{display:block;color:var(--slate);font-size:.8rem}
#p-tabs .org-card:hover{border-color:var(--amber)}
#p-tabs .org-card[aria-selected="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,var(--panel))}
#p-tabs .org-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.p-unit{margin:0 0 10px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){#p-tabs .org-card{transition:none}}

/* ---------- Example prices as cards ---------- */
#p-examples{gap:10px!important}
.ex-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.ex-card .flag{width:36px;height:24px;border-radius:4px}
.ex-card:hover{border-color:var(--amber);transform:translateY(-1px)}
.ex-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ex-t b{display:block;font-size:1rem}
.ex-t small{display:block;color:var(--slate);font-size:.82rem;line-height:1.4}
.ex-p{display:grid;justify-items:end}
.ex-p b{font-size:1.25rem;color:var(--ink)}
.ex-p small{color:var(--slate);font-size:.78rem}
.ex-hint{margin:4px 0 0;font-size:.82rem}
@media (prefers-reduced-motion:reduce){.ex-card{transition:none}.ex-card:hover{transform:none}}
#p-fees th{width:38%;text-align:left;vertical-align:top;font-weight:600;color:var(--ink);padding-right:16px}
#p-fees td{font-family:inherit;text-align:left;color:var(--mist);line-height:1.5}

/* ---------- Track a package ---------- */
.trk-art{position:relative;margin-right:clamp(0px,4vw,64px)}
.trk-art img{width:clamp(140px,15vw,190px);height:auto}
.trk-plane{position:absolute;top:-6px;left:-36px;width:56px;height:56px;color:var(--amber);transform:rotate(-18deg);animation:pop-float 4s ease-in-out infinite}
@media (max-width:760px){.trk-art{display:none}}
@media (prefers-reduced-motion:reduce){.trk-plane{animation:none}}
.trk-gate h3{margin-bottom:6px}
.trk-hit h3{margin:10px 0}
.trk-steps{margin:16px 0 0;padding-left:20px;display:grid;gap:8px}
.trk-steps small{display:block;color:var(--slate)}
.trk-carriers{margin-top:28px}
.trk-carriers ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.trk-carriers li{padding:10px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);font-weight:700;color:var(--ink);letter-spacing:.01em}

/* ---------- Home: Europe is new ---------- */
.new-chip{background:var(--amber);color:var(--amber-ink);border-color:transparent;font-weight:700;margin-bottom:10px}
.eu-flag{width:36px;height:24px;margin-right:12px;vertical-align:-2px}
.eu-stores{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.eu-stores li{padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;font-weight:600;font-size:.86rem;color:var(--ink)}
.eu-from{margin:12px 0 0;color:var(--mist)}
.eu-from b{color:var(--ink);font-size:1.1rem}
.trk-gate .cta,.trk-hit .cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Home: where can I shop (moving store lines, one per region) ---------- */
.st-lines{display:grid;gap:12px}
.st-line{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.st-line .flag{width:36px;height:24px;border-radius:4px}
.st-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 6%,var(--ink) 94%,transparent)}
.st-track ul{list-style:none;margin:0;padding:0 6px 0 0;display:flex;gap:10px;flex:none;animation:st-move 40s linear infinite}
.st-line[data-cc="EU"] .st-track ul{animation-duration:46s;animation-direction:reverse}
.st-line[data-cc="AE"] .st-track ul{animation-duration:34s}
.st-track:hover ul,.st-track:focus-within ul{animation-play-state:paused}
.st-track a{display:block;padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;font:700 .95rem/1 var(--f-display, inherit);color:var(--ink);white-space:nowrap;transition:border-color .15s ease}
.st-track a:hover{border-color:var(--amber)}
.st-track a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes st-move{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.st-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.st-track ul{animation:none}.st-track ul[aria-hidden]{display:none}}
/* Free addresses: flag and a character for each country */
.pass-h{align-items:center}
.pass-h .flag{width:48px;height:32px;border-radius:6px}
.pass-art{width:96px;height:96px;margin-left:auto}
@media (max-width:520px){.pass-art{width:64px;height:64px}}
.ph-box{margin:14px 0;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px}
.terms-gate{max-width:720px}
.terms-gate .chip{margin-bottom:8px}
.terms-gate h3{margin:0 0 8px}
.tg-list{margin:10px 0 16px}
/* the account side menu stays under the header while the page scrolls */
div.acc{min-height:calc(100vh - 160px)}

/* ---------- Home: big welcome for signed-in clients ---------- */
.hello-banner{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:12px 20px 12px 12px;border:1px solid var(--line-strong);border-radius:20px;background:var(--panel);width:fit-content;max-width:100%}
.hello-banner[hidden]{display:none}
.hello-banner img{width:88px;height:88px;flex:none;animation:hello-wave 2.4s ease-in-out 1}
.hello-banner p{margin:0;font:700 clamp(1.3rem,2.6vw,1.9rem)/1.2 var(--f-display, inherit);color:var(--ink)}
.hello-banner b{color:var(--amber)}
.hello-banner small{display:block;margin-top:4px;font:400 .95rem/1.4 var(--f-body, inherit);color:var(--slate)}
@keyframes hello-wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.hello-banner img{animation:none}}
@media (max-width:520px){.hello-banner img{width:64px;height:64px}}

/* ---------- Address cards: smaller, clearer values; phone on one line; clear Copied state ---------- */
.addr-card h3 .flag{width:30px;height:20px;border-radius:3px}
.addr-card dl>div{grid-template-columns:88px minmax(0,1fr) auto;gap:6px 10px}
.addr-card dt{font-size:.8rem}
.addr-card dd{font-size:.92rem;line-height:1.35}
.addr-card .is-phone dd{white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.addr-card .dyn{height:30px}
.dyn.is-done{background:color-mix(in srgb,var(--co-ok) 16%,transparent);font-weight:700}
.dyn--primary{min-width:190px;justify-content:center}
.dyn--primary .dyn-tx{min-width:9.5em;text-align:center}
.addr-acts .dyn--primary.is-done,.dyn.dyn--primary.is-done{background:var(--co-ok);border-color:var(--co-ok);color:var(--co-key-ink)}
@media (max-width:520px){
  .addr-card dl>div{grid-template-columns:76px minmax(0,1fr) auto}
  .addr-card .dyn:not(.dyn--primary) .dyn-tx{display:none}       /* phones: icon-only copy buttons, the label is in aria-label */
  .addr-card .dyn:not(.dyn--primary){width:34px;padding:0;justify-content:center}
  .addr-acts .dyn--primary{flex:1 1 100%}
}

/* ---------- Hero title on two lines; store bar right under the hero (one moving row, all regions) ---------- */
.hero h1 .h1-line{display:block}
.brand-bar{padding:18px 0 28px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent)}
.bb-h{margin:0 0 14px;font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;color:var(--mist);text-align:center}
.bb-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 5%,var(--ink) 95%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 5%,var(--ink) 95%,transparent)}
.bb-track ul{list-style:none;margin:0;padding:0 14px 0 0;display:flex;gap:14px;flex:none;animation:st-move 60s linear infinite}
.bb-track:hover ul,.bb-track:focus-within ul{animation-play-state:paused}
.bb-track a{display:flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);font:700 1.05rem/1 var(--f-display, inherit);color:var(--ink);white-space:nowrap;transition:border-color .15s ease}
.bb-track a:hover{border-color:var(--amber)}
.bb-track a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bb-track .flag{width:20px;height:14px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.bb-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.bb-track ul{animation:none}.bb-track ul[aria-hidden]{display:none}}

/* Store bar tiles: the store's own icon, its name and the region flag */
.bb-track a{gap:12px;padding:10px 18px 10px 10px;background:var(--panel)}
.bb-logo{width:40px;height:40px;border-radius:10px;background:var(--on-accent);padding:4px;object-fit:contain}
.bb-name{font-size:1.02rem}
.bb-track a .flag{width:18px;height:12px;opacity:.9}
#p-fees td a{color:var(--cyan);font-weight:600}
.cast figcaption span span{display:inline}
.trk-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:10px 0 0}
.trk-list a{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.trk-list a:hover{border-color:var(--cyan);transform:translateY(-1px)}
.trk-list a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;transition:none}
.trk-logo{width:32px;height:32px;border-radius:8px;background:var(--on-accent);padding:3px;object-fit:contain}
@media (prefers-reduced-motion:reduce){.trk-list a{transition:none}.trk-list a:hover{transform:none}}
.trk-carriers .trk-list li{border:0;padding:0;background:none;border-radius:0}
/* Delivery within Uganda (Rates and fees) */
.ugd{margin-top:28px}
.ugd-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.ugd-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 4px}
.ugd-head img{flex:none}
.ugd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ugd-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px;display:grid;gap:6px;align-content:start;min-width:0}
.ugd-card h3{font-size:1.02rem;margin:0}
.ugd-price{font-size:1.5rem;font-weight:700;color:var(--amber-text);margin:2px 0}
.ugd-price .muted{font-size:.85rem;font-weight:400}
.ugd-card p{margin:0}
@media (max-width:560px){.ugd-head img{width:64px;height:64px}}
/* Calculator: several delivery choices wrap as a grid of buttons */
#c-del.seg{display:grid;grid-auto-flow:row;grid-auto-columns:auto;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:6px;overflow:visible;width:100%}
#c-del.seg button{white-space:normal;text-align:left;line-height:1.3;padding:10px 12px;border-radius:10px}
/* Store bar: one moving row per country, with a label card on the left */
.bb-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:center;max-width:1440px;margin:0 auto 12px;padding:0 16px}
.bb-row:last-child{margin-bottom:0}
.bb-lab{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line-strong);border-radius:14px;background:var(--panel-2);color:var(--ink);text-decoration:none;transition:border-color .15s ease}
.bb-lab:hover{border-color:var(--amber)}
.bb-lab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;transition:none}
.bb-lab .flag{grid-row:span 2;width:28px;height:20px;border-radius:3px}
.bb-lab span{font:600 1.1rem/1.1 var(--f-display)}
.bb-lab small{color:var(--cyan);font-size:.85rem}
.bb-row .bb-track ul{animation-duration:70s}
.bb-rev .bb-track ul{animation-direction:reverse;animation-duration:80s}
@media (max-width:720px){.bb-row{grid-template-columns:minmax(0,1fr);gap:8px}.bb-lab{grid-template-columns:auto auto 1fr;padding:8px 12px}.bb-lab .flag{grid-row:auto}.bb-lab small{justify-self:end}}
@media (prefers-reduced-motion:reduce){.bb-rev .bb-track ul{animation:none}}
.bb-track ul{align-items:center}
.bb-track li{flex:none}
.bb-row{grid-template-columns:230px minmax(0,1fr)}
.bb-lab small{white-space:nowrap}
@media (max-width:720px){.bb-row{grid-template-columns:minmax(0,1fr)}}
/* Parcel cards (My parcels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin-top:14px}
.pc{display:grid;gap:14px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel);min-width:0;transition:border-color .15s ease,box-shadow .15s ease}
.pc.sel{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.pc-h{display:flex;align-items:flex-start;gap:12px}
.pc-pick{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:2px}
.pc-pick input{width:22px;height:22px;accent-color:var(--cyan);cursor:pointer}
.pc-pick input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pc-t{flex:1;min-width:0}
.pc-t h3{font-size:1.15rem;overflow-wrap:break-word}
.pc-id{color:var(--slate);font-size:.82rem}
.pc-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pc-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.pc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0;padding:14px 0;border-block:1px solid var(--line)}
.pc-facts div{min-width:0}
.pc-facts dt{font-size:.78rem;color:var(--slate);margin-bottom:2px}
.pc-facts dd{margin:0;font-size:.95rem;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.pc-facts dd .flag{width:18px;height:12px;border-radius:2px}
.pc-facts div:has(.mono){grid-column:1/-1}
.pc-facts dd a{font-weight:500;color:var(--cyan)}
.pc-est{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:12px 14px;border-radius:12px;background:var(--panel-2)}
.pc-est span{color:var(--mist);font-size:.9rem}
.pc-est b{font:700 1.5rem/1 var(--f-display);color:var(--ink)}
.pc-est small{grid-column:1/-1;color:var(--slate);font-size:.82rem}
.pc-est small a{color:var(--cyan)}
.pc-time{display:grid;gap:8px}
.pc-time-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pc-time-t b{color:var(--ink);font-size:.95rem}
.pc-time-t span{color:var(--slate);font-size:.8rem}
.pc-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pc-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--cyan)}
.pc-time.is-late .pc-time-t b{color:var(--co-bad)}
.pc-time.is-late .pc-bar i{background:var(--co-bad)}
.pc-a{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pc-a .key{flex:1 1 auto;justify-content:center;text-align:center;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pc{transition:none}}
details.how-ship summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}
details.how-ship summary::-webkit-details-marker{display:none}
details.how-ship summary::after{content:"+";margin-left:auto;font:500 1.2rem var(--f-mono);color:var(--cyan)}
details.how-ship[open] summary::after{content:"-"}
details.how-ship summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
details.how-ship ol{margin-top:12px}
/* Amani, the floating helper (bottom left) */
.amani{position:fixed;left:clamp(12px,2vw,24px);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:71}
body[data-route="admin"] .amani{display:none}
.amani-fab{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:0 10px 30px color-mix(in srgb,var(--void) 50%,transparent);transition:transform .18s ease,border-color .18s ease}
.amani-fab:hover{transform:translateY(-2px);border-color:var(--cyan)}
.amani-fab:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;transition:none}
.amani-fab img{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 14%,var(--panel-2))}
.amani-fab span{display:grid;text-align:left;line-height:1.15}
.amani-fab b{font:600 1rem/1.1 var(--f-display)}
.amani-fab small{color:var(--cyan);font-size:.8rem}
.amani.open .amani-fab{display:none}
.amani-panel{width:min(380px,calc(100vw - 24px));height:min(560px,calc(100dvh - 110px));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;border:1px solid var(--line-strong);border-radius:20px;background:var(--deep);box-shadow:0 20px 60px color-mix(in srgb,var(--void) 60%,transparent);overflow:hidden;transform-origin:bottom left;animation:amani-in .2s ease-out}
.amani-panel[hidden]{display:none}
@keyframes amani-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.amani-h{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 30%,var(--panel)),var(--panel));border-bottom:1px solid var(--line)}
.amani-h img{border-radius:50%;background:color-mix(in srgb,var(--cyan) 14%,var(--panel-2));flex:none}
.amani-h div{flex:1;display:grid;min-width:0}
.amani-h b{font:600 1.1rem/1.1 var(--f-display);color:var(--ink)}
.amani-h small{color:var(--mist);font-size:.8rem}
.amani-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.amani-x:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.amani-log{overflow-y:auto;padding:14px;display:grid;gap:10px;align-content:start}
.amani-m{max-width:88%;padding:10px 12px;border-radius:14px;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
.amani-m.bot{background:var(--panel-2);color:var(--ink);border-bottom-left-radius:4px}
.amani-m.me{justify-self:end;background:var(--blue);color:var(--on-accent);border-bottom-right-radius:4px}
.amani-m a{color:var(--cyan)}
.amani-m.typing{color:var(--slate);letter-spacing:.2em}
.amani-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.amani-links a{padding:5px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:.82rem;text-decoration:none}
.amani-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px}
.amani-chips:empty{display:none}
.amani-chips button{padding:6px 10px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--mist);font-size:.8rem;cursor:pointer}
.amani-chips button:hover{border-color:var(--cyan);color:var(--ink)}
.amani-chips button:focus-visible,.amani-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.amani-f{display:flex;gap:8px;padding:12px 14px 6px}
.amani-f input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;font-size:.95rem}
.amani-f input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.amani-note{margin:0;padding:0 14px 10px;color:var(--slate);font-size:.72rem}
.amani-note a{color:var(--slate)}
@media (max-width:640px){.amani-fab{padding:4px}.amani-fab span{display:none}.amani-fab img{width:50px;height:50px}.amani-panel{width:calc(100vw - 24px)}}
@media (prefers-reduced-motion:reduce){.amani-panel{animation:none}.amani-fab{transition:none}.amani-fab:hover{transform:none}}
/* Help answers open under the question */
.kb-wrap{display:grid}
.kb-item{cursor:pointer;position:relative;padding-right:44px}
.kb-item::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:500 1.3rem var(--f-mono);color:var(--cyan)}
.kb-item[aria-expanded="true"]{border-color:var(--cyan);border-bottom-left-radius:0;border-bottom-right-radius:0}
.kb-item[aria-expanded="true"]::after{content:"-"}
.kb-item:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.kb-ans{padding:14px 16px;border:1px solid var(--cyan);border-top:0;border-radius:0 0 12px 12px;background:var(--panel-2);color:var(--mist);line-height:1.55}
/* Store cards (design preview, ?stores=cards) */
.store-cards{padding:22px 0 34px;border-block:1px solid var(--line)}
.store-cards[hidden]{display:none}
.sc-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 4%,var(--ink) 96%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 4%,var(--ink) 96%,transparent)}
.sc-track ul{list-style:none;margin:0;padding:8px 20px 14px 0;display:flex;gap:20px;flex:none;animation:st-move 90s linear infinite}
.sc-track:hover ul,.sc-track:focus-within ul{animation-play-state:paused}
.sc-track li{flex:none}
.sc{display:grid;grid-template-rows:200px 86px;width:300px;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:0 14px 30px color-mix(in srgb,var(--void) 45%,transparent);transition:transform .2s ease,border-color .2s ease}
.sc:hover{transform:translateY(-4px);border-color:var(--amber)}
.sc:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;transition:none}
.sc-img{position:relative;display:block;overflow:hidden}
.sc-ch{position:absolute;left:50%;bottom:-18px;width:170px;height:170px;transform:translateX(-50%)}
.sc-tag{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--ink);color:var(--void);font:600 .8rem/1.2 var(--f-body)}
.sc-tag img{border-radius:2px}
.sc-cat{position:absolute;left:12px;top:12px;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink);font-size:.75rem;background:color-mix(in srgb,var(--void) 30%,transparent)}
.sc-name{display:grid;place-items:center;font:600 1.45rem/1 var(--f-display);letter-spacing:-.02em;padding:0 12px;text-align:center}
.sc--fashion .sc-img{background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--amber) 55%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--blue) 70%,var(--void)),color-mix(in srgb,var(--cyan) 35%,var(--void)))}
.sc--tech .sc-img{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--cyan) 55%,transparent),transparent 55%),linear-gradient(160deg,var(--deep),color-mix(in srgb,var(--blue) 60%,var(--void)))}
.sc--home .sc-img{background:radial-gradient(circle at 75% 25%,color-mix(in srgb,var(--cyan) 40%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--amber) 70%,var(--void)),color-mix(in srgb,var(--amber) 25%,var(--void)))}
.sc--beauty .sc-img{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--amber) 45%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--blue) 40%,var(--amber) 30%),color-mix(in srgb,var(--blue) 70%,var(--void)))}
.sc--sport .sc-img{background:radial-gradient(circle at 70% 70%,color-mix(in srgb,var(--amber) 45%,transparent),transparent 50%),linear-gradient(160deg,color-mix(in srgb,var(--cyan) 60%,var(--void)),var(--deep))}
@media (max-width:640px){.sc{width:240px;grid-template-rows:160px 72px}.sc-ch{width:140px;height:140px}.sc-name{font-size:1.2rem}}
@media (prefers-reduced-motion:reduce){.sc-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.sc-track ul{animation:none}.sc-track ul[aria-hidden]{display:none}.sc{transition:none}.sc:hover{transform:none}}
/* Parcels grouped by country, Ship and pay, more services, per item checkout */
.pc-group{margin-top:18px}
.pc-group-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pc-group-h h3{display:flex;align-items:center;gap:10px;font-size:1.15rem}
.pc-group-h h3 .muted{font:400 .9rem var(--f-body)}
.pc-group-h .flag{border-radius:3px}
.pc--link{cursor:pointer}
.pc--link:hover{border-color:var(--cyan)}
.pc--link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pc-reqs{display:flex;flex-wrap:wrap;gap:6px}
.pc-more{position:relative}
.pc-more summary{list-style:none;cursor:pointer}
.pc-more summary::-webkit-details-marker{display:none}
.pc-menu{position:absolute;z-index:5;right:0;bottom:calc(100% + 6px);width:min(290px,80vw);display:grid;gap:4px;padding:6px;border:1px solid var(--line-strong);border-radius:14px;background:var(--deep);box-shadow:0 16px 40px color-mix(in srgb,var(--void) 60%,transparent)}
.pc-menu button{display:grid;gap:2px;text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:none;color:var(--ink);cursor:pointer;font:inherit}
.pc-menu button:hover{background:var(--panel-2)}
.pc-menu button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.pc-menu button span{color:var(--mist);font-size:.85rem}
.pc-menu button.armed{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.pc-menu button.armed span{color:var(--amber-text)}
.sp-exp{margin-top:12px}
.sp-items{display:grid;gap:10px;margin-top:16px}
.sp-item{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.sp-item.is-ins{border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
.sp-item-h{display:grid;gap:2px}
.sp-item-h .mono{font-size:.8rem}
.sp-inv{justify-self:start;cursor:pointer}
.sp-item .chip{justify-self:start}
/* Europe page: 4 steps with characters */
.eu-steps{margin:8px 0 28px;text-align:center}
.eu-steps h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:22px}
.eus-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px}
.eus{display:grid;gap:8px;justify-items:center;min-width:0}
.eus h3{display:flex;align-items:center;gap:8px;font-size:1.1rem}
.eus p{margin:0;color:var(--mist);max-width:34ch}
.eus-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--amber-ink);font:700 .9rem var(--f-display)}
.eus-fig{position:relative;width:220px;height:180px;margin:0}
.eus-ch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150px;height:150px}
.eus-ch--a{left:36%;width:130px;height:130px}
.eus-ch--b{left:70%;width:110px;height:110px;bottom:8px}
.eus-ch--c{left:62%}
.eus-ch--d{left:42%}
.eus-prop{position:absolute}
.eus-laptop{left:0;bottom:6px;width:96px}
.eus-bubble{right:6px;top:0;width:56px}
.eus-bags{left:2px;bottom:4px;width:62px}
.eus-boxes{left:0;bottom:0;width:96px}
.eus-gift{right:4px;bottom:4px;width:70px}
.p-dark{fill:var(--void)} .p-screen{fill:var(--blue)} .p-amber{fill:var(--amber)} .p-amber2{fill:var(--amber-60)} .p-blue{fill:var(--cyan)} .p-white{fill:var(--ink)}
.p-line{fill:color-mix(in srgb,var(--ink) 60%,transparent)} .p-box{fill:color-mix(in srgb,var(--amber) 55%,var(--deep));stroke:var(--void);stroke-width:2}
.p-tape{stroke:var(--void);stroke-width:3;fill:none} .p-stroke{fill:none;stroke:var(--void);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.eus-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.eus-wait .eus{opacity:0;transform:translateY(18px)}
.eus-in .eus{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.eus-in .eus:nth-child(2){transition-delay:.15s}.eus-in .eus:nth-child(3){transition-delay:.3s}.eus-in .eus:nth-child(4){transition-delay:.45s}
.eus-in .eus-prop{animation:eus-bob 3.2s ease-in-out infinite}
.eus-in .eus:nth-child(2) .eus-prop{animation-delay:.4s}.eus-in .eus:nth-child(3) .eus-prop{animation-delay:.8s}.eus-in .eus:nth-child(4) .eus-prop{animation-delay:1.2s}
@keyframes eus-bob{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.eus-wait .eus{opacity:1;transform:none}.eus-in .eus-prop{animation:none}}
.amani-links small{flex-basis:100%;color:var(--slate);font-size:.75rem}
.kb-ans a{color:var(--cyan)}
/* EU orbit: all 27 countries on two rings around the German hub */
.eu-orbit{width:300px;height:300px}
.eu-orbit::before{content:"";position:absolute;inset:80px;border-radius:50%;border:1px dashed var(--line)}
.eu-orbit i{width:30px;height:30px;margin:-15px;font-size:.62rem;transform:rotate(var(--a)) translate(72px) rotate(calc(var(--a) * -1))}
.eu-orbit i.o2{transform:rotate(var(--a)) translate(136px) rotate(calc(var(--a) * -1))}
@media (max-width:760px){.eu-orbit{width:260px;height:260px}.eu-orbit::before{inset:68px}.eu-orbit i{transform:rotate(var(--a)) translate(62px) rotate(calc(var(--a) * -1))}.eu-orbit i.o2{transform:rotate(var(--a)) translate(116px) rotate(calc(var(--a) * -1))}}
/* Checkout v2 */
.sp-back{margin-bottom:12px}
.sp-lines{margin-top:16px}
.sp-ins{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:12px}
.sp-ins h4{margin:0;font:600 1.1rem var(--f-display)}
.sp-lead{margin:0;color:var(--mist);font-size:.95rem}
.sp-item .switch{font-size:.95rem}
.sp-docs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-docs small{flex-basis:100%}
.sp-up{cursor:pointer}
.sp-terms{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--panel-2)}
.sp-terms .terms-tick span{font-size:.98rem;line-height:1.5;color:var(--ink)}
.sp-about{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--cyan) 6%,var(--panel))}
.sp-about img{flex:none}
.sp-about b{font:600 1rem var(--f-display)}
.sp-about ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--mist);font-size:.95rem}
.sp-about a{color:var(--cyan)}
.pc-ins{font-size:.9rem;flex-basis:100%}
/* Bill detail */
.bd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.bd-h h3{font-size:1.3rem}
.bd-sum{display:grid;gap:8px;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--panel-2)}
.bd-sum h4{margin:0 0 4px;font:600 1rem var(--f-display)}
.bd-sum div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.bd-sum div span{color:var(--mist)}
.bd-sum .bd-bal{padding-top:8px;border-top:1px solid var(--line)}
.bd-sum .bd-bal b{font:700 1.2rem var(--f-display);color:var(--amber-text)}
.bd-sum b.ok{color:var(--co-ok,var(--cyan))}
.bd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pa-ask td{background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--ink)}
[data-pa-x].armed{border-color:var(--co-bad);color:var(--co-bad)}
[data-pa-x]{font-family:var(--f-body)}
/* Insurance amounts and approval note */
.sp-vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex-basis:100%;margin-top:6px}
.sp-vals small{grid-column:1/-1}
.sp-48{margin:0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent);font-size:.95rem}
/* Pay methods */
.pm-pick{border:0;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.pm-pick legend{font-weight:600;margin-bottom:8px}
.pm{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);cursor:pointer}
.pm:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.pm:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm img{width:36px;height:36px;border-radius:8px;background:var(--on-accent);padding:3px;object-fit:contain}
.pm-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--panel-2)}
.pm-ic svg{width:20px;height:20px}
.pm span{display:grid;min-width:0}
.pm small{color:var(--slate);font-size:.78rem;overflow-wrap:anywhere}
.pm.is-off{opacity:.5;cursor:not-allowed}
.pm{position:relative}
.pm-box{margin-top:12px;padding:14px;border-radius:12px;background:var(--panel-2)}
.pm-box ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--mist)}
.pm-box p{margin:6px 0 0;color:var(--mist)}
.reg-pay td{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
/* Pay method logos: the provider's own icon; a text badge when it cannot load */
.pm-logo{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--ink);overflow:hidden}
.pm-logo img{position:absolute;inset:3px;width:38px;height:38px;object-fit:contain;z-index:1}
.pm-logo i{font:700 .7rem/1 var(--f-body);font-style:normal;color:var(--void)}
.pm small{line-height:1.45}
.pay-acts{margin-top:14px;justify-content:flex-start}
.tx-tag{display:inline-flex;gap:6px;align-items:baseline;margin-top:4px;padding:2px 8px;border-radius:8px;background:color-mix(in srgb,var(--cyan) 12%,transparent)}
/* Mobile money badges in the providers' colours (shown until their own icon loads) */
:root{--mtn-yellow:#ffcc00;--mtn-ink:#000;--airtel-red:#e40000;--airtel-ink:#fff}
.pm-logo--mtn{background:var(--mtn-yellow)}
.pm-logo--mtn i{color:var(--mtn-ink);font-size:.8rem;font-weight:800}
.pm-logo--airtel{background:var(--airtel-red)}
.pm-logo--airtel i{color:var(--airtel-ink)}
.pm-logo img{background:transparent}
.sms-d summary{cursor:pointer;font-size:.8rem;color:var(--cyan)}
.sms-d small{display:block;max-width:320px;white-space:pre-wrap;color:var(--mist)}
#pay-sms{width:100%;min-height:90px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;resize:vertical}
#pay-sms:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
/* Shipping guide: short answers as open cards, no toggle */
#v-guide details.gq{display:block;padding:18px 20px;margin:0}
#v-guide details.gq+details.gq{margin-top:0}
#v-guide details.gq summary{pointer-events:none;padding:0 0 10px;justify-content:flex-start}
#v-guide details.gq summary::after{content:none}
#v-guide details.gq .acc-q{font:600 1.05rem/1.35 var(--f-display)}
#v-guide details.gq .acc-ic{width:52px;height:52px}
#v-guide details.gq .body{padding:0 0 0 64px;font-size:.98rem;line-height:1.6}
#v-guide details.gq .body a{color:var(--cyan)}
#v-guide .gq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin-top:20px}
@media (max-width:560px){#v-guide details.gq .body{padding-left:0}}
#v-guide .gq-grid{align-items:start}
#v-guide .gq-grid details#insurance{grid-column:1/-1;padding:4px 20px}
#v-guide .gq-grid details#insurance .body{padding:0 0 18px}
/* Card estimate with insurance line */
.pc-est{display:grid;gap:6px}
.pc-est-l{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mist);font-size:.92rem}
.pc-ins-l{cursor:pointer}
.pc-ins-l input{width:18px;height:18px;margin:0 6px 0 0;vertical-align:-3px;accent-color:var(--cyan)}
.pc-ins-l input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pc-est-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.pc-est-t span{color:var(--ink);font-weight:600}
.pc-est-t b{font:700 1.5rem/1 var(--f-display);color:var(--ink)}
.pc-est{grid-template-columns:minmax(0,1fr)}
.pm-logo{width:52px;height:52px;background:transparent}
.pm-logo img{inset:0;width:52px;height:52px;border-radius:10px}
.bd-redo{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line)}.bd-redo .btn{justify-self:start}.bd-sum .bd-redo{display:grid}
/* Europe map: same dotted look as the hero globe. Stores all over Europe feed the German hub, one lane flies to Kampala. */
.eu-map{width:100%;max-width:420px;height:auto;justify-self:center;overflow:visible}
.m-dots circle{fill:var(--slate);opacity:.45}
.m-dots circle.m-eu{fill:var(--mist);opacity:.8}
.m-feed{fill:none;stroke:var(--cyan);stroke-width:1.6;opacity:.75;stroke-dasharray:4 5}
.m-city{fill:var(--cyan)}
.m-main-glow{fill:none;stroke:var(--cyan);stroke-width:9;opacity:.15;stroke-linecap:round}
.m-main{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round}
.m-hub{fill:var(--blue)} .m-hub-ring{fill:none;stroke:var(--blue);stroke-width:2;opacity:.5}
.m-ug{fill:var(--amber)} .m-ug-ring{fill:none;stroke:var(--amber);stroke-width:2;opacity:.6}
.m-lab rect{fill:var(--panel);stroke:var(--line-strong)}
.m-lab text{fill:var(--ink);font:600 13px var(--f-body)}
.m-lab-ug text{fill:var(--amber-text)}
.m-plane{offset-distance:55%;offset-rotate:auto}
.m-plane path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .m-feed{animation:m-flow 1.6s linear infinite;animation-delay:calc(var(--d) * -1)}
  .m-plane{animation:m-fly 6s ease-in-out infinite}
  .m-hub-ring,.m-ug-ring{animation:m-ring 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes m-flow{to{stroke-dashoffset:-18}}
@keyframes m-fly{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes m-ring{50%{transform:scale(1.35);opacity:.15}}
/* fields in a row keep their own height (a taller neighbour no longer stretches a select) */
.field{align-content:start}
.est-ins{cursor:pointer}.est-ins input{width:18px;height:18px;margin-right:6px;vertical-align:-3px;accent-color:var(--cyan)}.est-ins input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sum .sum-sub{display:block;font:400 .85rem/1.4 var(--f-body);color:var(--slate);margin-top:2px}

/* Loading: a plane flying in a circle instead of a spinning ring */
.scan span.plane-load,.amani-m .plane-load{position:relative;display:inline-block;width:26px;height:26px;border:0;border-radius:50%;animation:none;vertical-align:middle}
.plane-load::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px dashed var(--line-strong)}
.plane-load::after{content:"";position:absolute;left:50%;top:-3px;width:12px;height:12px;margin-left:-6px;background:var(--cyan);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20transform%3D%22rotate%2890%2012%2012%29%22%20d%3D%22M21%2016v-2l-8-5V3.5a1.5%201.5%200%200%200-3%200V9l-8%205v2l8-2.5V19l-2%201.5V22l3.5-1%203.5%201v-1.5L13%2019v-5.5z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20transform%3D%22rotate%2890%2012%2012%29%22%20d%3D%22M21%2016v-2l-8-5V3.5a1.5%201.5%200%200%200-3%200V9l-8%205v2l8-2.5V19l-2%201.5V22l3.5-1%203.5%201v-1.5L13%2019v-5.5z%22/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(0deg);transform-origin:6px 16px}
@media (prefers-reduced-motion:no-preference){.plane-load::after{animation:plane-orbit 1.4s linear infinite}}
@keyframes plane-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Estimate an item: an inviting button with a character */
.btn.est-hero{gap:12px;padding:6px 16px 6px 6px;text-align:left;border-color:color-mix(in srgb,var(--cyan) 45%,var(--line-strong))}
.btn.est-hero span{display:grid;line-height:1.2}
.btn.est-hero b{font-weight:700}
.btn.est-hero small{font-weight:400;font-size:.8rem;color:var(--mist)}
.est-hero-ch{width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--amber) 22%,var(--panel-2))}
.btn.est-hero:hover .est-hero-ch{transform:rotate(-6deg) scale(1.05)}
.est-hero-ch{transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){.est-hero-ch{transition:none}.btn.est-hero:hover .est-hero-ch{transform:none}}
/* Daniella: only the character shows; the label opens on hover or keyboard focus */
.amani-fab{padding:5px;gap:0}
.amani-fab .amani-lab{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
.amani-fab:hover,.amani-fab:focus-visible{padding-right:18px}
.amani-fab:hover .amani-lab,.amani-fab:focus-visible .amani-lab{max-width:160px;opacity:1;margin-left:10px}
@media (prefers-reduced-motion:reduce){.amani-fab .amani-lab{transition:none}}
/* Man or woman */
.gender-pick{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gender-pick legend{font:500 .85rem var(--f-body);color:var(--slate);margin-bottom:6px}
.gender-pick label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);cursor:pointer}
.gender-pick label:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.gender-pick input{accent-color:var(--cyan)}
.gender-pick input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.gender-pick small{color:var(--slate)}
/* "*Estimate only" sits at the bottom of the price box as a plain line */
.estimate-flag{margin-top:14px;padding:0;border:0;border-radius:0;background:none;font-size:.85rem;color:var(--slate)}
.estimate-flag a{color:var(--cyan)}
/* insurance line: label left, price right */
.lines .est-ins{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* calculator: insurance as a line of the bill with its own tick */
#r-lines .ins-line{cursor:pointer}
#r-lines .ins-line input{width:18px;height:18px;margin:0 8px 0 0;vertical-align:-3px;accent-color:var(--cyan)}
#r-lines .ins-line input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#r-lines .ins-line.is-off>span:last-child{color:var(--slate)}
#r-lines .ins-line small a{color:var(--cyan)}
/* Find a lower price: a clear call to action */
.btn.cmp-go-btn{gap:10px;padding:14px 22px;font-size:1rem;font-weight:700;background:var(--amber);color:var(--amber-ink);border-color:transparent;box-shadow:0 8px 24px color-mix(in srgb,var(--amber) 35%,transparent)}
.btn.cmp-go-btn svg{width:20px;height:20px}
.btn.cmp-go-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.cmp-go-btn:disabled{opacity:.5;box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.btn.cmp-go-btn:hover{transform:none}}
.lines label.sum,.lines label.strong{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.lines label.sum>span:last-child,.lines label.strong>span:last-child{font-family:var(--f-mono);white-space:nowrap}
.lines label.sum small{display:block;font:400 .85rem/1.4 var(--f-body);color:var(--slate);margin-top:2px}
/* item estimate: total line, smaller buttons lower in the box */
.est-sum{margin-top:6px;border-top:2px solid var(--ink)}
.est-sum .sum{font-size:1.05rem}
.est-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.est-cta .btn.sm{padding:9px 16px;font-size:.9rem}
.lines .est-ins>span:last-child{font-family:var(--f-mono);font-weight:700}
/* item estimate: the two buttons side by side, compact */
.est-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}
.est-cta .btn.sm{min-height:0;height:auto;padding:8px 10px;font-size:.82rem;line-height:1.25;justify-content:center;text-align:center;white-space:normal;border-radius:10px}
@media (max-width:360px){.est-cta{grid-template-columns:1fr}}
.est-cta .btn.sm,.est-cta .btn.sm.amber{padding:7px 10px;min-height:36px;font-size:.8rem;white-space:nowrap;box-shadow:none}
@media (max-width:480px){.est-cta{grid-template-columns:1fr}}

/* 2.31.8: estimate steps on top, compare block with the bargain hunter */
.est-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
.est-steps li{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 14%,transparent),transparent 70%)}
.est-steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:10px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);transform:translateY(-50%) rotate(45deg);z-index:1}
.est-steps img{width:84px;height:84px}
.est-steps .est-n{position:absolute;left:12px;top:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--amber-ink);font-weight:800;font-size:.85rem}
.est-steps h3{margin:0 0 4px;font-size:1rem}.est-steps p{margin:0;color:var(--slate);font-size:.9rem}
@media (max-width:860px){.est-steps{grid-template-columns:minmax(0,1fr)}.est-steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-12px;transform:translateX(-50%) rotate(135deg)}}
.cmp-head{flex-wrap:nowrap;align-items:center;justify-content:flex-start}
.cmp-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.cmp-hunter{width:132px;height:132px;flex:none;transform-origin:50% 90%}
@media (prefers-reduced-motion:no-preference){.cmp-hunter{animation:hunter-wiggle 2.6s ease-in-out infinite}}
@keyframes hunter-wiggle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-6deg)}82%{transform:rotate(5deg)}88%{transform:rotate(-3deg)}}
@media (max-width:520px){.cmp-head{flex-wrap:wrap}.cmp-hunter{width:96px;height:96px}}
@media (max-width:520px){.est-steps li{grid-template-columns:60px minmax(0,1fr);padding:14px}.est-steps img{width:60px;height:60px}.est-steps .est-n{width:22px;height:22px;left:8px;top:8px}}

/* 2.31.9: clearer address helpers, friendly closing line */
.af-ol{margin:8px 0 14px;padding-left:1.3em;display:grid;gap:6px;color:var(--slate)}
.af-ol li::marker{color:var(--amber-text);font-weight:800}
.af-tip{margin-top:14px}
.af-enjoy{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 20px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--amber) 16%,transparent),transparent 75%)}
.af-enjoy img{width:72px;height:72px;flex:none}.af-enjoy p{margin:0}

/* 2.31.11: Kampala tag readable on the globe in both themes, bigger estimate button on the home page */
.tag.dest{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:700}
.btn.est-hero{padding:8px 22px 8px 8px;gap:14px}
.btn.est-hero b{font-size:1.08rem}
.btn.est-hero small{font-size:.86rem}
.est-hero-ch{width:62px;height:62px}

/* 2.31.12: welcome line with the logo, EU flags, EU store logos */
.hello-new{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:14px 0 14px;font:600 1.15rem var(--f-body);color:var(--ink)}
.hello-new .hello-logo img{height:34px;width:auto}
.ctry{display:inline-flex;align-items:center;gap:8px}
.ctry img{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px var(--line-strong);object-fit:cover;flex:none}
.ctry-eu{border-color:var(--blue);font-weight:700}
.eu-stores{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.eu-stores a{display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--cyan) 5%,transparent);text-decoration:none;color:var(--ink);font-size:.8rem;text-align:center;transition:border-color .15s ease,transform .15s ease}
.eu-stores a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.eu-stores a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.eu-stores li{padding:0;border:0;border-radius:0;background:none;margin:0}
.eu-stores .bb-logo{width:36px;height:36px;border-radius:8px;background:var(--on-accent);object-fit:contain}
@media (prefers-reduced-motion:reduce){.eu-stores a{transition:none}.eu-stores a:hover{transform:none}}

/* 2.31.14: explain the size (volumetric) weight in the item estimate */
.lines .vol-why,.vol-why{display:block;margin:8px 0 2px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent);font-size:.86rem;line-height:1.45;color:var(--ink)}
.vol-why b{color:var(--amber-text)}.vol-why a{white-space:nowrap;color:var(--cyan);text-decoration:underline}

/* 2.31.15: compare savings column and summary, inviting buy-for-me card */
.cmp-rows li{grid-template-columns:56px minmax(0,1fr) auto auto auto auto}
.cmp-land b{font-size:1.25rem;font-weight:800;color:var(--amber-text)}
.cmp-save{min-width:96px}.cmp-save b{font-size:1.05rem}.cmp-save b.ok{color:var(--ok)}
.cmp-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-strong)}
.cmp-sum.is-save{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.cmp-sum.is-best{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
@media (max-width:760px){.cmp-rows li{grid-template-columns:56px minmax(0,1fr) auto auto}.cmp-rows li>.cmp-p:not(.cmp-land):not(.cmp-save){display:none}.cmp-go{grid-column:1/-1}}
.bfm-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;margin-top:16px;padding:16px 18px;border-radius:18px;border:1px solid var(--amber);background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 18%,transparent),transparent 80%)}
.bfm-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--amber-ink)}
.bfm-ic svg{width:26px;height:26px}
.bfm-t{display:block;font-size:1.08rem;margin-bottom:4px}
.bfm-card p{margin:0 0 12px;font-size:.92rem;color:var(--mist)}
.bfm-go{gap:10px}
.est-cta.est-cta-1{grid-template-columns:minmax(0,1fr);margin-top:10px}

/* 2.31.18: EU map country flags and names, Kampala tag in amber like the globe */
.m-ctry rect{fill:var(--panel);stroke:var(--line-strong)}
.m-ctry text{fill:var(--ink);font:600 10px var(--f-body)}
.m-lab-ug rect{fill:var(--amber);stroke:var(--amber)}
.m-lab-ug text{fill:var(--amber-ink);font-weight:700}

/* 2.31.18: quick estimate with category, fixed price items and box size */
.quick.q8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin-top:-6px}
.quick.q8 .field{align-content:start}
.q-res{display:grid;gap:2px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 8%,transparent)}
@media (max-width:860px){.quick.q8{grid-template-columns:repeat(2,minmax(0,1fr))}.quick.q8 .q-res{grid-column:1/-1}}
@media (max-width:480px){.quick.q8{grid-template-columns:minmax(0,1fr)}}

/* 2.31.19: goods value in the store currency (USD, EUR, AED), converted to USD and UGX */
.cur-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-weight:800;font-size:.78rem;vertical-align:1px}
.cur-note{display:block;margin-top:6px;font-size:.8rem;line-height:1.4;color:var(--slate)}
.cur-note b{color:var(--ink);font-weight:700}
.cur-conv{margin:10px 0 0;font-size:.82rem;color:var(--slate)}

/* 2.31.20: EU countries with flags in the home Europe band */
.eu-band-ctry{gap:6px;margin:12px 0 4px}
.eu-band-ctry .ctry{font-size:.78rem;padding:.25rem .55rem;color:var(--ink)}
.eu-band-ctry .ctry img{width:18px;height:13px}

/* 2.31.21: thicker lines on the Europe map, like the globe */
.m-feed{stroke-width:2.8;opacity:.9;stroke-dasharray:7 6}
.m-main{stroke-width:5}
.m-main-glow{stroke-width:15;opacity:.2}
.m-city{r:5.5}
@keyframes m-flow{to{stroke-dashoffset:-26}}

/* 2.31.23: confirm before shipping an item worth more than $500 without insurance */
.waive-dlg{max-width:440px;width:calc(100% - 32px);padding:22px;border-radius:18px;border:1px solid var(--amber);background:var(--panel);color:var(--ink)}
.waive-dlg::backdrop{background:color-mix(in srgb,var(--deep) 70%,transparent)}
.waive-dlg h3{margin:0 0 8px}
.waive-dlg p{margin:0 0 14px;color:var(--mist)}
.waive-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ins-waived{display:block;margin:4px 0 0;color:var(--amber-text);font-size:.8rem}

/* 2.31.24: photos of every parcel need a second click */
.ph-confirm{display:block;margin:6px 0 0 2px;color:var(--amber-text);font-size:.82rem}
.ph-confirm:empty{display:none}

/* 2.31.27: Buy2Africa logo at the top of the sign in box */
.qa-logo{display:block;margin-bottom:12px}
.qa-logo img{height:28px;width:auto}

/* 2.31.28: Free addresses page: points under the title, two boxes of the same height, a smaller address card */
.lead-pts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-width:62ch;font-size:1.05rem;color:var(--mist)}
.lead-pts li{position:relative;padding-left:22px}
.lead-pts li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.lead-pts b{color:var(--ink)}
#v-address .addr{align-items:stretch}
#v-address .addr-get{display:flex;flex-direction:column}
#v-address .addr-cta{margin-top:22px !important}
#v-address .pass{padding:16px 18px}
#v-address .pass .row{padding:5px 0;font-size:.86rem}
#v-address .pass-art{width:68px;height:68px}
#v-address .pass-h .flag{width:40px;height:27px}
@media (max-width:860px){#v-address .addr{grid-template-columns:minmax(0,1fr)}}
#v-address .addr-get{padding:4px 0}
#v-address .addr-get h3{margin-top:0}

/* 2.32.4: the address card on Free addresses is clearly a sample; the two columns have the same height */
.pass.is-sample::before{content:"SAMPLE";position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-18deg);font:800 5.2rem/1 var(--f-display,inherit);letter-spacing:.08em;color:var(--amber);opacity:.1;pointer-events:none;z-index:0}
.pass.is-sample .row{position:relative;z-index:1}
.sample-tag{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:var(--amber);color:var(--amber-ink);font-size:.74rem;font-weight:800}
.sample-note{position:relative;z-index:1;margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px dashed var(--amber);font-size:.82rem;color:var(--mist)}
.sample-note b{color:var(--amber-text)}
#v-address .addr-get .ok-li{display:grid;gap:14px}
#v-address .addr-cta{margin-top:auto !important;padding-top:22px}
#v-address .addr > div:last-child{display:flex;flex-direction:column}
#v-address .addr > div:last-child .pass{flex:1}

/* quick estimate without goods value: weight, box size and the price on one line */
.quick.q8 .q-res{grid-column:span 2}
@media (max-width:860px){.quick.q8 .q-res{grid-column:1/-1}}
/* 2.32.15 character maker (back office > Announcements) */
.char-mk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2,var(--panel))}
.char-pv{width:168px;height:168px;border-radius:14px;background:var(--panel)}
.char-pv svg{display:block}
.char-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
@media (max-width:720px){.char-mk{grid-template-columns:1fr}.char-pv{margin:0 auto}}