/* Hybrid pass: keep the photo-rich Work redesign, restore the full interactive depth. */

/* ---------- Critical layout stability ---------- */
/* Use the supplied square logo as a square mark. The previous 176x46 box made a square asset look tiny. */
header{padding:10px 0}
.nav{height:76px!important;background:rgba(255,241,216,.96)!important;border:2px solid rgba(33,21,18,.14)!important;box-shadow:0 10px 28px rgba(59,30,13,.18)!important;backdrop-filter:blur(16px)}
.brand{width:62px!important;height:62px!important;flex:0 0 62px!important;display:block!important;background:url('/tossed-and-topped-next/assets/logo-original-v1.webp') center/contain no-repeat!important;text-indent:-9999px;overflow:hidden;border-radius:10px}
.brand img,.brand b{display:none!important}
.links{margin-left:auto}

/* Never vertically center a tall hero inside a short viewport; start it below the fixed header instead. */
.hero{height:auto!important;min-height:0!important;padding:112px 0 72px!important;display:block!important;overflow:visible!important}
.hero-grid{align-items:center!important}
.hero-copy,.hero-media{min-width:0}

.flavor-grid{grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);align-items:start}
.food-photo{position:sticky;top:100px;min-height:640px;height:calc(100vh - 130px);max-height:760px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{min-height:152px;padding:17px 18px;border-radius:22px}
.card:nth-child(n){background:#fff8ec;color:var(--d)}
.card:nth-child(3n+2){background:var(--y)}
.card:nth-child(3n){background:#f2bd78}
.card:nth-child(5n){background:var(--o);color:var(--c)}
.card:nth-child(5n) p{color:#fff1d8d4}
.card .num{font-size:48px}
.card h3{font-size:27px;max-width:none;margin-right:44px}
.card p{font-size:11.5px;line-height:1.4}
.card button{font-size:11px}

/* ---------- Ten-segment spinner ---------- */
/* Explicit width prevents shrink/collapse in grid layouts. */
.wheel-wrap{width:min(100%,560px)!important;max-width:560px!important;aspect-ratio:1!important;position:relative!important;margin-inline:auto!important}
.wheel{position:absolute!important;inset:3%!important;transform-origin:50% 50%!important;background:conic-gradient(
  #ed7d14 0 36deg,#ffd12d 36deg 72deg,#f5bf78 72deg 108deg,#ff9e1b 108deg 144deg,
  #fff1d8 144deg 180deg,#ed7d14 180deg 216deg,#ffd12d 216deg 252deg,#f5bf78 252deg 288deg,
  #ff9e1b 288deg 324deg,#fff1d8 324deg 360deg
)!important}
/* JS supplies robust left/top coordinates; no calc multiplication so labels work across browsers. */
.wheel .wl10{position:absolute;z-index:2;width:92px;text-align:center;font-family:Anton,Impact,sans-serif;font-size:10px;line-height:1;text-transform:uppercase;color:var(--d);transform:translate(-50%,-50%);pointer-events:none;text-shadow:0 1px 0 rgba(255,241,216,.35)}
.wheel.spinning .wl10{opacity:.82}
/* Center control is moved OUTSIDE the rotating wheel by JS. */
.spin-center{position:absolute!important;z-index:6!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:31%!important;aspect-ratio:1!important;border-radius:50%!important;border:6px solid var(--c)!important;background:var(--d)!important;color:var(--c)!important;font-family:Anton,Impact,sans-serif!important;font-size:clamp(20px,2.1vw,29px)!important;line-height:.9!important;box-shadow:0 8px 20px rgba(0,0,0,.22)!important}
.spin-center:active{transform:translate(-50%,-50%) scale(.96)!important}
.pointer{z-index:7!important}

/* ---------- Richer order flow ---------- */
.modal-card{width:min(690px,100%)!important}
.order-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0 22px}
.order-progress span{height:6px;border-radius:999px;background:#2115121c;transition:.2s}
.order-progress span.active{background:var(--o)}
.order-step{display:none}
.order-step.active{display:block}
.order-step h3{font-size:32px;margin:0 0 5px}
.order-step>p{margin:0 0 17px;color:var(--m2);font-size:13px;line-height:1.5}
.order-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.order-mode{border:2px solid var(--d);border-radius:15px;background:#fff;padding:13px;font-weight:900;text-align:left}
.order-mode.active{background:var(--d);color:var(--c)}
.order-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-card input,.modal-card textarea{width:100%;margin-top:7px;padding:13px;border:2px solid var(--d);border-radius:14px;background:#fff;font:inherit}
.modal-card textarea{min-height:88px;resize:vertical}
.order-label{display:block;margin-bottom:11px;font-size:10px;font-weight:900;letter-spacing:.12em}
.order-label select{border-color:var(--d)!important;background:#fff!important}
.qty-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.qty-row button{width:42px;height:42px;border-radius:50%;border:2px solid var(--d);background:#fff;font-size:20px;font-weight:900}
.qty-row b{min-width:34px;text-align:center;font-family:Anton;font-size:28px}
.order-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.order-nav .btn{min-width:120px}
.order-nav .back{background:#fff;border:2px solid var(--d);box-shadow:none;color:var(--d)}
.summary{margin-top:15px!important}
.order-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 9px}
.order-actions .btn{width:100%}
.order-note{display:block;color:var(--m2);font-size:10px;line-height:1.45}
.half-order-grid{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.half-order-grid.show{display:grid}

@media(max-width:1024px){
 .hero{padding-top:110px!important}
 .brand{width:58px!important;height:58px!important;flex-basis:58px!important}
}
@media(max-width:900px){
 .flavor-grid{grid-template-columns:1fr}.food-photo{position:relative;top:auto;height:auto;min-height:390px;max-height:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wheel-wrap{width:min(92vw,500px)!important}
}
@media(max-width:820px){
 .nav{height:68px!important;padding-left:10px!important}.brand{width:54px!important;height:54px!important;flex-basis:54px!important}
 .hero{padding-top:98px!important}
}
@media(max-width:620px){
 .nav{height:64px!important}.brand{width:50px!important;height:50px!important;flex-basis:50px!important}
 .cards{grid-template-columns:1fr}.card{min-height:130px}.card h3{font-size:25px}.food-photo{min-height:310px}
 .wheel-wrap{width:min(88vw,430px)!important}.wheel .wl10{width:72px;font-size:8px}.spin-center{width:30%!important;border-width:5px!important;font-size:20px!important}
 .order-two,.order-actions,.half-order-grid{grid-template-columns:1fr}.order-modes{grid-template-columns:1fr}.modal-card{padding:22px!important}.order-step h3{font-size:28px}
}
@media(max-width:390px){
 .brand{width:46px!important;height:46px!important;flex-basis:46px!important}.wheel .wl10{font-size:7px;width:64px}.spin-center{font-size:18px!important}
}