/*
 * Storefront additions: the basket button, the basket drawer, and the few
 * fields the product card gained (SKU and stock).
 *
 * Everything here builds on the design tokens the site already defines in
 * /_next/static/css/a5324a6cf7f9da90.css — no new colours, no new type scale.
 */

/* ---------------------------------------------------------- mobile tab bar */

/*
 * The bar is only rendered below 900px, so these overrides are mobile-only by
 * construction. Dark ground, white labels, accent for the tab you are on.
 *
 * The active rule is repeated here because this stylesheet loads after the
 * build's own: without it, the plain-tab colour below would win over the
 * original accent rule and every tab would read as white.
 */

.MobileTabBar_bar__wEHgV {
  background: var(--ink);
  border-top-color: var(--border-dark);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.3);
}

.MobileTabBar_tab__P1C80 {
  color: var(--white);
}

.MobileTabBar_tab__P1C80:active {
  background: var(--ink-soft);
}

.MobileTabBar_active__x8mWk {
  color: var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------------------- how to order */

/*
 * "How to Order", opening onto a 1 -> 2 -> 3 -> 4 stepper.
 *
 * A native <details>, so no script is involved. The arrows sit in the grid gap
 * at the height of the numbers, which keeps them on the numbers rather than
 * floating between the labels underneath.
 */

.hmmSteps {
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.hmmSteps__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Both spellings are needed: WebKit still uses its own marker pseudo-element. */
.hmmSteps__summary::-webkit-details-marker {
  display: none;
}

.hmmSteps__summary::marker {
  content: '';
}

.hmmSteps__summary:hover .hmmSteps__heading {
  opacity: 0.75;
}

.hmmSteps__heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #363636;
}

.hmmSteps__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  color: var(--muted-light);
  transition: transform 0.18s ease;
}

.hmmSteps[open] .hmmSteps__chevron {
  transform: rotate(180deg);
}

.hmmSteps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 4px 16px 20px;
  list-style: none;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.hmmSteps__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.hmmSteps__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.hmmSteps__label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--body-copy);
}

/* The connector, drawn in the gap and centred on the number above it. */
.hmmSteps__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 19px;
  right: -11px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--muted-dark);
  border-right: 2px solid var(--muted-dark);
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 600px) {
  .hmmSteps {
    margin-bottom: 30px;
  }

  .hmmSteps__summary {
    padding: 15px 20px;
  }

  .hmmSteps__list {
    gap: 30px;
    padding: 22px 20px 24px;
  }

  .hmmSteps__mark {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }

  .hmmSteps__label {
    font-size: 13.5px;
  }

  .hmmSteps__step:not(:last-child)::after {
    top: 23px;
    right: -19px;
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmmSteps__chevron {
    transition: none;
  }
}

/* ------------------------------------------------------------ product card */

/* The code and the "tap the image" hint share a row, and wrap onto two on a
   narrow card rather than being squeezed. */
.hmmCardTop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
}

.hmmSku {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.hmmHint {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}

/* Which verb to use is about the input device, not the screen width: a small
   window on a desktop still has a mouse. */
.hmmHint__click {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .hmmHint__tap {
    display: none;
  }

  .hmmHint__click {
    display: inline;
  }
}

.hmmStock {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-light);
}

.hmmStock::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2f9e44;
  vertical-align: middle;
}

.hmmStock--out {
  color: #b42318;
}

.hmmStock--out::before {
  background: #b42318;
}

/* A second and third badge stack below the first. */
.hmmBadge--1 {
  top: 37px;
}

.hmmBadge--2 {
  top: 65px;
}

.ProductCard_action__6cJNE.is-in-basket {
  background: var(--ink);
  color: var(--white);
}

.ProductCard_action__6cJNE[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.hmmEmptyGrid {
  grid-column: 1 / -1;
  padding: 32px 0;
  color: var(--muted-light);
}

/* ------------------------------------------------------- product dialog add */

.hmmBuy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream);
}

.hmmBuy__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.hmmBuy__row {
  display: flex;
  gap: 8px;
}

.hmmBuy__input {
  flex: 0 0 110px;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}

.hmmBuy__submit {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  transition: opacity 0.15s ease;
}

.hmmBuy__submit:hover {
  opacity: 0.85;
}

.hmmBuy__hint {
  font-size: 12.5px;
  color: var(--muted-light);
}

/* Shown in place of the quantity form once something has been added, so the
   shopper picks where to go next rather than being pushed into the basket. */

.hmmAdded {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream);
}

.hmmAdded__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2f9e44;
}

.hmmAdded__detail {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.hmmAdded__basket {
  font-size: 12.5px;
  color: var(--muted-light);
}

.hmmAdded__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.hmmAdded__continue,
.hmmAdded__checkout {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.hmmAdded__continue {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.hmmAdded__continue:hover {
  background: var(--ink);
  color: var(--white);
}

.hmmAdded__checkout {
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.hmmAdded__checkout:hover {
  opacity: 0.85;
}

/* Two full-width buttons do not fit side by side on the narrowest phones. */
@media (max-width: 400px) {
  .hmmAdded__actions {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------- basket FAB */

.hmmCartFab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 82px);
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 17px;
  border: 0;
  border-radius: 100px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.24);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* The display above outranks the user-agent rule for [hidden], so an empty
   basket needs the attribute spelled out here to actually hide the button. */
.hmmCartFab[hidden] {
  display: none;
}

.hmmCartFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26, 26, 26, 0.3);
}

.hmmCartFab__count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

@media (min-width: 900px) {
  .hmmCartFab {
    right: 24px;
    bottom: 92px;
  }
}

/* On a phone the button is just the count, to keep it out of the way of the
   shop. The glyph and the word are dropped; the label stays in the markup,
   unseen, and the button's aria-label still announces what it opens. */
@media (max-width: 899px) {
  .hmmCartFab > svg {
    display: none;
  }

  .hmmCartFab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* The button itself is now the badge: accent ground, ink number. */
  .hmmCartFab {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    background: var(--accent);
    color: var(--ink);
  }

  .hmmCartFab__count {
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
  }
}

/* ----------------------------------------------------------- basket drawer */

body.hmm-locked {
  overflow: hidden;
}

.hmmDrawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}

.hmmDrawer[hidden] {
  display: none;
}

.hmmDrawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hmmDrawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(430px, 100%);
  max-height: 100%;
  background: var(--white);
  box-shadow: -12px 0 40px rgba(26, 26, 26, 0.2);
  animation: hmmSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hmmSlideIn {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmmDrawer__panel {
    animation: none;
  }
}

/* The basket's header is a bar in its own right, on the same dark ground as
   the tab bar. Both interfaces: the drawer is the same object on each. */
.hmmDrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: var(--ink);
}

.hmmDrawer__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
}

.hmmDrawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-dark);
  border-radius: 100px;
  background: transparent;
  color: var(--white);
}

.hmmDrawer__close:hover {
  background: var(--ink-soft);
}

.hmmDrawer__note {
  padding: 13px 18px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-light);
}

.hmmDrawer__items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 18px 12px;
}

.hmmDrawer__empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 18px;
  color: var(--muted-light);
}

.hmmDrawer__empty[hidden] {
  display: none;
}

/* ------------------------------------------------------------ basket lines */

.hmmLine {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.hmmLine__photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--cream);
}

.hmmLine__photo--empty {
  display: block;
  border: 1px solid var(--border);
}

.hmmLine__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hmmLine__sku {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.hmmLine__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.hmmLine__price {
  font-size: 12.5px;
  color: var(--muted-light);
}

.hmmLine__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.hmmLine__total {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.hmmLine__remove {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-light);
  text-decoration: underline;
}

.hmmLine__remove:hover {
  color: #b42318;
}

.hmmQty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.hmmQty__step {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.hmmQty__step:hover {
  border-color: var(--ink);
}

.hmmQty__input {
  width: 72px;
  height: 32px;
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.hmmQty__unit {
  font-size: 12px;
  color: var(--muted-light);
}

/* ---------------------------------------------------------------- checkout */

.hmmDrawer__foot {
  border-top: 1px solid var(--border);
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  background: var(--cream);
}

.hmmDrawer__foot[hidden] {
  display: none;
}

/* Net and tax, always shown above the total. */
.hmmDrawer__sums {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.hmmDrawer__sums[hidden] {
  display: none;
}

.hmmDrawer__sumRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-light);
}

.hmmDrawer__totalRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--muted-light);
}

.hmmDrawer__totalRow strong {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
}

.hmmDrawer__checkout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hmmField {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hmmField__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.hmmField__input {
  min-height: 46px;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  color: var(--ink);
}

.hmmField__input:focus {
  border-color: var(--ink);
  outline: none;
}

/* Delivery: an opt-in, the address it needs, and the cost agreement. */

.hmmOpt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.hmmOpt input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.hmmOpt__text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.hmmDelivery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.hmmDelivery[hidden] {
  display: none;
}

.hmmField__input--area {
  min-height: 74px;
  resize: vertical;
}

/* The agreement is the small print, and should read like it — but it is still
   the thing standing between the shopper and an unnamed charge, so it stays
   legible rather than shrinking away. */
.hmmOpt--note .hmmOpt__text {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted-light);
}

.hmmField__error {
  font-size: 12.5px;
  font-weight: 600;
  color: #b42318;
}

.hmmField__error[hidden] {
  display: none;
}

.hmmDrawer__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius);
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.hmmDrawer__send:hover {
  opacity: 0.9;
}

.hmmDrawer__send[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.hmmDrawer__clear {
  min-height: 40px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-light);
  text-decoration: underline;
}

.hmmDrawer__clear:hover {
  color: #b42318;
}

/* ------------------------------------------------------------------- toast */

.hmmToast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 148px);
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 8px 26px rgba(26, 26, 26, 0.28);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.hmmToast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hmmToast[hidden] {
  display: none;
}

@media (min-width: 900px) {
  .hmmToast {
    bottom: 158px;
  }
}

/* With the drawer open the foot of the screen is the order total, so the toast
   moves to the top — clearing the basket's own header bar on the way. */
body.hmm-locked .hmmToast {
  top: calc(env(safe-area-inset-top) + 68px);
  bottom: auto;
  transform: translate(-50%, -8px);
}

body.hmm-locked .hmmToast.is-on {
  transform: translate(-50%, 0);
}