.<?php echo esc_attr($unique_id); ?>-wrapper { font-family: sans-serif; max-width: 100%; margin: 0 auto; } .<?php echo esc_attr($unique_id); ?>-headline { font-size: 28px !important; font-weight: 500 !important; color: #333; margin-bottom: 25px; text-align: left; } .<?php echo esc_attr($unique_id); ?>-container { display: flex; flex-direction: column; gap: 15px; } .<?php echo esc_attr($unique_id); ?>-mobile-layout { display: none; } .<?php echo esc_attr($unique_id); ?>-product-card { position: relative; border-radius: 8px; border: 1px solid #e0e0e0; overflow: hidden; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 20px; } .<?php echo esc_attr($unique_id); ?>-three-col-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .<?php echo esc_attr($unique_id); ?>-col-1, .<?php echo esc_attr($unique_id); ?>-col-2, .<?php echo esc_attr($unique_id); ?>-col-3 { flex: 1 1 auto; } .<?php echo esc_attr($unique_id); ?>-product-label { background-color: var(--wp--preset--color--custom-cor-1, #d4b1a2) !important; color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; margin-bottom: 10px; display: inline-block; } .<?php echo esc_attr($unique_id); ?>-product-number { font-size: 60px; font-weight: bold; color: #000; line-height: 1; margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-image-container { margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-image { max-height: 100px; width: auto; height: auto; vertical-align: middle; } .<?php echo esc_attr($unique_id); ?>-product-title { font-size: 28px !important; font-weight: 500 !important; color: #000; margin: 0 0 15px 0 !important; text-align: left; } .<?php echo esc_attr($unique_id); ?>-product-title-link { color: #000; text-decoration: none; } .<?php echo esc_attr($unique_id); ?>-product-title-link:hover { text-decoration: underline; } .<?php echo esc_attr($unique_id); ?>-features { margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-features-list { padding: 0; margin: 0; list-style-type: none; } .<?php echo esc_attr($unique_id); ?>-feature-item { margin-bottom: 8px; display: flex; align-items: center; color: #000; font-size: 16px; } .<?php echo esc_attr($unique_id); ?>-feature-checkmark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #e8f5f0; color: #42b983; border-radius: 50%; margin-right: 10px; font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-feature-link { color: inherit; text-decoration: none; } .<?php echo esc_attr($unique_id); ?>-feature-link:hover { text-decoration: underline; } .<?php echo esc_attr($unique_id); ?>-pros-cons { margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-pros, .<?php echo esc_attr($unique_id); ?>-cons { margin-bottom: 10px; } .<?php echo esc_attr($unique_id); ?>-pros-list, .<?php echo esc_attr($unique_id); ?>-cons-list { padding: 0; margin: 0; list-style-type: none; } .<?php echo esc_attr($unique_id); ?>-pros-item, .<?php echo esc_attr($unique_id); ?>-cons-item { margin-bottom: 8px; display: flex; align-items: center; color: #000; font-size: 16px; } .<?php echo esc_attr($unique_id); ?>-pros-checkmark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #e8f5f0; color: #42b983; border-radius: 50%; margin-right: 10px; font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-cons-xmark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #ffebee; color: #e53935; border-radius: 50%; margin-right: 10px; font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-pros-link, .<?php echo esc_attr($unique_id); ?>-cons-link { color: inherit; text-decoration: none; } .<?php echo esc_attr($unique_id); ?>-pros-link:hover, .<?php echo esc_attr($unique_id); ?>-cons-link:hover { text-decoration: underline; } .<?php echo esc_attr($unique_id); ?>-rating-pill { display: inline-flex; align-items: unset; border-radius: 4px; overflow: hidden; border: 1px solid #ddd; height: 35px; margin-top: 5px; } .<?php echo esc_attr($unique_id); ?>-rating-left { background-color: var(--wp--preset--color--contrast-2); color: #fff; padding: 8px 12px; font-weight: bold; font-size: 16px; display: flex; align-items: center; justify-content: center; } .<?php echo esc_attr($unique_id); ?>-rating-right { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.0; gap: 2px; padding: 0; margin: 0; } .<?php echo esc_attr($unique_id); ?>-rating-text { font-size: 11px; font-weight: bold; color: #333; white-space: nowrap; } .<?php echo esc_attr($unique_id); ?>-rating-stars { font-size: 13px; color: gold; white-space: nowrap; } .<?php echo esc_attr($unique_id); ?>-star-full { color: gold; } .<?php echo esc_attr($unique_id); ?>-star-empty { color: #ddd; } .<?php echo esc_attr($unique_id); ?>-cta-container { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 15px; } .<?php echo esc_attr($unique_id); ?>-cta-button { display: block; padding: 18px 25px; padding-right: 40px; background-color: var(--wp--preset--color--contrast-2); color: white; text-decoration: none; font-weight: bold; border-radius: 6px; text-align: center; font-size: 16px; margin-bottom: 6px; position: relative; width: 100%; box-sizing: border-box; } .<?php echo esc_attr($unique_id); ?>-cta-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; } .<?php echo esc_attr($unique_id); ?>-cta-button:hover { opacity: 0.9; } .<?php echo esc_attr($unique_id); ?>-warning { font-size: 12px; color: #777; text-align: center; width: 100%; } .<?php echo esc_attr($unique_id); ?>-sticky-anchors { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #ddd; padding: 20px 0 8px 0; z-index: 1000; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); flex-direction: column; align-items: center; box-sizing: border-box; width: 100vw; max-width: 100vw; margin: 0; overflow-x: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s; visibility: hidden; padding-top: 20px; overflow: visible !important; } .<?php echo esc_attr($unique_id); ?>-sticky-anchors.show { opacity: 1 !important; transform: translateY(0) !important; visibility: visible !important; } .<?php echo esc_attr($unique_id); ?>-sticky-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: 18px; z-index: 50; background: #fff; border: 1px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 0; } @media (max-width: 768px) { .<?php echo esc_attr($unique_id); ?>-sticky-close { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-sticky-anchors { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; overflow-x: hidden !important; padding-bottom: 20px !important; } .<?php echo esc_attr($unique_id); ?>-sticky-inner { padding-left: 10px; padding-right: 10px; box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; } .<?php echo esc_attr($unique_id); ?>-sticky-anchor-text { font-size: 16px !important; max-width: 80vw; } .<?php echo esc_attr($unique_id); ?>-product-title { font-size: 28px !important; font-weight: 500 !important; margin-bottom: 15px; } } @media (max-width: 480px) { .<?php echo esc_attr($unique_id); ?>-sticky-close { width: 24px; height: 24px; font-size: 16px; } } .<?php echo esc_attr($unique_id); ?>-sticky-anchor { width: 100%; max-width: 600px; margin: 0 auto; } .<?php echo esc_attr($unique_id); ?>-sticky-inner { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .<?php echo esc_attr($unique_id); ?>-sticky-left { display: flex; align-items: center; gap: 10px; } .<?php echo esc_attr($unique_id); ?>-sticky-image { max-width: 60px; height: auto; } .<?php echo esc_attr($unique_id); ?>-sticky-anchor-text { font-size: 18px !important; font-weight: 500 !important; line-height: 1.2; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: normal; margin-bottom: 8px; } .<?php echo esc_attr($unique_id); ?>-sticky-center { flex: 1; justify-content: flex-end; text-align: right; } .<?php echo esc_attr($unique_id); ?>-sticky-right { flex: 0 0 auto; } .<?php echo esc_attr($unique_id); ?>-sticky-cta-button { display: inline-block; padding: 10px 30px; font-size: 16px; font-weight: bold; color: #fff; text-decoration: none; border-radius: 6px; text-align: center; box-sizing: border-box; padding-right: 40px; position: relative; } .<?php echo esc_attr($unique_id); ?>-cta-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .<?php echo esc_attr($unique_id); ?>-desktop-layout { display: none; } .<?php echo esc_attr($unique_id); ?>-mobile-layout { display: block; } .<?php echo esc_attr($unique_id); ?>-product-card { padding: 15px; } .<?php echo esc_attr($unique_id); ?>-sticky-inner { flex-direction: column; align-items: flex-start; } .<?php echo esc_attr($unique_id); ?>-sticky-mobile-row { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .<?php echo esc_attr($unique_id); ?>-sticky-center { flex: 0 0 auto; text-align: right; } .<?php echo esc_attr($unique_id); ?>-sticky-right { flex: 1; text-align: right; } .<?php echo esc_attr($unique_id); ?>-sticky-cta-button { width: 100%; margin-top: 4px; } .<?php echo esc_attr($unique_id); ?>-mobile-label-top { background-color: var(--wp--preset--color--contrast-2); color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; margin-bottom: 10px; display: inline-block; } .<?php echo esc_attr($unique_id); ?>-mobile-3-col-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .<?php echo esc_attr($unique_id); ?>-mobile-col-number { flex: 0 0 auto; font-size: 32px; font-weight: bold; text-align: left; } .<?php echo esc_attr($unique_id); ?>-mobile-col-image { flex: 1; text-align: center; } .<?php echo esc_attr($unique_id); ?>-mobile-col-rating { flex: 0 0 auto; text-align: right; } .<?php echo esc_attr($unique_id); ?>-mobile-content-below { margin-top: 10px; } .<?php echo esc_attr($unique_id); ?>-product-title { font-size: 28px !important; font-weight: 500 !important; margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-features { margin-bottom: 15px; } .<?php echo esc_attr($unique_id); ?>-feature-item { font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-pros-item, .<?php echo esc_attr($unique_id); ?>-cons-item { font-size: 14px; } .<?php echo esc_attr($unique_id); ?>-cta-button { background-color:var(--wp--preset--color--contrast-2); border-radius: 8px; } } @media (max-width: 480px) { .<?php echo esc_attr($unique_id); ?>-product-card { padding: 12px; } .<?php echo esc_attr($unique_id); ?>-mobile-col-number { font-size: 28px; } .<?php echo esc_attr($unique_id); ?>-rating-left { font-size: 14px; padding: 6px 8px; } .<?php echo esc_attr($unique_id); ?>-rating-right { padding: 6px 8px; } }