/* WooSync product page: volume slider, savings and branding (synced products). */
.ws-buy { --ws-red: #FF2E3E; --ws-ink: #0C0D0C; --ws-line: #E4E0D9; --ws-mut: #6B665D; --ws-paper: #FBF9F6; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 16px; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.ws-buy-sec { display: flex; flex-direction: column; gap: 8px; }
.ws-buy-l { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-mut); }
.ws-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-buy-qtyin { width: 96px; padding: 6px 10px; border: 1px solid var(--ws-line); border-radius: 6px; font: inherit; font-weight: 700; font-size: 1rem; text-align: right; }
.ws-buy-vol { display: grid; gap: 6px; }
.ws-buy-volcell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--ws-line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; line-height: 1.2; transition: border-color .2s ease; background-image: none !important; }
.ws-buy-volcell:hover { border-color: var(--ws-ink); }
.ws-buy-volcell.is-on { border-color: var(--client, var(--ws-red)); box-shadow: inset 0 0 0 1px var(--client, var(--ws-red)); }
.ws-buy-volcell .q { font-size: .72rem; font-weight: 700; color: var(--ws-mut); }
.ws-buy-volcell .p { font-size: .82rem; font-weight: 800; color: var(--ws-ink); }
.ws-buy-volcell .p .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.ws-buy-volcell .d { font-size: .68rem; font-weight: 700; color: var(--client, var(--ws-red)); }
#ws-buy-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--client, var(--ws-red)) var(--fill, 0%), var(--ws-line) var(--fill, 0%)); outline: none; margin: 6px 0 2px; }
#ws-buy-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--client, var(--ws-red)); box-shadow: 0 2px 8px rgba(12,13,12,.2); cursor: grab; }
#ws-buy-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--client, var(--ws-red)); cursor: grab; }
#ws-buy-slider:focus-visible { box-shadow: 0 0 0 3px rgba(255,46,62,.25); }
.ws-buy-scale { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ws-mut); font-variant-numeric: tabular-nums; }
.ws-buy-read { font-size: .95rem; color: var(--ws-ink); }
.ws-buy-read b { font-weight: 800; }
.ws-buy-off { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ws-accent2, var(--client, var(--ws-red))); color: var(--ws-accent2-ink, #fff); font-size: .72rem; font-weight: 700; }
.ws-buy-brand { padding: 12px 14px; border: 1px solid var(--ws-line); border-radius: 8px; background: var(--ws-paper); }
.ws-buy-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; margin: 0; }
.ws-buy-toggle input { width: 18px; height: 18px; accent-color: var(--client, var(--ws-red)); margin: 0; }
.ws-buy-toggle em { font-style: normal; font-weight: 400; color: var(--ws-mut); font-size: .82rem; }
.ws-buy-brandfields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.ws-buy-brandfields label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .78rem; font-weight: 700; color: var(--ws-mut); text-transform: uppercase; letter-spacing: .06em; }
.ws-buy-brandfields select { -webkit-appearance: none !important; appearance: none !important; font: inherit; font-size: .9rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ws-ink); padding: 8px 32px 8px 10px; border: 1px solid var(--ws-line) !important; border-radius: 6px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230C0D0C' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 12px center !important; background-size: 12px 8px !important; height: auto !important; line-height: 1.3; }
.ws-buy-brandread { grid-column: 1 / -1; font-size: .88rem; color: var(--ws-ink); }
.ws-buy-band { display: inline-block; margin-left: 6px; font-size: .72rem; color: var(--ws-mut); }
.ws-buy-total { border-top: 1px solid var(--ws-line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ws-buy-line { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--ws-ink); }
.ws-buy-line em { font-style: normal; color: var(--ws-mut); }
.ws-buy-grand { font-weight: 800; font-size: 1.05rem; padding-top: 6px; border-top: 1px dashed var(--ws-line); }
.ws-buy-save { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px; background: var(--ws-accent2, var(--client, var(--ws-red))); color: var(--ws-accent2-ink, #fff); margin-bottom: 4px; }
.ws-buy-save-l { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ws-buy-save-n { font-family: 'Sora', ui-sans-serif, sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ws-buy-save-s { font-size: .78rem; opacity: .85; }
@media (max-width: 600px) { .ws-buy-brandfields { grid-template-columns: 1fr; } }
.ws-buy-brand-note p { margin: 0; font-size: .88rem; color: var(--ws-ink); }