/* Product customization plugin — structural styles. Colours come from the active theme's tokens. */
.po-box {
    --po-primary: var(--color-theme-primary, var(--theme-primary, #4f46e5));
    --po-on-primary: var(--color-theme-on-primary, var(--theme-on-primary, #fff));
    --po-text: var(--color-theme-text, var(--theme-text, #18181b));
    --po-muted: var(--color-theme-muted, var(--theme-text-muted, #71717a));
    --po-border: var(--color-theme-border, var(--theme-border, #e4e4e7));
    --po-surface: var(--color-theme-surface, var(--theme-surface, #fff));
    margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--po-border); border-radius: 1rem; background: var(--po-surface); color: var(--po-text); font-size: .9375rem;
}
.po-box * { box-sizing: border-box; }
.po-box { margin-top: 1rem; padding: 1rem; font-size: .9rem; }
.po-box h4 { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; }
.po-field { display: flex; flex-direction: column; gap: .3rem; margin-top: .75rem; font-size: .875rem; font-weight: 600; }
.po-field input[type=text], .po-field textarea, .po-field select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--po-border); border-radius: .6rem; background: transparent; color: inherit; font: inherit; font-weight: 400; }
.po-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
.po-check input { accent-color: var(--po-primary); }
.po-price { color: var(--po-primary); font-weight: 600; }
.po-hint { color: var(--po-muted); font-size: .8125rem; font-weight: 400; }
.po-error { color: #b91c1c; font-size: .8125rem; font-weight: 400; }