html[data-layout="phone"] {
  --phone-header-height: 72px;
  --phone-header-padding: 6px 10px;
  --phone-progress-padding: 3px 5px 2px;
  --phone-progress-gap: 0;
  --phone-stage-padding-top: 20px;
  --phone-stage-padding-inline: 10px;
}

html[data-layout="phone"] .head {
  height: var(--phone-header-height) !important;
  padding: var(--phone-header-padding) !important;
}

html[data-layout="phone"] .progress {
  top: var(--phone-header-height) !important;
  height: 52px;
  min-height: 52px;
  padding: var(--phone-progress-padding) !important;
  gap: var(--phone-progress-gap) !important;
  align-items: flex-start;
  overflow: hidden;
}

html[data-layout="phone"] .progress .progressStep {
  position: relative;
  display: grid;
  flex: 1 1 20%;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px !important;
  grid-template-rows: 24px auto;
  place-items: start center;
  gap: 1px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #66706a;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.12;
  overflow: visible;
}

html[data-layout="phone"] .progress .progressStep::before {
  content: counter(phone-progress);
  position: relative;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #cbd1cd;
  border-radius: 50%;
  background: #f2f4f2;
  color: #69716c;
  font-size: 10px;
  font-weight: 950;
}

html[data-layout="phone"] .progress {
  counter-reset: phone-progress;
}

html[data-layout="phone"] .progress .progressStep {
  counter-increment: phone-progress;
}

html[data-layout="phone"] .progress .progressStep:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 10px;
  left: calc(50% + 11px);
  width: calc(100% - 22px);
  height: 2px;
  background: #d7dcd8;
}

html[data-layout="phone"] .progress .progressStep.completed::before {
  border-color: #006b3c;
  background: #006b3c;
  color: transparent;
}

html[data-layout="phone"] .progress .progressStep.completed:not(:last-child)::after {
  background: #006b3c;
}

html[data-layout="phone"] .progress .progressStep.current::before {
  border-color: #c8102e;
  background: #c8102e;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(200,16,46,.14);
}

html[data-layout="phone"] .progress .progressStep.completed .uiIcon {
  position: absolute;
  z-index: 3;
  top: 5px;
  width: 12px;
  height: 12px;
  color: #fff;
}

html[data-layout="phone"] .progress .progressStep > span {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

html[data-layout="phone"] .progress .progressStep.current > span {
  color: #831124;
  font-weight: 950;
}

html[data-layout="phone"] .progress .progressStep.locked {
  opacity: 1;
}

html[data-layout="phone"] .stage {
  min-width: 0;
  max-width: 100%;
  padding-top: var(--phone-stage-padding-top) !important;
  padding-right: var(--phone-stage-padding-inline) !important;
  padding-left: var(--phone-stage-padding-inline) !important;
}

html[data-layout="phone"] .grid,
html[data-layout="phone"] .grid.two,
html[data-layout="phone"] .grid.four,
html[data-layout="phone"] .halfPreview {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-layout="phone"] body[data-step] .grid.adaptiveCards {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Activate the approved mobile card geometry through the phone device layer.
 * Legacy selectors remain paired with migration aliases so markup and order
 * behavior do not need to change. */
html[data-layout="phone"] :where(.card, .c-card) {
  min-width: 0;
  max-width: 100%;
  border-radius: 16px !important;
  padding: 8px !important;
}

html[data-layout="phone"] :where(.card, .c-card):hover:not(:disabled) {
  transform: none;
}

html[data-layout="phone"] :where(.card, .c-card) :where(h2, h3) {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] :where(.card, .c-card) .price {
  white-space: nowrap;
}

html[data-layout="phone"] :where(
  .grid,
  .c-grid,
  .grid.two,
  .grid.four,
  .crustGrid,
  .crustTextGrid,
  .setCrustGrid,
  .halfPreview
) {
  min-width: 0;
  max-width: 100%;
  gap: 7px !important;
}

html[data-layout="phone"] :where(
  .grid,
  .c-grid,
  .grid.two,
  .grid.four,
  .crustGrid,
  .crustTextGrid,
  .setCrustGrid,
  .halfPreview,
  .adaptiveCards
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-layout="phone"] body[data-step] .grid.adaptiveCards {
  gap: 9px !important;
}

html[data-layout="phone"] :where(.darkBenefitCard, .darkSetCard) {
  min-width: 0;
  max-width: 100%;
  padding: 13px 8px !important;
  border-radius: 16px !important;
}

/* Keep every set option and its navigation visible in one phone viewport. */
html[data-layout="phone"] body[data-step="setChoice"] .stage {
  padding-top: 8px !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetPage {
  padding-bottom: 0 !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetTitle {
  margin-bottom: 2px !important;
  font-size: 25px !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetSub {
  margin-bottom: 6px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetGrid .darkSetCard {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-areas:
    "badge title price"
    "badge size price"
    "badge desc action";
  gap: 1px 8px !important;
  align-items: center !important;
  width: 100%;
  min-height: 91px !important;
  aspect-ratio: auto !important;
  padding: 8px 9px !important;
  text-align: left !important;
  overflow: visible !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetBadge {
  position: static !important;
  grid-area: badge;
  justify-self: start;
  max-width: 62px;
  padding: 4px 6px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-align: center;
  white-space: normal;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetCard .bestRibbon {
  top: 3px !important;
  right: 5px !important;
  padding: 2px 5px !important;
  font-size: 7px !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetCard h2 {
  grid-area: title;
  align-self: end;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetSize {
  grid-area: size;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetDesc {
  display: block !important;
  grid-area: desc;
  align-self: start;
  margin: 0 !important;
  overflow: visible !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: keep-all;
  -webkit-line-clamp: unset !important;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetPrice {
  grid-area: price;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetSelect {
  display: inline-flex !important;
  grid-area: action;
  align-self: start;
  justify-self: end;
  padding: 3px 6px !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="setChoice"] .darkSetNote {
  margin-top: 5px !important;
  padding: 5px 7px !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
}

html[data-layout="phone"] .sizeGuideGrid {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html[data-layout="phone"] :where(.sizeGuideCard, .c-size-card) {
  min-width: 0;
  min-height: 150px !important;
  padding: 9px 5px !important;
}

html[data-layout="phone"] :where(
  .optionBtn,
  .c-selection-control,
  .crustTextCard,
  .setCrustCard
) {
  min-width: 0;
  max-width: 100%;
}

html[data-layout="phone"] :where(.optionBtn, .c-selection-control) {
  min-height: 42px;
  padding: 10px 5px;
}

html[data-layout="phone"] :where(.crustTextCard, .setCrustCard) {
  min-height: 112px;
  padding: 17px 18px;
}

html[data-layout="phone"] :where(
  .optionBtn,
  .c-selection-control,
  .crustTextCard,
  .setCrustCard
):disabled {
  cursor: not-allowed;
}

html[data-layout="phone"] :where(.qty, .c-quantity-control) {
  min-width: 0;
  grid-template-columns: 42px minmax(34px, 1fr) 42px !important;
  gap: 5px !important;
}

html[data-layout="phone"] :where(.qty, .c-quantity-control) button {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  font-size: 26px !important;
  touch-action: manipulation;
}

html[data-layout="phone"] :where(.qty, .c-quantity-control) b {
  min-height: 40px;
  font-size: 20px;
}

html[data-layout="phone"] :where(
  .pic,
  .imagePic,
  .crustPic,
  .darkSetPhoto,
  .setCrustImage,
  .c-card-media
) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center !important;
}

html[data-layout="phone"] body[data-step="pizza"] :where(.card, .c-card) .imagePic {
  height: 118px !important;
  border-radius: 12px !important;
}

html[data-layout="phone"] body[data-step="side"] :where(.card, .c-card) .imagePic {
  height: 103px !important;
  border-radius: 12px !important;
}

html[data-layout="phone"] .crustPic {
  height: 92px !important;
  margin: 2px 0 6px !important;
  border-radius: 10px;
}

html[data-layout="phone"] .setCrustImage {
  height: 72px;
}

html[data-layout="phone"] .darkSetPhoto {
  height: 105px;
}

/* Keep the established CTA/order geometry, but activate it through the
 * device layer only when the runtime selects the phone portrait layout. */
html[data-layout="phone"] :where(.selectionFooter, .c-selection-footer) {
  position: fixed;
  bottom: calc(
    var(--order-summary-bottom) +
    var(--order-summary-height) +
    var(--safe-bottom)
  );
  z-index: var(--z-selection-footer);
  height: var(--selection-footer-height);
}

html[data-layout="phone"] :where(.cartbar, .c-order-summary) {
  position: fixed;
  bottom: var(--order-summary-bottom);
  z-index: var(--z-order-summary);
  height: var(--order-summary-height) !important;
}

html[data-layout="phone"] body:is(
  [data-step="topping"],
  [data-step="side"],
  [data-step="drink"],
  [data-step="accompaniment"]
) :where(.cartbar, .c-order-summary) {
  height: calc(var(--order-summary-height) + var(--safe-bottom)) !important;
  padding-bottom: calc(8px + var(--safe-bottom)) !important;
}

html[data-layout="phone"] :where(
  .selectionFooterSpacer,
  .c-selection-footer-spacer
) {
  display: block;
  height: calc(
    var(--selection-footer-height) +
    var(--order-summary-height) +
    var(--safe-bottom) +
    var(--selection-footer-margin)
  );
}

/* Keep the existing popup visuals and behavior, while constraining their
 * geometry to the phone portrait viewport selected by DeviceManager. */
html[data-layout="phone"] :where(.backdrop, .c-popup-backdrop) {
  inset: 0;
  box-sizing: border-box;
  max-width: 100vw;
  padding-top: calc(18px + var(--safe-top));
  padding-right: calc(18px + var(--safe-right));
  padding-bottom: calc(18px + var(--safe-bottom));
  padding-left: calc(18px + var(--safe-left));
  overflow-x: hidden;
}

html[data-layout="phone"] :where(
  .c-popup,
  .modal,
  .upsellModal,
  .finalUpsellModal,
  .benefitHelperModal
) {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-layout="phone"] :where(.c-popup, .modal) {
  width: min(var(--popup-width), 100%);
}

html[data-layout="phone"] :where(
  .modalBtns,
  .upsellActions,
  .finalUpsellGrid,
  .benefitActions
) {
  grid-template-columns: minmax(0, 1fr) !important;
  padding-bottom: var(--safe-bottom);
}

html[data-layout="phone"] :where(
  .modalBtns,
  .upsellActions,
  .finalUpsellGrid,
  .benefitActions
) button {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Activate the existing checkout and completion geometry for phone portrait.
 * These rules only contain and reflow the legacy UI; order state, pricing,
 * fixed CTA, and order-summary behavior remain owned by the existing layers. */
html[data-layout="phone"] body:is(
  [data-step="review"],
  [data-step="phone"],
  [data-step="payment"],
  [data-step="done"]
) {
  overflow-x: hidden;
  overflow-y: auto;
}

html[data-layout="phone"] body:is(
  [data-step="review"],
  [data-step="phone"],
  [data-step="payment"],
  [data-step="done"]
) :where(.stage, .cartPage, .summary, .done) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

html[data-layout="phone"] body[data-step="review"] :where(
  .cartOrderCard,
  .cartOrderTop,
  .cartOrderName,
  .cartOrderDesc,
  .reviewOrderCard,
  .reviewOrderHead,
  .reviewSection,
  .reviewSection li,
  .reviewDiscountBox .line
) {
  min-width: 0;
  max-width: 100%;
}

html[data-layout="phone"] body[data-step="review"] :where(
  .cartOrderName,
  .cartOrderDesc,
  .reviewOrderHead h3,
  .reviewMeta,
  .reviewSection li span:first-child,
  .reviewDiscountBox .line span
) {
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] :where(
  .cartOrderPrice,
  .reviewOrderHead > strong,
  .reviewSection li span:last-child,
  .reviewDiscountBox .line strong,
  .multiCartTotal strong
) {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .stage {
  padding-bottom: calc(18px + var(--safe-bottom)) !important;
}

html[data-layout="phone"] body[data-step="phone"] .phoneStep,
html[data-layout="phone"] body[data-step="phone"] .summary {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

html[data-layout="phone"] body[data-step="phone"] .summary {
  padding-bottom: calc(12px + var(--safe-bottom));
}

html[data-layout="phone"] body[data-step="phone"] .phoneDisplay {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(24px, 8vw, 31px) !important;
  letter-spacing: clamp(0px, 0.5vw, 2px);
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="phone"] .keypad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 420px;
  gap: 10px;
}

html[data-layout="phone"] body[data-step="phone"] .keypad button {
  width: 100%;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 14px 4px;
  touch-action: manipulation;
}

html[data-layout="phone"] :where(.field, .field input, .field select) {
  min-width: 0;
  max-width: 100%;
}

html[data-layout="phone"] body[data-step="payment"] :where(
  .summary,
  .paymentGrid,
  .paymentCard,
  .splitBox,
  .paymentSubmitBtn
) {
  min-width: 0;
  max-width: 100%;
}

html[data-layout="phone"] body[data-step="payment"] .paymentGrid {
  grid-template-columns: minmax(0, 1fr);
}

html[data-layout="phone"] body[data-step="payment"] .paymentCard {
  width: 100%;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="payment"] .summary {
  padding-bottom: calc(20px + var(--safe-bottom));
}

html[data-layout="phone"] body[data-step="payment"] .paymentSubmitBtn {
  width: 100%;
  touch-action: manipulation;
}

html[data-layout="phone"] body[data-step="done"] .stage {
  padding-bottom: calc(18px + var(--safe-bottom)) !important;
}

html[data-layout="phone"] body[data-step="done"] .done {
  width: 100%;
  padding: 28px 0 0;
  overflow-x: hidden;
}

html[data-layout="phone"] body[data-step="done"] .done .num {
  max-width: 100%;
  font-size: clamp(38px, 14vw, 58px);
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="done"] :where(
  .doneOrderLabel,
  .paymentRequiredBox,
  .doneGuide,
  .doneReserve,
  .doneHomeBtn
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="done"] .paymentRequiredBox {
  margin: 20px auto 16px;
  padding: 20px 14px;
}

html[data-layout="phone"] body[data-step="done"] .paymentRequiredBox strong {
  font-size: clamp(22px, 7vw, 27px);
}

html[data-layout="phone"] body[data-step="done"] .paymentRequiredBox span {
  font-size: clamp(17px, 5.5vw, 21px);
}

html[data-layout="phone"] body[data-step="done"] .doneHomeBtn {
  width: 100%;
  margin-bottom: var(--safe-bottom);
  touch-action: manipulation;
}

/* Pizza composition and crust touch layout exceptions. */
html[data-layout="phone"] body[data-step="mode"] .grid.two.modeChoiceGrid,
html[data-layout="phone"] body[data-step="mode"] .optionButtons.two.modeOptionButtons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html[data-layout="phone"] body[data-step="mode"] .grid.two.modeChoiceGrid .modeChoiceCard,
html[data-layout="phone"] body[data-step="mode"] .modeOptionButtons .optionBtn {
  min-height: 220px !important;
  padding: 24px 18px !important;
}

html[data-layout="phone"] body[data-step="mode"] .setCrustCard,
html[data-layout="phone"] body[data-step="crust"] .crustTextCard {
  min-height: 220px !important;
  padding: 24px 22px !important;
}

/* Mobile order selection: four actionable order types share one compact grid. */
.mobileOrderTypeGrid {
  display: none;
}

html[data-layout="phone"] body[data-step="home"] .heroChoiceGrid {
  display: none !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeCard {
  display: flex;
  min-width: 0;
  min-height: 104px;
  padding: 10px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid #087348;
  border-radius: 15px;
  background: #edf8f2;
  color: var(--v10-green);
  text-align: center;
  touch-action: manipulation;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeCard.takeout {
  border-color: var(--r);
  background: #fff1f2;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeIcon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeIcon .uiIcon {
  width: 24px;
  height: 24px;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeCard strong {
  max-width: 100%;
  color: inherit;
  font-size: 16px;
  line-height: 1.12;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeCard > span:last-child {
  max-width: 100%;
  color: #3e4741;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo {
  display: flex !important;
  width: 100%;
  height: 104px !important;
  min-height: 104px !important;
  padding: 8px 5px !important;
  gap: 3px !important;
  border: 1px solid #c65f00 !important;
  border-radius: 13px !important;
  background: #d86f00 !important;
  box-shadow: 0 3px 8px rgba(71, 38, 5, .18) !important;
  color: #fff !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo :where(h3, strong, p, .takeoutSizeNote, .takeoutDiscount) {
  color: #fff !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip :where(.happyHours, .takeoutDiscount) {
  color: #111111 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo h3 {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo :where(strong, .takeoutDiscount) {
  padding: 2px 4px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo :where(p, .takeoutSizeNote) {
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* Make the two pickup-time choices identifiable before their copy is read. */
html[data-layout="phone"] body[data-step="timing"] .timingChoiceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice {
  position: relative;
  min-height: 164px !important;
  padding: 18px 10px !important;
  border-width: 3px !important;
  color: #17211c !important;
  box-shadow: 0 6px 16px rgba(24, 37, 30, .12) !important;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

html[data-layout="phone"] body[data-step="timing"] .timingNow {
  border-color: #055c39 !important;
  background: #087348 !important;
}

html[data-layout="phone"] body[data-step="timing"] .timingReserve {
  border-color: #9f0d26 !important;
  background: #c8102e !important;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice :where(h2, p) {
  color: #ffffff !important;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoiceCheck {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  font-weight: 1000;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice:is(:active, :focus-visible, [aria-pressed="true"]) {
  border-width: 4px !important;
  box-shadow: 0 0 0 3px rgba(247, 207, 43, .5), 0 9px 20px rgba(24, 37, 30, .2) !important;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice:is(:active, :focus-visible, [aria-pressed="true"]) .timingChoiceCheck {
  opacity: 1;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice:disabled {
  border-color: #8b9490 !important;
  background: #e5e8e6 !important;
  box-shadow: none !important;
  opacity: .62;
}

html[data-layout="phone"] body[data-step="timing"] .timingChoice:hover:not(:disabled) {
  filter: saturate(1.12);
  box-shadow: 0 9px 20px rgba(24, 37, 30, .2) !important;
}

/* Five benefits occupy a stable 3-column, two-row phone grid. */
html[data-layout="phone"] body[data-step="promo"] .stage {
  padding-top: 8px !important;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitTitle {
  margin-bottom: 2px !important;
  font-size: clamp(23px, 7vw, 30px) !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitSub {
  margin-bottom: 7px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitCard {
  width: 100%;
  min-width: 0;
  min-height: 150px !important;
  height: 150px !important;
  padding: 10px 5px 8px !important;
  gap: 4px !important;
  border-radius: 13px !important;
  justify-content: center !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitIcon {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitCard h2 {
  min-height: 2.35em;
  margin: 0 !important;
  display: grid;
  place-items: center;
  font-size: clamp(13px, 3.8vw, 16px) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitCard p {
  min-height: 2.5em !important;
  margin: 0 !important;
  font-size: clamp(8px, 2.35vw, 10px) !important;
  line-height: 1.2 !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitPill {
  max-width: 100%;
  padding: 4px 5px !important;
  font-size: clamp(8px, 2.35vw, 10px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

html[data-layout="phone"] body[data-step="promo"] :where(.bestRibbon, .normalOrderGuide) {
  font-size: 8px !important;
  line-height: 1.1 !important;
}

html[data-layout="phone"] body[data-step="promo"] .normalOrderGuide {
  position: absolute;
  right: 3px;
  bottom: 4px;
  left: 3px;
  margin: 0 !important;
  text-align: center;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitNote {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Option headings sit on white sections and need maximum readable contrast. */
html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSection > h2 {
  max-width: 100%;
  color: #111111 !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .stage {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSetup {
  margin: 0;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionBtn {
  min-height: 72px;
  padding: 11px 7px;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionContinue {
  min-height: 48px;
  padding: 11px 10px;
  font-size: 18px;
  line-height: 1.2;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSection {
  margin-bottom: 3px;
  padding: 9px 10px 9px;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSection > h2 {
  margin-bottom: 7px;
  font-size: 18px;
  line-height: 1.25;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSetup > .title,
html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSetup > .sub {
  line-height: 1.25;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSetup > .title {
  margin-bottom: 3px;
  font-size: 27px;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSetup > .sub {
  margin-bottom: 4px;
  font-size: 13px;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .noPizzaCard {
  width: 100%;
  margin-bottom: 7px;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionReason {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionPrice {
  display: block;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionBtn.active {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(215, 25, 32, .14);
}

html[data-layout="phone"] body[data-step="pizzaOptions"] .optionSelectedBadge {
  top: 4px;
  right: 4px;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.15;
}

/* Half-and-half indicator and pizza list stay compact above the fixed summary. */
html[data-layout="phone"] body[data-step="pizza"] .halfSelectionIndicator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  width: 100%;
  margin-bottom: 8px;
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionSlot {
  display: grid;
  min-width: 0;
  min-height: 70px;
  padding: 5px;
  place-items: center;
  gap: 3px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--v10-green);
  text-align: center;
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionSlot.selected {
  border-style: solid;
  border-color: var(--g);
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionSlot .pic {
  width: 100%;
  height: 50px !important;
  margin: 0;
  background: #fff;
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionSlot .pic img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionSlot b {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

html[data-layout="phone"] body[data-step="pizza"] .halfSelectionPlus {
  align-self: center;
  color: var(--v10-green);
  font-size: 23px;
  font-weight: 1000;
}

html[data-layout="phone"] body[data-step="pizza"] .grid.pizzaMenuGrid.pizzaMenuGrid.pizzaMenuGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px 7px !important;
  align-items: stretch;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard {
  min-width: 0;
  min-height: 158px !important;
  padding: 6px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard[aria-pressed="true"] {
  border-color: var(--r) !important;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard .imagePic {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1.12 / 1;
  margin-bottom: 6px;
  flex: 0 0 auto;
  overflow: hidden;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard .imagePic img {
  padding: 0 !important;
  object-fit: contain !important;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard h3 {
  display: -webkit-box;
  min-height: 2.4em !important;
  margin: 2px 0 5px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
  word-break: keep-all;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-layout="phone"] body[data-step="pizza"] .pizzaMenuCard.pizzaMenuCard :where(.price, .discount, .muted) {
  font-size: 10px !important;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="pizza"] .stage {
  padding-top: 8px !important;
  padding-bottom: calc(var(--order-summary-height) + var(--safe-bottom) + 28px) !important;
  overflow-x: hidden;
}

/* Keep every order-review detail visible while using the card's horizontal space. */
html[data-layout="phone"] body[data-step="review"] .stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(104px, 1.3fr);
  column-gap: 6px;
  margin-top: -8px;
  padding: 1px 8px !important;
}

html[data-layout="phone"] body[data-step="review"] .head {
  height: 44px !important;
}

html[data-layout="phone"] body[data-step="review"] .brandLogo {
  grid-row: 2;
  width: 50px !important;
  height: 22px !important;
  max-width: 50px;
  max-height: 22px;
}

html[data-layout="phone"] body[data-step="review"] .brand {
  position: absolute;
  top: 1px;
  left: 4px;
  display: grid;
  width: 240px;
  height: 43px;
  padding: 0;
  grid-template-rows: 10px 22px 9px;
  row-gap: 1px;
  place-items: center;
  overflow: visible;
}

html[data-layout="phone"] body[data-step="review"] .brandName {
  display: block !important;
  grid-row: 1;
  max-width: 240px;
  margin: 0;
  color: #fff;
  font-size: 9px;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

html[data-layout="phone"] body[data-step="review"] .reviewBrandTagline {
  display: block !important;
  grid-row: 3;
  max-width: 240px;
  margin: 0;
  color: #fff;
  font-size: 8px;
  line-height: 9px;
  text-align: center;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .langTopBtn {
  position: absolute;
  top: 0;
  right: 2px;
  display: inline-flex;
  width: 110px;
  min-width: 110px;
  height: 44px !important;
  min-height: 44px;
  padding: 3px 4px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .langTopBtn span {
  display: inline;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"] .progress {
  top: 44px !important;
  height: 40px;
  min-height: 40px;
  padding: 1px 4px !important;
  align-items: center;
  overflow: visible;
}

html[data-layout="phone"] body[data-step="review"] .progress .progressStep {
  min-height: 38px;
  grid-template-rows: 18px auto;
  font-size: 8px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"] .progress .progressStep::before {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

html[data-layout="phone"] body[data-step="review"] .progress .progressStep:not(:last-child)::after {
  top: 8px;
  left: calc(50% + 9px);
  width: calc(100% - 18px);
}

html[data-layout="phone"] body[data-step="review"] .progress .progressStep.completed .uiIcon {
  top: 3px;
  width: 12px;
  height: 12px;
}

html[data-layout="phone"] body[data-step="review"] .progress span {
  padding: 2px 5px !important;
  font-size: 10px !important;
}

html[data-layout="phone"] body[data-step="review"] :where(.title, .sub) {
  margin-bottom: 0;
}

html[data-layout="phone"] body[data-step="review"] .title {
  grid-column: 1 / -1;
  font-size: 16px !important;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .sub {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 12px;
  line-height: 1.2;
}

html[data-layout="phone"] body[data-step="review"] .reviewOrderList {
  grid-column: 1 / -1;
  gap: 2px;
  margin-top: 0;
}

html[data-layout="phone"] body[data-step="review"] .reviewOrderCard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 7px;
  margin: 0;
  padding: 0 3px;
  border-radius: 12px;
  letter-spacing: -0.4px;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaCategory,
html[data-layout="phone"] body[data-step="review"] .cartOrderActions {
  grid-column: 1 / -1;
}

html[data-layout="phone"] body[data-step="review"] .cartCategory {
  min-width: 0;
  padding: 1px 0;
}

html[data-layout="phone"] body[data-step="review"] .cartCategory h2 {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.15;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 6px;
  padding: 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaMeta span::after {
  display: none;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaToppingLine {
  padding: 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceBreakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 7px;
  margin-top: 0;
  padding: 0 2px;
  border-radius: 9px;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine {
  gap: 4px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine.final {
  margin-top: 0;
  padding-top: 2px;
  border-top-width: 1px;
  font-size: 13px;
}

html[data-layout="phone"] body[data-step="review"] .cartItemSummary {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1px 4px;
  padding: 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .cartItemFlexibleSpace {
  display: none;
}

html[data-layout="phone"] body[data-step="review"] .cartItemName {
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] :where(.cartBenefitRow, .cartOrderTotal) {
  gap: 4px;
  min-width: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .cartOrderActions {
  gap: 5px;
  margin-top: 0;
}

html[data-layout="phone"] body[data-step="review"] .cartOrderActions button {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 10px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 5px;
  align-items: center;
  margin: 0;
  padding: 2px 4px;
  border-radius: 10px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 2px;
  font-size: 12px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMoreGrid {
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMoreGrid button {
  min-height: 44px;
  padding: 6px 3px;
  border-width: 1px;
  border-radius: 7px;
  font-size: 12px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore p {
  grid-column: 1;
  grid-row: 2;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox {
  grid-column: 1;
  grid-row: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 8px;
  margin-top: 0;
  padding: 3px 7px;
  padding-block: 1px;
  border-radius: 10px;
  letter-spacing: -0.4px;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .line {
  gap: 4px;
  padding: 1px 0;
  font-size: 12px;
  line-height: 1.05;
}

html[data-layout="phone"] body[data-step="review"] :is(
  .cartPizzaPriceLine.discount > span,
  .cartBenefitRow > span,
  .cartBenefitRow > strong
) {
  line-height: 15px;
  padding-bottom: 2px;
}

html[data-layout="phone"] body[data-step="review"] :is(
  .cartPizzaPriceLine.discount,
  .cartBenefitRow
) {
  padding-block: 0;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .totalDiscount {
  margin-top: 0;
  padding-top: 2px;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .final {
  grid-column: 1 / -1;
  margin-top: 1px;
  padding-top: 2px;
  font-size: 14px;
}

html[data-layout="phone"] body[data-step="review"] .reviewConfirmBtn {
  grid-column: 2;
  grid-row: 5;
  min-height: 44px;
  margin-top: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 16px;
}

html[data-layout="phone"] body[data-step="review"] .reviewConfirmNote {
  position: fixed;
  z-index: 39;
  right: 0;
  bottom: 44px;
  left: 0;
  margin: 0;
  padding: 1px 4px 1px 108px;
  background: #f3f5f2;
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

html[data-layout="phone"] body[data-step="review"] .cartbar {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 44px !important;
  gap: 4px;
  padding: 2px 4px !important;
  background: #17231d;
  box-shadow: 0 -2px 8px #0002;
}

html[data-layout="phone"] body[data-step="review"] :where(.cartmain, .cartprice) {
  display: block;
}

html[data-layout="phone"] body[data-step="review"] .cartmain {
  flex: 1 1 100px;
  min-width: 70px;
  max-width: none !important;
}

html[data-layout="phone"] body[data-step="review"] :where(.carttitle, .cartdetail) {
  display: block;
  font-size: 8px;
  line-height: 1.05;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] .cartprice {
  flex: 0 0 auto;
  font-size: 10px !important;
}

html[data-layout="phone"] body[data-step="review"] .cartbar button {
  width: 44px;
  min-width: 44px;
  height: 44px !important;
  min-height: 44px;
  padding: 2px !important;
  font-size: 10px !important;
}

html[data-layout="phone"] body[data-step="review"] .networkStatus {
  top: auto !important;
  right: auto !important;
  bottom: 44px !important;
  left: 4px !important;
  padding: 2px 5px !important;
  font-size: 8px !important;
}

/* Large reviews keep the approved base layout until measured content needs compression. */
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .stage {
  grid-template-columns: minmax(0, 3fr) minmax(104px, 1.3fr);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact1 .reviewOrderList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact1 .reviewOrderCard {
  padding: 2px 5px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewOrderList {
  grid-template-columns: repeat(var(--review-order-columns), minmax(0, 1fr));
  gap: 1px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewOrderCard {
  padding: 0 3px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 :where(
  .cartPizzaMeta,
  .cartPizzaToppingLine,
  .cartPizzaPriceLine,
  .cartItemSummary,
  .cartBenefitRow,
  .cartOrderTotal
) {
  font-size: 12px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartPizzaPriceBreakdown {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 0 2px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartPizzaPriceLine {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartPizzaPriceLine strong {
  margin-left: auto;
  line-height: 14px;
  letter-spacing: -2.5px;
  text-align: right;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 :where(
  .cartPizzaMeta,
  .cartPizzaToppingLine,
  .cartCategory,
  .cartItemSummary
) {
  padding-block: 0;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartItemName {
  letter-spacing: -2px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartCategory h2 {
  margin-bottom: 0;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartOrderTotal {
  padding-block: 0;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartBenefitRow {
  padding-block: 0;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .title {
  font-size: 16px !important;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartOrderActions {
  margin-top: 0;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 :where(
  .reviewAddMore,
  .reviewDiscountBox
) {
  padding-block: 0;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewAddMoreGrid button {
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding-block: 2px;
  font-size: 10px;
  line-height: 1;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewAddMore {
  grid-column: 1;
  grid-row: 4;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 3px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewAddMore h2 {
  font-size: 10px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewAddMore p {
  font-size: 8px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewConfirmBtn {
  grid-column: 2;
  grid-row: 4;
  height: 44px;
  min-height: 44px;
  padding-block: 2px;
  line-height: 1;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewDiscountBox {
  grid-column: 1 / -1;
  grid-row: 5;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: -11px;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewDiscountBox .final {
  grid-column: auto;
}

html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewDiscountBox .line {
  padding-block: 0;
  line-height: 1;
  letter-spacing: -0.8px;
}

/* Initial-order refinements stay last so legacy single-column card rules cannot win. */
html[data-layout="phone"] body[data-step="timing"] .grid.two.timingChoiceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-layout="phone"] body[data-step="timing"] .grid.two.timingChoiceGrid .card.timingChoice {
  min-height: 164px !important;
  padding: 18px 10px !important;
  border-width: 3px !important;
  color: #ffffff !important;
}

html[data-layout="phone"] body[data-step="timing"] .grid.two.timingChoiceGrid .card.timingChoice.timingNow {
  border-color: #055c39 !important;
  background: #087348 !important;
}

html[data-layout="phone"] body[data-step="timing"] .grid.two.timingChoiceGrid .card.timingChoice.timingReserve {
  border-color: #9f0d26 !important;
  background: #c8102e !important;
}

html[data-layout="phone"] body[data-step="timing"] .grid.two.timingChoiceGrid .card.timingChoice :where(h2, h2 .uiIcon, p) {
  color: #ffffff !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitPage .darkBenefitGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html[data-layout="phone"] body[data-step="promo"] .darkBenefitPage .darkBenefitGrid .darkBenefitCard {
  min-height: 150px !important;
  height: 150px !important;
  padding: 10px 5px 8px !important;
  gap: 4px !important;
  overflow: hidden !important;
}

/* Keep the white highlight pills readable over the shared orange banners. */
html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo .happyHours,
html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo .takeoutDiscount {
  color: #111111 !important;
}

/* Fill the phone home viewport without introducing page scroll. */
html[data-layout="phone"] body[data-step="home"] .darkHero {
  height: 100dvh !important;
  min-height: 100dvh !important;
  gap: 12px !important;
  padding-top: calc(18px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid {
  margin-top: 10px !important;
  gap: 10px !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard,
html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo {
  height: clamp(138px, calc((100dvh - 190px) / 2), 260px) !important;
  min-height: 0 !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard {
  padding: 16px 10px !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(20, 39, 29, .22) !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard.dinein {
  border-color: #045c38 !important;
  background: #087348 !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard.takeout {
  border-color: #980f24 !important;
  background: #c8102e !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard :where(.mobileOrderTypeIcon, strong, span) {
  color: #ffffff !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip {
  gap: 8px !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo {
  padding: 12px 6px !important;
  gap: 5px !important;
}

/* The home language control must remain readable independently of card colors. */
html[data-layout="phone"] body[data-step="home"] .heroTop > .heroLangBtn {
  border-color: #d6d9d7 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroTop > .heroLangBtn span {
  color: #111111 !important;
  text-shadow: none !important;
}

/* Phone review is a natural-height document. Keep the fixed navigation clear of
 * the final content and never compress long orders into miniature columns. */
html[data-layout="phone"] body[data-step="review"] {
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-layout="phone"] body[data-step="review"] .stage,
html[data-layout="phone"] body[data-step="review"].reviewCompact1 .stage,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .stage {
  display: block !important;
  width: 100%;
  min-height: 0 !important;
  padding: 16px 12px calc(92px + var(--safe-bottom)) !important;
  overflow: visible !important;
}

html[data-layout="phone"] body[data-step="review"] .title,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .title {
  margin: 0 0 6px;
  font-size: 24px !important;
  line-height: 1.3 !important;
}

html[data-layout="phone"] body[data-step="review"] .sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
}

html[data-layout="phone"] body[data-step="review"] .reviewOrderList,
html[data-layout="phone"] body[data-step="review"].reviewCompact1 .reviewOrderList,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewOrderList {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 0;
}

html[data-layout="phone"] body[data-step="review"] .reviewOrderCard,
html[data-layout="phone"] body[data-step="review"].reviewCompact1 .reviewOrderCard,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewOrderCard {
  display: block;
  height: auto;
  margin: 0;
  padding: 14px !important;
  border-radius: 14px;
  letter-spacing: normal;
  line-height: 1.35 !important;
  overflow: visible;
}

html[data-layout="phone"] body[data-step="review"] .cartCategory {
  padding: 10px 0;
}

html[data-layout="phone"] body[data-step="review"] .cartCategory + .cartCategory {
  border-top: 1px solid var(--line);
}

html[data-layout="phone"] body[data-step="review"] .cartCategory h2 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.3;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 0 0 8px;
  font-size: 13px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaMeta span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaToppingLine {
  align-items: flex-start;
  padding: 4px 0 9px;
  font-size: 15px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceBreakdown,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartPizzaPriceBreakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6f8f6;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .cartPizzaPriceLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine span {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine strong {
  min-width: 72px;
  margin-left: 0;
  letter-spacing: normal !important;
  text-align: right;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .cartPizzaPriceLine.final {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #b9c1ba;
  font-size: 15px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .cartItemSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(72px, auto);
  gap: 8px;
  align-items: start;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .cartItemName {
  word-break: normal;
  overflow-wrap: anywhere;
}

html[data-layout="phone"] body[data-step="review"] :where(.cartItemQuantity, .cartItemPrice) {
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] :where(.cartBenefitRow, .cartOrderTotal) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] :where(.cartBenefitRow, .cartOrderTotal) strong {
  min-width: 72px;
  text-align: right;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .cartOrderTotal {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 2px solid #222;
  font-size: 18px;
}

html[data-layout="phone"] body[data-step="review"] .cartOrderActions {
  display: grid;
  grid-template-columns: 52px 52px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

html[data-layout="phone"] body[data-step="review"] .cartOrderActions button {
  min-width: 0;
  min-height: 46px;
  padding: 8px;
  font-size: 14px;
  line-height: 1.25;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore {
  display: block;
  margin: 14px 0 0;
  padding: 14px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMoreGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMoreGrid button {
  min-width: 0;
  min-height: 46px;
  padding: 7px 4px;
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
}

html[data-layout="phone"] body[data-step="review"] .reviewAddMore p {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewDiscountBox {
  display: block;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d9dfda;
  border-radius: 14px;
  letter-spacing: normal;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .line,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewDiscountBox .line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .line strong {
  min-width: 86px;
  text-align: right;
  white-space: nowrap;
}

html[data-layout="phone"] body[data-step="review"] .reviewDiscountBox .final {
  margin-top: 6px;
  padding-top: 12px;
  font-size: 20px;
  line-height: 1.35;
}

html[data-layout="phone"] body[data-step="review"] .reviewConfirmBtn,
html[data-layout="phone"] body[data-step="review"].reviewCompact2 .reviewConfirmBtn {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 12px;
  font-size: 18px;
  line-height: 1.3;
}

html[data-layout="phone"] body[data-step="review"] .reviewConfirmNote {
  position: static;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.4;
}

/* Use existing home-card height more efficiently for larger, clearer copy. */
html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard {
  gap: 7px !important;
  padding: 12px 8px !important;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeIcon,
html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeIcon .uiIcon {
  width: 28px;
  height: 28px;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard strong {
  font-size: 20px;
  line-height: 1.2;
}

html[data-layout="phone"] body[data-step="home"] .mobileOrderTypeGrid .mobileOrderTypeCard > span:last-child {
  font-size: 12px;
  line-height: 1.3;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo {
  gap: 4px !important;
  padding: 10px 5px !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo h3 {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo :where(strong, .takeoutDiscount) {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-layout="phone"] body[data-step="home"] .heroPromoStrip .heroPromo :where(p, .takeoutSizeNote) {
  margin-block: 2px;
  font-size: 11px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
  word-break: keep-all;
}