/**
 * WC Personalisation Panel — Front-end styles
 * Luxury / editorial aesthetic. Driven by CSS custom properties
 * output inline from the global Panel Settings.
 * Scoped to #wcpp-panel, #wcpp-overlay, .wcpp-button.
 */

/* ─── Fallback tokens (overridden by inline :root block) ─────────── */
:root {
	--wcpp-btn-bg:        #1A56DB;
	--wcpp-btn-text:      #1A56DB;
	--wcpp-btn-radius:    6px;

	/* Trigger button — padding (4 sides) */
	--wcpp-btn-pad-top:       15px;
	--wcpp-btn-pad-right:     26px;
	--wcpp-btn-pad-bottom:    15px;
	--wcpp-btn-pad-left:      26px;
	/* Trigger button — margin (4 sides) */
	--wcpp-btn-margin-top:    12px;
	--wcpp-btn-margin-right:  0px;
	--wcpp-btn-margin-bottom: 0px;
	--wcpp-btn-margin-left:   0px;
	--wcpp-btn-font-size:     13px;
	--wcpp-btn-border-width:  1.5px;
	--wcpp-btn-ls:            0.08em;

	--wcpp-panel-width:   440px;
	--wcpp-mobile-bp:     500px;
	--wcpp-panel-bg:      #ffffff;
	--wcpp-font:          inherit;
	--wcpp-panel-radius:  10px;
	--wcpp-overlay:       rgba(20,18,16,0.50);
	--wcpp-anim:          420ms;
	--wcpp-title-color:   #1a1a1a;
	--wcpp-progress:      #1A56DB;
	--wcpp-card-border:   #e7e4df;
	--wcpp-card-selected: #1A56DB;
	--wcpp-img-size:      56px;
	--wcpp-footer-btn:    #1A56DB;
	--wcpp-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--wcpp-ink:           #1a1a1a;
	--wcpp-muted:         #8c8782;
	--wcpp-hair:          #ece9e4;

	/* Panel content padding */
	--wcpp-content-pad:   22px;

	/* Footer button tokens */
	--wcpp-footer-btn-radius: 6px;
	--wcpp-footer-btn-font:   12px;
	--wcpp-footer-btn-pad:    16px 24px 16px 24px;
	--wcpp-footer-btn-margin: 0px 0px 8px 0px;

	/* Choice card image display */
	--wcpp-img-fit:    cover;
	--wcpp-img-aspect: 1 / 1;
}

/* ─── Trigger button ─────────────────────────────────────────────── */
.wcpp-button {
	margin:  var(--wcpp-btn-margin-top) var(--wcpp-btn-margin-right) var(--wcpp-btn-margin-bottom) var(--wcpp-btn-margin-left);
	padding: var(--wcpp-btn-pad-top) var(--wcpp-btn-pad-right) var(--wcpp-btn-pad-bottom) var(--wcpp-btn-pad-left);
	font-size:      var(--wcpp-btn-font-size);
	font-weight:    600;
	letter-spacing: var(--wcpp-btn-ls);
	text-transform: uppercase;
	border-radius:  var(--wcpp-btn-radius);
	cursor:         pointer;
	min-height:     50px;
	transition:     background .35s var(--wcpp-ease), color .35s var(--wcpp-ease), box-shadow .35s var(--wcpp-ease), transform .15s ease;
	font-family:    var(--wcpp-font);
}
.wcpp-button:active { transform: translateY(1px); }
.wcpp-button--full { width: 100%; display: block; }
.wcpp-button--outline {
	background: transparent;
	color:      var(--wcpp-btn-text);
	border:     var(--wcpp-btn-border-width) solid var(--wcpp-btn-bg);
}
.wcpp-button--outline:hover {
	background: var(--wcpp-btn-bg);
	color:      #fff;
	box-shadow: 0 8px 20px -8px var(--wcpp-btn-bg);
}
.wcpp-button--filled {
	background: var(--wcpp-btn-bg);
	color:      #fff;
	border:     var(--wcpp-btn-border-width) solid var(--wcpp-btn-bg);
}
.wcpp-button--filled:hover { box-shadow: 0 10px 24px -8px var(--wcpp-btn-bg); transform: translateY(-1px); }
.wcpp-button--text {
	background:      transparent;
	color:          var(--wcpp-btn-text);
	border:         none;
	min-height:     auto;
	padding:        10px 0;
	border-bottom:  var(--wcpp-btn-border-width) solid currentColor;
	border-radius:  0;
	display:        inline-block;
	width:          auto;
}

/* ─── Trigger button — animation variants ────────────────────────── */
/* Base: position + overflow needed for the shine pseudo-element. */
.wcpp-button { position: relative; }

/* none: strip all motion */
.wcpp-button--anim-none { transition: none !important; }
.wcpp-button--anim-none:hover,
.wcpp-button--anim-none:active { transform: none !important; box-shadow: none !important; }

/* lift (default): upward float handled by existing outline/filled hover rules.
   This class is intentionally empty — the base hover styles do the work. */

/* pulse: idle glowing ring that expands and fades */
@keyframes wcppBtnPulse {
	0%   { box-shadow: 0 0 0 0   var(--wcpp-btn-bg); }
	70%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
	100% { box-shadow: 0 0 0 0   rgba(0,0,0,0); }
}
.wcpp-button--anim-pulse { animation: wcppBtnPulse 2.2s ease-out infinite; }
.wcpp-button--anim-pulse:hover { animation: none; transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--wcpp-btn-bg); }

/* shine: diagonal light sweep across the button face on hover */
.wcpp-button--anim-shine { overflow: hidden; }
.wcpp-button--anim-shine::after {
	content:        '';
	position:       absolute;
	top:            0;
	left:           -130%;
	width:          65%;
	height:         100%;
	background:     linear-gradient(105deg, transparent, rgba(255,255,255,0.30), transparent);
	transition:     left .55s ease;
	pointer-events: none;
}
.wcpp-button--anim-shine:hover::after { left: 160%; }

/* scale: smooth grow on hover */
.wcpp-button--anim-scale:hover  { transform: scale(1.04); box-shadow: 0 8px 22px -8px var(--wcpp-btn-bg); }
.wcpp-button--anim-scale:active { transform: scale(0.97); box-shadow: none; }

/* bounce: springy upward bounce on hover */
@keyframes wcppBtnBounce {
	0%, 100% { transform: translateY(0); }
	28%       { transform: translateY(-6px); }
	50%       { transform: translateY(-2px); }
	70%       { transform: translateY(-5px); }
	88%       { transform: translateY(-1px); }
}
.wcpp-button--anim-bounce:hover  { animation: wcppBtnBounce .6s ease; box-shadow: 0 8px 22px -8px var(--wcpp-btn-bg); }
.wcpp-button--anim-bounce:active { animation: none; transform: translateY(1px); }

/* ─── Overlay ────────────────────────────────────────────────────── */
.wcpp-overlay {
	position:                fixed;
	inset:                   0;
	background:              var(--wcpp-overlay);
	z-index:                 99998;
	opacity:                 0;
	visibility:              hidden;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter:         blur(0px);
	transition:              opacity var(--wcpp-anim) var(--wcpp-ease), visibility var(--wcpp-anim), backdrop-filter var(--wcpp-anim);
}
.wcpp-overlay.wcpp-is-open {
	opacity:                 1;
	visibility:              visible;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter:         blur(4px);
}

/* ─── Panel drawer ───────────────────────────────────────────────── */
#wcpp-panel {
	position:        fixed;
	top:             0;
	height:          100%;
	width:           var(--wcpp-panel-width);
	max-width:       100%;
	background:      var(--wcpp-panel-bg);
	z-index:         99999;
	display:         flex;
	flex-direction:  column;
	transition:      transform var(--wcpp-anim) var(--wcpp-ease);
	font-family:     var(--wcpp-font);
	color:           var(--wcpp-ink);
	overflow:        hidden;
	will-change:     transform;
}
#wcpp-panel.wcpp-from-right { right: 0; transform: translateX(105%); box-shadow: -4px 0 40px rgba(0,0,0,.14), -1px 0 0 rgba(0,0,0,.06); }
#wcpp-panel.wcpp-from-right.wcpp-is-open { transform: translateX(0); }
#wcpp-panel.wcpp-from-left  { left: 0;  transform: translateX(-105%); box-shadow: 4px 0 40px rgba(0,0,0,.14), 1px 0 0 rgba(0,0,0,.06); }
#wcpp-panel.wcpp-from-left.wcpp-is-open  { transform: translateX(0); }

/* ─── Header ─────────────────────────────────────────────────────── */
.wcpp-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 22px 16px;
	flex-shrink:     0;
	gap:             8px;
	border-bottom:   1px solid var(--wcpp-hair);
	background:      var(--wcpp-panel-bg);
}
.wcpp-panel__title {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin:         0;
	flex:           1;
	text-align:     center;
	color:          var(--wcpp-title-color);
}
.wcpp-panel__back,
.wcpp-panel__close {
	background:      none;
	border:         none;
	cursor:         pointer;
	padding:        0;
	font-size:      17px;
	line-height:    1;
	color:          var(--wcpp-muted);
	width:          38px;
	height:         38px;
	display:        flex;
	align-items:    center;
	justify-content: center;
	border-radius:  50%;
	flex-shrink:    0;
	transition:     color .25s ease, background .25s ease, transform .25s var(--wcpp-ease);
}
.wcpp-panel__back:hover,
.wcpp-panel__close:hover { color: var(--wcpp-ink); background: var(--wcpp-hair); }
.wcpp-panel__close:hover { transform: rotate(90deg); }

/* ─── Progress: BAR ──────────────────────────────────────────────── */
.wcpp-panel__progress { flex-shrink: 0; padding: 10px 24px 0; }
.wcpp-progress-bar {
	height:        3px;
	background:    var(--wcpp-hair);
	border-radius: 3px;
	overflow:      hidden;
}
.wcpp-progress-bar__fill {
	height:        100%;
	width:         0;
	background:    var(--wcpp-progress);
	border-radius: 3px;
	transition:    width var(--wcpp-anim) var(--wcpp-ease);
}

/* ─── Progress: DOTS ─────────────────────────────────────────────── */
.wcpp-progress-dots {
	display:         flex;
	justify-content: center;
	gap:             7px;
	padding:         6px 0;
}
.wcpp-progress-dots span {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--wcpp-hair);
	transition:    background .3s var(--wcpp-ease), transform .3s var(--wcpp-ease), width .3s var(--wcpp-ease);
}
.wcpp-progress-dots span.wcpp-dot-active {
	background:     var(--wcpp-progress);
	width:          20px;
	border-radius:  4px;
}

/* ─── Progress: TEXT ─────────────────────────────────────────────── */
.wcpp-progress-text {
	text-align:     center;
	padding:        4px 0;
	font-size:      10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--wcpp-muted);
	font-weight:    700;
}

/* ─── Step content ───────────────────────────────────────────────── */
.wcpp-panel__content {
	flex:                       1;
	overflow-y:                 auto;
	padding:                    24px var(--wcpp-content-pad) 28px;
	-webkit-overflow-scrolling: touch;
}
.wcpp-panel__content::-webkit-scrollbar { width: 5px; }
.wcpp-panel__content::-webkit-scrollbar-thumb { background: #ddd8d0; border-radius: 3px; }
.wcpp-panel__content::-webkit-scrollbar-track { background: transparent; }

.wcpp-step__heading {
	font-size:      21px;
	font-weight:    700;
	line-height:    1.25;
	margin:         0 0 16px;
	color:          var(--wcpp-ink);
	letter-spacing: -0.02em;
}

/* Stacked steps: "Step N" divider between sections */
.wcpp-step-divider {
	display:        flex;
	align-items:    center;
	gap:            12px;
	margin:         24px 0 16px;
	color:          var(--wcpp-progress);
}
.wcpp-step-divider:first-child { margin-top: 2px; }
.wcpp-step-divider::before,
.wcpp-step-divider::after {
	content: ""; flex: 1; height: 1px; background: var(--wcpp-hair);
}
.wcpp-step-divider span {
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space:    nowrap;
	background:     color-mix(in srgb, var(--wcpp-progress) 11%, transparent);
	padding:        3px 11px;
	border-radius:  20px;
}
.wcpp-step-section { animation: wcppFadeUp .4s var(--wcpp-ease) both; }

/* Text step: heading row with counter on the right */
.wcpp-step__head {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             10px;
	margin-bottom:   12px;
}
.wcpp-step__head .wcpp-step__heading { margin: 0; }
.wcpp-step__head .wcpp-text-counter  { margin: 0; }

/* Step fade-in */
.wcpp-options, .wcpp-summary-list, .wcpp-step__heading {
	animation: wcppFadeUp .45s var(--wcpp-ease) both;
}
@keyframes wcppFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── Placement picker (large image cards) ───────────────────────── */
.wcpp-select-list { display: flex; flex-direction: column; gap: 14px; }

/* Grid2: side-by-side placement picker (e.g. Front / Back) */
.wcpp-select-list--grid2 {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   12px;
}
.wcpp-select-list--grid2 .wcpp-select-card__img img {
	aspect-ratio: 4 / 3;
	object-fit:   cover;
}
.wcpp-select-list--grid2 .wcpp-select-card__name { font-size: 10px; }
.wcpp-select-card {
	display:        block;
	width:          100%;
	padding:        0;
	background:     #fff;
	border:         1.5px solid var(--wcpp-card-border);
	border-radius:  var(--wcpp-panel-radius);
	cursor:         pointer;
	overflow:       hidden;
	text-align:     left;
	font-family:    inherit;
	transition:     border-color .25s var(--wcpp-ease), box-shadow .25s var(--wcpp-ease), transform .18s ease;
}
.wcpp-select-card:hover {
	border-color: var(--wcpp-card-selected);
	transform:    translateY(-2px);
	box-shadow:   0 12px 30px -12px rgba(0,0,0,.35);
}
/* Dead simple: a square 512×512 image fills the card width as a full square. */
#wcpp-panel .wcpp-select-card__img {
	display:    block;
	background: #f5f3f0;
	line-height: 0;
}
#wcpp-panel .wcpp-select-card__img img {
	display:    block !important;
	width:      100% !important;
	height:     auto !important;
	max-width:  100% !important;
	margin:     0 !important;
	border:     0 !important;
	border-radius: 0 !important;
}
.wcpp-select-card__foot {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 18px;
	border-top:      1px solid var(--wcpp-hair);
}
.wcpp-select-card__name {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--wcpp-ink);
}
.wcpp-select-card__arrow {
	font-size:   24px;
	line-height: 1;
	color:       var(--wcpp-muted);
	transition:  transform .25s var(--wcpp-ease), color .25s ease;
}
.wcpp-select-card:hover .wcpp-select-card__arrow {
	color:     var(--wcpp-card-selected);
	transform: translateX(4px);
}

/* ─── Choice options ─────────────────────────────────────────────── */
.wcpp-options { display: flex; flex-direction: column; gap: 10px; }
.wcpp-options--grid2, .wcpp-options--grid3 { display: grid; gap: 10px; }
.wcpp-options--grid2 { grid-template-columns: repeat(2, 1fr); }
.wcpp-options--grid3 { grid-template-columns: repeat(3, 1fr); }

@keyframes wcppShake {
	0%,100% { transform: translateX(0); }
	20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.wcpp-options.wcpp-shake,
.wcpp-text-wrap.wcpp-shake,
.wcpp-step-section.wcpp-shake { animation: wcppShake 0.45s ease; }

.wcpp-option-btn {
	display:        flex;
	align-items:    center;
	gap:            14px;
	padding:        13px 16px;
	border:         1.5px solid var(--wcpp-card-border);
	border-radius:  var(--wcpp-panel-radius);
	background:     #fff;
	cursor:         pointer;
	text-align:     left;
	transition:     border-color .25s var(--wcpp-ease), box-shadow .25s var(--wcpp-ease), background .25s var(--wcpp-ease), transform .12s ease;
	min-height:     58px;
	width:          100%;
	position:       relative;
	font-family:    inherit;
}
.wcpp-option-btn:hover {
	border-color: var(--wcpp-card-selected);
	transform:    translateY(-1px);
	box-shadow:   0 6px 20px -10px rgba(0,0,0,.3);
}
.wcpp-option-btn.wcpp-selected {
	border-color: var(--wcpp-card-selected);
	box-shadow:   inset 0 0 0 1.5px var(--wcpp-card-selected);
	background:   color-mix(in srgb, var(--wcpp-card-selected) 7%, #fff);
}

.wcpp-options--grid2 .wcpp-option-btn,
.wcpp-options--grid3 .wcpp-option-btn {
	flex-direction: column;
	text-align:     center;
	gap:            8px;
	padding:        12px 8px;
}

.wcpp-option-img-wrap {
	flex-shrink:   0;
	width:         var(--wcpp-img-size);
	height:        var(--wcpp-img-size);
	border-radius: calc(var(--wcpp-panel-radius) - 3px);
	overflow:      hidden;
	background:    #f5f3f0;
}
/* List mode: small thumbnail. Fit respects --wcpp-img-fit setting. */
#wcpp-panel .wcpp-option-img {
	width:      100% !important;
	height:     100% !important;
	object-fit: var(--wcpp-img-fit, cover) !important;
	display:    block !important;
}

/* Grid mode: configurable aspect ratio + fit. */
.wcpp-options--grid2 .wcpp-option-img-wrap,
.wcpp-options--grid3 .wcpp-option-img-wrap {
	width:        100%;
	height:       auto;
	aspect-ratio: var(--wcpp-img-aspect, 1 / 1);
}
#wcpp-panel .wcpp-options--grid2 .wcpp-option-img,
#wcpp-panel .wcpp-options--grid3 .wcpp-option-img {
	width:      100% !important;
	height:     100% !important;
	object-fit: var(--wcpp-img-fit, cover) !important;
}

/* ─── Toast notification (replaces window.alert) ─────────────────── */
.wcpp-toast {
	position:       fixed;
	left:           50%;
	bottom:         32px;
	transform:      translateX(-50%) translateY(24px);
	display:        flex;
	align-items:    center;
	gap:            10px;
	max-width:      90%;
	padding:        14px 22px;
	background:     #1a1a1a;
	color:          #fff;
	font-size:      14px;
	font-weight:    500;
	line-height:    1.4;
	border-radius:  12px;
	box-shadow:     0 16px 40px rgba(0, 0, 0, 0.32);
	z-index:        100001;
	opacity:        0;
	pointer-events: none;
	transition:     opacity .3s var(--wcpp-ease), transform .3s var(--wcpp-ease);
	font-family:    var(--wcpp-font);
}
.wcpp-toast.wcpp-toast--show {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}
.wcpp-toast__icon {
	flex-shrink: 0;
	font-size:   16px;
	color:       #f0c24b;
}
@media (max-width: 500px) {
	.wcpp-toast { bottom: 20px; width: calc(100% - 32px); justify-content: center; text-align: center; }
}

/* ─── Colour swatches ────────────────────────────────────────────── */
.wcpp-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       20px 16px;
}
.wcpp-swatch {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	cursor:         pointer;
	width:          68px;
	text-align:     center;
}
.wcpp-swatch__dot {
	width:         48px;
	height:        48px;
	border-radius: 50%;
	border:        1px solid rgba(0,0,0,.10);
	box-shadow:    inset 0 0 0 3px #fff;
	transition:    transform .2s var(--wcpp-ease), box-shadow .2s var(--wcpp-ease);
}
.wcpp-swatch:hover .wcpp-swatch__dot {
	transform:  scale(1.1);
	box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px rgba(0,0,0,.2);
}
.wcpp-swatch.wcpp-selected .wcpp-swatch__dot {
	box-shadow: inset 0 0 0 3px #fff, 0 0 0 2.5px var(--wcpp-card-selected);
	transform:  scale(1.1);
}
.wcpp-swatch__name {
	font-size:      12px;
	font-weight:    600;
	letter-spacing: .02em;
	color:          var(--wcpp-ink);
	line-height:    1.2;
}
.wcpp-swatch__price { font-size: 11px; color: var(--wcpp-muted); }

/* ─── Text-input step ────────────────────────────────────────────── */
.wcpp-text-wrap { position: relative; }
.wcpp-text-input {
	width:          100%;
	box-sizing:     border-box;
	padding:        13px 15px;
	font-size:      16px;
	font-family:    inherit;
	color:          var(--wcpp-ink);
	border:         1.5px solid var(--wcpp-card-border);
	border-radius:  var(--wcpp-panel-radius);
	background:     #fff;
	transition:     border-color .25s var(--wcpp-ease), box-shadow .25s var(--wcpp-ease);
}
.wcpp-text-input::placeholder { color: var(--wcpp-muted); opacity: .7; }
.wcpp-text-input:focus {
	outline:      none;
	border-color: var(--wcpp-card-selected);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--wcpp-card-selected) 16%, transparent);
}
.wcpp-text-counter {
	text-align:     right;
	font-size:      11px;
	letter-spacing: .04em;
	color:          var(--wcpp-muted);
	margin-top:     6px;
}
.wcpp-text-price {
	margin-top:  10px;
	font-size:   13px;
	font-weight: 600;
	color:       var(--wcpp-card-selected);
}

.wcpp-option-label-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wcpp-option-name  { font-size: 14px; font-weight: 600; color: var(--wcpp-ink); letter-spacing: -0.01em; }
.wcpp-option-price { font-size: 12px; color: var(--wcpp-muted); font-weight: 500; letter-spacing: .02em; }

.wcpp-option-tick {
	width:            22px;
	height:           22px;
	border-radius:    50%;
	background:       var(--wcpp-card-selected);
	color:            #fff;
	font-size:        13px;
	line-height:      22px;
	text-align:       center;
	flex-shrink:      0;
	opacity:          0;
	transform:        scale(.5);
	transition:       opacity .2s var(--wcpp-ease), transform .2s var(--wcpp-ease);
}
.wcpp-option-btn.wcpp-selected .wcpp-option-tick { opacity: 1; transform: scale(1); }
.wcpp-options--grid2 .wcpp-option-tick,
.wcpp-options--grid3 .wcpp-option-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; font-size: 12px; line-height: 20px; }

/* ─── Summary ────────────────────────────────────────────────────── */
.wcpp-summary-list { list-style: none; margin: 0; padding: 0; }
.wcpp-summary-item {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 0;
	border-bottom:   1px solid var(--wcpp-hair);
	gap:             12px;
}
.wcpp-summary-item:last-child { border-bottom: none; }
.wcpp-summary-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.wcpp-summary-img {
	width:         46px;
	height:        46px;
	object-fit:    cover;
	border-radius: calc(var(--wcpp-panel-radius) - 3px);
	flex-shrink:   0;
	background:    #f5f3f0;
}
.wcpp-summary-text { display: flex; flex-direction: column; gap: 3px; }
.wcpp-summary-label {
	font-size:      10px;
	color:          var(--wcpp-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight:    700;
}
.wcpp-summary-value { font-size: 14px; font-weight: 600; color: var(--wcpp-ink); }
.wcpp-summary-price { font-size: 12px; color: var(--wcpp-muted); font-weight: 600; white-space: nowrap; }
.wcpp-summary-total {
	margin-top:      18px;
	padding:         15px 18px;
	background:      #f5f3f0;
	border-radius:   var(--wcpp-panel-radius);
	font-size:       12px;
	letter-spacing:  .08em;
	text-transform:  uppercase;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	border:          1px solid var(--wcpp-hair);
	font-weight:     700;
}
.wcpp-summary-total strong { font-size: 16px; letter-spacing: 0; color: var(--wcpp-ink); }

/* ─── Footer ─────────────────────────────────────────────────────── */
.wcpp-panel__footer {
	padding:     16px 22px 22px;
	flex-shrink: 0;
	background:  var(--wcpp-panel-bg);
	box-shadow:  0 -1px 0 var(--wcpp-hair), 0 -16px 28px -14px rgba(0,0,0,.12);
}
.wcpp-panel__next,
.wcpp-panel__add-to-bag {
	width:          100%;
	padding:        var(--wcpp-footer-btn-pad);
	margin:         var(--wcpp-footer-btn-margin);
	font-size:      var(--wcpp-footer-btn-font);
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius:  var(--wcpp-footer-btn-radius);
	cursor:         pointer;
	min-height:     48px;
	background:     var(--wcpp-footer-btn);
	color:          #fff;
	border:         none;
	transition:     box-shadow .3s var(--wcpp-ease), transform .12s ease, opacity .2s ease;
	font-family:    inherit;
}
.wcpp-panel__next:hover,
.wcpp-panel__add-to-bag:hover { box-shadow: 0 12px 30px -8px var(--wcpp-footer-btn); transform: translateY(-1px); }
.wcpp-panel__next:active,
.wcpp-panel__add-to-bag:active { transform: translateY(0); box-shadow: none; }
.wcpp-panel__add-to-bag:disabled { opacity: 0.5; cursor: wait; box-shadow: none; transform: none; }

/* ─── Cart / non-returnable ──────────────────────────────────────── */
.wcpp-non-returnable {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	color:         #b3261e;
	font-weight:   600;
	font-size:     11px;
	background:    rgba(179, 38, 30, 0.07);
	padding:       4px 9px;
	border-radius: 4px;
	margin-top:    4px;
	border-left:   2px solid #b3261e;
}

/* ─── Step description subtitle ─────────────────────────────────── */
.wcpp-step__desc {
	margin:         -8px 0 14px;
	font-size:      13px;
	color:          var(--wcpp-muted);
	line-height:    1.5;
}

/* ─── Step-section inline error badge ───────────────────────────── */
.wcpp-step-section--error .wcpp-step__heading::after,
.wcpp-step-section--error .wcpp-step__head .wcpp-step__heading::after {
	content:        'Required';
	display:        inline-block;
	margin-left:    10px;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color:          #b3261e;
	background:     rgba(179,38,30,.08);
	padding:        3px 8px;
	border-radius:  4px;
	vertical-align: middle;
}

/* ─── Step locking (stacked mode — unlocks when previous step done) ─ */
.wcpp-step-section--locked {
	opacity:        0.32;
	pointer-events: none;
	user-select:    none;
	transition:     opacity .3s var(--wcpp-ease);
}
.wcpp-step-section--locked .wcpp-step__heading { color: var(--wcpp-muted); }

/* ─── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 500px) {
	#wcpp-panel          { width: 100% !important; }
	.wcpp-step__heading  { font-size: 19px; }
	.wcpp-panel__header  { padding: 14px 16px 12px; }
	.wcpp-panel__content { padding: 20px max(14px, calc(var(--wcpp-content-pad) - 6px)) 24px; }
	.wcpp-panel__footer  { padding: 12px 16px 20px; }
	.wcpp-swatches       { gap: 16px 12px; }
	.wcpp-swatch         { width: 60px; }
	.wcpp-option-btn     { min-height: 54px; }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	#wcpp-panel, .wcpp-overlay, .wcpp-options, .wcpp-summary-list,
	.wcpp-step__heading, .wcpp-option-btn { transition: none !important; animation: none !important; }
}

/* ─── Placement select + review (multi-placement) ─────────────────── */
.wcpp-placement-choice { justify-content: space-between; }
.wcpp-option-arrow { color: var(--wcpp-muted); font-size: 18px; }

.wcpp-review-placement {
	border:        1.5px solid var(--wcpp-hair);
	border-left:   3px solid var(--wcpp-card-selected);
	border-radius: var(--wcpp-panel-radius);
	padding:       0;
	margin-bottom: 12px;
	overflow:      hidden;
}
.wcpp-review-placement__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         10px 14px;
	background:      #f9f8f6;
	border-bottom:   1px solid var(--wcpp-hair);
}
.wcpp-review-placement .wcpp-summary-list {
	padding: 0 14px;
}
.wcpp-review-placement__name {
	font-weight:    700;
	font-size:      11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          var(--wcpp-ink);
}
.wcpp-review-actions { display: flex; align-items: center; gap: 4px; }
.wcpp-review-edit {
	background: none; border: none; cursor: pointer;
	color: var(--wcpp-card-selected); font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 5px;
	transition: background .2s;
}
.wcpp-review-edit:hover { background: color-mix(in srgb, var(--wcpp-card-selected) 10%, transparent); }
.wcpp-review-remove {
	background: none; border: none; cursor: pointer; padding: 0;
	color: var(--wcpp-muted); font-size: 13px; line-height: 1;
	width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background .2s, color .2s;
}
.wcpp-review-remove:hover { background: rgba(179,38,30,.08); color: #b3261e; }

.wcpp-summary-fee-line {
	display: flex; justify-content: space-between;
	padding: 10px 4px; font-size: 14px;
	border-top: 1px solid var(--wcpp-hair);
	margin-top: 4px;
}

.wcpp-add-another {
	width:          100%;
	background:     transparent;
	border:         1.5px dashed var(--wcpp-card-selected);
	color:          var(--wcpp-card-selected);
	border-radius:  var(--wcpp-panel-radius);
	padding:        13px;
	cursor:         pointer;
	font-size:      13px;
	font-weight:    700;
	letter-spacing: .04em;
	margin:         6px 0 10px;
	opacity:        .75;
	transition:     opacity .25s var(--wcpp-ease), background .25s var(--wcpp-ease);
}
.wcpp-add-another:hover { opacity: 1; background: color-mix(in srgb, var(--wcpp-card-selected) 6%, transparent); }

/* ─── Success screen ────────────────────────────────────────────── */
.wcpp-success {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      300px;
}

.wcpp-success__wrap {
	text-align: center;
	padding:    32px 24px;
	width:      100%;
}

.wcpp-success__icon {
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      var(--wcpp-card-selected);
	color:           #fff;
	font-size:       26px;
	line-height:     56px;
	margin:          0 auto 18px;
}

.wcpp-success__msg {
	font-size:     16px;
	font-weight:   600;
	color:         var(--wcpp-heading);
	margin:        0 0 28px;
	letter-spacing: .01em;
}

.wcpp-success__btns {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.wcpp-success__btn {
	display:       block;
	width:         100%;
	padding:       13px 20px;
	border-radius: var(--wcpp-panel-radius);
	font-size:     13px;
	font-weight:   700;
	letter-spacing: .05em;
	text-align:    center;
	cursor:        pointer;
	text-decoration: none;
	transition:    opacity .2s var(--wcpp-ease), background .2s var(--wcpp-ease);
	border:        none;
	font-family:   inherit;
}

.wcpp-success__btn--primary {
	background: var(--wcpp-footer-btn);
	color:      #fff;
}
.wcpp-success__btn--primary:hover { opacity: .88; color: #fff; }

.wcpp-success__btn--secondary {
	background: transparent;
	color:      var(--wcpp-footer-btn);
	border:     1.5px solid var(--wcpp-footer-btn);
}
.wcpp-success__btn--secondary:hover { background: color-mix(in srgb, var(--wcpp-footer-btn) 8%, transparent); }

.wcpp-success__btn--ghost {
	background: transparent;
	color:      var(--wcpp-meta);
	font-weight: 500;
	letter-spacing: .02em;
}
.wcpp-success__btn--ghost:hover { color: var(--wcpp-heading); }

/* ─── Confirm dialog (replaces browser confirm()) ──────────────── */
.wcpp-confirm {
	position:   absolute;
	inset:      0;
	background: rgba(0,0,0,.45);
	display:    flex;
	align-items: center;
	justify-content: center;
	z-index:    10;
	border-radius: var(--wcpp-panel-radius);
}

.wcpp-confirm__box {
	background:    var(--wcpp-panel-bg, #fff);
	border-radius: var(--wcpp-panel-radius);
	padding:       28px 24px 22px;
	margin:        0 20px;
	width:         100%;
	max-width:     320px;
	box-shadow:    0 8px 32px rgba(0,0,0,.18);
	text-align:    center;
}

.wcpp-confirm__msg {
	font-size:   14px;
	line-height: 1.5;
	color:       var(--wcpp-heading);
	margin:      0 0 22px;
}

.wcpp-confirm__btns {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.wcpp-confirm__btn {
	width:         100%;
	padding:       12px 16px;
	border-radius: var(--wcpp-panel-radius);
	font-size:     13px;
	font-weight:   700;
	letter-spacing: .04em;
	cursor:        pointer;
	font-family:   inherit;
	transition:    opacity .2s var(--wcpp-ease);
	border:        none;
}

.wcpp-confirm__btn--yes {
	background: #e53e3e;
	color:      #fff;
}
.wcpp-confirm__btn--yes:hover { opacity: .85; }

.wcpp-confirm__btn--no {
	background: transparent;
	color:      var(--wcpp-meta);
	border:     1.5px solid var(--wcpp-hair);
}
.wcpp-confirm__btn--no:hover { color: var(--wcpp-heading); }

.wcpp-success__note {
	font-size:     12px;
	color:         var(--wcpp-muted);
	margin:        -14px 0 22px;
	line-height:   1.5;
	padding:       10px 14px;
	background:    color-mix(in srgb, var(--wcpp-card-selected) 8%, transparent);
	border-radius: var(--wcpp-panel-radius);
	border-left:   3px solid var(--wcpp-card-selected);
}