.t4-screen {
  --t4-ink:#163523; --t4-muted:#4c6555; --t4-bg:#fff; --t4-soft:#f1f9f1;
  --t4-border:#d6e7d9; --t4-green:#126a37; --t4-on:#fff; --t4-mark:#daf3de;
  width:min(100%,37rem); margin:0 auto; padding:clamp(1rem,4vw,2rem);
  background:var(--t4-bg); color:var(--t4-ink); border-radius:1.6rem;
}
[data-theme="dark"] .t4-screen {
  --t4-ink:#e3f5e8; --t4-muted:#b6cbbd; --t4-bg:#151e19; --t4-soft:#203227;
  --t4-border:#344f3d; --t4-green:#9be0ad; --t4-on:#10301c; --t4-mark:#254b31;
}
.t4-heading {text-align:center; margin:0 auto 1.35rem;}
.t4-heading p {margin:.5rem 0 0; color:var(--t4-muted); line-height:1.5;}
.t4-title {margin:0; font-size:clamp(1.6rem,5.6vw,2.35rem); line-height:1.15; color:inherit;}
.t4-badge {display:grid;place-items:center; width:5rem;height:5rem;margin:0 auto 1rem;border-radius:50%;background:var(--t4-mark);color:var(--t4-green);animation:t4-enter .35s ease-out;}
.t4-badge svg {width:2.3rem;height:2.3rem;}
.t4-failed .t4-badge {background:#fce4e2;color:#a72029;}
.t4-details,.t4-question {padding:.85rem 1rem; border:1px solid var(--t4-border); border-radius:1rem; background:var(--t4-soft);}
.t4-details {margin:0 0 1rem;}
.t4-details div {display:grid;grid-template-columns:1fr 1.25fr;gap:1rem;padding:.55rem 0;}
.t4-details div+div {border-top:1px solid var(--t4-border);}
.t4-details dt {color:var(--t4-muted);}
.t4-details dd {text-align:end; margin:0; font-weight:700; overflow-wrap:anywhere;}
.t4-button {font:inherit;font-weight:700;display:flex;gap:.6rem;align-items:center;justify-content:center;padding:.8rem 1rem;min-height:2.85rem;border:1px solid var(--t4-green);border-radius:.8rem;text-decoration:none;background:var(--t4-green);color:var(--t4-on);width:100%;cursor:pointer;transition:filter .16s,transform .16s;}
.t4-button:hover {filter:brightness(.9);}
.t4-button:active {transform:translateY(1px);}
.t4-button:disabled {opacity:.65;cursor:wait;}
.t4-outline {color:var(--t4-green);background:transparent;}
.t4-actions,.t4-form,.t4-links {display:grid;gap:.6rem;}
.t4-links {margin-top:1rem;text-align:center;}
.t4-links button {border:0;background:none;font:inherit;color:var(--t4-green);min-height:2.2rem;cursor:pointer;}
.t4-links button:disabled {color:var(--t4-muted);cursor:default;}
.t4-question {margin:.55rem 0;}
.t4-question summary {cursor:pointer;font-weight:700;padding:.2rem 0;}
.t4-question p {margin:.55rem 0 0;color:var(--t4-muted);line-height:1.55;}
.t4-input-label {font-weight:700;}
.t4-phone {display:flex;align-items:center;gap:.6rem;padding:0 .85rem;border:1px solid var(--t4-border);border-radius:.8rem;background:var(--t4-soft);}
.t4-phone input {flex:1;min-width:0;border:0;background:none;color:inherit;padding:.85rem 0;font:inherit;}
.t4-otp {position:relative;}
.t4-otp-boxes {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;}
.t4-otp-boxes span {display:grid;place-items:center;min-height:3rem;border:1px solid var(--t4-border);border-radius:.55rem;background:var(--t4-soft);font-size:1.25rem;font-weight:700;}
.t4-otp input {position:absolute;inset:0;opacity:0;width:100%;font-size:16px;cursor:text;}
.t4-otp:focus-within .t4-otp-boxes span.current {outline:2px solid var(--t4-green);}
.t4-screen :is(a,button,summary):focus-visible,.t4-otp:focus-within,.t4-phone:focus-within {outline:2px solid var(--t4-green);outline-offset:3px;}
.t4-feedback {color:#a52a2a; font-weight:600;margin:.3rem 0;}
[data-theme="dark"] .t4-feedback {color:#ffa5a5;}
@keyframes t4-enter {from {transform:scale(.86);opacity:.2;}to {transform:scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce){.t4-badge,.t4-button{animation:none;transition:none;}}

/* Apply the mobile design over the storefront's existing theme system. */
:root[data-theme="light"] {
  --bg:#f5f9f3;--surface:#fff;--ink:#17251c;--muted:#4d6555;
  --green:#136738;--line:#d7e4d7;--tint:#e9f6ea;
  --customer-cream:#f8fbf7;--customer-border:#d7e4d7;
}
#checkout-dialog,.customer-dialog,#point-dialog {background:var(--bg);color:var(--ink);}
#checkout-dialog .checkout-summary {background:var(--surface);color:var(--ink);}
#checkout-dialog :is(h1,h2,h3,.checkout-item strong,.summary-total) {color:var(--ink);}
#checkout-dialog .checkout-payment {display:grid;gap:.5rem;}
#checkout-dialog .checkout-payment label {display:flex;align-items:center;gap:.65rem;border:1px solid var(--line);padding:.8rem;border-radius:.7rem;background:var(--surface);}
#checkout-dialog .checkout-payment label:has(input:checked:not(:disabled)) {border-color:var(--green);}
#checkout-dialog :is(.checkout-payment,.delivery-options) label:has(input:disabled) {opacity:.6;cursor:default;}
#checkout-dialog .delivery-option {padding-top:1.65rem;min-width:0;text-align:center;}
#checkout-dialog .delivery-option small {overflow-wrap:anywhere;}
:root[data-theme="light"] :is(#checkout-dialog,.customer-profile,.cart-summary) .button.primary {background:#126a37;color:white;border-color:#126a37;}
#customer-dialog:has(.t4-login) {background:var(--bg);}
#customer-dialog:has(.t4-login) .customer-top {max-width:37rem;margin:auto;justify-content:space-between;}
#customer-dialog .t4-screen {box-sizing:border-box;}
.order-details-link {text-align:center;padding:1rem;}
.t4-otp:focus-within .t4-otp-boxes span:first-child:not(:has(~ .current)) {outline:2px solid var(--t4-green);}
.order-track {list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:1rem 0;}
.order-track li {padding:.38rem .6rem;border-radius:1rem;border:1px solid var(--line);color:var(--muted);}
.order-track .reached {border-color:var(--green);background:var(--tint);color:var(--ink);}
@media(max-width:600px){
  .bottom-nav a .nav-icon {display:grid;place-items:center;background:#fff;color:#101410;border-radius:50%;height:36px;width:36px;min-width:36px;box-shadow:0 2px 8px #0002;}
  .bottom-nav a.active .nav-icon {background:#111;color:white;}
  .bottom-nav a.active {color:var(--ink);}
  .bottom-nav a {min-height:58px;}
  .cart-item {touch-action:pan-y;}
  .cart-item [data-action="remove"] {opacity:0;pointer-events:none;}
  .cart-item.is-swiped [data-action="remove"],.cart-item [data-action="remove"]:focus-visible {opacity:1;pointer-events:auto;color:#a72029;background:#fce4e2;}
  .cart-item.is-swiped {border-color:#cf7e82;}
}