/** * Luss Product Configurator Frontend Style */ :root { --lpc-accent: #f16621; /* Laranja Luss */ --lpc-accent-hover: #e05510; --lpc-dark: #1f1f1f; --lpc-light-gray: #f8f9fa; --lpc-border-color: #e2e8f0; --lpc-border-color-active: #f16621; --lpc-text-dark: #2d3748; --lpc-text-light: #718096; --lpc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --lpc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --lpc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --lpc-radius: 8px; --lpc-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @font-face { font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url(../fonts/material-symbols.woff2) format('woff2'); } .material-icons-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* ============================================================ ANTI-FLICKER: hide WooCommerce base price on page load. The PHP body_class filter adds 'lpc-price-hidden' to on configurator product pages. JavaScript removes this class once the configured price is calculated, making it visible. Using a body class avoids !important and specificity fights. ============================================================ */ .lpc-price-hidden .summary .price, .lpc-price-hidden .entry-summary .price, .lpc-price-hidden .wd-single-price .price, .lpc-price-hidden .product-image-summary .price, .lpc-price-hidden .single_variation_wrap .price, .lpc-price-hidden .product_price { visibility: hidden; } /* Hide Measurement Price Calculator native element while price is hidden */ .lpc-price-hidden .price_calculator.wc-measurement-price-calculator, .lpc-price-hidden .price_calculator, .lpc-price-hidden .wc-measurement-price-calculator-price-table { display: none !important; } .lpc-wrapper { margin: 20px 0; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--lpc-text-dark); } .lpc-title { font-size: 1.25rem; font-weight: 700; color: var(--lpc-dark); margin-bottom: 20px; border-bottom: 2px solid var(--lpc-border-color); padding-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } /* SECTION DESIGN */ .lpc-section { margin-bottom: 25px; background: #ffffff; border-radius: var(--lpc-radius); padding: 16px; border: 1px solid var(--lpc-border-color); box-shadow: var(--lpc-shadow-sm); transition: var(--lpc-transition); } .lpc-section:hover { box-shadow: var(--lpc-shadow-md); } .lpc-section.hidden { display: none !important; } .lpc-section-header { display: flex; align-items: center; margin-bottom: 16px; gap: 10px; } .lpc-section-header.no-margin { margin-bottom: 0; } .lpc-step-num { width: 24px; height: 24px; background-color: var(--lpc-dark); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; } .lpc-section-title { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--lpc-dark); text-transform: uppercase; letter-spacing: 0.5px; } /* MEASUREMENT INPUTS STYLE */ .lpc-input-group { display: flex; flex-direction: column; gap: 6px; } .lpc-input-label { font-size: 0.8rem; font-weight: 600; color: var(--lpc-text-light); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; } .lpc-input-icon { display: inline-flex; align-items: center; justify-content: center; } .lpc-input-icon svg { width: 96px; height: 96px; display: block; } .lpc-input-field { width: 100%; padding: 10px 12px; border: 1px solid var(--lpc-border-color); border-radius: var(--lpc-radius); font-size: 0.9rem; color: var(--lpc-text-dark); background-color: #ffffff; transition: var(--lpc-transition); box-sizing: border-box; } .lpc-input-field::placeholder { color: var(--lpc-text-light); opacity: 0.6; } .lpc-input-field:focus { outline: none; border-color: var(--lpc-accent); box-shadow: 0 0 0 3px rgba(241, 102, 33, 0.15); } .lpc-input-wrapper { position: relative; display: flex; align-items: center; } .lpc-input-wrapper .lpc-input-field { padding-right: 36px; } .lpc-input-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--lpc-text-light); pointer-events: none; font-weight: 500; } .lpc-medidas-desc { margin-top: 15px; } /* TOOLTIP FIXED FONT INHERITANCE & CLIPPING PROTECTION */ .lpc-help-icon { color: var(--lpc-text-light); font-size: 1.1rem; cursor: help; position: relative; transition: var(--lpc-transition); display: inline-flex; align-items: center; } .lpc-help-icon:hover { color: var(--lpc-accent); } .lpc-help-icon::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%) translateY(5px); background: var(--lpc-dark); color: #ffffff; padding: 10px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 400; text-transform: none; width: 250px; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: var(--lpc-shadow-lg); transition: var(--lpc-transition); z-index: 999999 !important; line-height: 1.4; white-space: normal !important; word-wrap: break-word !important; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .lpc-help-icon:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* FABRIC CARD HELP (OVERFLOW PROOF) */ .lpc-card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; width: 100%; } .lpc-card-help { color: var(--lpc-text-light); font-size: 1.1rem; cursor: help; position: relative; transition: var(--lpc-transition); display: inline-flex; align-items: center; justify-content: center; z-index: 8; } .lpc-card-help:hover { color: var(--lpc-accent); } .lpc-card-help::after { content: attr(data-tooltip); position: absolute; bottom: 130%; right: -10px; transform: translateY(5px); background: var(--lpc-dark); color: #ffffff; padding: 10px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 400; text-transform: none; width: 200px; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: var(--lpc-shadow-lg); transition: var(--lpc-transition); z-index: 999999 !important; line-height: 1.4; white-space: normal !important; word-wrap: break-word !important; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .lpc-card-help:hover::after { opacity: 1; visibility: visible; transform: translateY(0); } /* GRIDS */ .lpc-fabric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .lpc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 576px) { .lpc-fabric-grid { grid-template-columns: 1fr; } } /* CARDS DESIGN - OVERFLOW VISIBLE FOR TOOLTIPS */ .lpc-fabric-card, .lpc-drive-card, .lpc-control-card, .lpc-voltage-card, .lpc-side-card, .lpc-roll-card, .lpc-rollsize-card { border: 1px solid var(--lpc-border-color); border-radius: var(--lpc-radius); overflow: visible !important; /* Allow tooltips to extend beyond card */ cursor: pointer; background: #ffffff; transition: var(--lpc-transition); position: relative; display: flex; flex-direction: column; } .lpc-fabric-card:hover, .lpc-drive-card:hover, .lpc-control-card:hover, .lpc-voltage-card:hover, .lpc-side-card:hover, .lpc-roll-card:hover, .lpc-rollsize-card:hover { transform: translateY(-2px); border-color: var(--lpc-accent); box-shadow: var(--lpc-shadow-md); } /* Active State - Checkmark positioned overlapping border to avoid inner text overlays */ .lpc-fabric-card.active, .lpc-drive-card.active, .lpc-control-card.active, .lpc-voltage-card.active, .lpc-side-card.active, .lpc-roll-card.active, .lpc-rollsize-card.active { border-color: var(--lpc-border-color-active); background-color: rgba(241, 102, 33, 0.02); box-shadow: 0 0 0 1px var(--lpc-accent); } .lpc-fabric-card.active::before, .lpc-drive-card.active::before, .lpc-control-card.active::before, .lpc-voltage-card.active::before, .lpc-side-card.active::before, .lpc-roll-card.active::before, .lpc-rollsize-card.active::before { content: "✓"; position: absolute; top: -8px; right: -8px; background: var(--lpc-accent); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; z-index: 15; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Card images - Border radius applied manually due to overflow:visible */ .lpc-card-img { height: 80px; background-size: cover; background-position: center; background-color: var(--lpc-light-gray); border-bottom: 1px solid var(--lpc-border-color); border-top-left-radius: calc(var(--lpc-radius) - 1px); border-top-right-radius: calc(var(--lpc-radius) - 1px); } .lpc-card-content { padding: 12px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .lpc-card-name { font-weight: 600; font-size: 0.85rem; color: var(--lpc-dark); } .lpc-card-desc { font-size: 0.75rem; color: var(--lpc-text-light); line-height: 1.3; } .lpc-card-price-badge { font-size: 0.75rem; color: var(--lpc-accent); font-weight: 700; margin-top: 6px; } .lpc-card-icon { color: var(--lpc-text-light); margin: 8px 0 12px 0; display: flex; align-items: center; justify-content: center; width: 100%; } .lpc-card-icon svg { width: 90px; height: 90px; display: block; transition: var(--lpc-transition); } .lpc-drive-card.active .lpc-card-icon svg, .lpc-side-card.active .lpc-card-icon svg, .lpc-roll-card.active .lpc-card-icon svg { transform: scale(1.05); } .lpc-drive-card.active .lpc-card-icon, .lpc-side-card.active .lpc-card-icon, .lpc-roll-card.active .lpc-card-icon { color: var(--lpc-accent); } .lpc-drive-card, .lpc-side-card, .lpc-roll-card { align-items: center; text-align: center; padding: 18px 12px; } .lpc-drive-card, .lpc-control-card, .lpc-voltage-card, .lpc-side-card, .lpc-roll-card, .lpc-rollsize-card { padding: 12px; } /* COLOR SWATCHES WITH SHADOW HIGHLIGHT */ .lpc-color-swatches { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; } .lpc-color-swatch { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15) !important; cursor: pointer; position: relative; transition: var(--lpc-transition); padding: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), var(--lpc-shadow-sm); overflow: visible; } .lpc-color-swatch:hover { transform: scale(1.15); border-color: var(--lpc-accent) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), var(--lpc-shadow-md); } .lpc-color-swatch.active { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--lpc-accent), inset 0 1px 3px rgba(0, 0, 0, 0.1); } /* Swatch hidden because the color is not available for the selected fabric */ .lpc-color-swatch.lpc-swatch-hidden { display: none !important; } /* Orange circle checkmark — same visual language as the other cards */ .lpc-color-swatch.active::before { content: "✓"; position: absolute; top: -8px; right: -8px; background: var(--lpc-accent); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; z-index: 15; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .lpc-swatch-checkmark { display: none; /* hidden — replaced by ::before pseudo-element */ } .lpc-color-name-display { margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--lpc-text-light); } /* SUB PANELS */ .lpc-sub-panel { margin-top: 15px; border-left: 3px solid var(--lpc-accent); padding-left: 15px; animation: slideDown 0.3s ease; } .lpc-sub-section { margin-bottom: 15px; } .lpc-sub-title { font-size: 0.8rem; font-weight: 600; color: var(--lpc-text-light); text-transform: uppercase; margin: 0 0 8px 0; } .lpc-desc-hint { font-size: 0.72rem; color: var(--lpc-text-light); margin-top: 4px; } /* ACCORDION (ADVANCED OPTIONS) */ .lpc-accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 12px; background-color: var(--lpc-light-gray); border-radius: var(--lpc-radius); border: 1px solid var(--lpc-border-color); transition: var(--lpc-transition); } .lpc-accordion-header:hover { border-color: var(--lpc-accent); } .lpc-arrow-icon { transition: transform 0.3s ease; } .lpc-accordion-content { overflow: hidden; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); max-height: 0; } .lpc-accordion-content.open { max-height: 1000px; transition: max-height 0.3s ease-in-out; padding: 16px 8px 8px 8px; } .lpc-accordion-header.open .lpc-arrow-icon { transform: rotate(180deg); } /* BOXES (INFO / WARNING) */ .lpc-info-box { background-color: rgba(241, 102, 33, 0.03); border-left: 3px solid var(--lpc-accent); padding: 10px 14px; border-radius: 0 var(--lpc-radius) var(--lpc-radius) 0; font-size: 0.78rem; line-height: 1.4; color: #7a320c; margin-top: 12px; } .lpc-warning-box { background-color: #fffaf0; border-left: 3px solid #dd6b20; padding: 10px 14px; border-radius: 0 var(--lpc-radius) var(--lpc-radius) 0; font-size: 0.78rem; line-height: 1.4; color: #9c4221; margin-top: 12px; } /* SUMMARY PANEL with GLASSMORPHISM */ .lpc-summary-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(241, 102, 33, 0.15); border-radius: 12px; padding: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); margin-top: 25px; animation: fadeIn 0.4s ease; } .lpc-summary-title { font-weight: 700; font-size: 1rem; text-transform: uppercase; color: var(--lpc-dark); margin-bottom: 12px; letter-spacing: 0.5px; } .lpc-summary-list { list-style: none; padding: 0; margin: 0 0 15px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 0.8rem; border-bottom: 1px dashed var(--lpc-border-color); padding-bottom: 15px; } @media (max-width: 480px) { .lpc-summary-list { grid-template-columns: 1fr; } } .lpc-summary-list li { color: var(--lpc-text-dark); } .lpc-summary-list li.hidden { display: none !important; } .lpc-summary-list li span { font-weight: 600; color: var(--lpc-dark); } /* PRICE BREAKDOWN */ .lpc-price-breakdown { font-size: 0.82rem; display: flex; flex-direction: column; gap: 6px; } .price-row { display: flex; justify-content: space-between; color: var(--lpc-text-light); } .price-row span:last-child { font-weight: 600; color: var(--lpc-text-dark); } .lpc-total-row { border-top: 1px solid var(--lpc-border-color); padding-top: 10px; margin-top: 6px; font-size: 1.05rem; } .lpc-total-row span:first-child { font-weight: 700; color: var(--lpc-dark); } .lpc-total-row span:last-child { font-weight: 800; color: var(--lpc-accent); font-size: 1.15rem; } /* KEYFRAMES */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* DISABLED / LOCKED STATES */ .lpc-rollsize-card.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; background-color: var(--lpc-light-gray); border-color: var(--lpc-border-color); } .lpc-rollsize-card.disabled:hover { transform: none; box-shadow: none; border-color: var(--lpc-border-color); } /* ─── INLINE FIELD ERRORS ──────────────────────────────────────────────────── */ .lpc-input-field.lpc-input-error { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15); } .lpc-field-error { display: none; margin-top: 5px; font-size: 0.75rem; color: #c53030; font-weight: 500; padding: 4px 8px; background: #fff5f5; border-left: 3px solid #e53e3e; border-radius: 0 4px 4px 0; } /* ─── FORM ERROR BANNER ────────────────────────────────────────────────────── */ .lpc-form-error-banner { display: none; margin-bottom: 16px; padding: 14px 16px; background: #fff5f5; border: 1px solid #feb2b2; border-left: 4px solid #e53e3e; border-radius: var(--lpc-radius); color: #742a2a; font-size: 0.82rem; line-height: 1.5; display: flex; align-items: flex-start; gap: 10px; animation: fadeIn 0.2s ease; } .lpc-form-error-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; } .lpc-form-error-list { margin: 6px 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; } /* ======================================== MEASUREMENT TUTORIAL ======================================== */ .lpc-tutorial-trigger { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 14px; background: transparent; border: 1px dashed var(--lpc-accent); border-radius: var(--lpc-radius); color: var(--lpc-accent); font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--lpc-transition); text-align: left; } .lpc-tutorial-trigger:hover { background-color: rgba(241, 102, 33, 0.05); border-style: solid; } .lpc-tutorial-trigger .material-icons-outlined:first-child { font-size: 1.1rem; } .lpc-tutorial-arrow { margin-left: auto; font-size: 1.1rem !important; transition: transform 0.3s ease; } .lpc-tutorial-trigger[aria-expanded="true"] .lpc-tutorial-arrow { transform: rotate(180deg); } /* Panel */ .lpc-tutorial-content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .lpc-tutorial-content.open { max-height: 900px; opacity: 1; transition: max-height 0.45s ease-in-out, opacity 0.3s ease 0.05s; } /* Two-column grid */ .lpc-tutorial-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } @media (max-width: 580px) { .lpc-tutorial-grid { grid-template-columns: 1fr; } } /* Tutorial cards */ .lpc-tutorial-card { border: 1px solid var(--lpc-border-color); border-radius: var(--lpc-radius); overflow: hidden; background: #fff; } .lpc-tutorial-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 0.82rem; flex-wrap: wrap; } .lpc-tutorial-card-header .material-icons-outlined { font-size: 1.1rem; } /* External — orange */ .lpc-tutorial-external { background: rgba(241, 102, 33, 0.07); border-bottom: 1px solid rgba(241, 102, 33, 0.2); color: #b84e10; } /* Internal — blue */ .lpc-tutorial-internal { background: rgba(59, 130, 246, 0.07); border-bottom: 1px solid rgba(59, 130, 246, 0.2); color: #1e4fa0; } .lpc-tutorial-badge { margin-left: auto; background: rgba(241, 102, 33, 0.15); color: #b84e10; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .lpc-tutorial-badge-blue { background: rgba(59, 130, 246, 0.15); color: #1e4fa0; } /* Card body */ .lpc-tutorial-card-body { padding: 12px; } .lpc-tutorial-card-body p { font-size: 0.78rem; color: var(--lpc-text-light); line-height: 1.5; margin: 0 0 10px 0; } /* Steps list */ .lpc-tutorial-steps { list-style: none; padding: 0; margin: 0 0 12px 0; display: flex; flex-direction: column; gap: 7px; } .lpc-tutorial-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--lpc-text-dark); line-height: 1.4; } .lpc-tutorial-step-num { flex-shrink: 0; width: 20px; height: 20px; background: var(--lpc-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; margin-top: 1px; } .lpc-step-blue { background: #3b82f6; } /* Formula box */ .lpc-tutorial-formula { display: flex; align-items: center; gap: 6px; background: rgba(241, 102, 33, 0.06); border-left: 3px solid var(--lpc-accent); border-radius: 0 var(--lpc-radius) var(--lpc-radius) 0; padding: 8px 10px; font-size: 0.75rem; color: #7a320c; line-height: 1.4; } .lpc-tutorial-formula .material-icons-outlined { font-size: 1rem; flex-shrink: 0; color: var(--lpc-accent); } .lpc-formula-blue { background: rgba(59, 130, 246, 0.06); border-left-color: #3b82f6; color: #1e4fa0; } .lpc-formula-blue .material-icons-outlined { color: #3b82f6; } /* Tip bar */ .lpc-tutorial-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--lpc-radius); font-size: 0.78rem; color: #92400e; line-height: 1.45; } .lpc-tutorial-tip .material-icons-outlined { font-size: 1.1rem; color: #f59e0b; flex-shrink: 0; margin-top: 1px; } /* ======================================== CUSTOM PRODUCT PRICE STYLES (SHOP LOOP & SINGLE) ======================================== */ .lpc-custom-price-wrapper { display: inline-flex; flex-direction: column; gap: 6px; margin: 8px 0; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; align-items: center; } .lpc-price-comparison-row { display: flex; align-items: center; gap: 8px; } .lpc-old-price { font-size: 0.9rem !important; color: #a0aec0 !important; text-decoration: line-through !important; } .lpc-old-price .amount, .lpc-old-price bdi { color: #a0aec0 !important; text-decoration: line-through !important; } .lpc-discount-badge { background-color: var(--lpc-accent); color: #ffffff !important; font-size: 0.72rem !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; text-transform: uppercase !important; } .lpc-main-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .lpc-price-label { font-size: 0.95rem !important; font-weight: 600 !important; color: #2d3748 !important; } .lpc-new-price { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--lpc-accent) !important; text-decoration: none !important; } .lpc-new-price .amount, .lpc-new-price bdi { color: var(--lpc-accent) !important; text-decoration: none !important; } /* Woodmart loops spacing fix */ .wd-quick-shop .lpc-custom-price-wrapper { margin-top: 10px; } /* ── Installments & Pix rows (single product page) ───────────────────── */ .lpc-installments-row, .lpc-incash-row { display: flex; align-items: center; gap: 6px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; line-height: 1.3; flex-wrap: wrap; } .lpc-installments-row { margin-top: 4px; font-size: 0.9rem !important; color: var(--lpc-text-dark) !important; } .lpc-installments-prefix, .lpc-installments-suffix { color: var(--lpc-text-light) !important; font-size: 0.85rem !important; } .lpc-installments-value { color: var(--lpc-text-dark) !important; font-size: 0.9rem !important; } .lpc-installments-value strong { font-weight: 700 !important; color: var(--lpc-text-dark) !important; } .lpc-installments-value .amount, .lpc-installments-value bdi { color: var(--lpc-text-dark) !important; } /* Pix / in-cash row */ /* .lpc-incash-row { margin-top: 4px; padding: 5px 10px; background: #f0faf4; border-radius: 6px; border-left: 3px solid #38a169; display: inline-flex; } .lpc-incash-prefix { font-size: 0.82rem !important; font-weight: 600 !important; color: #2f855a !important; text-transform: uppercase; letter-spacing: 0.3px; } .lpc-incash-value { font-size: 0.95rem !important; font-weight: 800 !important; color: #276749 !important; } .lpc-incash-value .amount, .lpc-incash-value bdi { color: #276749 !important; } .lpc-incash-suffix { font-size: 0.82rem !important; font-weight: 600 !important; color: #2f855a !important; } */ /* ── Price hierarchy: SHOP LOOP / LISTING only ─────────────────────────── .lpc-custom-price-wrapper only exists in the catalog/loop context. The single product page is NOT affected by these rules. ───────────────────────────────────────────────────────────────────── */ /* 1st level: main price — already the largest via .lpc-new-price */ /* 2nd level: PIX / in-cash */ .lpc-custom-price-wrapper .lpc-incash-row { margin-top: 3px; font-size: 1rem !important; color: var(--lpc-accent) !important; font-weight: 700 !important; } .lpc-custom-price-wrapper .lpc-incash-prefix { font-size: 0.88rem !important; font-weight: 600 !important; color: var(--lpc-text-dark) !important; } .lpc-custom-price-wrapper .lpc-incash-value { font-size: 1rem !important; font-weight: 800 !important; color: var(--lpc-accent) !important; } .lpc-custom-price-wrapper .lpc-incash-value .amount, .lpc-custom-price-wrapper .lpc-incash-value bdi { color: var(--lpc-accent) !important; font-size: 1rem !important; font-weight: 800 !important; } .lpc-custom-price-wrapper .lpc-incash-suffix { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--lpc-text-light) !important; } .lpc-custom-price-wrapper .lpc-incash-row .lpc-discount-badge { font-size: 0.68rem !important; } /* 3rd level: installments — smallest & muted */ .lpc-custom-price-wrapper .lpc-installments-row { margin-top: 1px; font-size: 0.78rem !important; color: var(--lpc-text-light) !important; } .lpc-custom-price-wrapper .lpc-installments-prefix, .lpc-custom-price-wrapper .lpc-installments-suffix { font-size: 0.78rem !important; color: var(--lpc-text-light) !important; } .lpc-custom-price-wrapper .lpc-installments-value { font-size: 0.78rem !important; color: var(--lpc-text-light) !important; } .lpc-custom-price-wrapper .lpc-installments-value strong { font-weight: 700 !important; color: var(--lpc-text-dark) !important; } .lpc-custom-price-wrapper .lpc-installments-value .amount, .lpc-custom-price-wrapper .lpc-installments-value bdi { font-size: 0.78rem !important; color: var(--lpc-text-light) !important; }