/**
 * PizzaLayerPro — Checkout Bars
 * Per-template checkout bar styles. Each section is scoped to its
 * template modifier class so templates never bleed into each other.
 *
 * Shared structural classes carry layout only.
 * Visual values (colour, radius, font, shadow) live in each template block.
 */

/* ============================================================
   SHARED LAYOUT (template-agnostic)
   ============================================================ */

.pztpro-checkout-bar {
    width: 100%;
    box-sizing: border-box;
}

/* Row: summary | qty | button */
.pztpro-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pztpro-bar-row__summary {
    display: flex;
    flex-direction: column;
    flex: 1 1 120px;
    min-width: 0;
}

.pztpro-bar-row__size-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.7;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pztpro-bar-row__price {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Quantity stepper */
.pztpro-bar-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pztpro-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid;
    background: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    transition: background 0.15s, opacity 0.15s;
    padding: 0;
    border-radius: 6px;
}

.pztpro-qty-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pztpro-qty-value {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Add to Cart button */
.pztpro-bar-row__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 22px;
    height: 46px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.12s, opacity 0.15s, box-shadow 0.18s;
    font-family: inherit;
    line-height: 1;
}

.pztpro-bar-row__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pztpro-bar-row__btn:active { transform: scale(0.97); }
.pztpro-bar-row__btn.pztpro-btn--loading,
.pztpro-bar-row__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Notes field */
.pztpro-bar-notes { margin-bottom: 12px; }

.pztpro-bar-notes__label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
    cursor: pointer;
}

.pztpro-bar-notes__label svg {
    width: 13px; height: 13px; flex-shrink: 0;
}

.pztpro-bar-notes__input {
    width: 100%;
    border: 1px solid;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s;
    border-radius: 6px;
}


/* ============================================================
   SIZE PROMPT STATE — shown in place of price before size chosen
   ============================================================ */

.pztpro-bar-price--prompt {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    opacity: 0.75;
    font-style: italic;
}

/* Pulse animation draws attention to the size prompt */
@keyframes pztpro-prompt-pulse {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1; }
}

.pztpro-bar-price--prompt {
    animation: pztpro-prompt-pulse 1.8s ease-in-out infinite;
}

/* ============================================================
   PRICE FLASH — fires on every user action that changes the price
   ============================================================ */

@keyframes pztpro-price-flash {
    0%   { color: var(--pztpro-flash-color, #e8692a); transform: scale(1.08); opacity: 1; }
    40%  { color: var(--pztpro-flash-color, #e8692a); transform: scale(1.05); opacity: 1; }
    100% { color: inherit; transform: scale(1); opacity: 1; }
}

.pztpro-bar-price--flash {
    animation: pztpro-price-flash 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================================
   COLORBOX — crisp white card, vivid red accent, pill button
   ============================================================ */

.pztpro-checkout-bar--colorbox {
    background: var(--cb-surface, #ffffff);
    border: 1px solid var(--cb-border, rgba(16,24,40,0.10));
    border-radius: var(--cb-radius-sm, 12px);
    padding: 16px 18px;
    margin-top: 0;
    box-shadow: 0 4px 20px rgba(16,24,40,0.08);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-row__size-label {
    color: var(--cb-text-muted, #5b5f73);
    font-family: var(--cb-font, inherit);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-row__price {
    color: var(--cb-accent, #ff4d4d);
    font-size: 22px;
}

.pztpro-checkout-bar--colorbox .pztpro-qty-btn {
    border-color: var(--cb-border-hover, rgba(16,24,40,0.22));
    color: var(--cb-text, #161822);
    border-radius: var(--cb-radius-sm, 12px);
}

.pztpro-checkout-bar--colorbox .pztpro-qty-btn:hover:not(:disabled) {
    background: var(--cb-accent-dim, rgba(255,77,77,0.12));
    border-color: var(--cb-accent, #ff4d4d);
    color: var(--cb-accent, #ff4d4d);
}

.pztpro-checkout-bar--colorbox .pztpro-qty-value {
    color: var(--cb-text, #161822);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-row__btn {
    background: var(--cb-accent, #ff4d4d);
    color: #ffffff;
    border-radius: 999px;
    padding: 0 28px;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 12px rgba(255,77,77,0.30);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-row__btn:hover:not(:disabled) {
    background: #e03333;
    box-shadow: 0 4px 18px rgba(255,77,77,0.40);
    transform: translateY(-1px);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-notes__label {
    color: var(--cb-text-muted, #5b5f73);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-notes__input {
    background: var(--cb-surface-2, #f1f3f9);
    border-color: var(--cb-border, rgba(16,24,40,0.10));
    color: var(--cb-text, #161822);
    border-radius: var(--cb-radius-sm, 12px);
}

.pztpro-checkout-bar--colorbox .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--cb-accent, #ff4d4d);
    box-shadow: 0 0 0 3px rgba(255,77,77,0.12);
}

/* ============================================================
   METRO — clean editorial, red top-border stripe, sharp radius
   ============================================================ */

.pztpro-checkout-bar--metro {
    background: var(--mt-surface, #ffffff);
    border-left: 1px solid var(--mt-border, #e4e4e0);
    border-right: 1px solid var(--mt-border, #e4e4e0);
    border-bottom: 1px solid var(--mt-border, #e4e4e0);
    border-top: 4px solid var(--mt-accent, #e63946);
    border-radius: 0 0 var(--mt-radius, 14px) var(--mt-radius, 14px);
    padding: 16px 20px;
    box-shadow: var(--mt-shadow, 0 4px 20px rgba(0,0,0,0.09));
    margin-top: 0;
}

.pztpro-checkout-bar--metro .pztpro-bar-row__size-label {
    color: var(--mt-text-muted, #8a8a82);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pztpro-checkout-bar--metro .pztpro-bar-row__price {
    color: var(--mt-text, #1a1a1a);
    font-size: 24px;
    font-weight: 800;
}

.pztpro-checkout-bar--metro .pztpro-qty-btn {
    border-color: var(--mt-border, #e4e4e0);
    color: var(--mt-text, #1a1a1a);
    border-radius: var(--mt-radius-sm, 8px);
    font-weight: 700;
}

.pztpro-checkout-bar--metro .pztpro-qty-btn:hover:not(:disabled) {
    background: var(--mt-accent-dim, rgba(230,57,70,0.10));
    border-color: var(--mt-accent, #e63946);
    color: var(--mt-accent, #e63946);
}

.pztpro-checkout-bar--metro .pztpro-qty-value {
    color: var(--mt-text, #1a1a1a);
    font-size: 16px;
}

.pztpro-checkout-bar--metro .pztpro-bar-row__btn {
    background: var(--mt-accent, #e63946);
    color: #ffffff;
    border-radius: var(--mt-radius-sm, 8px);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.06em;
    height: 48px;
    padding: 0 24px;
}

.pztpro-checkout-bar--metro .pztpro-bar-row__btn:hover:not(:disabled) {
    background: var(--mt-accent-hover, #c1121f);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230,57,70,0.30);
}

.pztpro-checkout-bar--metro .pztpro-bar-notes__label {
    color: var(--mt-text-mid, #555550);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.pztpro-checkout-bar--metro .pztpro-bar-notes__input {
    background: var(--mt-surface-2, #f0f0ee);
    border-color: var(--mt-border, #e4e4e0);
    color: var(--mt-text, #1a1a1a);
    border-radius: var(--mt-radius-sm, 8px);
}

.pztpro-checkout-bar--metro .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--mt-accent, #e63946);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.10);
}

/* ============================================================
   NIGHTPIE — dark void, neon-orange glow, pill button, glassmorphism
   ============================================================ */

.pztpro-checkout-bar--nightpie {
    background: linear-gradient(135deg, var(--np-surface-2, #22222c) 0%, var(--np-surface-3, #2c2c38) 100%);
    border: 1px solid var(--np-border, rgba(255,255,255,0.08));
    border-radius: var(--np-radius, 16px);
    padding: 16px 18px;
    margin-top: 0;
    box-shadow:
        0 0 0 1px rgba(255,87,34,0.10),
        0 8px 32px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-row__size-label {
    color: var(--np-text-muted, #888898);
    font-size: 10px;
    letter-spacing: 0.14em;
}

.pztpro-checkout-bar--nightpie .pztpro-bar-row__price {
    color: var(--np-accent, #ff5722);
    font-size: 24px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(255,87,34,0.50);
}

.pztpro-checkout-bar--nightpie .pztpro-qty-btn {
    border-color: var(--np-border-hover, rgba(255,255,255,0.18));
    color: var(--np-text, #f0f0f4);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
}

.pztpro-checkout-bar--nightpie .pztpro-qty-btn:hover:not(:disabled) {
    background: var(--np-accent-dim, rgba(255,87,34,0.15));
    border-color: var(--np-accent, #ff5722);
    color: var(--np-accent, #ff5722);
}

.pztpro-checkout-bar--nightpie .pztpro-qty-value {
    color: var(--np-text, #f0f0f4);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-row__btn {
    background: var(--np-accent, #ff5722);
    color: #ffffff;
    border-radius: 999px;
    letter-spacing: 0.04em;
    box-shadow:
        0 0 0 1px rgba(255,87,34,0.30),
        0 4px 20px rgba(255,87,34,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-row__btn:hover:not(:disabled) {
    background: #ff7043;
    box-shadow:
        0 0 0 1px rgba(255,87,34,0.50),
        0 6px 28px rgba(255,87,34,0.60);
    transform: translateY(-1px);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-notes__input {
    background: rgba(255,255,255,0.05);
    border-color: var(--np-border, rgba(255,255,255,0.08));
    color: var(--np-text, #f0f0f4);
    border-radius: var(--np-radius-sm, 10px);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-notes__input::placeholder {
    color: var(--np-text-faint, #444456);
}

.pztpro-checkout-bar--nightpie .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--np-accent, #ff5722);
    box-shadow: 0 0 0 3px rgba(255,87,34,0.15);
}

/* ============================================================
   RUSTIC (Fornaia / Terraforno) — parchment, serif, terracotta stamp
   ============================================================ */

.pztpro-checkout-bar--rustic {
    background: var(--rp-surface, #faf4eb);
    border: 1px solid var(--rp-border, rgba(101,70,30,0.18));
    border-radius: var(--rp-radius, 8px);
    padding: 16px 18px;
    margin-top: 0;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.70),
        0 3px 12px rgba(44,26,5,0.14);
}

/* Terracotta + gold gradient stripe across top */
.pztpro-checkout-bar--rustic::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--rp-accent, #b34a00) 0%,
        var(--rp-gold-light, #c9a227) 50%,
        var(--rp-accent, #b34a00) 100%);
    border-radius: var(--rp-radius, 8px) var(--rp-radius, 8px) 0 0;
}

.pztpro-rustic-bar__divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--rp-border, rgba(101,70,30,0.18)) 20%,
        var(--rp-gold-light, #c9a227) 50%,
        var(--rp-border, rgba(101,70,30,0.18)) 80%,
        transparent);
    margin-bottom: 14px;
}

.pztpro-checkout-bar--rustic .pztpro-bar-row__size-label {
    color: var(--rp-text-muted, #9a7a56);
    font-family: var(--rp-font-body, Georgia, serif);
    font-style: italic;
    font-size: 11px;
}

.pztpro-checkout-bar--rustic .pztpro-bar-row__price {
    color: var(--rp-accent, #b34a00);
    font-family: var(--rp-font-serif, Georgia, serif);
    font-size: 22px;
    font-weight: 700;
}

.pztpro-checkout-bar--rustic .pztpro-qty-btn {
    border-color: var(--rp-border, rgba(101,70,30,0.25));
    color: var(--rp-text, #2c1a05);
    border-radius: var(--rp-radius-sm, 4px);
    background: var(--rp-bg-dark, #ede0cc);
}

.pztpro-checkout-bar--rustic .pztpro-qty-btn:hover:not(:disabled) {
    background: var(--rp-accent-dim, rgba(179,74,0,0.12));
    border-color: var(--rp-accent, #b34a00);
    color: var(--rp-accent, #b34a00);
}

.pztpro-checkout-bar--rustic .pztpro-qty-value {
    color: var(--rp-text, #2c1a05);
    font-family: var(--rp-font-serif, Georgia, serif);
}

.pztpro-checkout-bar--rustic .pztpro-bar-row__btn {
    background: var(--rp-accent, #b34a00);
    color: #fff8ee;
    border-radius: var(--rp-radius-sm, 4px);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.10em;
    font-family: var(--rp-font-body, Georgia, serif);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(44,26,5,0.18);
}

.pztpro-checkout-bar--rustic .pztpro-bar-row__btn:hover:not(:disabled) {
    background: var(--rp-accent-hover, #8f3a00);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 12px rgba(44,26,5,0.25);
}

.pztpro-checkout-bar--rustic .pztpro-bar-notes__label {
    color: var(--rp-text-mid, #5c3d1a);
    font-family: var(--rp-font-body, Georgia, serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.pztpro-checkout-bar--rustic .pztpro-bar-notes__input {
    background: var(--rp-bg-dark, #ede0cc);
    border-color: var(--rp-border, rgba(101,70,30,0.18));
    color: var(--rp-text, #2c1a05);
    border-radius: var(--rp-radius-sm, 4px);
    font-family: var(--rp-font-body, Georgia, serif);
}

.pztpro-checkout-bar--rustic .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--rp-accent, #b34a00);
    box-shadow: 0 0 0 3px rgba(179,74,0,0.10);
}

/* ============================================================
   POCKETPIE — dark coal/amber, stacked mobile-first layout
   ============================================================ */

.pztpro-checkout-bar--pocketpie {
    background: var(--pp-bg-2, #251808);
    border: 1px solid var(--pp-border, rgba(255,190,80,0.15));
    border-radius: var(--pp-radius, 10px);
    padding: 14px 16px;
    margin-top: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.50);
}

.pztpro-pp-bar__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pp-border, rgba(255,190,80,0.13));
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-row__size-label {
    color: var(--pp-muted, #a08060);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-row__price {
    color: var(--pp-accent, #ff9a1a);
    font-size: 26px;
    font-weight: 800;
    font-family: var(--pp-font, Georgia, serif);
}

.pztpro-pp-bar__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-notes__input {
    background: var(--pp-bg-3, #2e1e0a);
    border-color: var(--pp-border, rgba(255,190,80,0.13));
    color: var(--pp-text, #f5e8cc);
    border-radius: var(--pp-radius-sm, 6px);
    margin-bottom: 10px;
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-notes__input::placeholder {
    color: var(--pp-muted, #a08060);
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--pp-accent, #ff9a1a);
    box-shadow: 0 0 0 3px rgba(255,154,26,0.15);
}

.pztpro-checkout-bar--pocketpie .pztpro-qty-btn {
    border-color: var(--pp-border, rgba(255,190,80,0.15));
    color: var(--pp-text, #f5e8cc);
    border-radius: var(--pp-radius-sm, 6px);
    background: rgba(255,154,26,0.06);
}

.pztpro-checkout-bar--pocketpie .pztpro-qty-btn:hover:not(:disabled) {
    background: rgba(255,154,26,0.16);
    border-color: var(--pp-accent, #ff9a1a);
    color: var(--pp-accent, #ff9a1a);
}

.pztpro-checkout-bar--pocketpie .pztpro-qty-value {
    color: var(--pp-text, #f5e8cc);
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-row__btn {
    flex: 1;
    justify-content: center;
    background: var(--pp-accent, #ff9a1a);
    color: var(--pp-bg, #1a1008);
    border-radius: var(--pp-radius, 10px);
    font-weight: 800;
    font-size: 15px;
    height: 48px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 12px rgba(255,154,26,0.35);
}

.pztpro-checkout-bar--pocketpie .pztpro-bar-row__btn:hover:not(:disabled) {
    background: #e88810;
    box-shadow: 0 4px 20px rgba(255,154,26,0.50);
    transform: translateY(-1px);
}

/* ============================================================
   PLAINLIST — minimal, text-first, inherits user accent colour
   ============================================================ */

.pztpro-checkout-bar--plainlist {
    background: var(--pl-bg, #ffffff);
    border-top: 2px solid var(--pl-divider, #e0e0e0);
    padding: 16px 0 4px;
    margin-top: 4px;
}

.pztpro-checkout-bar--plainlist .pztpro-bar-row__size-label {
    color: color-mix(in srgb, var(--pl-item-color, #333) 55%, transparent);
    font-size: 11px;
    letter-spacing: 0.05em;
}

.pztpro-checkout-bar--plainlist .pztpro-bar-row__price {
    color: var(--pl-accent, #1a1a1a);
    font-size: 20px;
}

.pztpro-checkout-bar--plainlist .pztpro-qty-btn {
    border-color: var(--pl-divider, #e0e0e0);
    color: var(--pl-item-color, #333);
    border-radius: 4px;
}

.pztpro-checkout-bar--plainlist .pztpro-qty-btn:hover:not(:disabled) {
    background: var(--pl-accent-10, rgba(26,26,26,0.08));
    border-color: var(--pl-accent, #1a1a1a);
    color: var(--pl-accent, #1a1a1a);
}

.pztpro-checkout-bar--plainlist .pztpro-qty-value {
    color: var(--pl-item-color, #333);
}

.pztpro-checkout-bar--plainlist .pztpro-bar-row__btn {
    background: var(--pl-accent, #1a1a1a);
    color: #ffffff;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.pztpro-checkout-bar--plainlist .pztpro-bar-row__btn:hover:not(:disabled) {
    opacity: 0.82;
    transform: translateY(-1px);
}

.pztpro-checkout-bar--plainlist .pztpro-bar-notes__input {
    background: var(--pl-bg, #ffffff);
    border-color: var(--pl-divider, #e0e0e0);
    color: var(--pl-item-color, #333);
    border-radius: 4px;
}

.pztpro-checkout-bar--plainlist .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--pl-accent, #1a1a1a);
    box-shadow: 0 0 0 3px var(--pl-accent-10, rgba(26,26,26,0.08));
}

/* ============================================================
   SCAFFOLD — fully token-driven skeleton
   ============================================================ */

.pztpro-checkout-bar--scaffold {
    background: var(--sc-bg, transparent);
    border: 1px solid var(--sc-border, #cccccc);
    border-radius: var(--sc-card-radius, 6px);
    padding: 10px 14px;
    margin-top: 8px;
    /* Scaffold: inherit theme colors — ultra-minimal */
}

.pztpro-checkout-bar--scaffold .pztpro-bar-row__size-label {
    color: var(--sc-text, inherit);
    opacity: 0.55;
}

.pztpro-checkout-bar--scaffold .pztpro-bar-row__price {
    color: var(--sc-accent, inherit);
    font-size: 20px;
}

.pztpro-checkout-bar--scaffold .pztpro-qty-btn {
    border-color: var(--sc-border, #cccccc);
    color: var(--sc-text, inherit);
    border-radius: var(--sc-card-radius, 4px);
}

.pztpro-checkout-bar--scaffold .pztpro-qty-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.06);
    border-color: var(--sc-accent, currentColor);
    color: var(--sc-accent, currentColor);
}

.pztpro-checkout-bar--scaffold .pztpro-qty-value {
    color: var(--sc-text, inherit);
}

.pztpro-checkout-bar--scaffold .pztpro-bar-row__btn {
    background: var(--sc-accent, #333333);
    color: #ffffff;
    border-radius: var(--sc-card-radius, 4px);
    letter-spacing: 0.02em;
}

.pztpro-checkout-bar--scaffold .pztpro-bar-row__btn:hover:not(:disabled) {
    opacity: 0.85;
    transform: translateY(-1px);
}

.pztpro-checkout-bar--scaffold .pztpro-bar-notes__input {
    background: var(--sc-bg, transparent);
    border-color: var(--sc-border, #cccccc);
    color: var(--sc-text, inherit);
    border-radius: var(--sc-card-radius, 4px);
}

.pztpro-checkout-bar--scaffold .pztpro-bar-notes__input:focus {
    outline: none;
    border-color: var(--sc-accent, #333333);
}

/* ============================================================
   RESPONSIVE — stack to column on narrow containers
   ============================================================ */

@media (max-width: 420px) {
    .pztpro-bar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .pztpro-bar-row__summary {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pztpro-bar-qty { justify-content: center; }
    .pztpro-bar-row__btn { width: 100%; justify-content: center; }
    .pztpro-pp-bar__actions { flex-direction: column; }
    .pztpro-checkout-bar--pocketpie .pztpro-bar-row__btn { width: 100%; }
}

/* ============================================================
   LAYOUT SYSTEM — shared CSS variables
   ============================================================

   New layouts (stacked-compact, split-card, sticky-bottom,
   minimal-inline, hero-cta) are palette-agnostic. They consume a
   set of --pztpro-bar-* tokens with built-in fallbacks, so they
   render cleanly even on a page with no template palette.

   Template palette blocks above still paint their own colours via
   their scoped classes — those selectors have higher specificity
   than the layout default block below, so they win automatically.
   To opt into the variable system, a palette only needs to set
   --pztpro-bar-accent / --pztpro-bar-fg / --pztpro-bar-bg on its
   .pztpro-checkout-bar--{template} selector.
*/

.pztpro-checkout-bar {
    --pztpro-bar-bg:          #ffffff;
    --pztpro-bar-fg:          #161822;
    --pztpro-bar-fg-muted:    #5b5f73;
    --pztpro-bar-surface-alt: #f3f4f8;
    --pztpro-bar-border:      rgba(16, 24, 40, 0.12);
    --pztpro-bar-accent:      #ff4d4d;
    --pztpro-bar-accent-fg:   #ffffff;
    --pztpro-bar-radius:      12px;
    --pztpro-bar-shadow:      0 4px 20px rgba(16, 24, 40, 0.08);
    --pztpro-bar-shadow-lift: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* ============================================================
   LAYOUT: classic-horizontal
   Same single-row shape as the legacy bars — matches current look.
   ============================================================ */

.pztpro-checkout-bar--classic-horizontal {
    /* Nothing beyond the shared base — the existing per-template
       palette rules already handle colour and radius. */
}

/* ============================================================
   LAYOUT: stacked-compact
   Size + price on top, full-width CTA below. Best for narrow cols.
   ============================================================ */

.pztpro-checkout-bar--stacked-compact {
    padding: 14px 16px;
    background: var(--pztpro-bar-bg);
    border: 1px solid var(--pztpro-bar-border);
    border-radius: var(--pztpro-bar-radius);
    box-shadow: var(--pztpro-bar-shadow);
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row__summary {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row__size-label {
    color: var(--pztpro-bar-fg-muted);
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row__price {
    color: var(--pztpro-bar-accent);
    font-size: 22px;
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-qty {
    align-self: center;
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row__btn {
    width: 100%;
    justify-content: center;
    background: var(--pztpro-bar-accent);
    color: var(--pztpro-bar-accent-fg);
    border-radius: calc(var(--pztpro-bar-radius) - 2px);
}
.pztpro-checkout-bar--stacked-compact .pztpro-bar-row__btn:hover:not(:disabled) {
    filter: brightness(0.92);
}

/* ============================================================
   LAYOUT: split-card
   Elevated card; price block on the left, controls on the right.
   ============================================================ */

.pztpro-checkout-bar--split-card {
    padding: 18px 20px;
    background: var(--pztpro-bar-bg);
    border: 1px solid var(--pztpro-bar-border);
    border-radius: calc(var(--pztpro-bar-radius) + 4px);
    box-shadow: var(--pztpro-bar-shadow-lift);
}
.pztpro-checkout-bar--split-card .pztpro-bar-row {
    align-items: center;
    gap: 18px;
}
.pztpro-checkout-bar--split-card .pztpro-bar-row__summary {
    flex: 1 1 auto;
}
.pztpro-checkout-bar--split-card .pztpro-bar-row__size-label {
    font-size: 11px;
    color: var(--pztpro-bar-fg-muted);
    margin-bottom: 2px;
}
.pztpro-checkout-bar--split-card .pztpro-bar-row__price {
    font-size: 28px;
    color: var(--pztpro-bar-fg);
    letter-spacing: -0.01em;
}
.pztpro-checkout-bar--split-card .pztpro-bar-qty {
    background: var(--pztpro-bar-surface-alt);
    padding: 3px;
    border-radius: 999px;
}
.pztpro-checkout-bar--split-card .pztpro-qty-btn {
    border: none;
    background: transparent;
}
.pztpro-checkout-bar--split-card .pztpro-bar-row__btn {
    background: var(--pztpro-bar-accent);
    color: var(--pztpro-bar-accent-fg);
    border-radius: 999px;
    padding: 0 24px;
    height: 48px;
}
.pztpro-checkout-bar--split-card .pztpro-bar-row__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* ============================================================
   LAYOUT: sticky-bottom
   Fixed viewport-bottom bar that slides up when a size is chosen.
   ============================================================ */

.pztpro-checkout-bar--sticky-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9990;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--pztpro-bar-bg);
    border-top: 1px solid var(--pztpro-bar-border);
    box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.12);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pztpro-checkout-bar--sticky-bottom.pztpro-bar--visible {
    transform: translateY(0);
}
.pztpro-checkout-bar--sticky-bottom .pztpro-bar-row {
    max-width: 720px;
    margin: 0 auto;
    gap: 12px;
}
.pztpro-checkout-bar--sticky-bottom .pztpro-bar-row__price {
    font-size: 20px;
    color: var(--pztpro-bar-accent);
}
.pztpro-checkout-bar--sticky-bottom .pztpro-bar-row__btn {
    background: var(--pztpro-bar-accent);
    color: var(--pztpro-bar-accent-fg);
    border-radius: 999px;
    padding: 0 22px;
}
/* Spacer prevents the fixed bar from covering page bottom content. */
.pztpro-bar-sticky-spacer {
    height: 90px;
    width: 100%;
    pointer-events: none;
}

/* ============================================================
   LAYOUT: minimal-inline
   Small, unboxed, flows with surrounding content.
   ============================================================ */

.pztpro-checkout-bar--minimal-inline {
    padding: 8px 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.pztpro-checkout-bar--minimal-inline .pztpro-bar-row {
    gap: 14px;
    border-top: 1px solid var(--pztpro-bar-border);
    padding-top: 12px;
}
.pztpro-checkout-bar--minimal-inline .pztpro-bar-row__size-label {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pztpro-bar-fg-muted);
}
.pztpro-checkout-bar--minimal-inline .pztpro-bar-row__price {
    font-size: 18px;
    color: var(--pztpro-bar-fg);
    font-weight: 600;
}
.pztpro-checkout-bar--minimal-inline .pztpro-qty-btn {
    border-color: var(--pztpro-bar-border);
    background: transparent;
}
.pztpro-checkout-bar--minimal-inline .pztpro-bar-row__btn {
    background: transparent;
    color: var(--pztpro-bar-accent);
    border: 1.5px solid var(--pztpro-bar-accent);
    border-radius: 8px;
    padding: 0 18px;
    height: 38px;
    font-size: 13px;
}
.pztpro-checkout-bar--minimal-inline .pztpro-bar-row__btn:hover:not(:disabled) {
    background: var(--pztpro-bar-accent);
    color: var(--pztpro-bar-accent-fg);
}

/* ============================================================
   LAYOUT: hero-cta
   Big price up top, oversized CTA underneath. Landing-page style.
   ============================================================ */

.pztpro-checkout-bar--hero-cta {
    padding: 24px 20px;
    background: var(--pztpro-bar-bg);
    border: 1px solid var(--pztpro-bar-border);
    border-radius: calc(var(--pztpro-bar-radius) + 6px);
    box-shadow: var(--pztpro-bar-shadow-lift);
    text-align: center;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__summary {
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__size-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pztpro-bar-fg-muted);
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__price {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pztpro-bar-accent);
    line-height: 1;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-qty {
    align-self: center;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__btn {
    width: 100%;
    justify-content: center;
    background: var(--pztpro-bar-accent);
    color: var(--pztpro-bar-accent-fg);
    border-radius: calc(var(--pztpro-bar-radius) + 2px);
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__btn:hover:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(-1px);
}
.pztpro-checkout-bar--hero-cta .pztpro-bar-row__btn svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   Template palette → layout variable mappings
   Each template palette exposes its accent/bg/fg to the layout
   system so the shared layouts inherit the right colours even
   when the new layouts are picked inside that template context.
   ============================================================ */

.pztpro-checkout-bar--colorbox {
    --pztpro-bar-bg:      var(--cb-surface, #ffffff);
    --pztpro-bar-fg:      var(--cb-text, #161822);
    --pztpro-bar-fg-muted:var(--cb-text-muted, #5b5f73);
    --pztpro-bar-border:  var(--cb-border, rgba(16,24,40,0.10));
    --pztpro-bar-accent:  var(--cb-accent, #ff4d4d);
}

.pztpro-checkout-bar--commandcenter {
    --pztpro-bar-bg:      #151a22;
    --pztpro-bar-fg:      #f1f3f9;
    --pztpro-bar-fg-muted:#7a8396;
    --pztpro-bar-border:  rgba(255,255,255,0.10);
    --pztpro-bar-accent:  #ff4d4d;
}

.pztpro-checkout-bar--metro {
    --pztpro-bar-bg:      #ffffff;
    --pztpro-bar-fg:      #111418;
    --pztpro-bar-fg-muted:#5b6068;
    --pztpro-bar-border:  rgba(0,0,0,0.10);
    --pztpro-bar-accent:  #d7263d;
}

.pztpro-checkout-bar--nightpie {
    --pztpro-bar-bg:      #1a1626;
    --pztpro-bar-fg:      #eceaf4;
    --pztpro-bar-fg-muted:#8d86a8;
    --pztpro-bar-border:  rgba(255,255,255,0.09);
    --pztpro-bar-accent:  #a78bfa;
}

.pztpro-checkout-bar--rustic {
    --pztpro-bar-bg:      #fbf4e6;
    --pztpro-bar-fg:      #3d2914;
    --pztpro-bar-fg-muted:#7a5d3d;
    --pztpro-bar-border:  rgba(61,41,20,0.18);
    --pztpro-bar-accent:  #b7410e;
}

.pztpro-checkout-bar--pocketpie {
    --pztpro-bar-bg:      #ffffff;
    --pztpro-bar-fg:      #1d1d1f;
    --pztpro-bar-fg-muted:#6b6b72;
    --pztpro-bar-border:  rgba(0,0,0,0.09);
    --pztpro-bar-accent:  #0a84ff;
}

.pztpro-checkout-bar--plainlist {
    --pztpro-bar-bg:      #ffffff;
    --pztpro-bar-fg:      #222;
    --pztpro-bar-fg-muted:#6a6a6a;
    --pztpro-bar-border:  rgba(0,0,0,0.12);
    --pztpro-bar-accent:  #2b7a0b;
}

/* ============================================================
   Utility: size-prompt + flash states shared across layouts
   ============================================================ */

.pztpro-bar-price--prompt {
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.75;
}

@keyframes pztpro-bar-flash {
    0%   { opacity: 0.4; transform: translateY(2px); }
    100% { opacity: 1;   transform: translateY(0); }
}
.pztpro-bar-price--flash {
    animation: pztpro-bar-flash 0.28s ease both;
}