/* 16-post-goods.css — Stock + stock-mode picker, 3-dot context menu, and the Post/Edit Goods page
   (media tray, voice recorder, video slides, upload banner, pager retry).
   Part of the old css/styles.css (lines 3650–4371); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ═══════════════════════════════════════════════════════
   Stock & Colors — Patch D additions
   ═══════════════════════════════════════════════════════ */

/* ── Product detail stock chip area ── */
#productStockInfo {
  padding: 0 16px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Extra owner buttons spacing on product page ── */
.purchase-section .add-to-plastay-btn + .add-to-plastay-btn {
  margin-top: 8px;
}
#productEditBtn,
#productRestockBtn {
  background: #f0f3fa;
  color: #19378C;
  border: 1.5px solid #c8d4ef;
}

/* ═══════════════════════════════════════════════════════
   Stock Mode Toggle — Unlimited / Single / Multi picker
   ═══════════════════════════════════════════════════════ */

.stock-mode-toggle {
  display: flex;
  gap: 6px;
  background: #f0f2f7;
  border-radius: 12px;
  padding: 4px;
}

.stock-mode-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.stock-mode-btn.active {
  background: #fff;
  color: #19378C;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.stock-mode-btn:not(.active):active {
  background: #e8ebf4;
}

/* ═══════════════════════════════════════════════════════
   Context Menu — 3-dot dropdown (brand page + cards)
   ═══════════════════════════════════════════════════════ */

.mk-ctx-menu {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  min-width: 210px;
  overflow: hidden;
  animation: ctxFadeIn 0.15s ease;
  border: 1px solid rgba(0,0,0,0.07);
}

@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.93) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.mk-ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}

.mk-ctx-menu-item:active,
.mk-ctx-menu-item:hover {
  background: #f4f6fb;
}

.mk-ctx-menu-item.danger { color: #e74c3c; }

.mk-ctx-menu-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 2px 0;
}

/* ── 3-dot button on browse cards ── */
.product-card-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  background: rgba(0,0,0,0.42);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.product-card:hover .product-card-menu-btn,
.product-card-menu-btn:focus {
  opacity: 1;
}

/* Always show on touch devices */
@media (hover: none) {
  .product-card-menu-btn { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   Unified Post / Edit Goods page (#postGoods)
   One full-screen page for creating AND editing a listing — personal or
   branded. See index.html #postGoods and nav.js#openGoodsForm().
   ══════════════════════════════════════════════════════════════════════ */

/* #postGoods inherits the app's generic section top/side padding
   (header offset + 1rem) — see "All other sections" rule in this file. */
#postGoods { background: #f6f7fb; min-height: 100%; padding-bottom: 0 !important; }
.pg-form { max-width: 560px; margin: 0 auto; }

/* ── Header ── */
.header-goods-form {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  padding: 0 0.9rem;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 10px;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid #eef0f5;
  height: calc(56px + env(safe-area-inset-top, 0px));
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}
.header-goods-form.hidden { display: none; }
.pg-back-btn {
  background: #f5f6fa; border: none; border-radius: 50%;
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #333; transition: background 0.15s;
}
.pg-back-btn:active { background: #e9ebf3; }
.pg-back-btn .material-symbols-rounded { font-size: 20px; }
.pg-header-titles { flex: 1; min-width: 0; text-align: center; }
.pg-header-title { font-size: 1.02rem; font-weight: 800; color: #14213d; line-height: 1.2; letter-spacing: -0.01em; }
.pg-header-subtitle { font-size: 0.72rem; color: #9295a3; margin-top: 1px; }

/* ── Page container ── */

/* ── Owner badge: "Posting as: X" ── */
.pg-owner-badge {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #e4e7f3;
  color: #19378C; font-size: 0.85rem; font-weight: 700;
  border-radius: 14px; padding: 11px 14px; margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(20,33,61,0.04);
}
.pg-owner-badge .material-symbols-rounded {
  font-size: 17px; background: #eef1fb; color: #19378C;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Status strip (edit mode only) ── */
.pg-status-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.pg-status-date { font-size: 11.5px; color: #a3a6b3; font-weight: 600; }

/* ── Cards ── */
.pg-card {
  background: #fff; border: 1px solid #eef0f5; border-radius: 18px;
  padding: 1.25rem; margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(20,33,61,0.03);
}
.pg-field { margin-bottom: 1.1rem; }
.pg-field:last-child { margin-bottom: 0; }
.pg-field label {
  display: block; margin-bottom: 0.4rem; font-weight: 700;
  font-size: 0.82rem; color: #14213d; letter-spacing: -0.01em;
}
.pg-field label .req { color: #e0524f; font-weight: 700; }
.pg-field input,
.pg-field textarea,
.pg-field select {
  width: 100%; padding: 0.72rem 0.85rem; border: 1.5px solid #e7e9f0;
  border-radius: 12px; font-size: 0.9rem; font-family: inherit; color: #1a1a2e;
  background: #fbfbfd; box-sizing: border-box; transition: border-color 0.15s, background 0.15s;
}
.pg-field input::placeholder,
.pg-field textarea::placeholder { color: #b3b6c2; }
.pg-field input:focus,
.pg-field textarea:focus,
.pg-field select:focus {
  outline: none; border-color: #19378C; background: #fff;
  box-shadow: 0 0 0 3px rgba(25,55,140,0.08);
}
.pg-field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.pg-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.2rem;
}
.pg-field select:disabled { color: #b3b6c2; background-color: #f5f5f8; cursor: not-allowed; }

/* Slightly bolder than a regular field so a typed price is easy to read,
   without standing out as an oversized element on the page. */
.pg-field #itemPrice {
  font-weight: 600;
}
.pg-field .price-currency-row select {
  font-weight: 600;
}

.pg-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.pg-field-header label { margin: 0; }
.pg-hint-line { font-size: 0.78rem; color: #9295a3; margin-bottom: 0.85rem; line-height: 1.4; }

.condition-hint { font-size: 0.75rem; color: #9295a3; margin-top: 0.4rem; line-height: 1.4; }

/* ── Media tray (post form) ──
   A horizontal rail of large cards holding photos, the video and the add
   card together. It replaced two separate sections with their own grids
   and their own add buttons, which made a single question ("what does
   this item look like?") read as two chores.

   Cards are 104x128 rather than the 82px squares this started as. A
   thumbnail that small can't answer the only question the seller is
   asking while looking at it — is this the photo I want people to see
   first — so they were opening each one to decide. The trade is that
   they no longer fit on one screen, which is what the rail is for.

   Portrait, because phone photos are portrait and a landscape card
   letterboxes them into less usable area than its own size suggests.

   Badges sit inside the card, remove buttons inside the opposite corner.
   Both inside, unlike the old floating ✕, so nothing overlaps a
   neighbouring card when they sit 8px apart. */
.pg-media-grid { display: block; }

.pg-media-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room for the cards' own shadow, which a hidden overflow would clip */
  padding: 2px 2px 4px;
  margin: 0 -2px;
}
.pg-media-rail::-webkit-scrollbar { display: none; }

.pg-media-card {
  position: relative;
  width: 104px; height: 128px;
  flex: 0 0 auto;
  border-radius: 14px;
  scroll-snap-align: start;
  overflow: hidden;
  background: #10131f;
  box-shadow: 0 1px 4px rgba(20, 25, 50, 0.10);
}
.pg-media-media {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.pg-media-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 34px;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Position marker and duration share one shape so the rail reads as a
   single system — the first tells you where a photo sits in the order,
   the second what the video costs to watch. */
.pg-media-badge {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(16, 19, 31, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  pointer-events: none;
}
.pg-media-duration { left: auto; right: 6px; }

/* Remove control. Dark and circular rather than the red pill used
   elsewhere: on top of a photo, red reads as an error state on the
   photo itself rather than a control that removes it. */
.pg-media-card .preview-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(16, 19, 31, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  border: none;
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; z-index: 2;
}
.pg-media-card .preview-remove:active { background: rgba(16, 19, 31, 0.85); }

.pg-media-add {
  background: #f6f7ff;
  border: 1.5px dashed #c7cef0;
  box-shadow: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.62rem; font-weight: 700;
  color: #19378C; text-align: center;
  line-height: 1.3;
  padding: 6px;
}
.pg-media-add:active { background: #eceffd; }
.pg-media-add .material-symbols-rounded { font-size: 24px; }

/* ── Pager ──
   Arrows at the edges, dots centred between them. The arrows are the
   affordance for anyone who doesn't think to swipe a form field; the
   dots are the position readout. Both are driven by the rail's scroll
   event rather than by their own clicks, so swiping and tapping can't
   disagree about which card is current. */
.pg-media-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}
.pg-media-arrow {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #e2e5f0;
  background: #fff;
  color: #5a6076;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  transition: opacity 0.15s;
}
.pg-media-arrow .material-symbols-rounded { font-size: 18px; }
.pg-media-arrow:disabled { opacity: 0.3; cursor: default; }
.pg-media-arrow:not(:disabled):active { background: #f2f4fb; }

.pg-media-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; flex: 1;
}
.pg-media-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none; padding: 0;
  background: #d5d9e8;
  cursor: pointer;
  transition: background 0.15s, width 0.15s;
}
.pg-media-dot.is-active { background: #19378C; width: 16px; border-radius: 3px; }

.pg-media-count { font-size: 0.78rem; color: #9295a3; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pg-media-add, .pg-media-dot, .pg-media-arrow { transition: none; }
}

.pg-tips {
  display: flex; gap: 9px; align-items: flex-start;
  background: #fffbf0; border: 1px solid #f7ecc9; border-radius: 12px;
  padding: 11px 13px; margin-top: 14px;
  font-size: 0.78rem; color: #7a6a2f; line-height: 1.45;
}
.pg-tips .material-symbols-rounded { font-size: 16px; color: #e6a917; flex-shrink: 0; margin-top: 1px; }
.pg-tips strong { color: #4a3f16; }

/* ── Voice description recorder (post-goods form) ── */
.pg-voice-recorder {
  display: flex; align-items: center; gap: 12px;
  background: #f6f7ff; border: 1.5px dashed #c7cef0; border-radius: 14px;
  padding: 12px 16px;
}
.pg-voice-recorder.is-recording { background: #fff3f3; border-color: #f0b8bc; }
.pg-voice-record-btn {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  border: none; background: #19378C; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.pg-voice-record-btn:active { transform: scale(0.94); }
.pg-voice-record-btn.recording { background: #d63b45; animation: pgVoicePulse 1.4s ease-in-out infinite; }
.pg-voice-record-btn .material-symbols-rounded { font-size: 20px; }
@keyframes pgVoicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,59,69,0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(214,59,69,0); }
}
.pg-voice-hint { font-size: 0.85rem; font-weight: 600; color: #555; font-variant-numeric: tabular-nums; }

.pg-voice-preview-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #f6f7ff; border: 1.5px solid #c7cef0; border-radius: 14px;
  padding: 10px 12px 10px 10px;
}
.pg-voice-play-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: #19378C; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pg-voice-play-btn .material-symbols-rounded { font-size: 18px; }
.pg-voice-label { flex: 1; font-size: 0.82rem; font-weight: 600; color: #333; }
.pg-voice-preview-wrap .preview-remove { position: static; flex-shrink: 0; background: #fff; color: #777; border: 1px solid #e2e5f0; }

/* ── Voice Description — compact icon (product page, next to price) ── */
.product-audio-icon-btn {
  margin-left: auto;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #e8ebfa;
  color: #19378C;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.product-audio-icon-btn:active { transform: scale(0.94); }
.product-audio-icon-btn .material-symbols-rounded { font-size: 21px; }
.product-audio-icon-btn.playing {
  background: #19378C; color: #fff;
  animation: productAudioPulse 1.6s ease-in-out infinite;
}
.product-audio-icon-btn .product-audio-spinner {
  width: 18px; height: 18px; border-width: 2px;
  border-color: rgba(255,255,255,0.3); border-top-color: #fff;
}
@keyframes productAudioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,55,140,0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(25,55,140,0); }
}

/* ── Gallery video slide + thumbnail (product page) ── */
.gallery-slide-video { background: #000; }
.gallery-slide-video video { width: 100%; height: 100%; object-fit: contain; background: #000; } /* no cursor:pointer — video body has no tap behavior, see the two dedicated buttons below */
.gallery-video-playbtn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  opacity: 0; pointer-events: none; /* hidden until the video is actually ready — see .is-ready below */
  transition: opacity 0.2s ease;
}
.gallery-video-playbtn .material-symbols-rounded { font-size: 30px; }
.gallery-video-playbtn:active { transform: translate(-50%, -50%) scale(0.94); }

/* Loading spinner — shown until the video reports it can actually play,
   with an 8s JS safety-net fallback (see updateProductPage) in case the
   browser never fires the loading events at all. */
.gallery-video-spinner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
  opacity: 1; transition: opacity 0.2s ease;
}
.gallery-video-spinner .btn-spinner {
  width: 30px; height: 30px; border-width: 3px;
  border-color: rgba(255, 255, 255, 0.25); border-top-color: #fff;
}

.gallery-slide-video.is-ready:not(.is-buffering) .gallery-video-spinner { opacity: 0; }
.gallery-slide-video.is-ready .gallery-video-playbtn { opacity: 1; pointer-events: auto; }
/* Out of the way entirely once it's playing. The comment that used to sit
   here said the video body had no tap behavior and that this button was
   therefore the sole way to pause — that stopped being true: the <video>
   in firebase.js carries an onclick that toggles play/pause, so tapping
   the frame pauses and brings this straight back (onpause drops
   .is-playing).
   pointer-events matters as much as the opacity. At 0.55 and still
   clickable, a 58px target sat dead centre of the frame calling play() on
   an already-playing video — so tapping the middle to pause, the most
   natural gesture there is, silently did nothing. Hidden AND inert, the
   tap reaches the video underneath and pauses it. */
.gallery-slide-video.is-playing .gallery-video-playbtn { opacity: 0; pointer-events: none; }
/* Desktop only, in effect: a mouse can't discover a tap-to-pause target
   it can't see, so hovering brings it back. A touch device has no hover
   state to trigger this, which is exactly right — there, tapping the
   frame is the gesture. */
@media (hover: hover) {
  .gallery-slide-video.is-playing:hover .gallery-video-playbtn { opacity: 0.55; pointer-events: auto; }
  .gallery-slide-video.is-playing:hover .gallery-video-playbtn:active { opacity: 0.85; }
}
.thumb-video { position: relative; background: #10131f; }
.thumb-video video { width: 100%; height: 100%; object-fit: cover; }
.thumb-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: 20px; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Stock mode / management row ── */
.pg-manage-row { display: flex; gap: 8px; }

/* ── Submit button — last element in the normal document flow, not sticky ── */
.pg-submit-row {
  padding: 0.4rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.pg-submit-btn {
  width: 100%; border: none; border-radius: 12px;
  background: linear-gradient(90deg, #19378C, #2c52c4);
  color: #fff; font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.85rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(25,55,140,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}
.pg-submit-btn:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(25,55,140,0.2); }
.pg-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* ── Pending upload banner ──
   Shown while a post's video is still uploading after the form has
   closed. Created and destroyed by PendingVideoUploads (goods.js).

   Three decisions worth keeping:

   No dismiss button. This is not a notification — it is the only thing
   telling the seller that closing the app will cost them their video.
   Anything flickable would be flicked.

   Bottom, above the nav bar, not top. The top of the screen is where
   toasts and the status bar live, and it's the first thing covered when
   the keyboard opens. This has to survive a full session of browsing.

   Amber, not red or green. It isn't an error and it isn't done —
   "in progress, pay attention" is a third thing, and both of the other
   colours would be read as finished. */
.pending-upload-banner {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--nav-height, 64px) + 10px + env(safe-area-inset-bottom, 0px));
  z-index: 100040;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #FFF8E6;
  border: 1px solid #F0D28A;
  box-shadow: 0 6px 20px rgba(20, 25, 50, 0.16);
  animation: pendingUploadIn .28s ease both;
}
.pending-upload-text {
  font-size: .78rem;
  line-height: 1.35;
  color: #6B4E12;
}
.pending-upload-text strong {
  display: block;
  font-size: .82rem;
  color: #4A360A;
  margin-bottom: 1px;
}
.pending-upload-spinner {
  flex-shrink: 0;
  width: 17px; height: 17px;
  border: 2.5px solid rgba(176, 132, 26, 0.25);
  border-top-color: #B0841A;
  border-radius: 50%;
  animation: pendingUploadSpin .8s linear infinite;
}
@keyframes pendingUploadSpin { to { transform: rotate(360deg); } }
@keyframes pendingUploadIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pending-upload-banner { animation: none; }
  .pending-upload-spinner { animation-duration: 2s; }
}

/* Full-screen control on a gallery video. Sits opposite the play badge so
   the two never overlap, and stays visible while playing — the moment you
   most want a bigger picture is mid-clip. */
.gallery-video-expand {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(8, 12, 28, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; backdrop-filter: blur(3px);
}
.gallery-video-expand .material-symbols-rounded { font-size: 18px; }
.gallery-video-expand:active { transform: scale(0.94); }

.pg-media-media { cursor: pointer; }

/* Brand signup — social link fields. The hint doubles as live validation
   feedback, so a bad paste is caught while the field is still on screen
   rather than on submit. */
.bs-optional { font-weight: 500; color: #9aa3ad; font-size: .78em; margin-left: 4px; }
.bs-social-hint { word-break: break-all; transition: color .15s ease; }
.bs-hint-good { color: #1e8e5a; }
.bs-hint-bad  { color: #c0392b; }
.bs-input-invalid { border-color: #e4a0a0 !important; background: #fffafa !important; }

/* Suggested questions on a Custo Care message. Chips rather than a list
   because they're answers to "what do I even ask?" — someone who has just
   had their brand pulled shouldn't face an empty box. */
.support-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; max-width: 85%; }
.support-qr-chip {
  background: #fff; border: 1.5px solid #19378C; color: #19378C;
  border-radius: 16px; padding: 7px 13px; font-size: .78rem;
  font-weight: 600; font-family: inherit; cursor: pointer; text-align: left;
}
.support-qr-chip:active { transform: scale(.97); background: #eef1f9; }
.support-handoff .bubble-theirs { font-style: italic; color: #5a6580; }

/* ── Inline pagination retry ──
   Shown at the bottom of a feed when the NEXT page fails, as opposed to
   the centred .mk-retry-strip card used when a whole section fails to
   load. The distinction is deliberate: there are real listings on screen
   above this, and covering them to report that more couldn't be fetched
   would cost the user more than it tells them. */
.mk-loadmore-retry {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px 28px;
  color: #7f8c8d;
  font-size: 0.85rem;
  text-align: center;
}
.mk-loadmore-btn {
  background: #19378C; color: #fff;
  border: none; border-radius: 10px;
  padding: 9px 22px;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.mk-loadmore-btn:active { opacity: 0.82; }

/* ── Size / color chips (post form) ──────────────────────────────────
   Tap to pick; picked chips turn brand blue. Built by goods.js. */
.pg-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 20px;
  border: 1.5px solid #e7e9f0; background: #fbfbfd;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; color: #3a3d4a;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.pg-chip:active   { transform: scale(0.96); }
.pg-chip.selected { background: #19378C; border-color: #19378C; color: #fff; }
.pg-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.15);
}
.pg-chip.selected .pg-swatch { border-color: rgba(255,255,255,0.8); }

/* "Another color" box under the color chips */
.pg-color-custom { display: flex; gap: 8px; margin-top: 10px; }
.pg-color-custom input { flex: 1; }
.pg-color-custom button {
  flex-shrink: 0; padding: 0 16px; border: none; border-radius: 12px;
  background: #eef2fc; color: #19378C; font-family: inherit;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.pg-color-custom button:active { transform: scale(0.97); }

/* Validation error state on a chip group (validation.js adds the class) */
.pg-chip-group.mk-input-error { padding: 6px; margin: -6px; border-radius: 12px; outline: 1.5px solid #e0524f; }

/* ── Item Details section (post form) ────────────────────────────────
   Fields depend on the category; built by goods.js _renderDetails(). */
.pg-details-title {
  font-weight: 800; font-size: 0.92rem; color: #14213d;
  margin: 0.4rem 0 0.2rem; letter-spacing: -0.01em;
}
#detailsGroup { border-top: 1px solid #eef0f5; padding-top: 1rem; }
.pg-details-grid { display: flex; flex-wrap: wrap; column-gap: 12px; }
.pg-details-grid .pg-field { flex: 1 1 100%; margin-bottom: 0.95rem; min-width: 0; }
.pg-details-grid .pg-field.pg-half { flex: 1 1 calc(50% - 6px); }
.pg-details-grid .pg-field:last-child { margin-bottom: 0; }
.pg-optional { color: #9295a3; font-weight: 500; font-size: 0.75rem; }

/* Number with a unit after it (km, %) */
.pg-input-unit { position: relative; display: flex; align-items: center; }
.pg-input-unit input { padding-right: 2.6rem; }
.pg-input-unit span {
  position: absolute; right: 0.85rem; font-size: 0.82rem; font-weight: 600;
  color: #9295a3; pointer-events: none;
}

/* Adults / Kids headings inside the size chips */
.pg-size-group-label {
  flex: 0 0 100%; font-size: 0.72rem; font-weight: 700; color: #9295a3;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 -2px;
}
.pg-size-group-label:not(:first-child) { margin-top: 10px; }

/* "No specific color" swatch: white circle with a diagonal slash */
.pg-swatch-none {
  background: linear-gradient(135deg, transparent 45%, #e0524f 45%, #e0524f 55%, transparent 55%), #fff;
}