/*
Theme Name: Woodmart Child
Description: Woodmart Child Theme
Author: XTemos
Author URI: http://xtemos.com
Template: woodmart
Version: 1.0.0
Text Domain: woodmart
*/
.home .wd-content-layout {
padding-top: 0 !important;}
/* OhMyKajo shop archive final refinement: premium filters, seamless category rail, CTA consistency. */
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: none !important;}
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(220px, 300px) auto;
align-items: end;
gap: 16px;
width: min(1560px, calc(100vw - 36px));
margin: 4px auto 24px;
padding: 16px 18px;
border: 1px solid #e7ece2;
border-radius: 14px;
background: rgba(255, 253, 248, .92);
box-shadow: 0 16px 36px rgba(31, 47, 40, .06);}
body.post-type-archive-product .kajo-filter-label,
body.page-id-20970 .kajo-filter-label {
display: block;
margin-bottom: 7px;
color: #63735e;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
line-height: 1;
text-transform: uppercase;}
body.post-type-archive-product .kajo-filter-price,
body.page-id-20970 .kajo-filter-price {
min-width: 0;}
body.post-type-archive-product .kajo-price-desktop,
body.page-id-20970 .kajo-price-desktop {
position: relative;
height: 34px;
display: flex;
align-items: center;}
body.post-type-archive-product .kajo-price-desktop:before,
body.page-id-20970 .kajo-price-desktop:before {
content: "";
position: absolute;
right: 0;
left: 0;
top: 50%;
height: 4px;
border-radius: 999px;
background: #dfe9d8;
transform: translateY(-50%);}
body.post-type-archive-product .kajo-price-range,
body.page-id-20970 .kajo-price-range {
position: absolute;
width: 100%;
height: 34px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
pointer-events: none;
appearance: none;
-webkit-appearance: none;}
body.post-type-archive-product .kajo-price-range::-webkit-slider-thumb,
body.page-id-20970 .kajo-price-range::-webkit-slider-thumb {
width: 20px;
height: 20px;
border: 4px solid #ffffff;
border-radius: 50%;
background: #9caf88;
box-shadow: 0 6px 16px rgba(31, 47, 40, .18);
pointer-events: auto;
cursor: pointer;
-webkit-appearance: none;}
body.post-type-archive-product .kajo-price-range::-moz-range-thumb,
body.page-id-20970 .kajo-price-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 4px solid #ffffff;
border-radius: 50%;
background: #9caf88;
box-shadow: 0 6px 16px rgba(31, 47, 40, .18);
pointer-events: auto;
cursor: pointer;}
body.post-type-archive-product .kajo-price-mobile,
body.page-id-20970 .kajo-price-mobile {
display: none;}
body.post-type-archive-product .kajo-price-readout,
body.page-id-20970 .kajo-price-readout {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
color: #55704b;
font-size: 13px;
font-weight: 800;}
body.post-type-archive-product .kajo-filter-brand select,
body.page-id-20970 .kajo-filter-brand select,
body.post-type-archive-product .kajo-price-mobile input,
body.page-id-20970 .kajo-price-mobile input {
width: 100%;
height: 42px;
min-height: 42px;
border: 1px solid #dfe9d8;
border-radius: 999px;
background-color: #ffffff;
color: #172019;
font-size: 13px;
font-weight: 700;
box-shadow: none;}
body.post-type-archive-product .kajo-filter-brand select,
body.page-id-20970 .kajo-filter-brand select {
padding-right: 34px;
padding-left: 16px;}
body.post-type-archive-product .kajo-filter-submit,
body.page-id-20970 .kajo-filter-submit {
display: inline-flex;
height: 42px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 22px;
border: 1px solid #9caf88;
border-radius: 999px;
background: #9caf88;
color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: .35px;
line-height: 1;
text-transform: uppercase;}
body.post-type-archive-product .kajo-filter-submit:hover,
body.page-id-20970 .kajo-filter-submit:hover,
body.post-type-archive-product .kajo-filter-submit:focus,
body.page-id-20970 .kajo-filter-submit:focus {
border-color: #f58634;
background: #f58634;
color: #ffffff;}
.kajo-shop-cats-track {
--kajo-cat-cycle: 50%;
will-change: transform;
animation-name: kajo-shop-cats-scroll-seamless !important;}
@keyframes kajo-shop-cats-scroll-seamless {
from {
transform: translate3d(0, 0, 0);}
to {
transform: translate3d(calc(var(--kajo-cat-cycle) * -1), 0, 0);}}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .35px !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: normal !important;}
@media (max-width: 767px) {
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) auto;
gap: 8px;
width: calc(100vw - 24px);
margin: 0 auto 14px;
padding: 10px;
border-radius: 12px;}
body.post-type-archive-product .kajo-filter-label,
body.page-id-20970 .kajo-filter-label {
margin-bottom: 5px;
font-size: 9px;
letter-spacing: .9px;}
body.post-type-archive-product .kajo-price-desktop,
body.page-id-20970 .kajo-price-desktop,
body.post-type-archive-product .kajo-price-readout,
body.page-id-20970 .kajo-price-readout {
display: none;}
body.post-type-archive-product .kajo-price-mobile,
body.page-id-20970 .kajo-price-mobile {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;}
body.post-type-archive-product .kajo-price-mobile label span,
body.page-id-20970 .kajo-price-mobile label span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);}
body.post-type-archive-product .kajo-price-mobile input,
body.page-id-20970 .kajo-price-mobile input,
body.post-type-archive-product .kajo-filter-brand select,
body.page-id-20970 .kajo-filter-brand select {
height: 36px;
min-height: 36px;
padding-right: 8px;
padding-left: 10px;
border-radius: 10px;
font-size: 11px;}
body.post-type-archive-product .kajo-filter-submit,
body.page-id-20970 .kajo-filter-submit {
width: 42px;
height: 36px;
min-height: 36px;
padding: 0;
border-radius: 10px;
font-size: 0;}
body.post-type-archive-product .kajo-filter-submit:before,
body.page-id-20970 .kajo-filter-submit:before {
content: "OK";
font-size: 10px;
font-weight: 900;
letter-spacing: .4px;}
.kajo-shop-cats-wrap {
margin-top: 14px;
margin-bottom: 20px;}
.kajo-shop-cats-track {
gap: 12px !important;
padding-right: 12px !important;
padding-left: 12px !important;
animation-duration: 42s !important;}
.kajo-shop-cats {
gap: 12px !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
min-height: 34px !important;
height: 34px !important;
padding: 0 8px !important;
font-size: 10px !important;
letter-spacing: .2px !important;
line-height: 1 !important;}}
.home .wd-content-layout > .wd-content-area,
.home .entry-content,
.home .wpb-content-wrapper,
.home .MainBanner {
margin-top: 0 !important;}
.home .MainBanner .wd-carousel,
.home .MainBanner .wd-carousel-wrap,
.home .MainBanner .wd-carousel-item,
.home .MainBanner .vc_inner {
min-height: clamp(420px, 38vw, 620px);}
.home .MainBanner .vc_single_image-wrapper,
.home .MainBanner .vc_single_image-wrapper img {
width: 100%;
height: 100%;}
.home .MainBanner .vc_single_image-wrapper img {
aspect-ratio: 1280 / 714;
object-fit: cover;}
.home .MainBanner .wpb_animate_when_almost_visible,
.home .MainBanner [class*="wd-animation-"] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;}
@media (max-width: 767px) {
.home .MainBanner .wd-carousel,
.home .MainBanner .wd-carousel-wrap,
.home .MainBanner .wd-carousel-item,
.home .MainBanner .vc_inner {
min-height: auto;}
.home .MainBanner .vc_single_image-wrapper img {
aspect-ratio: 1280 / 714;}}
@media (max-width: 767px) {
body.kajo-catalogue .wd-product .product-wrapper{
min-height: 376px !important;
height: 376px !important;
max-height: 376px !important;
overflow: hidden;}
body.kajo-catalogue .product-element-top{
flex: 0 0 176px !important;
height: 176px !important;
min-height: 176px !important;
padding: 12px !important;}
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -9px !important;
inset-inline-start: 8px !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: grid !important;
flex: 0 0 248px !important;
min-height: 248px !important;
height: 248px !important;
grid-template-rows: 112px 28px 34px;
gap: 9px;
align-content: start;
padding: 12px 8px !important;}
body.kajo-catalogue .wd-product-header,
body.kajo-catalogue .wd-entities-title{
min-height: 112px !important;
max-height: 112px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
font-size: 11.7px !important;
line-height: 1.45 !important;
overflow-wrap: anywhere;}
body.kajo-catalogue .wrap-price,
body.kajo-catalogue .price{
min-height: 26px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-product .wd-product-footer{
align-self: start;
margin-top: 0 !important;}}
/* OhMyKajo shop refinement final cascade lock. Keep this at stylesheet end. */
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: none !important;}
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
display: grid !important;}
.kajo-shop-cats-track {
--kajo-cat-cycle: 50%;
animation-name: kajo-shop-cats-scroll-seamless !important;
will-change: transform;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .35px !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: normal !important;}
@media (max-width: 767px) {
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) auto !important;
gap: 8px !important;
width: calc(100vw - 24px) !important;
margin: 0 auto 14px !important;
padding: 10px !important;
border-radius: 12px !important;}
body.post-type-archive-product .kajo-price-desktop,
body.page-id-20970 .kajo-price-desktop,
body.post-type-archive-product .kajo-price-readout,
body.page-id-20970 .kajo-price-readout {
display: none !important;}
body.post-type-archive-product .kajo-price-mobile,
body.page-id-20970 .kajo-price-mobile {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;}
body.post-type-archive-product .kajo-filter-submit,
body.page-id-20970 .kajo-filter-submit {
width: 42px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border-radius: 10px !important;
font-size: 0 !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
min-height: 34px !important;
height: 34px !important;
padding: 0 8px !important;
font-size: 10px !important;
letter-spacing: .2px !important;
line-height: 1 !important;}}
/* OhMyKajo shop refinement final cascade lock. Keep after all shop archive card rules. */
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: none !important;}
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
display: grid !important;}
.kajo-shop-cats-track {
--kajo-cat-cycle: 50%;
animation-name: kajo-shop-cats-scroll-seamless !important;
will-change: transform;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .35px !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: normal !important;}
@media (max-width: 767px) {
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) auto !important;
gap: 8px !important;
width: calc(100vw - 24px) !important;
margin: 0 auto 14px !important;
padding: 10px !important;
border-radius: 12px !important;}
body.post-type-archive-product .kajo-price-desktop,
body.page-id-20970 .kajo-price-desktop,
body.post-type-archive-product .kajo-price-readout,
body.page-id-20970 .kajo-price-readout {
display: none !important;}
body.post-type-archive-product .kajo-price-mobile,
body.page-id-20970 .kajo-price-mobile {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;}
body.post-type-archive-product .kajo-filter-submit,
body.page-id-20970 .kajo-filter-submit {
width: 42px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border-radius: 10px !important;
font-size: 0 !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
min-height: 34px !important;
height: 34px !important;
padding: 0 8px !important;
font-size: 10px !important;
letter-spacing: .2px !important;
line-height: 1 !important;}}
/* OhMyKajo shop refinement end-of-file overrides. Keep this block last. */
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: none !important;}
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
display: grid !important;}
.kajo-shop-cats-track {
--kajo-cat-cycle: 50%;
animation-name: kajo-shop-cats-scroll-seamless !important;
will-change: transform;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .35px !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: normal !important;}
@media (max-width: 767px) {
body.post-type-archive-product .kajo-shop-filterbar,
body.page-id-20970 .kajo-shop-filterbar {
grid-template-columns: minmax(0, 1fr) minmax(118px, .62fr) auto !important;
gap: 8px !important;
width: calc(100vw - 24px) !important;
margin: 0 auto 14px !important;
padding: 10px !important;
border-radius: 12px !important;}
body.post-type-archive-product .kajo-price-desktop,
body.page-id-20970 .kajo-price-desktop,
body.post-type-archive-product .kajo-price-readout,
body.page-id-20970 .kajo-price-readout {
display: none !important;}
body.post-type-archive-product .kajo-price-mobile,
body.page-id-20970 .kajo-price-mobile {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;}
body.post-type-archive-product .kajo-filter-submit,
body.page-id-20970 .kajo-filter-submit {
width: 42px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border-radius: 10px !important;
font-size: 0 !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-options-fallback,
body.kajo-catalogue .kajo-archive-disabled-add{
min-height: 34px !important;
height: 34px !important;
padding: 0 8px !important;
font-size: 10px !important;
letter-spacing: .2px !important;
line-height: 1 !important;}}
@media (max-width: 767px) {
body.kajo-catalogue .products{
width: 100vw !important;
max-width: 100% !important;
margin-right: calc(50% - 50vw) !important;
margin-left: calc(50% - 50vw) !important;
padding-right: 12px !important;
padding-left: 12px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 10px !important;
row-gap: 14px !important;
box-sizing: border-box;}
body.kajo-catalogue .products .wd-product{
min-width: 0 !important;
max-width: 100% !important;}
body.kajo-catalogue .wd-product .product-wrapper{
min-height: 424px !important;
height: 424px !important;
max-height: 424px !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
flex: 0 0 248px !important;
min-height: 248px !important;
height: 248px !important;
grid-template-rows: 112px 28px 34px;
gap: 9px;
padding: 12px 8px !important;}
body.kajo-catalogue .wd-product-header,
body.kajo-catalogue .wd-entities-title{
min-height: 112px !important;
max-height: 112px !important;}
body.kajo-catalogue .wd-entities-title{
-webkit-line-clamp: 6;
font-size: 11.7px !important;
line-height: 1.45 !important;
word-break: normal;
overflow-wrap: anywhere;}
body.kajo-catalogue .wrap-price,
body.kajo-catalogue .price{
min-height: 28px !important;}}
@media (max-width: 767px) {
body.kajo-catalogue .products .wd-product{
align-self: stretch !important;}
body.kajo-catalogue .wd-product .product-wrapper{
min-height: 352px !important;
height: 100% !important;}
body.kajo-catalogue .product-element-top{
flex-basis: 176px !important;
height: 176px !important;
min-height: 176px !important;
padding: 12px !important;}
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -11px !important;
inset-inline-start: 8px !important;}
body.kajo-catalogue .product-element-top .kajo-image-stock-badge,
body.kajo-catalogue .product-wrapper > .kajo-image-stock-badge,
body.kajo-catalogue .product-element-top .wd-product-stock,
body.kajo-catalogue .kajo-image-stock-badge{
top: 8px !important;
inset-inline-end: 8px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
top: 132px !important;
inset-inline-end: 8px !important;
bottom: auto !important;
inset-inline-start: auto !important;
width: 34px !important;
height: 34px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
top: 132px !important;
right: 48px !important;
bottom: auto !important;
left: auto !important;
width: 34px !important;
height: 34px !important;
line-height: 0 !important;}
body.kajo-catalogue .wd-wishlist-btn a,
body.kajo-catalogue .wd-quick-view-btn a{
display: inline-flex !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
max-width: 34px !important;
max-height: 34px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: grid !important;
flex: 1 1 auto;
min-height: 176px !important;
grid-template-rows: 76px 26px 34px;
gap: 8px;
align-content: start;
padding: 12px 8px 12px !important;}
body.kajo-catalogue .wd-product-header{
min-height: 76px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box !important;
min-height: 76px !important;
max-height: 76px !important;
margin: 0 !important;
overflow: hidden !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
font-size: 12px !important;
line-height: 1.45 !important;}
body.kajo-catalogue .wrap-price{
min-height: 26px !important;
margin: 0 !important;}
body.kajo-catalogue .price{
min-height: 26px !important;
margin: 0 !important;
font-size: 11.5px !important;
line-height: 1.25 !important;}
body.kajo-catalogue .wd-product .wd-product-footer{
align-self: end;
margin-top: 0 !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-disabled-add,
body.kajo-catalogue .wd-product.product-type-variable .kajo-archive-options-fallback{
min-height: 34px !important;
height: 34px !important;
font-size: 8px !important;
line-height: 1 !important;}}
body.kajo-catalogue .kajo-variation-color{
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
min-height: 22px !important;}
@media (max-width: 767px) {
body.kajo-catalogue .products{
align-items: stretch !important;
grid-auto-rows: 1fr;}
body.kajo-catalogue .products .wd-product{
display: flex !important;
height: auto !important;
min-height: 0 !important;}
body.kajo-catalogue .wd-product .product-wrapper{
display: flex !important;
width: 100%;
min-height: 430px !important;
height: 100% !important;
flex-direction: column;}
body.kajo-catalogue .product-element-top{
flex: 0 0 176px;
min-height: 176px !important;
height: 176px !important;
padding: 12px !important;}
body.kajo-catalogue .product-element-top img{
max-height: 150px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
top: auto !important;
inset-inline-end: 8px !important;
bottom: 8px !important;
inset-inline-start: auto !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
top: 124px !important;
right: 48px !important;
bottom: auto !important;
left: auto !important;}
body.kajo-catalogue .wd-wishlist-btn a,
body.kajo-catalogue .wd-quick-view-btn a{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: flex !important;
flex: 1 1 auto;
min-height: 254px;
padding: 10px 8px 46px !important;
flex-direction: column;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box !important;
min-height: 58px !important;
max-height: 58px !important;
overflow: hidden !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 11.5px !important;
line-height: 1.55 !important;}
body.kajo-catalogue .price{
min-height: 30px;
margin: 0 0 6px;
font-size: 11.5px !important;
line-height: 1.3 !important;}
body.kajo-catalogue .kajo-archive-variation{
gap: 5px !important;
min-width: 0;}
body.kajo-catalogue .kajo-variation-group{
gap: 3px !important;
min-width: 0;}
body.kajo-catalogue .kajo-variation-pills{
gap: 4px !important;
max-width: 100%;
overflow-x: auto;
padding-bottom: 2px;}
body.kajo-catalogue .kajo-variation-color{
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
min-height: 18px !important;}
body.kajo-catalogue .kajo-variation-color:before{
inset: 2px;}
body.kajo-catalogue .kajo-variation-color:disabled:after{
left: 3px;
right: 3px;
border-top-width: 1px;}
body.kajo-catalogue .kajo-variation-pill:not(.kajo-variation-color){
min-height: 22px !important;
padding: 0 6px !important;
font-size: 8px !important;}
body.kajo-catalogue .wd-product .wd-product-footer{
margin-top: auto !important;}
body.kajo-catalogue .wd-product.product-type-variable .kajo-variation-group,
body.kajo-catalogue .wd-product.product-type-variable .kajo-archive-variable-add{
display: none !important;}
body.kajo-catalogue .wd-product.product-type-variable .kajo-archive-options-fallback{
display: inline-flex !important;
min-height: 34px !important;
width: 100%;
align-items: center;
justify-content: center;
padding: 0 8px !important;
border: 1px solid #dbe4d2 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #5f7352 !important;
font-size: 8px !important;
line-height: 1.15 !important;
font-weight: 800;
letter-spacing: .25px !important;
text-align: center;
text-transform: uppercase;}}
.product-wrapper h3.wd-entities-title {
min-height: 50px !important;}
.home .wd-products .wd-product,
.home .wd-products .wd-carousel-item {
height: 100%;}
.home .wd-products .wd-product-wrapper {
height: 100%;
display: flex !important;
flex-direction: column;}
.home .wd-products .wd-product-thumb {
height: 300px;
display: flex;
align-items: center;
justify-content: center;}
.home .wd-products .wd-product-thumb .product-image-link,
.home .wd-products .wd-product-thumb img {
width: 100%;
height: 100%;}
.home .wd-products .wd-product-thumb img {
object-fit: contain;}
.home .wd-products .product-element-bottom {
flex: 1 1 auto;
display: flex !important;
flex-direction: column;}
/* Title height is owned by ohmykajo-loop-cards.css, which clamps every
* catalogue card to two lines on every page. The 76px reserved here was taller
* than that clamp, so on the home page a long title rendered extra lines that
* spilled up over the product image. Only the spacing below it is set here. */
.home .wd-products .product-element-bottom .wd-entities-title {
margin-bottom: 12px !important;}
.home .wd-products .wd-product-stock {
min-height: 26px;
margin-bottom: 8px !important;}
.home .wd-products .wrap-price {
min-height: 28px;
margin-bottom: 12px !important;}
.home .wd-products .wd-add-btn {
margin-top: auto;}
@media (max-width: 1024px) {
.home .wd-products .wd-product-thumb {
height: 250px;}}
@media (max-width: 767px) {
.home .wd-products .wd-product-thumb {
height: 210px;}}
.MainBanner .wpb_wrapper {
height: 100%;}
.MainBanner .wpb_wrapper .wpb_single_image.wpb_content_element.vc_align_left.wd-animation-slide-from-right.wd-animation-normal.wd-animation-ready.wd-animated , .MainBanner .wpb_wrapper .wpb_single_image.wpb_content_element.vc_align_left.wd-animation-slide-from-left.wd-animation-normal.wd-animation-ready.wd-animated {
height: 100%;}
.MainBanner .wpb_wrapper .vc_single_image-wrapper.vc_box_border_grey , .MainBanner .wpb_wrapper .vc_single_image-wrapper.vc_box_border_grey img {
height: 100%;
object-fit: cover;}
.wpcf7-response-output {
display: none;}
.cust-sec .vc_column-inner {
padding-top: 0px !important;}
fieldset.hidden-fields-container {
display: none;}
.widgettitle, .widget-title {
margin-bottom: 10px !important;}
.mo-flex-space-between {
flex-wrap: wrap !important;}
.scrollToTop.button-show {
background-color: #9CAF88 !important;
color: #fff !important;}
#custom_html-2 figure.wpb_wrapper.vc_figure img {
width: 130px !important;}
.mo-flex-space-between button.woocommerce-Button.button, .mo-flex-space-between button.button.woocommerce-button.woocommerce-form-login__submit {
width: 100% !important;
height: auto !important;
padding: 0px 20px !important;}
button#share-cart-btn {
background-color: #f6983500 !important;
color: #6f8293 !important;
border-radius: 5px !important;
border: 1px solid #6f8293 !important;}
button#share-cart-btn:hover {
background-color: #9caf88 !important;
color: #fff !important;
border: 1px solid #9caf88 !important;}
.wd-brands .wd-brand-item:hover {
transform: scale(1.2);
transition: .5s !important;}
.wd-brands .wd-brand-item {
transition: .5s !important;
height: -webkit-fill-available;
background-color: #f3f3f3 !important;
padding: 30px !important;}
.wd-brands.wd-style-bordered.wd-layout-grid .wd-col {
border: none !important;}
/* Banner CSS */
.MainBanner .wpb_single_image {
margin: 0 !important;}
.ImageText {
padding: 0 120px 0 120px !important;}
.ImageText h1.MainHeading {
font-family: 'Nunito' !important;
font-size: 42px !important;
text-transform: uppercase !important;
padding: 0 !important;
line-height: 55px !important;
color: #fff !important;
margin-bottom: 10px !important;}
.home .MainBanner .ImageText h1,
.home .MainBanner .ImageText h1.MainHeading,
.home .MainBanner .ImageText .MainHeading,
.home .MainBanner .ImageText h2,
.home .MainBanner .ImageText h3 {
color: #ffffff !important;
text-transform: uppercase !important;
font-family: 'Nunito' !important;
font-size: clamp(42px, 4.1vw, 64px) !important;
line-height: 1.22 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;}
.home .MainBanner .ImageText h4,
.home .MainBanner .ImageText h4.SubHeading,
.home .MainBanner .ImageText .SubHeading,
.home .MainBanner .ImageText p.MainPara,
.home .MainBanner .ImageText p {
color: #ffffff !important;}
.ImageText h4.SubHeading {
font-family: 'Nunito' !important;
font-size: 24px !important;
margin-bottom: 10px !important;
padding: 0 !important;
line-height: 33px !important;
color: #fff !important;
font-weight: 600 !important;}
.ImageText p.MainPara {
font-family: 'Inter' !important;
font-size: 19px !important;
text-transform: none !important;
color: #fff !important;
margin-bottom: 28px !important;
padding: 0 !important;
font-weight: 400 !important;}
a.MainButton {
padding: 20px 40px !important;
background-color: #ffffff !important;
color: #9caf88 !important;
font-family: 'Nunito' !important;
border-radius: 10px !important;
text-transform: uppercase !important;
font-weight: 700 !important;}
/* Banner CSS End */
.p0 .vc_column-inner {
padding: 0 !important;}
.menu-item .wd-dropdown-menu {
padding: 30px 20px 30px 80px !important;}
.wd-dropdown-menu ul img.wd-nav-img {
background-color: #9caf88 !important;
width: 40px !important;
height: 40px !important;
max-height: 40px !important;
padding: 8px !important;
border-radius: 100px !important;}
li .wd-dropdown-menu a.woodmart-nav-link {
font-family: 'Nunito' !important;
font-size: 18px !important;
color: #000 !important;}
ul.sub-sub-menu li.menu-item-type-taxonomy a {
background-color: transparent !important;
font-size: unset !important;
margin-top: 10px !important;
padding: 0 !important;
color: #000 !important;}
.whb-top-bar {
padding: 0 !important;
border-bottom-width: 0 !important;
border-bottom-style: none !important;}
@media (min-width: 1025px) {
html:root {
--wd-top-bar-h: 40px;
--wd-top-bar-brd-w: .00001px;
--wd-header-general-h: 64px;
--wd-header-general-sticky-h: 60px;}
.whb-general-header-inner {
height: 64px !important;
max-height: 64px !important;}
.whb-sticked:not(.whb-clone) .whb-general-header-inner {
height: 60px !important;
max-height: 60px !important;}}
.AboutSection .wd-info-box {
display: flex !important;
align-items: center !important;}
.category-grid-item:hover .wd-cat-image {
transform: scale3d(1.1, 1.1, 1) !important;
opacity: 0.5 !important;
transition: .5s !important;}
.category-grid-item .wd-cat-image {
transition: .5s !important;}
.wd-nav-main .menu-item ul.wd-sub-menu {
display: flex !important;
gap: 100px !important;}
.AboutSection .info-box-icon img {
filter: invert(1) brightness(100) !important;}
.wd-carousel-item .wd-with-subcat .wd-cat-content.hover-mask h3 {
color: #fff !important;
background-color: #000000c7 !important;
padding: 7px 20px !important;
border-radius: 5px !important;
font-family: 'Nunito' !important;
font-size: 15px !important;}
.wd-carousel-item .wd-with-subcat .wd-cat-content.hover-mask .wd-cat-count a {
color: #000 !important;
font-size: 15px !important;
font-weight: 600 !important;
text-shadow: 0px 0px 8px white !important;}
.MainBanner .wpb_text_column.wpb_content_element.ImageText {
padding-block: 20px !important;
padding-inline: 40px !important;
margin-bottom: 50px;}
.wd-header-main-nav ul.sub-sub-menu {
display: flex;
flex-wrap: wrap;
width: 100%;}
li#menu-item-7695 {
width: 100% !important;
display: block;}
li#menu-item-7695 {
--wd-f-basis: 40%;}
li#menu-item-7695 ul.sub-sub-menu li {
width: 50%;
justify-content: space-between;}
li#menu-item-7696 ul.sub-sub-menu {
display: block;}
.wd-product-footer {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;}
.wd-product.wd-hover-buttons-on-hover .wd-action-buttons {
display: block !important;}
a.button.product_type_variable {
font-size: 11px;}
.bwf-inner-col .btn.btn-color-primary {
margin: 0px !important;
background: #f58634;
width: 240px;
margin-bottom: 10px !important;}
.bwf-inner-col .btn.btn-color-primary a {
color: #fff !important;}
@media (max-width: 1024px){
li#menu-item-7695 ul.sub-sub-menu li {
width: 100%;}
li#menu-item-7695 {
--wd-f-basis: 100% !important;
display: flex;}
.whb-top-bar .wd-header-text.reset-last-child:last-child {
position: absolute !important;
right: 0;}}
@media only screen and (max-width:767px){
.home .MainBanner .ImageText h1,
.home .MainBanner .ImageText h1.MainHeading,
.home .MainBanner .ImageText .MainHeading,
.home .MainBanner .ImageText h2,
.home .MainBanner .ImageText h3 {
font-size: 34px !important;
line-height: 1.22 !important;}
.MainBanner .wpb_text_column.wpb_content_element.ImageText a.MainButton {
font-size: 12px !important;}
.MainBanner .wpb_text_column.wpb_content_element.ImageText {
padding-inline: 15px !important;}
h2 {
font-size: 25px !important;}
h3 {
font-size: 15px !important;}
.AboutSection p {
font-size: 15px !important;}
.AboutSection p {
font-size: 15px !important;}
.ImageText {
padding: 10px !important;}
.wrap-price {
font-size: 14px !important;}
.wd-carousel-item .wd-with-subcat .wd-cat-content.hover-mask h3 {
padding: 6px 15px !important;
font-size: 12px !important;}
.ShampooSection {
padding: 0 !important;}
.info-box-wrapper .box-with-icon .info-box-icon .info-svg-wrapper {
width: 30px !important;
height: 30px !important;}
.vc_hidden-xs {
display: block !important;
margin-left: 10px !important;}
.ImageText h1.MainHeading {
font-size: 16px !important;
line-height: 25px !important;}
.ImageText h4.SubHeading {
font-size: 14px !important;
line-height: 27px !important;}
.ImageText p.MainPara {
font-size: 12px !important;
line-height: 25px !important;}
a.MainButton {
padding: 15px 30px !important;
font-size: 14px;}
.SaleSection {
padding: 0 0 30px 0 !important;}
.CustomHeading {
font-size: 30px !important;}
ul.sub-sub-menu li.menu-item-type-taxonomy a {
margin-top: 0 !important;
margin-left: 20px !important;}
.product_title {
font-size: 18px;}
.box-icon-with-bg .info-box-icon {
padding: 15px !important;}
.wd-fontsize-s {
font-size: 15px !important;}
.AboutSection .wd-info-box {
gap: 10px !important;}}
@media (max-width: 310px){
.whb-top-bar-inner .wd-header-text.reset-last-child:last-child {
position: unset !important;}}
.kajo-contact-layout {
padding: 70px 0 0;}
.kajo-contact-shell {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
gap: 34px;
align-items: stretch;
max-width: 1180px;
margin: 0 auto 70px;
padding: 0 20px;}
.kajo-contact-form-panel,
.kajo-contact-info-panel {
border-radius: 8px;}
.kajo-contact-form-panel {
padding: 8px 0;}
.kajo-contact-kicker {
margin: 0 0 12px;
color: #9caf88;
font-size: 13px;
font-weight: 700;
letter-spacing: 6px;
text-transform: uppercase;}
.kajo-contact-kicker:before {
content: "";
display: inline-block;
width: 22px;
height: 1px;
margin: 0 12px 4px 0;
background: #cda45e;}
.kajo-contact-form-panel h2 {
margin: 0 0 12px;
color: #101820;
font-size: 42px;
line-height: 1.15;
font-weight: 800;}
.kajo-contact-copy {
max-width: 650px;
margin: 0 0 26px;
color: #4f5f56;
font-size: 17px;
line-height: 1.7;}
.kajo-contact-form-panel .wpcf7-form label {
display: block;
/* The single source of vertical rhythm in this form. */
margin-bottom: 20px;
color: #1f2f28;
font-size: 14px;
font-weight: 700;}
/* Contact Form 7 wraps every field in a of its OWN - the markup is
`
…
`, not the other way round - and that paragraph
carries the theme's 20px bottom margin on top of the label's. The two
stacked, so the first gap measured 40px against 20px further down. The
label owns the rhythm; the wrapper contributes nothing. */
.kajo-contact-form-panel .wpcf7-form p {
margin: 0;}
.kajo-cf7-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Column gap only. When this collapses to one column on a phone, a row
gap would stack on top of the label's own bottom margin and the gap
between Name and Email came out at 52px against 16px and 20px for the
fields below it - measured. The rhythm is owned by the label margin
alone, so it is the same everywhere. */
gap: 0 20px;}
.kajo-contact-form-panel .wpcf7 input:not([type="submit"]),
.kajo-contact-form-panel .wpcf7 textarea {
width: 100%;
margin-top: 7px;
border: 1px solid #e3e6e1;
border-radius: 8px;
background: #f7f8f6;
color: #1f2f28;
box-shadow: none;
/* Each field sits INSIDE its , which is 700, and the theme gives
form controls `font: inherit` - so every box of typed text and every
placeholder came out as bold as the label above it. The label stays
bold; what the visitor types does not. */
font-weight: 400;
/* 16px is not a style choice. Safari on iOS zooms the page in when a
field smaller than 16px takes focus, and then leaves it zoomed - the
form was at 14px. The desktop size is set back below. */
font-size: 16px;
line-height: 1.5;}
@media (min-width: 601px) {
.kajo-contact-form-panel .wpcf7 input:not([type="submit"]),
.kajo-contact-form-panel .wpcf7 textarea {
font-size: 15px;}}
/* A placeholder that is the same weight and colour as a real answer reads as
a filled-in field - the form looked completed before it was touched. */
.kajo-contact-form-panel .wpcf7 input:not([type="submit"])::placeholder,
.kajo-contact-form-panel .wpcf7 textarea::placeholder {
color: #8a968f;
font-weight: 400;
opacity: 1;}
.kajo-contact-form-panel .wpcf7 input:not([type="submit"]) {
min-height: 48px;}
.kajo-contact-form-panel .wpcf7 textarea {
min-height: 170px;
resize: vertical;}
.kajo-contact-form-panel .wpcf7 input:focus,
.kajo-contact-form-panel .wpcf7 textarea:focus {
border-color: #9caf88;
background: #fff;}
.kajo-submit-wrap {
position: relative;
display: inline-flex;
align-items: center;
min-height: 48px;
margin-top: 4px;
padding-left: 34px;
isolation: isolate;}
.kajo-submit-wrap p {
margin: 0;}
.kajo-submit-wrap:before {
content: "\f061";
position: absolute;
left: 0;
top: 50%;
z-index: 2;
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border: 2px solid #101820;
border-radius: 50%;
background: #fff;
color: #101820;
font-family: "Font Awesome 5 Free";
font-size: 14px;
font-weight: 900;
transform: translateY(-50%);
transition: transform .28s ease, background-color .28s ease, color .28s ease, border-color .28s ease;}
.kajo-contact-submit,
.kajo-contact-form-panel .wpcf7-submit {
position: relative;
z-index: 1;
min-width: 158px;
min-height: 42px;
padding: 0 28px 0 38px !important;
border: 0 !important;
border-radius: 999px;
background: #f58634 !important;
color: #fff !important;
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
box-shadow: none;
transition: transform .28s ease, background-color .28s ease, color .28s ease, box-shadow .28s ease;}
.kajo-submit-wrap:hover:before,
.kajo-submit-wrap:focus-within:before {
border-color: #9caf88;
background: #9caf88;
color: #fff;
transform: translate(10px, -50%);}
.kajo-submit-wrap:hover .wpcf7-submit,
.kajo-submit-wrap:focus-within .wpcf7-submit {
background: #9caf88 !important;
color: #fff !important;
box-shadow: 0 12px 24px rgba(156, 175, 136, .24);
transform: translateX(8px);}
.kajo-contact-form-panel .wpcf7-spinner {
margin-left: 12px;}
.kajo-contact-info-panel {
padding: 32px;
background: #9caf88;
color: #fff;
box-shadow: 0 18px 45px rgba(30, 58, 49, .16);}
.kajo-contact-info-panel h3 {
margin: 0 0 10px;
color: #fff;
font-size: 22px;
line-height: 1.25;}
.kajo-contact-info-panel p {
margin: 0;
color: rgba(255,255,255,.82);
line-height: 1.7;}
.kajo-contact-info-panel a,
.kajo-contact-info-panel .kajo-email-text {
color: #fff;}
.kajo-contact-info-group {
margin-bottom: 30px;}
.kajo-social-links {
display: flex;
gap: 12px;}
.kajo-social-links a {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f58634;
color: #fff !important;
font-size: 17px;
transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease;}
/* The marks are drawn, not fonted - the same inline SVGs the footer uses, so
there is no brands webfont to load for two icons. `currentColor` lets the
chip's own colour drive them. */
.kajo-social-links a svg {
width: 18px;
height: 18px;
fill: currentColor;}
.kajo-social-links a:hover,
.kajo-social-links a:focus-visible {
/* Was a blue-grey, which belongs to no other part of this palette.
Deepening the orange keeps the hover on-brand. */
background: #d96f1f;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(31, 47, 40, .18);}
.kajo-social-links a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;}
.kajo-contact-map {
height: 360px;
margin: 0 0 42px;
background: #eef0ec;}
.kajo-contact-map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(100%) contrast(.9) brightness(1.08);}
.kajo-contact-trust {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 1180px;
margin: 0 auto 65px;
padding: 0 20px;}
.kajo-contact-trust div {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
column-gap: 14px;
align-items: center;}
.kajo-contact-trust i {
grid-row: span 2;
display: inline-flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border: 2px solid #9caf88;
border-radius: 50%;
color: #2e5649;
font-size: 19px;}
.kajo-contact-trust strong {
color: #1f2f28;
font-size: 16px;}
.kajo-contact-trust span {
color: #69746d;
font-size: 14px;}
@media (max-width: 900px) {
.kajo-contact-shell,
.kajo-contact-trust {
grid-template-columns: 1fr;}
.kajo-contact-form-panel h2 {
font-size: 34px;}}
@media (max-width: 600px) {
.kajo-contact-layout {
padding-top: 42px;}
.kajo-cf7-grid {
grid-template-columns: 1fr;}
.kajo-contact-info-panel {
padding: 26px 22px;}
.kajo-contact-map {
height: 300px;}
/* On a phone the whole page is one column, so the 70px that separated the
two columns' worth of content now just reads as a hole between the
green card and the map. */
.kajo-contact-shell {
margin-bottom: 38px;}
.kajo-contact-map {
margin-bottom: 30px;}
.kajo-contact-form-panel h2 {
font-size: 28px;}
.kajo-contact-copy {
margin-bottom: 22px;
font-size: 15.5px;}
/* The send button and its arrow sat hard against the left edge. */
.kajo-submit-wrap {
margin-top: 2px;}
.kajo-contact-trust {
margin-bottom: 44px;}
.kajo-contact-trust div {
align-items: start;}}
.kajo-faq-hero {
margin-top: 0;
padding: 46px 20px 18px;
background: linear-gradient(180deg, #f7f8f5 0%, #fff 100%);}
.kajo-faq-hero-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;}
.kajo-faq-eyebrow,
.kajo-faq-newsletter-label {
margin: 0 0 12px;
color: #9caf88;
font-size: 13px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;}
.kajo-faq-hero h1 {
margin: 0 0 16px;
color: #101820;
font-size: 52px;
line-height: 1.1;
font-weight: 800;}
.kajo-faq-hero p,
.kajo-faq-seo-copy p {
margin-bottom: 0;
color: #4f5f56;
font-size: 17px;
line-height: 1.75;}
.kajo-faq-breadcrumb {
display: none;}
.kajo-faq-seo-copy {
max-width: 980px;
margin: 0 auto;
padding: 8px 20px 0;
text-align: center;}
.kajo-faq-main {
max-width: 1180px;
margin: 0 auto;
padding: 42px 20px 50px;}
.kajo-faq-main > .wpb_column:first-child {
padding-right: 22px;}
.kajo-faq-help-card {
position: sticky;
top: 120px;
padding: 32px 28px;
border: 1px solid #e8ece4;
border-radius: 12px;
background: #f7f8f5;
text-align: center;}
.kajo-faq-help-icon {
display: inline-flex;
width: 58px;
height: 58px;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border-radius: 50%;
background: #9caf88;
color: #fff;
font-size: 23px;}
.kajo-faq-help-card h2,
.kajo-faq-section-intro h2 {
margin: 0 0 12px;
color: #101820;
font-size: 30px;
line-height: 1.2;
font-weight: 800;}
.kajo-faq-help-card p,
.kajo-faq-section-intro p {
color: #5f6d64;
font-size: 15px;
line-height: 1.7;}
.kajo-faq-help-button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
margin-top: 12px;
padding: 0 24px;
border-radius: 999px;
background: #f58634;
color: #fff !important;
font-weight: 800;
transition: background-color .24s ease, transform .24s ease, box-shadow .24s ease;}
.kajo-faq-help-button:hover,
.kajo-faq-help-button:focus {
background: #9caf88;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(156, 175, 136, .24);}
.kajo-faq-section-intro {
margin-bottom: 24px;}
.kajo-faq-main .vc_tta-container {
margin-bottom: 0;}
.kajo-faq-main .vc_tta-panel {
margin-bottom: 14px;
border: 1px solid #e8ece4;
border-radius: 10px;
background: #fff;
overflow: hidden;
transition: border-color .24s ease, box-shadow .24s ease;}
.kajo-faq-main .vc_tta-panel:hover {
border-color: rgba(245, 134, 52, .45);
box-shadow: 0 12px 26px rgba(31, 47, 40, .08);}
.kajo-faq-main .vc_tta-panel-heading {
border: 0 !important;
background: transparent !important;}
.kajo-faq-main .vc_tta-panel-title > a {
padding: 20px 58px 20px 22px !important;
color: #101820 !important;
font-size: 17px;
font-weight: 800;}
.kajo-faq-main .vc_tta-panel.vc_active {
border-color: #9caf88;
background: #9caf88;}
.kajo-faq-main .vc_tta-panel.vc_active .vc_tta-panel-title > a,
.kajo-faq-main .vc_tta-panel.vc_active .vc_tta-controls-icon:before,
.kajo-faq-main .vc_tta-panel.vc_active .vc_tta-controls-icon:after {
color: #fff !important;
border-color: #fff !important;}
.kajo-faq-main .vc_tta-panel-body {
border: 0 !important;
background: transparent !important;
color: #fff;
padding: 0 22px 22px !important;}
.kajo-faq-main .vc_tta-panel:not(.vc_active) .vc_tta-panel-body {
color: #4f5f56;}
.kajo-faq-trust {
max-width: 1180px;
margin: 0 auto;
padding: 22px 20px 64px;}
.kajo-faq-benefit {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 14px;
align-items: center;}
.kajo-faq-benefit i {
grid-row: span 2;
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f58634;
color: #fff;
font-size: 18px;}
.kajo-faq-benefit strong {
color: #101820;
font-size: 17px;}
.kajo-faq-benefit span {
color: #69746d;
font-size: 14px;
line-height: 1.45;}
.kajo-faq-newsletter {
padding: 70px 20px;
background: #f7f8f5;}
.kajo-faq-newsletter-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;}
.kajo-faq-newsletter h2 {
max-width: 680px;
margin: 0 auto 14px;
color: #101820;
font-size: 38px;
line-height: 1.2;
font-weight: 800;}
.kajo-faq-newsletter p {
color: #5f6d64;}
.kajo-faq-newsletter-form {
max-width: 520px;
margin: 24px auto 0;}
.kajo-faq-newsletter-form form {
display: flex;
gap: 10px;
align-items: center;}
.kajo-faq-newsletter-form label {
flex: 1;
margin: 0;}
.kajo-faq-newsletter-form input[type="email"] {
min-height: 48px;
border: 0;
border-radius: 999px;
background: #fff;}
.kajo-faq-newsletter-form input[type="submit"] {
min-height: 48px;
border-radius: 999px;
background: #f58634 !important;
color: #fff !important;
font-weight: 800;}
.kajo-faq-newsletter-form input[type="submit"]:hover {
background: #9caf88 !important;}
.kajo-faq-newsletter-form .wpcf7-response-output {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 99999;
display: block;
max-width: 360px;
min-height: 64px;
margin: 0 !important;
padding: 16px 18px 16px 58px !important;
border: 0 !important;
border: 1px solid rgba(31, 47, 40, .08) !important;
border-left: 5px solid #f58634 !important;
border-radius: 8px;
background: #fff !important;
color: #1f2f28 !important;
font-size: 15px;
line-height: 1.55;
text-align: left;
box-shadow: 0 18px 44px rgba(31, 47, 40, .22);
animation: kajoToastIn .28s ease both;}
.kajo-faq-newsletter-form .wpcf7-response-output:empty {
display: none;}
.kajo-faq-newsletter-form .wpcf7-response-output:before {
content: "!";
position: absolute;
left: 22px;
top: 50%;
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
margin-top: 0;
border-radius: 50%;
background: #f58634;
color: #fff !important;
font-size: 14px;
font-weight: 800;
transform: translateY(-50%);}
.kajo-faq-newsletter-form form.sent .wpcf7-response-output {
border-left-color: #9caf88 !important;
color: #1f2f28 !important;}
.kajo-faq-newsletter-form form.sent .wpcf7-response-output:before {
content: "\f00c";
background: #9caf88;
font-family: "Font Awesome 5 Free";
font-size: 12px;
font-weight: 900;}
.kajo-faq-newsletter-form form.invalid .wpcf7-response-output,
.kajo-faq-newsletter-form form.failed .wpcf7-response-output,
.kajo-faq-newsletter-form form.spam .wpcf7-response-output {
border-left-color: #f58634 !important;
color: #1f2f28 !important;}
@keyframes kajoToastIn {
from {
opacity: 0;
transform: translateY(14px);}
to {
opacity: 1;
transform: translateY(0);}}
@media (max-width: 900px) {
.kajo-faq-hero h1 {
font-size: 40px;}
.kajo-faq-main > .wpb_column:first-child {
padding-right: 0;
margin-bottom: 26px;}
.kajo-faq-help-card {
position: static;}}
@media (max-width: 600px) {
.kajo-faq-hero {
padding: 38px 16px 14px;}
.kajo-faq-hero h1,
.kajo-faq-newsletter h2 {
font-size: 32px;}
.kajo-faq-main {
padding: 28px 16px 40px;}
.kajo-faq-newsletter-form form {
display: block;}
.kajo-faq-newsletter-form input[type="submit"] {
width: 100%;
margin-top: 10px;}
.kajo-faq-newsletter-form .wpcf7-response-output {
right: 16px;
bottom: 16px;
left: 16px;
max-width: none;}}
body.page-id-658 .page-title,
body.page-id-658 .title-size-default,
body.page-id-658 .title-size-small,
body.page-id-658 .title-size-large {
background: #9caf88 !important;}
body.page-id-658 .page-title .entry-title,
body.page-id-658 .page-title .title,
body.page-id-658 .page-title h1,
body.page-id-658 .page-title a,
body.page-id-658 .page-title .breadcrumbs,
body.page-id-658 .page-title .yoast-breadcrumb {
color: #fff !important;}
.kajo-policy-page {
padding: 0 20px 92px;
background: linear-gradient(180deg, #eef3ea 0%, #f7f9fb 42%, #dfeafa 100%);}
.kajo-policy-hero {
max-width: 1120px;
margin: 0 auto;
padding: 46px 24px 34px;
text-align: center;}
.kajo-policy-eyebrow {
margin: 0 0 12px;
color: #9caf88;
font-size: 13px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;}
.kajo-policy-hero h1 {
margin: 0 0 14px;
color: #101820;
font-size: 34px;
line-height: 1.1;
font-weight: 800;}
.kajo-policy-hero p {
max-width: 780px;
margin: 0 auto;
color: #55645b;
font-size: 16px;
line-height: 1.75;}
.kajo-policy-shell {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 52px;
max-width: 1240px;
margin: 0 auto;
padding: 58px 64px;
border: 1px solid rgba(232, 236, 228, .9);
border-radius: 4px;
background: #fff;
box-shadow: 0 28px 90px rgba(58, 83, 109, .16);}
.kajo-policy-nav {
position: sticky;
top: 118px;
align-self: start;
max-height: calc(100vh - 150px);
padding: 0 0 0 18px;
border-left: 1px solid #dfe6dc;
overflow: auto;
scrollbar-width: thin;}
.kajo-policy-nav a {
display: block;
padding: 13px 0 13px 18px;
border-left: 3px solid transparent;
color: #5f6d64;
font-size: 15px;
line-height: 1.35;
transform: translateX(-21px);
transition: color .22s ease, border-color .22s ease, font-weight .22s ease;}
.kajo-policy-nav a.is-active {
border-left-color: #f58634;
color: #f58634;
font-weight: 800;}
.kajo-policy-nav a:hover,
.kajo-policy-nav a:focus {
border-left-color: #f58634;
color: #f58634;}
.kajo-policy-card {
color: #3f4c44;
font-size: 17px;
line-height: 1.9;}
.kajo-policy-card p {
margin-bottom: 22px;}
.kajo-policy-card strong {
color: #101820;
font-weight: 800;}
.kajo-policy-card ol {
margin: 0;
padding: 0;
list-style: none;}
.kajo-policy-card li {
margin: 42px 0 18px;
color: #101820;
font-size: 24px;
line-height: 1.35;
font-weight: 800;}
.kajo-policy-card li::marker {
content: "";}
.kajo-policy-card strong {
font-weight: 800;}
.kajo-policy-heading {
display: block;
margin: 42px 0 18px;
color: #101820;
font-size: 24px;
line-height: 1.35;
font-weight: 800;
scroll-margin-top: 145px;}
.kajo-policy-card a {
color: #f58634;}
.kajo-policy-anchor {
display: block;
height: 1px;
scroll-margin-top: 145px;}
body.page-id-3 .page-title,
body.page-id-3 .title-size-default,
body.page-id-3 .title-size-small,
body.page-id-3 .title-size-large {
background: #9caf88 !important;}
body.page-id-3 .page-title .entry-title,
body.page-id-3 .page-title .title,
body.page-id-3 .page-title h1,
body.page-id-3 .page-title a,
body.page-id-3 .page-title .breadcrumbs,
body.page-id-3 .page-title .yoast-breadcrumb {
color: #fff !important;}
@media (max-width: 900px) {
.kajo-policy-shell {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px;}
.kajo-policy-nav {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding-left: 0;
border-left: 0;}
.kajo-policy-nav a,
.kajo-policy-nav a.is-active {
transform: none;
padding: 10px 12px;
border: 1px solid #e8ece4;
border-radius: 8px;}}
@media (max-width: 600px) {
.kajo-policy-page {
padding: 0 14px 54px;}
.kajo-policy-hero {
padding: 46px 10px 34px;}
.kajo-policy-hero h1 {
font-size: 34px;}
.kajo-policy-shell {
padding: 20px;}
.kajo-policy-nav {
grid-template-columns: 1fr;}}
/* Returns page heading, 2GE.
*
* This block used to be display:none. The page then had no visible h1 at all: the theme
* title is the document's first h1, the child theme's h1 normaliser keeps the first h1
* and demotes any later one, so the hero's own heading was demoted to an h2 - and the
* only real h1 on the page was the one being hidden here. Measured at 0x0.
*
* The title block is shown again, which is how /privacy-policy/ and /contact-us/ already
* behave, and the hero's demoted duplicate of the same words is hidden instead. The
* hero's kicker, subtitle and artwork are untouched, so the page keeps its design and
* gains exactly one visible h1. */
.page-id-10336 .kajo-returns-hero > h2 {
display: none;}
.kajo-returns-page {
background: linear-gradient(180deg, #f7f9f4 0%, #ffffff 42%, #f4f7f0 100%);
padding: 42px 18px 88px;}
.kajo-returns-hero {
position: relative;
max-width: 1180px;
min-height: 280px;
margin: 0 auto 64px;
overflow: hidden;
border: 14px solid #ffffff;
border-radius: 26px;
background: #9cb08b;
box-shadow: 0 24px 70px rgba(156, 176, 139, 0.24);}
.kajo-returns-hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(156, 176, 139, 0.96), rgba(132, 154, 116, 0.94)),
radial-gradient(circle at 16% 92%, rgba(245, 134, 52, 0.22), transparent 32%),
radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.24), transparent 30%);}
.kajo-returns-hero-content {
position: relative;
z-index: 1;
display: flex;
min-height: 280px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
color: #ffffff;}
.kajo-returns-logo {
width: 74px;
height: auto;
margin-bottom: 14px;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));}
.kajo-returns-kicker,
.kajo-returns-eyebrow {
margin: 0 0 10px;
color: #f58634;
font-size: 13px;
font-weight: 800;
letter-spacing: 2.4px;
text-transform: uppercase;}
.kajo-returns-hero .kajo-returns-kicker {
color: #ffffff;}
.kajo-returns-hero h1 {
margin: 0 0 14px;
color: #ffffff !important;
font-size: clamp(38px, 6vw, 74px);
line-height: 1.04;
font-weight: 800;}
.kajo-returns-hero p:last-child {
max-width: 650px;
margin: 0;
color: #ffffff;
font-size: 18px;
line-height: 1.7;}
.kajo-returns-shell {
display: grid;
grid-template-columns: minmax(190px, 250px) minmax(0, 780px);
gap: 72px;
align-items: start;
justify-content: center;
max-width: 1180px;
margin: 0 auto;}
.kajo-returns-nav {
position: sticky;
top: 118px;
padding: 8px 0;}
.kajo-returns-nav p {
margin: 0 0 16px;
color: #101820;
font-size: 15px;
font-weight: 800;}
.kajo-returns-nav a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
margin: 0 0 8px;
padding: 9px 12px;
border-radius: 6px;
color: #5f6d64;
font-size: 14px;
font-weight: 700;
line-height: 1.35;}
.kajo-returns-nav a:before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 8px;
border: 2px solid currentColor;
border-radius: 50%;
opacity: 0.65;}
.kajo-returns-nav a:hover,
.kajo-returns-nav a:focus,
.kajo-returns-nav a.is-active {
background: #f58634;
color: #ffffff;}
.kajo-returns-card {
color: #26362e;
font-size: 16px;
line-height: 1.85;}
.kajo-returns-section {
padding-bottom: 44px;
scroll-margin-top: 130px;}
.kajo-returns-section h2,
.kajo-returns-help h2 {
margin: 0 0 18px;
color: #101820;
font-size: 30px;
line-height: 1.25;
font-weight: 800;}
.kajo-returns-section h3 {
margin: 0 0 9px;
color: #101820;
font-size: 18px;
line-height: 1.35;
font-weight: 800;}
.kajo-returns-section p {
margin: 0 0 18px;}
.kajo-returns-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 24px;}
.kajo-returns-feature-grid div {
min-height: 188px;
padding: 24px;
border: 1px solid #e5eadf;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 12px 34px rgba(31, 47, 40, 0.06);}
.kajo-returns-feature-grid span {
display: inline-flex;
min-width: 42px;
height: 42px;
align-items: center;
justify-content: center;
margin-bottom: 18px;
padding: 0 11px;
border-radius: 999px;
background: #9cb08b;
color: #ffffff;
font-size: 13px;
font-weight: 800;}
.kajo-returns-checklist {
display: grid;
gap: 12px;
margin: 22px 0 24px;
padding: 0;
list-style: none;}
.kajo-returns-checklist li {
position: relative;
padding-left: 34px;}
.kajo-returns-checklist li:before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #f58634;
box-shadow: inset 0 0 0 5px #ffffff, 0 0 0 1px #f58634;}
.kajo-returns-help {
display: flex;
gap: 24px;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding: 34px;
border-radius: 18px 18px 54px 18px;
background: #9cb08b;
color: #ffffff;}
.kajo-returns-help h2,
.kajo-returns-help p,
.kajo-returns-help .kajo-returns-eyebrow {
color: #ffffff;}
.kajo-returns-help p {
max-width: 570px;
margin: 0;}
.kajo-returns-help a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 0 28px;
border-radius: 999px;
background: #f58634;
color: #ffffff;
font-weight: 800;
white-space: nowrap;}
.kajo-returns-help a:hover,
.kajo-returns-help a:focus {
background: #ffffff;
color: #f58634;}
@media (max-width: 900px) {
.kajo-returns-page {
padding: 22px 14px 64px;}
.kajo-returns-hero {
min-height: 240px;
margin-bottom: 38px;
border-width: 8px;
border-radius: 20px;}
.kajo-returns-shell {
grid-template-columns: 1fr;
gap: 28px;}
.kajo-returns-nav {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;}
.kajo-returns-nav p {
grid-column: 1 / -1;}
.kajo-returns-nav a {
margin: 0;}
.kajo-returns-feature-grid {
grid-template-columns: 1fr;}
.kajo-returns-help {
align-items: flex-start;
flex-direction: column;}}
@media (max-width: 560px) {
.kajo-returns-hero-content {
min-height: 230px;
padding: 34px 18px;}
.kajo-returns-hero p:last-child {
font-size: 16px;}
.kajo-returns-nav {
grid-template-columns: 1fr;}
.kajo-returns-section h2,
.kajo-returns-help h2 {
font-size: 25px;}}
body.page-id-3,
body.page-id-10336 {
overflow-x: hidden;}
.kajo-policy-page,
.kajo-returns-page,
.kajo-policy-page *,
.kajo-returns-page * {
box-sizing: border-box;}
.kajo-policy-card,
.kajo-returns-card {
overflow-wrap: anywhere;}
@media (max-width: 768px) {
body.page-id-3 .main-page-wrapper,
body.page-id-10336 .main-page-wrapper,
body.page-id-3 .site-content,
body.page-id-10336 .site-content {
overflow-x: hidden;}
.kajo-policy-page,
.kajo-returns-page {
width: 100%;
padding-right: 14px;
padding-left: 14px;}
.kajo-policy-hero {
max-width: 100%;
padding: 42px 10px 32px;}
.kajo-policy-hero h1 {
font-size: 34px;
line-height: 1.12;}
.kajo-policy-hero p {
max-width: 100%;
font-size: 15px;
line-height: 1.7;}
.kajo-policy-shell {
width: 100%;
max-width: 100%;
padding: 18px;
border-radius: 14px;
box-shadow: 0 14px 36px rgba(31, 47, 40, 0.08);}
.kajo-policy-nav {
width: 100%;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 18px;
padding: 0;
border-left: 0;}
.kajo-policy-nav a,
.kajo-policy-nav a.is-active {
min-height: 44px;
padding: 10px 11px;
border: 1px solid #e6ece1;
border-radius: 8px;
font-size: 13px;
line-height: 1.25;}
.kajo-policy-nav a.is-active,
.kajo-policy-nav a:hover,
.kajo-policy-nav a:focus {
border-color: #f58634;
background: #fff5ed;
color: #f58634;}
.kajo-policy-card {
width: 100%;
font-size: 15px;
line-height: 1.75;}
.kajo-policy-card p {
margin-bottom: 16px;}
.kajo-policy-heading,
.kajo-policy-card li {
margin: 30px 0 14px;
font-size: 22px;
line-height: 1.3;
scroll-margin-top: 98px;}
.kajo-returns-page {
padding-top: 18px;
padding-bottom: 58px;}
.kajo-returns-hero {
width: 100%;
max-width: 100%;
min-height: auto;
margin-bottom: 34px;
border-width: 7px;
border-radius: 18px;
box-shadow: 0 16px 38px rgba(156, 176, 139, 0.18);}
.kajo-returns-hero-content {
min-height: 220px;
padding: 30px 16px;}
.kajo-returns-logo {
width: 58px;
margin-bottom: 12px;}
.kajo-returns-kicker,
.kajo-returns-eyebrow {
font-size: 11px;
letter-spacing: 1.8px;}
.kajo-returns-hero h1 {
font-size: 34px;
line-height: 1.12;}
.kajo-returns-hero p:last-child {
max-width: 100%;
font-size: 15px;
line-height: 1.65;}
.kajo-returns-shell {
width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
gap: 24px;}
.kajo-returns-nav {
width: 100%;
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 0;}
.kajo-returns-nav p {
grid-column: 1 / -1;
margin-bottom: 4px;}
.kajo-returns-nav a {
min-height: 44px;
margin: 0;
padding: 10px 11px;
border: 1px solid #e6ece1;
background: #ffffff;
font-size: 13px;}
.kajo-returns-card {
width: 100%;
font-size: 15px;
line-height: 1.75;}
.kajo-returns-section {
padding-bottom: 32px;
scroll-margin-top: 98px;}
.kajo-returns-section h2,
.kajo-returns-help h2 {
font-size: 24px;
line-height: 1.28;}
.kajo-returns-feature-grid {
grid-template-columns: 1fr;
gap: 14px;}
.kajo-returns-feature-grid div {
min-height: 0;
padding: 20px;}
.kajo-returns-help {
gap: 18px;
padding: 24px 20px;
border-radius: 16px 16px 34px 16px;}}
@media (max-width: 420px) {
.kajo-policy-page,
.kajo-returns-page {
padding-right: 10px;
padding-left: 10px;}
.kajo-policy-shell {
padding: 14px;}
.kajo-policy-nav,
.kajo-returns-nav {
grid-template-columns: 1fr;}
.kajo-policy-hero h1,
.kajo-returns-hero h1 {
font-size: 30px;}
.kajo-policy-card,
.kajo-returns-card {
font-size: 14.5px;}
.kajo-policy-heading,
.kajo-policy-card li,
.kajo-returns-section h2,
.kajo-returns-help h2 {
font-size: 22px;}}
/* Terms page heading, 2GE. Same change and same reasoning as the returns page above. */
.page-id-10347 .kajo-terms-hero > h2 {
display: none;}
.kajo-terms-page {
min-height: 100vh;
padding: 72px 18px 96px;
background:
linear-gradient(180deg, #9cb08b 0%, #9cb08b 320px, #f4f7f0 320px, #f4f7f0 100%);
color: #eef5eb;}
.kajo-terms-hero {
max-width: 980px;
margin: 0 auto 66px;
text-align: center;}
.kajo-terms-kicker {
margin: 0 0 14px;
color: #ffffff;
font-size: 13px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;}
.kajo-terms-hero h1 {
margin: 0 0 14px;
color: #ffffff !important;
font-size: clamp(44px, 7vw, 82px);
line-height: 1.04;
font-weight: 800;}
.kajo-terms-hero p {
max-width: 670px;
margin: 0 auto;
color: #ffffff;
font-size: 16px;
line-height: 1.75;}
.kajo-terms-shell {
display: grid;
grid-template-columns: 245px minmax(0, 780px);
gap: 64px;
align-items: start;
max-width: 1120px;
margin: 0 auto;
padding: 44px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 28px 80px rgba(156, 176, 139, 0.2);}
.kajo-terms-nav {
position: sticky;
top: 118px;
padding-left: 16px;
border-left: 1px solid #e1e8dc;}
.kajo-terms-nav a {
display: block;
margin: 0 0 8px;
padding: 11px 12px;
border-left: 3px solid transparent;
border-radius: 7px;
color: #647367;
font-size: 14px;
font-weight: 700;
line-height: 1.35;}
.kajo-terms-nav a.is-active,
.kajo-terms-nav a:hover,
.kajo-terms-nav a:focus {
border-left-color: #f58634;
background: #fff5ed;
color: #f58634;}
.kajo-terms-card {
color: #33443a;
font-size: 16px;
line-height: 1.86;
overflow-wrap: anywhere;}
.kajo-terms-section {
padding-bottom: 42px;
border-bottom: 1px solid #e8eee3;
scroll-margin-top: 130px;}
.kajo-terms-section + .kajo-terms-section {
padding-top: 36px;}
.kajo-terms-section:last-child {
padding-bottom: 0;
border-bottom: 0;}
.kajo-terms-section h2 {
margin: 0 0 18px;
color: #101820;
font-size: 28px;
line-height: 1.28;
font-weight: 800;}
.kajo-terms-section h3 {
margin: 0 0 14px;
color: #9cb08b;
font-size: 18px;
line-height: 1.35;
font-weight: 800;}
.kajo-terms-section p {
margin: 0 0 18px;}
.kajo-terms-section p:last-child {
margin-bottom: 0;}
.kajo-terms-section strong {
color: #101820;
font-weight: 800;}
@media (max-width: 900px) {
.kajo-terms-page {
padding: 48px 14px 70px;
background:
linear-gradient(180deg, #9cb08b 0%, #9cb08b 250px, #f4f7f0 250px, #f4f7f0 100%);}
.kajo-terms-hero {
margin-bottom: 38px;}
.kajo-terms-hero h1 {
font-size: 42px;}
.kajo-terms-shell {
width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
gap: 26px;
padding: 22px;
border-radius: 16px;}
.kajo-terms-nav {
position: static;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
padding-left: 0;
border-left: 0;}
.kajo-terms-nav a {
min-height: 44px;
margin: 0;
padding: 10px 11px;
border: 1px solid #e6ece1;
border-left-width: 1px;
font-size: 13px;}
.kajo-terms-nav a.is-active,
.kajo-terms-nav a:hover,
.kajo-terms-nav a:focus {
border-color: #f58634;}
.kajo-terms-card {
width: 100%;
font-size: 15px;
line-height: 1.75;}
.kajo-terms-section {
padding-bottom: 32px;
scroll-margin-top: 98px;}
.kajo-terms-section + .kajo-terms-section {
padding-top: 30px;}
.kajo-terms-section h2 {
font-size: 24px;}}
@media (max-width: 460px) {
.kajo-terms-page {
padding: 36px 10px 58px;
background:
linear-gradient(180deg, #9cb08b 0%, #9cb08b 225px, #f4f7f0 225px, #f4f7f0 100%);}
.kajo-terms-hero h1 {
font-size: 34px;}
.kajo-terms-hero p {
font-size: 14.5px;}
.kajo-terms-shell {
padding: 16px;}
.kajo-terms-nav {
grid-template-columns: 1fr;}
.kajo-terms-section h2 {
font-size: 22px;}}
body.post-type-archive-product,
body.page-id-20970 {
background: #ffffff;
overflow-x: hidden;}
@media (min-width: 1025px) {
body.post-type-archive-product .whb-general-header,
body.post-type-archive-product .whb-general-header .whb-flex-row,
body.post-type-archive-product .whb-general-header .whb-column,
body.page-id-20970 .whb-general-header,
body.page-id-20970 .whb-general-header .whb-flex-row,
body.page-id-20970 .whb-general-header .whb-column {
height: 76px !important;
min-height: 76px !important;}
body.post-type-archive-product .whb-general-header .wd-logo img,
body.page-id-20970 .whb-general-header .wd-logo img {
max-height: 54px !important;}}
body.post-type-archive-product .main-page-wrapper,
body.post-type-archive-product .wd-page-content,
body.post-type-archive-product .content-layout-wrapper,
body.post-type-archive-product .wd-content-area,
body.page-id-20970 .main-page-wrapper {
padding-top: 0 !important;
margin-top: 0 !important;}
/* Layer 2DX: give the product SEARCH results page its header clearance back.
The rule above flattens the top spacing for body.post-type-archive-product,
which is right for the product archive and for page 20970 - both open with a
full-bleed hero that is meant to sit flush under the fixed header.
WordPress also puts post-type-archive-product on a ?s=...&post_type=product
search, and that page has no hero and no .wd-page-title block. The result was
that .shop-loop-head - the FILTERS button and the reset control - rendered at
top:0, underneath the fixed header and across the logo.
Scoped with .search so the two pages the original rule was written for are
untouched. The values are the measured header heights on this page: 76px,
and 62px once the mobile header takes over at 1024px. */
body.search.post-type-archive-product .main-page-wrapper,
body.search.post-type-archive-product .wd-page-content {
padding-top: 76px !important;}
body.search.post-type-archive-product .shop-loop-head {
padding-top: 14px !important;}
@media (max-width: 1024px) {
body.search.post-type-archive-product .main-page-wrapper,
body.search.post-type-archive-product .wd-page-content {
padding-top: var(--kajo-mobile-header-h, 62px) !important;}
body.search.post-type-archive-product .shop-loop-head {
padding-top: 10px !important;}
}
body.post-type-archive-product .wd-content-layout,
body.page-id-20970 .wd-content-layout {
max-width: none;
width: 100%;
padding-right: 0;
padding-left: 0;}
body.post-type-archive-product .wd-content-area,
body.page-id-20970 .wd-content-area {
width: 100%;
max-width: none;}
body.post-type-archive-product .page-description,
body.page-id-20970 .page-description {
margin: 0;}
.kajo-shop-intro {
margin-top: 0;}
.kajo-shop-intro {
background: #ffffff;}
.kajo-shop-hero {
display: grid;
grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
min-height: 500px;
overflow: hidden;
background:
radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.82), transparent 24%),
linear-gradient(110deg, #f5f0e8 0%, #f7f2eb 48%, #dfe7d6 100%);}
.kajo-shop-hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 620px;
padding: 68px 54px 68px max(54px, calc((100vw - 1320px) / 2 + 54px));}
.kajo-shop-kicker {
margin: 0 0 14px;
color: #9caf88;
font-size: 13px;
font-weight: 800;
letter-spacing: 2.4px;
text-transform: uppercase;}
.kajo-shop-hero h1 {
margin: 0 0 18px;
color: #101820;
font-family: "Nunito", Arial, Helvetica, sans-serif;
font-size: clamp(42px, 5.2vw, 72px);
line-height: 1.03;
font-weight: 800;
letter-spacing: 0;}
.kajo-shop-hero h1:after {
content: "";
display: block;
width: 74px;
height: 3px;
margin-top: 22px;
border-radius: 999px;
background: #9caf88;}
.kajo-shop-hero-copy > p:not(.kajo-shop-kicker) {
max-width: 520px;
margin: 0 0 28px;
color: #33443a;
font-size: 18px;
line-height: 1.7;}
.kajo-shop-hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;}
.kajo-shop-hero-actions a {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 0 26px;
border-radius: 999px;
font-weight: 800;
text-transform: uppercase;}
.kajo-shop-primary {
background: #9caf88;
color: #ffffff !important;}
.kajo-shop-primary:hover,
.kajo-shop-primary:focus {
background: #f58634;}
.kajo-shop-secondary {
border: 1px solid #9caf88;
background: #ffffff;
color: #5f7654 !important;}
.kajo-shop-secondary:hover,
.kajo-shop-secondary:focus {
border-color: #f58634;
color: #f58634 !important;}
.kajo-shop-hero-media,
.kajo-shop-hero-collage {
position: relative;
min-height: 500px;
padding: 34px max(44px, calc((100vw - 1560px) / 2 + 36px)) 34px 20px;}
.kajo-shop-hero-media:before,
.kajo-shop-hero-media:after,
.kajo-shop-hero-collage:before,
.kajo-shop-hero-collage:after {
content: "";
position: absolute;
border-radius: 999px;
background: rgba(156, 176, 139, 0.2);}
.kajo-shop-hero-media:before {
width: 280px;
height: 280px;
left: 13%;
top: 21%;}
.kajo-shop-hero-media:after {
width: 190px;
height: 190px;
right: 11%;
bottom: 14%;}
.kajo-shop-hero-media img {
position: relative;
z-index: 1;
width: min(28vw, 230px);
max-height: 310px;
object-fit: contain;
filter: drop-shadow(0 24px 34px rgba(31, 47, 40, 0.16));}
.kajo-shop-hero-media img:nth-child(1) {
transform: translateX(38px) rotate(-6deg);}
.kajo-shop-hero-media img:nth-child(2) {
z-index: 2;
width: min(31vw, 260px);}
.kajo-shop-hero-media img:nth-child(3) {
transform: translateX(-38px) rotate(5deg);}
.kajo-shop-hero-collage:before {
width: 360px;
height: 360px;
left: 24%;
top: 14%;
background: rgba(156, 176, 139, 0.22);}
.kajo-shop-hero-collage:after {
width: 210px;
height: 210px;
right: 7%;
bottom: 10%;
background: rgba(245, 134, 52, 0.11);}
.kajo-shop-hero-collage figure {
position: absolute;
z-index: 1;
margin: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.84);
background: rgba(251, 248, 242, 0.94);
box-shadow: 0 24px 44px rgba(31, 47, 40, 0.13);}
.kajo-shop-hero-collage img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;}
.kajo-shop-lifestyle-main {
left: 8%;
top: 58px;
width: min(38vw, 410px);
height: 270px;
border-radius: 22px;}
.kajo-shop-lifestyle-main img {
object-fit: contain;
padding: 18px;}
.kajo-shop-lifestyle-small {
right: 8%;
top: 78px;
width: min(25vw, 250px);
height: 210px;
border-radius: 18px;}
.kajo-shop-lifestyle-small img {
object-fit: contain;
padding: 18px;}
.kajo-shop-product {
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;}
.kajo-shop-product img {
padding: 6px;}
.kajo-shop-product-olaplex {
left: 42%;
top: 185px;
z-index: 3 !important;
width: 158px;
height: 230px;}
.kajo-shop-product-acti {
right: 20%;
bottom: 42px;
z-index: 2 !important;
width: 154px;
height: 214px;}
.kajo-shop-product-leave {
left: 20%;
bottom: 38px;
width: 150px;
height: 210px;}
.kajo-shop-cats-wrap {
width: 100%;
overflow: hidden;
margin: 26px 0 34px;
padding: 0;
background: #ffffff;}
.kajo-shop-cats-track {
display: flex;
width: max-content;
gap: 18px;
padding: 0 18px;
animation: kajo-shop-cats-scroll 74s linear infinite;}
.kajo-shop-cats-wrap:hover .kajo-shop-cats-track {
animation-play-state: paused;}
.kajo-shop-cats {
display: flex;
gap: 18px;
min-width: max-content;}
.kajo-shop-cat {
display: flex;
width: 144px;
min-height: 158px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 15px 10px 14px;
border: 1px solid #ede8df;
border-radius: 8px;
background: linear-gradient(180deg, #fffdf8 0%, #faf6ef 100%);
box-shadow: 0 10px 22px rgba(31, 47, 40, 0.04);
text-align: center;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.kajo-shop-cat span {
display: flex;
width: 104px;
height: 104px;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(156, 176, 139, 0.24);
background: #f4efe6;}
.kajo-shop-cat img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.03);
transition: transform .25s ease;}
.kajo-shop-cat strong {
color: #101820;
font-size: 14px;
line-height: 1.25;
font-weight: 800;}
.kajo-shop-cat:hover,
.kajo-shop-cat:focus {
border-color: #9caf88;
box-shadow: 0 12px 30px rgba(156, 176, 139, 0.18);
transform: translateY(-2px);}
.kajo-shop-cat.is-active {
border-color: #9caf88;
background: #f2f7ee;
box-shadow: 0 12px 30px rgba(156, 176, 139, 0.16);}
.kajo-shop-cats[aria-hidden="true"] .kajo-shop-cat {
pointer-events: none;}
.kajo-shop-cat:hover img,
.kajo-shop-cat:focus img {
transform: scale(1.08);}
@keyframes kajo-shop-cats-scroll {
from {
transform: translateX(0);}
to {
transform: translateX(calc(-50% - 8px));}}
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head,
body.kajo-catalogue .products,
body.post-type-archive-product .wd-loop-footer,
body.page-id-20970 .wd-loop-footer,
body.post-type-archive-product .filters-area,
body.page-id-20970 .filters-area{
max-width: 1560px;
margin-right: auto;
margin-left: auto;
padding-right: 18px;
padding-left: 18px;}
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 0;
margin-bottom: 22px;}
body.post-type-archive-product .shop-loop-head .wd-shop-tools,
body.page-id-20970 .shop-loop-head .wd-shop-tools {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;}
body.post-type-archive-product .shop-loop-head .wd-breadcrumbs,
body.page-id-20970 .shop-loop-head .wd-breadcrumbs,
body.post-type-archive-product .wd-show-sidebar-btn,
body.page-id-20970 .wd-show-sidebar-btn,
body.kajo-catalogue .wd-products-per-page{
display: none !important;}
body.post-type-archive-product .woocommerce-result-count,
body.page-id-20970 .woocommerce-result-count {
margin: 0;
color: #5f6d64;
font-size: 14px;}
body.post-type-archive-product .woocommerce-ordering,
body.page-id-20970 .woocommerce-ordering {
min-width: 205px;}
body.post-type-archive-product .woocommerce-ordering select,
body.page-id-20970 .woocommerce-ordering select {
height: 44px;
border: 1px solid #e3e8de;
border-radius: 8px;
background-color: #ffffff;
color: #101820;
font-weight: 700;}
body.post-type-archive-product .wd-filter-buttons a,
body.page-id-20970 .wd-filter-buttons a {
min-height: 44px;
padding: 0 18px;
border: 1px solid #9caf88;
border-radius: 8px;
color: #5f7654;
font-weight: 800;}
body.post-type-archive-product .wd-filter-buttons a:hover,
body.page-id-20970 .wd-filter-buttons a:hover {
border-color: #f58634;
color: #f58634;}
body.kajo-catalogue .products{
--wd-gap-lg: 20px !important;
--wd-gap: 20px !important;
--wd-col-lg: 4 !important;}
body.post-type-archive-product .product-grid-item,
body.page-id-20970 .product-grid-item {
padding: 0 !important;
align-self: flex-start;}
body.kajo-catalogue .product-wrapper{
height: auto;
padding: 16px;
border: 1px solid #e8ece4;
border-radius: 7px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(31, 47, 40, 0.04);}
body.kajo-catalogue .product-element-bottom .wrap-price{
margin-top: 0 !important;
margin-bottom: 0 !important;}
body.kajo-catalogue .product-wrapper:hover{
border-color: #d7e0ce;
box-shadow: 0 16px 36px rgba(31, 47, 40, 0.08);}
body.kajo-catalogue .product-element-top{
min-height: 255px;
display: flex;
align-items: center;
justify-content: center;}
body.kajo-catalogue .product-element-top img{
max-height: 245px;
object-fit: contain;}
body.kajo-catalogue .product-labels .product-label{
border-radius: 999px;
background-color: #6f8f4f;
color: #ffffff;
font-weight: 800;}
body.kajo-catalogue .wd-entities-title{
min-height: 48px;
margin-bottom: 9px;
color: #101820;
font-size: 14px;
line-height: 1.35;
font-weight: 700;}
body.kajo-catalogue .wd-product-stock{
min-height: 22px;
margin-bottom: 5px !important;
color: #477b35;
font-size: 13px;}
body.kajo-catalogue .price{
color: #6f8f4f;
font-size: 16px;
font-weight: 800;}
body.kajo-catalogue .price del{
color: #a8ada7;
font-size: 13px;
font-weight: 500;}
body.post-type-archive-product .wd-loop-footer,
body.page-id-20970 .wd-loop-footer {
padding-top: 10px;
padding-bottom: 42px;
text-align: center;}
body.post-type-archive-product .wd-load-more,
body.page-id-20970 .wd-load-more {
min-width: 250px;
border-radius: 999px !important;
background: #9caf88 !important;
color: #ffffff !important;
font-weight: 800;}
body.post-type-archive-product .wd-load-more:hover,
body.page-id-20970 .wd-load-more:hover {
background: #f58634 !important;}
body.kajo-catalogue .products{
--wd-gap-lg: 28px !important;
--wd-gap: 28px !important;
align-items: flex-start !important;}
body.kajo-catalogue .wd-products.products-bordered-grid-ins .wd-product{
border: 0;}
body.kajo-catalogue .products .wd-product{
height: auto !important;
min-height: 0 !important;
align-self: flex-start !important;}
body.kajo-catalogue .product-wrapper{
position: relative;
display: block !important;
height: auto !important;
min-height: 0 !important;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;}
body.kajo-catalogue .product-wrapper:hover{
border-color: transparent;
box-shadow: none;}
body.kajo-catalogue .product-element-top{
position: relative;
min-height: 315px;
padding: 24px;
border: 1px solid #f0eee8;
border-radius: 0;
background: #f6f5f1;
transition: background-color .2s ease, border-color .2s ease, transform .24s ease;}
body.kajo-catalogue .product-wrapper:hover .product-element-top{
border-color: #e5e8de;
background: #f3f0ea;}
body.kajo-catalogue .product-element-top img{
max-height: 265px;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform .28s ease;}
body.kajo-catalogue .product-wrapper:hover .product-element-top img{
transform: scale(1.025);}
body.kajo-catalogue .product-element-bottom{
position: static;
display: block !important;
padding: 13px 2px 0;
height: auto !important;
min-height: 0 !important;
background: transparent;
text-align: left;}
body.kajo-catalogue .wd-product-header{
margin: 0;}
body.kajo-catalogue .wd-entities-title{
min-height: 0;
margin-bottom: 5px;
font-size: 13px;
line-height: 1.35;
font-weight: 500;}
body.kajo-catalogue .wd-entities-title a{
color: #18231e;}
body.kajo-catalogue .wd-product-stock,
body.kajo-catalogue .kajo-image-stock-badge{
position: absolute;
top: 52px;
inset-inline-end: 12px;
z-index: 5;
min-height: 0;
margin: 0 !important;
padding: 5px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: #6f8f4f;
box-shadow: 0 8px 18px rgba(31, 47, 40, 0.08);
font-size: 10px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
pointer-events: none;}
body.kajo-catalogue .wd-product-stock.out-of-stock,
body.kajo-catalogue .kajo-image-stock-badge.out-of-stock{
color: #c62828;}
body.kajo-catalogue .wd-product-stock:before,
body.kajo-catalogue .kajo-image-stock-badge:before{
display: none;}
body.kajo-catalogue .price{
display: block;
margin: 4px 0 0;
color: #6f8f4f;
font-size: 13px;
line-height: 1.35;
font-weight: 700;}
body.kajo-catalogue .price del{
color: #a9aaa5;
font-size: 12px;
font-weight: 400;}
body.kajo-catalogue .product-labels{
top: 14px !important;
inset-inline-start: 14px !important;}
body.kajo-catalogue .product-labels .product-label{
min-width: 0;
min-height: 0;
padding: 4px 8px;
border-radius: 0;
background: #f58634;
font-size: 10px;
line-height: 1.2;
font-weight: 700;
text-transform: none;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
top: auto !important;
inset-inline-end: 14px !important;
bottom: 14px !important;
inset-inline-start: auto !important;
z-index: 7;
transform: none !important;}
body.kajo-catalogue .wd-wishlist-btn a,
body.post-type-archive-product .wd-action-buttons a,
body.page-id-20970 .wd-action-buttons a{
background: rgba(255, 255, 255, 0.82);
color: #7d867a;
box-shadow: none;}
body.kajo-catalogue .wd-product-footer{
position: static;
display: flex !important;
align-items: center;
justify-content: flex-start;
margin-top: 10px;
opacity: 1;
transform: none;
visibility: visible !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;}
body.kajo-catalogue .wd-add-btn-replace,
body.kajo-catalogue .wd-add-btn-replace .add-to-cart-loop{
transform: none !important;
opacity: 1 !important;
visibility: visible !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
margin-left: 10px;}
body.kajo-catalogue .wd-quick-view-btn a{
width: 38px;
height: 38px;
min-height: 38px;
border: 1px solid #e4e7dd;
border-radius: 50%;
background: #ffffff !important;
color: #5f7352 !important;
box-shadow: none;}
body.kajo-catalogue .wd-quick-view-btn a:hover{
border-color: #9caf88;
background: #9caf88 !important;
color: #ffffff !important;}
body.kajo-catalogue .product-wrapper:hover .wd-product-footer,
body.kajo-catalogue .product-wrapper:focus-within .wd-product-footer{
opacity: 1;
transform: translateY(0);}
body.kajo-catalogue .wd-add-btn{
width: 100%;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link{
min-height: 39px;
width: 100%;
border: 1px solid #dbe4d2 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #5f7352 !important;
box-shadow: none;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;}
body.kajo-catalogue .wd-add-btn > a:hover,
body.kajo-catalogue .kajo-archive-variable-add:hover,
body.kajo-catalogue .kajo-archive-options-link:hover{
background: #9caf88 !important;
border-color: #9caf88 !important;
color: #ffffff !important;
transform: translateY(-1px);}
body.kajo-catalogue .kajo-archive-variation{
display: grid;
width: 100%;
grid-template-columns: 1fr;
gap: 8px;}
body.kajo-catalogue .kajo-variation-label{
color: #7a8376;
font-size: 10px;
line-height: 1;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;}
body.kajo-catalogue .kajo-variation-pills{
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 1px;
scrollbar-width: none;}
body.kajo-catalogue .kajo-variation-pills::-webkit-scrollbar{
display: none;}
body.kajo-catalogue .kajo-variation-pill{
flex: 0 0 auto;
min-height: 28px;
padding: 0 11px;
border: 1px solid #e4e7dd;
border-radius: 999px;
background: #ffffff;
color: #31402f;
font-size: 11px;
line-height: 1;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;}
body.kajo-catalogue .kajo-variation-pill:hover,
body.kajo-catalogue .kajo-variation-pill.is-selected{
border-color: #9caf88;
background: #9caf88;
color: #ffffff;}
body.kajo-catalogue .kajo-variation-pill:disabled{
cursor: not-allowed;
border-color: #eeeeea;
background: #f6f5f1;
color: #a7aaa3;
text-decoration: line-through;}
body.kajo-catalogue .kajo-archive-variable-add:disabled{
cursor: not-allowed;
border-color: #e5e8de !important;
background: #f5f3ed !important;
color: #8b9386 !important;
opacity: 1;}
body.kajo-catalogue .kajo-archive-options-fallback{
display: none;}
@media (max-width: 1024px) {
.kajo-shop-hero {
grid-template-columns: 1fr 1fr;
min-height: 410px;}
.kajo-shop-hero-copy {
padding: 46px 26px;}
.kajo-shop-cats {
display: flex;
gap: 12px;}
.kajo-shop-cat {
flex: 0 0 132px;
min-height: 148px;
padding: 12px 9px;
scroll-snap-align: start;}
.kajo-shop-cat span {
width: 94px;
height: 94px;}
.kajo-shop-cats-track {
gap: 12px;
padding: 0 16px 10px;
animation-duration: 58s;}
.kajo-shop-cats-wrap {
margin-top: 18px;}
.kajo-shop-lifestyle-main {
left: 3%;
width: 330px;
height: 230px;}
.kajo-shop-lifestyle-small {
right: 3%;
width: 205px;
height: 180px;}
.kajo-shop-product-olaplex {
left: 38%;
width: 148px;
height: 202px;}
.kajo-shop-product-acti {
right: 12%;
width: 145px;
height: 188px;}
.kajo-shop-product-leave {
left: 14%;
width: 142px;
height: 184px;}}
@media (max-width: 767px) {
.kajo-shop-hero {
grid-template-columns: 1fr;
min-height: 0;}
.kajo-shop-hero-copy {
padding: 28px 20px 12px;}
.kajo-shop-kicker {
font-size: 11px;}
.kajo-shop-hero h1 {
max-width: 100%;
font-size: 28px;
line-height: 1.12;
word-break: normal;
overflow-wrap: break-word;}
.kajo-shop-hero-copy > p:not(.kajo-shop-kicker) {
font-size: 15px;
margin-bottom: 18px;}
.kajo-shop-hero-actions a {
min-height: 42px;
padding: 0 18px;
font-size: 12px;}
.kajo-shop-hero-media {
min-height: 190px;
padding: 8px 20px 24px;}
.kajo-shop-hero-collage {
min-height: 225px;
padding: 0 12px 22px;}
.kajo-shop-hero-collage:before {
width: 190px;
height: 190px;
left: 28%;
top: 14px;}
.kajo-shop-hero-collage:after {
display: none;}
.kajo-shop-lifestyle-main {
left: 5%;
top: 18px;
width: 46%;
height: 142px;
border-radius: 14px;}
.kajo-shop-lifestyle-small {
display: none;}
.kajo-shop-product-olaplex {
left: 47%;
top: 12px;
width: 92px;
height: 130px;
border-radius: 12px;}
.kajo-shop-product-acti {
right: 5%;
bottom: 18px;
width: 96px;
height: 132px;
border-radius: 12px;}
.kajo-shop-product-leave {
left: 30%;
bottom: 14px;
width: 92px;
height: 126px;
border-radius: 12px;}
.kajo-shop-product img,
.kajo-shop-lifestyle-small img {
padding: 8px;}
.kajo-shop-hero-media img {
width: 30%;
max-height: 165px;}
.kajo-shop-cats {
margin-bottom: 22px;}
body.post-type-archive-product .shop-loop-head,
body.page-id-20970 .shop-loop-head {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding-right: 14px;
padding-left: 14px;}
body.post-type-archive-product .shop-loop-head > .wd-shop-tools,
body.page-id-20970 .shop-loop-head > .wd-shop-tools {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;}
body.post-type-archive-product .shop-loop-head > .wd-shop-tools:first-child,
body.page-id-20970 .shop-loop-head > .wd-shop-tools:first-child {
justify-content: flex-start;}
body.post-type-archive-product .shop-loop-head > .wd-shop-tools:last-child,
body.page-id-20970 .shop-loop-head > .wd-shop-tools:last-child {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;}
body.post-type-archive-product .woocommerce-result-count,
body.page-id-20970 .woocommerce-result-count {
min-height: 0;
padding: 0;
border: 0;
color: #5f6d64;
font-size: 13px;
white-space: nowrap;}
body.post-type-archive-product .woocommerce-result-count:before,
body.page-id-20970 .woocommerce-result-count:before {
content: "";}
body.post-type-archive-product .woocommerce-ordering,
body.page-id-20970 .woocommerce-ordering {
width: auto;
min-width: 128px;
max-width: none;}
body.post-type-archive-product .woocommerce-ordering select,
body.page-id-20970 .woocommerce-ordering select {
width: 100%;
height: 38px;
padding-right: 26px;
padding-left: 10px;
border-color: #e7ece2;
border-radius: 999px;
background-color: #ffffff;
font-size: 12px;}
body.post-type-archive-product .wd-filter-buttons,
body.page-id-20970 .wd-filter-buttons {
flex: 0 0 auto;
justify-self: end;}
body.post-type-archive-product .wd-filter-buttons a,
body.page-id-20970 .wd-filter-buttons a {
min-height: 38px;
padding: 0 12px;
border-color: #dbe4d2;
border-radius: 999px;
background: #ffffff;
font-size: 12px;}
body.kajo-catalogue .wd-products-shop-view{
display: flex;
gap: 4px;
justify-self: start;}
body.kajo-catalogue .wd-products-shop-view a{
width: 30px;
height: 30px;}
body.kajo-catalogue .products,
body.post-type-archive-product .wd-loop-footer,
body.page-id-20970 .wd-loop-footer,
body.post-type-archive-product .filters-area,
body.page-id-20970 .filters-area{
padding-right: 14px;
padding-left: 14px;}
body.kajo-catalogue .products{
--wd-col: 2 !important;
--wd-col-lg: 2 !important;
--wd-col-md: 2 !important;
--wd-col-sm: 2 !important;
--wd-gap: 10px !important;
--wd-gap-lg: 10px !important;
--wd-gap-sm: 10px !important;}
body.kajo-catalogue .products{
--wd-col: 2 !important;
--wd-col-lg: 2 !important;
--wd-col-md: 2 !important;
--wd-col-sm: 2 !important;
--wd-gap: 10px !important;
--wd-gap-lg: 10px !important;
--wd-gap-sm: 10px !important;}
body.kajo-catalogue .product-wrapper{
padding: 10px;}
body.kajo-catalogue .product-element-top{
min-height: 165px;}
body.kajo-catalogue .product-element-top img{
max-height: 155px;}
body.kajo-catalogue .wd-entities-title{
min-height: 58px;
font-size: 13px;}
body.kajo-catalogue .price{
font-size: 15px;}
body.post-type-archive-product .wd-load-more,
body.page-id-20970 .wd-load-more {
width: min(100%, 310px);}}
.kajo-shop-hero.kajo-shop-hero-image {
position: relative;
display: block;
height: clamp(330px, 21.9vw, 420px);
min-height: 0;
box-sizing: border-box;
background: #f5f0e8;}
.kajo-shop-hero-banner {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
background-image: url("/wp-content/uploads/2026/07/ohmykajo-shop-hero-desktop.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;}
.kajo-shop-hero-banner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;}
.kajo-shop-hero-image .kajo-shop-hero-copy {
position: relative;
z-index: 1;
min-height: 100%;
box-sizing: border-box;
max-width: 700px;
padding: 28px 42px 28px clamp(48px, 9vw, 190px);}
.kajo-shop-hero-image .kajo-shop-hero-copy h1,
.kajo-shop-hero-image h1 {
font-size: clamp(36px, 3vw, 52px);
line-height: 1.04;}
.kajo-shop-hero-image .kajo-shop-hero-copy > p:not(.kajo-shop-kicker) {
max-width: 470px;
margin-bottom: 18px;
font-size: 16px;
line-height: 1.55;}
@media (max-width: 1180px) {
.kajo-shop-hero-banner {
background-image: url("/wp-content/uploads/2026/07/ohmykajo-shop-hero-tablet.png");}
.kajo-shop-hero.kajo-shop-hero-image,
.kajo-shop-hero-image .kajo-shop-hero-copy {
height: 350px;
min-height: 0;}}
@media (max-width: 767px) {
.kajo-shop-hero-banner {
background-image: url("/wp-content/uploads/2026/07/ohmykajo-shop-hero-mobile.png");
background-position: center center;
background-size: cover;}
.kajo-shop-hero.kajo-shop-hero-image {
height: auto;
min-height: 440px;}
.kajo-shop-hero-image .kajo-shop-hero-copy {
min-height: 440px;
max-width: 275px;
padding: 26px 20px;
justify-content: flex-start;}
.kajo-shop-hero-image .kajo-shop-hero h1,
.kajo-shop-hero-image .kajo-shop-hero-copy h1,
.kajo-shop-hero-image h1 {
max-width: 255px;
font-size: 25px;}
.kajo-shop-hero-image .kajo-shop-hero-copy > p:not(.kajo-shop-kicker) {
max-width: 245px;
font-size: 14px;
line-height: 1.55;}
.kajo-shop-hero-image .kajo-shop-hero-actions {
max-width: 255px;}
.kajo-shop-hero-image .kajo-shop-hero-actions a {
min-height: 40px;
padding: 0 15px;
font-size: 11px;}
/* The archive hero has its own mobile artwork. Keep it compact while
reserving enough room for copy beneath the fixed phone header. */
body.post-type-archive-product .kajo-shop-hero.kajo-shop-hero-image {
height: 410px;
min-height: 410px;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-copy {
min-height: 410px;
max-width: 210px;
padding: 80px 18px 20px;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-kicker {
margin-bottom: 8px;
font-size: 10px;
letter-spacing: 1.7px;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-copy h1 {
max-width: 190px;
margin-bottom: 10px;
font-size: 23px;
line-height: 1.08;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-copy h1::after {
width: 56px;
margin-top: 12px;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-copy > p:not(.kajo-shop-kicker) {
max-width: 195px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.45;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-actions {
gap: 8px;}
body.post-type-archive-product .kajo-shop-hero-image .kajo-shop-hero-actions a {
min-height: 36px;
padding: 0 13px;
font-size: 10px;}
body.kajo-catalogue .products{
--wd-gap: 14px !important;
--wd-gap-lg: 14px !important;
--wd-gap-sm: 14px !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px !important;
box-sizing: border-box;
width: 370px !important;
max-width: 100% !important;
margin-right: auto !important;
margin-left: auto !important;
overflow: visible;
padding-right: 10px;
padding-left: 10px;}
body.kajo-catalogue .products .wd-product{
max-width: none !important;
width: auto !important;}
body.kajo-catalogue .product-wrapper{
padding: 0;}
body.kajo-catalogue .product-element-top{
min-height: 188px;
padding: 14px;}
body.kajo-catalogue .product-element-top img{
max-height: 162px;}
body.kajo-catalogue .product-element-bottom{
padding-top: 10px;}
body.kajo-catalogue .wd-product-footer{
position: static;
opacity: 1;
transform: none;
margin-top: 8px;}
body.kajo-catalogue .wd-add-btn,
body.kajo-catalogue .kajo-archive-variation{
width: 100%;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link{
min-height: 34px;
padding: 0 8px;
font-size: 9px;
white-space: normal;
line-height: 1.15;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
margin-left: 6px;}
body.kajo-catalogue .wd-quick-view-btn a{
width: 34px;
height: 34px;
min-height: 34px;}
body.kajo-catalogue .kajo-image-stock-badge{
top: 44px;
inset-inline-end: 10px;
padding: 4px 7px;
font-size: 9px;}
body.kajo-catalogue .product-wrapper{
transition: transform .22s ease;}
body.kajo-catalogue .product-wrapper:active{
transform: translateY(-2px);}
body.kajo-catalogue .product-wrapper:active .product-element-top img{
transform: scale(1.025);}}
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover{
--wd-trans-h: 0px;}
body.kajo-catalogue .wd-products.wd-stretch-cont-lg .wd-product-wrapper{
height: auto !important;}
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover .product-element-bottom{
display: grid !important;
gap: 7px;
margin-bottom: 0 !important;
transform: none !important;
transition: transform .22s ease;}
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover .wd-product-footer{
display: flex !important;
gap: 8px;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;}
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,
.wd-loading)):is(:hover,
.wd-variation-active) :is(.product-element-bottom,
.wd-product-grid-slider-pagin){
transform: none !important;}
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,
.wd-loading)):is(:hover,
.wd-variation-active) .wd-product-thumb{
clip-path: none !important;}
body.kajo-catalogue .wd-add-btn-replace > a span,
body.kajo-catalogue .kajo-archive-variable-add .wd-action-text{
padding: 0;
min-height: 0;
transition: transform .22s ease;}
body.kajo-catalogue .wd-add-btn-replace > a:before{
display: none !important;}
body.kajo-catalogue .wd-add-btn-replace > a:hover span,
body.kajo-catalogue .kajo-archive-variable-add:hover .wd-action-text{
transform: translateX(3px);}
body.kajo-catalogue .wd-product.product-type-variable .price{
margin-bottom: 2px;}
body.kajo-catalogue .kajo-archive-options-fallback{
display: none;}
body.kajo-catalogue .kajo-archive-variable-add:not(:disabled){
border-color: #9caf88 !important;
background: #9caf88 !important;
color: #ffffff !important;}
body.post-type-archive-product .variations_form select,
body.page-id-20970 .variations_form select,
body.kajo-catalogue .kajo-archive-variation-select{
min-height: 38px;
width: 100%;
padding: 0 36px 0 14px;
border: 1px solid #e4e7dd;
border-radius: 999px;
background-color: #ffffff;
color: #31402f;
font-size: 12px;
font-weight: 700;}
body.kajo-catalogue .product-wrapper{
transition: transform .22s ease;}
body.kajo-catalogue .product-wrapper:hover,
body.kajo-catalogue .product-wrapper:active{
transform: translateY(-3px);}
@media (hover: none) {
body.kajo-catalogue .product-wrapper{
animation: kajo-card-rise .45s ease both;
animation-timeline: view();
animation-range: entry 0% cover 22%;}
body.kajo-catalogue .product-wrapper:hover{
transform: none;}}
@keyframes kajo-card-rise {
from {
opacity: .72;
transform: translateY(10px);}
to {
opacity: 1;
transform: translateY(0);}}
body.kajo-catalogue .product-element-bottom{
padding: 15px 18px 58px !important;
border-right: 1px solid #f0eee8;
border-bottom: 1px solid #f0eee8;
border-left: 1px solid #f0eee8;
background: #ffffff;}
body.kajo-catalogue .wd-entities-title{
margin-bottom: 8px;
font-size: 15px;
line-height: 1.35;}
body.kajo-catalogue .price{
margin-top: 2px;
margin-bottom: 9px;
font-size: 14px;}
body.kajo-catalogue .kajo-image-stock-badge,
body.kajo-catalogue .wd-product-stock{
top: 14px;
inset-inline-end: 14px;
padding: 6px 10px;
background: rgba(237, 247, 232, 0.96);
color: #436f38;
animation: kajo-stock-pulse-green 1.45s ease-in-out infinite;}
body.kajo-catalogue .kajo-image-stock-badge.out-of-stock,
body.kajo-catalogue .wd-product-stock.out-of-stock{
color: #c40000;
animation-name: kajo-stock-pulse-red;}
body.kajo-catalogue .wd-product-footer,
body.kajo-catalogue .wd-product.wd-hover-buttons-on-hover .wd-product-footer{
position: static;
display: grid !important;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 9px;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
position: absolute;
top: 261px;
right: 68px;
bottom: auto;
left: auto;
z-index: 6;
margin: 0 !important;}
body.kajo-catalogue .wd-quick-view-btn a{
width: 42px;
height: 42px;
min-height: 42px;
border-color: #dfe8d8;
box-shadow: 0 10px 22px rgba(31, 47, 40, 0.08);}
body.kajo-catalogue .wd-add-btn{
width: 100%;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-disabled-add{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
width: 100%;
padding: 0 18px;
border: 1px solid #dbe4d2 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #5f7352 !important;
line-height: 1;}
body.kajo-catalogue .kajo-archive-disabled-add,
body.kajo-catalogue .wd-product.outofstock .wd-add-btn > a,
body.kajo-catalogue .wd-product.outofstock .kajo-archive-options-link{
cursor: not-allowed;
pointer-events: none;
border-color: #e1e1dc !important;
background: #f2f2ee !important;
color: #a1a59c !important;}
body.kajo-catalogue .kajo-archive-variation{
gap: 8px;}
body.kajo-catalogue .kajo-variation-group{
display: grid;
gap: 6px;}
body.kajo-catalogue .kajo-variation-pills{
gap: 8px;
padding-bottom: 2px;}
body.kajo-catalogue .kajo-variation-pill{
min-height: 30px;
border-color: #e4e7dd;
box-shadow: none;
text-decoration: none;}
body.kajo-catalogue .kajo-variation-pill:disabled{
opacity: .42;
filter: grayscale(1);
text-decoration: none;}
body.kajo-catalogue .kajo-variation-group-color .kajo-variation-pills{
align-items: center;}
body.kajo-catalogue .kajo-variation-color{
position: relative;
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border-radius: 50%;
background: var(--kajo-swatch-color, #f5f3ed);
font-size: 0;}
body.kajo-catalogue .kajo-variation-color:before{
content: "";
position: absolute;
inset: 3px;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, .75);}
body.kajo-catalogue .kajo-variation-color.is-selected{
border-color: #f58634;
box-shadow: 0 0 0 3px rgba(245, 134, 52, .18);}
body.kajo-catalogue .kajo-variation-color .kajo-variation-text{
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);}
@keyframes kajo-stock-pulse-green {
0%, 100% {
background: rgba(237, 247, 232, 0.96);
box-shadow: 0 8px 18px rgba(31, 47, 40, 0.08), 0 0 0 0 rgba(67, 111, 56, .18);}
50% {
background: rgba(202, 232, 190, 0.98);
box-shadow: 0 8px 18px rgba(31, 47, 40, 0.08), 0 0 0 6px rgba(67, 111, 56, .08);}}
@keyframes kajo-stock-pulse-red {
0%, 100% {
background: rgba(255, 239, 239, 0.96);
box-shadow: 0 8px 18px rgba(31, 47, 40, 0.08), 0 0 0 0 rgba(196, 0, 0, .18);}
50% {
background: rgba(255, 218, 218, 0.98);
box-shadow: 0 8px 18px rgba(31, 47, 40, 0.08), 0 0 0 6px rgba(196, 0, 0, .08);}}
@media (max-width: 767px) {
body.kajo-catalogue .product-element-bottom{
padding: 11px 10px 50px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
top: 145px;
right: 50px;
bottom: auto;
left: auto;}
body.kajo-catalogue .kajo-variation-color{
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;}
body.kajo-catalogue .kajo-image-stock-badge,
body.kajo-catalogue .wd-product-stock{
top: 9px;
inset-inline-end: 8px;
padding: 5px 8px;
font-size: 8px;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
inset-inline-end: 8px !important;
bottom: 8px !important;}}
body.kajo-catalogue .products{
align-items: stretch !important;}
body.kajo-catalogue .products .wd-product{
align-self: stretch !important;}
body.kajo-catalogue .wd-product .product-wrapper{
display: flex !important;
flex-direction: column;
height: 100% !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: flex !important;
flex: 1 1 auto;
flex-direction: column;}
body.kajo-catalogue .wd-product .wd-product-footer{
margin-top: auto !important;}
body.kajo-catalogue .kajo-variation-color:hover,
body.kajo-catalogue .kajo-variation-color.is-selected{
background: var(--kajo-swatch-color, #f5f3ed) !important;
color: transparent;}
body.kajo-catalogue .kajo-variation-color:disabled{
opacity: .72;
filter: none;}
body.kajo-catalogue .kajo-variation-color:disabled:after{
content: "";
position: absolute;
top: 50%;
left: 4px;
right: 4px;
border-top: 2px solid rgba(32, 35, 31, .45);
transform: rotate(-38deg);}
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -10px !important;
inset-inline-end: auto !important;
bottom: auto !important;
inset-inline-start: 14px !important;
position: absolute !important;
display: grid !important;
gap: 6px;
transform: none !important;}
body.kajo-catalogue .product-element-top .product-labels .product-label{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
margin: 0 !important;
padding: 0 10px;
border-radius: 0;
line-height: 1;}
body.kajo-catalogue .product-element-top .kajo-image-stock-badge,
body.kajo-catalogue .product-wrapper > .kajo-image-stock-badge,
body.kajo-catalogue .product-element-top .wd-product-stock{
top: 14px !important;
inset-inline-end: 14px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
inset-inline-end: 14px !important;
bottom: 14px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
top: 259px !important;
right: 64px !important;}
body.kajo-catalogue .wd-wishlist-btn a,
body.kajo-catalogue .wd-quick-view-btn a{
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border: 1px solid rgba(156, 175, 136, .24) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .9) !important;
color: #4f5f49 !important;
box-shadow: 0 10px 24px rgba(31, 47, 40, .09) !important;
backdrop-filter: blur(8px);
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;}
body.kajo-catalogue .wd-wishlist-btn a:hover,
body.kajo-catalogue .wd-quick-view-btn a:hover{
border-color: rgba(245, 134, 52, .45) !important;
background: #ffffff !important;
color: #f58634 !important;
box-shadow: 0 14px 30px rgba(31, 47, 40, .13) !important;
transform: translateY(-1px);}
body.kajo-catalogue .wd-wishlist-btn,
body.kajo-catalogue .wd-quick-view-btn{
--wd-action-icon-size: 20px;}
@media (max-width: 767px) {
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -5px !important;
left: 8px !important;}
body.kajo-catalogue .product-element-top .product-labels .product-label{
min-height: 21px;
padding: 0 7px;
font-size: 9px;}
body.kajo-catalogue .wd-wishlist-btn a,
body.kajo-catalogue .wd-quick-view-btn a{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
top: 146px !important;
right: 48px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
inset-inline-end: 8px !important;
bottom: 8px !important;}}
@media (max-width: 767px) {
body.kajo-catalogue .products{
align-items: stretch !important;}
body.kajo-catalogue .products .wd-product{
display: flex !important;
align-self: stretch !important;}
body.kajo-catalogue .wd-product .product-wrapper{
width: 100%;
min-height: 420px !important;}
body.kajo-catalogue .product-element-top{
min-height: 178px !important;
height: 178px !important;
padding: 14px !important;}
body.kajo-catalogue .product-element-top img{
max-height: 150px !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
min-height: 242px;
padding: 10px 9px 48px !important;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box;
min-height: 42px !important;
max-height: 42px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 12px !important;
line-height: 1.35 !important;}
body.kajo-catalogue .price{
min-height: 18px;
margin-bottom: 7px;
font-size: 12px !important;
line-height: 1.25;}
body.kajo-catalogue .kajo-archive-variation{
gap: 6px;}
body.kajo-catalogue .kajo-variation-group{
gap: 4px;
min-width: 0;}
body.kajo-catalogue .kajo-variation-label{
font-size: 8px;
letter-spacing: .45px;}
body.kajo-catalogue .kajo-variation-pills{
gap: 5px;
max-width: 100%;
overflow-x: auto;}
body.kajo-catalogue .kajo-variation-pill{
min-height: 24px;
padding: 0 8px;
font-size: 9px;
white-space: nowrap;}
body.kajo-catalogue .kajo-variation-color{
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
min-height: 22px !important;
padding: 0 !important;}
body.kajo-catalogue .wd-add-btn > a,
body.kajo-catalogue .kajo-archive-variable-add,
body.kajo-catalogue .kajo-archive-options-link,
body.kajo-catalogue .kajo-archive-disabled-add{
min-height: 34px !important;
padding: 0 8px !important;
font-size: 8px !important;
line-height: 1.15 !important;
letter-spacing: .25px !important;
white-space: normal !important;
text-align: center;}}
@media (max-width: 767px) {
body.kajo-catalogue .wd-product .product-wrapper{
min-height: 376px !important;
height: 376px !important;
max-height: 376px !important;
overflow: hidden;}
body.kajo-catalogue .product-element-top{
flex: 0 0 176px !important;
height: 176px !important;
min-height: 176px !important;
padding: 12px !important;}
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -16px !important;
inset-inline-start: 8px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t,
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons{
top: 132px !important;
bottom: auto !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
inset-inline-end: 8px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
right: 48px !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: grid !important;
flex: 0 0 200px !important;
min-height: 200px !important;
height: 200px !important;
grid-template-rows: 76px 26px 34px;
gap: 8px;
align-content: start;
padding: 12px 8px !important;}
body.kajo-catalogue .wd-product-header,
body.kajo-catalogue .wd-entities-title{
min-height: 76px !important;
max-height: 76px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
font-size: 12px !important;
line-height: 1.45 !important;}
body.kajo-catalogue .wrap-price,
body.kajo-catalogue .price{
min-height: 26px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-product .wd-product-footer{
align-self: start;
margin-top: 0 !important;}}
@media (max-width: 767px) {
body.kajo-catalogue .wd-product .product-wrapper{
min-height: 424px !important;
height: 424px !important;
max-height: 424px !important;
overflow: hidden;}
body.kajo-catalogue .product-element-top{
flex: 0 0 176px !important;
height: 176px !important;
min-height: 176px !important;
padding: 12px !important;}
body.kajo-catalogue .product-element-top .product-labels,
body.kajo-catalogue .wd-product-thumb .product-labels.labels-rounded-sm{
top: -9px !important;
inset-inline-start: 8px !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t,
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons{
top: 132px !important;
bottom: auto !important;}
body.kajo-catalogue .wd-buttons.wd-pos-r-t{
inset-inline-end: 8px !important;}
body.post-type-archive-product .wd-action-buttons,
body.page-id-20970 .wd-action-buttons {
right: 48px !important;}
body.kajo-catalogue .wd-product .product-element-bottom{
display: grid !important;
flex: 0 0 248px !important;
min-height: 248px !important;
height: 248px !important;
grid-template-rows: 112px 28px 34px;
gap: 9px;
align-content: start;
padding: 12px 8px !important;}
body.kajo-catalogue .wd-product-header,
body.kajo-catalogue .wd-entities-title{
min-height: 112px !important;
max-height: 112px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-entities-title{
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
font-size: 11.7px !important;
line-height: 1.45 !important;
overflow-wrap: anywhere;}
body.kajo-catalogue .wrap-price,
body.kajo-catalogue .price{
min-height: 28px !important;
margin: 0 !important;}
body.kajo-catalogue .wd-product .wd-product-footer{
align-self: start;
margin-top: 0 !important;}}
/* 2BO Product FAQ Accordion CSS - start */
.product-faq {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid #eeeeee;
}
.product-faq > p {
margin-bottom: 14px;
font-size: 18px;
font-weight: 700;
color: #111111;
}
.product-faq details {
border: 1px solid #eeeeee;
border-radius: 10px;
margin-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
.product-faq summary {
cursor: pointer;
padding: 14px 16px;
font-weight: 600;
color: #111111;
list-style: none;
}
.product-faq summary::-webkit-details-marker {
display: none;
}
.product-faq summary::after {
content: "+";
float: right;
font-weight: 700;
}
.product-faq details[open] summary::after {
content: "−";
}
.product-faq details p {
padding: 0 16px 14px;
margin: 0;
color: #444444;
line-height: 1.6;
}
@media (max-width: 767px) {
.product-faq {
margin-top: 22px;
padding-top: 18px;
}
.product-faq > p {
font-size: 16px;
}
.product-faq summary {
padding: 13px 14px;
font-size: 14px;
}
.product-faq details p {
font-size: 13px;
}
}
/* 2BO Product FAQ Accordion CSS - end */
/* ===========================================================================
RTL: currency ranges must not be reordered
---------------------------------------------------------------------------
Verified against the database, not inferred: `wp_wc_product_meta_lookup` has
min_price 5.0000 and max_price 6.0000 for the variable brush, and the DOM
emits them in that order in BOTH languages:
DOM order JOD 5.00 then JOD 6.00 (en and ar identical)
en renders 5.00 - 6.00 DOM-first on the LEFT
ar renders 6.00 - 5.00 DOM-first on the RIGHT
So nothing is wrong with the price data or the markup. The two amounts are
Latin-script runs inside an RTL paragraph, and the bidi algorithm lays those
runs out right-to-left, which reverses a range into something that reads as
descending. A numeric range is one left-to-right unit and has to be isolated
as such.
`:has()` keeps this to ranges ONLY: a range puts both amounts as direct
children, while a sale price wraps each in /, so sale pairs do not
match and keep their RTL ordering. The combinator is `~` and not `+` because
WooCommerce renders the separator as its own element -
`- ` - so the two amounts are siblings but not
adjacent ones. WooCommerce already sets `unicode-bidi: isolate` here; only
the direction needs correcting.
======================================================================== */
html[dir="rtl"] .price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount),
html[dir="rtl"] .kajo-loop-options-price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount) ,
body.kajo-rtl .price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount),
body.kajo-rtl .kajo-loop-options-price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount){
direction: ltr;
}
/* ========================================================================
Layer 2FB - Arabic single-product price range alignment.
The rule immediately above is correct and is deliberately left alone: a
numeric range is one left-to-right unit, and `direction: ltr` is what stops
the bidi algorithm rendering "4.50 - 6.00" as "6.00 - 4.50".
What it did not account for is that `direction` also decides how
`text-align: start` resolves. The single-product summary sets
`body.single-product .summary .price { text-align: start !important }`, so
once the price block became LTR, "start" stopped meaning the right edge and
started meaning the left one - and the price jumped to the left of an
otherwise right-aligned Arabic column.
Scope is deliberately narrow:
- single product summary only, so the shared `.kajo-loop-options-price`
and loop-card consumers of the rule above are untouched;
- the same `:has()` test, so only price RANGES are affected and single,
sale and out-of-stock prices keep the behaviour they already had;
- RTL only, so English pages cannot be reached by it.
`!important` is required only because the declaration it has to beat is
itself `!important`; the selector here is more specific, so it wins on
specificity rather than on order.
======================================================================== */
html[dir="rtl"] body.single-product .summary p.price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount),
body.kajo-rtl.single-product .summary p.price:has(> .woocommerce-Price-amount ~ .woocommerce-Price-amount) {
text-align: right !important;
}
/* ========================================================================
Layer 2FC - Arabic policy-page RTL presentation.
Two defects, each confirmed by measuring the rendered geometry in both
locales at 320, 390, 768 and 1440 before anything was changed.
1. .kajo-returns-checklist reserves its bullet space with `padding-left`
and pins the bullet at `left: 0`. Neither flips for RTL, so on the
Arabic returns page the text sits right-aligned while the bullet and
its 34px of reserved space stay on the left. Measured distance from the
item's left edge to where the Arabic text actually begins: 42px at 320,
112px at 390, 459px at 768 and 528px at 1440 - the bullet is stranded
that far from the text it belongs to. In English the same measurement is
34px at every width, which is the padding behaving correctly.
2. .kajo-policy-nav flips side correctly (the CSS grid is direction-aware,
and the nav was measured on the right in Arabic and the left in English),
but the active-item accent is `border-left` and each link carries
`transform: translateX(-21px)`. Both are physical, so in Arabic the
accent lands on the edge away from the text and the link shifts further
away from the content instead of towards it.
Scope is deliberately narrow:
- RTL only, so the English layouts cannot be reached;
- these two components only, never a global RTL override, so product,
checkout and home sections are untouched;
- the nav rules are confined to >=901px, because below 900px the existing
stylesheet already turns the nav into a static two-column grid with no
side border and no transform, and that layout measured correctly.
======================================================================== */
/* 1. Returns checklist: mirror the reserved space and the bullet. */
html[dir="rtl"] .kajo-returns-checklist li,
body.kajo-rtl .kajo-returns-checklist li {
padding-left: 0;
padding-right: 34px;
}
html[dir="rtl"] .kajo-returns-checklist li:before,
body.kajo-rtl .kajo-returns-checklist li:before {
left: auto;
right: 0;
}
/* 2. Policy side navigation: mirror the rail, the accent and the nudge. */
@media (min-width: 901px) {
html[dir="rtl"] .kajo-policy-nav,
body.kajo-rtl .kajo-policy-nav {
padding-left: 0;
padding-right: 18px;
border-left: 0;
border-right: 1px solid #dfe6dc;
}
html[dir="rtl"] .kajo-policy-nav a,
body.kajo-rtl .kajo-policy-nav a {
padding: 13px 18px 13px 0;
border-left: 0;
border-right: 3px solid transparent;
transform: translateX(21px);
}
html[dir="rtl"] .kajo-policy-nav a.is-active,
body.kajo-rtl .kajo-policy-nav a.is-active,
html[dir="rtl"] .kajo-policy-nav a:hover,
html[dir="rtl"] .kajo-policy-nav a:focus,
body.kajo-rtl .kajo-policy-nav a:hover,
body.kajo-rtl .kajo-policy-nav a:focus {
border-left-color: transparent;
border-right-color: #f58634;
}
}