/* =====================================================================
   COMMERCE — the only CSS in this prototype not lifted from the site.

   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;
}

/* ---- header cart indicator ------------------------------------------
   Built on .cta-btn, the header's own button, so it inherits the site's
   height, radius, type and hover. It differs in two ways only: it is
   outlined rather than filled, because a second solid magenta pill beside
   Sales Request would compete with it for the same glance; and it stays
   visible below the desktop breakpoint, where .cta-btn.desktop hides,
   because a cart you cannot see on a phone is a cart you cannot use. */
.cta-btn.cart-btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
  margin-right: 10px;
  white-space: nowrap;
}

.cta-btn.cart-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.cta-btn.cart-btn svg {
  width: 17px;
  height: 17px;
}

.cta-btn.cart-btn.is-full {
  border-color: var(--blue);
  color: var(--blue);
}

/* The nav is already tight: on the live site its content overruns its box by
   about 70px at 1440 and the row still reads, because the items simply close
   up. A cart button takes another ~120px out of that box, which turns a tight
   row into a collision. Two things give it back, both using the site's own
   numbers rather than new ones:

   the nav steps down to the padding and size it already uses at 1080px, one
   breakpoint earlier than it otherwise would; */
body[data-screen] nav.main > a,
body[data-screen] nav.main .has-mega > a {
  padding: 0 5px;
  font-size: 12.6px;
  gap: 4px;
}

/* and below 1700px the cart drops its label, the way a cart in a header
   normally does, leaving the icon and the count. The page is capped at
   --maxw 1400, so a wider window buys the row nothing. */
@media (max-width:1700px) {
  .cta-btn.cart-btn {
    padding: 8px 13px;
    gap: 6px;
  }

  .cta-btn.cart-btn .lbl {
    display: none;
  }
}

/* The site hands the nav to its mobile menu at 1010px, where ten items stop
   being legible. This nav carries eleven and a cart button beside it, so the
   same judgement lands earlier: below 1360 the row genuinely collides, so the
   hamburger the site already ships takes over there instead. The cart stays
   out on the bar — it is not a .desktop control. */
@media (max-width:1360px) {

  body[data-screen] nav.main,
  body[data-screen] .cta-btn.desktop {
    display: none;
  }

  body[data-screen] .menu-toggle {
    display: flex;
  }

  /* With the nav gone the header's remaining children each carry an auto
     left margin, so the free space splits between them and the cart parks in
     the middle of the bar. Let the cart take all of it and sit the toggle
     directly after, which is where the site puts it on its own pages. */
  body[data-screen] .cta-btn.cart-btn {
    margin-left: auto;
  }

  body[data-screen] .menu-toggle {
    margin-left: 0;
  }
}

@media (max-width:900px) {
  .cta-btn.cart-btn {
    margin-right: 6px;
    padding: 7px 12px;
    font-size: 13px;
  }
}

/* ---- 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;
}

/* ---- confirmation ---- */
.conf {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.conf .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #fff;
  background: var(--good-ink);
  border-radius: 50%;
}

.conf .tick svg {
  width: 30px;
  height: 30px;
}

.conf h1 {
  margin: 22px 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
}

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

.conf .ref {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.conf-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(30px, 3.6vw, 44px);
  text-align: left;
}

.conf-panel {
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

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

.conf-panel p {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---- 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);
}