body.tkbpp-recommendations-enabled .related.products,
body.tkbpp-recommendations-enabled .upsells.products,
body.tkbpp-recommendations-enabled .et_pb_wc_related_products,
body.tkbpp-recommendations-enabled .et_pb_wc_upsells {
display: none !important;
}
.tkbpp-recommendations-root {
display: grid;
gap: 16px;
width: 90%;
max-width: 1320px;
min-width: 0;
margin: 16px auto 0;
overflow: hidden;
}
.tkbpp-recommendations-root[hidden] {
display: none !important;
}
.tkbpp-recommendations-root.tkbpp-recommendations-root--embedded {
width: 100%;
max-width: none;
margin-right: 0;
margin-left: 0;
}
.tkbpp-recommendation-section {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 22px 24px 24px;
background: #fff;
border: 1px solid #e2e5e8;
border-radius: 9px;
box-shadow: 0 7px 24px rgba(20, 25, 30, .04);
}
.tkbpp-recommendation-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 17px;
padding-bottom: 12px;
border-bottom: 1px solid #e7e9eb;
}
.tkbpp-recommendation-header h2 {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(20px, 2vw, 27px) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
color: #1f252a !important;
}
.tkbpp-recommendation-header p {
margin: 6px 0 0 !important;
max-width: 760px;
font-size: 13px;
line-height: 1.45;
color: #777f86;
}
.tkbpp-recommendation-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.tkbpp-recommendation-carousel {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
}
.tkbpp-carousel-arrow {
display: none;
} .tkbpp-recommendation-card:nth-child(n+6) {
display: none;
}
.tkbpp-recommendation-card {
display: flex;
min-width: 0;
flex-direction: column;
margin: 0;
padding: 12px;
background: #fff;
border: 1px solid #e5e7e9;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tkbpp-recommendation-card:hover {
transform: translateY(-3px);
border-color: #d3d7da;
box-shadow: 0 9px 21px rgba(20, 25, 30, .12);
}
.tkbpp-recommendation-card__image-link,
.tkbpp-recommendation-card__body-link {
display: block;
width: 100%;
color: inherit !important;
text-decoration: none !important;
}
.tkbpp-recommendation-card__body-link {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.tkbpp-recommendation-card__image {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
margin: 0 0 10px !important;
background: #f4f4f4;
border-radius: 6px;
overflow: hidden;
}
.tkbpp-recommendation-card__image img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover;
transition: transform .24s ease;
}
.tkbpp-recommendation-card:hover .tkbpp-recommendation-card__image img {
transform: scale(1.035);
}
.tkbpp-recommendation-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding: 0;
}
.tkbpp-recommendation-card__title {
display: -webkit-box;
width: 100%;
min-height: 2.56em;
max-height: 2.56em;
margin: 0 0 8px !important;
padding: 0 !important;
overflow: hidden;
color: #111 !important;
font-size: 13.5px !important;
font-weight: 800 !important;
line-height: 1.28em !important;
text-align: left;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tkbpp-recommendation-card__entities {
display: block;
width: 100%;
min-height: 40px;
max-height: 40px;
margin: 0 0 8px !important;
padding: 0 !important;
overflow: hidden;
color: #555 !important;
font-size: 10px !important;
line-height: 1.25 !important;
text-align: left !important;
}
.tkbpp-recommendation-card__entities.tkb-card-entities-empty {
visibility: hidden;
}
.tkbpp-recommendation-card__entities .tkb-entity-line {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 14px;
max-height: 14px;
margin: 0 0 2px !important;
padding: 0 !important;
overflow: hidden !important;
font-size: inherit !important;
line-height: 14px !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.tkbpp-recommendation-card__entities .tkb-entity-label {
color: #111 !important;
font-weight: 900 !important;
}
.tkbpp-recommendation-card__entities .tkb-entity-text {
color: #666 !important;
font-weight: 700 !important;
}
.tkbpp-recommendation-card__bottom {
display: flex !important;
flex: 0 0 auto;
align-items: center !important;
justify-content: space-between !important;
gap: 5px !important;
width: 100%;
margin-top: auto !important;
padding-top: 10px !important;
border-top: 1px solid #f0f0f0;
}
.tkbpp-recommendation-card__price {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
overflow: visible;
color: #111 !important;
font-size: 12.5px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap;
}
.tkbpp-recommendation-card__price .woocommerce-Price-amount,
.tkbpp-recommendation-card__price ins,
.tkbpp-recommendation-card__price ins .woocommerce-Price-amount {
color: inherit !important;
background: transparent !important;
text-decoration: none !important;
}
.tkbpp-recommendation-card__price del {
display: none !important;
}
.tkbpp-recommendation-card__price.is-sale ins,
.tkbpp-recommendation-card__price.is-sale ins .woocommerce-Price-amount {
color: #111 !important;
}
.tkbpp-recommendation-card__actions {
display: flex !important;
position: static !important;
flex: 0 0 auto;
align-items: center !important;
justify-content: flex-end !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto;
}
.tkbpp-recommendation-card__actions .tbk-play-btn,
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart {
display: inline-flex !important;
position: relative !important;
float: none !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
box-shadow: none !important;
text-decoration: none !important;
transform: none;
cursor: pointer;
}
.tkbpp-recommendation-card__actions .tbk-play-btn {
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
background: #fff !important;
border: 2px solid #ff9900 !important;
color: #ff9900 !important;
}
.tkbpp-recommendation-card__actions .tbk-play-btn.playing {
background: #ff9900 !important;
border-color: #ff9900 !important;
color: #111 !important;
}
.tkbpp-recommendation-card__actions .tbk-play-btn svg {
width: 10px !important;
height: 10px !important;
}
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart {
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
background: #ff9900 !important;
border: 2px solid #ff9900 !important;
color: #111 !important;
}
.tkbpp-recommendation-card__actions .tbk-play-btn:hover,
.tkbpp-recommendation-card__actions .tbk-play-btn:focus-visible {
background: #fff7e8 !important;
border-color: #e88b00 !important;
color: #111 !important;
outline: none !important;
}
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart:hover,
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart:focus-visible,
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added {
background: #ffad24 !important;
border-color: #ffad24 !important;
color: #000 !important;
outline: none !important;
}
.tkbpp-recommendation-card__actions .tbk-play-btn:focus-visible,
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 153, 0, .24) !important;
}
.tkbpp-recommendation-cart .tkbpp-check-icon {
display: none;
}
.tkbpp-recommendation-cart.added .tkbpp-cart-icon {
display: none;
}
.tkbpp-recommendation-cart.added .tkbpp-check-icon {
display: block;
}
.tkbpp-recommendation-card .added_to_cart {
display: none !important;
} body.tkb-product-design-v7 .tkb-review-emojis--fallback {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 7px 0 10px;
}
body.tkb-product-design-v7 .tkb-review-emojis--fallback button {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #e0e3e5;
border-radius: 8px;
background: #fff;
font-size: 19px;
line-height: 1;
cursor: pointer;
} body.tkb-product-design-v7 .comment-form-rating .stars ~ .stars {
display: none !important;
} body.tkbpp-recommendations-enabled,
body.tkbpp-recommendations-enabled #page-container,
body.tkbpp-recommendations-enabled #et-main-area,
body.tkbpp-recommendations-enabled #main-content {
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
@media (max-width: 980px) {
.tkbpp-recommendation-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.tkbpp-recommendations-root {
width: calc(100% - 24px);
max-width: calc(100% - 24px);
min-width: 0;
gap: 12px;
margin-top: 12px;
overflow: hidden;
}
.tkbpp-recommendations-root.tkbpp-recommendations-root--embedded {
width: 100%;
max-width: 100%;
}
.tkbpp-recommendation-section {
max-width: 100%;
min-width: 0;
padding: 18px 14px 14px;
overflow: hidden;
contain: inline-size;
}
.tkbpp-recommendation-header {
align-items: center;
margin-bottom: 13px;
padding-bottom: 10px;
}
.tkbpp-recommendation-header > div {
min-width: 0;
}
.tkbpp-recommendation-header p {
font-size: 12px;
}
.tkbpp-recommendation-carousel {
position: relative;
margin: 0;
}
.tkbpp-carousel-arrow {
position: absolute;
top: 42%;
z-index: 20;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: #ff9800;
box-shadow: 0 4px 14px rgba(0,0,0,.23);
color: #111;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(.92);
transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.tkbpp-carousel-arrow svg {
display: block;
width: 17px;
height: 17px;
}
.tkbpp-carousel-arrow--prev {
left: 5px;
}
.tkbpp-carousel-arrow--next {
right: 5px;
}
.tkbpp-carousel-arrow.is-visible {
opacity: .98;
pointer-events: auto;
transform: translateY(-50%) scale(1);
}
.tkbpp-carousel-arrow.is-visible:hover,
.tkbpp-carousel-arrow.is-visible:focus-visible {
background: #e58800;
color: #fff;
outline: none;
}
.tkbpp-recommendation-grid {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
gap: 11px;
overflow-x: auto;
overflow-y: hidden;
padding: 1px 1px 10px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1px;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tkbpp-recommendation-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.tkbpp-recommendation-card,
.tkbpp-recommendation-card:nth-child(n+6) {
display: flex;
flex: 0 0 min(72vw, 255px);
max-width: min(72vw, 255px);
scroll-snap-align: start;
scroll-snap-stop: always;
}
} .tkbpp-recommendations-root--inline {
width: 100%;
max-width: none;
margin-top: 18px;
}
.tkbpp-recommendations-root--fallback {
display: grid;
} .tkbpp-recommendation-card__entities .tkb-entity-label {
display: none !important;
}
.tkbpp-recommendation-card__title,
.tkbpp-recommendation-card__price,
.tkbpp-recommendation-card__price .woocommerce-Price-amount {
color: #17191b !important;
} .tkbpp-recommendation-card__price,
.tkbpp-recommendation-card__price *,
.tkbpp-recommendation-card__price .woocommerce-Price-amount,
.tkbpp-recommendation-card__price .woocommerce-Price-currencySymbol,
.tkbpp-recommendation-card__price ins,
.tkbpp-recommendation-card__price ins * {
color: #17191b !important;
}
.tkbpp-recommendation-card__actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.tkbpp-recommendation-card__actions > .tbk-play-btn,
.tkbpp-recommendation-card__actions > button[class*="play"],
.tkbpp-recommendation-card__actions > [class*="audio"] {
display: inline-flex !important;
position: relative !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #ff9800 !important;
border-radius: 50% !important;
background: #fff !important;
color: #ff9800 !important;
box-shadow: none !important;
float: none !important;
}
@media (max-width: 767px) {
.tkbpp-recommendation-carousel {
padding-bottom: 50px !important;
}
.tkbpp-carousel-arrow {
top: auto !important;
bottom: 2px !important;
width: 38px !important;
height: 38px !important;
transform: scale(.92) !important;
}
.tkbpp-carousel-arrow--prev {
left: calc(50% - 43px) !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
left: calc(50% + 5px) !important;
right: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: scale(1) !important;
}
.tkbpp-recommendation-grid {
padding-bottom: 4px !important;
}
} .tkbpp-recommendation-card .tkbpp-recommendation-card__price,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price *,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price .amount,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price .woocommerce-Price-amount,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price .woocommerce-Price-currencySymbol,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price bdi,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price ins,
.tkbpp-recommendation-card .tkbpp-recommendation-card__price del {
color: #17191b !important;
}
.tkbpp-recommendation-card__actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
}
.tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn,
.tkbpp-recommendation-card__actions .tbk-play-btn,
.tkbpp-recommendation-card__actions button[class*="play"],
.tkbpp-recommendation-card__actions [class*="audio"] button,
.tkbpp-recommendation-card__actions [class*="play"] button {
display: inline-flex !important;
position: relative !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid #ff9800 !important;
border-radius: 50% !important;
background: #fff !important;
color: #ff9800 !important;
box-shadow: none !important;
float: none !important;
vertical-align: middle !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-carousel {
padding-inline: 18px !important;
}
.tkbpp-carousel-arrow {
position: absolute !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
top: 50% !important;
bottom: auto !important;
width: 42px !important;
height: 42px !important;
transform: translateY(-50%) scale(.94) !important;
z-index: 20 !important;
}
.tkbpp-carousel-arrow--prev {
left: 0 !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: 0 !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
} .tkbpp-recommendation-card__price,
.tkbpp-recommendation-card__price *,
.tkbpp-recommendation-card__price .woocommerce-Price-amount,
.tkbpp-recommendation-card__price .woocommerce-Price-currencySymbol,
.tkbpp-recommendation-card__price ins,
.tkbpp-recommendation-card__price del,
.tkbpp-recommendation-card__price bdi {
color: #17191b !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-grid {
display: flex !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 1px 1px 10px !important;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1px;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tkbpp-recommendation-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.tkbpp-recommendation-card,
.tkbpp-recommendation-card:nth-child(n+6) {
display: flex !important;
flex: 0 0 calc((100% - 56px) / 5) !important;
max-width: calc((100% - 56px) / 5) !important;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tkbpp-recommendation-carousel {
padding-inline: 22px !important;
}
.tkbpp-carousel-arrow {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
width: 44px !important;
height: 44px !important;
transform: translateY(-50%) scale(.94) !important;
z-index: 24 !important;
}
.tkbpp-carousel-arrow--prev {
left: 0 !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: 0 !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
}
@media (max-width: 767px) {
.tkbpp-recommendation-carousel {
padding-inline: 16px !important;
padding-bottom: 0 !important;
}
.tkbpp-carousel-arrow {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
width: 38px !important;
height: 38px !important;
transform: translateY(-50%) scale(.92) !important;
z-index: 24 !important;
}
.tkbpp-carousel-arrow--prev {
left: 0 !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: 0 !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
} .tkbpp-recommendation-carousel {
overflow: visible !important;
}
.tkbpp-carousel-arrow {
border: 1px solid rgba(255, 152, 0, .78) !important;
background: linear-gradient(145deg, #242424, #101010) !important;
color: #ff9d00 !important;
box-shadow:
0 7px 18px rgba(0, 0, 0, .2),
0 0 0 3px rgba(255, 152, 0, .08) !important;
opacity: 0 !important;
pointer-events: none !important;
transition:
opacity .16s ease,
transform .16s ease,
background .16s ease,
color .16s ease,
box-shadow .16s ease !important;
}
.tkbpp-carousel-arrow::after {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: inherit;
pointer-events: none;
}
.tkbpp-carousel-arrow svg {
position: relative;
z-index: 2;
width: 18px !important;
height: 18px !important;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}
.tkbpp-carousel-arrow.is-visible {
opacity: .96 !important;
pointer-events: auto !important;
}
.tkbpp-carousel-arrow.is-visible:hover,
.tkbpp-carousel-arrow.is-visible:focus-visible {
background: linear-gradient(145deg, #ffad22, #f08b00) !important;
color: #111 !important;
border-color: #ffb12d !important;
box-shadow:
0 9px 22px rgba(0, 0, 0, .24),
0 0 0 4px rgba(255, 152, 0, .14) !important;
outline: none !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-section {
overflow: visible !important;
}
.tkbpp-recommendation-carousel {
padding-inline: 6px !important;
}
.tkbpp-recommendation-grid {
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.tkbpp-recommendation-grid.is-mouse-dragging {
cursor: grabbing;
scroll-snap-type: none !important;
}
.tkbpp-recommendation-grid.is-mouse-dragging a,
.tkbpp-recommendation-grid.is-mouse-dragging button {
pointer-events: none !important;
}
.tkbpp-carousel-arrow {
top: 50% !important;
bottom: auto !important;
width: 46px !important;
height: 46px !important;
transform: translateY(-50%) scale(.94) !important;
}
.tkbpp-carousel-arrow--prev {
left: -18px !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: -18px !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
}
@media (max-width: 767px) {
.tkbpp-recommendation-section {
overflow: visible !important;
}
.tkbpp-recommendation-carousel {
padding-inline: 8px !important;
padding-bottom: 0 !important;
}
.tkbpp-carousel-arrow {
top: 50% !important;
bottom: auto !important;
width: 40px !important;
height: 40px !important;
transform: translateY(-50%) scale(.94) !important;
}
.tkbpp-carousel-arrow--prev {
left: -10px !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: -10px !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
} .tkbpp-recommendations-root,
.tkbpp-recommendations-root.tkbpp-recommendations-root--embedded,
.tkbpp-recommendation-section,
.tkbpp-recommendation-carousel {
overflow: visible !important;
}
.tkbpp-recommendation-section {
isolation: isolate;
}
.tkbpp-carousel-arrow {
position: absolute !important;
z-index: 60 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255, 152, 0, .88) !important;
background: linear-gradient(145deg, #292929 0%, #111 100%) !important;
color: #ff9d00 !important;
box-shadow: 0 7px 20px rgba(0,0,0,.24), 0 0 0 3px rgba(255,152,0,.09) !important;
border-radius: 50% !important;
}
.tkbpp-carousel-arrow.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
}
.tkbpp-carousel-arrow.is-visible:hover,
.tkbpp-carousel-arrow.is-visible:focus-visible {
background: linear-gradient(145deg, #ffb52f 0%, #ee8700 100%) !important;
color: #111 !important;
border-color: #ffc15a !important;
box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 4px rgba(255,152,0,.17) !important;
outline: none !important;
}
.tkbpp-carousel-arrow svg {
width: 19px !important;
height: 19px !important;
stroke-width: 2.4 !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-carousel {
padding-inline: 14px !important;
}
.tkbpp-carousel-arrow {
top: 50% !important;
bottom: auto !important;
width: 46px !important;
height: 46px !important;
transform: translateY(-50%) scale(.96) !important;
}
.tkbpp-carousel-arrow--prev {
left: -23px !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: -23px !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
.tkbpp-recommendation-grid {
cursor: grab !important;
user-select: none !important;
-webkit-user-select: none !important;
}
.tkbpp-recommendation-grid.is-mouse-dragging {
cursor: grabbing !important;
scroll-snap-type: none !important;
}
}
@media (max-width: 767px) {
.tkbpp-recommendation-carousel {
padding-inline: 10px !important;
}
.tkbpp-carousel-arrow {
top: 50% !important;
bottom: auto !important;
width: 40px !important;
height: 40px !important;
transform: translateY(-50%) scale(.96) !important;
}
.tkbpp-carousel-arrow--prev {
left: -11px !important;
right: auto !important;
}
.tkbpp-carousel-arrow--next {
right: -11px !important;
left: auto !important;
}
.tkbpp-carousel-arrow.is-visible {
transform: translateY(-50%) scale(1) !important;
}
} .tkbpp-recommendation-card,
.tkbpp-recommendation-card a,
.tkbpp-recommendation-card button {
pointer-events: auto !important;
}
.tkbpp-recommendation-card__image-link,
.tkbpp-recommendation-card__body-link {
position: relative !important;
z-index: 2 !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-grid {
cursor: grab !important;
user-select: auto !important;
-webkit-user-select: auto !important;
}
.tkbpp-recommendation-grid.is-mouse-dragging {
cursor: grabbing !important;
user-select: none !important;
-webkit-user-select: none !important;
scroll-snap-type: none !important;
}
.tkbpp-recommendation-grid:not(.is-mouse-dragging) .tkbpp-recommendation-card a,
.tkbpp-recommendation-grid:not(.is-mouse-dragging) .tkbpp-recommendation-card button {
pointer-events: auto !important;
}
} .tkbpp-recommendations-root,
.tkbpp-recommendation-section,
.tkbpp-recommendation-carousel {
max-width: 100% !important;
min-width: 0 !important;
}
.tkbpp-recommendation-grid {
min-width: 0 !important;
}
@media (min-width: 768px) {
.tkbpp-recommendation-grid {
display: flex !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.tkbpp-recommendation-card,
.tkbpp-recommendation-card:nth-child(n+6) {
display: flex !important;
flex: 0 0 var(--tkbpp-card-width, calc((100% - 56px) / 5)) !important;
width: var(--tkbpp-card-width, calc((100% - 56px) / 5)) !important;
max-width: var(--tkbpp-card-width, calc((100% - 56px) / 5)) !important;
min-width: 0 !important;
}
}
@media (max-width: 767px) {
.tkbpp-recommendation-card,
.tkbpp-recommendation-card:nth-child(n+6) {
flex: 0 0 min(72vw, 255px) !important;
width: min(72vw, 255px) !important;
max-width: min(72vw, 255px) !important;
}
} body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price *,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price span,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price bdi,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price ins,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price del,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price .amount,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price .woocommerce-Price-amount,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price .woocommerce-Price-currencySymbol,
body.single-product .tkbpp-recommendations-root .tbk-price,
body.single-product .tkbpp-recommendations-root .tbk-price * {
color: #17191b !important;
-webkit-text-fill-color: #17191b !important;
text-shadow: none !important;
} body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price *,
body.single-product .tkbpp-recommendations-root .tbk-price,
body.single-product .tkbpp-recommendations-root .tbk-price * {
color: #626970 !important;
-webkit-text-fill-color: #626970 !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
@media (max-width: 980px) {
.tkbpp-product-reassurance + .tkbpp-recommendations-root,
.tkbpp-recommendations-root.tkbpp-recommendations-root--embedded {
margin-top: 8px !important;
}
} body.tkb-product-design-v7 .tkbpp-product-reassurance + .tkbpp-recommendations-root,
body.tkb-product-design-v7 .tkbpp-recommendations-root.tkbpp-recommendations-root--embedded,
body.tkb-product-design-v7 .tkbpp-recommendations-root--inline,
body.tkb-product-design-v7 .tkbpp-recommendations-root--fallback {
margin-top: var(--tkbpp-product-block-gap, 10px) !important;
} body.tkb-product-design-v7 .tkbpp-recommendations-root {
gap: 18px !important;
}
body.tkb-product-design-v7 .tkbpp-recommendations-root + .tkb-reviews-bottom {
margin-top: 18px !important;
} .tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn,
.tkbpp-recommendation-card__actions > .tbk-play-btn,
.tkbpp-recommendation-card__actions button[class*="play"],
.tkbpp-recommendation-card__actions [class*="audio"] button,
.tkbpp-recommendation-card__actions [class*="play"] button {
background: #fff !important;
border-color: #ff9800 !important;
color: #111 !important;
}
.tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn:hover,
.tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn:focus-visible,
.tkbpp-recommendation-card__actions > .tbk-play-btn:hover,
.tkbpp-recommendation-card__actions > .tbk-play-btn:focus-visible,
.tkbpp-recommendation-card__actions button[class*="play"]:hover,
.tkbpp-recommendation-card__actions button[class*="play"]:focus-visible,
.tkbpp-recommendation-card__actions [class*="audio"] button:hover,
.tkbpp-recommendation-card__actions [class*="audio"] button:focus-visible,
.tkbpp-recommendation-card__actions [class*="play"] button:hover,
.tkbpp-recommendation-card__actions [class*="play"] button:focus-visible,
.tkbpp-recommendation-card__actions .tbk-play-btn.playing {
background: #ff9800 !important;
border-color: #ff9800 !important;
color: #111 !important;
outline: none !important;
} body.tkb-product-design-v7 .tkbpp-recommendations-root {
margin-top: var(--tkbpp-product-block-gap, 12px) !important;
margin-bottom: 0 !important;
gap: var(--tkbpp-product-block-gap, 12px) !important;
}
body.tkb-product-design-v7 .tkbpp-canonical-lower-column
> .tkbpp-recommendations-root
+ .tkbpp-server-reviews,
body.tkb-product-design-v7 .tkbpp-recommendations-root + .tkb-reviews-bottom {
margin-top: var(--tkbpp-product-block-gap, 12px) !important;
margin-bottom: 0 !important;
} @media (max-width: 767px) {
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card {
overflow: hidden !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__bottom {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
column-gap: 8px !important;
padding-right: 2px !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: 44px !important;
gap: 6px !important;
max-width: 94px !important;
min-width: 44px !important;
justify-content: end !important;
overflow: visible !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tbk-play-btn,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__price {
min-width: 0 !important;
font-size: 12px !important;
}
}
@media (max-width: 374px) {
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions {
grid-auto-columns: 40px !important;
gap: 5px !important;
max-width: 85px !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tbk-play-btn,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-rec-play-wrap .tbk-play-btn {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
} body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-carousel {
position: relative !important;
overflow: visible !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow,
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow.is-visible {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
margin: 0 !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow--prev {
left: clamp(-14px, -2.2vw, -8px) !important;
right: auto !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow--next {
right: clamp(-14px, -2.2vw, -8px) !important;
left: auto !important;
}
@media (max-width: 767px) {
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow,
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow.is-visible {
top: 50% !important;
bottom: auto !important;
width: 44px !important;
height: 44px !important;
transform: translateY(-50%) !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow--prev {
left: -10px !important;
right: auto !important;
}
body.single-product .tkbpp-recommendations-root .tkbpp-carousel-arrow--next {
right: -10px !important;
left: auto !important;
}
} .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added {
background: #f0f0f0 !important;
border-color: #f0f0f0 !important;
color: #ff9900 !important;
}
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added:hover,
.tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added:focus-visible,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added:hover,
body.single-product .tkbpp-recommendations-root .tkbpp-recommendation-card__actions .tkbpp-recommendation-cart.added:focus-visible {
background: #ff9900 !important;
border-color: #ff9900 !important;
color: #000 !important;
}
.tkbpp-recommendation-cart .tkbpp-cart-icon,
.tkbpp-recommendation-cart .tbk-cart-icon {
display: block !important;
}
.tkbpp-recommendation-cart .tkbpp-check-icon,
.tkbpp-recommendation-cart .tbk-check-icon {
display: none !important;
width: 14px !important;
height: 14px !important;
}
.tkbpp-recommendation-cart.added .tkbpp-cart-icon,
.tkbpp-recommendation-cart.added .tbk-cart-icon {
display: none !important;
}
.tkbpp-recommendation-cart.added .tkbpp-check-icon,
.tkbpp-recommendation-cart.added .tbk-check-icon {
display: block !important;
}