/* Amazon-style e-commerce look for: the Shop / Product catalog (#shop, /shop/) and the "What we do" concept (#paths).
   Loaded after the page styles. Colours follow the site theme (light / dark / gold ...) and use Amazon's accent colours. */
:root{
  --az-bg:var(--bg2);--az-card:var(--card);--az-line:var(--line);--az-text:var(--text);--az-mut:var(--muted);
  --az-ctl:var(--bg);--az-link:#5fc4da;--az-hover:#ffb067;--az-red:#ff6b81;--az-ok:#4cc38a;
  --az-btn:#ffd814;--az-btn-b:#fcd200;--az-btn-h:#f7ca00;--az-badge:#e47911;--az-nav:#37475a;--az-orange:#ff9900;
  --az-shadow:0 2px 10px #0006;
}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --az-bg:#eaeded;--az-card:#fff;--az-line:#d5d9d9;--az-text:#0f1111;--az-mut:#565959;--az-ctl:#f0f2f2;
  --az-link:#007185;--az-hover:#c7511f;--az-red:#b12704;--az-ok:#007600;--az-nav:#232f3e;--az-shadow:0 2px 8px #0f111133}}
:root[data-theme="light"]{
  --az-bg:#eaeded;--az-card:#fff;--az-line:#d5d9d9;--az-text:#0f1111;--az-mut:#565959;--az-ctl:#f0f2f2;
  --az-link:#007185;--az-hover:#c7511f;--az-red:#b12704;--az-ok:#007600;--az-nav:#232f3e;--az-shadow:0 2px 8px #0f111133}

/* ---------- shared bits ---------- */
.azp{display:inline-flex;align-items:flex-start;white-space:nowrap}
.azp sup{font-size:.5em;line-height:1.15;vertical-align:baseline;position:static;font-weight:500}
.azd,.azbtn{display:none}

/* ================= HOME: SHOP + PRODUCT CATALOG ================= */
#shop,#paths{background:var(--az-bg);color:var(--az-text)}
#shop .wm,#paths .wm{display:none}
#shop h2,#paths h2{background:none;-webkit-text-fill-color:currentColor;color:var(--az-text);font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700;letter-spacing:0;text-shadow:none;animation:none}
#shop h2 span,#paths h2 span{color:inherit;-webkit-text-fill-color:currentColor;background:none}
#shop .sub,#paths .sub{color:var(--az-mut);font-size:.95rem;max-width:760px;margin-bottom:18px}

/* toolbar: "1-9 of 9 results" + sort */
#shop .shoptb{background:var(--az-card);border:1px solid var(--az-line);border-radius:8px;padding:8px 8px 8px 16px;min-height:48px}
#shop #pcount{font-weight:700;color:var(--az-text);font-size:.92rem}
#shop #pcount b{color:var(--az-hover)}
#shuf{display:inline-flex;align-items:center;gap:6px;border-radius:8px;border:1px solid var(--az-line);background:var(--az-ctl);color:var(--az-text);font-weight:500;font-size:.85rem;padding:7px 12px;box-shadow:0 1px 2px #0f111122}
#shuf:hover{filter:none;border-color:var(--az-orange);box-shadow:0 0 0 3px #ff990033}
#shuf::before{content:"Sort by:";color:var(--az-mut)}
#shuf svg{width:16px;height:16px}

/* department list (left) */
#shop .shopw{grid-template-columns:220px minmax(0,1fr);gap:24px}
#shop .cats{background:none;border:0;border-radius:0;padding:0;gap:4px;top:84px}
#shop .catt{font-size:1rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--az-text);padding:0 0 4px}
#shop .catl{gap:0}
#shop .cat{display:flex;align-items:baseline;gap:0;padding:5px 0 5px 10px;border:0;border-left:3px solid transparent;border-radius:0;background:none;color:var(--az-text);font-weight:400;font-size:.92rem;transform:none}
#shop .cat svg{display:none}
#shop .cat span{flex:none}
#shop .cat em{margin-left:6px;padding:0;background:none;color:var(--az-mut);font-size:.82rem}
#shop .cat em::before{content:"("}#shop .cat em::after{content:")"}
#shop .cat:hover{background:none;color:var(--az-hover);transform:none}
#shop .cat:hover span{text-decoration:underline}
#shop .cat[aria-pressed="true"]{background:none;border-left-color:var(--az-orange);font-weight:700;color:var(--az-text)}
#shop .cat[aria-pressed="true"] em{background:none;color:var(--az-mut)}

/* product cards */
#shop .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px;margin-top:12px}
#shop .prod{position:relative;background:var(--az-card);border:1px solid var(--az-line);border-radius:8px;box-shadow:none;color:var(--az-text);transition:box-shadow .15s}
#shop .prod:hover{transform:none;border-color:var(--az-line);box-shadow:var(--az-shadow)}
#shop .prod:active{transform:none}
#shop .art{aspect-ratio:4/3;border-radius:0}
#shop .art>svg{width:92px;max-width:none;height:92px;padding:22px;border-radius:50%;background:#fffffff0;color:#232f3e;box-shadow:0 2px 10px #0f111126}
#shop .art .artimg{width:100%;height:100%;object-fit:cover}
#shop .art .tags{left:0;right:auto;top:0;align-items:flex-start;gap:3px;max-width:88%}
#shop .art .tag{background:var(--az-badge);color:#fff;border-radius:0 0 4px 0;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:none;padding:3px 9px;box-shadow:none}
#shop .art .tags .tag~.tag{background:#232f3e;color:#fff;box-shadow:none;border-radius:0 4px 4px 0}
#shop .art .bdg{border-radius:4px}
#shop .pb{padding:12px 14px 14px;gap:5px}
#shop .pb .kicker{font-size:.74rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--az-mut);text-shadow:none;order:0}
#shop .pb>b{order:1;font-size:1rem;font-weight:500;line-height:1.35;color:var(--az-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:0}
#shop .prod:hover .pb>b{color:var(--az-hover)}
#shop .pb .pd,#shop .prod:not(.open) .pd{order:2;font-size:.84rem;color:var(--az-mut);-webkit-line-clamp:2}
#shop .prod.open .pd{display:block;-webkit-line-clamp:unset}
#shop .xp{order:3;color:var(--az-link);font-weight:400;font-size:.8rem;text-decoration:none}
#shop .xp:hover{color:var(--az-hover);text-decoration:underline;filter:none}
#shop .pinc{order:4;font-size:.8rem}
#shop .pinc li::before{color:var(--az-ok)}
#shop .pf{order:5;flex-direction:column;align-items:stretch;gap:3px;padding-top:4px;margin-top:auto}
#shop .price{display:flex;align-items:flex-start;flex-wrap:wrap;column-gap:5px;font-size:1.7rem;font-weight:500;line-height:1.1;color:var(--az-text);text-shadow:none}
#shop .price small{font-size:.78rem;font-weight:400;color:var(--az-mut);align-self:flex-end;line-height:1.5}
#shop .price.soonp{font-size:1.1rem;color:var(--az-red)}
#shop .azd{display:block;font-size:.76rem;color:var(--az-mut);line-height:1.4}
#shop .azd::before{content:"\2713\00a0";color:var(--az-ok);font-weight:700}
#shop .pact{flex-direction:column;gap:7px;margin-top:8px}
#shop .pact .btn{flex:none;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;min-height:34px;border-radius:100px;font-size:.86rem;font-weight:400;border:1px solid var(--az-line);background:var(--az-card);color:var(--az-text);box-shadow:0 1px 2px #0f111122;filter:none;background-image:none}
#shop .pact .btn:hover{background:var(--az-ctl)}
#shop .pact .btn.p{order:-1;background:var(--az-btn);border-color:var(--az-btn-b);color:#0f1111;background-image:none;animation:none}
#shop .pact .btn.p:hover{background:var(--az-btn-h)}
#shop .pact .btn.soonb,#shop .pact .btn[disabled]{background:var(--az-ctl);border-color:var(--az-line);color:var(--az-mut);opacity:.8}
#shop .pb .fav{top:8px;right:8px;width:32px;height:32px;background:#fffffff0;border:1px solid #d5d9d9;color:#565959;box-shadow:0 1px 4px #0f111133;z-index:3}
#shop .prod>.pb{position:static}
#shop .prx{order:6;margin-top:6px;padding-top:8px;min-height:0;border-top:1px solid var(--az-line)}
#shop .prx .rx{border-radius:8px;background:none;border-color:var(--az-line);color:var(--az-mut);min-height:30px;padding:2px 8px;font-size:.78rem}
#shop .prx .rx:hover{border-color:var(--az-orange)}
#shop .prx .rx[aria-pressed="true"]{background:#ff990022;border-color:var(--az-orange);color:var(--az-text)}
#shop .skc{background:var(--az-card);border-color:var(--az-line);border-radius:8px}

@media(max-width:860px){
  #shop .shopw{grid-template-columns:minmax(0,1fr)}
  #shop .cats{position:static}
  #shop .cat{padding:6px 14px;border:1px solid var(--az-line);border-radius:8px;background:var(--az-card);flex:none;white-space:nowrap}
  #shop .cat[aria-pressed="true"]{background:var(--az-nav);border-color:var(--az-nav);color:#fff}
  #shop .cat[aria-pressed="true"] em{color:#d5d9d9}
}
@media(max-width:600px){
  #shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #shop .price{font-size:1.3rem}
  #shop .art>svg{width:64px;height:64px;padding:14px}
  #shop .pb{padding:8px 9px 10px}
  #shop .pb>b{font-size:.88rem}
  #shop .pact .btn{font-size:.78rem;padding:6px 6px}
  #shop #pcount{font-size:.8rem}
}

/* ================= HOME: "WHAT WE DO" CONCEPT (five paths) ================= */
#paths .sh{margin-bottom:16px}
#paths .kick{border:0;background:none;padding:0;border-radius:0;color:var(--az-badge);font-weight:700;letter-spacing:.06em;font-size:.78rem}
#paths .kick i{display:none}
#paths .pth{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
#paths .pc{gap:8px;padding:18px 20px 16px;border:1px solid var(--az-line);border-radius:8px;background:var(--az-card);color:var(--az-text);box-shadow:none;transition:box-shadow .15s}
#paths .pc:hover{transform:none;border-color:var(--az-line);box-shadow:var(--az-shadow)}
#paths .pc.pri{background:var(--az-card);border-color:var(--az-line);border-top:3px solid var(--az-orange)}
#paths .pc .ph{flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}
#paths .pc .pi{width:52px;height:52px;border-radius:8px;background:#232f3e;color:var(--az-orange)}
#paths .pc .pi svg{width:28px;height:28px}
#paths .pc .tier{border:0;border-radius:0 0 4px 4px;background:#232f3e;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:none;padding:3px 9px;margin-top:-18px;margin-right:-8px}
#paths .pc.pri .tier{background:var(--az-badge)}
#paths .pc b{font-size:1.2rem;font-weight:700;line-height:1.25;margin-top:4px;color:var(--az-text)}
#paths .pc .for{font-size:.8rem;font-weight:400;color:var(--az-mut)}
#paths .pc p{color:var(--az-text);font-size:.92rem;line-height:1.5}
#paths .pc .pl{gap:6px 16px;padding-top:6px}
#paths .pc .pl a{color:var(--az-link);font-weight:400;font-size:.9rem}
#paths .pc .pl a:hover{color:var(--az-hover);text-decoration:underline}
#paths .pnote{margin-top:16px;border:1px solid var(--az-line);border-left:4px solid var(--az-orange);border-radius:8px;background:var(--az-card);color:var(--az-text);font-weight:400;max-width:none}
#paths .pnote span{color:var(--az-text);font-weight:700}

/* ================= /shop/ PAGE (server rendered catalog) ================= */
.azshop{--azg:14px}
.azshop h2{font-size:1.3rem;font-weight:700;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--az-line,var(--line))}
.azshop .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:var(--azg)}
.azshop .card.pcx{position:relative;background:var(--az-card);border:1px solid var(--az-line);border-radius:8px;box-shadow:none;color:var(--az-text);transition:box-shadow .15s}
.azshop .card.pcx:hover{transform:none;border-color:var(--az-line);box-shadow:var(--az-shadow)}
.azshop .pcl{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.azshop .card .im{aspect-ratio:4/3;background:linear-gradient(135deg,#c9a45c,#ecd9a8);color:#232f3e;font-size:1.05rem}
.azshop .card .bd{padding:12px 14px 14px;gap:5px}
.azshop .card .meta{order:0;font-size:.74rem;color:var(--az-mut);gap:4px}
.azshop .card .pill{padding:0;border:0;background:none;border-radius:0;font-weight:400;color:var(--az-mut);text-transform:none}
.azshop .card .pill~.pill{background:var(--az-badge);color:#fff;font-weight:700;border-radius:2px;padding:1px 7px;font-size:.7rem}
.azshop .card h3{order:1;font-size:1rem;font-weight:500;line-height:1.35;color:var(--az-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.azshop .card.pcx:hover h3{color:var(--az-hover)}
.azshop .card p{order:2;font-size:.84rem;color:var(--az-mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.azshop .card .price{order:3;display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:5px;font-size:1.7rem;font-weight:500;line-height:1.1;color:var(--az-text);margin-top:auto;padding-top:4px;text-shadow:none}
.azshop .card .price small{font-size:.78rem;font-weight:400;color:var(--az-mut);align-self:flex-end;line-height:1.5}
.azshop .card .azd{display:block;order:4;font-size:.76rem;color:var(--az-mut)}
.azshop .card .azd::before{content:"\2713\00a0";color:var(--az-ok);font-weight:700}
.azshop .card .azbtn{display:block;order:5;margin-top:8px;text-align:center;padding:8px 12px;border-radius:100px;background:var(--az-btn);border:1px solid var(--az-btn-b);color:#0f1111;font-size:.86rem}
.azshop .card.pcx:hover .azbtn{background:var(--az-btn-h)}
.azshop .card .prx{margin:0 14px 12px;padding-top:8px;min-height:0;border-top:1px solid var(--az-line)}
.azshop .card .prx .rx{border-radius:8px;background:none;border-color:var(--az-line);color:var(--az-mut)}
@media(max-width:600px){
  .azshop .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .azshop .card .price{font-size:1.3rem}
  .azshop .card .bd{padding:8px 9px 10px}
  .azshop .card h3{font-size:.88rem}
}

/* ================= FLOATING BUTTONS: Help sits at the corner, the others stack above it (no overlap) ================= */
html body .hlpb{right:max(16px,env(safe-area-inset-right,0px))}
html body .wfab{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
html body .totop{right:max(16px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px))}
html body:has(.wfab) .totop{bottom:calc(148px + env(safe-area-inset-bottom,0px))}
html body:has(.hlpb.up) .wfab,html body:has(.hlpb.up) .totop{bottom:calc(148px + env(safe-area-inset-bottom,0px))}
html body:has(.hlpb.up):has(.wfab) .totop{bottom:calc(216px + env(safe-area-inset-bottom,0px))}
@media(max-width:859.98px){
  html body .wfab,html body .totop{bottom:calc(var(--stack,128px) + 74px)}
  html body:has(.wfab) .totop{bottom:calc(var(--stack,128px) + 142px)}
  html body:has(.hlpb.up) .wfab,html body:has(.hlpb.up) .totop{bottom:calc(var(--stack,128px) + 142px)}
  html body:has(.hlpb.up):has(.wfab) .totop{bottom:calc(var(--stack,128px) + 210px)}
}