/* =============================================================================
   DigiStore — physical products (E-commerce Phase 1)
   Loaded after app.css. Only classic-theme storefront selectors + admin bits.
   ========================================================================== */

.vp { padding: 18px; }
.vp .vp-axis { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.vp .vp-axis-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .62; }
.vp .vp-axis-label b { text-transform: none; letter-spacing: 0; opacity: 1; font-weight: 700; }
.vp .vp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.vp .vp-swatch {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px;
  border: 1px solid rgba(125, 130, 150, .28); border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .14s, background .14s, transform .14s;
}
.vp .vp-swatch i { width: 15px; height: 15px; border-radius: 50%; background: var(--sw, #c9ced6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.vp .vp-swatch:hover { transform: translateY(-1px); }
.vp .vp-swatch.is-on { border-color: currentColor; background: color-mix(in srgb, currentColor 9%, transparent); font-weight: 700; }
.vp .vp-sizes { margin-bottom: 6px; }
.vp .vp-sizes.is-hidden { display: none; }
.vp .vp-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 8px; }
.vp .vp-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.vp .vp-cell.disabled { opacity: .5; cursor: not-allowed; }
.vp .vp-cell.is-on, .vp .vp-cell.opt-selected { border-color: currentColor; }
.vp .vp-cell-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp .vp-cell-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vp .vp-cell-top b { font-size: 15px; }
.vp .vp-sku { font-size: 10.5px; opacity: .55; font-family: ui-monospace, SFMono-Regular, monospace; }
.vp .vp-cell-stock { font-size: 11.5px; }
.vp .vp-cell-price { font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; }
.vp .vp-cell-price s { display: block; font-size: 11.5px; font-weight: 500; opacity: .55; }
.vp .vp-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(125, 130, 150, .25); }
.vp .vp-tag-warn { font-size: 11.5px; color: #b45309; background: rgba(234, 179, 8, .14); border-radius: 999px; padding: 3px 9px; }
.vp .vp-brand { margin: 10px 0 0; font-size: 12px; opacity: .7; }

@media (max-width: 560px) {
  .vp .vp-cells { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vp .vp-cell { padding: 9px 10px; }
  .vp .vp-cell-price { font-size: 13px; }
}

/* Admin: tiny helpers used by the matrix + inventory desk. */
.vm-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--sw, #c9ced6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.tbl .input-sm { height: 32px; padding: 0 8px; font-size: 13px; width: 100%; min-width: 84px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, monospace; }

/* ── E-commerce Phase 2.4 — options on the product page, delivery-only checkout ──
   The storefront radio was a plain browser control sitting inside a card, so the
   selected variant looked no different from the others and the row read like a
   form. The card is now the control: hidden input, accent frame, tick, soft tint.
   .opt-selected is written by the product page's own script; :has() keeps it right
   when scripting is off, and the checked input is a plain sibling of the body for
   browsers that do not speak :has(). */
.vp .vp-cell { position: relative; border: 1px solid var(--border, rgba(125, 130, 150, .28));
  border-radius: 13px; background: var(--card, #fff); min-height: 64px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.vp .vp-cell .plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.vp .vp-cell:hover:not(.disabled) { border-color: color-mix(in srgb, var(--primary, #f85606) 46%, transparent); }
.vp .vp-cell.opt-selected,
.vp .vp-cell:has(.plan-radio:checked) {
  border-color: var(--primary, #f85606);
  background: color-mix(in srgb, var(--primary, #f85606) 7%, var(--card, #fff));
  box-shadow: 0 0 0 1px var(--primary, #f85606); }
.vp .vp-cell.opt-selected::after,
.vp .vp-cell:has(.plan-radio:checked)::after {
  content: '\2713'; position: absolute; top: 7px; right: 9px; width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 900;
  color: #fff; background: var(--primary, #f85606); }
.vp .vp-cell:has(.plan-radio:focus-visible) { outline: 2px dashed color-mix(in srgb, var(--primary, #f85606) 60%, transparent); outline-offset: 3px; }
.vp .vp-cell.disabled { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(125, 130, 150, .07) 6px 12px); }
.vp .vp-cell-top b { padding-right: 18px; }
.vp .vp-head { justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.vp .vp-picked { font-size: 12.5px; opacity: .78; }
.vp .vp-picked b { font-weight: 800; opacity: 1; }
.vp .vp-swatch { min-height: 38px; }
.vp .vp-swatch.is-on { border-color: var(--primary, #f85606);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #f85606) 62%, transparent); }

/* The checkout confirmation card. */
.co-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 4px;
  border: 1px solid var(--border, rgba(125, 130, 150, .28)); border-radius: 14px;
  background: color-mix(in srgb, var(--primary, #f85606) 4%, var(--card, #fff)); }
.co-picked-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--sw, #c9ced6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.co-picked-body { flex: 1; min-width: 0; }
.co-picked-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.co-picked-sku { font-size: 10.5px; opacity: .55; }
.co-picked-meta { display: block; margin-top: 3px; font-size: 11.5px; }
.co-picked-price { text-align: right; white-space: nowrap; font-size: 14px; font-weight: 800; }
.co-picked-price s { display: block; font-size: 11.5px; font-weight: 500; opacity: .55; }
.co-picked-price .tiny { display: block; font-weight: 500; }
.co-picked-change { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; color: var(--primary, #f85606);
  border: 1px solid color-mix(in srgb, var(--primary, #f85606) 40%, transparent);
  border-radius: 999px; padding: 7px 12px; transition: background .14s ease; }
.co-picked-change:hover { background: color-mix(in srgb, var(--primary, #f85606) 10%, transparent); }
@media (max-width: 560px) {
  .co-picked { flex-wrap: wrap; gap: 10px; padding: 11px 12px; }
  .co-picked-price { text-align: left; }
  .co-picked-change { width: 100%; justify-content: center; }
  .vp .vp-cells { grid-template-columns: 1fr; }
  .vp .vp-cell { min-height: 58px; }
  .vp .vp-swatch { flex: 1 1 auto; min-height: 44px; }
  .vp .vp-head { gap: 4px 10px; }
}
@media (max-width: 400px) {
  .vp .vp-swatches { gap: 6px; }
  .vp .vp-cell-top b { font-size: 14px; }

/* ── E-commerce Phase 2.4.1 — the option card, repaired ──
   The card used to inherit its row layout from the theme's .plan-pick rules,
   which is why a single dropped ">" could flatten the whole thing. The layout is
   now declared here too: name/stock on the left, price on the right, and 34px
   reserved on the right so the selected tick never lands on the price. Long
   SKUs truncate instead of pushing the price out, and the grid stays two-up on
   a phone — only very narrow screens give the price its own line. */
.vp .vp-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 34px 11px 13px; min-width: 0; }
.vp .vp-cell > * { min-width: 0; }
.vp .vp-cell-body { flex: 1 1 auto; }
.vp .vp-cell-price { flex: 0 0 auto; }
.vp .vp-cell-top b { padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp .vp-sku { display: inline-block; vertical-align: bottom; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp .vp-cell.opt-selected::after,
.vp .vp-cell:has(.plan-radio:checked)::after { top: 9px; right: 10px; }
@media (max-width: 560px) {
  .vp .vp-cells { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .vp .vp-cell { padding: 10px 30px 10px 11px; }
}
@media (max-width: 420px) {
  .vp .vp-cell { flex-wrap: wrap; align-items: flex-start; }
  .vp .vp-cell-body { flex: 1 1 100%; }
  .vp .vp-cell-price { flex: 1 1 100%; text-align: left; }
}
.co-picked-sku { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .co-picked-top { min-width: 0; }
  .co-picked-top b { overflow-wrap: anywhere; }
}
}