/** * =========================================================================== * THEME-DEFENSE LAYER * =========================================================================== * Every WordPress theme ships its own global styles for plain HTML tags — * label, h3/h4, input, button, svg — usually written for blog posts and * WooCommerce checkout forms, not for a compact app UI like this builder. * Those theme rules cascade into anything on the page, including this * widget, and on many themes they're strong enough (broad selectors, or * !important) to override the rules below it in the stylesheet — turning * pills into full-width blocks, shrinking or ballooning the SVG bottle, * recoloring the Add to Cart button, etc. That's the most common cause of * "it's all messed up" once this is dropped into a real site rather than * viewed as a standalone preview. * * Every rule in this file is scoped under .lapb-builder so nothing here * leaks out and affects the rest of the site, and the properties a theme * is most likely to fight over (display, box-sizing, margin, font, border, * background, width/height on the SVG) are marked !important so this * widget always renders the same way regardless of what theme it's * dropped into. If you ever want to intentionally re-theme the builder, * just edit the values here directly — the !important is there to beat * the THEME's cascade, not to stop you from editing this file. */ .lapb-builder, .lapb-builder * { box-sizing: border-box !important; } .lapb-builder { all: initial; display: block; max-width: 1180px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #0B1730 !important; text-align: left; } .lapb-builder * { font-family: inherit; } .lapb-builder p, .lapb-builder span, .lapb-builder div { background: none !important; } .lapb-builder ul, .lapb-builder ol { list-style: none !important; margin: 0 !important; padding: 0 !important; } .lapb-builder label { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; font-weight: normal !important; text-transform: none !important; background: none !important; border: none !important; width: auto !important; max-width: none !important; } .lapb-builder input[type="radio"], .lapb-builder input[type="checkbox"] { width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0; box-shadow: none !important; } .lapb-builder h3, .lapb-builder h4 { font-family: inherit !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: normal !important; border: none !important; background: none !important; color: #0B1730 !important; } .lapb-builder button { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; border-radius: 0; } .lapb-builder svg { max-width: none !important; vertical-align: middle; } .lapb-builder input:focus, .lapb-builder button:focus { outline-offset: 2px; } /* =========================================================================== * BUILDER STYLES * =========================================================================== */ .lapb-builder h3 { font-size: 18px !important; margin: 28px 0 12px !important; } .lapb-builder h4 { font-size: 15px !important; margin: 20px 0 10px !important; display: flex !important; align-items: center; gap: 8px; } .lapb-badge { font-size: 11px; text-transform: uppercase !important; letter-spacing: .05em; background: #C9A24B !important; color: #0B1730 !important; padding: 2px 8px; border-radius: 999px; } .lapb-layout { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; } @media (max-width: 860px) { .lapb-layout { grid-template-columns: 1fr !important; } } .lapb-controls { min-width: 0; } .lapb-visual { position: sticky; top: 16px; } @media (max-width: 860px) { .lapb-visual { position: static; } } .lapb-size-options { display: flex !important; gap: 12px; flex-wrap: wrap; } .lapb-pill { position: relative; display: inline-block !important; } .lapb-pill input { position: absolute; opacity: 0; } .lapb-pill span { display: inline-block !important; padding: 10px 22px; border: 2px solid #0B1730 !important; border-radius: 999px !important; cursor: pointer; font-weight: 600 !important; color: #0B1730 !important; background: #fff !important; } .lapb-pill input:checked + span { background: #0B1730 !important; color: #fff !important; } .lapb-step { margin-bottom: 8px; } .lapb-step .description { color: #666 !important; font-size: 13px !important; margin: 2px 0 8px !important; } .lapb-selected-count { font-size: 13px; font-weight: 600; color: #0B1730 !important; margin: 4px 0 14px; } .lapb-search-row { margin: 6px 0 14px; } .lapb-search { display: block !important; width: 100% !important; padding: 10px 14px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 14px !important; background: #fff !important; color: #0B1730 !important; } .lapb-search:focus { outline: none; border-color: #1E5FE0 !important; } .lapb-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .lapb-card { position: relative; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 12px 14px !important; cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; transition: border-color .15s, background .15s; background: #fff !important; } .lapb-card:hover { border-color: #1E5FE0 !important; } .lapb-card input { flex: 0 0 auto; pointer-events: none; } .lapb-card-name { font-size: 14px !important; flex: 1 1 auto; color: #0B1730 !important; } .lapb-card-rate { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; font-size: 11px !important; color: #888 !important; white-space: nowrap; } .lapb-card.lapb-selected { border-color: #C9A24B !important; background: #FBF6EC !important; } .lapb-card.lapb-selected .lapb-card-rate { color: #7a6326 !important; } .lapb-card.lapb-disabled { opacity: .4; pointer-events: none; } .lapb-card-niche { border-style: dashed !important; } .lapb-notes-lock-msg { display: none; font-size: 13px; font-weight: 600; color: #7a1f33 !important; background: #FBEEF0 !important; border: 1px solid #f0d3d8 !important; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; } .lapb-notes-step[data-locked="1"] .lapb-notes-lock-msg { display: block !important; } .lapb-notes-step[data-locked="1"] .lapb-grid[data-pool="note"] { opacity: .4; pointer-events: none; } /* --- Bottle visualization --- * A fixed 20% concentration means the true fragrance pool is always a * thin sliver of the whole bottle by volume — at literal physical scale * it renders as an unreadable 1-2px line. So the JS caps the filled * "zone" at 62% of the visible body when the pool is fully used (scaling * down as less is allocated), while proportions BETWEEN the fragrances * chosen stay exactly accurate to each other. The caption below makes * clear this is an illustrative composition preview, not literal * physical layering — that's what licenses the exaggeration. A dashed * line marks the pool's max-fill boundary. * * width/height are !important here because many themes apply a global * `svg { width: 100%; height: auto; }` responsive-image rule that would * otherwise stretch this fixed-viewBox bottle to the column's full width. */ .lapb-bottle-wrap { text-align: center; margin-bottom: 20px; } .lapb-bottle-svg { width: 150px !important; height: 300px !important; filter: drop-shadow(0 10px 14px rgba(11,23,48,.14)); } .lapb-bottle-outline { fill: none; stroke: #0B1730; stroke-width: 3; stroke-linejoin: round; } .lapb-bottle-cap-shape { fill: #0B1730; } .lapb-bottle-base-fill { fill: #EFE3CE; } .lapb-bottle-layer-rect { transition: y .15s ease, height .15s ease; stroke: #fff; stroke-width: 1; } .lapb-bottle-highlight { fill: #fff; opacity: .28; } .lapb-bottle-pool-line { stroke: #0B1730; stroke-width: 1; stroke-dasharray: 3 3; opacity: .35; } .lapb-bottle-caption { font-size: 12px !important; color: #777 !important; max-width: 270px; margin: 8px auto 0 !important; line-height: 1.4 !important; } .lapb-swatch { display: inline-block !important; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; flex: 0 0 auto; vertical-align: middle; } .lapb-alloc-name-row { display: flex !important; align-items: center; } /* --- Allocation panel --- */ .lapb-allocate { margin-bottom: 20px; } .lapb-allocate-notes { padding-top: 18px; border-top: 1px dashed #ddd; } .lapb-allocate-notes .description { color: #666 !important; font-size: 13px !important; margin: 2px 0 10px !important; } .lapb-remaining { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: #0B1730 !important; } .lapb-remaining-amt, .lapb-pool-amt { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; } .lapb-empty-hint { color: #888 !important; font-size: 13px !important; } .lapb-alloc-rows { display: flex !important; flex-direction: column; gap: 14px; } .lapb-alloc-row { border: 1px solid #eee !important; border-radius: 8px !important; padding: 10px 12px !important; background: #fff !important; } .lapb-alloc-head { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 6px; } .lapb-alloc-name { font-size: 13px !important; font-weight: 600 !important; color: #0B1730 !important; } .lapb-alloc-remove { background: none !important; border: none !important; color: #b00020 !important; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px !important; } .lapb-alloc-slider-row { display: flex !important; align-items: center; gap: 10px; } .lapb-alloc-slider { flex: 1 1 auto; accent-color: #1E5FE0; width: 100%; } .lapb-alloc-ml { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; font-size: 12px !important; min-width: 48px; text-align: right; color: #0B1730 !important; } .lapb-alloc-price { display: block !important; margin-top: 4px !important; font-size: 12px !important; color: #666 !important; font-family: 'IBM Plex Mono', 'Courier New', monospace !important; } .lapb-summary { margin-top: 0; border-top: 2px solid #0B1730 !important; padding-top: 18px; } .lapb-total-row { display: flex !important; justify-content: space-between; font-size: 20px !important; font-weight: 700 !important; margin: 10px 0 4px !important; color: #0B1730 !important; } .lapb-min-order-note { font-size: 12px !important; color: #7a6326 !important; margin: 0 0 14px !important; } .lapb-add-to-cart { display: block !important; background: #0B1730 !important; color: #fff !important; border: none !important; padding: 14px 24px !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 8px !important; cursor: pointer; width: 100% !important; line-height: 1.2 !important; text-decoration: none !important; } .lapb-add-to-cart:disabled { opacity: .5 !important; cursor: not-allowed; } .lapb-add-to-cart:not(:disabled):hover { background: #1E5FE0 !important; } .lapb-error { color: #b00020 !important; margin-top: 10px !important; font-size: 13px; } /* --- Small screens: tighter grid, smaller bottle, no sticky column --- */ @media (max-width: 480px) { .lapb-builder { font-size: 14px; } .lapb-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; gap: 8px; } .lapb-card { padding: 10px 12px !important; } .lapb-bottle-svg { width: 110px !important; height: 220px !important; } .lapb-total-row { font-size: 18px !important; } .lapb-add-to-cart { padding: 13px 20px !important; font-size: 15px !important; } .lapb-size-options { gap: 8px; } .lapb-pill span { padding: 9px 16px; } }