@import url("/tossed-and-topped-next/branches-polish.css?v=26");
@import url("/tossed-and-topped-next/order-preview-cleanup.css?v=27");
/* Final audit pass: presentation-safe responsive, accessibility, and conversion polish. */
:where(button,a,select,input,textarea):focus-visible{outline:3px solid var(--y);outline-offset:3px}
#surprise{display:none!important}
.skip-link{position:fixed;z-index:500;left:12px;top:12px;transform:translateY(-160%);padding:10px 14px;border:2px solid var(--d);border-radius:999px;background:var(--c);color:var(--d);font-weight:900;text-decoration:none;transition:transform .18s ease}.skip-link:focus{transform:none}

/* Slim navigation rail with a softly raised brand pocket. */
header{padding-top:10px!important}
.nav{height:54px!important;padding:5px 8px 5px 14px!important;overflow:visible!important}
.nav>.btn{min-height:40px!important;padding:10px 19px!important;box-shadow:0 5px 0 var(--m)!important}
.brand{position:relative!important;display:block!important;width:142px!important;height:54px!important;flex:0 0 142px!important;text-indent:0!important;overflow:visible!important;background:none!important;border-radius:0!important}
.brand:before{display:none!important}
.brand img{display:block!important;position:absolute!important;z-index:1;left:50%!important;top:50%!important;width:88px!important;height:101px!important;object-fit:contain!important;margin:0!important;transform:translate(-50%,-39%)!important}
.brand b{display:block!important;position:absolute!important;z-index:3;left:50%!important;top:65%!important;transform:translate(-50%,-50%)!important;font:800 14.35px/.92 "DM Sans",Arial,sans-serif!important;letter-spacing:-.06em!important;text-transform:uppercase!important;color:var(--d)!important;white-space:nowrap!important;text-align:center!important}
.brand i{font:inherit!important;font-style:normal!important;color:inherit!important}

/* A compact, client-friendly walkthrough of the concept order flow. */
.order-guide{padding:66px 0 72px;background:var(--c);border-bottom:3px solid var(--d)}
.order-guide-shell{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:38px;align-items:end}
.order-guide-copy h2{font-size:clamp(54px,6vw,82px);line-height:.86;margin:9px 0 16px}
.order-guide-copy h2 em{display:block;font-style:normal;color:var(--m)}
.order-guide-copy p{max-width:430px;margin:0;color:var(--m2);font-size:16px;line-height:1.55;font-weight:650}
.order-guide-copy .btn{margin-top:22px}
.order-guide-panel{min-width:0}
.order-guide-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.order-guide-step{position:relative;min-height:192px;padding:20px 18px 19px;border:3px solid var(--d);border-radius:25px;background:#fff8ec;box-shadow:6px 6px 0 var(--d);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.order-guide-step:nth-child(2){background:var(--y);transform:translateY(12px)}
.order-guide-step:nth-child(3){background:var(--o)}
.order-guide-step>span{font-family:Anton,Impact,sans-serif;font-size:50px;line-height:1;color:rgba(33,21,18,.2)}
.order-guide-step strong{display:block;font-family:Anton,Impact,sans-serif;font-size:25px;line-height:.95;text-transform:uppercase}
.order-guide-step p{margin:8px 0 0;font-size:13px;line-height:1.42;font-weight:650;color:var(--m2)}
.order-guide-step:nth-child(3) p{color:rgba(33,21,18,.78)}
.order-guide-note{display:block;margin:25px 4px 0;color:var(--m2);font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* Keep the order flow comfortable instead of turning mobile into one very long form. */
.modal-card{overscroll-behavior:contain}
.order-branch-grid,.order-flavor-grid,.half-choice-list{-webkit-overflow-scrolling:touch}

@media(max-width:820px){
 .nav{height:54px!important;overflow:visible!important;padding-left:12px!important}
 .brand{width:136px!important;height:54px!important;flex-basis:136px!important;margin-left:2px!important}
 .brand:before{left:-8px;width:146px;height:68px}
 .brand img{width:86px!important;height:99px!important;transform:translate(-50%,-39%)!important}
 .brand b{top:64.5%!important;font-size:14px!important;letter-spacing:-.06em!important}
 #menu{width:40px!important;height:40px!important;font-size:18px!important}
 .order-guide-shell{grid-template-columns:1fr;gap:28px}
 .order-guide-copy{max-width:620px}
}

@media(max-width:620px){
 html{scroll-padding-top:74px}
 body{padding-bottom:0}
 .nav{height:52px!important;overflow:visible!important;padding-left:11px!important;padding-right:7px!important}
 .brand{width:128px!important;height:50px!important;flex-basis:128px!important;margin-left:1px!important}
 .brand:before{left:-7px;width:136px;height:64px}
 .brand img{width:82px!important;height:95px!important;transform:translate(-50%,-40%)!important}
 .brand b{top:63%!important;font-size:13.25px!important;letter-spacing:-.06em!important}
 #menu{width:38px!important;height:38px!important;font-size:17px!important}
 .order-guide{padding:52px 0 58px}
 .order-guide-shell{gap:24px}
 .order-guide-copy h2{font-size:clamp(49px,14vw,66px)}
 .order-guide-copy p{font-size:15px}
 .order-guide-copy .btn{width:100%}
 .order-guide-steps{grid-template-columns:1fr;gap:10px}
 .order-guide-step{min-height:0;padding:16px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;box-shadow:5px 5px 0 var(--d)}
 .order-guide-step:nth-child(2){transform:none}
 .order-guide-step>span{font-size:42px}
 .order-guide-step strong{font-size:23px}
 .order-guide-step p{font-size:12.5px;margin-top:5px}
 .order-guide-note{margin-top:19px}
 .hero{padding-top:102px!important}
 .hero .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
 .hero .actions>.order-open,.hero .actions>a{width:100%!important;grid-column:auto!important;text-align:center!important}
 .concept{display:none!important}
 .sticky{display:flex!important;left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:auto!important;min-height:52px!important;justify-content:center!important;padding-inline:18px!important;box-shadow:0 7px 0 var(--m),0 14px 28px rgba(33,21,18,.24)!important}
 footer{padding-bottom:calc(118px + env(safe-area-inset-bottom))!important}

 .modal{align-items:end!important;padding:0!important}
 .modal-card{width:100%!important;max-width:none!important;max-height:92dvh!important;border-width:3px 3px 0!important;border-radius:28px 28px 0 0!important;padding:24px 16px calc(22px + env(safe-area-inset-bottom))!important;box-shadow:0 -10px 40px rgba(33,21,18,.32)!important}
 .modal-card>#close{position:sticky!important;float:right;top:0!important;right:0!important;z-index:5}
 .order-branch-grid,.order-flavor-grid{display:flex!important;gap:9px!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;padding:3px 2px 12px!important;margin-inline:-2px!important}
 .order-branch-grid::-webkit-scrollbar,.order-flavor-grid::-webkit-scrollbar,.half-choice-list::-webkit-scrollbar{display:none}
 .order-branch-grid .order-choice{flex:0 0 min(72vw,245px)!important;min-height:92px!important;scroll-snap-align:start!important}
 .order-flavor-grid .order-choice{flex:0 0 min(76vw,260px)!important;min-height:105px!important;scroll-snap-align:start!important}
 .half-picker-wrap{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
 .half-picker{min-width:0!important}
 .half-choice-list{display:flex!important;gap:7px!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;padding-bottom:7px!important}
 .half-choice{flex:0 0 126px!important;min-height:48px!important;scroll-snap-align:start!important}
 .order-choice-heading small{line-height:1.35}
 .order-actions,.order-nav{gap:8px!important}
 .order-actions .btn,.order-nav .btn{min-width:0!important}
}

@media(max-width:390px){
 .brand{width:120px!important;flex-basis:120px!important}.brand:before{width:128px;height:62px}.brand img{width:78px!important;height:90px!important}.brand b{top:62.5%!important;font-size:12.7px!important}
 .hero{padding-top:98px!important}
 .order-branch-grid .order-choice,.order-flavor-grid .order-choice{flex-basis:82vw!important}
 .sticky{left:9px!important;right:9px!important}
}

@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}


/* Desktop hero: complete composition with a deliberate below-the-fold peek.
   The hero stays visually whole, while the ticker + a sliver of the next
   section remain visible to invite scrolling. */
@media(min-width:1025px){
  .hero{
    box-sizing:border-box!important;
    width:100%!important;
    height:calc(100svh - 92px)!important;
    min-height:700px!important;
    max-height:none!important;
    padding:98px 0 36px!important;
    display:grid!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .hero-grid{
    height:100%!important;
    align-items:center!important;
  }
  .hero-copy{
    align-self:center!important;
  }
  .hero-media{
    align-self:center!important;
    width:min(91%,515px)!important;
  }
  .ticker{
    position:relative;
    z-index:2;
  }
}

/* Short desktop windows keep the same peek without clipping the hero. */
@media(min-width:1025px) and (max-height:820px){
  .hero{
    height:calc(100svh - 70px)!important;
    min-height:680px!important;
    padding:90px 0 28px!important;
  }
  .hero h1{
    font-size:clamp(60px,5.95vw,90px)!important;
  }
  .hero .tag{
    font-size:clamp(23px,2.25vw,32px)!important;
  }
  .hero .lead{
    font-size:15px!important;
    line-height:1.48!important;
  }
  .hero .actions,
  .hero .chips{
    margin-top:13px!important;
  }
  .hero-media{
    width:min(86%,470px)!important;
  }
}