/* product.css — views/product.js (owner B); mobile first, desktop inside @media (min-width:1024px)
   Page root: .pwrap.pp (D owns .pwrap/.pgal/.pcol layout; everything below is B's own components). */

/* ---------- shared bits ---------- */
.pp .p-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.pp .p-val { font-size: 15px; font-weight: 600; color: var(--fg); text-align: right; }
.p-link { min-height: 32px; padding: 0; background: none; border: 0; color: var(--fg); font: 600 14px/1.3 var(--body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.p-sw, .p-pill, .p-mchip { position: relative; }
.p-cnt { position: absolute; top: -8px; right: -8px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; pointer-events: none; }
.p-cnt[hidden] { display: none; }

/* number fields: 16px on phones so iOS does not zoom on focus */
.p-num { height: 44px; margin: 0; padding: 0 2px; text-align: center; background: var(--panel); color: var(--fg); border: 1px solid var(--ctl); border-radius: 0; font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.p-num::-webkit-outer-spin-button, .p-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.p-num::placeholder { color: var(--ph); opacity: 1; }
.p-num:focus { outline: none; }
.p-num:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--red); outline-offset: 0; }

/* ---------- head: name, price of the chosen variant ---------- */
.p-head { gap: 14px; }
.p-head .priceline { flex-wrap: wrap; column-gap: 16px; row-gap: 6px; }
.p-pmeta { font-size: 14px; line-height: 1.35; color: var(--fg2); text-align: right; font-variant-numeric: tabular-nums; }
.p-pnote { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- colour, material ---------- */
.p-sws { flex-wrap: wrap; gap: 10px; }
.p-mchip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.p-delta { font: 500 13px/1 var(--mono); letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-delta:empty { display: none; }
.p-mchip[aria-pressed=true] .p-delta { color: #4A4A47; }

/* ---------- order block: mode toggle, pills, quantity ---------- */
.p-order { padding-top: 28px; gap: 14px; }
.p-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--ctl); }
.p-modebtn { height: 44px; padding: 0 12px; background: transparent; border: 0; color: var(--fg2); font: 600 14px/1 var(--body); cursor: pointer; }
.p-modebtn + .p-modebtn { border-left: 1px solid var(--ctl); }
.p-modebtn[aria-pressed=true] { background: var(--fg); color: var(--bg); }
.p-modebtn:focus-visible { outline-offset: -4px; }
.p-help { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.p-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.p-pill { min-width: 64px; height: 44px; padding: 0 14px; font-size: 15px; font-variant-numeric: tabular-nums; }
.p-pills.is-err .p-pill { border-color: var(--red); }
.p-err { margin: 0; padding-left: 10px; border-left: 3px solid var(--red); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fg); }
.p-err[hidden] { display: none; }

.p-qrow { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.p-qrow > .lbl { flex: 1 1 auto; }
.p-step { display: flex; border: 1px solid var(--ctl); }
.p-sb { width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--fg); font: 400 20px/1 var(--mono); cursor: pointer; touch-action: manipulation; }
.p-sb[aria-disabled=true] { color: var(--ph); cursor: default; }
.p-sb:focus-visible { outline-offset: -2px; }
.p-step .p-num { width: 64px; border-top: 0; border-bottom: 0; border-color: var(--line2); background: transparent; }
.p-unit { min-width: 44px; font-size: 15px; color: var(--fg2); }
.p-sku { margin: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.p-sku:empty { display: none; }

/* ---------- size run: presets + matrix ---------- */
.mx-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mx-target { margin: 0; font-size: 15px; line-height: 1.35; color: var(--fg2); }
.mx-target b { color: var(--fg); font-weight: 600; }
.mx-tsku { font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.mx-pre { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-pre .chip { height: 40px; padding: 0 12px; font-size: 14px; letter-spacing: 0; }
.mx-pre .chip[aria-disabled=true] { opacity: .45; cursor: default; }
.mx-fill { display: inline-flex; }
.mx-fill .chip { padding-right: 8px; border-right: 0; }
.mx-fillin { width: 48px; height: 40px; }

.mx-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--ctl) transparent; }
.mx { min-width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.mx th, .mx td { padding: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mx thead th { height: 40px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; }
.mx thead .mx-grp { padding: 0 6px; color: var(--fg2); border-bottom-color: var(--line2); }
.mx-grp .p-delta { margin-left: 4px; font-size: 12px; text-transform: none; }
.mx .mx-rh { position: sticky; left: 0; z-index: 2; min-width: 72px; padding: 6px 10px 6px 0; background: var(--bg); text-align: left; }
.mx thead .mx-corner { text-align: left; }
.mx-v { display: block; font: 400 20px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.mx-p { display: block; margin-top: 4px; font: 400 12px/1.25 var(--mono); color: var(--muted); white-space: nowrap; }
.mx-p > span { display: block; }
.mx-sku { display: none; }
.mx .mx-ch { padding: 0 2px; }
.mx-chb { width: 100%; min-height: 40px; padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.mx-dot { flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid var(--ctl); }
.mx-ch.is-ac .mx-chb { color: var(--fg); box-shadow: inset 0 -2px 0 var(--red); }
.mx .mx-c { padding: 6px 3px; }
.mx .mx-c.is-ac { background: rgba(244, 244, 241, .045); }
.mx-step { display: flex; align-items: center; justify-content: center; }
.mx-b { width: 30px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--line2); color: var(--fg2); font: 400 18px/1 var(--mono); cursor: pointer; touch-action: manipulation; }
.mx-b:first-child { border-right: 0; }
.mx-b:last-child { border-left: 0; }
.mx-c .p-num { width: 44px; color: var(--fg2); }
.mx-c .p-num.on { color: var(--fg); font-weight: 600; }
.mx-c.is-draft .p-num { box-shadow: inset 0 -3px 0 var(--red); }
.mx .mx-rt { min-width: 48px; padding: 0 0 0 10px; text-align: right; font: 500 15px/1 var(--mono); color: var(--ph); }
/* row header and totals stay pinned while a wide grid scrolls sideways */
.mx .mx-rt, .mx thead .mx-tot, .mx .mx-gt { position: sticky; right: 0; z-index: 2; background: var(--bg); }
.mx-wrap.is-over .mx-rh { box-shadow: 1px 0 0 var(--line2); }
.mx-wrap.is-over .mx-rt, .mx-wrap.is-over .mx-tot, .mx-wrap.is-over .mx-gt { box-shadow: -1px 0 0 var(--line2); }
.mx .mx-rt.on { color: var(--fg); }
.mx thead .mx-tot { text-align: right; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--muted); }
/* the material label of a column group stays readable next to the pinned row header while the grid scrolls */
.mx thead .mx-grp { text-align: left; }
.mx-gl { position: sticky; left: calc(var(--rhw, 72px) + 8px); display: inline-block; padding: 0 4px; }
.mx tfoot th, .mx tfoot td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--line2); border-bottom: 0; }
.mx tfoot .mx-rh { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mx .mx-ct { text-align: center; font: 500 15px/1.2 var(--mono); color: var(--ph); }
.mx .mx-ct.on { color: var(--fg); }
.mx-n { display: block; }
.mx-s { display: block; margin-top: 4px; font: 400 12px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.mx .mx-gt { padding-left: 10px; text-align: right; font: 700 15px/1.2 var(--body); white-space: nowrap; color: var(--fg); }
.mx-gt .mx-s { font-size: 13px; color: var(--fg2); }
.mx-more { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.mx-more[hidden] { display: none; }

/* ---------- draft hint ---------- */
.p-hint { margin: 20px 16px 0; padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--red); font-size: 14px; line-height: 1.45; color: var(--fg2); }
.p-hint[hidden] { display: none; }
.p-hint p { flex: 1 1 auto; margin: 0; }
.p-hint b { color: var(--fg); font-weight: 700; }
.p-hsub { display: block; margin-top: 2px; color: var(--muted); }
.p-hdot { display: none; }
.p-hint .p-link { flex: 0 0 auto; min-height: 24px; }

/* ---------- sticky add bar: viewport bottom on phones, bottom of the purchase column on desktop ---------- */
.pbar { position: sticky; bottom: 0; z-index: 8; margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line2); box-shadow: 0 -18px 24px -18px rgba(0, 0, 0, .8); }
.pbar-sum { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pbar-t { font: 700 16px/1.25 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-s { min-height: 18px; font-size: 14px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-link { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.p-errt { padding-left: 8px; box-shadow: inset 3px 0 0 var(--red); color: var(--fg); }
.pbar .pbar-btn { flex: 0 0 auto; width: auto; min-width: 148px; min-height: 52px; padding: 0 18px; font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
.pbar-n { display: none; }

/* ---------- buyer info ---------- */
.p-info { padding-top: 36px; gap: 0; }
.p-det { padding: 0 0 18px; }
.p-det ul { margin-bottom: 0; }
.p-det > :last-child { margin-bottom: 0; }
.p-txt { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--fg2); }
.p-txt b { color: var(--fg); font-weight: 600; }
.p-tbl { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.p-tbl th, .p-tbl td { padding: 9px 10px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.p-tbl thead th { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-tbl tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.p-tbl td { color: var(--fg2); }
.p-tbl tr.is-sel > * { color: var(--fg); background: rgba(244, 244, 241, .06); box-shadow: inset 0 -2px 0 var(--red); }
.p-tbl tr.is-sel > :first-child { padding-left: 8px; }
.p-approx { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.p-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-contact .btn { min-height: 48px; }

@media (hover: hover) {
  .p-link:hover, .pbar-link:hover { color: var(--fg2); }
  .p-modebtn:not([aria-pressed=true]):hover { color: var(--fg); background: var(--line); }
  .p-pill:not([aria-pressed=true]):hover, .mx-pre .chip:not([aria-disabled=true]):hover { border-color: var(--fg); }
  .p-sb:not([aria-disabled=true]):hover, .mx-b:hover { background: var(--line); color: var(--fg); }
  .mx-chb:hover { color: var(--fg); }
}

@media (min-width: 1024px) {
  .p-num { height: 40px; font-size: 15px; }
  .p-sb { width: 40px; height: 40px; }
  .p-step .p-num { width: 60px; }
  .p-pill { height: 40px; }
  .p-order { padding-top: 32px; }
  .mx .mx-rh { min-width: 0; padding-right: 12px; }
  .mx-v { font-size: 22px; }
  .mx-sku { display: block; margin-top: 3px; font: 400 12px/1.2 var(--mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
  .mx-tsku { display: none; }
  .mx .mx-c { padding: 5px 2px; }
  .mx-b { width: 22px; height: 40px; font-size: 15px; }
  .mx-c .p-num { width: 36px; }
  .p-hint { margin: 20px 0 0; }
  .pbar { margin-top: 28px; padding: 16px 0 20px; }
  .pbar-t { font-size: 18px; }
  .pbar .pbar-btn { min-width: 240px; min-height: 56px; padding: 0 28px; font-size: 14px; }
  .pbar-n { display: inline; }
  .p-info { padding-top: 40px; }
  /* D's toast contract: lift the bottom-right toast above this page's sticky bar */
  :root:has(.addbar) { --toast-lift: calc(var(--pbar-h, 92px) + 12px); }
}