.pf { --pf-accent: #6d4d97;
--pf-press: #513a72;
--pf-soft: #f2ecf8;
--pf-soft-line: #e7ddf0;
--pf-line: #e3dce8;
--pf-tile-bg: #faf9fb;
--pf-ink: #241f2b;
--pf-muted: #6f6a77;
--pf-faint: #a29caf;
--pf-dot-line: #cdbfdc;
--pf-cta: #161616;
--pf-cta-hover: #2f2a37;
--pf-ok: #057a55; --pf-err: #c0392b;  --pf-font-h: var(--wp--preset--font-family--heading, Georgia, 'Times New Roman', serif);
--pf-fs-h: var(--wp--preset--font-size--medium, 1.15rem);
--pf-fs-base: var(--wp--preset--font-size--small, .9rem);
--pf-fs-mini: var(--wp--preset--font-size--x-small, .8rem);
--pf-fs-note: .75rem;  --pf-pad: .9rem 1.1rem;
--pf-radius: 5px;
--pf-radius-field: var(--wc-form-border-radius, 4px);
--pf-radius-btn: .33rem;
--pf-dot-size: 20px;
--pf-name-lh: 1.35;  max-width: 420px;
margin: 0 auto;
font-size: var(--pf-fs-base);
line-height: 1.5;
color: var(--pf-ink);
}
.pf *,
.pf *::before,
.pf *::after {
box-sizing: border-box;
} .pf-heading {
font-family: var(--pf-font-h);
font-size: var(--pf-fs-h);
font-style: italic;
font-weight: 400;
line-height: 1.25;
margin: 0 0 .35rem;
color: var(--pf-ink);
}
.pf-subheading {
font-size: var(--pf-fs-base);
line-height: 1.5;
color: var(--pf-muted);
margin: 0 0 1rem;
} .pf-tiles {
display: flex;
flex-direction: column;
gap: 8px; }
.pf-section {
margin-top: .75rem;
padding-top: 1.1rem;
border-top: 1px solid var(--pf-line);
}
.pf-section-h {
font-family: var(--pf-font-h);
font-size: var(--pf-fs-h);
font-weight: 400;
line-height: 1.3;
margin: 0 0 .2rem;
}
.pf-section-sub {
font-size: var(--pf-fs-base);
line-height: 1.5;
color: var(--pf-muted);
margin: 0;
}
.pf-tile {
display: flex;
gap: 12px;
align-items: flex-start;
padding: var(--pf-pad);
border: 1px solid var(--pf-line);
border-radius: var(--pf-radius);
background: var(--pf-tile-bg);
cursor: pointer;
user-select: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) {
.pf-tile:hover {
border-color: var(--pf-accent);
}
} .pf-tile.is-selected,
.pf-tile:has(.pf-radio:checked) {
background: var(--pf-soft);
border-color: var(--pf-accent);
box-shadow: 0 0 0 1px var(--pf-accent);
} .pf-radio {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
} .pf-dot {
flex: none;
width: var(--pf-dot-size);
height: var(--pf-dot-size); margin-top: calc((var(--pf-name-lh) * 1em - var(--pf-dot-size)) / 2);
border: 1.6px solid var(--pf-dot-line);
border-radius: 50%;
background-color: #fff;
transition: background-color .15s, border-color .15s;
}
.pf-tile.is-selected .pf-dot,
.pf-tile:has(.pf-radio:checked) .pf-dot {
border-color: var(--pf-accent);
background-color: var(--pf-accent);
background-image: radial-gradient(circle, #fff 0 4px, transparent 5px);
}
.pf-radio:focus-visible + .pf-dot {
outline: 1.5px solid var(--pf-accent);
outline-offset: 2px;
}
.pf-body {
flex: 1;
min-width: 0;
}
.pf-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
}
.pf-name {
font-size: var(--pf-fs-base);
font-weight: 500; line-height: var(--pf-name-lh);
color: var(--pf-ink);
overflow-wrap: anywhere;
}
.pf-badge {
flex: none;
font-size: .625rem;
font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
line-height: 1.6;
white-space: nowrap;
padding: 2px 7px;
border-radius: 2px;
background: var(--pf-accent);
color: #fff;
}
.pf-badge--dark {
background: var(--pf-cta);
}
.pf-desc {
display: block;
font-size: var(--pf-fs-mini);
line-height: 1.45;
color: var(--pf-muted);
margin-top: 3px;
}
.pf-unit {
display: block;
font-size: var(--pf-fs-note);
line-height: 1.45;
color: var(--pf-faint);
margin-top: 2px; } .pf-right {
flex: none;
text-align: right;
white-space: nowrap;
padding-left: 8px;
}
.pf-price {
display: block;
font-size: var(--pf-fs-base);
font-weight: 600;
line-height: var(--pf-name-lh);  }
.pf-old-price {
display: block;
font-size: var(--pf-fs-mini);
font-weight: 400;
line-height: 1.35;
color: var(--pf-faint);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
} .pf-old-price + .pf-price {
color: var(--pf-accent);
}
.pf-save {
display: block;
font-size: var(--pf-fs-note);
font-weight: 500;
line-height: 1.45;
color: var(--pf-ok);
margin-top: 2px;
}
.pf-save--grey {
color: var(--pf-faint);
} .pf-echo {
display: flex;
align-items: baseline;
gap: 10px;
background: var(--pf-soft);
border: 1px solid var(--pf-soft-line);
border-radius: var(--pf-radius);
padding: var(--pf-pad);
margin: 1.1rem 0 0;
}
.pf-echo-label {
flex: none;
font-size: .6875rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: #a39bac; }
.pf-echo-value { font-size: .8rem;
font-weight: 500;
line-height: 1.35;
} .pf-label {
display: block;
font-size: .875em; font-weight: 400;
line-height: 1.8;
color: var(--pf-muted);
margin: .5rem 0 0;
}
.pf-input,
.pf-textarea {
display: block;
width: 100%;
font-family: inherit;
font-size: var(--pf-fs-base);
line-height: 1.5;
color: var(--pf-ink);
background: #fff;
border: 1px solid var(--pf-line);
border-radius: var(--pf-radius-field);
padding: var(--pf-pad);
-webkit-appearance: none;
appearance: none;
}
.pf-textarea {
min-height: 88px; resize: vertical;
}
.pf-input:focus,
.pf-textarea:focus {
outline: none;
border-color: var(--pf-accent);
box-shadow: 0 0 0 3px rgba(109, 77, 151, .14);
}
.pf-input::placeholder,
.pf-textarea::placeholder {
color: var(--pf-faint);
} @media (max-width: 782px) {
.pf-input,
.pf-textarea {
font-size: 16px;
}
} .pf-submit {
display: block;
width: 100%;
margin-top: 1rem;
padding: .9em 1.1em; border: none;
border-radius: var(--pf-radius-btn);
background: var(--pf-cta);
color: #fff;
font-family: inherit;
font-size: var(--pf-fs-base);
font-weight: 500;
line-height: inherit;
cursor: pointer;
position: relative;
transition: background .15s; }
.pf-submit:hover {
background: var(--pf-cta-hover);
}
.pf-submit:disabled {
cursor: default;
opacity: .7;
}
.pf-submit-price {
opacity: 0.85;
}
.pf.is-loading .pf-submit-text {
visibility: hidden;
}
.pf.is-loading .pf-submit::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
border-radius: 50%;
animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin {
to { transform: rotate(360deg); }
} .pf-error {
font-size: .75rem;
line-height: 1.5;
color: var(--wp--preset--color--accent-3, var(--pf-err));
margin: .6rem 0 0;
text-align: center;
}
.pf-note {
font-size: var(--pf-fs-note); line-height: 1.5;
color: var(--wp--preset--color--contrast-3, #a4a4a4);
text-align: center;
margin: .5rem 0 0;
}
.pf-note a {
color: inherit;
} .pf-topic {
color: var(--pf-muted);
font-weight: 400;
} @media (prefers-reduced-motion: reduce) {
.pf-tile,
.pf-dot,
.pf-submit {
transition: none;
}
.pf.is-loading .pf-submit::after {
animation: none;
}
}