/* Catalogue expansion and tracking preview share the existing SHUTTR palette. */
.tracking-header-link,.back-link,.tracking-dialog-link { color:var(--sienna);font-size:.83rem;font-weight:750;white-space:nowrap;text-decoration:none; }
.tracking-header-link:hover,.back-link:hover,.tracking-dialog-link:hover { text-decoration:underline;text-underline-offset:3px; }
.tracking-dialog-link { display:block;text-align:center;padding:12px;margin:7px 0; }
.category-art { background:linear-gradient(135deg,#fff0d1,#f2d5a5);color:var(--sienna); }
.category-art span { width:76px;height:76px;display:grid;place-items:center;border-radius:22px;background:#fffdfa9e;font-size:3rem;line-height:1;box-shadow:0 10px 25px #a0522d1a; }
.product-placeholder { height:125px;margin:0 7px;background:linear-gradient(135deg,#f8e9d3,#f7f4ed);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.product-placeholder>span { color:var(--sienna);font-size:4rem;line-height:1;opacity:.82; }
.product-placeholder figcaption { position:absolute;bottom:6px;left:6px;right:6px;text-align:center;font-size:.59rem;color:#745c4b; }
.seller-label { color:var(--sienna);font-size:.61rem;font-weight:800;letter-spacing:.02em;margin:0 0 5px; }
.detail-photo.product-placeholder { height:200px;margin:10px 0; }
.detail-photo.product-placeholder>span { font-size:5rem; }
.tracking-page { background:#faf7f0;color:var(--ink); }
.tracking-page .demo-bar { text-align:center; }
.tracking-header { max-width:1480px;margin:auto;padding:16px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }
.tracking-header .brand { font-size:1.85rem; }
.tracking-header .brand>span:last-child { display:flex;flex-direction:column;line-height:1; }
.tracking-header .brand small { display:block;font-size:.52rem;letter-spacing:.13em;margin-top:6px; }
.tracking-main { max-width:1300px;padding:0 4%;margin:auto; }
.tracking-intro { display:flex;justify-content:space-between;align-items:end;gap:20px;padding:34px 0 25px; }
.tracking-intro h1 { font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.07em;line-height:1.05;margin:0; }
.tracking-intro p:last-child { color:var(--muted);margin:11px 0 0; }
.tracking-demo-pill { border-radius:999px;background:#f5deb3;padding:8px 13px;color:var(--sienna);font-weight:800;font-size:.7rem;letter-spacing:.08em;white-space:nowrap; }
.tracking-layout { display:grid;grid-template-columns:minmax(0,1.75fr) minmax(270px,.75fr);gap:18px;align-items:start; }
.tracking-primary,.tracking-side { display:grid;gap:18px;min-width:0; }
.tracking-card { background:#fffdfa;border:1px solid #e6d9c4;border-radius:24px;padding:23px;box-shadow:0 8px 28px #402e2509; }
.tracking-card h2 { font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:-.045em; }
.tracking-card .eyebrow { font-size:.67rem;color:var(--sienna); }
.tracking-status-card { background:linear-gradient(120deg,#fff2d9,#f7e2bd);border-color:#eed4a7; }
.tracking-card-top { display:flex;align-items:start;justify-content:space-between;gap:15px; }
.tracking-card-top>div:first-child { max-width:490px; }
.tracking-card-top p:not(.tracking-label) { font-size:.87rem;color:#695344;line-height:1.5;margin:10px 0 0; }
.tracking-label { font-size:.67rem;font-weight:800;letter-spacing:.1em;color:var(--sienna);margin:0 0 10px; }
.tracking-eta { background:#fffdfa;border-radius:16px;padding:12px 14px;min-width:120px; }
.tracking-eta small { font-size:.58rem;font-weight:800;letter-spacing:.07em;color:var(--muted);display:block; }
.tracking-eta strong { display:block;font-size:1.16rem;letter-spacing:-.04em;margin-top:3px; }
.tracking-progress { height:9px;border-radius:99px;background:#decaaa;overflow:hidden;margin-top:25px; }
.tracking-progress>span { display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--clay));border-radius:inherit;transition:width .3s; }
.tracking-progress-caption { font-size:.75rem;font-weight:750;color:var(--sienna);margin:9px 0 0; }
.tracking-card-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px; }
.tracking-steps { list-style:none;margin:15px 0 0;padding:0; }
.tracking-steps li { display:flex;align-items:center;gap:14px;padding:12px 0;position:relative; }
.tracking-steps li:not(:last-child):after { content:'';position:absolute;left:16px;top:46px;bottom:-12px;width:2px;background:#e9dfcb; }
.tracking-steps li.done:not(:last-child):after { background:var(--clay); }
.step-dot { z-index:1;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ede5d8;color:#77685c;font-size:.75rem;font-weight:800; }
.tracking-steps li.done .step-dot { background:#e2edd8;color:#326044; }
.tracking-steps li.current .step-dot { background:var(--clay);color:white;box-shadow:0 0 0 5px #d95d3022; }
.tracking-steps b { display:block;font-size:.9rem; }
.tracking-steps small { display:block;color:var(--muted);font-size:.73rem;margin-top:2px; }
.tracking-steps li.future { opacity:.55; }
.step-now { margin-left:auto;color:var(--clay);font-weight:800;font-size:.62rem;letter-spacing:.09em; }
.map-badge { border-radius:999px;padding:6px 9px;background:#f4ead7;color:var(--sienna);font-size:.61rem;font-weight:800;letter-spacing:.04em;white-space:nowrap; }
.map-view { height:290px;border-radius:19px;overflow:hidden;position:relative;background:repeating-linear-gradient(0deg,#f6f0e5 0 31px,#ebe4d8 31px 33px),repeating-linear-gradient(90deg,transparent 0 57px,#e2d9ca 57px 59px);border:1px solid #e7dece; }
.map-road { position:absolute;background:#fffdf7;border:1px solid #e4dbca;border-left:0;border-right:0;box-shadow:0 1px 4px #60432912; }
.road-one { left:-10%;top:28%;width:125%;height:25px;transform:rotate(-12deg); }
.road-two { left:4%;top:68%;width:110%;height:31px;transform:rotate(18deg); }
.road-three { left:32%;top:-10%;height:130%;width:25px;transform:rotate(24deg); }
.road-four { left:72%;top:-12%;height:130%;width:25px;transform:rotate(-19deg); }
.map-park { position:absolute;background:#dbe6ce;left:50%;top:8%;width:25%;height:30%;border-radius:46% 30% 50% 30%;opacity:.85; }
.route-line { position:absolute;left:18%;top:40%;width:62%;height:37%;border-top:5px dashed var(--clay);border-right:5px dashed var(--clay);border-radius:0 70px 0 0;transform:rotate(-8deg);opacity:0;transition:opacity .2s; }
.map-pin { position:absolute;z-index:2;display:flex;align-items:center;gap:5px;border-radius:999px;background:#fffdfa;padding:5px 10px 5px 5px;box-shadow:0 4px 16px #402e2533;white-space:nowrap; }
.map-pin b { display:grid;place-items:center;width:29px;height:29px;border-radius:50%;font-size:.85rem;background:var(--sienna);color:white; }
.map-pin small { font-weight:800;font-size:.67rem; }
.pickup-pin { left:9%;top:33%; }.drop-pin { right:7%;bottom:13%; }.rider-pin { left:47%;top:53%;opacity:0;transition:opacity .2s; }
.drop-pin b { background:var(--accent);color:var(--ink);font-size:1.2rem; }.rider-pin b { background:var(--clay); }
.map-view.route-active .route-line,.map-view.route-active .rider-pin { opacity:1; }
.map-disclaimer,.tracking-small { font-size:.73rem;color:var(--muted);line-height:1.5;margin:11px 0 0; }
.tracking-detail { padding:13px 0;border-bottom:1px solid #eee6d8; }
.tracking-detail span { color:var(--muted);display:block;font-size:.69rem;margin-bottom:3px; }
.tracking-detail b { display:block;font-size:.84rem;line-height:1.4; }
.tracking-item { display:flex;gap:12px;border-bottom:1px solid #eee6d8;padding:14px 0; }
.tracking-item>span { display:grid;place-items:center;background:#f6e8cf;color:var(--sienna);font-weight:800;width:34px;height:34px;border-radius:11px;font-size:.72rem; }
.tracking-item b,.tracking-item small { display:block; }.tracking-item b { font-size:.84rem; }.tracking-item small { color:var(--muted);font-size:.7rem;margin-top:2px; }
.tracking-order-link { display:inline-block;color:var(--sienna);font-weight:800;font-size:.78rem;padding-top:14px; }
.tracking-help p:not(.eyebrow) { color:var(--muted);font-size:.8rem;line-height:1.5; }
.tracking-help button { display:block;width:100%;margin-top:8px;border:1px solid #ded2bd;border-radius:12px;background:#f7f3eb;padding:10px;text-align:left;font-size:.76rem;color:#8b7e70;cursor:not-allowed; }
.tracking-simulator { display:flex;justify-content:space-between;align-items:center;gap:22px;margin:26px 0;background:#f5deb3;border-radius:24px;padding:24px; }
.tracking-simulator h2 { font-size:1.4rem; }.tracking-simulator p:last-child { font-size:.77rem;color:var(--muted);margin:5px 0 0; }
.stage-controls { display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end; }
.stage-controls button { border:1px solid #d9ba84;background:#fffdfa;border-radius:999px;padding:9px 11px;font-weight:750;font-size:.69rem; }
.stage-controls button.active { background:var(--sienna);border-color:var(--sienna);color:white; }
.tracking-bottom-note { font-size:.74rem;color:var(--muted);line-height:1.5;max-width:850px;margin:0 0 35px; }
.tracking-footer { max-width:1300px;margin:auto;padding:20px 4% 35px;border-top:1px solid var(--line);display:flex;align-items:center;gap:20px;color:var(--muted);font-size:.75rem; }
@media(max-width:1100px){.site-header { grid-template-columns:auto minmax(130px,190px) minmax(200px,1fr) auto auto;gap:12px; }.site-header .text-button{display:none}.tracking-layout{grid-template-columns:minmax(0,1.4fr) minmax(250px,.8fr)}.tracking-simulator{align-items:start;flex-direction:column}.stage-controls{justify-content:flex-start}}
@media(max-width:800px){.site-header{grid-template-columns:minmax(0,1fr) auto}.site-header .search{min-width:0;width:100%}.site-header .tracking-header-link{grid-column:2;grid-row:2;text-align:right;font-size:.7rem}.category-art span{width:56px;height:56px;font-size:2.25rem;border-radius:17px}.tracking-layout{grid-template-columns:1fr}.tracking-side{grid-template-columns:repeat(2,minmax(0,1fr))}.tracking-help{grid-column:1/-1}.tracking-intro{padding:24px 0 18px}.tracking-intro h1{font-size:2.1rem}.tracking-demo-pill{display:none}}
@media(max-width:580px){.tracking-card{padding:17px;border-radius:18px}.tracking-side{grid-template-columns:1fr}.tracking-help{grid-column:auto}.tracking-card-top{flex-direction:column}.tracking-eta{display:flex;gap:10px;align-items:center}.tracking-eta strong{margin:0}.map-view{height:230px}.map-pin small{font-size:.55rem}.map-pin{padding-right:5px}.map-pin b{width:23px;height:23px}.pickup-pin{left:4%}.drop-pin{right:3%}.rider-pin{left:38%}.tracking-simulator{padding:17px;border-radius:18px}.tracking-header .brand{font-size:1.55rem}.back-link{font-size:.72rem}}