/* ==========================================================================
   Beauld Communications
   shop.css — the store, the website builder, the cart and checkout.

   Loaded only by the four commerce pages, and by every page for the header
   cart button and its toast. Everything here uses the tokens in tokens.css,
   so the store cannot drift away from the rest of the brand.
   ========================================================================== */


/* ==========================================================================
   Shared money type
   ========================================================================== */

.price__per {
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--slate);
}
.band--ink .price__per,
.cta .price__per { color: var(--on-ink-dim); }

/* The small print under a total — set quietly, never hidden. */
.fine {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--slate);
}
.fine + .fine { margin-top: var(--s-2); }


/* ==========================================================================
   Currency switcher
   ========================================================================== */

.cur-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-dim);
  border-radius: var(--r-pill);
  flex: none;
}
.cur-switch__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.32rem 0.72rem;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--slate);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cur-switch__btn:hover { color: var(--ink); }
.cur-switch__btn.is-on {
  background: var(--ink);
  color: #fff;
}


/* ==========================================================================
   Header cart button
   ========================================================================== */

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  flex: none;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.cart-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.cart-btn__icon { width: 20px; height: 20px; }
.cart-btn__icon svg { width: 100%; height: 100%; }

/* The count only appears once there is something to count. */
.cart-btn__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--paper);
}
.cart-btn__count.is-on { display: inline-flex; }
.cart-btn__count.is-bump { animation: cart-bump 0.42s var(--ease-out); }

@keyframes cart-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-btn__count.is-bump { animation: none; }
}


/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(28rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              visibility var(--dur);
}
.toast.is-in { opacity: 1; visibility: visible; transform: none; }
.toast__mark { width: 22px; flex: none; color: var(--red); }
.toast__mark svg { width: 100%; height: auto; display: block; }
.toast__link {
  margin-left: auto;
  flex: none;
  color: #fff;
  font-weight: 600;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity var(--dur) linear, visibility var(--dur); transform: none; }
}


/* ==========================================================================
   The builder
   ========================================================================== */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 1080px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
}

/* --- Base package cards ---------------------------------------------- */

.base-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
}

.base-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.base-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.base-card.is-on {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), var(--shadow-md);
}
.base-card input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.base-card:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* The emblem sits behind the card and lights up when it is chosen. */
.base-card__mark {
  position: absolute;
  right: -14%;
  bottom: -20%;
  width: 48%;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.base-card__mark svg { width: 100%; height: auto; display: block; }
.base-card.is-on .base-card__mark { opacity: 0.12; }

.base-card > *:not(.base-card__mark):not(input) { position: relative; }

.base-card__flag {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--red-pale);
  color: var(--red-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.base-card__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.base-card__price {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--ink);
}
.base-card__price em {
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--slate);
}
.base-card__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
}
.base-card__list {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.base-card__list span {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 0.55rem;
  align-items: start;
}
.base-card__list svg {
  width: 13px; height: 13px;
  margin-top: 4px;
  color: var(--red);
}
.base-card__weeks {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* --- Feature groups --------------------------------------------------- */

.bgroup { margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + 1rem); }
.bgroup:first-child { margin-top: 0; }

.bgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
}
.bgroup__head h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
}
.bgroup__count {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.bgroup__count.is-on { color: var(--red); }

.bgroup__note {
  margin-top: var(--s-3);
  max-width: 62ch;
  font-size: 0.9375rem;
  color: var(--slate);
}

.opts { margin-top: var(--s-4); }

.opt {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.opt:first-child { border-top: 1px solid var(--line); }
.opt.is-on { background: linear-gradient(90deg, var(--red-pale), transparent 60%); }
.opt--free { opacity: 0.86; }

.opt__main {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  padding-left: var(--s-3);
}
.opt--free .opt__main { cursor: default; }

.opt__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.opt__box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.opt__box svg { width: 13px; height: 13px; }
.opt.is-on .opt__box,
.opt--free .opt__box {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.opt__input:focus-visible + .opt__box {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.opt__title {
  display: block;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.opt__flag {
  display: inline-block;
  margin-left: 0.55rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--red-pale);
  color: var(--red-dark);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.opt__text {
  display: block;
  margin-top: 0.25rem;
  max-width: 60ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
}

.opt__right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
  padding-right: var(--s-3);
}
.opt__price {
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.opt__included {
  min-width: 5.5rem;
  text-align: right;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

@media (max-width: 640px) {
  .opt { flex-wrap: wrap; }
  .opt__right { width: 100%; justify-content: flex-end; padding-left: calc(22px + var(--s-4) + var(--s-3)); }
  .opt__price, .opt__included { min-width: 0; }
}

/* --- Quantity stepper -------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  flex: none;
}
.stepper.is-off { opacity: 0.42; }
.stepper__btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
}
.stepper__btn svg { width: 13px; height: 13px; }
.stepper__btn:hover:not(:disabled) { background: var(--paper-dim); }
.stepper__btn:disabled { cursor: default; color: var(--slate-light); }
.stepper__n {
  min-width: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* --- Summary rail ------------------------------------------------------ */

.sum { position: sticky; top: calc(var(--header-h) + var(--s-4)); }

.sum__inner {
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - var(--header-h) - 2 * var(--s-4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sum__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--ink);
}
.sum__head h2 { font-size: var(--t-lg); margin-right: auto; }
.sum__mark { width: 26px; flex: none; color: var(--red); }
.sum__mark svg { width: 100%; height: auto; display: block; }

.sum__list {
  margin-top: var(--s-4);
  display: grid;
  gap: 0.55rem;
}
.sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.875rem;
}
.sum__label { color: var(--ink-soft); }
.sum__qty { color: var(--slate-light); font-variant-numeric: tabular-nums; }
.sum__val {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.sum__total span {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.sum__total strong {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.sum__total--sm strong { font-size: var(--t-lg); }

.sum__block { margin-top: var(--s-5); }
.sum__sub {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.sum__meta {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--paper-warm);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--slate);
}
.sum__meta strong { color: var(--ink); }

.sum__actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.sum__actions .btn { width: 100%; }

/* --- Mobile summary bar ------------------------------------------------ */

.bbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 -8px 32px rgba(10, 10, 10, 0.22);
}
.bbar__figure { margin-right: auto; min-width: 0; }
.bbar__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.bbar__price {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bbar__mo { font-size: var(--t-sm); font-weight: 500; color: var(--on-ink-soft); }
.bbar__toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
.bbar .price__per { color: var(--on-ink-dim); }

/* Under about 560px the one-time figure and the monthly figure cannot share
   a line with two buttons. The monthly moves under it rather than pushing
   "Details" off the edge of the bar. */
@media (max-width: 560px) {
  .bbar { gap: var(--s-3); padding-inline: var(--s-4); }
  .bbar__mo { display: block; margin-top: 1px; }
  .bbar__price { font-size: var(--t-lg); }
  .bbar__toggle { padding: 0.5rem 0.75rem; }
}

@media (max-width: 1080px) {
  .bbar { display: flex; }
  .builder { padding-bottom: 5.5rem; }
  .sum { position: static; }
  /* On small screens the rail is collapsed until "Details" is pressed. */
  .sum__inner { max-height: none; }
  .builder:not(.is-summary-open) .sum { display: none; }
  .builder.is-summary-open .sum { display: block; margin-top: var(--s-6); }
}


/* ==========================================================================
   The store
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.prod {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.prod--featured { border-color: var(--ink); }

.prod__mark {
  position: absolute;
  right: -18%;
  bottom: -24%;
  width: 52%;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.prod__mark svg { width: 100%; height: auto; display: block; }
.prod:hover .prod__mark { opacity: 0.1; }

.prod > *:not(.prod__mark):not(.prod__flag) { position: relative; }
.prod__flag { z-index: 2; }

.prod__flag {
  position: absolute;
  top: 0; right: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 0 0 0 var(--r-md);
  background: var(--red);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.prod__cat {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.prod h3 { margin-top: var(--s-2); font-size: var(--t-lg); }
.prod > p {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
}
.prod__points {
  display: grid;
  gap: 0.45rem;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.prod__points li { position: relative; padding-left: 1.1rem; }
.prod__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.prod__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--s-5);
}
.prod__price {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.prod__price em {
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--slate);
}
.prod__foot .btn svg { width: 15px; height: 15px; }


/* ==========================================================================
   The store band on a service page
   ========================================================================== */

.shop-band__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  padding: var(--s-6);
  background: var(--paper-warm);
  border-radius: var(--r-lg);
}
.shop-band__mark { width: 54px; flex: none; color: var(--red); }
.shop-band__mark svg { width: 100%; height: auto; display: block; }
.shop-band__inner h2 { margin-top: var(--s-2); font-size: var(--t-xl); }
.shop-band__inner p {
  margin-top: var(--s-3);
  max-width: 56ch;
  font-size: 0.9375rem;
  color: var(--slate);
}
.shop-band__inner .btn-row { margin-top: 0; flex: none; }

@media (max-width: 1000px) {
  .shop-band__inner { grid-template-columns: auto minmax(0, 1fr); }
  .shop-band__inner .btn-row { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .shop-band__inner { grid-template-columns: minmax(0, 1fr); }
  .shop-band__mark { width: 42px; }
}


/* ==========================================================================
   The cart
   ========================================================================== */

.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 980px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
}
.cart-page.is-empty .cart-grid { grid-template-columns: minmax(0, 1fr); }

.line-list { display: grid; gap: 0; }
.line-list__head {
  margin-top: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 7rem 2rem;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.line__title { display: block; font-weight: 600; letter-spacing: -0.01em; }
.line__note {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-sm);
  color: var(--slate);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.line__qty { font-variant-numeric: tabular-nums; color: var(--slate); }
.line__price {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.line__price em { font-style: normal; font-size: var(--t-sm); font-weight: 500; color: var(--slate); }

.line__x {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--slate-light);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.line__x svg { width: 17px; height: 17px; }
.line__x:hover { background: var(--red-pale); color: var(--red-dark); }

.line--read { grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 620px) {
  .line { grid-template-columns: minmax(0, 1fr) 2rem; row-gap: var(--s-3); }
  .line__body { grid-column: 1; }
  .line__ctrl { grid-column: 1; }
  .line__price { grid-column: 1; text-align: left; }
  .line__x { grid-column: 2; grid-row: 1; align-self: start; }
}

/* --- The website build, held together as one block ---------------------- */

.build-block {
  margin-bottom: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.build-block__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ink);
  color: #fff;
}
.build-block__head h3 { color: #fff; font-size: var(--t-lg); }
.build-block__head p {
  margin-top: 0.2rem;
  font-size: var(--t-sm);
  color: var(--on-ink-dim);
}
.build-block__mark { width: 34px; flex: none; color: var(--red); }
.build-block__mark svg { width: 100%; height: auto; display: block; }
.build-block__price {
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.line-list--nested { padding: 0 var(--s-5); }
.line-list--nested .line:last-child { border-bottom: 0; }
.build-block__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
}
.line__text-x {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.line__text-x:hover { color: var(--red-dark); }

@media (max-width: 620px) {
  .build-block__head { flex-wrap: wrap; }
  .build-block__price { margin-left: 0; width: 100%; }
  .line-list--nested { padding: 0 var(--s-4); }
}

/* --- Empty state -------------------------------------------------------- */

.cart-empty {
  max-width: 44ch;
  margin-inline: auto;
  padding: var(--s-8) 0;
  text-align: center;
}
.cart-empty__mark {
  display: block;
  width: 84px;
  margin: 0 auto var(--s-5);
  color: var(--red);
  opacity: 0.9;
}
.cart-empty__mark svg { width: 100%; height: auto; display: block; }
.cart-empty p { margin-top: var(--s-4); color: var(--slate); }
.cart-empty .btn-row { justify-content: center; }

/* --- Totals panel ------------------------------------------------------- */

.tot {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  padding: var(--s-5);
  background: var(--paper-warm);
  border-radius: var(--r-lg);
}
@media (max-width: 980px) { .tot { position: static; } }

.tot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 2px solid var(--ink);
}
.tot__head h2 { font-size: var(--t-lg); }

.tot__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.55rem 0;
  font-size: 0.9375rem;
}
.tot__row span { color: var(--slate); }
.tot__row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tot__row--off strong { color: var(--red-dark); }
.tot__row--rule { border-top: 1px solid var(--line); }
.tot__row--big strong {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tot__split {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.tot__due {
  display: grid;
  gap: 0.2rem;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
}
.tot__due span {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.tot__due strong {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.tot__due-note { text-transform: none !important; letter-spacing: 0.02em !important; }

.tot__actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.tot__actions .btn { width: 100%; }

/* --- Promotion code ----------------------------------------------------- */

.promo { margin-top: var(--s-5); }
.promo__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.promo__row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.promo__row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.promo__row input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--ink);
}
.promo__msg {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--slate);
}
.promo__msg svg { width: 14px; height: 14px; flex: none; color: var(--red); }
.promo__msg.is-ok { color: var(--ink); }


/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 980px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
}

.line-list--flat .line { grid-template-columns: minmax(0, 1fr) auto; }

.done {
  position: relative;
  max-width: 62ch;
  margin-inline: auto;
  padding: var(--s-7) 0;
  text-align: center;
}
.done__mark {
  display: block;
  width: 76px;
  margin: 0 auto var(--s-5);
  color: var(--red);
}
.done__mark svg { width: 100%; height: auto; display: block; }
.done .eyebrow--rule { justify-content: center; }
.done h2 { margin-top: var(--s-3); }
.done .lede { margin-inline: auto; }
.done .btn-row { justify-content: center; }

.done__ref {
  display: grid;
  gap: 0.25rem;
  margin: var(--s-6) auto 0;
  max-width: 22rem;
  padding: var(--s-4);
  background: var(--paper-warm);
  border-radius: var(--r-md);
}
.done__ref span {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.done__ref strong {
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  letter-spacing: 0.02em;
}

.done__text {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--ink);
  color: var(--on-ink-soft);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  max-height: 26rem;
}


/* ==========================================================================
   Print — the order summary has to survive a printer
   ========================================================================== */

@media print {
  .site-header, .site-footer, .bbar, .toast, .cart-btn,
  .tot__actions, .sum__actions, .cur-switch, .promo { display: none !important; }
  .done__text { background: #fff; color: #000; max-height: none; }
  .build-block__head { background: #fff; color: #000; }
  .build-block__head h3 { color: #000; }
  .tot__due { background: #fff; color: #000; border: 1px solid #000; }
  .tot__due span, .tot__due strong { color: #000; }
}