/* =====================================================================
   PMBO Shopkeeper - admin UIs (Add product, Manage categories) and
   the floating admin toolbar shown on every managed page.
   ===================================================================== */

/* ---------- Floating admin toolbar (FAB) ---------- */
.pmbo-admin-fab {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 9998;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* On mobile the customer-facing bottom nav (PMBO_Storefront::render_mobile_nav)
   occupies ~62px + the iOS safe-area at the bottom of every page, so the
   admin FAB needs to lift above it - otherwise the "+" trigger sits flush
   on top of the nav and the popover menu reads like part of it. */
@media (max-width: 760px) {
	.pmbo-admin-fab {
		bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 14px);
		right: 14px;
	}
}
.pmbo-admin-fab > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px 12px 14px;
	background: var(--pmbo-primary, #111);
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15);
	font-weight: 600;
	font-size: 14px;
	transition: transform .15s ease, box-shadow .2s ease;
	user-select: none;
}
.pmbo-admin-fab > summary::-webkit-details-marker { display: none; }
.pmbo-admin-fab > summary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.3); }
.pmbo-admin-fab[open] > summary { box-shadow: 0 14px 32px rgba(0,0,0,.3); }
.pmbo-admin-fab-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	transition: transform .2s ease;
}
.pmbo-admin-fab[open] .pmbo-admin-fab-ico { transform: rotate(45deg); }

.pmbo-admin-fab-menu {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
	min-width: 240px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1);
	overflow: hidden;
	padding: 6px;
	animation: pmbo-fab-pop .14s ease-out;
}
@keyframes pmbo-fab-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pmbo-admin-fab-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #111 !important;
	text-decoration: none !important;
	transition: background .12s ease;
}
.pmbo-admin-fab-item:hover { background: #f3f4f6; }
.pmbo-admin-fab-ic {
	flex: 0 0 36px; width: 36px; height: 36px;
	background: rgba(var(--pmbo-primary-rgb, 17,24,39), .08);
	color: var(--pmbo-primary, #111);
	border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700;
}
.pmbo-admin-fab-item strong { display: block; font-size: 14px; line-height: 1.2; }
.pmbo-admin-fab-item small { display: block; font-size: 12px; color: #6b7280; margin-top: 2px; }
.pmbo-admin-fab-item--accent .pmbo-admin-fab-ic {
	background: var(--pmbo-primary, #111);
	color: #fff;
}

/* Inline "Edit product" pill rendered above the product title on single
   PDPs for admins (woocommerce_single_product_summary @ priority 1). The
   FAB still surfaces the same action; this one is the in-context cue. */
.pmbo-sk-edit-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--pmbo-primary, #111);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	transition: opacity .12s ease, transform .12s ease;
}
.pmbo-sk-edit-pill:hover { opacity: .9; transform: translateY(-1px); }

@media (max-width: 640px) {
	/* Bottom offset is set in the 760px rule above (lifts the FAB clear of
	   the customer-facing bottom nav). Don't reset it here. We keep the
	   full pill (icon + "Shop tools" label) on mobile too - admins find
	   the labelled button much easier to spot than a bare "+" circle. */
	.pmbo-admin-fab-menu { right: 0; min-width: 260px; }
}

/* ---------- Shared shell ---------- */
.pmbo-shopkeeper {
	max-width: 1160px;
	margin: 0 auto;
	padding: 20px 16px 80px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #111;
}
.pmbo-sk-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.pmbo-sk-head h1 { font-size: 1.6rem; margin: 4px 0 4px; }
.pmbo-sk-sub    { color: #6b7280; margin: 0; font-size: .95rem; max-width: 580px; }
.pmbo-sk-back   { font-size: .85rem; color: #6b7280 !important; text-decoration: none !important; }
.pmbo-sk-back:hover { color: #111 !important; }

.pmbo-sk-flash {
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: .95rem;
}
.pmbo-sk-flash--success { background: #e7f7ec; color: #145a2b; }
.pmbo-sk-flash--error   { background: #fdecec; color: #8a1f1f; }

/* ---------- Grid (main + sidebar) ---------- */
.pmbo-sk-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 960px) {
	.pmbo-sk-grid { grid-template-columns: minmax(0, 1fr) 340px; }
	.pmbo-sk-col--side { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
}

.pmbo-sk-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 16px;
}
.pmbo-sk-h2 { font-size: 1.05rem; margin: 0 0 10px; }
.pmbo-sk-help { color: #6b7280; font-size: .85rem; margin: 0 0 10px; }

/* ---------- Fields ---------- */
.pmbo-sk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pmbo-sk-field:last-child { margin-bottom: 0; }
.pmbo-sk-label { font-size: .85rem; font-weight: 600; color: #374151; }
.pmbo-sk-label em { color: #b12a2a; font-style: normal; font-weight: 700; margin-left: 2px; }
.pmbo-sk-field input[type="text"],
.pmbo-sk-field input[type="url"],
.pmbo-sk-field input[type="number"],
.pmbo-sk-field input[type="email"],
.pmbo-sk-field textarea,
.pmbo-sk-field select {
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font: inherit;
	font-size: 1rem;
	color: #111;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.pmbo-sk-field textarea { resize: vertical; font-family: inherit; }
.pmbo-sk-field input:focus,
.pmbo-sk-field textarea:focus,
.pmbo-sk-field select:focus {
	outline: none;
	border-color: var(--pmbo-primary, #111);
	box-shadow: 0 0 0 3px rgba(var(--pmbo-primary-rgb, 17,24,39), .08);
}
.pmbo-sk-field--check { flex-direction: row; align-items: center; gap: 10px; }
.pmbo-sk-field--check input { width: 18px; height: 18px; accent-color: var(--pmbo-primary, #111); }

.pmbo-sk-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}
@media (max-width: 520px) { .pmbo-sk-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.pmbo-sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 38px;
	padding: 0 16px;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	background: #f9fafb;
	color: #111;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .12s ease, border-color .12s ease, transform .1s ease;
	-webkit-appearance: none;
	appearance: none;
}
.pmbo-sk-btn:hover   { background: #f3f4f6; }
.pmbo-sk-btn:active  { transform: translateY(1px); }
.pmbo-sk-btn[disabled] { opacity: .6; cursor: not-allowed; }

.pmbo-sk-btn--primary {
	background: var(--pmbo-primary, #111);
	color: #fff;
	border-color: var(--pmbo-primary, #111);
}
.pmbo-sk-btn--primary:hover { opacity: .92; background: var(--pmbo-primary, #111); }
.pmbo-sk-btn--ghost   { background: transparent; }
.pmbo-sk-btn--block   { width: 100%; margin-bottom: 8px; }
.pmbo-sk-btn--sm      { height: 32px; padding: 0 12px; font-size: .82rem; }
.pmbo-sk-btn--icon    { width: 36px; height: 36px; padding: 0; }
.pmbo-sk-btn--danger  { color: #a11a1a; border-color: #f0c9c9; background: #fff; }
.pmbo-sk-btn--danger:hover { background: #fdecec; }

.pmbo-sk-head-actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .pmbo-sk-head-actions { display: none; } }
.pmbo-sk-sticky-save { margin-top: 8px; }

/* ---------- Image picker ---------- */
.pmbo-sk-image-pick {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.pmbo-sk-image-pick input { flex: 1 1 auto; }
.pmbo-sk-image-preview {
	margin-top: 10px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	padding: 8px;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
}
.pmbo-sk-image-preview:empty::after { content: 'No image yet'; color: #9ca3af; font-size: .85rem; }
.pmbo-sk-image-preview img { max-width: 220px; max-height: 180px; border-radius: 8px; object-fit: cover; }

/* ---------- Repeater rows (gallery, reels) ---------- */
.pmbo-sk-repeater { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pmbo-sk-repeater-row {
	display: flex;
	gap: 6px;
	align-items: center;
}
.pmbo-sk-repeater-row input { flex: 1 1 auto; }

/* ---------- Property groups ---------- */
.pmbo-sk-props { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.pmbo-sk-prop-group {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 14px;
	background: #fafafa;
}
.pmbo-sk-prop-head {
	display: grid;
	grid-template-columns: 1fr 1fr 36px;
	gap: 8px;
	margin-bottom: 10px;
}
@media (max-width: 520px) { .pmbo-sk-prop-head { grid-template-columns: 1fr 36px; }
	.pmbo-sk-prop-head .pmbo-sk-prop-subheading { grid-column: 1 / -1; }
}
.pmbo-sk-prop-heading { font-weight: 600; }
.pmbo-sk-prop-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pmbo-sk-prop-row {
	display: grid;
	grid-template-columns: 1fr 1.4fr 36px;
	gap: 8px;
}
@media (max-width: 520px) { .pmbo-sk-prop-row { grid-template-columns: 1fr 36px; }
	.pmbo-sk-prop-row .pmbo-sk-prop-value { grid-column: 1 / -1; }
}

/* ---------- Category checkbox list (product form) ---------- */
.pmbo-sk-cat-search {
	width: 100%;
	margin-bottom: 6px;
	padding: 7px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: .9rem;
	background: #fff;
}
.pmbo-sk-cat-search:focus {
	outline: none;
	border-color: var(--pmbo-primary, #111);
	box-shadow: 0 0 0 3px rgba(var(--pmbo-primary-rgb, 17,24,39), .12);
}
.pmbo-sk-cats {
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 6px;
	background: #fff;
}
.pmbo-sk-cat-empty {
	margin: 8px 4px;
	color: #6b7280;
	font-size: .85rem;
}
.pmbo-sk-cat-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: .9rem;
	cursor: pointer;
}
.pmbo-sk-cat-row:hover { background: #f3f4f6; }
.pmbo-sk-cat-row input { accent-color: var(--pmbo-primary, #111); }
.pmbo-sk-inline-link { display: inline-block; margin-top: 6px; font-size: .85rem; color: var(--pmbo-primary, #111) !important; text-decoration: none !important; }
.pmbo-sk-inline-link:hover { text-decoration: underline !important; }

/* ---------- Category manager list ---------- */
.pmbo-sk-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.pmbo-sk-cat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #f3f4f6;
}
.pmbo-sk-cat-item:last-child { border-bottom: 0; }
.pmbo-sk-cat-item.is-hidden { opacity: .55; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f3f4f6 6px, #f3f4f6 12px); }
.pmbo-sk-cat-name { font-size: .95rem; }
.pmbo-sk-cat-name small { color: #9ca3af; font-weight: 400; margin-left: 4px; }
.pmbo-sk-cat-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.pmbo-sk-empty {
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	padding: 28px;
	text-align: center;
	color: #6b7280;
}

/* ---------- Yes/No toggles (display options for the catbar) ---------- */
.pmbo-sk-toggles {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 10px;
	padding: 8px 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
.pmbo-sk-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 13px;
}
.pmbo-sk-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0; height: 0;
}
.pmbo-sk-toggle-track {
	flex: 0 0 30px;
	width: 30px;
	height: 18px;
	border-radius: 999px;
	background: #d1d5db;
	position: relative;
	transition: background .15s ease;
}
.pmbo-sk-toggle-track::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
	transition: transform .15s ease;
}
.pmbo-sk-toggle input:checked + .pmbo-sk-toggle-track {
	background: var(--pmbo-primary, #111);
}
.pmbo-sk-toggle input:checked + .pmbo-sk-toggle-track::after {
	transform: translateX(12px);
}
.pmbo-sk-toggle input:focus-visible + .pmbo-sk-toggle-track {
	outline: 2px solid rgba(var(--pmbo-primary-rgb, 17,24,39), .35);
	outline-offset: 2px;
}
.pmbo-sk-toggle-text { font-weight: 600; line-height: 1.25; }

/* The display-settings card has a lot of controls in a narrow sidebar -
   tighten its internal spacing so it fits without forcing a scroll. */
.pmbo-sk-card--display { padding: 14px 14px 12px; }
.pmbo-sk-card--display .pmbo-sk-h2 { margin-bottom: 8px; font-size: 1rem; }
.pmbo-sk-card--display .pmbo-sk-segmented { margin-bottom: 10px; }
.pmbo-sk-card--display .pmbo-sk-colorpair { gap: 8px; row-gap: 8px; }
.pmbo-sk-card--display .pmbo-sk-color-preview { padding: 8px 10px; font-size: .8rem; }
.pmbo-sk-card--display .pmbo-sk-color-preview span { padding: 2px 8px; }

/* Presets are now collapsed behind a "Presets" disclosure to save space -
   most clients pick once and stick with it, so they don't need to live
   on screen permanently. */
.pmbo-sk-presets-toggle {
	grid-column: 1 / -1;
	margin-top: 2px;
}
.pmbo-sk-presets-toggle > summary {
	cursor: pointer;
	font-size: 12px;
	color: #4b5563;
	padding: 4px 0;
	user-select: none;
	list-style: none;
}
.pmbo-sk-presets-toggle > summary::-webkit-details-marker { display: none; }
.pmbo-sk-presets-toggle > summary::before {
	content: "▸ ";
	display: inline-block;
	transition: transform .15s ease;
}
.pmbo-sk-presets-toggle[open] > summary::before { content: "▾ "; }
.pmbo-sk-presets-toggle .pmbo-sk-color-presets {
	margin-top: 6px;
	grid-template-columns: repeat(3, 1fr);
}
.pmbo-sk-presets-toggle .pmbo-sk-color-preset {
	padding: 6px 8px;
	font-size: .72rem;
}

/* Explicit save block at the bottom of the Category bar display card. */
.pmbo-sk-display-save {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
}
/* Pulsing ring when there are unsaved changes - alignment, toggles, and
   colours all preview live but only commit on explicit save. */
.pmbo-sk-btn.is-dirty {
	box-shadow: 0 0 0 0 rgba(59, 130, 246, .55);
	animation: pmboSkSaveDirty 1.6s ease-out infinite;
}
@keyframes pmboSkSaveDirty {
	0%   { box-shadow: 0 0 0 0   rgba(59, 130, 246, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
	100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0); }
}
.pmbo-sk-display-saved {
	margin: 6px 0 0;
	color: #15803d;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

/* ---------- Segmented control (alignment) ---------- */
.pmbo-sk-segmented {
	display: inline-flex;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.pmbo-sk-seg {
	flex: 1 1 auto;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	color: #374151;
	border-right: 1px solid #e5e7eb;
}
.pmbo-sk-seg:last-child { border-right: 0; }
.pmbo-sk-seg:hover { background: #f9fafb; }
.pmbo-sk-seg.is-active { background: var(--pmbo-primary, #111); color: #fff; }

/* ---------- Colour pair (bar background + text) ---------- */
.pmbo-sk-colorpair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}
.pmbo-sk-colorpair .pmbo-sk-field { margin-bottom: 0; }
.pmbo-sk-color {
	display: flex;
	gap: 8px;
	align-items: center;
}
.pmbo-sk-color input[type="color"] {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 2px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.pmbo-sk-color input[type="text"] {
	flex: 1 1 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: lowercase;
}
.pmbo-sk-color-preview {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	border: 1px solid rgba(0,0,0,.05);
}
.pmbo-sk-color-preview span {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
}
.pmbo-sk-color-presets {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.pmbo-sk-color-preset {
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,.08);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease;
}
.pmbo-sk-color-preset:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
@media (max-width: 520px) {
	.pmbo-sk-colorpair { grid-template-columns: 1fr; }
}

/* ---------- Notices ---------- */
.pmbo-notice {
	padding: 14px 16px;
	border-radius: 10px;
	font-size: .95rem;
	margin: 16px 0;
}
.pmbo-notice--warn  { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.pmbo-notice--error { background: #fdecec; color: #8a1f1f; border: 1px solid #f5c2c2; }

/* =====================================================================
   Storefront: category bar + product extras
   ===================================================================== */
.pmbo-catbar {
	background: rgba(var(--pmbo-primary-rgb, 17,24,39), .04);
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.pmbo-catbar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 1200px;
	margin: 0 auto;
}
.pmbo-catbar--center .pmbo-catbar-inner { justify-content: center; }
.pmbo-catbar--right  .pmbo-catbar-inner { justify-content: flex-end; }
@media (max-width: 640px) {
	/* Single-line horizontal scroll on small screens so a long list of
	   categories stays scannable without pushing the fold down. */
	.pmbo-catbar-inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.pmbo-catbar-inner::-webkit-scrollbar { display: none; }
	.pmbo-catbar-chip { flex: 0 0 auto; }
}

/* On mobile we hide the category bar entirely (incl. the admin
   "hidden from customers" preview banner). Categories on a phone live
   in the slide-in hamburger menu instead - a horizontal-scroll strip
   doesn't scale once a store has many roots, and on mobile the topbar
   already burns enough vertical chrome. Mirrors the bottom-mobnav
   breakpoint (max-width: 760px) so the layout transition lines up. */
@media (max-width: 760px) {
	.pmbo-catbar { display: none !important; }
}
.pmbo-catbar-chip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	font-size: .88rem;
	font-weight: 500;
	color: #111 !important;
	text-decoration: none !important;
	transition: background .12s ease, border-color .12s ease;
}
.pmbo-catbar-chip:hover {
	background: var(--pmbo-primary, #111);
	color: #fff !important;
	border-color: var(--pmbo-primary, #111);
}
.pmbo-catbar-chip--admin {
	background: transparent;
	color: var(--pmbo-primary, #111) !important;
	border-style: dashed;
}

/* Product extras */
.pmbo-product-extras {
	margin: 32px 0;
	display: grid;
	gap: 28px;
}
.pmbo-product-extras-h {
	font-size: 1.25rem;
	margin: 0 0 14px;
}
.pmbo-product-reels { display: grid; gap: 16px; }
.pmbo-product-reel { max-width: 520px; }
.pmbo-embed {
	display: block;
	width: 100%;
	max-width: 520px;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}
.pmbo-embed--yt, .pmbo-embed--ig {
	position: relative;
	aspect-ratio: 9/16;
	padding-bottom: 0;
}
.pmbo-embed--yt iframe,
.pmbo-embed--ig iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.pmbo-embed--yt { aspect-ratio: 16/9; max-width: 640px; }
.pmbo-embed--file { width: 100%; max-width: 520px; height: auto; }
.pmbo-embed--link {
	display: block;
	padding: 10px 14px;
	background: #f3f4f6;
	color: #111;
	word-break: break-all;
}

.pmbo-product-props { display: grid; gap: 22px; }
.pmbo-product-prop-group {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
}
.pmbo-product-prop-h  { font-size: 1.05rem; margin: 0 0 2px; }
.pmbo-product-prop-sh { font-size: .9rem; color: #6b7280; margin: 0 0 10px; }
.pmbo-product-prop-table {
	width: 100%;
	border-collapse: collapse;
}
.pmbo-product-prop-table th,
.pmbo-product-prop-table td {
	padding: 10px 6px;
	border-bottom: 1px solid #f3f4f6;
	text-align: left;
	font-size: .92rem;
	vertical-align: top;
}
.pmbo-product-prop-table th {
	width: 35%;
	color: #6b7280;
	font-weight: 500;
}
.pmbo-product-prop-table tr:last-child th,
.pmbo-product-prop-table tr:last-child td { border-bottom: 0; }

/* Extra-URL gallery on single product content */
.pmbo-product-gallery-extra {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin-top: 20px;
}
.pmbo-product-gallery-extra img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
}