/* The box always takes its own full width row, so it never shares a line with the quantity box and button. */
.pfs-box { flex: 0 0 100%; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 1em; }
.pfs-field { margin: 0 0 .9em; }
.pfs-field label { display: block; font-weight: 600; margin-bottom: .3em; }
.pfs-field select { width: 100%; max-width: 28em; }

/* Quantity slider */
.pfs-slider { position: relative; max-width: 30em; padding: 2.1em 14px .5em; box-sizing: border-box; }
.pfs-bubble { position: absolute; top: 0; transform: translateX(-50%); min-width: 2.2em; padding: 2px 8px; border: 1px solid currentColor; border-radius: 4px; background: #fff; color: #222; font-weight: 700; font-size: .9em; text-align: center; white-space: nowrap; pointer-events: none; }
.pfs-range { display: block; width: 100%; margin: 0; padding: 0; height: 1.6em; cursor: pointer; accent-color: var(--pfs-accent, #1f6f50); background: transparent; }

.pfs-summary { margin: 0 0 .75em; display: flex; flex-wrap: wrap; gap: .2em 1.25em; align-items: baseline; }
.pfs-unit { font-size: 1.25em; font-weight: 700; }
.pfs-total { font-weight: 600; }
.pfs-setup { flex: 0 0 100%; font-size: .9em; }
.pfs-save { flex: 0 0 100%; color: #1f6f50; font-size: .9em; }
.pfs-warn { color: #b32d2e; font-weight: 600; }
.pfs-details { margin: 0 0 .5em; }
.pfs-details > summary { cursor: pointer; font-weight: 600; padding: .2em 0; }
.pfs-table { width: 100%; border-collapse: collapse; font-size: .9em; margin: .5em 0; }
.pfs-table th, .pfs-table td { border: 1px solid rgba(0, 0, 0, .12); padding: .4em .6em; text-align: left; }
.pfs-table caption { text-align: left; font-weight: 600; padding: 0 0 .3em; }
.pfs-table thead th { background: rgba(0, 0, 0, .04); }
.pfs-table tbody td { cursor: pointer; }
.pfs-table tbody td:hover { background: rgba(0, 0, 0, .05); }
.pfs-table .pfs-active { background: rgba(0, 120, 80, .12); }
.pfs-table thead th.pfs-active { background: rgba(0, 120, 80, .22); }
.pfs-table tbody tr.pfs-active td[data-opt].pfs-active { background: rgba(0, 120, 80, .3); font-weight: 700; }
.pfs-note { font-size: .85em; opacity: .75; margin: .25em 0; }
.pfs-template { margin: .25em 0 0; }
.pfs-form .woocommerce-variation-price { display: none; }
/* Themes often make the quantity box too narrow for numbers like 12,500. */
.pfs-form .quantity { flex: 0 0 auto; width: auto !important; max-width: none !important; }
.pfs-form .quantity input.qty { width: 7.5em !important; min-width: 7.5em !important; max-width: none !important; text-align: center; box-sizing: border-box; }
.pfs-from small { font-size: .8em; opacity: .75; }
.single_variation_wrap .pfs-box { clear: both; }
@media (max-width: 600px) {
	.pfs-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Cart and checkout: show large quantities in full instead of cutting them off. */
.wc-block-components-quantity-selector { width: auto !important; min-width: 7.5em; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { width: 5.5em !important; min-width: 5.5em !important; max-width: none !important; }
.woocommerce-cart-form .quantity input.qty { width: 6.5em !important; min-width: 6.5em !important; max-width: none !important; }

/* Photo row under the product image */
.pfs-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.pfs-thumb { flex: 0 0 auto; width: 68px; height: 68px; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; line-height: 0; opacity: .8; }
.pfs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfs-thumb:hover, .pfs-thumb:focus-visible { opacity: 1; }
.pfs-thumb.pfs-thumb-on { border-color: var(--pfs-accent, #1f6f50); opacity: 1; }