/*
 * PizzaLayer Template Preview — frontend styles v1.1
 * Brand: A4-B system · #ff6b35 orange · dark void bg · Bungee Inline / DM Sans
 * Inline panel rendering — no iframes, no spinners.
 */

@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.pltp-wrap {
	--pltp-orange:      #ff6b35;
	--pltp-orange-dim:  rgba(255, 107, 53, 0.15);
	--pltp-orange-glow: rgba(255, 107, 53, 0.35);
	--pltp-void:        #111113;
	--pltp-surface:     #1a1a1e;
	--pltp-surface-2:   #22222a;
	--pltp-border:      rgba(255, 255, 255, 0.08);
	--pltp-text:        #f0ede8;
	--pltp-text-muted:  rgba(240, 237, 232, 0.55);
	--pltp-radius:      12px;
	--pltp-radius-sm:   7px;
	--pltp-font-head:   'Bungee Inline', 'Georgia', serif;
	--pltp-font-body:   'DM Sans', 'Helvetica Neue', sans-serif;
	--pltp-trans:       0.28s ease;

	box-sizing:    border-box;
	font-family:   var(--pltp-font-body);
	color:         var(--pltp-text);
	background:    var(--pltp-void);
	border-radius: calc(var(--pltp-radius) + 4px);
	padding:       48px 40px 56px;
	margin:        40px 0;
	position:      relative;
	overflow:      hidden;
}

.pltp-wrap *,
.pltp-wrap *::before,
.pltp-wrap *::after { box-sizing: inherit; }

/* Atmosphere glow */
.pltp-wrap::before {
	content:  '';
	position: absolute;
	inset:    0;
	background:
		radial-gradient(ellipse 70% 50% at 20% 0%,  rgba(255,107,53,.10) 0%, transparent 65%),
		radial-gradient(ellipse 50% 40% at 80% 100%, rgba(255,107,53,.07) 0%, transparent 60%);
	pointer-events: none;
	z-index:  0;
}

.pltp-wrap > * { position: relative; z-index: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.pltp-header {
	text-align:    center;
	margin-bottom: 36px;
}

.pltp-header__eyebrow {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	margin-bottom: 14px;
}

.pltp-dot {
	display:       block;
	border-radius: 50%;
	background:    var(--pltp-orange);
}
.pltp-dot--1 { width: 10px; height: 10px; opacity: 1; }
.pltp-dot--2 { width: 10px; height: 10px; opacity: 0.62; }
.pltp-dot--3 { width: 10px; height: 10px; opacity: 0.32; }

.pltp-eyebrow-text {
	font-family:    var(--pltp-font-body);
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--pltp-orange);
}

.pltp-title {
	font-family:    var(--pltp-font-head);
	font-size:      clamp(1.8rem, 4vw, 2.8rem);
	line-height:    1.1;
	color:          var(--pltp-text);
	margin:         0 0 10px;
}

.pltp-subtitle {
	font-size:   0.95rem;
	color:       var(--pltp-text-muted);
	margin:      0;
	line-height: 1.6;
}

/* ── Tab strip ──────────────────────────────────────────────────────────── */
.pltp-tabs {
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px;
	justify-content: center;
	margin-bottom:   20px;
}

.pltp-tab {
	display:     inline-flex;
	align-items: center;
	gap:         7px;
	padding:     9px 20px;
	border:      1.5px solid var(--pltp-border);
	border-radius: var(--pltp-radius-sm);
	background:  var(--pltp-surface);
	color:       var(--pltp-text-muted);
	font-family: var(--pltp-font-body);
	font-size:   0.88rem;
	font-weight: 500;
	cursor:      pointer;
	transition:  background var(--pltp-trans),
	             border-color var(--pltp-trans),
	             color var(--pltp-trans),
	             transform 0.15s ease,
	             box-shadow var(--pltp-trans);
	white-space: nowrap;
}

.pltp-tab:hover {
	background:   var(--pltp-surface-2);
	border-color: var(--tab-accent, var(--pltp-orange));
	color:        var(--pltp-text);
	transform:    translateY(-2px);
	box-shadow:   0 4px 16px rgba(0,0,0,0.3);
}

.pltp-tab--active {
	background:   var(--pltp-surface-2);
	border-color: var(--tab-accent, var(--pltp-orange));
	color:        var(--pltp-text);
	box-shadow:   0 0 0 3px var(--pltp-orange-dim),
	              inset 0 1px 0 rgba(255,255,255,0.06);
}

.pltp-tab__icon  { font-size: 1rem; line-height: 1; }
.pltp-tab__label { letter-spacing: 0.01em; }

/* ── Active-template meta bar ───────────────────────────────────────────── */
.pltp-active-meta {
	position:      relative;
	margin-bottom: 16px;
}

.pltp-active-meta__item {
	display:     none;
	align-items: center;
	gap:         12px;
	background:  var(--pltp-surface);
	border:      1.5px solid var(--pltp-border);
	border-left: 3px solid var(--panel-accent, var(--pltp-orange));
	border-radius: var(--pltp-radius-sm);
	padding:     12px 16px;
}

.pltp-active-meta__item--visible {
	display: flex;
	animation: pltp-fade-in 0.25s ease forwards;
}

.pltp-active-meta__icon { font-size: 1.3rem; flex-shrink: 0; }

.pltp-active-meta__text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.pltp-active-meta__text strong {
	font-family:    var(--pltp-font-head);
	font-size:      0.95rem;
	letter-spacing: 0.02em;
	color:          var(--pltp-text);
}

.pltp-active-meta__text span {
	font-size:   0.82rem;
	color:       var(--pltp-text-muted);
	line-height: 1.4;
}

/* ── Stage & panels ─────────────────────────────────────────────────────── */
.pltp-stage {
	border:        1.5px solid var(--pltp-border);
	border-radius: var(--pltp-radius);
	overflow:      hidden;
	background:    var(--pltp-surface);
}

/* All panels hidden by default; JS adds --active class */
.pltp-panel {
	display: none;
}

.pltp-panel--active {
	display:   block;
	animation: pltp-fade-in 0.3s ease forwards;
}

@keyframes pltp-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* The builder itself: let it breathe, but cap runaway widths */
.pltp-builder-wrap {
	padding: 0;
	width:   100%;
}

/* Override any max-width constraints the template imposes */
.pltp-builder-wrap > * {
	max-width: 100% !important;
}

/* Missing-template fallback */
.pltp-builder-missing {
	padding:      32px 24px;
	text-align:   center;
	color:        var(--pltp-text-muted);
	font-family:  var(--pltp-font-body);
	font-size:    0.88rem;
	line-height:  1.6;
}

.pltp-builder-missing code {
	background:    rgba(255,255,255,0.07);
	padding:       2px 6px;
	border-radius: 4px;
	font-size:     0.82rem;
}

/* ── CTA strip ──────────────────────────────────────────────────────────── */
.pltp-ctas {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
	margin-top:            36px;
}

.pltp-cta {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	background:     var(--pltp-surface);
	border:         1.5px solid var(--pltp-border);
	border-radius:  var(--pltp-radius);
	padding:        28px;
	position:       relative;
	overflow:       hidden;
	transition:     border-color var(--pltp-trans), box-shadow var(--pltp-trans);
}

.pltp-cta:hover {
	border-color: var(--pltp-orange);
	box-shadow:   0 0 0 3px var(--pltp-orange-dim);
}

.pltp-cta--pizzalayer::after {
	content:    '';
	position:   absolute;
	top:        -20px;
	right:      -20px;
	width:      120px;
	height:     120px;
	background: radial-gradient(circle, var(--pltp-orange-glow) 0%, transparent 70%);
	pointer-events: none;
}

.pltp-cta__dot-mark {
	display:       flex;
	gap:           6px;
	margin-bottom: 4px;
}
.pltp-cta__dot-mark span {
	display:       block;
	width:         9px;
	height:        9px;
	border-radius: 50%;
	background:    var(--pltp-orange);
}
.pltp-cta__dot-mark span:nth-child(2) { opacity: 0.62; }
.pltp-cta__dot-mark span:nth-child(3) { opacity: 0.32; }

.pltp-cta__body { flex: 1; }

.pltp-cta__kicker {
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--pltp-orange);
	margin:         0 0 6px;
}

.pltp-cta__heading {
	font-family:    var(--pltp-font-head);
	font-size:      1.5rem;
	letter-spacing: 0.02em;
	color:          var(--pltp-text);
	margin:         0 0 10px;
}

.pltp-cta__copy {
	font-size:   0.88rem;
	line-height: 1.65;
	color:       var(--pltp-text-muted);
	margin:      0;
}

.pltp-cta__btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	align-self:      flex-start;
	padding:         10px 22px;
	border-radius:   var(--pltp-radius-sm);
	font-family:     var(--pltp-font-body);
	font-size:       0.88rem;
	font-weight:     600;
	text-decoration: none;
	transition:      transform 0.18s ease, filter var(--pltp-trans), box-shadow var(--pltp-trans);
}

.pltp-cta__btn--primary {
	background: var(--pltp-orange);
	color:      #fff;
	box-shadow: 0 2px 12px var(--pltp-orange-glow);
}
.pltp-cta__btn--primary:hover {
	filter:     brightness(1.1);
	transform:  translateY(-2px);
	box-shadow: 0 6px 20px var(--pltp-orange-glow);
}

.pltp-cta__btn--secondary {
	background: var(--pltp-surface-2);
	color:      var(--pltp-text);
	border:     1.5px solid var(--pltp-border);
}
.pltp-cta__btn--secondary:hover {
	border-color: var(--pltp-orange);
	color:        var(--pltp-orange);
	transform:    translateY(-2px);
}

/* ── Error ──────────────────────────────────────────────────────────────── */
.pltp-error {
	color:       var(--pltp-text-muted);
	font-family: var(--pltp-font-body);
	font-size:   0.9rem;
	text-align:  center;
	padding:     24px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.pltp-wrap  { padding: 32px 20px 40px; }
	.pltp-tabs  { gap: 6px; }
	.pltp-tab   { padding: 8px 14px; font-size: 0.82rem; }
	.pltp-ctas  { grid-template-columns: 1fr; }
}

/* ── Tablet: tab strip scrolls if it overflows ──────────────────────────── */
@media (max-width: 640px) {
	.pltp-wrap   { padding: 24px 14px 32px; }
	.pltp-tabs   {
		flex-wrap:    nowrap;
		overflow-x:   auto;
		justify-content: flex-start;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.pltp-tabs::-webkit-scrollbar { display: none; }
	.pltp-tab   { flex-shrink: 0; padding: 7px 12px; font-size: 0.80rem; }
	.pltp-header { margin-bottom: 24px; }
	.pltp-title  { font-size: clamp(1.4rem, 5vw, 1.9rem); }
}

/* ── Phone: icon-only tabs, wrap controls ────────────────────────────────── */
@media (max-width: 480px) {
	.pltp-tab__icon  { display: none; }
	.pltp-tab__label { font-size: 0.78rem; }

	/* Pro bar mock: stack label and items */
	.pltp-pro-bar__right {
		flex-wrap: wrap;
		gap:       6px;
	}
	.pltp-pro-bar__sep { display: none; }

	/* CTA cards: tighter padding on small phones */
	.pltp-cta { padding: 20px 16px; }

	/* Settings row: wrap label + control to separate lines */
	.pltp-setting-row   { flex-direction: column; align-items: flex-start; gap: 10px; }
	.pltp-setting-label { min-width: unset; }
	.pltp-bg-swatches   { flex-wrap: wrap; }
}

/* ── Ensure template checkout bars aren't clipped inside the preview ──────
   The pztpro-bar-row responsive stacking (added to template CSS in the
   responsive pass) requires flex-wrap to propagate correctly inside the
   pltp-builder-wrap. No overrides needed — just ensure no overflow:hidden
   on the stage clips the stacked rows.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
	.pltp-stage { overflow: visible; }
	.pltp-panel { overflow: visible; }
}

/* ── Pro badge (subtitle) ────────────────────────────────────────────────── */
.pltp-pro-badge {
	display:        inline-block;
	padding:        1px 6px;
	border-radius:  4px;
	background:     var(--pltp-orange);
	color:          #fff;
	font-family:    var(--pltp-font-body);
	font-size:      0.68rem;
	font-weight:    700;
	letter-spacing: 0.09em;
	vertical-align: middle;
	margin:         0 1px;
}

/* ── Settings gear tab ───────────────────────────────────────────────────── */
.pltp-tab--settings {
	margin-left: auto;
	border-color: transparent;
	background:   transparent;
	color:        var(--pltp-text-muted);
}
.pltp-tab--settings:hover,
.pltp-tab--settings-open {
	background:   var(--pltp-surface-2);
	border-color: var(--pltp-orange);
	color:        var(--pltp-text);
	transform:    none;
	box-shadow:   none;
}
.pltp-tab--settings-open {
	color: var(--pltp-orange);
}

/* ── Settings panel ──────────────────────────────────────────────────────── */
.pltp-settings-panel {
	display:       none;
	margin-bottom: 16px;
	background:    var(--pltp-surface);
	border:        1.5px solid var(--pltp-border);
	border-radius: var(--pltp-radius-sm);
	overflow:      hidden;
}
.pltp-settings-panel--open {
	display:   block;
	animation: pltp-fade-in 0.22s ease forwards;
}

.pltp-settings-inner {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pltp-setting-row {
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-wrap:   wrap;
}

.pltp-setting-label {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	font-size:   0.84rem;
	font-weight: 600;
	color:       var(--pltp-text-muted);
	min-width:   160px;
	flex-shrink: 0;
	cursor:      default;
}
.pltp-setting-row--toggle .pltp-setting-label {
	cursor: pointer;
	flex:   1;
}

/* ── Background swatches ─────────────────────────────────────────────────── */
.pltp-bg-swatches {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
}

.pltp-swatch {
	display:       block;
	width:         28px;
	height:        28px;
	border-radius: 50%;
	border:        2px solid transparent;
	cursor:        pointer;
	transition:    border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
	padding:       0;
	flex-shrink:   0;
}
.pltp-swatch:hover {
	transform:  scale(1.15);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.pltp-swatch--active {
	border-color: var(--pltp-orange) !important;
	box-shadow:   0 0 0 3px var(--pltp-orange-dim);
}

.pltp-swatch--void    { background: #111113; border-color: rgba(255,255,255,0.2); }
.pltp-swatch--primary { background: #ff6b35; }
.pltp-swatch--white   { background: #ffffff; border-color: rgba(0,0,0,0.15); }
.pltp-swatch--black   { background: #000000; border-color: rgba(255,255,255,0.15); }

/* Custom color swatch */
.pltp-swatch--custom {
	position:      relative;
	width:         28px;
	height:        28px;
	border-radius: 50%;
	background:    conic-gradient( #ff6b35, #c77dff, #56cfe1, #e9b44c, #ff6b35 );
	border:        2px solid rgba(255,255,255,0.2);
	cursor:        pointer;
	overflow:      hidden;
	flex-shrink:   0;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    border-color 0.18s ease, transform 0.15s ease;
}
.pltp-swatch--custom:hover { transform: scale(1.15); }

.pltp-swatch--custom input[type="color"] {
	position: absolute;
	inset:    0;
	opacity:  0;
	width:    100%;
	height:   100%;
	cursor:   pointer;
	border:   none;
	padding:  0;
}

.pltp-swatch--custom span {
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #fff;
	pointer-events:  none;
	filter:          drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.pltp-toggle {
	position:      relative;
	display:       inline-flex;
	align-items:   center;
	width:         44px;
	height:        24px;
	border-radius: 12px;
	border:        none;
	cursor:        pointer;
	transition:    background 0.22s ease;
	flex-shrink:   0;
	padding:       0;
	background:    var(--pltp-surface-2);
}
.pltp-toggle--on  { background: var(--pltp-orange); }
.pltp-toggle--off { background: var(--pltp-surface-2); }

.pltp-toggle__knob {
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	background:    #fff;
	transition:    transform 0.22s ease;
	box-shadow:    0 1px 4px rgba(0,0,0,0.35);
}
.pltp-toggle--on  .pltp-toggle__knob { transform: translateX(20px); }
.pltp-toggle--off .pltp-toggle__knob { transform: translateX(0); }

/* ── Pro footer bar ──────────────────────────────────────────────────────── */
.pltp-pro-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding:         10px 20px;
	background:      rgba(0,0,0,0.35);
	border-top:      2px solid var(--pro-bar-accent, var(--pltp-orange));
	flex-wrap:       wrap;
}

.pltp-pro-bar__left {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-shrink: 0;
}

.pltp-pro-bar__badge {
	display:        inline-block;
	padding:        2px 7px;
	border-radius:  4px;
	background:     var(--pro-bar-accent, var(--pltp-orange));
	color:          #fff;
	font-family:    var(--pltp-font-body);
	font-size:      0.68rem;
	font-weight:    700;
	letter-spacing: 0.1em;
}

.pltp-pro-bar__text {
	font-size:  0.78rem;
	font-weight: 500;
	color:      var(--pltp-text-muted);
	white-space: nowrap;
}

.pltp-pro-bar__right {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-wrap:   wrap;
}

.pltp-pro-bar__item {
	font-size:  0.82rem;
	color:      var(--pltp-text);
}

.pltp-pro-bar__sep {
	color:     var(--pltp-text-muted);
	font-size: 0.75rem;
}

.pltp-pro-bar__total {
	font-family: var(--pltp-font-head);
	font-size:   1rem;
	color:       var(--pro-bar-accent, var(--pltp-orange));
	letter-spacing: 0.02em;
}

.pltp-pro-bar__btn {
	display:         inline-flex;
	align-items:     center;
	padding:         7px 18px;
	border-radius:   var(--pltp-radius-sm);
	background:      var(--btn-accent, var(--pltp-orange));
	color:           #fff;
	font-family:     var(--pltp-font-body);
	font-size:       0.82rem;
	font-weight:     600;
	text-decoration: none;
	transition:      filter 0.18s ease, transform 0.15s ease;
	white-space:     nowrap;
}
.pltp-pro-bar__btn:hover {
	filter:    brightness(1.12);
	transform: translateY(-1px);
}

/* ── Responsive additions ────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.pltp-pro-bar         { flex-direction: column; align-items: flex-start; gap: 8px; }
	.pltp-setting-label   { min-width: 130px; }
	.pltp-tab--settings   { margin-left: 0; }
}

@media (max-width: 480px) {
	.pltp-pro-bar__btn    { width: 100%; justify-content: center; }
	.pltp-pro-bar__right  { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Preset strip — sits between the builder and the pro bar
   ═══════════════════════════════════════════════════════════════════════════ */

.pltp-preset-strip {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         10px 20px;
	background:      rgba(0,0,0,0.18);
	border-top:      1px solid rgba(255,255,255,0.06);
	border-bottom:   1px solid rgba(255,255,255,0.06);
	overflow:        hidden;
	flex-wrap:       nowrap;
}

.pltp-preset-strip__label {
	display:         flex;
	align-items:     center;
	gap:             5px;
	font-size:       0.65rem;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           rgba(255,255,255,0.3);
	white-space:     nowrap;
	flex-shrink:     0;
}

.pltp-preset-strip__chips {
	display:         flex;
	align-items:     center;
	gap:             6px;
	flex:            1;
	overflow-x:      auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom:  2px; /* room for focus outline */
}
.pltp-preset-strip__chips::-webkit-scrollbar { display: none; }

/* Individual chip */
.pltp-preset-chip {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         5px 10px 5px 7px;
	border-radius:   20px;
	border:          1px solid rgba(255,255,255,0.1);
	background:      rgba(255,255,255,0.04);
	color:           rgba(255,255,255,0.55);
	font-size:       0.72rem;
	font-weight:     500;
	white-space:     nowrap;
	cursor:          pointer;
	transition:      background 0.14s, border-color 0.14s, color 0.14s;
	flex-shrink:     0;
	position:        relative;
}
.pltp-preset-chip:hover {
	background:      rgba(255,255,255,0.09);
	border-color:    rgba(255,255,255,0.2);
	color:           rgba(255,255,255,0.85);
}
.pltp-preset-chip:focus-visible {
	outline:         2px solid var(--strip-accent, #ff6b35);
	outline-offset:  2px;
}
.pltp-preset-chip--active {
	background:      rgba(var(--strip-accent-rgb, 255,107,53), 0.15);
	border-color:    var(--strip-accent, #ff6b35);
	color:           #fff;
}
/* Fallback for browsers that don't support CSS color-mix / RGB split from hex */
.pltp-preset-chip--active {
	border-color:    var(--strip-accent, #ff6b35);
	color:           #fff;
	background:      color-mix(in srgb, var(--strip-accent, #ff6b35) 18%, transparent);
}

.pltp-preset-chip__thumb {
	width:           22px;
	height:          22px;
	border-radius:   50%;
	object-fit:      cover;
	flex-shrink:     0;
}
.pltp-preset-chip__emoji {
	font-size:       14px;
	line-height:     1;
	flex-shrink:     0;
}
.pltp-preset-chip__name {
	max-width:       120px;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

/* Dot indicating the preset has no layer data yet */
.pltp-preset-chip__empty-dot {
	width:           5px;
	height:          5px;
	border-radius:   50%;
	background:      rgba(255,255,255,0.25);
	flex-shrink:     0;
	margin-left:     2px;
}

/* "View" link */
.pltp-preset-strip__view-link {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       0.68rem;
	font-weight:     600;
	color:           var(--strip-accent, #ff6b35);
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
	opacity:         0.75;
	transition:      opacity 0.14s;
	letter-spacing:  0.04em;
}
.pltp-preset-strip__view-link:hover {
	opacity: 1;
	text-decoration: none;
}

/* Empty-state message when no presets exist for a template */
.pltp-preset-strip--empty .pltp-preset-strip__chips::after {
	content:     'No presets yet for this template.';
	font-size:   0.72rem;
	color:       rgba(255,255,255,0.2);
	font-style:  italic;
	white-space: nowrap;
}

/* Responsive: collapse label on small screens */
@media ( max-width: 520px ) {
	.pltp-preset-strip { padding: 8px 12px; gap: 8px; }
	.pltp-preset-strip__label { display: none; }
	.pltp-preset-chip { padding: 4px 8px 4px 6px; font-size: 0.68rem; }
}

/* ── Real PizzaLayerPro checkout bar integration (v1.7.0) ───────────────────
   When PizzaLayerPro is active the real per-template checkout bar renders
   INSIDE the builder via pizzalayer_builder_action_bar. The .pltp-pro-bar-label
   is the slim PRO indicator strip that replaces the old static mock bar.
   ─────────────────────────────────────────────────────────────────────────── */

/* Slim label strip shown above the real checkout bar when PizzaLayerPro active */
.pltp-pro-bar-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     6px 16px;
	background:  rgba(0,0,0,0.25);
	border-top:  1px solid rgba(255,255,255,0.08);
}
.pltp-pro-bar-label .pltp-pro-bar__badge {
	display:        inline-block;
	padding:        2px 7px;
	border-radius:  4px;
	background:     var(--pro-bar-accent, var(--pltp-orange));
	color:          #fff;
	font-family:    var(--pltp-font-body);
	font-size:      0.68rem;
	font-weight:    700;
	letter-spacing: 0.1em;
}
.pltp-pro-bar-label .pltp-pro-bar__text {
	font-size:  0.75rem;
	font-weight: 500;
	color:      var(--pltp-text-muted);
}

/* Ensure real checkout bars (pztpro-checkout-bar) render cleanly inside the
   preview panels — remove any unwanted margin-top from template defaults */
.pltp-builder-wrap .pztpro-checkout-bar {
	margin-top: 0 !important;
}

/* Hide the PizzaLayerPro size selector header rendered by FrontendEmbed
   above the builder — in the preview context we only want the inline
   size selector that lives inside the template itself */
.pltp-builder-wrap .pztpro-builder-section > .pztpro-size-selector {
	display: none !important;
}

/* Ensure the builder section itself has no extra padding in preview */
.pltp-builder-wrap .pztpro-builder-section {
	padding: 0 !important;
}

/* Hide the old static mock bar when real bar is present */
.pltp-pro-bar--mock {
	/* shown only when PizzaLayerPro is not active — no changes needed */
}