.fppb-root {
clear: both;
}
.fppb-block {
margin-top: 24px;
margin-bottom: 12px;
width: 100%;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.025);
box-sizing: border-box;
overflow: hidden;
}
.fppb-block:hover {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.fppb-promo-box {
background: #f8f9fa;
border: 0;
border-radius: 9px;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: none;
box-sizing: border-box;
}
.fppb-align-split .fppb-promo-box { justify-content: space-between; }
.fppb-align-left .fppb-promo-box { justify-content: flex-start; text-align: left; }
.fppb-align-center .fppb-promo-box { flex-direction: column; justify-content: center; text-align: center; }
.fppb-align-right .fppb-promo-box { justify-content: flex-end; text-align: right; }
.fppb-promo-copy,
.fppb-copy-set {
display: flex;
flex-direction: column;
min-width: 0;
}
.fppb-copy-mobile,
.fppb-button-text-mobile {
display: none;
}
.fppb-eyebrow {
font-size: 18px;
color: #1b5e20;
text-transform: uppercase;
font-weight: 800;
letter-spacing: .5px;
margin-bottom: 4px;
}
.fppb-title {
font-size: 15px;
color: #111827;
font-weight: 600;
line-height: 1.25;
}
.fppb-button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #1b5e20;
color: #fff !important;
padding: 10px 18px;
border-radius: 7px;
text-decoration: none !important;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
transition: background-color .2s ease, transform .1s ease;
box-shadow: none !important;
border: 0 !important;
}
.fppb-button:hover {
background: #124015;
color: #fff !important;
transform: translateY(-1px);
}
.fppb-slider {
position: relative;
margin-top: 12px;
border: 0;
border-top: 1px solid #e5e7eb;
border-radius: 0;
background: transparent;
overflow: hidden;
padding-top: 8px;
}
.fppb-slider:first-child {
margin-top: 0;
border-top: 0;
}
.fppb-slider-head {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 34px 12px;
font-weight: 800;
color: inherit;
}
.fppb-slider-viewport {
overflow: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
margin: 0 26px;
touch-action: pan-y;
cursor: grab;
}
.fppb-slider-viewport:active {
cursor: grabbing;
}
.fppb-slider-viewport::-webkit-scrollbar {
display: none;
}
.fppb-slider-track {
display: flex;
gap: 8px;
will-change: scroll-position;
}
.fppb-product-card {
display: flex !important;
gap: 10px;
padding: 12px;
color: inherit;
text-decoration: none !important;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-sizing: border-box;
background: #fff;
flex: 0 0 calc((100% - 8px) / 2) !important;
min-width: calc((100% - 8px) / 2) !important;
max-width: calc((100% - 8px) / 2) !important;
}
.fppb-product-card:hover {
background: #f8f9fa;
text-decoration: none !important;
}
.fppb-product-image {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 8px;
overflow: hidden;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
}
.fppb-product-image img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.fppb-product-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.fppb-product-title {
font-size: 13px;
font-weight: 700;
color: inherit;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fppb-product-price {
display: block;
}
.fppb-slider-arrow {
position: absolute !important;
top: 58% !important;
transform: translateY(-50%) !important;
z-index: 2;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111827 !important;
font-size: 34px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer;
opacity: .8;
}
.fppb-slider-arrow:hover {
opacity: 1;
background: transparent !important;
}
.fppb-slider-prev { left: 3px !important; }
.fppb-slider-next { right: 3px !important; }
@media (max-width: 480px) {
.fppb-block {
padding: 10px;
border-radius: 11px;
}
.fppb-promo-box,
.fppb-align-split .fppb-promo-box,
.fppb-align-left .fppb-promo-box,
.fppb-align-right .fppb-promo-box {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 18px 14px;
}
.fppb-copy-desktop,
.fppb-button-text-desktop {
display: none;
}
.fppb-copy-mobile,
.fppb-button-text-mobile {
display: flex;
}
.fppb-button-text-mobile {
display: inline;
}
.fppb-eyebrow { font-size: 19px; }
.fppb-title { font-size: 15px; }
.fppb-button {
width: 100%;
font-size: 15px;
padding: 12px 18px;
box-sizing: border-box;
}
.fppb-slider-head {
padding: 6px 30px 10px;
}
.fppb-slider-viewport {
margin: 0 20px;
}
.fppb-slider-track {
gap: 6px;
}
.fppb-product-card {
flex: 0 0 calc((100% - 6px) / 2) !important;
min-width: calc((100% - 6px) / 2) !important;
max-width: calc((100% - 6px) / 2) !important;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 10px 8px;
min-height: 180px;
}
.fppb-product-image {
width: 72px;
height: 72px;
flex: 0 0 72px;
}
.fppb-product-title {
font-size: 12px;
}
.fppb-slider-arrow {
font-size: 32px !important;
top: 60% !important;
}
}
.fppb-slider-track {
transform: translate3d(0, 0, 0);
will-change: transform;
}
.fppb-slider-viewport.is-dragging {
cursor: grabbing;
user-select: none;
}
.fppb-slider-track {
transform: translate3d(0, 0, 0);
will-change: transform;
}
.fppb-slider-viewport,
.fppb-slider-viewport * {
-webkit-user-drag: none;
}
.fppb-slider-viewport {
touch-action: pan-y;
cursor: grab;
}
.fppb-slider-viewport.is-dragging {
cursor: grabbing;
user-select: none;
}
.fppb-slider {
--fppb-slider-gap: 10px;
--fppb-slider-peek: 22px;
}
.fppb-slider-track {
gap: var(--fppb-slider-gap) !important;
}
.fppb-product-card {
flex: 0 0 calc((100% - var(--fppb-slider-peek) - var(--fppb-slider-peek) - var(--fppb-slider-gap) - var(--fppb-slider-gap)) / 2) !important;
min-width: calc((100% - var(--fppb-slider-peek) - var(--fppb-slider-peek) - var(--fppb-slider-gap) - var(--fppb-slider-gap)) / 2) !important;
max-width: calc((100% - var(--fppb-slider-peek) - var(--fppb-slider-peek) - var(--fppb-slider-gap) - var(--fppb-slider-gap)) / 2) !important;
}
@media (max-width: 480px) {
.fppb-slider {
--fppb-slider-gap: 6px;
--fppb-slider-peek: 14px;
}
}
@media (max-width: 480px) {
.fppb-promo-box,
.fppb-align-split .fppb-promo-box,
.fppb-align-left .fppb-promo-box,
.fppb-align-center .fppb-promo-box,
.fppb-align-right .fppb-promo-box {
flex-direction: column !important;
gap: 16px !important;
padding: 18px 14px !important;
}
.fppb-align-split .fppb-promo-box {
align-items: stretch !important;
text-align: left !important;
}
.fppb-align-left .fppb-promo-box {
align-items: flex-start !important;
text-align: left !important;
}
.fppb-align-center .fppb-promo-box {
align-items: center !important;
text-align: center !important;
}
.fppb-align-right .fppb-promo-box {
align-items: flex-end !important;
text-align: right !important;
}
.fppb-align-split .fppb-promo-copy,
.fppb-align-left .fppb-promo-copy,
.fppb-align-split .fppb-copy-set,
.fppb-align-left .fppb-copy-set {
align-items: flex-start !important;
text-align: left !important;
}
.fppb-align-center .fppb-promo-copy,
.fppb-align-center .fppb-copy-set {
align-items: center !important;
text-align: center !important;
}
.fppb-align-right .fppb-promo-copy,
.fppb-align-right .fppb-copy-set {
align-items: flex-end !important;
text-align: right !important;
}
.fppb-align-split .fppb-button {
width: 100% !important;
align-self: stretch !important;
}
.fppb-align-left .fppb-button,
.fppb-align-center .fppb-button,
.fppb-align-right .fppb-button {
width: auto !important;
max-width: 100% !important;
}
.fppb-align-left .fppb-button {
align-self: flex-start !important;
}
.fppb-align-center .fppb-button {
align-self: center !important;
}
.fppb-align-right .fppb-button {
align-self: flex-end !important;
}
}
.fppb-product-card {
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
.fppb-product-card .fppb-product-price,
.fppb-product-card .fppb-product-price del,
.fppb-product-card .fppb-product-price ins,
.fppb-product-card .fppb-product-price .amount,
.fppb-product-card .fppb-product-price bdi {
background: transparent !important;
box-shadow: none !important;
}
.fppb-product-card .fppb-product-price del {
text-decoration: line-through;
}
.fppb-product-card .fppb-product-price ins {
text-decoration: none;
}
.fppb-product-card,
.fppb-product-card * {
pointer-events: auto;
}
.fppb-block,
.fppb-block * {
-webkit-tap-highlight-color: transparent;
}
.fppb-button,
.fppb-slider-arrow {
touch-action: manipulation;
-ms-touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
.fppb-slider-viewport,
.fppb-slider-track,
.fppb-product-card,
.fppb-product-card * {
touch-action: pan-y;
-ms-touch-action: pan-y;
}
.fppb-slider-viewport {
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.fppb-slider-viewport.is-dragging,
.fppb-slider-viewport.is-dragging * {
-webkit-user-select: none;
user-select: none;
}
.fppb-slider-track,
.fppb-preview-slider-track {
backface-visibility: hidden;
transform-style: preserve-3d;
}
.fppb-slider-clone,
.fppb-slider-clone * {
visibility: visible !important;
opacity: 1 !important;
}
.fppb-slider-track,
.fppb-preview-slider-track {
will-change: transform;
}
.fppb-product-card,
.fppb-preview-product-card,
.fppb-slider-clone {
backface-visibility: hidden;
transform: translateZ(0);
}
.fppb-product-card,
.fppb-product-card:visited,
.fppb-product-card:hover,
.fppb-product-card:focus,
.fppb-product-card:active {
color: inherit !important;
text-decoration: none !important;
}
.fppb-product-card .fppb-product-info {
min-width: 0 !important;
max-width: 100% !important;
}
.fppb-product-card .fppb-product-title {
color: inherit !important;
font-family: inherit !important;
}
.fppb-product-card .fppb-product-price,
.fppb-product-card .fppb-product-price.price {
--fppb-price-muted: var(--fppb-slider-muted-price-color, #8a8f98);
--fppb-price-accent: var(--fppb-slider-sale-price-color, var(--wc-primary, var(--global-palette1, var(--wp--preset--color--vivid-green-cyan, #1b5e20))));
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 6px !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: inherit !important;
font-family: inherit !important;
font-size: 13px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
}
.fppb-product-card .fppb-product-price del,
.fppb-product-card .fppb-product-price ins,
.fppb-product-card .fppb-product-price span,
.fppb-product-card .fppb-product-price .amount,
.fppb-product-card .fppb-product-price bdi,
.fppb-product-card .fppb-product-price .woocommerce-Price-currencySymbol {
display: inline !important;
float: none !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-style: normal !important;
line-height: inherit !important;
letter-spacing: inherit !important;
white-space: nowrap !important;
vertical-align: baseline !important;
}
.fppb-product-card .fppb-product-price del {
flex: 0 1 auto !important;
color: var(--fppb-price-muted) !important;
opacity: 1 !important;
font-size: .92em !important;
font-weight: 500 !important;
text-decoration: line-through !important;
text-decoration-thickness: 1px !important;
text-decoration-color: currentColor !important;
}
.fppb-product-card .fppb-product-price del .amount,
.fppb-product-card .fppb-product-price del bdi,
.fppb-product-card .fppb-product-price del .woocommerce-Price-currencySymbol {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
.fppb-product-card .fppb-product-price ins,
.fppb-product-card .fppb-product-price > .amount {
flex: 0 0 auto !important;
color: var(--fppb-price-accent) !important;
opacity: 1 !important;
font-size: 1.32em !important;
font-weight: 800 !important;
text-decoration: none !important;
}
.fppb-product-card .fppb-product-price ins .amount,
.fppb-product-card .fppb-product-price ins bdi,
.fppb-product-card .fppb-product-price ins .woocommerce-Price-currencySymbol,
.fppb-product-card .fppb-product-price > .amount bdi,
.fppb-product-card .fppb-product-price > .amount .woocommerce-Price-currencySymbol {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
text-decoration: none !important;
}
@media (max-width: 480px) {
.fppb-product-card .fppb-product-info {
align-items: center !important;
width: 100% !important;
}
.fppb-product-card .fppb-product-price,
.fppb-product-card .fppb-product-price.price {
justify-content: center !important;
gap: 4px !important;
font-size: 12px !important;
}
.fppb-product-card .fppb-product-price ins,
.fppb-product-card .fppb-product-price > .amount {
font-size: 1.28em !important;
}
}
.fppb-slider-track,
.fppb-preview-slider-track {
will-change: transform;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.fppb-product-card,
.fppb-slider-clone {
backface-visibility: hidden !important;
transform: translateZ(0) !important;
opacity: 1 !important;
visibility: visible !important;
contain: layout paint;
}
.fppb-product-card img,
.fppb-slider-clone img,
.fppb-slider-image-ready {
opacity: 1 !important;
visibility: visible !important;
backface-visibility: hidden;
transform: translateZ(0);
}
.fppb-product-card,
.fppb-slider-clone,
.fppb-product-card *,
.fppb-slider-clone * {
content-visibility: visible !important;
}
@media (min-width: 769px) {
.fppb-desktop-mode-slider .fppb-promo-box { display: none !important; }
.fppb-desktop-mode-button .fppb-slider { display: none !important; }
.fppb-desktop-align-split .fppb-promo-box { justify-content: space-between !important; text-align: left !important; flex-direction: row !important; }
.fppb-desktop-align-left .fppb-promo-box { justify-content: flex-start !important; text-align: left !important; flex-direction: row !important; }
.fppb-desktop-align-center .fppb-promo-box { flex-direction: column !important; justify-content: center !important; text-align: center !important; }
.fppb-desktop-align-right .fppb-promo-box { justify-content: flex-end !important; text-align: right !important; flex-direction: row !important; }
}
@media (max-width: 768px) {
.fppb-mobile-mode-slider .fppb-promo-box { display: none !important; }
.fppb-mobile-mode-button .fppb-slider { display: none !important; }
.fppb-mobile-align-split .fppb-promo-box,
.fppb-mobile-align-left .fppb-promo-box,
.fppb-mobile-align-center .fppb-promo-box,
.fppb-mobile-align-right .fppb-promo-box {
flex-direction: column !important;
align-items: stretch !important;
}
.fppb-mobile-align-split .fppb-promo-copy,
.fppb-mobile-align-left .fppb-promo-copy,
.fppb-mobile-align-split .fppb-copy-set,
.fppb-mobile-align-left .fppb-copy-set {
text-align: left !important;
align-items: flex-start !important;
}
.fppb-mobile-align-center .fppb-promo-copy,
.fppb-mobile-align-center .fppb-copy-set {
text-align: center !important;
align-items: center !important;
}
.fppb-mobile-align-right .fppb-promo-copy,
.fppb-mobile-align-right .fppb-copy-set {
text-align: right !important;
align-items: flex-end !important;
}
.fppb-mobile-align-split .fppb-button,
.fppb-mobile-align-left .fppb-button,
.fppb-mobile-align-center .fppb-button,
.fppb-mobile-align-right .fppb-button {
max-width: 100% !important;
}
.fppb-mobile-align-left .fppb-button { align-self: flex-start !important; }
.fppb-mobile-align-center .fppb-button { align-self: center !important; }
.fppb-mobile-align-right .fppb-button { align-self: flex-end !important; }
.fppb-mobile-align-split .fppb-button { align-self: stretch !important; }
}
.fppb-slider-head {
justify-content: center;
text-align: center;
}
.fppb-slider-title-mobile {
display: none;
}
@media (max-width: 480px) {
.fppb-slider-title-desktop {
display: none;
}
.fppb-slider-title-mobile {
display: inline;
}
}