/* =============================================================================
   KAWAWA MARKET ADMIN — EDIT A CATALOGUE PRODUCT
   =============================================================================
   Ported from mockup/admin_panel/product-edit.html's two stylesheets, folded into
   one: seller_panel/css/product-edit.css (the arrangement) and
   admin_panel/css/product-edit-admin.css (the ways the admin shell differs).

   Layout only. Every field, chip and box is styled by product-new.css, because
   they ARE the add form's fields — this page runs the same component. What changes
   is the arrangement: the add form is one narrow column showing one step at a
   time; editing shows both cards at once, numbered, with a live preview beside
   them.

   Unscoped selectors and loaded from index.html, matching product-new.css beside
   it — that is this panel's idiom. (The seller app scopes the same CSS under
   .pn-root because its shell restyles .form-control and half a dozen button class
   names; this shell does not, and these screens borrow none of those names.)
   ========================================================================== */

/* the add form's column is 560px; editing needs room for two */
.pe-wrap.pn-wrap { max-width: 1120px; }

/* A <button>, not a link: it goes back through the router, not to a URL. */
.pe_back {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 0; border: 0; background: none;
    font-size: 14px; font-weight: 600; color: #6b6459; text-decoration: none;
}
.pe_back:hover, .pe_back:focus { color: var(--pn-ink); text-decoration: none; }
.pe_back:focus-visible { outline: 3px solid var(--pn-brand); outline-offset: 3px; border-radius: 4px; }

.pe_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pe_head_text { min-width: 0; flex: 1 1 320px; }
.pe_kicker {
    margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #6b6459;
}
.pe-wrap .pe_title {
    margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--pn-ink);
    letter-spacing: -.4px; overflow-wrap: anywhere;
}
.pe_intro { margin: 8px 0 14px; font-size: 14.5px; color: var(--pn-ink-2); line-height: 1.55; }

/* Live / Hidden / Waiting for a seller, in words as well as colour */
.pe_pill {
    flex-shrink: 0; padding: 6px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 700; border: 1.5px solid transparent;
}
.pe_pill.is-live  { background: #e6f6ef; color: #0b6b4c; border-color: #c6ead8; }
.pe_pill.is-out   { background: #fff4e5; color: #8a4b00; border-color: #f4d3a8; }
.pe_pill.is-draft { background: #f1f2f4; color: #4a4f57; border-color: #dfe2e6; }

/* The "N sellers already stock this" line, which is .pn-waiting from the add
   form's last step reused — same shape, same meaning: something about this
   product reaches further than this screen. */
.pe_shared { margin-bottom: 18px; }

/* ---- two columns ---------------------------------------------------------- */
.pe_layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start;
}
.pe_main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* The preview has to stay in view while the admin scrolls the form, or the point
   of it — seeing a change as you make it — is lost below the fold. top: 80px
   clears the admin shell's own sticky header. */
.pe_side {
    position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px;
}

/* From product-edit-admin.css, and both rules are the answer to a measured bug.
   The seller sheet caps this column to the height left on screen and gives it its
   own scrollbar with overscroll-behavior: contain. On a 900px-tall screen its
   cards are taller than that cap, so with the pointer anywhere over the column the
   wheel scrolled the column ~100px and then nothing — the page itself never moved.
   That is the "scrolling does not work" on this page. So here the column never
   scrolls on its own: it is part of the page. */
@media (min-width: 1101px) {
    .pe_side { max-height: none; overflow: visible; overscroll-behavior: auto; }
}
/* And it stays pinned beside the form only on a screen tall enough to show all of
   it above the fixed save bar. Pinned on a shorter screen, its lowest card sat
   under the bar until the very end of the page; unpinned it simply scrolls. */
@media (min-width: 1101px) and (max-height: 1019.98px) {
    .pe_side { position: static; }
}

.pe_card {
    background: #fff; border: 1.5px solid var(--pn-line); border-radius: var(--pn-radius);
    padding: 20px 22px 22px;
}
/* The add form shows one panel at a time; here every one carries .on, and the
   cards are laid out by .pe_main's flex column rather than stacked margins. */
.pe_main .pn-panel.on { display: block; float: none; }

.pe_card_h { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 18px; }
.pe_num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff4e8; border: 1.5px solid #f1d6bd;
    font-size: 14px; font-weight: 800; color: #b34700;
}
.pe-wrap .pe_card_h h2 {
    margin: 3px 0 2px; font-size: 18px; font-weight: 800; color: var(--pn-ink); line-height: 1.3;
}
.pe_card_h p { margin: 0; font-size: 13.5px; color: #6b6459; line-height: 1.5; }

/* The group and the exact thing sit side by side: they are one decision. */
.pe_two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pe_two .pn-field { margin-bottom: 8px; }

@media (min-width: 641px) {
    /* The two help lines wrap to different heights — one is a sentence, the other
       three — which set the two boxes out of line by a row or two.

       A min-height on the help was the first answer and it is the wrong one: it
       only holds while the copy happens to fit the number of lines guessed, and it
       guessed two. Instead the grid gives both columns the same height (the taller
       wins) and the box is pushed to the BOTTOM of its column, so the two always
       start on the same line whatever the copy does at whatever width. */
    .pe_two > .pn-field { display: flex; flex-direction: column; }
    .pe_two > .pn-field > .pn-ta,
    .pe_two > .pn-field > .pn-input { margin-top: auto; }
}

/* Once a product has photos it opens on them: the big "choose images" box is only
   rendered when there are none, and the thumbnail row's own + tile adds more. */
.pe-wrap .pn-thumbs { margin-top: 0; }
.pe-wrap .pn-vidrow { margin-top: 16px; }

/* A fact the admin may read but not change — stated in place of the control that
   would have set it, rather than a disabled version of that control, which invites
   a tap and answers it with nothing. */
.pn-fixedval {
    display: flex; gap: 9px; align-items: flex-start; margin: 0;
    padding: 11px 13px; border-radius: 10px;
    background: var(--pn-subtle); border: 1.5px solid var(--pn-line);
    font-size: 12.5px; color: #5c554b; line-height: 1.5;
}
.pn-fixedval > i { color: #857d71; margin-top: 3px; flex-shrink: 0; }
.pn-fixedval b { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--pn-ink); }

/* ---- beside the form ------------------------------------------------------ */
.pe_side_h {
    margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #6b6459;
}
.pe_side .pn-chips { margin-bottom: 0; }
.pe_side_help { margin: 10px 0 0; font-size: 12.5px; color: #6b6459; line-height: 1.5; }
.pe_stock { margin: 0; font-size: 14px; font-weight: 700; color: #0b6b4c; }
.pe_stock.is-out { color: #8a4b00; }
.pe_preview .pn-card { max-width: 230px; margin: 0 auto; }
.pe_preview_note {
    margin: 12px 0 0; font-size: 12.5px; color: #6b6459; text-align: center; line-height: 1.5;
}

/* ---- action bar ----------------------------------------------------------- */
.pe-actions .pn-actions-in { max-width: 1120px; justify-content: flex-end; }
.pe-actions .pn-btn { flex: 0 1 260px; }
.pe-actions .pn-btn--ghost { flex: 0 0 auto; }
.pe-actions .pn-needed { max-width: 1120px; margin: 0 auto 10px; text-align: right; }
/* unsaved changes are worth a colour, not just words */
.pe-actions .pn-needed.is-dirty { color: #8a4b00; font-weight: 700; }
.pe-actions .pn-needed.is-dirty::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #e08a1e; margin-right: 7px; vertical-align: 1px;
}

/* ---- not found ------------------------------------------------------------ */
.pe_missing {
    text-align: center; padding: 60px 20px; background: #fff;
    border: 1.5px dashed var(--pn-line); border-radius: var(--pn-radius);
}
.pe_missing > i { font-size: 34px; color: #c9c2b6; margin-bottom: 14px; }
.pe_missing .pe_missing_h {
    font-size: 22px; font-weight: 800; color: var(--pn-ink); margin: 0 0 6px;
}
.pe_missing p { font-size: 14px; color: #6b6459; margin: 0 0 18px; }
.pe_missing .pn-btn { flex: 0 0 auto; display: inline-flex; }

/* ---- narrower screens ------------------------------------------------------ */
@media (max-width: 1100px) {
    /* One column: the preview and the controls follow the form, in the same place
       on screen as in the tab order. Drawn above it with order:-1 they were the
       first thing seen and the last thing a keyboard reached. */
    .pe_layout { grid-template-columns: minmax(0, 1fr); }
    .pe_side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .pe_side { grid-template-columns: 1fr; }
    .pe_two { grid-template-columns: 1fr; }
    .pe_card { padding: 16px; }
    .pe-actions .pn-needed { text-align: center; }
    .pe-actions .pn-btn { flex: 1 1 auto; }
    .pe-wrap .pe_title { font-size: 22px; }
}