/* OZB Product Fields — storefront styles. Restrained, inherits theme type. */ .ozb-pf-fields { margin: 0 0 1em; } .ozb-pf-fields.ozb-pf-group-empty { display: none; } .ozb-pf-field { margin: 0 0 0.85em; } .ozb-pf-field.ozb-pf-hidden { display: none; } .ozb-pf-label { display: block; font-weight: 600; margin-bottom: 0.25em; } .ozb-pf-label--checkbox { font-weight: 600; cursor: pointer; } .ozb-pf-label .required { color: #b20000; text-decoration: none; border: 0; } .ozb-pf-input { width: 100%; max-width: 100%; box-sizing: border-box; } .ozb-pf-choices { display: block; } .ozb-pf-choice { display: block; margin: 0.2em 0; font-weight: 400; cursor: pointer; } .ozb-pf-heading { margin: 0.5em 0 0.25em; } .ozb-pf-paragraph { font-size: 0.92em; color: inherit; opacity: 0.85; margin: 0.25em 0; } .ozb-pf-paragraph p:last-child { margin-bottom: 0; } .ozb-pf-image { margin: 0.25em 0; } .ozb-pf-image img { max-width: 100%; height: auto; display: block; } .ozb-pf-tooltip { display: block; opacity: 0.7; margin-top: 0.15em; } .ozb-pf-counter { display: block; text-align: right; opacity: 0.6; font-size: 0.85em; margin-top: 0.1em; } .ozb-pf-price-badge { font-weight: 400; opacity: 0.75; font-size: 0.92em; } /* ------------------------------------------------------------------ */ /* Options box polish — keeps the dashed "engraving available" signal */ /* but refines it. Doubled selectors out-rank the Customizer's legacy */ /* .fpf-* rules (which print later in and win specificity ties).*/ /* ------------------------------------------------------------------ */ .ozb-pf-fields.fpf-fields { border: 2px dashed #1f1f1f; border-radius: 8px; padding: 22px 24px 16px; margin: 1.2em 0 1em; background: #fff; } /* Bigger, brand-red checkboxes (were 13px native). */ .ozb-pf-fields input[type="checkbox"], .ozb-pf-fields input[type="radio"] { width: 22px; height: 22px; accent-color: #ba0000; cursor: pointer; flex: 0 0 auto; margin: 0; } .ozb-pf-fields .ozb-pf-label--checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; } /* Field rhythm inside the box. */ .ozb-pf-fields .ozb-pf-field.ozb-pf-field--checkbox, .ozb-pf-fields .ozb-pf-field.ozb-pf-field--select, .ozb-pf-fields .ozb-pf-field.ozb-pf-field--text, .ozb-pf-fields .ozb-pf-field.ozb-pf-field--textarea { margin: 0 0 18px; } /* Helper paragraphs: quieter, easier to scan. */ .ozb-pf-fields .ozb-pf-paragraph { font-size: 0.88em; line-height: 1.55; color: #6b6b6b; margin: -6px 0 16px; } /* Price badge slightly muted so the option name leads. */ .ozb-pf-fields .ozb-pf-price-badge { color: #767676; font-weight: 600; } @media ( max-width: 549px ) { .ozb-pf-fields.fpf-fields { padding: 16px 14px 10px; } } /* Engraving font preview — fluid sizes replace the Customizer's fixed 60px/40px so the preview is bigger on desktop and scales cleanly on phones. front.js shrinks it further if a long name would overflow. */ .ozb-pf-fields .engrspecialfonts .ozb-pf-input { /* Hublland's glyphs are small within their em box — the floor must be generous or the preview reads tiny on phones. */ font-family: hublland; font-size: clamp( 52px, 6vw, 80px ); line-height: 1.2; text-align: center; height: auto; padding: 16px 12px; } .ozb-pf-fields .bladeupper .ozb-pf-input { font-family: "army rust"; text-transform: uppercase; font-size: clamp( 32px, 4.5vw, 54px ); line-height: 1.25; text-align: center; height: auto; padding: 16px 12px; } /* Totals breakdown — FPF's dl layout (site CSS bolds it via .fpf-totals). */ .ozb-pf-total { margin: 0.4em 0 0.6em; } .ozb-pf-total dl { margin: 0 0 1em; overflow: hidden; } .ozb-pf-total dl:empty { display: none; } .ozb-pf-total dt { clear: left; float: left; width: 50%; font-weight: inherit; } .ozb-pf-total dd { float: left; margin: 0; }