/* Shop build only: the connected steps and states, in the design system's tokens. */
.wrk-shop-step{display:flex;flex-direction:column;gap:16px}
.wrk-shop-step h2{margin:8px 0 0;font:800 22px/1.2 var(--font-display);color:var(--green-900)}
.wrk-shop-h1{margin:0;font:900 clamp(34px,5vw,56px)/1 var(--font-display);text-transform:uppercase;color:var(--green-900)}
.wrk-shop-lede,.wrk-shop-note{margin:0;font:400 16px/1.55 var(--font-body);color:var(--ink-700)}
.wrk-shop-note{padding:14px 16px;border-radius:16px;background:var(--cream-50);border:1.5px solid var(--cream-300);font-size:15px}
.wrk-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.wrk-shop-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.wrk-shop-grow{flex:1 1 220px}
.wrk-shop-split{align-items:center;font:600 16px var(--font-body)}
.wrk-shop-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;background:var(--cream-50);border:1.5px solid var(--cream-300)}
.wrk-shop-card div{display:flex;flex-direction:column;gap:4px;font:500 15px/1.4 var(--font-body)}
.wrk-shop-card .wrk-shop-ing{font:400 13px/1.4 var(--font-body);color:var(--ink-500,#5A7466);max-width:34ch}
.wrk-shop-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 24px}
.wrk-shop-msg{margin:0;padding:12px 14px;border-radius:14px;font:600 15px/1.45 var(--font-body)}
.wrk-shop-msg--bad{background:#FDECEA;color:var(--red-600,#B42318);border:1.5px solid #F5C2BC}
.wrk-shop-msg--good{background:var(--green-50,#EAF3EE);color:var(--green-900);border:1.5px solid var(--green-200,#C6DECF)}
.wrk-shop-msg--info{background:var(--cream-200,#F6EFD9);color:var(--green-900);border:1.5px solid var(--cream-300)}
.wrk-shop-banner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin:0 0 20px;padding:18px 20px;border-radius:22px;font:500 15px/1.45 var(--font-body)}
.wrk-shop-banner p{margin:4px 0 0}
.wrk-shop-verify{display:flex;flex-direction:column;gap:14px;margin:0 0 8px;padding:20px;border-radius:22px;background:var(--cream-200,#F6EFD9);border:1.5px solid var(--cream-300)}
.wrk-shop-verify h2{margin:0}
.wrk-shop-banner--bad{background:#FDECEA;border:1.5px solid #F5C2BC;color:#7A1D12}
.wrk-shop-banner--paused{background:var(--green-900);color:var(--cream-100)}
.wrk-shop-banner--cancelled,.wrk-shop-banner--info{background:var(--cream-200,#F6EFD9);border:1.5px solid var(--cream-300);color:var(--green-900)}
/* Dialogs (card form, top-ups, confirmations): outside the page's own render tree. */
.wrk-shop-dialog{border:none;border-radius:28px;padding:0;width:min(520px,calc(100vw - 24px));background:var(--cream-100);color:var(--green-900);box-shadow:var(--shadow-3,0 20px 60px rgba(0,0,0,.25))}
.wrk-shop-dialog::backdrop{background:rgba(20,61,43,.55)}
.wrk-shop-dialog__body{display:flex;flex-direction:column;gap:14px;padding:24px}
.wrk-shop-dialog h2{margin:0;font:900 26px/1.1 var(--font-display);text-transform:uppercase}
.wrk-shop-dialog p{margin:0;font:400 15px/1.5 var(--font-body)}
.wrk-shop-dialog__card{min-height:56px;padding:12px;border-radius:16px;background:#fff;border:1.5px solid var(--cream-300)}
.wrk-shop-dialog__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.wrk-shop-dialog button{min-height:48px;padding:0 20px;border-radius:999px;font:700 15px var(--font-label);cursor:pointer;border:2px solid var(--green-900)}
.wrk-shop-dialog button.primary{background:var(--green-900);color:var(--cream-100)}
.wrk-shop-dialog button.secondary{background:transparent;color:var(--green-900)}
.wrk-shop-dialog button:disabled{opacity:.55;cursor:not-allowed}
.wrk-shop-dialog select{min-height:48px;padding:0 12px;border-radius:14px;border:1.5px solid var(--cream-300);font:500 15px var(--font-body);background:#fff}
.wrk-shop-dialog [role=alert]:empty{display:none}
.wrk-shop-dialog [role=alert]{padding:10px 12px;border-radius:12px;background:#FDECEA;color:#7A1D12;font:600 14px/1.4 var(--font-body)}
/* Meal page: "Know your meal." under the dish, as in the design Uzair sent: a nutrition card (one portion at a time, per meal and per 100g)
   beside an ingredients and allergens card; the cards stack on a phone. */
.recipe-details{max-width:1320px;margin:0 auto;padding:16px clamp(20px,4vw,48px) 0}
.recipe-heading{max-width:720px;margin-bottom:28px}
.recipe-heading h2{font:900 clamp(32px,4vw,48px)/1.05 var(--font-display);text-transform:uppercase;margin:0 0 16px}
.recipe-details p{font:400 16px/1.65 var(--font-body);margin:12px 0 20px}
.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.recipe-panel{min-width:0;padding:28px;border:1px solid var(--cream-300);border-radius:24px;background:var(--cream-50)}
.recipe-panel h3{font:800 23px/1.25 var(--font-display);margin:0 0 18px}
.recipe-panel h3:not(:first-child){margin-top:28px}
.recipe-table{width:100%;border-collapse:collapse;font:400 15px/1.5 var(--font-body);margin-top:20px}
.recipe-table caption{text-align:left;padding-bottom:14px;font-weight:600}
.recipe-table th,.recipe-table td{padding:12px 8px;border-bottom:1px solid var(--cream-300);text-align:right;overflow-wrap:anywhere}
.recipe-table th:first-child{text-align:left;padding-left:0}
.recipe-table th{font-weight:600}
.recipe-table td{font-variant-numeric:tabular-nums;white-space:pre-line}
.recipe-details .recipe-note{font-size:14px;color:var(--ink-700)}
.recipe-panel a{font-weight:700;color:var(--green-900);text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:760px){.recipe-grid{grid-template-columns:1fr}.recipe-panel{padding:20px}.recipe-table{font-size:14px}.recipe-table th,.recipe-table td{padding:10px 5px}}
/* Log in page: a way back to the shop beside the logo. */
/* "Back to the shop" sits under the logo, out of the top-right corner shape (U21; WRKDAY's notes: keep content away from the corners). */
.wrk-login-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.wrk-login-back{min-height:44px;display:inline-flex;align-items:center;font:700 14px var(--font-label);color:inherit;text-decoration:underline;text-decoration-color:var(--yellow-400);text-decoration-thickness:2px;text-underline-offset:4px}
/* Plain fields inside dialogs (Change address) in the design system's input look */
.wrk-shop-dialog label{display:flex;flex-direction:column;gap:6px;font:600 14px/1.3 var(--font-body);color:var(--green-900)}
.wrk-shop-dialog label br{display:none}
.wrk-shop-dialog input{box-sizing:border-box;width:100%;height:var(--control-h-m);padding:0 16px;border:1.5px solid var(--cream-400);border-radius:var(--radius-input);background:var(--cream-50);font:400 16px var(--font-body);color:var(--text-body);transition:box-shadow var(--dur-fast),border-color var(--dur-fast)}
.wrk-shop-dialog input:focus,.wrk-shop-dialog input:focus-visible{outline:none!important;border-color:var(--green-900);box-shadow:0 0 0 3px var(--yellow-200)}
@media (forced-colors:active){.wrk-shop-dialog input:focus-visible{outline:2px solid Highlight!important;outline-offset:2px}}

.wrk-legal{display:block;font-style:normal;font:500 13px/1.5 var(--font-body);color:var(--cream-200)}
.wrk-legal a{color:inherit;text-decoration:underline}
.wrk-sum{display:flex;flex-direction:column;gap:14px;min-width:min(86vw,420px);color:var(--green-900)}
.wrk-sum h2{margin:0;font:900 28px/1 var(--font-display);text-transform:uppercase}
.wrk-sum p{margin:0;font:400 15px/1.5 var(--font-body)}
.wrk-sum__biz{padding:12px 14px;border-radius:14px;background:var(--cream-50);border:1.5px solid var(--cream-300)}
.wrk-sum__row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--cream-300);font:500 15px/1.4 var(--font-body)}
.wrk-sum__row b{font-variant-numeric:tabular-nums}
.wrk-sum__total{font-size:18px}
.wrk-sum__state{font-weight:700}
.wrk-sum__vat{color:var(--ink-700)}
.wrk-sum__actions{display:flex;gap:10px;flex-wrap:wrap}
.wrk-sum__actions button{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--green-900);background:var(--green-900);color:var(--cream-100);font:700 15px var(--font-body);cursor:pointer}
.wrk-sum__actions button[data-close]{background:transparent;color:var(--green-900)}
@media print{body>*:not(dialog.wrk-shop-dialog){display:none!important}dialog.wrk-shop-dialog{position:static;border:0;box-shadow:none;max-width:none}.wrk-sum__actions{display:none}}
/* U22: the summary's words while signed out at checkout, on the dark panel and the phone's bar. */
.wrk-shop-nexthint{margin:0;font:600 15px/1.4 var(--font-body);color:var(--cream-100)}
.wrk-shop-nexthint--bar{flex:0 1 190px;font-size:14px;text-align:right}
/* Name on card (10 Oct 2026: Revolut needs the card holder's first name and surname). */
.wrk-shop-dialog__name{display:flex;flex-direction:column;gap:6px;font:600 14px var(--font-body);color:var(--green-900)}
.wrk-shop-dialog__name input{min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid var(--cream-400);background:#fff;font:500 16px var(--font-body);color:var(--green-900)}
.wrk-shop-dialog__hint{margin:-4px 0 0;font:600 14px var(--font-body);color:var(--red-600)}
/* The allergy consent: a step of its own under the allergens, not one more checkbox among them (10 Oct 2026). */
.wrk-shop-consent{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:20px;background:var(--cream-50);border:1.5px solid var(--cream-300)}
.wrk-shop-consent h3{margin:0;font:800 18px/1.2 var(--font-display);color:var(--green-900)}
.wrk-shop-consent>p{margin:0;font:400 15px/1.5 var(--font-body);color:var(--ink-700)}
.wrk-shop-consent .wrk-shop-consent__msg{font:600 14px/1.4 var(--font-body);color:var(--red-600,#B42318)}
.wrk-shop-consent:has(.wrk-shop-consent__msg){border-color:var(--red-600,#B42318)}

/* UK postcode check: streets to pick, and the data's credit line (Open Government Licence). */
.wrk-shop-streets{grid-column:1/-1;display:grid;gap:10px}
.wrk-shop-wrap{flex-wrap:wrap;gap:8px}
.wrk-shop-credit{margin:8px 0 0;font:400 12px/1.5 var(--font-body);color:var(--ink-500,#6B6B6B)}

/* Order summary beside the steps (1000 px and wider, where it follows the page). On a short screen (a 1366 x 768 laptop leaves
   about 657 px) the card was taller than the window, so its Continue button sat below the bottom edge until the page's very end
   (Hammad, 13 Oct). The card is held to the window (less the ~200 px above it at the top of the page) and scrolls inside, and
   its button stays at the bottom of the card. A tall
   screen sees no change: the card is shorter than the limit. */
@media (min-width:1000px){
  aside[aria-label="Order summary"]{max-height:calc(100vh - 220px);overflow-y:auto;overscroll-behavior:contain}
  aside[aria-label="Order summary"] > div:has(button) button{position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 14px var(--green-900)}
}