/* =====================================================================
   COMMERCE — the only CSS on the shop screens not lifted from the site.

   Shared with the Odoo site, which serves the byte-identical file at
   odoo/addons/hbe_product/static/src/css/commerce.css. Change one and
   change the other, or the two storefronts drift.

   Every value below is an existing HBE token: --blue for commerce actions,
   --magenta only where the site already uses it (the eyebrow pill and the
   required-field marker), --line / --line-soft for borders, --shadow-sm,
   --r and the 20px card radius the .sw-card already uses, and the same
   clamp() spacing scale as the bands. No new colours, no gradients, no
   glass, no extra shadow.

   Components: header cart indicator, shop toolbar, card action row, cart
   table, quantity stepper, order summary, checkout column and its payment
   block, and the confirmation panel.
   ===================================================================== */

/* The [hidden] attribute is only a UA rule, so any author rule that sets
   display beats it — .shop-grid{display:grid} and .qfields{display:grid} both
   do, which left the empty-cart grid and the shipping-address fields on screen
   while marked hidden. Everything here toggles visibility through the
   attribute, so make it win. */
[hidden] {
  display: none !important;
}

/* The header cart's own rules used to live here, and they were written for
   the wide "Cart ( 0 )" pill the prototype put in the header — a .cta-btn
   about 120px across. That pill is gone: the button is a 34px circle with a
   badge, and assets/css/cart-indicator.css styles it, sizes it and decides
   where the nav hands over to the hamburger.

   Three blocks went with the pill, and it matters that they are gone rather
   than merely inert:

     .cta-btn.cart-btn sizing, and the rule that dropped its label below
     1700px. The button is not a .cta-btn any more, so these matched nothing.

     An unconditional step-down of the nav to `padding: 0 5px; font-size:
     12.6px` — the spacing the site itself uses below 1080px — to buy back
     the ~120px the pill cost. This one was not inert, and it was the reason
     the nav disappeared on a 1280px laptop. It has no media query, so it
     pinned the nav at its tightest setting at every width, and being more
     specific than the site's own steps it also stopped the narrower ones
     applying. A nav already at its floor cannot compress any further to make
     room, so the row collided and the hamburger took over. The compact
     button costs 48px rather than 120px, and the site's own three steps
     absorb that on their own.

     A copy of the 1360px handover, which cart-indicator.css also carries.
     Two rules for one decision is one rule too many: the copy here kept
     firing after the one there was changed.

   Anything the cart still needs is in cart-indicator.css. Note that the
   equivalent block is still present in the Odoo module's commerce.css, where
   the same pill was replaced by the same compact button — worth taking out
   there too. */

/* ---- shop toolbar ---- */
.shop-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}

.shop-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.shop-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.shop-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .14s, box-shadow .14s;
}

.shop-search input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* a filter chip is the .chips pill from the product page, made pressable */
.shop-filters button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}

.shop-filters button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.shop-filters button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.shop-count {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---- product card action row ----------------------------------------
   .sw-card and .sw-card .row are the site's; these only fill the row. A
   quote-only card gets the outline button, not a disabled one — it is a
   different route to the same shelf, not a product you cannot have. */
/* The card price uses the site's own MSRP component where there is one, so
   the struck-through figure and the badge come from product-price.css rather
   than from anything written here; this only stacks the two lines. */
.sw-card .card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sw-card .card-price .price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}

.sw-card .card-price .pricing-msrp {
  font-size: 12px;
}

/* the quote route's one-line explanation, under the price */
.quote-note {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cpe-copy .pricing {
  margin-top: clamp(18px, 2.2vw, 26px);
}

.sw-card .act {
  font: inherit;
  cursor: pointer;
  border: 0;
}

.sw-card .act.viewbtn {
  padding: 10px 18px;
  font-size: 13.5px;
  /* "Added" is a third of the width of "Add to Cart", and the price sits in
     the same flex row. Without a floor under the button the whole row
     reshuffles twice per click, which reads as the card twitching rather
     than as confirmation. Wide enough for the longer of the two labels. */
  min-width: 118px;
}

/* In flight. Held only for the length of the request, so this marks why a
   second click is not landing rather than announcing a state. */
.sw-card .act.viewbtn:disabled {
  opacity: .72;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* The moment after Odoo confirms the line. The blue stays: a commerce action
   on this site is blue, and a second colour here would be read as a second
   meaning. What changes is the weight — the lift and the cast shadow go, so
   the button sits down where it was raised — and a tick joins the label,
   which the button's own flex gap already spaces. */
.sw-card .act.viewbtn.is-added {
  transform: none;
  box-shadow: none;
}

.sw-card .act.viewbtn.is-added::before {
  content: "\2713";
  font-weight: 800;
  /* The glyph rides high in most UI faces next to a cap-height word. */
  line-height: 1;
}

.sw-card .act.quotebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .14s, color .14s, transform .12s;
}

.sw-card .act.quotebtn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.sw-card .sku {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The site's secondary action is styled unqualified, so a <button> picks the
   look up but not the font — form controls do not inherit it. Two screens use
   it as a real button (Buy Now, Back to cart). */
button.btn-outline {
  font: inherit;
  cursor: pointer;
}

/* the secondary action beside a .buybtn, matched to its height and radius */
.buy-row .btn-outline {
  height: 42px;
  padding: 0 19px;
  border-radius: 40px;
  font-size: 13.5px;
}

/* full-width actions stacked in the order summary */
.summary .btn-wide {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 10px;
}

/* ---- quantity stepper ---- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.qty button {
  width: 38px;
  height: 40px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.qty button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.qty input {
  width: 46px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- two-column commerce layout: content left, summary pinned right ---- */
.shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  gap: clamp(26px, 3.2vw, 48px);
  align-items: start;
  margin-top: clamp(26px, 3vw, 38px);
}

@media (max-width:900px) {
  .shop-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- cart lines ---- */
.cart-lines {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line-soft);
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line .shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.cart-line .shot img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.cart-line h3 {
  margin: 0 0 4px;
  font-size: 16.5px;
  line-height: 1.3;
}

.cart-line h3 a {
  color: var(--ink);
  text-decoration: none;
}

.cart-line h3 a:hover {
  color: var(--blue);
}

.cart-line .unit {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.cart-line .ctl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-line .line-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.cart-line .drop {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-line .drop:hover {
  color: var(--warn-ink);
}

@media (max-width:560px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .cart-line .shot {
    height: 72px;
  }

  .cart-line .ctl {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- order summary ---- */
.summary {
  position: sticky;
  top: 84px;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary h2 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.summary dl {
  margin: 0;
}

.summary dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.summary dt {
  font-size: 14.5px;
  color: var(--ink-soft);
}

.summary dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.summary dl div.total {
  border-bottom: 0;
  padding-top: 16px;
}

.summary dl div.total dt {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.summary dl div.total dd {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.01em;
}

.summary .buybtn,
.summary .btn-outline {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 14px;
}

.summary .note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width:900px) {
  .summary {
    position: static;
  }
}

/* ---- checkout ---- */
.co-step {
  margin-top: clamp(26px, 3vw, 36px);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.co-step:first-child {
  margin-top: 0;
}

.co-step > h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-size: 19px;
  line-height: 1.3;
}

.co-step > h2 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}

/* radio cards for shipping and payment: the .sw-card border language at
   row scale, so a selected option reads the way a selected filter does */
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}

.opt:first-of-type {
  margin-top: 0;
}

.opt:hover {
  border-color: var(--blue);
}

.opt input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--blue);
}

.opt b {
  display: block;
  font-size: 15.5px;
  color: var(--ink);
}

.opt span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.opt .amt {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.opt:has(input:checked) {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}

/* ---- card payment block ---- */
.pay {
  margin-top: 18px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.pay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pay-head svg {
  width: 16px;
  height: 16px;
  color: var(--good-ink);
}

.pay .qfields {
  margin-top: 0;
}

.mock-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 10px;
}

/* ---- the band the shop screens sit in ----------------------------------

   .yband is the prototype's class and the site's stylesheet has no rule for
   it: the only selector naming it anywhere is `.ppanel .yband`, which is a
   different thing on a different page. So all four shop screens were
   rendering in a band with no padding at all, and their last card sat
   directly on the footer's trust strip with about ten pixels between them.

   Given the site's own `.band` rhythm rather than a number picked here, so
   these screens open and close on the same vertical spacing as every other
   section on the site. Slightly tighter at the top, because every one of
   these screens opens on a breadcrumb, which already carries space under it
   — the full 86px below a breadcrumb reads as a gap rather than as a start.
   --------------------------------------------------------------------- */

.yband {
  padding: clamp(28px, 3.2vw, 44px) 0 clamp(52px, 6vw, 86px);
  background: var(--bg);
  display: flow-root;
}

/* ---- confirmation -------------------------------------------------------

   Composed as a receipt, not as a landing page. Three things drive it:

   The customer has just come through the cart and the checkout, both of
   which put the content on the left and the money in a panel on the right.
   The confirmation used three equal boxes instead, which read as a different
   page rather than the last step of one flow — and it presented the total
   differently from the screen that had just quoted it. It uses .shop-grid
   and the same .summary component now, so the figure is shown the way it was
   shown before.

   The tick, the heading and the order number are one header rather than
   three centred blocks down the page. That is most of the height the old
   version spent: a 62px tick, a 44px heading and a lone pill, each with its
   own margin, on a page whose content is four short facts.

   Section headings are the site's magenta eyebrow, which is what .summary
   already uses. No second accent, no new colour.
   --------------------------------------------------------------------- */

.conf-band .wrap {
  /* A receipt does not need the full 1400px band. Narrower keeps the line
     length of the lead readable and stops the two columns drifting apart. */
  max-width: 1120px;
}

/* ---- header ---- */

.conf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--line);
}

.conf-said {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
  /* 62ch or so at this size: past that the lead gets tiring to read, and
     the order number has somewhere to sit. */
  max-width: 660px;
}

.conf-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  /* Optically centred against the cap height of the heading beside it. */
  margin-top: 4px;
  color: #fff;
  background: var(--good-ink);
  border-radius: 50%;
}

.conf-tick svg {
  width: 22px;
  height: 22px;
}

.conf-head h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.conf-lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.conf-lead a {
  color: var(--blue);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* The order number. A labelled field rather than a pill: it reads as a value
   someone is meant to keep and quote, which is what it is. */
.conf-ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.conf-ref-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.conf-ref-v {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  /* So the digits do not jitter in width between orders. */
  font-variant-numeric: tabular-nums;
}

.conf-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  font: inherit;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}

.conf-copy:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.conf-copy:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.conf-copy svg {
  width: 15px;
  height: 15px;
}

/* The tick swaps in for the clipboard once the number has been taken. Both
   glyphs are in the button, so nothing reflows and the width cannot jump. */
.conf-copy .conf-copy-done { display: none; }
.conf-copy.is-done { color: var(--good-ink); border-color: var(--good-ink); }
.conf-copy.is-done svg:first-child { display: none; }
.conf-copy.is-done .conf-copy-done { display: block; }

/* ---- body ---- */

.conf-body {
  margin-top: clamp(24px, 3vw, 34px);
  align-items: start;
}

.conf-main {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.conf-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.conf-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-soft);
  /* A hair cooler than the card, so the head reads as a label strip rather
     than as the first row of content. */
  background: var(--surface-2);
}

.conf-block-head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.conf-block-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* ---- ordered lines ---- */

.ol-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ol {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: 14px clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-soft);
}

.ol:last-child { border-bottom: 0; }

.ol-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.ol-shot img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.ol-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ol-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.ol-name a {
  color: inherit;
  text-decoration: none;
}

.ol-name a:hover { color: var(--blue); }

.ol-sku {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

.ol-qty {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The quantity carries its own word, so the figure is never a bare number
   the reader has to work out from position alone. */
.ol-k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ol-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 88px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ol-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.ol-unit {
  font-size: 12px;
  color: var(--ink-faint);
}

.ol-none {
  display: block;
  padding: 18px clamp(16px, 1.8vw, 22px);
  font-size: 14.5px;
  color: var(--ink-faint);
}

/* ---- shipping facts ---- */

.conf-facts {
  margin: 0;
  padding: 4px clamp(16px, 1.8vw, 22px);
}

.conf-facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.conf-facts > div:last-child { border-bottom: 0; }

.conf-facts dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
}

.conf-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* The address reads as an address: one fact per line, name carrying the
   weight, rather than a paragraph to be parsed. */
.ad {
  font-style: normal;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ad-name {
  font-weight: 700;
  color: var(--ink);
}

.conf-facts-note {
  margin: 0;
  padding: 0 clamp(16px, 1.8vw, 22px) 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- payment summary ----
   .summary supplies the panel, the rows and the total treatment. Only the
   two things this screen does differently are set here: there is no action
   above the buttons to space them from, and the total is the amount already
   settled rather than one about to be, so it is given a little more air and
   a rule of its own. */

.conf-summary dl div.total {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
}

/* ---- the closing action row ----
   Aligned with the content column rather than centred under the whole grid:
   the eye is already down the left edge by the time it gets here, and a
   centred pair under an asymmetric two-column layout reads as floating. */

.conf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

/* The site sizes both of these at 30px for a row of small actions beside
   body copy. This is the page's one call to action, so it is given the
   height and the measure of a primary control. */
.conf-actions .buybtn,
.conf-actions .btn-outline {
  height: 44px;
  padding: 0 26px;
  font-size: 14.5px;
}

/* The site gives .btn-outline its colours in a base rule and its padding and
   radius in the per-page context that uses it. There is no such context
   here, so the pill shape is set to match the primary button beside it. */
.conf-actions .btn-outline {
  justify-content: center;
  border-radius: 40px;
}

.conf-actions .buybtn:focus-visible,
.conf-actions .btn-outline:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .conf-head {
    /* Centred on a phone: the tick and the heading read as one statement
       rather than as a row that happens to have wrapped. */
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .conf-ref {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .conf-said {
    gap: 12px;
  }

  .conf-tick {
    width: 38px;
    height: 38px;
    margin-top: 2px;
  }

  .conf-tick svg { width: 19px; height: 19px; }

  /* Image, name and money on the first row; the quantity tucks under the
     name rather than squeezing a fourth column onto a phone. */
  .ol {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    row-gap: 6px;
  }

  .ol-shot { height: 52px; }

  .ol-qty {
    grid-column: 2;
    grid-row: 2;
  }

  .ol-money {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 0;
  }

  .conf-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- empty state ---- */
.empty {
  padding: clamp(40px, 6vw, 72px) 26px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.empty p {
  margin: 0 0 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---- prototype index ---- */
.proto-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(26px, 3vw, 36px);
}

.proto-card {
  display: block;
  padding: clamp(20px, 2.2vw, 26px);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}

.proto-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.proto-card .n {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}

.proto-card h3 {
  margin: 8px 0 6px;
  font-size: 19px;
  color: var(--ink);
}

.proto-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}