/*
 * La Ruota order page (/store/<store>), 2026 design (handoff 02-order-online.html).
 *
 * Loaded on the store page only, after styles_s.css, and scoped to body.lr-p-store. The older
 * sheet still styles the parts drawn by the Vue components (product window, cart, deals, combo
 * builder); this one lays the page out as the handoff does and gives those parts its look. Where
 * the older sheet reaches an element through #r-area, so do these rules, to stay the stronger ones.
 */

body.lr-p-store {
  background: var(--lr-ground);
}

/* ---------------------------------------------------------------- layout */

.lr-p-store .lr-store {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  /* full width like the site header; centred only on very wide screens */
  max-width: 1920px;
  margin: 0 auto;
  padding: 24px 32px 80px;
  color: var(--lr-ink);
}

.lr-p-store .lr-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* The menu and the cart beside each other; the cart column only exists while it has items. */
.lr-p-store #r-area {
  min-height: 0;
  margin-top: 0;
  background: none;
  color: var(--lr-ink);
}

.lr-p-store #r-area .s_width {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.lr-p-store #r-area .l {
  order: 1;
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
}

.lr-p-store #r-area .r {
  order: 2;
  flex: none;
  float: none;
  width: auto;
}

.lr-p-store #r-area .clear {
  display: none;
}

/* ---------------------------------------------------------------- rail: menu */

.lr-p-store #s-menu {
  position: static;
  width: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--lr-card);
  box-shadow: 0 10px 30px -18px rgba(60, 40, 15, .25);
  text-align: left;
  z-index: auto;
}

.lr-p-store #s-menu .s_width {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.lr-p-store #s-menu .l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  float: none;
}

.lr-p-store #s-menu .r {
  display: none;
}

.lr-p-store #s-menu .sm {
  display: flex;
  align-items: center;
  gap: 11px;
  grid-column: 1 / -1;
  padding: 12px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--lr-ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.lr-p-store #s-menu .sm:hover {
  background: #F7F5F3;
}

.lr-p-store #s-menu .sm.aktif {
  background: var(--lr-red);
  color: #fff;
  cursor: default;
}

.lr-p-store #s-menu .sm .lr-ico {
  width: 19px;
  height: 19px;
  flex: none;
  object-fit: contain;
}

.lr-p-store #s-menu .sm.aktif .lr-ico {
  filter: invert(1) brightness(2);
}

/* MENU and DEALS: a two-part switch above the categories */
/* (the older sheet draws a divider on DEALS through two ids) */
.lr-p-store #s-menu #btn_s_deals {
  border: 0;
}

.lr-p-store #s-menu .sm.sm-tab {
  grid-column: auto;
  justify-content: center;
  margin-bottom: 4px;
  padding: 10px 6px;
  border: 0;
  background: var(--lr-ground);
  color: var(--lr-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lr-p-store #s-menu .sm.sm-tab.aktif {
  background: var(--lr-ink);
  color: #fff;
}

/* ---------------------------------------------------------------- rail: store */

.lr-p-store .lr-store-card {
  flex: none;
  padding: 16px;
  border-radius: 14px;
  background: var(--lr-ink);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .4);
  color: #fff;
  line-height: 1.4;
}

.lr-p-store .lr-store-card .lr-hd {
  color: rgba(255, 255, 255, .5);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.lr-p-store .lr-store-card h3 {
  margin: 5px 0 9px;
  font-size: 19px;
  font-weight: 500;
}

.lr-p-store .lr-store-card p,
.lr-p-store .lr-store-card .lr-hrs {
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  line-height: 1.55;
}

.lr-p-store .lr-store-card .lr-tel {
  display: inline-block;
  margin-top: 6px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.lr-p-store .lr-store-card .lr-hrs {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--lr-rule-dark);
  font-size: 12px;
}

.lr-p-store .lr-store-card .lr-avail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--lr-rule-dark);
  font-size: 12.5px;
}

.lr-p-store .lr-store-card .lr-avail .s0 {
  opacity: .5;
}

.lr-p-store .lr-store-card .lr-avail i {
  margin-right: 6px;
  color: var(--lr-gold);
}

.lr-p-store .lr-store-card .lr-change {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--lr-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.lr-p-store .lr-store-card .lr-change:hover {
  color: var(--lr-gold);
}

.lr-p-store .lr-selstore {
  padding: 22px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  cursor: pointer;
}

.lr-p-store .lr-selstore:hover {
  background: var(--lr-red);
}

.lr-p-store .lr-flag img {
  display: block;
  width: 120px;
  max-width: 100%;
  height: auto;
  margin: 4px auto 0;
}

/* ---------------------------------------------------------------- banners */

.lr-p-store #r-area .l .camp {
  margin-bottom: 24px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--lr-card);
  box-shadow: 0 14px 40px -22px rgba(60, 40, 15, .3);
}

.lr-p-store #r-area .l .camp img {
  display: block;
  width: 100%;
}

.lr-p-store #r-area .l .camp-slider {
  margin-bottom: 24px;
}

.lr-p-store #r-area .l .camp-slider .camp {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- menu items */

.lr-p-store .m-item.select .p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Create Your Own / Half & Half: two cards across the top */
.lr-p-store .m-item .p .hhcyo.y {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: auto;
  margin: 0 0 8px;
}

.lr-p-store .m-item .p .hhcyo.y .io {
  display: flex;
  align-items: center;
  gap: 20px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 26px 28px;
  border: 0;
  border-radius: 18px;
  background: var(--lr-card);
  box-shadow: 0 10px 30px -18px rgba(60, 40, 15, .25);
  color: var(--lr-ink);
  text-align: left;
  cursor: pointer;
  transition: background .3s, color .3s, transform .4s var(--lr-ease);
}

.lr-p-store .m-item .p .hhcyo.y .io:hover {
  background: var(--lr-ink);
  color: #fff;
  transform: translateY(-4px);
}

.lr-p-store .hhcyo .lr-bico {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  transition: transform .6s cubic-bezier(.34, 1.5, .64, 1);
}

.lr-p-store .hhcyo .lr-bico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lr-p-store .hhcyo .io:hover .lr-bico {
  transform: rotate(-20deg) scale(1.15);
}

.lr-p-store .hhcyo .io:hover .lr-bico img {
  filter: invert(1) brightness(2);
}

.lr-p-store .hhcyo .lr-btitle {
  display: block;
  padding: 0;
  color: inherit;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.15;
  text-shadow: none;
}

.lr-p-store .hhcyo .lr-barr {
  display: block;
  margin-left: auto;
  padding: 0;
  color: var(--lr-gold);
  font-size: 22px;
  text-shadow: none;
  transition: transform .3s;
}

.lr-p-store .hhcyo .io:hover .lr-barr {
  transform: translateX(6px);
}

/* the category's heading over its items */
.lr-p-store .lr-sechd {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.lr-p-store .lr-sechd .lr-ico {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
}

.lr-p-store .lr-sechd h2 {
  margin: 0;
  color: var(--lr-ink);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* one menu item (styles.css gives every third item a right margin with !important, which
   would narrow those cards in the grid, so the margin is cleared the same way) */
.lr-p-store #r-area .m-item .p .i {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  background: var(--lr-card);
  box-shadow: 0 12px 30px -22px rgba(60, 40, 15, .32);
  cursor: pointer;
  transition: box-shadow .35s, transform .35s var(--lr-ease);
}

.lr-p-store #r-area .m-item .p .i:hover {
  box-shadow: 0 30px 44px -24px rgba(60, 40, 15, .45);
  transform: translateY(-3px);
}

.lr-p-store #r-area .m-item .p .i .ia {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 8px;
  overflow: hidden;
  background: #fff;
}

.lr-p-store #r-area .m-item .p .i img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  /* whole picture: the menu has tall bottles as well as round pizzas */
  object-fit: contain;
  transition: transform 1s var(--lr-ease);
}

.lr-p-store #r-area .m-item .p .i:hover img {
  transform: scale(1.08);
}

.lr-p-store #r-area .m-item .p .i .y {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: auto;
  padding: 14px 14px 16px;
  color: var(--lr-ink);
}

.lr-p-store #r-area .m-item .p .i .y h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.lr-p-store #r-area .m-item .p .i .y .desc {
  margin: 6px 0 14px;
  color: var(--lr-muted);
  font-size: 12px;
  line-height: 1.5;
}

.lr-p-store #r-area .m-item .p .i .y .btn {
  margin: auto 0 0;
  text-align: center;
}

.lr-p-store #r-area .m-item .p .i .y .btn div {
  display: block;
  padding: 10px 0;
  border-radius: 999px;
  background: var(--lr-ground);
  color: var(--lr-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}

.lr-p-store #r-area .m-item .p .i:hover .y .btn div {
  background: var(--lr-red);
  color: #fff;
}

.lr-p-store #r-area .m-item .p .i .deal-tag {
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--lr-red);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lr-p-store #r-area .m-item .p .y .deal-line {
  margin: -6px 0 14px;
  color: var(--lr-red);
  font-size: 12px;
}

/* the starting price and its size, right above ORDER (page_store.php $lr_card_price) */
.lr-p-store #r-area .m-item .p .i .y .lr-price {
  margin: auto 0 10px;
  color: var(--lr-ink);
  font-size: 13px;
  line-height: 1.35;
}

.lr-p-store #r-area .m-item .p .i .y .lr-price b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lr-p-store #r-area .m-item .p .i .y .lr-price span {
  color: var(--lr-muted);
}

.lr-p-store #r-area .m-item .p .i .y .lr-price + .btn {
  margin-top: 0;
}

.lr-p-store #r-area .nutalert {
  margin: 14px 0 0;
  color: var(--lr-red);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

.lr-p-store #r-area .nutalert + .nutalert {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- cart (<cart-area>) */

.lr-p-store #r-area .ra.cart {
  color: var(--lr-ink);
}

.lr-p-store #r-area .ra.cart h3 {
  margin: 0 0 6px;
  padding: 0;
  color: var(--lr-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}

.lr-p-store #r-area .ra.cart .item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--lr-rule-soft);
}

.lr-p-store #r-area .ra.cart .item .del {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 50%;
  background: var(--lr-ground);
  color: var(--lr-muted);
  font-size: 10px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.lr-p-store #r-area .ra.cart .item .del:hover {
  background: var(--lr-red);
  color: #fff;
}

.lr-p-store #r-area .ra.cart .item .d {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.lr-p-store #r-area .ra.cart .item .d .name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.lr-p-store #r-area .ra.cart .item .d .desc {
  margin-top: 4px;
  color: var(--lr-muted);
  font-size: 12px;
  line-height: 1.45;
}

.lr-p-store #r-area .ra.cart .item .p {
  flex: none;
  margin: 0 0 0 auto;
  font-weight: 600;
}

/* deposit, subtotal, tax: lines with only an amount */
.lr-p-store #r-area .ra.cart .item:has(> .p:only-child) {
  padding: 3px 0;
  border: 0;
}

.lr-p-store #r-area .ra.cart .item .p:only-child {
  color: var(--lr-muted);
  font-size: 13px;
  font-weight: 500;
}

.lr-p-store #r-area .ra.cart .total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--lr-rule);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
}

.lr-p-store #r-area .ra.cart .ara20 {
  height: 14px;
}

.lr-p-store #r-area .ra.cart .tac .btn.dib {
  display: block;
}

/* "Add more items" closes the phone drawer; on wider screens it stays hidden, as before */
.lr-p-store #r-area .ra.cart .tac .btn.cancel {
  display: none;
}

.lr-p-store #r-area .ra.cart .tac .btn.dib a,
.lr-p-store #r-area .ra.cart .tac .btn.dib > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 18px;
  border-radius: 999px;
  background: var(--lr-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter .2s, transform .2s;
}

.lr-p-store #r-area .ra.cart .tac .btn.dib a:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.lr-p-store #r-area .ra.cart .tac .btn.dib svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.lr-p-store #r-area .ra.cart .tac .btn.cancel > div {
  margin-top: 8px;
  background: var(--lr-ground);
  color: var(--lr-ink);
}

.lr-p-store .ra.cart .cps {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--lr-rule);
  border-radius: 12px;
  background: #F6F3EF;
}

.lr-p-store .ra.cart .cps .b {
  border-radius: 999px;
  background: var(--lr-red);
}

@media (min-width: 761px) {
  .lr-p-store #r-area .r .ra.cart {
    position: sticky;
    top: 92px;
    width: 340px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--lr-card);
    box-shadow: 0 18px 50px rgba(60, 40, 15, .12), 0 2px 6px rgba(60, 40, 15, .05);
  }

  .lr-p-store #r-area .ra.cart .o-area {
    padding: 22px 20px 20px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .lr-p-store #r-area .r .ra.cart {
    top: 128px;
    width: 300px;
  }
}

/* phones: the cart stays the drawer it always was, now over the site header as before */
@media (max-width: 760px) {
  .lr-p-store #r-area .ra.cart {
    z-index: 60;
    padding: 0;
  }

  .lr-p-store #r-area .ra.cart .o-area {
    padding: 22px 20px 30px;
  }

  /* the drawer's title bar, with its close button on it */
  .lr-p-store #r-area .ra.cart h3 {
    margin: -22px -20px 14px;
    padding: 20px 56px 18px 20px;
    background: var(--lr-ink);
    color: #fff;
  }

  .lr-p-store #r-area .ra.cart .tac .btn.cancel {
    display: block;
  }
}

/* ---------------------------------------------------------------- deals tab */

/* The engine's deals keep the sideways cards of styles_s.css (one offer per row, then the banners
   under "More offers"); they take the menu cards' look. */
.lr-p-store .deals-section {
  padding: 4px 0 24px;
}

.lr-p-store .deals-grid {
  gap: 16px;
}

.lr-p-store .deals-grid > .deal-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 40px -22px rgba(60, 40, 15, .3);
  transition: transform .25s var(--lr-ease), box-shadow .25s var(--lr-ease);
}

.lr-p-store .deals-grid > .deal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -22px rgba(60, 40, 15, .4);
}

.lr-p-store .deals-grid > .deal-card > .deal-card-body {
  padding: 22px 26px;
}

.lr-p-store .deal-card-badge span {
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--lr-ink);
  color: var(--lr-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.lr-p-store .deal-card-title {
  color: var(--lr-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lr-p-store .deal-card-desc {
  color: var(--lr-muted);
  font-size: 13px;
  line-height: 1.55;
}

.lr-p-store .deal-card-savings {
  color: var(--lr-gold);
  font-size: 14px;
  font-weight: 600;
}

/* the action is the menu cards' pill, red under the pointer */
.lr-p-store .deals-grid .deal-card-cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lr-ground);
  color: var(--lr-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lr-p-store .deals-grid .deal-card:hover .deal-card-cta {
  background: var(--lr-red);
  color: #fff;
}

/* while the deals load: placeholders shaped like the cards that follow */
.lr-p-store .deals-loading {
  flex-direction: column;
  gap: 16px;
}

.lr-p-store .deals-skeleton {
  display: flex;
  gap: 24px;
  width: auto;
  padding: 0 24px 0 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 14px 40px -22px rgba(60, 40, 15, .3);
}

.lr-p-store .deals-skeleton .ds-img {
  flex: 0 0 210px;
  height: 152px;
  margin: 0;
  border-radius: 0;
}

.lr-p-store .deals-skeleton .ds-lines {
  flex: 1;
  justify-content: center;
}

.lr-p-store .ds-img,
.lr-p-store .ds-line {
  background-image: linear-gradient(90deg, var(--lr-rule-soft) 25%, #F6F3EF 50%, var(--lr-rule-soft) 75%);
}

.lr-p-store .deals-empty {
  padding: 56px 20px;
}

.lr-p-store .deals-empty-icon {
  color: var(--lr-gold);
  font-size: 40px;
  opacity: 1;
}

.lr-p-store .deals-empty-title {
  color: var(--lr-ink);
  font-size: 22px;
  font-weight: 700;
}

.lr-p-store .deals-empty-sub {
  color: var(--lr-muted);
  font-size: 14px;
}

.lr-p-store .deals-banners-title {
  margin: 10px 0 14px;
  color: var(--lr-ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

.lr-p-store .deals-banners .camp {
  border-radius: 18px;
  box-shadow: 0 14px 40px -22px rgba(60, 40, 15, .3);
}

/* ---------------------------------------------------------------- combo builder */

/* the product window's language: ink header, warm body, white steps, red Add to Order */
.lr-p-store .combo-builder-overlay {
  background: rgba(4, 4, 4, .6);
}

.lr-p-store .combo-builder-modal {
  max-width: 720px;
  border-radius: 22px;
  background: #F6F3EF;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.lr-p-store .cb-header {
  padding: 28px 64px 24px;
  background: var(--lr-ink);
}

.lr-p-store .cb-header h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lr-p-store .cb-price {
  color: var(--lr-gold);
  font-size: 26px;
  font-weight: 600;
}

/* the round close button, light on the dark header */
.lr-p-store .cb-close {
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  transition: background .2s;
}

.lr-p-store .cb-close:hover {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.lr-p-store .cb-body {
  padding: 22px;
}

.lr-p-store .cb-slot {
  padding: 22px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  box-shadow: 0 10px 30px -22px rgba(60, 40, 15, .35);
}

.lr-p-store .cb-slot.cb-slot-completed {
  border-color: var(--lr-gold);
}

.lr-p-store .cb-slot-num {
  background: var(--lr-ink);
  font-weight: 700;
}

.lr-p-store .cb-slot-completed .cb-slot-num {
  background: var(--lr-gold);
}

.lr-p-store .cb-slot-label {
  color: var(--lr-ink);
  font-size: 19px;
  font-weight: 700;
}

.lr-p-store .cb-slot-req {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(173, 29, 29, .08);
  color: var(--lr-red);
  font-weight: 700;
  letter-spacing: .12em;
}

.lr-p-store .cb-slot-done,
.lr-p-store .cb-change {
  color: var(--lr-gold);
}

.lr-p-store .cb-sel-top strong {
  color: var(--lr-ink);
  font-weight: 700;
}

.lr-p-store .cb-prod {
  border: 1.5px solid var(--lr-rule-soft);
  border-radius: 16px;
  color: var(--lr-ink);
  font-weight: 600;
}

.lr-p-store .cb-prod:hover {
  border-color: var(--lr-ink);
  box-shadow: 0 12px 28px -18px rgba(60, 40, 15, .4);
}

.lr-p-store .cb-spinner {
  border-top-color: var(--lr-gold);
}

/* sizes: the product window's size buttons */
.lr-p-store .cb-size {
  border: 1.5px solid var(--lr-rule);
  border-radius: 12px;
  background: #fff;
}

.lr-p-store .cb-size:hover {
  border-color: var(--lr-ink);
}

.lr-p-store .cb-size.active {
  border-color: var(--lr-ink);
  background: var(--lr-ink);
  color: #fff;
}

.lr-p-store .cb-size-name {
  font-weight: 700;
}

.lr-p-store .cb-size.active .cb-size-price {
  color: var(--lr-gold);
  opacity: 1;
}

/* toppings: chosen ones in red, as on the ingredient cards */
.lr-p-store .cb-customize {
  border: 0;
  border-radius: 14px;
  background: #F6F3EF;
}

.lr-p-store .cb-customize-head {
  background: #F6F3EF;
  color: var(--lr-ink);
  font-weight: 700;
}

.lr-p-store .cb-customize-head:hover {
  background: var(--lr-rule-soft);
}

.lr-p-store .cb-extras-badge {
  background: var(--lr-ink);
  color: var(--lr-gold);
  font-weight: 700;
}

.lr-p-store .cb-group-name {
  color: var(--lr-muted);
  font-weight: 700;
}

.lr-p-store .cb-option {
  border: 1.5px solid var(--lr-rule);
  background: #fff;
  font-weight: 500;
}

.lr-p-store .cb-option:hover {
  border-color: var(--lr-ink);
  background: #fff;
}

.lr-p-store .cb-option.selected {
  border-color: var(--lr-red);
  background: var(--lr-red);
  color: #fff;
}

.lr-p-store .cb-opt-price {
  color: var(--lr-gold);
}

.lr-p-store .cb-option.selected .cb-opt-price {
  color: rgba(255, 255, 255, .85);
}

.lr-p-store .cb-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--lr-rule-soft);
}

.lr-p-store .cb-submit {
  padding: 18px;
  border-radius: 999px;
  background: var(--lr-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lr-p-store .cb-submit:not(:disabled):hover {
  background: var(--lr-red);
  color: #fff;
  filter: brightness(1.1);
}

.lr-p-store .cb-submit:disabled {
  background: var(--lr-rule);
  color: var(--lr-muted);
}

@media (max-width: 760px) {
  .lr-p-store .deals-grid {
    gap: 12px;
  }

  .lr-p-store .deals-grid > .deal-card {
    border-radius: 16px;
  }

  .lr-p-store .deals-grid > .deal-card > .deal-card-body {
    padding: 12px 14px;
  }

  .lr-p-store .deal-card-badge span {
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 9px;
  }

  .lr-p-store .deal-card-title {
    font-size: 16px;
  }

  .lr-p-store .deal-card-desc {
    font-size: 12px;
  }

  .lr-p-store .deals-grid .deal-card-cta {
    padding: 8px 14px;
    font-size: 10px;
  }

  .lr-p-store .deals-skeleton .ds-img {
    flex-basis: 116px;
    height: 126px;
  }

  .lr-p-store .deals-banners-title {
    font-size: 21px;
  }

  /* the builder stays the sheet that rises from the bottom */
  .lr-p-store .combo-builder-modal {
    border-radius: 22px 22px 0 0;
  }

  .lr-p-store .cb-header {
    padding: 22px 60px 18px;
  }

  .lr-p-store .cb-header h2 {
    font-size: 19px;
  }

  .lr-p-store .cb-price {
    font-size: 22px;
  }

  .lr-p-store .cb-close {
    top: 14px;
    right: 14px;
  }

  .lr-p-store .cb-body {
    padding: 14px;
  }

  .lr-p-store .cb-slot {
    padding: 16px;
  }

  .lr-p-store .cb-slot-label {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1100px) {
  .lr-p-store .lr-store {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 60px;
  }

  /* The rail becomes a bar of chips under the site header, then the store. The rail itself steps
     out of the layout so the bar can stay stuck for the whole page, as the old fixed bar did. */
  .lr-p-store .lr-rail {
    display: contents;
  }

  .lr-p-store #s-menu {
    position: sticky;
    top: 60px;
    z-index: 30;
    padding: 10px 16px;
    overflow-x: auto;
    border-radius: 0;
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .35);
    scrollbar-width: none;
  }

  .lr-p-store #s-menu::-webkit-scrollbar {
    display: none;
  }

  .lr-p-store #s-menu .l {
    display: flex;
    gap: 6px;
    width: max-content;
  }

  .lr-p-store #s-menu .sm,
  .lr-p-store #s-menu .sm.sm-tab {
    flex: none;
    margin: 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--lr-ground);
    font-size: 13px;
    white-space: nowrap;
  }

  .lr-p-store #s-menu .sm.sm-tab {
    font-size: 10.5px;
  }

  .lr-p-store #s-menu .sm .lr-ico {
    width: 16px;
    height: 16px;
  }

  .lr-p-store .lr-store-card {
    margin: 0 16px;
  }

  .lr-p-store .lr-flag {
    display: none;
  }

  .lr-p-store #r-area .s_width {
    padding: 0 16px;
  }

  .lr-p-store .lr-sechd h2 {
    font-size: 26px;
  }
}

@media (max-width: 760px) {
  .lr-p-store #r-area .s_width {
    display: block;
  }

  /* one line for the store: name and address, Change Store on the right */
  .lr-p-store .lr-store-card:not(.lr-selstore) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    padding: 14px 16px;
  }

  .lr-p-store .lr-store-card .lr-hd {
    display: none;
  }

  /* the store's hours and Delivery / Pickup stay under the address, as the old site showed them on phones */
  .lr-p-store .lr-store-card .lr-hrs,
  .lr-p-store .lr-store-card .lr-avail {
    grid-column: 1 / -1;
  }

  .lr-p-store .lr-store-card .lr-hrs {
    margin-top: 10px;
    padding-top: 10px;
  }

  .lr-p-store .lr-store-card .lr-avail {
    flex-direction: row;
    gap: 16px;
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
    font-size: 12px;
  }

  .lr-p-store .lr-store-card h3 {
    margin: 0 0 2px;
    font-size: 16px;
  }

  .lr-p-store .lr-store-card p {
    font-size: 12px;
  }

  .lr-p-store .lr-store-card .lr-change {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .lr-p-store .m-item.select .p {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .lr-p-store .m-item .p .hhcyo.y {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lr-p-store .m-item .p .hhcyo.y .io {
    padding: 18px 20px;
  }

  .lr-p-store .hhcyo .lr-btitle {
    font-size: 20px;
  }

  .lr-p-store #r-area .m-item .p .i .y {
    padding: 12px 12px 14px;
  }

  .lr-p-store #r-area .m-item .p .i .y h4 {
    font-size: 15px;
  }

  .lr-p-store #r-area .l .camp {
    margin-bottom: 14px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-p-store #r-area .m-item .p .i,
  .lr-p-store #r-area .m-item .p .i img,
  .lr-p-store .hhcyo .io,
  .lr-p-store .hhcyo .lr-bico,
  .lr-p-store .hhcyo .lr-barr {
    transition: none;
  }
}