/* ═══════════════════════════════════════════════════════════════
   Premium Order Tracker v5
   Themes: dark-purple | green-luxury | gold-white (all dark)
   Mobile-first, glass inputs, full-bleed
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700;1,800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── CSS Variables: Green Luxury (default — matches admin setting) ── */
:root {
    --pot-bg-a:#010a04; --pot-bg-b:#031507; --pot-bg-c:#000d03;
    --pot-orb1:rgba(5,150,105,.5); --pot-orb2:rgba(16,185,129,.35); --pot-orb3:rgba(2,44,30,.55);
    --pot-accent:#34d399; --pot-accent2:#6ee7b7;
    --pot-btn-a:#059669; --pot-btn-b:#047857; --pot-btn-shadow:rgba(5,150,105,.55); --pot-btn-text:#f0fdf4;
    --pot-h-a:#ecfdf5; --pot-h-b:#6ee7b7;
    --pot-text:#f1f5f9; --pot-muted:rgba(241,245,249,.5);
    --pot-glass-bg:rgba(255,255,255,.05); --pot-glass-border:rgba(255,255,255,.1); --pot-glass-shine:rgba(255,255,255,.07);
    --pot-input-bg:rgba(255,255,255,.06); --pot-input-border:rgba(255,255,255,.12);
    --pot-input-focus:rgba(167,139,250,.75); --pot-input-glow:rgba(167,139,250,.2);
    --pot-icon:rgba(167,139,250,.7); --pot-lbl:rgba(167,139,250,.85);
    --pot-err-bg:rgba(248,113,113,.1); --pot-err-b:rgba(248,113,113,.3); --pot-err-c:#fca5a5;
    --pot-card-bg:rgba(255,255,255,.04); --pot-card-b:rgba(255,255,255,.08);
    --pot-step-done:#34d399; --pot-step-done-c:#022c1e; --pot-step-done-glow:rgba(52,211,153,.55);
    --pot-step-act-a:#7c3aed; --pot-step-act-b:#4f46e5; --pot-step-act-br:#a78bfa; --pot-step-act-glow:rgba(124,58,237,.65);
    --pot-track:#34d399; --pot-sep:rgba(255,255,255,.07);
    --pot-pdone-bg:rgba(52,211,153,.12);  --pot-pdone-c:#34d399;  --pot-pdone-b:rgba(52,211,153,.25);
    --pot-pproc-bg:rgba(96,165,250,.12);  --pot-pproc-c:#60a5fa;  --pot-pproc-b:rgba(96,165,250,.25);
    --pot-ppend-bg:rgba(251,191,36,.1);   --pot-ppend-c:#fbbf24;  --pot-ppend-b:rgba(251,191,36,.2);
    --pot-phold-bg:rgba(167,139,250,.1);  --pot-phold-c:#a78bfa;  --pot-phold-b:rgba(167,139,250,.2);
    --pot-pcanc-bg:rgba(248,113,113,.1);  --pot-pcanc-c:#f87171;  --pot-pcanc-b:rgba(248,113,113,.2);
    --pot-pcust-bg:rgba(255,255,255,.06); --pot-pcust-c:#c4c4e0;  --pot-pcust-b:rgba(255,255,255,.12);
    --pot-ship-bg:rgba(52,211,153,.1); --pot-ship-b:rgba(52,211,153,.22); --pot-ship-c:#34d399;
    --pot-total:#f1f5f9; --pot-back:rgba(241,245,249,.4);
    --pot-again-b:rgba(255,255,255,.1); --pot-again-c:rgba(241,245,249,.4);
    --pot-again-hbg:rgba(255,255,255,.06); --pot-again-hb:rgba(255,255,255,.2); --pot-again-hc:#f1f5f9;
    --pot-item:rgba(241,245,249,.85); --pot-qty:rgba(241,245,249,.4);
    --pot-h:'Playfair Display',Georgia,serif; --pot-b:'DM Sans',system-ui,sans-serif;
    --pot-ease:cubic-bezier(.4,0,.2,1);
}

/* ── Forest Green ───────────────────────────────────────────── */
#pot-root.theme-green-luxury {
    --pot-bg-a:#010a04; --pot-bg-b:#031507; --pot-bg-c:#000d03;
    --pot-orb1:rgba(5,150,105,.5); --pot-orb2:rgba(16,185,129,.35); --pot-orb3:rgba(2,44,30,.55);
    --pot-accent:#34d399; --pot-btn-a:#059669; --pot-btn-b:#047857; --pot-btn-shadow:rgba(5,150,105,.55); --pot-btn-text:#f0fdf4;
    --pot-h-a:#ecfdf5; --pot-h-b:#6ee7b7; --pot-text:#ecfdf5; --pot-muted:rgba(236,253,245,.5);
    --pot-glass-bg:rgba(52,211,153,.04); --pot-glass-border:rgba(52,211,153,.12); --pot-glass-shine:rgba(52,211,153,.06);
    --pot-input-bg:rgba(52,211,153,.06); --pot-input-border:rgba(52,211,153,.18);
    --pot-input-focus:rgba(52,211,153,.85); --pot-input-glow:rgba(52,211,153,.18);
    --pot-icon:rgba(52,211,153,.7); --pot-lbl:rgba(110,231,183,.85);
    --pot-card-bg:rgba(52,211,153,.03); --pot-card-b:rgba(52,211,153,.1); --pot-sep:rgba(52,211,153,.08);
    --pot-step-done:#059669; --pot-step-done-c:#f0fdf4; --pot-step-done-glow:rgba(5,150,105,.6);
    --pot-step-act-a:#059669; --pot-step-act-b:#047857; --pot-step-act-br:#34d399; --pot-step-act-glow:rgba(5,150,105,.7);
    --pot-track:#059669;
    --pot-pdone-bg:rgba(5,150,105,.14); --pot-pdone-c:#34d399; --pot-pdone-b:rgba(5,150,105,.28);
    --pot-pproc-bg:rgba(52,211,153,.1);  --pot-pproc-c:#6ee7b7; --pot-pproc-b:rgba(52,211,153,.22);
    --pot-ppend-bg:rgba(251,191,36,.1);  --pot-ppend-c:#fde68a; --pot-ppend-b:rgba(251,191,36,.2);
    --pot-phold-bg:rgba(167,139,250,.1); --pot-phold-c:#c4b5fd; --pot-phold-b:rgba(167,139,250,.2);
    --pot-pcanc-bg:rgba(248,113,113,.1); --pot-pcanc-c:#fca5a5; --pot-pcanc-b:rgba(248,113,113,.2);
    --pot-pcust-bg:rgba(52,211,153,.06); --pot-pcust-c:#a7f3d0; --pot-pcust-b:rgba(52,211,153,.15);
    --pot-ship-bg:rgba(5,150,105,.1); --pot-ship-b:rgba(5,150,105,.25); --pot-ship-c:#34d399;
    --pot-total:#ecfdf5; --pot-back:rgba(236,253,245,.35);
    --pot-again-b:rgba(52,211,153,.15); --pot-again-c:rgba(236,253,245,.4);
    --pot-again-hbg:rgba(52,211,153,.07); --pot-again-hb:rgba(52,211,153,.3); --pot-again-hc:#ecfdf5;
    --pot-item:rgba(236,253,245,.85); --pot-qty:rgba(236,253,245,.4);
}

/* ── Dark Gold (formerly White & Gold) ─────────────────────── */
#pot-root.theme-gold-white {
    --pot-bg-a:#0d0a02; --pot-bg-b:#1a1305; --pot-bg-c:#080600;
    --pot-orb1:rgba(212,175,55,.4); --pot-orb2:rgba(184,151,42,.3); --pot-orb3:rgba(101,79,10,.5);
    --pot-accent:#d4af37; --pot-btn-a:#b8972a; --pot-btn-b:#9a7c1f; --pot-btn-shadow:rgba(184,151,42,.5); --pot-btn-text:#fff8e0;
    --pot-h-a:#fefce8; --pot-h-b:#f5d070; --pot-text:#fefce8; --pot-muted:rgba(254,252,232,.5);
    --pot-glass-bg:rgba(212,175,55,.06); --pot-glass-border:rgba(212,175,55,.15); --pot-glass-shine:rgba(212,175,55,.08);
    --pot-input-bg:rgba(212,175,55,.07); --pot-input-border:rgba(212,175,55,.2);
    --pot-input-focus:rgba(212,175,55,.9); --pot-input-glow:rgba(212,175,55,.2);
    --pot-icon:rgba(212,175,55,.7); --pot-lbl:rgba(245,208,112,.85);
    --pot-card-bg:rgba(212,175,55,.05); --pot-card-b:rgba(212,175,55,.14); --pot-sep:rgba(212,175,55,.1);
    --pot-step-done:#b8972a; --pot-step-done-c:#fefce8; --pot-step-done-glow:rgba(184,151,42,.55);
    --pot-step-act-a:#b8972a; --pot-step-act-b:#9a7c1f; --pot-step-act-br:#d4af37; --pot-step-act-glow:rgba(184,151,42,.6);
    --pot-track:#b8972a;
    --pot-pdone-bg:rgba(212,175,55,.12); --pot-pdone-c:#f5d070; --pot-pdone-b:rgba(212,175,55,.25);
    --pot-pproc-bg:rgba(212,175,55,.09); --pot-pproc-c:#fde68a; --pot-pproc-b:rgba(212,175,55,.2);
    --pot-ppend-bg:rgba(251,191,36,.1);  --pot-ppend-c:#fde68a; --pot-ppend-b:rgba(251,191,36,.2);
    --pot-phold-bg:rgba(212,175,55,.1);  --pot-phold-c:#f5d070; --pot-phold-b:rgba(212,175,55,.2);
    --pot-pcanc-bg:rgba(248,113,113,.1); --pot-pcanc-c:#fca5a5; --pot-pcanc-b:rgba(248,113,113,.2);
    --pot-pcust-bg:rgba(212,175,55,.08); --pot-pcust-c:#fde68a; --pot-pcust-b:rgba(212,175,55,.15);
    --pot-ship-bg:rgba(184,151,42,.1); --pot-ship-b:rgba(184,151,42,.25); --pot-ship-c:#f5d070;
    --pot-total:#fefce8; --pot-back:rgba(254,252,232,.35);
    --pot-again-b:rgba(212,175,55,.18); --pot-again-c:rgba(254,252,232,.4);
    --pot-again-hbg:rgba(212,175,55,.08); --pot-again-hb:rgba(212,175,55,.35); --pot-again-hc:#fefce8;
    --pot-item:rgba(254,252,232,.85); --pot-qty:rgba(254,252,232,.4);
}

/* ════════════════════════════════════════════════════════════════
   FULL-BLEED — break out of theme wrappers completely
   ════════════════════════════════════════════════════════════════ */
#pot-root {
    margin-left:  calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width:  100vw !important;
    max-width: 100vw !important;
    position: relative;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--pot-bg-a) 0%, var(--pot-bg-b) 55%, var(--pot-bg-c) 100%);
    color: var(--pot-text);
    font-family: var(--pot-b);
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0 !important;
}

/* ── Orbs ───────────────────────────────────────────────────── */
.pot-bg { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.pot-bg__orb { position:absolute;border-radius:50%;filter:blur(90px);animation:pot-drift 22s ease-in-out infinite; }
.pot-bg__orb--1 { width:60vw;height:60vw;max-width:680px;max-height:680px;top:-20%;left:-15%;background:var(--pot-orb1); }
.pot-bg__orb--2 { width:50vw;height:50vw;max-width:580px;max-height:580px;bottom:-15%;right:-12%;background:var(--pot-orb2);animation-delay:-8s; }
.pot-bg__orb--3 { width:40vw;height:40vw;max-width:500px;max-height:500px;top:45%;left:52%;transform:translate(-50%,-50%);background:var(--pot-orb3);animation-delay:-16s; }
@keyframes pot-drift { 0%,100%{transform:translate(0,0)}33%{transform:translate(35px,-28px) scale(1.07)}66%{transform:translate(-22px,32px) scale(.93)} }

/* ── Screens ────────────────────────────────────────────────── */
.pot-screen {
    position:relative;z-index:1;
    min-height:100vh;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:4.5rem 1.25rem 3rem;box-sizing:border-box;
}
/* screen visibility handled by JS inline styles */
@keyframes pot-in { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
#pot-screen-results {
    justify-content: flex-start;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ── Center column ──────────────────────────────────────────── */
.pot-center { width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center; }

/* ── Logo ───────────────────────────────────────────────────── */
.pot-logo { position:relative;width:70px;height:70px;margin-bottom:1.6rem;display:flex;align-items:center;justify-content:center; }
.pot-logo__ring { position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--pot-glass-border);animation:pot-ring 10s linear infinite; }
.pot-logo__ring--2 { inset:10px;border-color:var(--pot-glass-shine);animation-direction:reverse;animation-duration:14s; }
@keyframes pot-ring { to{transform:rotate(360deg)} }
.pot-logo__icon { font-size:1.8rem;position:relative;z-index:1;filter:drop-shadow(0 0 12px var(--pot-accent)); }

/* ── Headings ───────────────────────────────────────────────── */
.pot-heading {
    font-family:var(--pot-h);font-size:clamp(1.8rem,6vw,2.8rem);font-weight:800;font-style:italic;
    letter-spacing:-.01em;line-height:1.1;text-align:center;margin:0 0 .65rem;
    background:linear-gradient(145deg,var(--pot-h-a) 45%,var(--pot-h-b));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pot-subheading { font-size:.9rem;color:var(--pot-muted);text-align:center;margin:0 0 2rem;font-weight:300;line-height:1.6; }

/* ── Glass form card ────────────────────────────────────────── */
.pot-form {
    width:100%;
    background:var(--pot-glass-bg);
    border:1px solid var(--pot-glass-border);
    border-radius:24px;
    padding:1.75rem 1.5rem;
    box-sizing:border-box;
    display:flex;flex-direction:column;gap:.9rem;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:inset 0 1px 0 var(--pot-glass-shine),0 24px 64px rgba(0,0,0,.35);
}

/* ── Field ──────────────────────────────────────────────────── */
.pot-field { width:100%; }
.pot-label { display:block;font-size:.67rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pot-lbl);margin-bottom:.3rem; }
.pot-input-wrap { display:block;width:100%; }
/* icon is now pure CSS background — zero DOM overlap possible */
.pot-input {
    width:100%;background:var(--pot-input-bg);border:1px solid var(--pot-input-border);
    border-radius:12px;padding:.82rem .9rem .82rem 1rem;
    font-family:var(--pot-b);font-size:.97rem;color:var(--pot-text);
    outline:none;transition:border-color .25s,box-shadow .25s;
    -webkit-appearance:none;box-sizing:border-box;caret-color:var(--pot-accent);
}
.pot-input::placeholder { color:var(--pot-muted);opacity:.55; }
.pot-input::-webkit-outer-spin-button,.pot-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.pot-input:focus { border-color:var(--pot-input-focus);box-shadow:0 0 0 3px var(--pot-input-glow); }
.pot-input-wrap:focus-within .pot-input-icon { color:var(--pot-accent); }
.pot-input:-webkit-autofill,.pot-input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 100px var(--pot-bg-b) inset;-webkit-text-fill-color:var(--pot-text);
}

/* ── Error ──────────────────────────────────────────────────── */
.pot-error { background:var(--pot-err-bg);border:1px solid var(--pot-err-b);border-radius:10px;padding:.65rem 1rem;font-size:.84rem;color:var(--pot-err-c);text-align:center;line-height:1.5; }

/* ── Button ─────────────────────────────────────────────────── */
.pot-btn {
    position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;
    width:100%;padding:1rem 1.5rem;
    background:linear-gradient(135deg,var(--pot-btn-a),var(--pot-btn-b));
    border:none;border-radius:14px;
    font-family:var(--pot-b);font-size:.97rem;font-weight:600;letter-spacing:.03em;
    color:var(--pot-btn-text);cursor:pointer;overflow:hidden;
    box-shadow:0 6px 24px var(--pot-btn-shadow);
    transition:transform .18s var(--pot-ease),filter .18s,box-shadow .18s;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pot-btn::before { content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 60%);pointer-events:none; }
.pot-btn:hover,.pot-btn:focus-visible { transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 10px 32px var(--pot-btn-shadow); }
.pot-btn:active { transform:translateY(0);filter:brightness(.95); }
.pot-btn__arrow { width:16px;height:16px;flex-shrink:0;transition:transform .2s; }
.pot-btn:hover .pot-btn__arrow { transform:translateX(4px); }
.pot-btn__spinner { display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:pot-spin .65s linear infinite; }
.pot-btn--loading .pot-btn__text,.pot-btn--loading .pot-btn__arrow { display:none; }
.pot-btn--loading .pot-btn__spinner { display:block; }
.pot-btn--loading { pointer-events:none; }
@keyframes pot-spin { to{transform:rotate(360deg)} }

.pot-back { background:none;border:none;color:var(--pot-back);font-family:var(--pot-b);font-size:.84rem;cursor:pointer;text-align:center;padding:.35rem;width:100%;margin-top:-.3rem;transition:color .2s;-webkit-tap-highlight-color:transparent; }
.pot-back:hover { color:var(--pot-text); }

/* ════════════════════════════════════════════════════════════════
   RESULTS
   ════════════════════════════════════════════════════════════════ */
.pot-results-wrap { width:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:1.1rem;padding:0 1.25rem;box-sizing:border-box; }
.pot-results-greeting { text-align:center;margin-bottom:.4rem; }
.pot-results-greeting h2 {
    font-family:var(--pot-h);font-size:clamp(1.45rem,5vw,2rem);font-weight:800;font-style:italic;
    letter-spacing:-.01em;margin:0 0 .25rem;
    background:linear-gradient(145deg,var(--pot-h-a) 45%,var(--pot-h-b));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pot-results-greeting p { font-size:.82rem;color:var(--pot-muted);margin:0; }

/* ── Order card ─────────────────────────────────────────────── */
.pot-order-card {
    background:var(--pot-card-bg);border:1px solid var(--pot-card-b);border-radius:20px;overflow:hidden;
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    box-shadow:inset 0 1px 0 var(--pot-glass-shine),0 16px 48px rgba(0,0,0,.3);
    animation:pot-in .4s var(--pot-ease) both;
}
.pot-order-card:nth-child(2){animation-delay:.07s}.pot-order-card:nth-child(3){animation-delay:.14s}

.pot-order-card__top { display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--pot-sep);flex-wrap:wrap;gap:.6rem; }
.pot-order-card__id { font-family:var(--pot-h);font-size:1.05rem;font-weight:700;font-style:italic;color:var(--pot-text); }
.pot-order-card__id span { font-style:normal;font-family:var(--pot-b);font-size:.72rem;font-weight:400;color:var(--pot-muted);margin-right:.25rem; }
.pot-order-card__date { font-size:.75rem;color:var(--pot-muted);margin-top:.1rem; }

.pot-status-pill { display:inline-flex;align-items:center;gap:.38rem;padding:.32rem .85rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; }
.pot-status-pill::before { content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;animation:pot-blink 2.2s ease infinite; }
@keyframes pot-blink { 0%,100%{opacity:1}50%{opacity:.2} }
.pot-status-pill.completed  { background:var(--pot-pdone-bg);color:var(--pot-pdone-c);border:1px solid var(--pot-pdone-b); }
.pot-status-pill.processing { background:var(--pot-pproc-bg);color:var(--pot-pproc-c);border:1px solid var(--pot-pproc-b); }
.pot-status-pill.pending    { background:var(--pot-ppend-bg);color:var(--pot-ppend-c);border:1px solid var(--pot-ppend-b); }
.pot-status-pill.hold       { background:var(--pot-phold-bg);color:var(--pot-phold-c);border:1px solid var(--pot-phold-b); }
.pot-status-pill.cancelled  { background:var(--pot-pcanc-bg);color:var(--pot-pcanc-c);border:1px solid var(--pot-pcanc-b); }
.pot-status-pill.custom     { background:var(--pot-pcust-bg);color:var(--pot-pcust-c);border:1px solid var(--pot-pcust-b); }

/* ── Stepper ────────────────────────────────────────────────── */
.pot-stepper { padding:1.4rem 1.4rem .2rem; }
.pot-step-list { display:flex;width:100%;align-items:center; }
.pot-step { flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative; }
.pot-step:not(:last-child)::after { content:'';position:absolute;top:16px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--pot-sep); }
.pot-step.done:not(:last-child)::after  { background:var(--pot-track); }
.pot-step.active:not(:last-child)::after { background:linear-gradient(90deg,var(--pot-track),var(--pot-sep)); }
.pot-step__dot { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:1.5px solid var(--pot-card-b);background:var(--pot-card-bg);color:var(--pot-muted);position:relative;z-index:1;transition:all .35s;flex-shrink:0; }
.pot-step.done .pot-step__dot { background:var(--pot-step-done);border-color:var(--pot-step-done);color:var(--pot-step-done-c);box-shadow:0 0 14px var(--pot-step-done-glow);font-size:.95rem; }
.pot-step.active .pot-step__dot { background:linear-gradient(135deg,var(--pot-step-act-a),var(--pot-step-act-b));border-color:var(--pot-step-act-br);color:#fff;box-shadow:0 0 18px var(--pot-step-act-glow);animation:pot-pulse 2s ease infinite; }
@keyframes pot-pulse { 0%,100%{box-shadow:0 0 16px var(--pot-step-act-glow)}50%{box-shadow:0 0 26px var(--pot-step-act-glow)} }
.pot-step__label { display:none; }
/* show current status as a single clean line below the dots */
.pot-stepper-status { font-size:.75rem;color:var(--pot-muted);text-align:center;padding:.5rem 1.4rem 1rem;letter-spacing:.03em; }
.pot-stepper-status strong { color:var(--pot-text);font-weight:600; }

/* ── Shipped banner ─────────────────────────────────────────── */
.pot-shipped-banner { margin:0 1.4rem 1.4rem;padding:.9rem 1.2rem;background:var(--pot-ship-bg);border:1px solid var(--pot-ship-b);border-radius:12px;display:flex;align-items:center;gap:.8rem; }
.pot-shipped-banner__emoji { font-size:1.5rem;flex-shrink:0; }
.pot-shipped-banner strong { display:block;font-size:.88rem;font-weight:600;color:var(--pot-ship-c);margin-bottom:.15rem; }
.pot-shipped-banner p { font-size:.78rem;color:var(--pot-muted);margin:0;line-height:1.5; }

/* ── Items / total ──────────────────────────────────────────── */
.pot-order-items { padding:.9rem 1.4rem;border-top:1px solid var(--pot-sep);display:flex;flex-direction:column;gap:.5rem; }
.pot-order-item { display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-size:.85rem; }
.pot-order-item__name { color:var(--pot-item);line-height:1.4; }
.pot-order-item__qty  { color:var(--pot-qty);font-size:.75rem;white-space:nowrap;flex-shrink:0; }
.pot-order-footer { padding:.9rem 1.4rem;border-top:1px solid var(--pot-sep);display:flex;justify-content:flex-end; }
.pot-order-total { font-family:var(--pot-h);font-size:1.12rem;font-weight:700;font-style:italic;color:var(--pot-total); }

/* ── Not found ──────────────────────────────────────────────── */
.pot-not-found { text-align:center;padding:3rem 1.5rem;max-width:360px;margin:0 auto; }
.pot-not-found__icon { font-size:3rem;display:block;margin-bottom:1rem; }
.pot-not-found h2 { font-family:var(--pot-h);font-size:1.4rem;font-weight:800;font-style:italic;margin:0 0 .65rem;color:var(--pot-text); }
.pot-not-found p { font-size:.88rem;color:var(--pot-muted);line-height:1.7;margin:0; }

/* ── Search again ── */
.pot-search-again { display:none; }
.pot-search-again-inner { text-align:center;margin-top:1.5rem;padding:0 1.25rem 1rem; }
#pot-again-btn-inner { background:none;border:1px solid var(--pot-again-b);border-radius:10px;padding:.6rem 1.3rem;color:var(--pot-again-c);font-family:var(--pot-b);font-size:.82rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s;-webkit-tap-highlight-color:transparent; }
#pot-again-btn-inner:hover { color:var(--pot-again-hc);border-color:var(--pot-again-hb);background:var(--pot-again-hbg); }

/* ════════════════════════════════════════════════════════════════
   MOBILE — optimised for phones (primary audience)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
    .pot-screen { padding:3.5rem 1rem 2.5rem; }
    #pot-screen-results { padding:2.5rem .75rem 3rem; }
    .pot-center { max-width:100%; }
    .pot-form { padding:1.4rem 1.1rem;border-radius:20px;gap:1.1rem; }
    .pot-heading { font-size:1.7rem; }
    .pot-subheading { font-size:.84rem;margin-bottom:1.75rem; }
    .pot-btn { padding:.95rem 1.25rem;font-size:.94rem;border-radius:12px; }
    .pot-input { font-size:.94rem;padding:.78rem .85rem .78rem 2.5rem;border-radius:10px; }
    .pot-results-wrap { padding:0 .75rem;max-width:100%; }
    .pot-order-card__top { padding:1rem 1.1rem; }
    .pot-stepper { padding:1.25rem 1.1rem .85rem; }
    .pot-step__label { font-size:.58rem;max-width:46px; }
    .pot-step__dot { width:28px;height:28px; }
    .pot-order-items,.pot-order-footer { padding:.8rem 1.1rem; }
    .pot-shipped-banner { margin:0 1.1rem 1.1rem;padding:.8rem 1rem; }
    .pot-logo { width:62px;height:62px;margin-bottom:1.35rem; }
    .pot-results-greeting h2 { font-size:1.4rem; }
}
@media(min-width:481px)and(max-width:768px) {
    .pot-center { max-width:400px; }
    .pot-results-wrap { max-width:500px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} }