/* Shared look of every customer page (rebuild 4 Nov 2026): breadcrumb, photo banner, picture cards, "what to check" strip, small list-free box,
   footer columns, phone bottom bar. Same card style as the homepage (home.css). Classes start with px- / pf so nothing else is touched.
   body.sxp = a page built from the new template: always light, like the homepage. */
body.px{--p-navy:#0A2A5E;--p-amber:#F7931E;--p-ink:#1B2433;--p-muted:#5A6577;--p-line:#E1E6EE;--p-soft:#F4F6FA}
body.sxp{--bg:#fff;--surface:#fff;--ink:#1B2433;--muted:#5A6577;--line:#E1E6EE;--trust:#0A2A5E;--trust-soft:#e6ecf6;background:#fff;color:var(--p-ink);color-scheme:light;font-size:15px;line-height:1.55;overflow-x:clip}
body.sxp .top{background:#fff}
body.sxp .logo,body.sxp .logo .en,body.sxp .logo .mark{color:#0A2A5E}
.px-in{max-width:1100px;margin:0 auto;padding-inline:16px}
.px-test{background:#FFF4E5;color:#6B4E00;font-size:.85rem;text-align:center;padding:.5rem 1rem;margin:0}

/* breadcrumb */
.px-crumb{background:#fff;border-bottom:1px solid var(--p-line,#E1E6EE);font-size:15px;color:#3F495A}
.px-crumb .px-in{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;padding-block:4px}
.px-crumb a{display:inline-flex;align-items:center;min-height:44px;color:#0A2A5E;text-decoration:none}
.px-crumb a:hover{text-decoration:underline}
.px-crumb i{font-style:normal;opacity:.6}
.px-crumb [aria-current]{color:#1B2433;font-weight:600}
@media (min-width:760px){.px-crumb a{min-height:32px}}

/* photo banner with the section name over a gradient in the section colour */
.px-banner{position:relative;min-height:230px;display:flex;overflow:hidden;background:var(--c);color:#fff}
.px-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.px-bt{position:relative;width:100%;display:flex;align-items:flex-end;background:linear-gradient(rgba(0,0,0,0) 0%,color-mix(in srgb,var(--c) 55%,transparent) 45%,color-mix(in srgb,var(--c) 94%,black))}
.px-bt .px-in{width:100%;padding-block:56px 18px}
.px-bt h1{font-family:var(--f-display);font-size:clamp(1.5rem,6vw,2.2rem);color:#fff;line-height:1.25;margin:0}
.px-bt p{margin:4px 0 0;color:#fff;opacity:.95;font-size:15px;max-width:60ch}
.px-bb{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.px-bb .px-btn,.px-bb .btn{background:#fff;color:var(--c)!important;border:2px solid #fff;min-height:44px;padding:0 16px;border-radius:12px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.px-bb .px-btn.ghost{background:transparent;color:#fff!important;border-color:#fff}
.px-bb svg{width:18px;height:18px}
@media (min-width:760px){.px-banner{min-height:280px}.px-bt .px-in{padding-block:80px 24px}}

.px-main{padding-bottom:28px}
.px-lead{color:#3a4557;margin:14px 0 4px;max-width:46rem}
.px-kw{font-size:13.5px;color:#5A6577;margin:2px 0 0}
.px-h{font-family:var(--f-display);font-size:19px;color:#0A2A5E;margin:22px 0 10px;line-height:1.3}
.px-more{margin:8px 0 0}.px-more a{color:#0A2A5E;font-weight:700}

/* picture cards (same as the homepage rows) */
.px-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
@media (min-width:640px){.px-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.px-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.px-card{display:block;text-decoration:none;color:#1B2433;-webkit-tap-highlight-color:transparent}
.px-pic{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#F4F6FA}
.px-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.px-card:hover img{transform:scale(1.06)}
.px-pic i{position:absolute;bottom:8px;inset-inline-start:8px;font-style:normal;font-size:11px;font-weight:600;background:#fff;color:var(--c,#0A2A5E);padding:2px 9px;border-radius:10px}
.px-card b{display:block;font-size:14px;margin-top:6px;line-height:1.3}
.px-card small{display:block;font-size:12px;color:#5A6577;line-height:1.35}
.px-card:focus-visible{outline:3px solid #F7931E;outline-offset:3px;border-radius:14px}
.px-grid.g .px-card b{font-size:14px}

/* what to check */
.px-check ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.px-check ul{grid-template-columns:repeat(2,1fr)}}
.px-check li{display:flex;gap:12px;background:#F4F6FA;border-radius:14px;padding:12px 14px}
.px-ci{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;color:#0A2A5E;display:flex;align-items:center;justify-content:center}
.px-check b{display:block;font-size:14.5px;color:#0A2A5E}
.px-check p{margin:2px 0 0;font-size:13.5px;color:#3a4557}

/* small "be the first to list" box, low on the page */
.px-soon{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border:2px dashed color-mix(in srgb,var(--c) 55%,#fff);border-radius:16px;padding:12px 14px;background:color-mix(in srgb,var(--c) 6%,#fff)}
.px-soon>div:first-child{flex:1 1 260px}
.px-soon h2{font-family:var(--f-display);font-size:16px;color:var(--c);margin:3px 0 2px}
.px-soon p{margin:0;font-size:13.5px;color:#3a4557}
.px-b{display:inline-block;background:color-mix(in srgb,var(--c) 16%,#fff);color:var(--c);border-radius:10px;padding:1px 9px;font-size:12px;font-weight:700}
.px-sb{display:flex;flex-wrap:wrap;gap:8px}
.px-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;background:var(--c,#0A2A5E);color:#fff!important;font-weight:700;text-decoration:none;font-size:14px}
.px-btn.ghost{background:#fff;color:var(--c,#0A2A5E)!important;border:2px solid var(--c,#0A2A5E)}
.px-btn:hover{filter:brightness(.93)}

/* city chips on the trades page */
.px-cities{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.px-ct{position:relative;font:inherit;font-size:13.5px;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid #C9D2DF;background:#fff;color:#0A2A5E;cursor:pointer}
.px-ct.on{background:#0A2A5E;color:#fff;border-color:#0A2A5E}

/* the disclaimer line + lists */
.px-notice{font-size:13px;line-height:1.6;color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);padding:10px 0;margin:12px 0}
.px-notice a{color:#fff;font-weight:700}
.px-notice.lite{color:#3a4557;background:#F4F6FA;border:0;border-radius:12px;padding:10px 12px}
.px-notice.lite a{color:#0A2A5E}

/* footer columns */
.pf .px-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin:16px 0}
@media (min-width:760px){.pf .px-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pf h3{font-size:14px;color:#fff;margin:0 0 6px;font-family:var(--f-display)}
.pf ul{list-style:none;margin:0;padding:0}
.pf li{margin:0}
.pf li a{display:inline-block;color:rgba(255,255,255,.88);text-decoration:none;padding:6px 0;font-size:14px}
.pf li a:hover{color:#F7931E;text-decoration:underline}
.pf .px-wait{font-size:14px}.pf .px-wait a{color:#fff;font-weight:700}
.pf .px-trade{font-size:13.5px;margin:6px 0 10px}
.pf .px-tl a{color:#fff;padding:6px 3px;display:inline-block}
.pf .flogo{color:#fff}

/* phone bottom bar on every page */
.px-dock{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:40}
.px-dock a,.px-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:56px;border-radius:18px;background:#fff;color:#0A2A5E;text-decoration:none;box-shadow:0 6px 20px rgba(10,42,94,.22);font:inherit;font-size:10.5px;gap:1px;border:0;cursor:pointer}
.px-dock .on{background:#0A2A5E;color:#fff}
.px-dock{transition:transform .25s ease,opacity .25s ease}.px-dock-off .px-dock{transform:translate(-50%,150%);opacity:0}   /* 5 Nov 2026: hide while scrolling down */
@media (max-width:759px){.px-ideas-tab{transition:transform .25s ease,opacity .25s ease}.px-dock-off .px-ideas-tab{transform:translateY(150%);opacity:0}body.px{padding-bottom:84px}}
body.px .foot{padding-bottom:104px}
@media (min-width:760px){.px-dock{display:none}body.px .foot{padding-bottom:46px}}

/* guide pages (markdown) in the new template */
body.sxp .sx-g{max-width:46rem;margin:0 auto;padding:6px 0 22px}
.px-trainers .pro{margin-top:10px}
@media (prefers-reduced-motion:reduce){.px-pic img{transition:none}}
[dir="rtl"] .pf li[dir="ltr"]{text-align:right}
.pf li[dir="ltr"] a{unicode-bidi:plaintext}
.px-h3{font-family:var(--f-display);font-size:16px;color:#33425a;margin:18px 0 8px}.px-h a,.px-h3 a{color:inherit;text-decoration:none}

/* header menu (round 3): a row of links on desktop, a burger button that opens the same list on phones */
.px-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E1E6EE;border-radius:12px;background:#fff;color:#0A2A5E;cursor:pointer;flex:none;padding:0}
.px-nav{background:#fff;border-top:1px solid #E1E6EE}
.px-nav .px-in{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding-block:4px}
.px-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;color:#1B2433;text-decoration:none;font-size:15px;font-weight:600}
.px-nav a:hover{background:#F4F6FA}
.px-nav .px-navjoin{margin-inline-start:auto;background:#F7931E;color:#1B2433;font-weight:700}
.px-nav .px-navjoin:hover{background:#e5850f}
.hp-hb .px-burger,.top .row .px-burger{margin-inline-start:6px}
@media (max-width:759px){
  .px-burger{display:inline-flex}
  .px-nav{display:none;border-top:1px solid #E1E6EE;box-shadow:0 8px 16px rgba(10,42,94,.08)}
  .px-nav.open{display:block}
  .px-nav .px-in{flex-direction:column;align-items:stretch;padding-block:8px}
  .px-nav a{min-height:48px;font-size:16px}
  .px-nav .px-navjoin{margin:6px 0 4px;justify-content:center}
}
.px-crumb .px-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-weight:700;color:#0A2A5E;text-decoration:none;font-size:15px}
.px-crumb .px-back:hover{text-decoration:underline}
.px-crumb .px-in:has(.px-back){padding-block:0 2px}

/* round 3 sign-up forms (wrapper class f3) */
.f3 .fe{color:#b3261e;font-size:.88rem;font-weight:600;margin:.4rem 0 0;line-height:1.4}
.f3 .f.invalid>input,.f3 .f.invalid>select,.f3 .f.invalid input[type=text],.f3 .f.invalid select{border-color:#b3261e!important;box-shadow:0 0 0 2px rgba(179,38,30,.15)}
.f3 fieldset.invalid{outline:2px solid rgba(179,38,30,.35);outline-offset:6px;border-radius:10px}
.f3 .hint{font-weight:400;color:#666;font-size:.85rem;margin:.2rem 0 .4rem}
.f3 .ap-oth{margin-top:.6rem}
.f3 .ap-amt{margin-top:.6rem}
.f3 .f input:not([type=checkbox]):not([type=radio]),.f3 .f select{width:100%;box-sizing:border-box;min-height:48px;border:1px solid #cfcfcf;border-radius:12px;padding:0 .9rem;font-size:1rem;background:#fff}
.f3 .f .opts{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.px #jf .fe{color:#b3261e;font-size:.88rem;font-weight:600;margin:.4rem 0 0;line-height:1.4}

/* nearby-city sellers on trade lists (round 3, item 34) */
.pro-nb{margin:0 0 6px;font-size:13px;font-weight:600;color:#0A2A5E;background:#E8EEF8;border-radius:8px;padding:4px 10px;display:inline-block}
.pros.nb-off .pro[data-near]{display:none}
.nb-sw{margin:0 0 12px}
.pc-away{background:#FFF4E0;border:1px solid #F7C873;border-radius:14px;padding:14px 16px;margin:12px 0;color:#5A3B00}
.pc-away b{display:block;font-size:1.1rem;margin-bottom:4px}
.pc-away p{margin:0 0 10px}

/* "Ideas?" tab and box (round 3, item 27) */
.px-ideas-tab{position:fixed;top:42%;right:0;z-index:40;writing-mode:vertical-rl;display:inline-flex;align-items:center;gap:6px;padding:14px 8px;min-width:40px;min-height:96px;border:0;border-radius:12px 0 0 12px;background:#F7931E;color:#1B2433;font-weight:700;font-size:14px;line-height:1;font-family:inherit;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.l-ar .px-ideas-tab{right:auto;left:0;border-radius:0 12px 12px 0}
.px-ideas-tab:hover{background:#e5850f}
.px-ideas-tab img{width:28px;height:28px;writing-mode:horizontal-tb;flex:none;border-radius:50%}   /* 5 Nov 2026: Heba's speech-bubble + bulb icon */
.px-ideas{position:fixed;inset:0;z-index:100;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.px-ideas[hidden]{display:none}
.px-ideas-box{position:relative;background:#fff;color:#1B2433;border-radius:16px;padding:20px 18px 18px;width:100%;max-width:420px;max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.px-ideas-box h2{margin:0 36px 10px 0;font-size:1.15rem;color:#0A2A5E;line-height:1.3}
[dir=rtl] .px-ideas-box h2{margin:0 0 10px 36px}
.px-ideas-box label{display:block;font-weight:700;margin:10px 0 4px;font-size:.92rem}
.px-ideas-box textarea,.px-ideas-box input{width:100%;box-sizing:border-box;border:1px solid #cfcfcf;border-radius:12px;padding:10px 12px;font:inherit;font-size:1rem;background:#fff}
.px-ideas-box textarea{min-height:96px;resize:vertical}
.px-ideas-box input{min-height:46px}
.px-ideas-x{position:absolute;top:8px;inset-inline-end:8px;width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#5A6577}
.px-ideas-n{margin:8px 0 0;font-size:.82rem;color:#5A6577}
.px-ideas-e{margin:10px 0 0;color:#b3261e;font-weight:600}
.px-ideas-ok{margin:12px 0 0;padding:10px 12px;background:#E7F6EC;color:#14532d;border-radius:10px;font-weight:700}
.px-ideas-box .px-btn{margin-top:14px;width:100%;border:0;cursor:pointer;font-family:inherit}
.px-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.px-linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:start;text-decoration:underline;cursor:pointer;min-height:44px}
/* round 4: on phones the tab is a small round 💡 in the bottom-bar row, at the screen edge beside the bar, so it never covers page text */
@media (max-width:759px){.px-ideas-tab{writing-mode:horizontal-tb;top:auto;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 10px);right:10px;left:auto;width:36px;height:36px;min-width:0;min-height:0;padding:0;border-radius:50%;justify-content:center;font-size:0;gap:0;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.l-ar .px-ideas-tab{right:auto;left:10px;border-radius:50%}.px-ideas-tab span{display:none}.px-ideas-tab{width:50px;height:50px;background:#fff;border:2px solid #F7931E}.px-ideas-tab img{width:44px;height:44px}}

/* "Which city?" row under the city chips (Eastern Province) */
.lq-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;background:#F4F6FA;border-radius:12px}
.lq-sub[hidden]{display:none}
.lq-q{font-weight:700;color:#0A2A5E;font-size:14px;margin-inline-end:4px}
.lq-s{position:relative;font:inherit;font-size:13.5px;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid #C9D2DF;background:#fff;color:#0A2A5E;cursor:pointer}
.lq-s.on{background:#0A2A5E;color:#fff;border-color:#0A2A5E}
.lq-sub.ask{outline:3px solid #F7931E;outline-offset:2px}
.hp-top .lq-sub{margin:6px 0 0;padding:6px 8px}
.hp-top .lq-s{min-height:36px;padding:0 12px}

/* round 4: region-first district picker (food sign-up pickup + delivery) and the delivery-permit tick */
.f3 .dp-regs{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0 .6rem}
.f3 .dp-reg{font:inherit;font-size:.95rem;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid #cfcfcf;background:#fff;color:#0A2A5E;font-weight:600;cursor:pointer}
.f3 .dp-reg[aria-pressed=true]{background:#0A2A5E;border-color:#0A2A5E;color:#fff}
.f3 .dp-reg b{display:inline-block;min-width:1.3em;margin-inline-start:4px;padding:0 5px;border-radius:999px;background:#F7931E;color:#0A2A5E;font-size:.8rem}
.f3 .dp-q{margin:.2rem 0 .6rem}
.f3 .dp-sel{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .6rem}
.f3 .dp-chip{font:inherit;font-size:.85rem;padding:4px 10px;border-radius:999px;border:1.5px solid #0A2A5E;background:#E8EEF8;color:#0A2A5E;cursor:pointer}
.f3 .dp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;max-height:300px;overflow:auto;padding:4px 2px}
.f3 .dp-list .hint{grid-column:1/-1}
.f3 .dp-list .ck{min-height:36px;align-items:center}
.f3 .dp-none{color:#666;margin:.4rem 0}
.f3 .dv-perm .ck{margin-top:.4rem}
.f3 .dv-permup{margin-top:.5rem}
.f3 .dv-permup input[type=file]{width:100%;font-size:.95rem}
@media (max-width:420px){.f3 .dp-list{grid-template-columns:1fr}}

/* round 4: a card with no photo yet (we never repeat a photo to fill a gap) */
.px-pic.np{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--c,#0A2A5E) 22%,#fff),color-mix(in srgb,var(--c,#0A2A5E) 8%,#fff))}
.px-pic.np em{font-style:normal;font-size:44px;opacity:.55}

/* round 4: the all-guides page shows a small section icon instead of a photo */
.px-grid.ico .px-pic.np{aspect-ratio:auto;height:64px}
.px-grid.ico .px-pic.np em{font-size:30px;opacity:.8}

/* 5 Nov 2026: folded checklist on guides */
.cl-fold>summary{cursor:pointer;list-style:none;font-weight:700;color:#0A2A5E;background:#fff;border:1px solid #d9e0ea;border-radius:12px;padding:12px 16px;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cl-fold>summary::-webkit-details-marker{display:none}
.cl-fold>summary::after{content:"+";font-size:20px;line-height:1}
.cl-fold[open]>summary::after{content:"−"}
@media print{.cl-fold>summary{display:none}}