/* =============================================================================
   KAWAWA MARKET ADMIN — ADD A CATALOGUE PRODUCT
   =============================================================================
   Ported from seller_panel/css/product-new.css so the two screens read as one
   product. Pruned of everything a CATALOGUE entry has no use for:

     - the stock block (.pn-items, .pn-newitem, .pn-picks, .pn-swatches,
       .pn-pair, .pn-final). Price, quantity, size and colour belong to a
       SELLER'S stock row, and an admin entry has none — the seller supplies all
       of that when they pick the product up.
     - the lock notes (.pn-locked, .pn-lock-note). A seller adding stock to
       someone else's listing has fields locked against them; the admin owns the
       catalogue and is never locked out of anything.
     - the bottom-sheet / boost / strength machinery, which the seller mockup
       never rendered either.

   The rail token below is the ADMIN sidebar (.left_pannel, 260px), not the
   seller portal's 270px .body_left.
   Ported verbatim from mockup/admin_panel. Loaded globally from index.html
   rather than as a component stylesheet: Angular's component style budget
   errors at 12kb and this is well past it.
   ========================================================================== */
:root {
    /* White sits on --pn-grad and --pn-brand (buttons, active chips, the MAIN
       badge), so both ends of the ramp have to clear 4.5:1. The old
       #ff8a2b light stop gave white 2.35:1 — failing AA on every sheet
       button. --pn-brand-2 stays vivid: it is only ever a hover border or a
       tint, never behind text. */
    --pn-brand: #c75000;
    --pn-brand-2: #ff7a18;
    --pn-grad: linear-gradient(135deg, #c75000 0%, #9c3d00 100%);
    --pn-rail: 260px;   /* style.css .left_pannel width on the admin shell */
    --pn-ink: #17140f;
    --pn-ink-2: #4a453d;
    --pn-muted: #857d71;
    --pn-line: #e7e2da;
    --pn-subtle: #faf8f5;
    --pn-ok: #1fb489;
    --pn-err: #e3000b;
    --pn-radius: 16px;
}

/* The bottom padding reserves room for the fixed action bar, whose height
   changes with the step. product-new.js measures the bar and writes
   --pn-actions-h; the fallback covers the moment before that first runs. */
.pn-wrap {
    max-width: 560px; margin: 0 auto;
    padding: 20px 18px calc(var(--pn-actions-h, 150px) + 24px);
    display: flow-root;   /* contain any float site.css hands a descendant */
}

/* ---- progress ---------------------------------------------------------- */
.pn-steps { display: flex; gap: 6px; margin-bottom: 24px; }
.pn-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--pn-line); transition: background .3s ease; }
.pn-steps span.on { background: var(--pn-grad); }

.pn-h1 { font-size: 23px; font-weight: 800; color: var(--pn-ink); letter-spacing: -.4px; margin: 0 0 6px; }
.pn-sub { font-size: 14.5px; color: var(--pn-muted); margin: 0 0 22px; line-height: 1.55; }

/* site.css styles the bare element for the marketing site — `section { float:
   left; width: 100%; padding: 60px 0 }` — and the steps here are <section>s.
   A floated child adds no height to .pn-wrap, so the wrap collapsed to its own
   padding, main/.inside/.body_right under-measured with it, and the document's
   scroll range shrank to a fraction of the content: the page stopped scrolling
   far enough to clear the fixed action bar. Take the float back. */
.pn-panel { display: none; float: none; }
.pn-panel.on { display: block; }

/* Step 2, made [inert] by lockStep2() whenever "Brand New" is picked on step 1 —
   inert already stops interaction, this only needs to make that visible. */
/* Applied to the step-2 <section> and, separately, to #mediaField — not
   scoped to .pn-panel, since the second of those is a plain wrapping <div>. */

/* ---- step 1: photo ----------------------------------------------------- */
.pn-shoot {
    display: block;
    border: 2px dashed var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--pn-subtle);
    padding: 44px 20px;
    text-align: center;
    position: relative;
    transition: border-color .2s ease, background .2s ease;
}
.pn-shoot:hover { border-color: var(--pn-brand-2); background: #fff8f2; }
/* The file input is stretched over the whole box at opacity:0, so its own focus
   ring is painted invisible — put the state on the box instead. The soft tint
   is safe to linger after a mouse pick; the hard ring is keyboard-only. */
.pn-shoot:focus-within,
.pn-thumb.add:focus-within { border-color: var(--pn-brand-2); background: #fff8f2; }
.pn-shoot:has(input:focus-visible),
.pn-thumb.add:has(input:focus-visible) { outline: 2px solid var(--pn-brand); outline-offset: 2px; }
.pn-shoot .ico {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--pn-grad); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 16px;
    box-shadow: 0 8px 20px -6px rgba(212,85,0,.45);
}
.pn-shoot b { display: block; font-size: 16px; color: var(--pn-ink); margin-bottom: 4px; }
.pn-shoot small { color: var(--pn-muted); font-size: 13.5px; }
.pn-shoot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.pn-or { text-align: center; color: var(--pn-muted); font-size: 13px; margin: 14px 0; }

.pn-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pn-thumb {
    width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
    position: relative; border: 1px solid var(--pn-line); background: var(--pn-subtle);
}
.pn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pn-thumb .x {
    position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.6); color: #fff; font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pn-thumb .main {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--pn-brand); color: #fff;
    font-size: 9.5px; font-weight: 700; text-align: center; padding: 2px;
}
.pn-thumb.add {
    display: flex !important; align-items: center; justify-content: center;
    border-style: dashed; color: var(--pn-muted); font-size: 20px; cursor: pointer;
}
.pn-thumb.add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.pn-datanote {
    display: flex; gap: 8px; align-items: flex-start;
    background: rgba(31,180,137,.09); border: 1px solid rgba(31,180,137,.25);
    border-radius: 12px; padding: 11px 14px; margin-top: 16px;
    font-size: 13px; color: #0f6b52;
}
.pn-datanote i { margin-top: 2px; }

/* ---- fields ------------------------------------------------------------ */
.pn-field { margin-bottom: 22px; }
/* !important because site.css has `label { font-size:14px !important;
   font-weight:500 !important }` — every field question came out 14px/500,
   lighter than the "Specifications" sub-heading under it. */
.pn-label { display: block; font-size: 15px !important; font-weight: 700 !important; color: var(--pn-ink); margin: 0 0 4px; }
.pn-help { display: block; font-size: 13px; color: var(--pn-muted); margin-bottom: 9px; line-height: 1.5; }

.pn-input, .pn-select, .pn-textarea {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--pn-line); border-radius: 12px;
    font-family: inherit; font-size: 16px; color: var(--pn-ink);
    background: #fff; transition: border-color .15s ease;
}
/* `outline:none` with a hue-only swap to --pn-brand-2 left a 2.61:1 focus cue
   that a colour-blind seller cannot see at all. Keep a real ring, and use
   --pn-brand (4.12:1 on white) so it reads against the resting border. */
.pn-input:focus-visible, .pn-select:focus-visible, .pn-textarea:focus-visible {
    border-color: var(--pn-brand);
    outline: 2px solid var(--pn-brand);
    outline-offset: 1px;
}


/* ---- chips ------------------------------------------------------------- */
.pn-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-chip {
    padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--pn-line); background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--pn-ink-2);
    cursor: pointer; transition: all .15s ease;
}
.pn-chip:hover { border-color: var(--pn-brand-2); color: var(--pn-brand); }
.pn-chip.on { background: var(--pn-grad); border-color: transparent; color: #fff; }

/* ---- category type-ahead ----------------------------------------------- */
.pn-ta { position: relative; }
.pn-ta-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    background: #fff; border: 1px solid var(--pn-line); border-radius: 12px;
    box-shadow: 0 12px 30px -10px rgba(16,24,40,.25); overflow: hidden; display: none;
}
.pn-ta-list.on { display: block; }
.pn-ta-list button {
    display: flex; width: 100%; gap: 10px; align-items: center;
    padding: 12px 16px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 15px; color: var(--pn-ink); text-align: left;
}
.pn-ta-list button:hover { background: var(--pn-subtle); }
.pn-ta-list button i { color: var(--pn-muted); font-size: 13px; }
.pn-ta-list .new { color: var(--pn-brand); font-weight: 600; }

/* ---- sticky action ----------------------------------------------------- */
.pn-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--pn-line);
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}
.pn-actions-in { max-width: 560px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }

.pn-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 24px; border-radius: 999px; border: none;
    background: var(--pn-grad); color: #fff;
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(212,85,0,.45);
    transition: opacity .15s ease;
}
.pn-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.pn-btn--ghost {
    flex: 0 0 auto; background: none; color: var(--pn-ink-2);
    border: 1.5px solid var(--pn-line); box-shadow: none; padding: 15px 20px; font-weight: 600;
}
/* #6b6459, not --pn-muted: #857d71 is 4.06:1 on white, under AA for 13px —
   and on the edit page this line is the permanent save status */

/* ---- autosave ---------------------------------------------------------- */
.pn-saved {
    display: inline-flex; align-items: center; gap: 6px;
    /* #0f7a5a: the brand green --pn-ok is about 2.5:1 on white as text */
    font-size: 12.5px; color: #0f7a5a; font-weight: 600;
    opacity: 0; transition: opacity .3s ease;
}
.pn-saved.on { opacity: 1; }

/* ---- step 3: published -------------------------------------------------- */
.pn-live {
    text-align: center; padding: 8px 0 22px;
}
.pn-live .tick {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px;
    background: rgba(31,180,137,.12); color: var(--pn-ok);
    display: flex; align-items: center; justify-content: center; font-size: 34px;
}

.pn-card {
    border: 1px solid var(--pn-line); border-radius: var(--pn-radius);
    overflow: hidden; background: #fff; margin: 0 auto 8px; max-width: 240px;
    box-shadow: 0 10px 26px -14px rgba(16,24,40,.4);
}
.pn-card .ph { aspect-ratio: 1; background: var(--pn-subtle); }
.pn-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.pn-card .bd { padding: 12px 14px 14px; text-align: left; }
.pn-card .nm { font-size: 14px; font-weight: 600; color: var(--pn-ink); line-height: 1.35; }
.pn-card .pr { margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--pn-brand); }
.pn-card .un { font-size: 12px; color: var(--pn-muted); font-weight: 500; }
.pn-cardcap { font-size: 12.5px; color: var(--pn-muted); margin-bottom: 26px; }

/* ---- enrichment ladder -------------------------------------------------- */


/* ---- sheets ------------------------------------------------------------- */
/* Kept in flow and hidden with visibility, not display, so the sheet can
   actually animate — display:none cannot transition. visibility:hidden still
   blocks pointer events and keeps it out of the accessibility tree, so this is
   equivalent to the old display:none at rest. */
/* Centred, not bottom-anchored. The padding is what keeps the panel off the
   viewport edges once it is floating in the middle — without it a tall sheet
   on a short screen would touch top and bottom. */
/* NOTHING about the sheet's geometry may depend on an animation running to
   completion. The first cut slid it in with `transform: translateY(14px)` on
   the resting state, cleared by `.on`; whenever that animation did not finish
   — a frozen clock, a dropped frame, an interrupted transition — the sheet
   stayed parked 14px below the viewport and its Save button was cut off by the
   screen edge. The primary control of a dialog is not worth a flourish.
   The backdrop still fades, because opacity moves no geometry. */
@media (prefers-reduced-motion: reduce) {
}

/* The sheet takes focus programmatically so a screen reader announces the
   dialog. It is not a keyboard-navigated control, so Chrome's default ring
   around the whole panel is just a stray blue border. */

/* The sheet caps at 86vh and scrolls, so a primary sitting last in the flow
   drops below its own fold on a small or landscape phone (desc at 320x568:
   572px of content in a 488px box, Save 55px past the edge). The page's own
   primary lives in a fixed bar; the sheets keep that promise by pinning theirs
   to the bottom of their scrollport. */
/* .pn-btn's `flex:1` only sizes it inside the flex row .pn-actions-in; in the
   sheet's block context it fell back to inline-flex shrink-to-fit, leaving the
   commit action an 86px pill against the left edge. */

/* site.css hides the rail below 993px (max-width:992px pulls .body_left off by
   -270px), so this block has to start at 993 — at exactly 992 both rules
   applied and the bar was indented past a rail that was not on screen. */
@media (min-width: 993px) {
    .pn-wrap { padding-top: 30px; }
    /* clear the portal's fixed rail so the bar does not sit under it */
    .pn-actions { left: var(--pn-rail); }
    /* The sheet is NOT indented by the rail. It used to be, so it centred over
       the content column while the scrim dimmed the whole viewport — which put
       the panel visibly right of centre inside the dimmed area and read as a
       mistake rather than as alignment. A dialog centres on the page. */
}

/* site.css sets a global label style; these are layout blocks, not captions */
.pn-wrap label.pn-shoot { margin: 0; width: 100%; }
.pn-wrap .pn-label { margin-bottom: 4px; }

/* ---- card extras (sale price, description) ------------------------------ */
.pn-card .ph { position: relative; }
.pn-card .off {
    position: absolute; top: 8px; left: 8px;
    background: #e3000b; color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.pn-card .was {
    font-size: 12.5px; color: var(--pn-muted);
    text-decoration: line-through; font-weight: 500; margin-left: 4px;
}
.pn-card .ds {
    margin-top: 7px; font-size: 12px; color: var(--pn-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pn-card .soldout {
    position: absolute; top: 8px; right: 8px;
    background: var(--pn-ink); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.pn-card .ph img.dim { opacity: .45; }
/* Was .vr — which is Bootstrap 5's vertical-rule utility: display:inline-block,
   width:1px, a currentColor background. The sizes line rendered as a one-pixel
   grey stroke on every product card, in the add flow's "It's live" step too. */
.pn-card .sz {
    margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--pn-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-card .dots { margin-top: 7px; display: flex; gap: 5px; flex-wrap: wrap; }
.pn-card .dots span {
    width: 13px; height: 13px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.pn-card .cond {
    margin-top: 7px; display: inline-block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
    color: var(--pn-ink-2); background: var(--pn-subtle);
    border: 1px solid var(--pn-line); border-radius: 5px; padding: 2px 7px;
}

.pn-card .vid {
    position: absolute; bottom: 8px; left: 8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.62); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 10px;
}

/* ---- video (video sheet) ----------------------------------------------- */

/* ---- colour palette (variants sheet) ----------------------------------- */
/* The real <input type="color"> stretched over the "+ New" swatch and made
   invisible — the same technique .pn-shoot already uses for its file inputs.
   A genuine user click on this input is what reliably opens the browser's
   native colour picker; waking a fully hidden, off-screen input via a
   script-triggered .click() does not open the dialog in every browser. */

/* ---- type-ahead rows with meta ------------------------------------------ */
.pn-ta-list { max-height: 300px; overflow-y: auto; }
.pn-ta-list .hdr {
    padding: 9px 16px 5px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--pn-muted);
    background: var(--pn-subtle);
}
.pn-ta-list button .meta { margin-left: auto; font-size: 12px; color: var(--pn-muted); }
.pn-ta-list button b { font-weight: 600; }

/* ---- save for later ----------------------------------------------------- */
.pn-later {
    background: none; border: none; color: var(--pn-muted);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    text-decoration: underline; cursor: pointer; padding: 8px;
}
.pn-later:hover { color: var(--pn-brand); }

/* ---- variant chips inside sheets ---------------------------------------- */

/* ---- sale sheet: old price and percent off, side by side ---------------- */
/* The percent sign sits after the number, where the K sits before it. */
@media (max-width: 420px) {
}

/* ---- discount, folded under the price ---------------------------------- */

/* ---- listing strength --------------------------------------------------
   Seven equal rows made the seller guess which one mattered. The meter
   counts the five a buyer actually uses and names the next one to do;
   the full list stays, folded, underneath. */



/* ---- items (product_item_descs) ----------------------------------------
   Size and colour are independent, so a seller can have M in blue and in
   red. Every pair is one row with its own price, discount and return window.
   Delivery is not asked for at all — neither a fee nor a number of days —
   because it is settled when the buyer rings the shop. */


/* The row currently loaded into the form below, so it is obvious which one the
   fields belong to. */
/* Indents into its own row rather than bleeding outwards: a negative margin
   here has nothing to bleed into, so it pushed the whole stock list wider than
   the screen on a 320px phone. */

@media (max-width: 420px) {
}

/* ---- item entry --------------------------------------------------------
   Rows are added one at a time, as the live form does. What changes is the
   cost of a row: size and colour are one tap from the shared list, and the
   price, discount and return window carry over from the previous row. */

/* Backing out of a change is a quiet action, so it reads as one — but it is
   still a real button with a real target, not a line of text. */





.pn-more-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 40px; margin-top: 12px; padding: 0;
    border: none; background: none;
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--pn-brand); cursor: pointer;
}
.pn-more-toggle i { font-size: 11px; transition: transform .2s ease; }
.pn-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }


/* ---- specifications & dimensions (product level) ----------------------- */
.pn-optional {
    margin-left: 6px; padding: 2px 7px; border-radius: 3px;
    background: var(--pn-line); color: var(--pn-muted);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.pn-spec { margin-bottom: 18px; }
.pn-spec-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--pn-ink); }
.pn-spec-row { display: grid; grid-template-columns: 1fr 1fr 38px; gap: 8px; margin-bottom: 8px; }
.pn-spec-row input {
    min-height: 44px; padding: 0 12px;
    border: 1.5px solid var(--pn-line); border-radius: 10px; background: #fff;
    font-family: inherit; font-size: 14.5px; color: var(--pn-ink); min-width: 0;
}
.pn-spec-row input:focus { outline: none; border-color: var(--pn-brand); }
.pn-spec-row .rm {
    border: 1.5px solid var(--pn-line); border-radius: 10px; background: #fff;
    font-size: 17px; color: var(--pn-muted); cursor: pointer;
}
.pn-spec-row .rm:hover { border-color: var(--pn-err); color: var(--pn-err); }
.pn-spec-add {
    padding: 0; border: none; background: none;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--pn-brand); cursor: pointer;
}

/* ---- inline validation & video ---------------------------------------- */
.pn-err-msg {
    margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--pn-err);
}
.pn-area { resize: vertical; min-height: 86px; font-family: inherit; }

.pn-vidrow { margin-top: 14px; }
.pn-vidbtn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; cursor: pointer; position: relative;
    border: 1.5px dashed var(--pn-line); border-radius: var(--pn-radius); background: #fff;
}
.pn-vidbtn:hover { border-color: var(--pn-brand-2); }
.pn-vidbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pn-vidbtn > i { color: var(--pn-brand); font-size: 17px; }
.pn-vidbtn b { display: block; font-size: 15px; color: var(--pn-ink); }
.pn-vidbtn small { display: block; font-size: 12.5px; color: var(--pn-muted); margin-top: 1px; }
.pn-vidrow.done .pn-vidbtn { border-style: solid; border-color: var(--pn-ok); background: #f3fbf8; }
.pn-vidrow.done .pn-vidbtn > i { color: var(--pn-ok); }


.pn-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27><path d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23857d71%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    /* Without an explicit size an SVG with no intrinsic dimensions is scaled
       to fill the whole box, which is why the arrow came out enormous. */
    background-size: 12px 8px;
    padding-right: 40px;
    cursor: pointer;
}
.pn-select:disabled { background-color: #f4f1ec; color: var(--pn-muted); cursor: not-allowed; }

/* ---- what you added (after publishing) --------------------------------- */
.pn-recap {
    margin-top: 22px; padding: 18px;
    border: 1.5px solid var(--pn-line); border-radius: var(--pn-radius); background: #fff;
}
.pn-rc-h { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--pn-ink); }
.pn-rc-row {
    display: grid; grid-template-columns: 108px 1fr; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--pn-subtle);
}
.pn-rc-row span { font-size: 13px; color: var(--pn-muted); }
.pn-rc-row b { font-size: 14px; font-weight: 600; color: var(--pn-ink); line-height: 1.45; }
.pn-rc-sub {
    margin: 0 0 8px; font-size: 12px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--pn-muted);
}


/* ---- what you added ---------------------------------------------------- */
/* A summary is read, not tapped, so the rows are one line each rather than
   the tall cards the action list uses. */
.pn-recap { margin-top: 20px; padding: 18px 18px 16px; border: 1.5px solid var(--pn-line); border-radius: var(--pn-radius); background: #fff; }
.pn-rc-h { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--pn-ink); }

.pn-rc-list { border-top: 1px solid var(--pn-subtle); }
/* 88px is what the longest label ("Specifications") measures. Below that it
   silently overran its column and sat against the value with no gap at all. */
.pn-rc-line {
    display: grid; grid-template-columns: 20px 88px 1fr auto; gap: 8px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--pn-subtle);
}
.pn-rc-line .tk {
    width: 18px; height: 18px; border-radius: 50%; align-self: center;
    border: 1.5px solid var(--pn-line); background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #fff; font-style: normal;
}
.pn-rc-line.on .tk { background: var(--pn-ok); border-color: var(--pn-ok); }
/* Wraps inside its own column rather than shouldering into the value, should a
   bigger system font ever push it past 88px. */
.pn-rc-line .lb { font-size: 13px; color: var(--pn-muted); min-width: 0; overflow-wrap: anywhere; }
.pn-rc-line .vl {
    font-size: 14px; font-weight: 600; color: var(--pn-ink); line-height: 1.45;
    /* a video filename or a long spec has to wrap, not push the Edit button
       off the side of the card */
    overflow-wrap: anywhere; min-width: 0;
}
.pn-rc-line:not(.on) .vl { font-weight: 500; color: var(--pn-muted); }

.pn-rc-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pn-muted);
}
/* Both columns have to be allowed to shrink. Held at their content width they
   carried the row past the edge of the card at 360px — the width most Android
   phones in this market actually report. */

.pn-rc-miss { margin: 14px 0 0; font-size: 13px; color: var(--pn-muted); line-height: 1.5; }

/* Every line of the summary reopens the field it came from. #b34700 is the
   brand ramp's dark end — 5.5:1 on white, so a 12.5px label still clears AA. */
.pn-rc-ed {
    justify-self: end; align-self: center;
    min-height: 30px; padding: 4px 11px; border-radius: 999px;
    border: 1.5px solid var(--pn-line); background: #fff;
    font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0;
    text-transform: none; color: #b34700; cursor: pointer; white-space: nowrap;
}
.pn-rc-ed:hover { border-color: var(--pn-brand); background: #fff6ef; }
.pn-rc-ed:focus-visible { outline: 2px solid var(--pn-brand); outline-offset: 2px; }

/* The field the seller was sent to, ringed for a moment on arrival. Box-shadow
   only: nothing here may depend on the animation finishing, or the field lands
   in the wrong place on a phone that never runs it. */
@keyframes pnFlash {
    0%   { box-shadow: 0 0 0 3px rgba(199, 80, 0, .32); }
    100% { box-shadow: 0 0 0 3px rgba(199, 80, 0, 0); }
}
.pn-flash { border-radius: 12px; animation: pnFlash 1.5s ease-out 1; }
.pn-flash:focus { outline: none; }

/* Names a button for a screen reader without printing it twice on the page. */
.pn-vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* On a phone the price, the discount and the return window do not fit beside
   the size and colour — squeezed into what is left of the row they came out
   three lines deep and ragged. Give them the width of the row. */
@media (max-width: 430px) {
}

@media (max-width: 330px) {
    .pn-rc-line { grid-template-columns: 20px 1fr auto; }
    .pn-rc-line .vl { grid-column: 2; }
    .pn-rc-line .pn-rc-ed { grid-column: 3; grid-row: 1 / span 2; }
}

/* An optional field says so on the label, so the seller can see what is
   actually required without pressing the button to find out. */
.pn-optional {
    margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--pn-subtle); border: 1px solid var(--pn-line);
    font-size: 11px; font-weight: 600; color: var(--pn-muted);
    text-transform: lowercase; letter-spacing: .2px;
}

/* ---- restored from the seller sheet ------------------------------------
   Pruned by mistake with the stock block: both are used on every step here. */
.pn-needed { text-align: center; font-size: 13px; color: #6b6459; margin: 0 0 10px; }

.pn-vid-remove {
    display: block; margin: 8px 0 0 auto; padding: 6px 10px; border: none; background: none;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #a4231a; cursor: pointer;
    border-radius: 8px;
}
.pn-vid-remove:hover { background: #fdecea; }
.pn-vid-remove:focus-visible { outline: 2px solid #a4231a; outline-offset: 2px; }
.pn-vid-remove[hidden] { display: none; }

/* ---- admin-only ---------------------------------------------------------
   Neither exists on the seller sheet, because neither statement is true there. */

/* How the shelf is sold. A fact read off the sub-category, not a control —
   the admin sets it once in Settings and the seller picks from it. Quiet,
   because nothing here needs anyone to act. */
.pn-unitnote {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 8px 0 0; padding: 10px 13px; border-radius: 12px;
    background: var(--pn-subtle); font-size: 13px; color: var(--pn-ink-2); line-height: 1.5;
}
.pn-unitnote i { margin-top: 2px; color: var(--pn-muted); }
.pn-unitnote a { color: var(--pn-brand); font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* The one thing an admin must not misread about this screen: the product they
   just created is NOT on the storefront. Louder than .pn-unitnote on purpose. */
.pn-waiting {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 18px 0 0; padding: 14px 16px; border-radius: var(--pn-radius);
    background: #eef6ff; border: 1.5px solid #a8c8ee;
}
.pn-waiting i { color: #1d4ed8; font-size: 17px; margin-top: 2px; }
.pn-waiting div { flex: 1; min-width: 0; font-size: 13.5px; color: #1e3a5f; line-height: 1.55; }
.pn-waiting b { display: block; font-weight: 700; margin-bottom: 2px; }

/* "Electronics is a new group — it will be created when you save." Shown under
   either shelf box when the admin typed a name that is not on the list. */
.pn-newtag {
    margin: 8px 0 0; padding: 10px 13px; border-radius: 12px;
    background: rgba(199,80,0,.07); border: 1px solid rgba(199,80,0,.25);
    font-size: 13px; color: var(--pn-ink-2); line-height: 1.5;
}