/*
 * The storefront's own additions to the design (css/site.css stays the design's, untouched):
 * the address type, the voucher and referral credit at checkout, the notes and requests on
 * Track, and the pages after checkout. Only the design's tokens are used.
 */

/* Checkout: villa or apartment, a nested fieldset that reads like a field. */
.co-form .addr-type {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.co-form .addr-type legend {
  margin: 0 0 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
}
.addr-type-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.addr-type-opts .opt {
  padding: 14px 16px;
}

/* Checkout: the voucher code and the referral credit. */
.voucher-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}
.voucher-row .btn {
  min-height: 48px;
}
.co-voucher .check {
  margin-top: 4px;
}
.co-fail {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.co-fail .err {
  color: var(--danger);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
/* Checkout, top of the form: the last payment did not go through, or is still being approved (owner, 5 Nov). */
.co-fail.co-pay-fail {
  margin: 0 0 24px;
}
.co-pay-wait p {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
/* Paymob's return: back to checkout, or stay on the page. */
.co-after-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.auth-form > .err {
  color: var(--danger);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

/* Track: the words for a cancelled, held or refused order; the return and warranty requests. */
.track-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.track-note p {
  margin: 0;
}
.track-care {
  margin-top: 48px;
  display: grid;
  gap: 16px;
}
.track-care .muted {
  margin: 0;
}
.track-care form + form {
  margin-top: 12px;
}

/* After checkout: Paymob's return and the confirmation. */
.co-after .after-facts {
  margin: 24px 0 0;
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.co-after .after-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.co-after .after-facts dt,
.co-after .after-facts dd {
  margin: 0;
}
.co-after .after-facts dd {
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.co-after [data-after-keep],
.co-after [data-after-track] {
  margin-top: 18px;
}
/* Each state's heading, line and button, spaced as the design's .auth-col (only the shown state). */
.co-after [data-after]:not([hidden]) {
  display: grid;
  gap: 18px;
}
/* The heading, and a sent request's line, take focus for screen readers on arrival; no ring round them
   (as the design's .track-out). */
.co-after h1[tabindex='-1']:focus,
[data-care-said][tabindex='-1']:focus {
  outline: none;
}

/* The design sets no placeholder colour: the browser's grey is below 4.5:1 on its fields; its muted ink is not. */
input::placeholder,
textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

/* Numbers, phone numbers, emails and codes stay left to right on the Arabic pages (the rule book).
   The override keeps Arabic-Indic digits typed with spaces in their order; a field with a placeholder
   (the newsletter's) keeps the design's own, so its Arabic placeholder is never laid out backwards. */
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='email']:not([placeholder]),
[dir='rtl'] #si-id,
[dir='rtl'] #rs-id,
[dir='rtl'] #rs-code,
[dir='rtl'] #c-order,
[dir='rtl'] #tr-code,
[dir='rtl'] #co-voucher,
[dir='rtl'] #acct-ref {
  direction: ltr;
  unicode-bidi: bidi-override;
  text-align: right;
}

/* Account: the buyer's own orders carry no picture. */
.acct-own .orders .order {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Products other than the sets (owner, 3 Nov): each in its own part under "Accessories." on
   Choose your set (lib/design/render.ts, fillExtrasSection), and their own pages
   (lib/design/product-page.ts). Prices are set like the buy form's. */

/* The top bar's "Accessories" (fillExtrasNav), third, between "The set" and "Founder’s Edition"
   (owner, 4 Nov). In the phone menu, where it is the third line, the lines after it come in one
   step later and still in order, and the menu scrolls on a short screen rather than cut its last
   lines. */
@media (max-width: 900px) {
  .site-header.open .nav {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header.open .nav:has(> .nav-accessories) > a:nth-child(6) {
    animation-delay: 0.25s;
  }
  .site-header.open .nav:has(> .nav-accessories) > .nav-buy {
    animation-delay: 0.3s;
  }
  .site-header.open .nav:has(> .nav-accessories) > .nav-extra {
    animation-delay: 0.35s;
  }
}
/* On wide screens it stands in the bar where the bar still fits on one line: from 1041 px (the
   longest bar, in English with the Buy button, overflows by 4 px at 1031 px). Below that the
   bar's Buy button leads to Choose your set, where it is. */
@media (min-width: 901px) and (max-width: 1040px) {
  .nav .nav-accessories {
    display: none;
  }
}

/* A product's photos: one at a time on a strip that swipes, a button per photo under it. */
.xg {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.xg-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
}
.xg-track::-webkit-scrollbar {
  display: none;
}
.xg-track:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.xg-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.xg-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.xg-none .xg-slide img {
  width: 46%;
  height: auto;
}
.xg-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.xg-thumb {
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease;
}
.xg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.xg-thumb:hover {
  opacity: 1;
}
.xg-thumb[aria-current='true'] {
  opacity: 1;
  border-color: var(--ink);
}
.xg-thumb:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Choose your set: "Accessories.", the names that lead to each product, then a part each. */
.xm-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(24px, 3.5vw, 44px);
}
.xm-head h2 {
  margin: 0;
}
.xm-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.xm-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.xm-jump a:hover,
.xm-jump a:focus-visible {
  border-color: var(--ink);
}
.xm-list {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}
.xm-item {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(20px, 3.2vw, 48px);
  border-radius: 28px;
  background: var(--surface-raised);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
/* Every other product the other way round, on wide screens. */
.xm-item:nth-child(even) .xm-media {
  order: 2;
}
@media (max-width: 899px) {
  .xm-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .xm-item:nth-child(even) .xm-media {
    order: 0;
  }
}
.xm-media {
  min-width: 0;
}
.xm-body {
  display: grid;
  gap: 16px;
  align-content: center;
  min-width: 0;
}
.xm-body > *,
.xm-body h4 {
  margin: 0;
}
.xm-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.022em;
}
[dir='rtl'] .xm-name {
  font-family: var(--ar-display);
  letter-spacing: 0;
  line-height: 1.45;
}
.xm-name a {
  color: inherit;
  text-decoration: none;
}
.xm-name a:hover,
.xm-name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.xm-lead {
  max-width: 34em;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
}

/* The selling points: one to a line between thin rules, no marks before them (the rule book). */
.xm-points,
.xp-points,
.xp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.xm-points li,
.xp-points li,
.xp-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}

/* How to buy: the price, an option's name, the Add button or why it can't be bought. */
.xb {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.xb > * {
  margin: 0;
}
.xb-many {
  justify-items: stretch;
}
.xm .was,
.xp-page .was {
  color: var(--ink-muted);
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
  white-space: nowrap;
}
.xl-state {
  font-size: 14px;
}
.xp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.xb > .xp-price .now {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xm .xb > .xp-price .now {
  font-size: clamp(26px, 2.4vw, 32px);
}
[dir='rtl'] .xb > .xp-price .now {
  font-family: var(--ar-display);
  letter-spacing: 0;
  line-height: 1.3;
}
.xp-opt .now {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.xp-actions {
  width: 100%;
}
.xp-state {
  color: var(--ink-muted);
  font-weight: 600;
}
.xp-opts-title {
  margin: 6px 0 0;
}
.xp-opts {
  margin: 0;
}
/* An option's name, then its price and button on the same line when they fit, or on the next. */
.xp-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.xp-opt .info {
  flex: 1 1 9em;
  min-width: 0;
}
.xp-opt .end {
  flex: 0 1 auto;
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
}
.xm-more {
  margin-top: 2px;
}

/* A product's own page: the photos beside what you read and buy, which stays in view on wide screens. */
.xp-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4.5vw, 80px);
  align-items: start;
}
@media (max-width: 899px) {
  .xp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (min-width: 900px) {
  .xp-body {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.xp-media {
  min-width: 0;
}
.xp-media .xg-track {
  border-radius: 28px;
}
.xp-body {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}
.xp-body h1,
.xp-body > p {
  margin: 0;
}
.xp-lead {
  color: var(--ink);
}
.xp-back {
  margin-top: 6px;
}
/* The rest of the words, in a column one can read. */
.xp-story-col {
  display: grid;
  gap: 1.1em;
  max-width: 40em;
  margin-inline: auto;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
}
.xp-story-col p {
  margin: 0;
}
.xp-story-col .xp-list li {
  font-size: inherit;
}
/* The store's other products, a card each. */
.xr h2 {
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.xr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.xr-link {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 16px 16px 20px;
  border-radius: 24px;
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.xr-link:hover {
  transform: translateY(-2px);
}
.xr-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.xr-pic {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
}
.xr-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.xr-nophoto img {
  width: 46%;
  height: auto;
}
.xr-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
.xr-price {
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .xg-thumb,
  .xr-link {
    transition: none;
  }
  .xr-link:hover {
    transform: none;
  }
}
/* The brand's arc stands in for a missing photo: Arc Grey on Graphite, the logo's ink on Platinum
   and on the light bands. */
[data-bm-theme='light'] img[src^='/img/no-photo.svg'],
.g-mist img[src^='/img/no-photo.svg'] {
  filter: brightness(0.11);
}

/* Cart: a line whose product left the store is taken out, and the cart says so once. */
.cart-gone {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

/*
 * Home: the first film shows whole on phones and on upright screens (owner, 29 Oct). The design's
 * phone cut (9:16) is the middle third of the frame and loses the machines and the set, so phones
 * play the 16:9 film too, full width at its own shape, with the words under it.
 */
@media (max-width: 699px) {
  .ch-film .hero-wide {
    display: block;
  }
  .ch-film .hero-film {
    display: none;
  }
  .ch-film .hero-wide:before {
    display: none;
  }
  .hero-wide .film-ctrls {
    bottom: 12px;
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
  }
  .hero-wide .sound {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .hero-wide .sound span {
    display: none;
  }
}
@media (max-width: 699px), (orientation: portrait) {
  /* Under the header, not behind it, so the top of the frame shows too. */
  .ch-film .hero-wide {
    margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }
  .ch-film .hero-wide video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-position: 50% 50%;
  }
  .ch-film .hero-wide:after {
    height: 18%;
    background: linear-gradient(to bottom, rgba(12, 13, 15, 0), var(--fade-to, var(--surface)));
  }
  :root[data-bm-theme='light'] .ch-film .hero-wide:after,
  :root[data-theme='light'] .ch-film .hero-wide:after {
    background: linear-gradient(to bottom, rgba(12, 13, 15, 0), var(--surface));
  }
}

/*
 * The bottom bar on wide screens too (owner, 29 Oct): the phone's bar, as a floating bar centred
 * at the bottom, shown and hidden by the design's own rules (js/site.js).
 */
@media (min-width: 900px) {
  .buybar {
    display: block;
    left: 50%;
    right: auto;
    bottom: 20px;
    width: min(680px, calc(100% - 96px));
    padding: 10px;
    padding-inline-start: 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--veil-strong);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: var(--shadow-product);
    transform: translate(-50%, calc(100% + 40px));
  }
  .buybar.show {
    transform: translate(-50%, 0);
  }
  .buybar .wrap {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Checkout: a gift for someone else (owner, 29 Oct). */
.co-gift-fields {
  display: grid;
  gap: 18px;
}
.co-gift-fields > .hint {
  margin: 0;
}

/*
 * Checkout: the area list to search, the delivery time and Premium packaging (owner, 9 Nov), written by
 * js/brewme-store.js. The list opens under the Area field as the field's own surface; the choices read as the
 * ways to pay do.
 */
.co-combo {
  position: relative;
}
.co-combo-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: min(320px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.co-combo-opt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}
.co-combo-opt .muted {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: end;
}
.co-combo-opt[aria-selected='true'],
.co-combo-opt:hover {
  background: var(--line);
}
.co-area .hint {
  margin: 6px 0 0;
}
/* The region the area picked fills in (owner, 10 Nov): read only, so it reads as filled for the buyer, not asked. */
.co-region input[readonly] {
  background: var(--line);
  color: var(--ink);
  cursor: default;
}
.co-speed .opt-price .now {
  font-size: 16px;
}
.co-pack .check bdi {
  white-space: nowrap;
}
.co-pack > .hint {
  margin: 8px 0 0;
}

/*
 * The delivery fee (owner 2 Nov, BDR-138): the line under the cart drawer's subtotal, and the line
 * under the cart's and checkout's Delivery row, both written by js/brewme-store.js. The drawer's
 * line reads as the assurance list does; the row's line in ink, since it asks something of the buyer.
 */
.cart-foot .cart-delivery {
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.co-totals dt .delivery-nudge {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink);
}

/* Name engraving on a product's page (owner, 7 Nov): the switch with the fee, the name with a live
   preview and a letter count, the place when the product asks, the letters it takes, the extra days. */
.xe {
  margin: 4px 0 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: start;
}
.xe-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.xe-switch {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
}
.xe-label {
  flex: 1;
  font-weight: 600;
}
.xe-fee {
  color: var(--ink-muted);
}
.xe-fields {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.xe-field {
  font-size: 14px;
  color: var(--ink-muted);
}
.xe-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.xe-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.xe-input[aria-invalid='true'] {
  border-color: var(--danger);
}
.xe-count,
.xe-hint {
  margin: 0;
  font-size: 13px;
}
.xe-count {
  text-align: end;
}
.xe-preview {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 6px 0 0;
  padding: 16px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-size: 13px;
}
.xe-preview-text {
  max-width: 100%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  color: var(--ink);
  text-shadow:
    0 1px 0 color-mix(in srgb, white 35%, transparent),
    0 -1px 0 color-mix(in srgb, black 25%, transparent);
}
.xe-error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
}
.xe-added {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

/* A product on pre-order (owner, 2026-11-07): its tag, when it ships, what is paid now. */
.xp-pre {
  display: grid;
  gap: 4px;
  margin: 2px 0 12px;
}
.xp-pre p {
  margin: 0;
  font-size: 14px;
}
.xp-pre-tag {
  font-weight: 600;
}
.xp-pre-badge {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.xl-pre {
  display: block;
  font-size: 13px;
}
.co-pre-note {
  margin: 8px 0 0;
}