/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-order-products.css — round 5, order workspace Products tab
   (the same product-details strip is reused by the PO workspace, so the
   strip rules below apply there too — owProductDetailInner draws both).

   Owner's items:
     7  quantity-break chips under each line (.ow-tiers) + hint tones (.ow-ph)
     8  code + description on ONE row (.ow-pv-line); the first details block
        is double width and holds every spec field plus Colours
        (.ow-pc-spec), then A1/B1/C1… renders, logos, detailings
     9  logo / detailing images float in the centre of their box (.ow-pc-fit)
   Linked after oms-rd-admin*.css; bump ?v= on every edit.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8: SKU + description on one line ─────────────────────────────────── */
.rd .pv-title .ow-pv-line{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0}
.rd .pv-title .ow-pv-line .pv-code{flex:none}
.rd .pv-title .ow-pv-line .pv-desc{min-width:0;overflow-wrap:anywhere}

/* ── 8: the double-width Product details block ────────────────────────── */
/* 2 × .pc (230px) + the strip's 12px gap, so it lines up with two cards. */
.rd .pv-strip .pc.ow-pc-spec{width:472px}
/* r6 item 3: Fabric full width on top · the short fields two-up · Colours full
   width at the bottom. */
.rd .pc.ow-pc-spec .ow-pc-spec-cols{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.rd .pc.ow-pc-spec .ow-pc-spec-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.rd .pc.ow-pc-spec .ow-pc-spec-col + .ow-pc-spec-col{border-top:1px solid var(--line);padding-top:10px}
.rd .pc.ow-pc-spec .ow-pc-spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;align-items:start}
.rd .pc.ow-pc-spec .ow-pc-spec-grid .rowkv{border-top:0;padding-top:0;flex-direction:column;justify-content:flex-start;gap:2px}
.rd .pc.ow-pc-spec .ow-pc-spec-grid .rowkv span:last-child{text-align:left}
.rd .pc.ow-pc-spec .ow-pc-spec-grid .btn{align-self:end}
.rd .pc.ow-pc-spec .ow-pc-spec-col-c{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
.rd .pc.ow-pc-spec .ow-pc-spec-col-c .ow-pc-sub{flex:0 0 100%}
.rd .pc.ow-pc-spec .ow-pc-sub{font-size:11px;font-weight:700;color:var(--muted)}
.rd .pc.ow-pc-spec .btn{justify-content:center}

/* ── 9: images float in the centre of their box, both axes ────────────── */
/* The <a> wrapper used to size to its content (grid item, auto size), so the
   img's 100% / contain resolved against the link, not the well — a square
   logo in the 4:3 well sat top-left. The wrapper now fills the well. */
/* Absolutely placed so the well's aspect-ratio box decides the size — as a grid
   item the square image grew the row past the 4:3 well and was clipped at the
   bottom instead of fitted. */
.rd .pv-strip .pc .img{position:relative}
.rd .pv-strip .pc .img > a,
.rd .pv-strip .pc .img > img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box}
.rd .pv-strip .pc .img > a{display:flex;align-items:center;justify-content:center}
.rd .pv-strip .pc .img > a > img,
.rd .pv-strip .pc .img > img{object-fit:contain;object-position:50% 50%;display:block}
.rd .pv-strip .pc .img > a > img{width:100%;height:100%}
.rd .pv-strip .pc .img.ow-pc-fit{aspect-ratio:4/3}
.rd .pv-strip .pc .img.ow-pc-fit > a,
.rd .pv-strip .pc .img.ow-pc-fit > img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
.rd .pc h5 .chip{text-transform:none;letter-spacing:0}

/* ── 7: price hint + quantity-break chips ─────────────────────────────── */
.rd .pv-foot .pv-hint{min-width:0}
.rd .ow-ph{font-size:12px;font-weight:600;color:var(--muted)}
.rd .ow-ph.ow-ph-ok{color:var(--ok)}
.rd .ow-ph.ow-ph-warn{color:var(--warn)}
.rd .ow-ph.ow-ph-man{color:#92400E}
.rd .pv-hint .btn.sm{height:26px;padding:0 10px;font-size:12px}
.rd .ow-tiers{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:4px}
.rd .ow-tiers .chip{font-variant-numeric:tabular-nums;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
.rd .ow-tiers .chip.acc{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.rd .ow-tiers .ow-ph{margin-left:4px}

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .rd .pv-strip .pc.ow-pc-spec{width:min(472px, calc(100vw - 64px))}
  .rd .pc.ow-pc-spec .ow-pc-spec-grid{gap:8px 10px}
  .rd .ow-tiers{margin-left:0}
}

/* r6 follow-up: Size chart button sits top right, in line with the "Product details" label;
   colour chips run in a line and wrap (oms-rd-admin.css stacks .omsc-set in every .pc). */
.rd .pc.ow-pc-spec .ow-pc-spec-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rd .pc.ow-pc-spec .ow-pc-spec-h h5{margin:0}
.rd .pc.ow-pc-spec .ow-pc-spec-col-c .omsc-set{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}