/**
 * The bottom bar: delivery nudge, cart pill, nav row.
 *
 * One piece of bottom chrome. It reserves its own height through
 * --gms-bottom-chrome, which every other fixed thing on the storefront already
 * offsets by, so the product page's buy bar sits on top of it rather than
 * under it.
 *
 * Mobile only. On a desktop the site's own header does this job, and a bar
 * pinned across a 1440px screen is a phone pattern in the wrong place.
 */

.gms-bb { display: none; }

@media (max-width: 820px) {
  .gms-bb {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    display: grid;
    gap: 8px;
    padding: 0 10px calc(8px + env(safe-area-inset-bottom));
    pointer-events: none;
  }

  .gms-bb > * { pointer-events: auto; }

  /* Everything fixed to the bottom of the storefront offsets by this. */
  :root:has(.gms-bb) { --gms-bottom-chrome: 74px; }
}

/* ---- Free delivery nudge ------------------------------------------------- */

.gms-bb__nudge {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--gms-surface, #fff);
  box-shadow: 0 6px 22px rgba(16, 24, 40, .16);
}

.gms-bb__nudge[hidden] { display: none; }

.gms-bb__nudge-text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--gms-ink-2, #5b6270);
}

.gms-bb__nudge-text strong { font-size: .8125rem; font-weight: 700; color: var(--gms-ink, #14161a); }

.gms-bb__nudge-x {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--gms-tint, #f4f6f8);
  color: var(--gms-ink-3, #6b7280);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.gms-bb__track {
  grid-column: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--gms-tint, #eef0f3);
  overflow: hidden;
}

.gms-bb__track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gms-accent, #2563eb);
  transition: width .3s ease;
}

/* ---- Cart pill ----------------------------------------------------------- */

/* The green is not the storefront accent on purpose. This is the one control
   on the screen that means "go and pay", and it reads faster when it does not
   look like every other button. */
/* A pill sized to what it says, not a bar across the screen.
   
   Full width, it is a wall above the navigation on every page for as long as
   there is anything in the basket — and since it now stays for the whole
   visit rather than flashing and leaving, that wall is permanent. Hugging its
   own contents says the same thing and leaves the page underneath usable,
   which is the trade that makes keeping it worthwhile. */
.gms-bb__cart {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  width: auto;
  max-width: min(100%, 340px);
  margin: 0 auto;
  padding: 7px 8px 7px 7px;
  border: 0;
  /* Half the height, so it stays a pill whatever the text does to it. */
  border-radius: 999px;
  background: var(--gms-bb-cart, #10804a);
  color: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .22);
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(16, 128, 74, .3);
}

.gms-bb__cart[hidden] { display: none; }

/* The disc holding the product shot. Round, and light behind the glyph so the
   fallback does not read as a hole in the pill. */
.gms-bb__cart-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18) center / cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gms-bb__cart-icon svg { width: 19px; height: 19px; display: block; }

/* Once there is a photograph the glyph would sit on top of it, and the white
   backing stops a product shot with a pale background disappearing. */
.gms-bb__cart-icon.has-shot { background-color: #fff; }
.gms-bb__cart-icon.has-shot svg { display: none; }

.gms-bb__cart-text { display: grid; gap: 1px; min-width: 0; }
.gms-bb__cart-text strong { font-size: .9375rem; font-weight: 700; }
.gms-bb__cart-text small { font-size: .75rem; opacity: .85; }

/* The chevron gets a disc of its own, which is what makes the right-hand end
   read as a control rather than as punctuation trailing off the edge. */
.gms-bb__cart-go {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 1;
}

/* ---- Nav row ------------------------------------------------------------- */

.gms-bb__nav {
  display: flex;
  align-items: stretch;
  border-radius: 18px;
  background: var(--gms-surface, #fff);
  box-shadow: 0 6px 26px rgba(16, 24, 40, .16);
  overflow: hidden;
}

.gms-bb__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 52px so the row clears the 44px tap-target minimum with room to spare. */
  min-height: 52px;
  padding: 7px 4px;
  color: var(--gms-ink-3, #6b7280);
  text-decoration: none;
  transition: color .15s ease;
}

.gms-bb__item:hover,
.gms-bb__item.is-active { color: var(--gms-accent, #2563eb); }

.gms-bb__icon svg { width: 21px; height: 21px; display: block; }

.gms-bb__label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-only and label-only lose the gap and centre what is left. */
.gms-bb__nav--icon .gms-bb__item,
.gms-bb__nav--label .gms-bb__item { gap: 0; }
.gms-bb__nav--label .gms-bb__label { font-size: .8125rem; }

/* WhatsApp keeps its own colour wherever it sits — it is a different promise
   from the rest of the row, and the green is the whole recognition. */
.gms-bb__item--wa { color: #1faa54; }
.gms-bb__item--wa:hover { color: #17843f; }

.gms-bb__n {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gms-accent, #2563eb);
  color: #fff;
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.gms-bb__n[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gms-bb__track > span { transition: none; }
}