/*
 * Plainlist Template — template.css
 * A clean, text-first checklist layout with zero image dependency.
 *
 * All variable defaults here are overridden by the CSS vars injected
 * by pztp-template-custom.php from saved settings.
 */

/* ── Root / Reset ─────────────────────────────────────────────────── */
.pl-root {
	--pl-accent:         #1a1a1a;
	--pl-bg:             #ffffff;
	--pl-heading-color:  #111111;
	--pl-item-color:     #333333;
	--pl-divider:        #e0e0e0;
	--pl-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--pl-base-size:      15px;
	--pl-heading-size:   18px;
	--pl-heading-weight: 700;
	--pl-text-transform: none;
	--pl-check-size:     18px;
	--pl-max-width:      680px;
	--pl-section-gap:    32px;
	--pl-item-gap:       10px;

	/* List-style + Add-to-Cart button (overridden by saved settings) */
	--pl-row-pad:        4px;
	--pl-label-weight:   400;
	--pl-cart-bg:        #1a1a1a;
	--pl-cart-fg:        #ffffff;
	--pl-cart-radius:    4px;

	/* Derived */
	--pl-accent-10: color-mix(in srgb, var(--pl-accent) 10%, transparent);
	--pl-accent-20: color-mix(in srgb, var(--pl-accent) 20%, transparent);

	box-sizing: border-box;
	background: var(--pl-bg);
	color: var(--pl-item-color);
	font-family: var(--pl-font);
	font-size: var(--pl-base-size);
	line-height: 1.5;
	padding: 24px;
}

.pl-root *, .pl-root *::before, .pl-root *::after {
	box-sizing: inherit;
}

/* ── Inner container ─────────────────────────────────────────────── */
.pl-inner {
	max-width: var(--pl-max-width);
	margin: 0 auto;
}

/* ── Intro text ──────────────────────────────────────────────────── */
.pl-intro {
	margin: 0 0 24px;
	color: var(--pl-item-color);
	font-size: var(--pl-base-size);
	opacity: 0.75;
}

/* ── Sections ────────────────────────────────────────────────────── */
.pl-section {
	margin-bottom: var(--pl-section-gap);
}

.pl-section + .pl-section {
	padding-top: var(--pl-section-gap);
}

.pl-section--with-divider + .pl-section--with-divider {
	border-top: 1px solid var(--pl-divider);
}

/* ── Section header ──────────────────────────────────────────────── */
.pl-section__header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 14px;
}

.pl-section__icon {
	color: var(--pl-accent);
	font-size: calc( var(--pl-heading-size) * 0.9 );
	flex-shrink: 0;
}

.pl-section__title {
	font-size: var(--pl-heading-size);
	font-weight: var(--pl-heading-weight);
	text-transform: var(--pl-text-transform);
	color: var(--pl-heading-color);
	margin: 0;
	line-height: 1.2;
}

.pl-section__badge {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--pl-accent);
	background: var(--pl-accent-10);
	border: 1px solid var(--pl-accent-20);
	border-radius: 20px;
	padding: 1px 8px;
	line-height: 1.6;
	white-space: nowrap;
}

/* ── Item list ───────────────────────────────────────────────────── */
.pl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pl-item-gap);
}

/* Columns */
.pl-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pl-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pl-list--cols-auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* default (1 col) is just the block flow */

/* ── Item ─────────────────────────────────────────────────────────── */
.pl-item {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: var(--pl-row-pad) 2px;
	border-radius: 4px;
	transition: background 0.12s;
	user-select: none;
}

.pl-item:hover {
	background: var(--pl-accent-10);
}

.pl-item--selected {
	color: var(--pl-accent);
}

/* Hide the real <input> but keep it accessible */
.pl-item__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* ── Custom checkbox / marker ────────────────────────────────────── */
.pl-item__check {
	flex-shrink: 0;
	width: var(--pl-check-size);
	height: var(--pl-check-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid currentColor;
	border-radius: 3px;
	color: var(--pl-item-color);
	font-size: calc( var(--pl-check-size) * 0.7 );
	transition: background 0.12s, color 0.12s, border-color 0.12s;
	position: relative;
}

/* Round radio variant */
.pl-root--check-radio .pl-item__check {
	border-radius: 50%;
}

/* Bullet / dash / arrow / star — hide box, show pseudo */
.pl-root--check-bullet .pl-item__check,
.pl-root--check-dash   .pl-item__check,
.pl-root--check-arrow  .pl-item__check,
.pl-root--check-star   .pl-item__check,
.pl-root--check-circle-dot .pl-item__check {
	border: none;
	background: transparent !important;
}

.pl-root--check-bullet .pl-item__check::before { content: '•'; font-size: calc( var(--pl-check-size) * 1.1 ); }
.pl-root--check-dash   .pl-item__check::before { content: '–'; }
.pl-root--check-arrow  .pl-item__check::before { content: '→'; }
.pl-root--check-star   .pl-item__check::before { content: '★'; }
.pl-root--check-circle-dot .pl-item__check {
	border: 2px solid currentColor;
	border-radius: 50%;
}
.pl-root--check-circle-dot .pl-item__check::before { content: ''; }
.pl-root--check-circle-dot .pl-item--selected .pl-item__check::before {
	display: block;
	width: calc( var(--pl-check-size) * 0.45 );
	height: calc( var(--pl-check-size) * 0.45 );
	background: var(--pl-accent);
	border-radius: 50%;
}

/* Checked state for checkbox/radio */
.pl-item--selected .pl-item__check {
	background: var(--pl-accent);
	border-color: var(--pl-accent);
	color: var(--pl-bg);
}

.pl-item--selected .pl-item__check::after {
	content: '';
	display: block;
	width: 30%;
	height: 55%;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(40deg) translate(-1px, -1px);
}

/* For bullet/dash/arrow/star: tint the color on selection */
.pl-root--check-bullet .pl-item--selected .pl-item__check,
.pl-root--check-dash   .pl-item--selected .pl-item__check,
.pl-root--check-arrow  .pl-item--selected .pl-item__check,
.pl-root--check-star   .pl-item--selected .pl-item__check {
	color: var(--pl-accent);
}
/* suppress the checkmark pseudo on these */
.pl-root--check-bullet .pl-item--selected .pl-item__check::after,
.pl-root--check-dash   .pl-item--selected .pl-item__check::after,
.pl-root--check-arrow  .pl-item--selected .pl-item__check::after,
.pl-root--check-star   .pl-item--selected .pl-item__check::after {
	display: none;
}

/* ── Item label ───────────────────────────────────────────────────── */
/* Bind colour directly to the setting (not `inherit`) so theme rules like
   `.entry-content li`, `label`, or `a` can't bleed a light grey in. The
   hardening block at the foot of this file re-asserts these with the
   `.pl-root` scope + !important for stubborn themes. */
.pl-item__label {
	flex: 1;
	font-size: var(--pl-base-size);
	color: var(--pl-item-color);
	font-weight: var(--pl-label-weight);
	line-height: 1.4;
}

.pl-item--selected .pl-item__label {
	color: var(--pl-accent);
	font-weight: 600;
}

/* Item price styling removed in PizzaTier 1.2.0 — pricing is provided
   by PizzaTier. */

/* ── Step mode ───────────────────────────────────────────────────── */
.pl-step-wrapper {
	position: relative;
}

.pl-section--step {
	display: none;
}

.pl-section--step.pl-section--active {
	display: block;
}

/* Progress bar */
.pl-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: calc( var(--pl-base-size) * 0.87 );
	color: var(--pl-heading-color);
	opacity: 0.7;
}

.pl-progress__bar-wrap {
	flex: 1;
	height: 3px;
	background: var(--pl-divider);
	border-radius: 2px;
	overflow: hidden;
}

.pl-progress__bar {
	height: 100%;
	background: var(--pl-accent);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.pl-progress__text {
	white-space: nowrap;
}

/* Step nav buttons */
.pl-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--pl-divider);
}

.pl-step-nav__btn {
	padding: 8px 18px;
	border: 2px solid var(--pl-accent);
	background: transparent;
	color: var(--pl-accent);
	font-family: var(--pl-font);
	font-size: var(--pl-base-size);
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
	line-height: 1;
}

.pl-step-nav__btn:hover:not(:disabled) {
	background: var(--pl-accent);
	color: var(--pl-bg);
}

.pl-step-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.pl-step-nav__btn--next {
	margin-left: auto;
}

/* ── Summary block ───────────────────────────────────────────────── */
.pl-summary {
	margin-top: var(--pl-section-gap);
	padding-top: var(--pl-section-gap);
	border-top: 2px solid var(--pl-accent);
}

.pl-summary__heading {
	font-size: var(--pl-heading-size);
	font-weight: var(--pl-heading-weight);
	color: var(--pl-heading-color);
	text-transform: var(--pl-text-transform);
	margin: 0 0 12px;
}

.pl-summary__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-summary__item {
	display: flex;
	gap: 6px;
	padding: 4px 0;
	font-size: var(--pl-base-size);
	color: var(--pl-item-color);
	border-bottom: 1px solid var(--pl-divider);
}

.pl-summary__item:last-child {
	border-bottom: none;
}

.pl-summary__item-section {
	font-weight: 600;
	min-width: 80px;
	color: var(--pl-heading-color);
}

.pl-summary__empty {
	color: var(--pl-item-color);
	opacity: 0.5;
	font-style: italic;
}

/* ── Reset button ────────────────────────────────────────────────── */
.pl-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid var(--pl-divider);
	border-radius: 4px;
	color: var(--pl-item-color);
	font-family: var(--pl-font);
	font-size: calc( var(--pl-base-size) * 0.9 );
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s, border-color 0.15s;
}

.pl-reset-btn:hover {
	opacity: 1;
	border-color: var(--pl-accent);
	color: var(--pl-accent);
}

/* ── Footer note ─────────────────────────────────────────────────── */
.pl-footer-note {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--pl-divider);
	font-size: calc( var(--pl-base-size) * 0.87 );
	color: var(--pl-item-color);
	opacity: 0.65;
}

/* ── Action bar (WooCommerce / PizzaTier hook) ───────────────── */
.pl-action-bar {
	margin-top: 24px;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.pl-empty {
	color: var(--pl-item-color);
	opacity: 0.45;
	font-style: italic;
	font-size: var(--pl-base-size);
	padding: 4px 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* Multi-col grids collapse to single column at tablet and smaller (≤ 768px) */
@media ( max-width: 768px ) {
	.pl-list--cols-2,
	.pl-list--cols-3 {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.pl-root {
		padding: 16px;
		font-size: 14px;
	}
	/* Auto-fill grid also collapses to single column on phone */
	.pl-list--cols-auto {
		grid-template-columns: 1fr;
	}
	/* Section headers — tighter */
	.pl-section__header { padding: 8px 0; }
	.pl-section__title  { font-size: 1em; }

	/* Tab/category nav scrolls horizontally */
	.pl-tabnav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	.pl-tabnav::-webkit-scrollbar { display: none; }
	.pl-tab { flex-shrink: 0; white-space: nowrap; }

	/* Checkout/action bar stacks */
	.pl-checkout-bar,
	.pl-action-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.pl-checkout-bar__btn,
	.pl-action-bar__btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — TABLET RESPONSIVE (601px – 900px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 900px) {
    .pl-root { padding: 20px; }

    /* Two-column grids on tablet remain 2-col (already fine),
       auto-fill also stays — no change needed.
       Tighten section spacing slightly. */
    .pl-root { --pl-section-gap: 24px; }

    /* Step nav */
    .pl-step-nav { margin-top: 18px; padding-top: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — CHECKOUT BAR RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    .pztc-checkout-bar--plainlist .pztc-bar-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pztc-checkout-bar--plainlist .pztc-bar-row__summary {
        width: 100%;
        flex: none;
    }
    .pztc-checkout-bar--plainlist .pztc-bar-row__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════
   PLAINLIST — ISSUE FIXES & ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* 1. Size Modal Menu */
.pl-size-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid var(--pl-divider, #e0e0e0);
    border-radius: 6px;
    background: var(--pl-bg, #fff);
    color: var(--pl-item-color, #333);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s;
    font-family: inherit;
    margin-top: 6px;
}
.pl-size-modal-trigger:hover {
    border-color: var(--pl-accent, #1a1a1a);
    background: var(--pl-accent-10, rgba(26,26,26,0.06));
}
.pl-size-modal-trigger .pl-size-modal-trigger__value {
    font-weight: 700;
    color: var(--pl-accent, #1a1a1a);
}

/* Size modal overlay */
.pl-size-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    align-items: center;
    justify-content: center;
}
.pl-size-modal.is-open {
    display: flex;
}
.pl-size-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.40);
    cursor: pointer;
}
.pl-size-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--pl-bg, #fff);
    border-radius: 10px;
    padding: 24px 20px 20px;
    max-width: 400px;
    width: calc(100% - 48px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    animation: pl-modal-pop 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pl-modal-pop {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pl-size-modal__heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--pl-accent, #1a1a1a);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pl-size-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.pl-size-modal__close:hover { color: #333; }
.pl-size-modal__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pl-size-modal__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--pl-divider, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-item-color, #333);
    background: var(--pl-bg, #fff);
}
.pl-size-modal__option:hover,
.pl-size-modal__option.is-active {
    border-color: var(--pl-accent, #1a1a1a);
    background: var(--pl-accent-10, rgba(26,26,26,0.06));
    color: var(--pl-accent, #1a1a1a);
}
.pl-size-modal__option input[type="radio"] { display: none; }
.pl-size-modal__option-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--pl-divider, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.pl-size-modal__option.is-active .pl-size-modal__option-check {
    border-color: var(--pl-accent, #1a1a1a);
    background: var(--pl-accent, #1a1a1a);
}
.pl-size-modal__option.is-active .pl-size-modal__option-check::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* 2. Custom checkout bar — PlainList minimal edition */
.pztc-checkout-bar--plainlist {
    margin-top: 12px;
    border-top: 2px solid var(--pl-divider, #e0e0e0);
    padding-top: 14px;
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — COLOUR HARDENING (theme-override guard)
   ══════════════════════════════════════════════════════════════
   Many themes colour `.entry-content li`, `label`, and `a` inside post
   content, which can win on specificity and wash the list out to a faint
   grey. These rules re-assert the template's own colours, scoped under
   .pl-root and marked !important so the chosen "Item Text Color" /
   "Section Header Color" always take effect regardless of the active theme. */
.pl-root,
.pl-root .pl-item,
.pl-root .pl-item__label,
.pl-root li.pl-item {
    color: var(--pl-item-color) !important;
}
.pl-root .pl-section__title,
.pl-root .pl-summary__heading,
.pl-root .pl-summary__item-section {
    color: var(--pl-heading-color) !important;
}
.pl-root .pl-item--selected,
.pl-root .pl-item--selected .pl-item__label {
    color: var(--pl-accent) !important;
}
/* Items are not links, but guard against theme `a` colour leaking in if a
   label is ever wrapped or linked by an integration. */
.pl-root a,
.pl-root .pl-item__label a {
    color: inherit;
    text-decoration: none;
}
/* Keep the marker readable: it tracks the item colour until selected. */
.pl-root .pl-item__check { color: var(--pl-item-color); }
.pl-root .pl-item--selected .pl-item__check { color: var(--pl-bg); }
.pl-root--check-bullet .pl-item--selected .pl-item__check,
.pl-root--check-dash   .pl-item--selected .pl-item__check,
.pl-root--check-arrow  .pl-item--selected .pl-item__check,
.pl-root--check-star   .pl-item--selected .pl-item__check {
    color: var(--pl-accent);
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — LIST ROW STYLES  (Settings → List Row Style)
   ══════════════════════════════════════════════════════════════ */

/* Bordered — thin divider under each row */
.pl-root--rows-bordered .pl-item {
    border-bottom: 1px solid var(--pl-divider);
    border-radius: 0;
}
.pl-root--rows-bordered .pl-list { gap: 0; }
.pl-root--rows-bordered .pl-item:last-child { border-bottom: none; }

/* Underline — heavier rule under each row */
.pl-root--rows-underline .pl-item {
    border-bottom: 2px solid var(--pl-divider);
    border-radius: 0;
}
.pl-root--rows-underline .pl-list { gap: 0; }

/* Striped — zebra background on alternating rows */
.pl-root--rows-striped .pl-list { gap: 0; }
.pl-root--rows-striped .pl-item:nth-child(odd) {
    background: color-mix(in srgb, var(--pl-item-color) 5%, transparent);
}
.pl-root--rows-striped .pl-item {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
}

/* Cards — each row in its own bordered box */
.pl-root--rows-card .pl-item {
    border: 1px solid var(--pl-divider);
    border-radius: 6px;
    padding: calc(var(--pl-row-pad) + 4px) 12px;
}
.pl-root--rows-card .pl-item:hover {
    border-color: var(--pl-accent-20);
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — SELECTED ITEM STYLES  (Settings → Selected Item Style)
   ══════════════════════════════════════════════════════════════ */

/* Filled — accent-tinted background highlight on the chosen row */
.pl-root--sel-filled .pl-item--selected {
    background: var(--pl-accent-10);
    border-radius: 4px;
}

/* Left bar — accent bar on the row's left edge */
.pl-root--sel-leftbar .pl-item {
    border-left: 3px solid transparent;
    padding-left: 8px;
}
.pl-root--sel-leftbar .pl-item--selected {
    border-left-color: var(--pl-accent);
}

/* Bold only — weight change, no colour shift (override the accent recolour) */
.pl-root--sel-bold .pl-item--selected,
.pl-root--sel-bold .pl-item--selected .pl-item__label {
    color: var(--pl-item-color) !important;
}
.pl-root--sel-bold .pl-item--selected .pl-item__label {
    font-weight: 800;
}

/* ══════════════════════════════════════════════════════════════
   PLAINLIST — ADD-TO-CART BUTTON & CHECKOUT BAR
   ══════════════════════════════════════════════════════════════
   Self-contained styling for the PizzaTier checkout bar so the CTA
   matches the Plainlist aesthetic without relying on Pro's generic styles.
   Driven by the template's colour vars + the Add-to-Cart button settings. */

.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__size-label {
    font-size: calc(var(--pl-base-size) * 0.9);
    color: var(--pl-item-color);
    opacity: 0.75;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__price {
    font-size: calc(var(--pl-base-size) * 1.25);
    font-weight: 700;
    color: var(--pl-heading-color);
    font-family: var(--pl-font);
}

/* Quantity stepper */
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--pl-divider);
    border-radius: var(--pl-cart-radius);
    padding: 2px;
    flex-shrink: 0;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-qty-btn {
    width: 30px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--pl-item-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: calc(var(--pl-cart-radius) - 1px);
    transition: background 0.15s, color 0.15s;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-qty-btn:hover:not(:disabled) {
    background: var(--pl-accent-10);
    color: var(--pl-accent);
}
.pl-root .pztc-checkout-bar--plainlist .pztc-qty-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-qty-value {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    font-size: calc(var(--pl-base-size) * 0.95);
    color: var(--pl-item-color);
}

/* ── The CTA button ─────────────────────────────────────────────── */
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__btn,
.pl-root .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    font-family: var(--pl-font);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    border-radius: var(--pl-cart-radius);
    border: 2px solid var(--pl-cart-bg);
    background: var(--pl-cart-bg);
    color: var(--pl-cart-fg);
    transition: background 0.16s, color 0.16s, border-color 0.16s, opacity 0.16s, transform 0.05s;
    text-decoration: none;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__btn:hover,
.pl-root .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn:hover {
    opacity: 0.9;
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__btn:active,
.pl-root .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn:active {
    transform: translateY(1px);
}
.pl-root .pztc-checkout-bar--plainlist .pztc-bar-row__btn:disabled,
.pl-root .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* CTA size variants */
.pl-root--cartsize-small  .pztc-checkout-bar--plainlist .pztc-bar-row__btn { padding: 7px 16px;  font-size: calc(var(--pl-base-size) * 0.9); }
.pl-root--cartsize-medium .pztc-checkout-bar--plainlist .pztc-bar-row__btn { padding: 10px 22px; font-size: var(--pl-base-size); }
.pl-root--cartsize-large  .pztc-checkout-bar--plainlist .pztc-bar-row__btn { padding: 14px 30px; font-size: calc(var(--pl-base-size) * 1.1); }

/* CTA style: Outline — transparent until hover */
.pl-root--cart-outline .pztc-checkout-bar--plainlist .pztc-bar-row__btn,
.pl-root--cart-outline .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn {
    background: transparent;
    color: var(--pl-cart-bg);
    border-color: var(--pl-cart-bg);
}
.pl-root--cart-outline .pztc-checkout-bar--plainlist .pztc-bar-row__btn:hover,
.pl-root--cart-outline .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn:hover {
    background: var(--pl-cart-bg);
    color: var(--pl-cart-fg);
    opacity: 1;
}

/* CTA style: Text link — minimal, underlined */
.pl-root--cart-link .pztc-checkout-bar--plainlist .pztc-bar-row__btn,
.pl-root--cart-link .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn {
    background: transparent;
    border-color: transparent;
    color: var(--pl-cart-bg);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 6px;
    padding-right: 6px;
}
.pl-root--cart-link .pztc-checkout-bar--plainlist .pztc-bar-row__btn:hover,
.pl-root--cart-link .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn:hover {
    color: var(--pl-accent);
    opacity: 1;
}

/* Full-width CTA */
.pl-root--cartfull .pztc-checkout-bar--plainlist .pztc-bar-row__btn,
.pl-root--cartfull .pztc-checkout-bar--plainlist .pztc-add-to-cart-btn {
    flex: 1 1 100%;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   PER-TOPPING COVERAGE — chip + modal picker
   The chip appears on each selected topping row; tapping it opens a
   shared modal to choose Whole / Half / Quarter coverage.
   ══════════════════════════════════════════════════════════════ */

/* Row chip — hidden until the topping is selected */
.pl-item__coverage {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--pl-divider);
    border-radius: 999px;
    background: var(--pl-bg);
    color: var(--pl-item-color);
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.pl-item--selected .pl-item__coverage { display: inline-flex; }
.pl-item__coverage:hover,
.pl-item__coverage:focus-visible {
    border-color: var(--pl-accent);
    color: var(--pl-accent);
    background: var(--pl-accent-10);
    outline: none;
}
.pl-item__coverage-ico {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: currentColor;
    flex-shrink: 0;
}

/* Modal */
.pl-cov-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pl-cov-modal--open { display: flex; }
.pl-cov-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.pl-cov-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: var(--pl-bg);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    font-family: var(--pl-font);
    color: var(--pl-item-color);
}
.pl-cov-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pl-divider);
}
.pl-cov-modal__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--pl-heading-color);
}
.pl-cov-modal__close {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: var(--pl-item-color);
    padding: 0 4px;
}
.pl-cov-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    padding: 18px;
}
.pl-cov-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 6px;
    border: 1px solid var(--pl-divider);
    border-radius: 8px;
    background: var(--pl-bg);
    color: var(--pl-item-color);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    transition: border-color 0.12s, background 0.12s;
}
.pl-cov-opt:hover { border-color: var(--pl-accent); background: var(--pl-accent-10); }
.pl-cov-opt--active { border-color: var(--pl-accent); background: var(--pl-accent-20); }
.pl-cov-opt__label { text-align: center; line-height: 1.3; }

/* Coverage icons — circle with the covered area filled in the accent colour */
.pl-cov-opt__ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--pl-accent);
    box-sizing: border-box;
    background-color: transparent;
}
.pl-cov-opt__ico--whole                { background: var(--pl-accent); }
.pl-cov-opt__ico--half-left            { background: linear-gradient(to right, var(--pl-accent) 50%, transparent 50%); }
.pl-cov-opt__ico--half-right           { background: linear-gradient(to left,  var(--pl-accent) 50%, transparent 50%); }
.pl-cov-opt__ico--quarter-top-left     { background: conic-gradient(from 270deg, var(--pl-accent) 0 90deg, transparent 90deg); }
.pl-cov-opt__ico--quarter-top-right    { background: conic-gradient(from 0deg,   var(--pl-accent) 0 90deg, transparent 90deg); }
.pl-cov-opt__ico--quarter-bottom-right { background: conic-gradient(from 90deg,  var(--pl-accent) 0 90deg, transparent 90deg); }
.pl-cov-opt__ico--quarter-bottom-left  { background: conic-gradient(from 180deg, var(--pl-accent) 0 90deg, transparent 90deg); }