/* ProductFlex Frontend Styles — compiled from assets/css/src/frontend.scss */ /* Run: npm run build:css to recompile */ /* Color Picker field */ .productflex-fields-wrapper{margin:1.5em 0}.productflex-fields-wrapper .productflex-field{margin-bottom:1.25em}.productflex-fields-wrapper .productflex-field label{display:block;font-weight:600;margin-bottom:.4em}.productflex-fields-wrapper .productflex-field__input{width:100%;max-width:400px;border:1px solid #ddd;border-radius:4px;padding:.5em .75em;font-size:1em;box-sizing:border-box;transition:border-color .2s}.productflex-fields-wrapper .productflex-field__input:focus{border-color:#007cba;outline:2px solid rgba(0,124,186,.2);outline-offset:0}.productflex-fields-wrapper textarea.productflex-field__input{max-width:600px;resize:vertical}.productflex-fields-wrapper .productflex-field__description{display:block;font-size:.875em;color:#666;margin-top:.25em}.productflex-fields-wrapper .productflex-field__error{display:block;color:#cc1818;font-size:.875em;margin-top:.25em;min-height:1.2em}.productflex-fields-wrapper .productflex-field__radio-label,.productflex-fields-wrapper .productflex-field__checkbox-label{display:flex;align-items:center;gap:.4em;margin-bottom:.4em;font-weight:400;cursor:pointer}.productflex-fields-wrapper .productflex-field--required .productflex-required{color:#cc1818;margin-left:.2em}.productflex-fields-wrapper .productflex-field fieldset{border:none;margin:0;padding:0}.productflex-fields-wrapper .productflex-field fieldset legend{font-weight:600;margin-bottom:.4em}.productflex-fields-wrapper .productflex-field.has-error .productflex-field__input{border-color:#cc1818}.productflex-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:.75em 0}.productflex-swatches .productflex-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0;border:2px solid #ddd;background:#fff;cursor:pointer;transition:transform .15s,border-color .15s,opacity .15s;outline:none}.productflex-swatches .productflex-swatch:hover{transform:scale(1.08);border-color:#888}.productflex-swatches .productflex-swatch:focus-visible{outline:3px solid #007cba;outline-offset:2px}.productflex-swatches .productflex-swatch.is-selected{border-color:#333;border-width:2px}.productflex-swatches .productflex-swatch.is-selected .productflex-swatch__checkmark{position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:#333;border-radius:50%;display:flex;align-items:center;justify-content:center}.productflex-swatches .productflex-swatch.is-selected .productflex-swatch__checkmark::after{content:'✓';color:#fff;font-size:9px;line-height:1}.productflex-swatches .productflex-swatch[disabled],.productflex-swatches .productflex-swatch[aria-disabled=true]{opacity:.4;cursor:not-allowed}.productflex-swatches .productflex-swatch[disabled]::after,.productflex-swatches .productflex-swatch[aria-disabled=true]::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:rgba(0,0,0,.5);transform:rotate(-45deg)}.productflex-swatches .productflex-swatch__color{display:block;width:100%;height:100%;border-radius:inherit}.productflex-swatches .productflex-swatch__image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.productflex-swatches .productflex-swatch__label{font-size:.8em;font-weight:600;padding:.2em .4em;line-height:1}.productflex-swatches--circle .productflex-swatch{border-radius:50%}.productflex-swatches--rounded .productflex-swatch{border-radius:6px}.productflex-swatches--square .productflex-swatch{border-radius:0}.productflex-swatches--small .productflex-swatch{width:24px;height:24px}.productflex-swatches--medium .productflex-swatch{width:32px;height:32px}.productflex-swatches--large .productflex-swatch{width:40px;height:40px}.productflex-swatches .productflex-swatch[data-tooltip]{position:relative}.productflex-swatches .productflex-swatch[data-tooltip]::before{content:attr(data-tooltip);position:absolute;background:rgba(0,0,0,.8);color:#fff;font-size:.75em;padding:.3em .6em;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100}.productflex-swatches .productflex-swatch[data-tooltip-position=top]::before{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}.productflex-swatches .productflex-swatch[data-tooltip-position=bottom]::before{top:calc(100% + 6px);left:50%;transform:translateX(-50%)}.productflex-swatches .productflex-swatch[data-tooltip]:hover::before,.productflex-swatches .productflex-swatch[data-tooltip]:focus-visible::before{opacity:1}.productflex-swatches__selected-label{font-size:.875em;color:#555;margin-top:.3em;min-height:1.2em}.productflex-palette-reference{margin-bottom:.75em}.productflex-palette-reference__trigger{display:inline-flex;align-items:center;gap:.5em;background:none;border:1px solid #ddd;border-radius:4px;padding:.4em .75em;cursor:pointer;font-size:.875em;color:#007cba;transition:border-color .2s}.productflex-palette-reference__trigger:hover{border-color:#007cba}.productflex-palette-reference__thumb{width:32px;height:32px;object-fit:cover;border-radius:2px}.productflex-palette-reference__dialog{border:none;border-radius:8px;padding:1.5em;max-width:90vw;max-height:90vh;box-shadow:0 4px 20px rgba(0,0,0,.3)}.productflex-palette-reference__dialog::backdrop{background:rgba(0,0,0,.5)}.productflex-palette-reference__close{position:absolute;top:.5em;right:.75em;background:none;border:none;font-size:1.5em;cursor:pointer;color:#666}.productflex-palette-reference__close:hover{color:#000}.productflex-palette-reference__full-image{display:block;max-width:100%;height:auto}.productflex-order-meta{margin-top:.5em;font-size:.875em}.productflex-order-meta__list{margin:.3em 0 0;padding-left:1.25em;list-style:disc}.productflex-order-meta__list li{margin-bottom:.25em}.productflex-order-meta__label{font-weight:600}.variation>dt.variation-,.variation>dt.variation-Personalisation{display:none!important}.productflex-cart-personalisation__heading{display:block;font-weight:700;font-size:.875em;margin-bottom:.3em}.productflex-cart-personalisation__list{margin:0;padding-left:0;list-style:none}.productflex-cart-personalisation__list li{margin-bottom:.2em;font-size:.875em;line-height:1.6}.productflex-cart-field-label{font-weight:600} /* ── Number field spinners ────────────────────────────────────────────────── */ input.productflex-field__input--number{-webkit-appearance:auto;-moz-appearance:number-input;appearance:auto;max-width:200px} input.productflex-field__input--number::-webkit-inner-spin-button,input.productflex-field__input--number::-webkit-outer-spin-button{-webkit-appearance:auto;opacity:1} /* ── Colour Swatches field ────────────────────────────────────────────────── */ /* Reset fieldset/legend so they match the rest of the form */ .productflex-field--swatch fieldset{border:none;margin:0;padding:0} .productflex-field-legend{display:block;font-weight:600;margin-bottom:.4em;font-size:1em;padding:0} .productflex-field--swatch.productflex-field--required .productflex-field-legend .productflex-required{color:#cc1818;margin-left:.2em} /* Visually hidden radio — accessible but invisible */ .productflex-swatch-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Error state: outline the swatch grid */ .productflex-field--swatch.has-error .productflex-swatches{border:1px solid #cc1818;border-radius:8px;padding:6px} /* Selected label live region */ .productflex-field--swatch .productflex-swatches__selected-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Focus ring when tabbing to a swatch via keyboard */ .productflex-swatch:focus-within .productflex-swatch__color{outline:3px solid #007cba;outline-offset:2px} /* ── Color Picker ─────────────────────────────────────────────────────────── */ .productflex-color-picker-wrap{display:flex;align-items:center;gap:.6em;position:relative} /* Native input is hidden — triggered programmatically via swatch button click */ .productflex-color-input{position:absolute;top:0;left:0;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none} /* Visible colour swatch button — large, border-styled, background = selected colour */ .productflex-color-swatch-btn{display:inline-block;flex-shrink:0;width:60px;height:38px;padding:0;border:2px solid #d1d5db;border-radius:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s;background-clip:padding-box} .productflex-color-swatch-btn:hover{border-color:#9ca3af} .productflex-color-swatch-btn:focus{outline:none;border-color:#007cba;box-shadow:0 0 0 3px rgba(0,124,186,.2)} /* Editable hex text field */ .productflex-color-hex-input{width:96px;padding:.4em .65em;border:1px solid #d1d5db;border-radius:4px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;color:#374151;background:#fff;transition:border-color .2s} .productflex-color-hex-input:focus{border-color:#007cba;outline:2px solid rgba(0,124,186,.2);outline-offset:0} .productflex-color-hex-input.is-invalid{border-color:#ef4444} /* ── Live Text Preview ────────────────────────────────────────────────────── */ .pf-ltp-wrap{margin:1.25em 0 1.5em;overflow:visible} .pf-ltp-preview{font-size:2em;line-height:1.4;font-weight:700;color:#111827;word-break:break-word;min-height:1.6em;margin-bottom:.75em;padding:.45em .6em;display:block;box-sizing:border-box;overflow:visible;transition:color .1s;paint-order:stroke fill;-webkit-text-stroke:0px transparent;background:#fff;border-radius:4px} .pf-ltp-input-row{display:flex;flex-direction:column;gap:.35em} .pf-ltp-label{font-weight:600;font-size:.9375em} .pf-ltp-input{display:block;width:100%;padding:.5em .75em;border:1px solid #d1d5db;border-radius:4px;font-size:1em;box-sizing:border-box;transition:border-color .2s;background:#fff} .pf-ltp-input:focus{border-color:#007cba;outline:2px solid rgba(0,124,186,.2);outline-offset:0} .pf-ltp-counter{display:block;text-align:right;font-size:.8125em;color:#6b7280;margin-top:.2em} .pf-ltp-counter--warn{color:#dc2626;font-weight:600} /* ── Sticky preview (position:sticky, bounded by its parent container) ───── */ /* JS detaches .pf-ltp-preview from .pf-ltp-wrap and reinserts it before the */ /* wrap so the product form/summary is the sticky containing block. The wrap */ /* keeps only the input row in normal flow. Never reaches the footer. */ .pf-ltp-sticky{position:sticky;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.1)} .pf-ltp-wrap--preview-detached{margin-top:0} /* ── Font select picker (custom visual dropdown) ─────────────────────────── */ /* Trigger is a
(not