/* ABBC line product page. Scoped to .abbc-line. Tokens are the live palette (design/line-product-v1, baseline/palette.json). */
.abbc-line { --canvas:#fff; --canvas-subtle:#f5f5f5; --ink:#000; --ink-soft:#1a1a1a; --muted:#69727d; --accent:#a80000; --accent-pressed:#870000; --on-inverse:#fff; --border:#0000002e; --radius:4px; --gutter:16px; --focus:3px solid #a80000;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1rem; line-height:1.5; color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; }
@media (min-width:640px){ .abbc-line { --gutter:24px; } }
@media (min-width:1100px){ .abbc-line { --gutter:32px; } }
.abbc-line *, .abbc-line *::before, .abbc-line *::after { box-sizing:border-box; }
.abbc-line img { max-width:100%; display:block; height:auto; }
.abbc-line a { color:inherit; }
.abbc-line a:focus-visible, .abbc-line button:focus-visible, .abbc-line input:focus-visible { outline:var(--focus); outline-offset:2px; }
.abbc-line .sr, .abbc-line .screen-reader-text { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.abbc-line .wrap { max-width:1360px; margin:0 auto; padding-inline:var(--gutter); }
.abbc-line h1, .abbc-line h2, .abbc-line h3 { font-family:inherit; text-transform:none; color:var(--ink); }

.abbc-line .crumbs { padding:16px var(--gutter) 8px; font-size:.875rem; }
.abbc-line .crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; }
.abbc-line .crumbs li { display:inline-flex; align-items:center; gap:8px; margin:0; }
.abbc-line .crumbs li + li::before { content:">"; color:var(--ink-soft); }
.abbc-line .crumbs a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding-inline:4px; text-decoration:none; color:var(--ink-soft); }
.abbc-line .crumbs a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.abbc-line .crumbs [aria-current] { font-weight:700; }

.abbc-line .top { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:8px var(--gutter) 40px; }
@media (min-width:900px){ .abbc-line .top { grid-template-columns:minmax(0,540px) minmax(0,1fr); gap:56px; align-items:start; } }
.abbc-line .media { margin:0; }
.abbc-line .shot { position:relative; aspect-ratio:1/1; border:1px solid var(--border); border-radius:var(--radius); background:var(--canvas); overflow:hidden; }
.abbc-line .shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.abbc-line h1 { margin:0; font-weight:800; font-stretch:112%; letter-spacing:-.015em; line-height:1.12; font-size:clamp(2rem,1.35rem + 2.2vw,3.25rem); text-wrap:balance; text-transform:uppercase; }
.abbc-line .short { margin:16px 0 0; max-width:52ch; font-size:1.0625rem; line-height:1.65; }
.abbc-line .short p { margin:0 0 .6em; }
.abbc-line .profile { margin:28px 0 0; padding:20px 0 0; border-top:2px solid var(--ink); display:grid; grid-template-columns:max-content minmax(0,1fr); gap:12px 28px; align-items:center; }
.abbc-line .profile dt { margin:0; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.abbc-line .profile dd { margin:0; font-weight:600; font-size:1.0625rem; }
@media (max-width:559px){ .abbc-line .profile { grid-template-columns:minmax(0,1fr); gap:0; } .abbc-line .profile dd { margin:4px 0 14px; } .abbc-line .profile dd:last-child { margin-bottom:0; } }
.abbc-line .meter { display:inline-flex; align-items:center; gap:12px; }
.abbc-line .meter .bars { display:inline-flex; gap:4px; }
.abbc-line .meter i { display:block; width:28px; height:10px; border:1px solid var(--ink); background:transparent; }
.abbc-line .meter i.on { background:var(--accent); border-color:var(--accent); }

.abbc-line .buy { padding:36px var(--gutter) 48px; border-top:1px solid var(--border); }
.abbc-line .buy-head { margin:0 0 16px; }
.abbc-line h2 { margin:0; font-weight:800; font-stretch:112%; letter-spacing:-.01em; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); line-height:1.2; }
.abbc-line .vt { width:100%; border-collapse:collapse; border:0; margin:0; font-variant-numeric:tabular-nums; }
.abbc-line .vt caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.abbc-line .vt thead th { padding:12px; text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:transparent; border:0; border-block:2px solid var(--ink); }
.abbc-line .vt .c-spec { display:none; }
.abbc-line .vt tbody:nth-of-type(even) { background:var(--canvas-subtle); }
.abbc-line .vt tbody { border-bottom:1px solid var(--border); }
.abbc-line .vt td, .abbc-line .vt tbody th { padding:14px 12px; vertical-align:middle; border:0; border-top:1px solid var(--border); background:transparent; color:var(--ink); }
.abbc-line .vt tbody tr:first-child > * { border-top:0; }
.abbc-line .vt tbody th { text-align:left; font-weight:800; font-stretch:112%; font-size:1.0625rem; text-transform:uppercase; }
.abbc-line .price del { margin-right:8px; font-size:.875rem; color:var(--ink-soft); }
.abbc-line .price ins { text-decoration:none; font-weight:700; color:var(--accent); font-size:1.0625rem; background:transparent; }
.abbc-line .qty { display:inline-flex; align-items:stretch; border:1px solid var(--muted); border-radius:var(--radius); background:var(--canvas); }
.abbc-line .qty button { width:44px; height:44px; padding:0; display:grid; place-items:center; background:none; border:0; border-radius:0; color:var(--ink); font:inherit; font-size:1.25rem; line-height:1; cursor:pointer; box-shadow:none; }
.abbc-line .qty button:hover:not(:disabled) { background:var(--ink); color:var(--on-inverse); }
.abbc-line .qty button:disabled { color:var(--muted); cursor:default; }
.abbc-line .qty button svg { width:14px; height:14px; }
.abbc-line .qty input { width:52px; height:44px; padding:0; margin:0; border:0; border-inline:1px solid var(--border); border-radius:0; background:transparent; color:var(--ink); font:inherit; font-size:1rem; font-weight:600; text-align:center; box-shadow:none; }
.abbc-line .btn { min-height:52px; padding:0 28px; border:0; border-radius:var(--radius); background:var(--accent); color:var(--on-inverse); font:inherit; font-weight:700; letter-spacing:0; text-transform:none; cursor:pointer; text-decoration:none; }
.abbc-line .btn:hover { background:var(--ink); color:var(--on-inverse); }
.abbc-line .btn.quiet { display:inline-flex; align-items:center; background:none; color:var(--ink); border:1px solid var(--ink); min-height:44px; padding:0 20px; }
.abbc-line .btn.quiet:hover { background:var(--ink); color:var(--on-inverse); }
.abbc-line .add { min-height:44px; min-width:88px; padding:0 20px; }
.abbc-line .abbc-forms { display:none; }
@media (max-width:759px){
  .abbc-line .vt, .abbc-line .vt tbody, .abbc-line .vt tr, .abbc-line .vt td, .abbc-line .vt th { display:block; }
  .abbc-line .vt thead { display:block; height:0; }
  .abbc-line .vt thead th { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .abbc-line .vt tbody { margin:0 0 12px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); }
  .abbc-line .vt td, .abbc-line .vt tbody th { padding:0; border-top:0; }
  .abbc-line .vt .c-lxr, .abbc-line .vt .c-pack { display:none; }
  .abbc-line .vt tr.pr { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"name name" "price price" "spec spec" "qty add"; gap:8px 12px; align-items:center; }
  .abbc-line .vt tr.pr > th { grid-area:name; min-width:0; font-size:1.25rem; line-height:1.2; overflow-wrap:anywhere; }
  .abbc-line .vt tr.pr > td.c-price { grid-area:price; justify-self:start; text-align:left; white-space:nowrap; }
  .abbc-line .vt tr.pr > td.c-spec { grid-area:spec; display:block; margin-top:-4px; font-size:.9375rem; color:var(--ink-soft); }
  .abbc-line .vt tr.pr > td.c-spec .dot { margin:0 .35em; }
  .abbc-line .vt tr.pr > td.c-qty { grid-area:qty; }
  .abbc-line .vt tr.pr > td.c-add { grid-area:add; min-width:0; }
  .abbc-line .vt tr.pr > td.c-add .add { width:100%; }
}
@media (min-width:760px){ .abbc-line .vt tr.pr td.c-qty, .abbc-line .vt tr.pr td.c-add { width:1%; white-space:nowrap; } .abbc-line .vt td.c-add { text-align:right; padding-left:20px; } .abbc-line .vt td.c-price, .abbc-line .vt td.c-lxr, .abbc-line .vt td.c-pack, .abbc-line .vt thead th { white-space:nowrap; } .abbc-line .vt td.c-spec .dot, .abbc-line .vt td.c-spec .sr { display:none; } }

.abbc-line .also { padding:40px var(--gutter) 72px; }
.abbc-line .also ul { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (min-width:760px){ .abbc-line .also ul { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } }
.abbc-line .also li { margin:0; }
.abbc-line .lcard { height:100%; display:flex; flex-direction:column; padding:12px; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color .12s; }
.abbc-line .lcard:hover { border-color:var(--ink); }
.abbc-line .lcard .shot { aspect-ratio:1/1; margin-bottom:12px; border:0; }
.abbc-line .lcard h3 { margin:0; font-size:1rem; font-weight:700; line-height:1.35; }
.abbc-line .lcard:hover h3 { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.abbc-line .lcard .from { margin:6px 0 0; padding-top:6px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); }
.abbc-line .lcard .from small { font-size:.8125rem; font-weight:600; color:var(--ink-soft); margin-right:4px; }

.abbc-line dialog.cm { width:min(520px,calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:var(--radius); background:var(--canvas); color:var(--ink); box-shadow:0 24px 48px -12px #0006; }
.abbc-line dialog.cm::backdrop { background:#000b; }
.abbc-line .cm-in { padding:28px 24px 24px; }
.abbc-line .cm h2 { font-size:1.625rem; }
.abbc-line .cm h2:focus { outline:none; }
.abbc-line .cm .sub { margin:6px 0 0; color:var(--ink-soft); }
.abbc-line .items { list-style:none; margin:20px 0 0; padding:0; border-top:2px solid var(--ink); }
.abbc-line .items li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:14px 0; margin:0; border-bottom:1px solid var(--border); }
.abbc-line .items .nm { font-weight:700; }
.abbc-line .items .pk, .abbc-line .items .q { grid-column:1/2; font-size:.9375rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.abbc-line .items .lt { grid-column:2/3; grid-row:1/4; align-self:center; font-weight:700; font-variant-numeric:tabular-nums; }
.abbc-line .sum { display:flex; justify-content:space-between; margin:14px 0 0; font-weight:700; font-variant-numeric:tabular-nums; }
.abbc-line .acts { display:grid; gap:8px; margin-top:20px; }
.abbc-line .acts .btn { min-height:52px; display:inline-flex; align-items:center; justify-content:center; }
.abbc-line .acts .text { min-height:48px; background:none; border:0; color:var(--ink); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.abbc-line .acts .text:hover { color:var(--accent); background:none; }
.abbc-line .err { margin:8px 0 0; color:var(--accent); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .abbc-line *, .abbc-line *::before, .abbc-line *::after { transition-duration:.001ms!important; animation:none!important; scroll-behavior:auto!important; } }