:is(body.tpb-shop, .tpb-shop-cards) {
--tp-bg: #F8F6F0;
--tp-card: #F0EDE1;
--tp-sand: #ECE7DA;
--tp-tag: #F6EEDC;
--tp-heading: #24493A;
--tp-ink: #2B3A31;
--tp-ink-soft: #56645B;
--tp-eyebrow: #557A66;
--tp-accent: #2F5642;
--tp-accent-hover: #244634;
--tp-on-accent: #F8F6F0;
--tp-terracotta: #A5694C;
--tp-font-heading: "DM Serif Display", Georgia, serif;
--tp-font-body: "DM Sans", "Helvetica Neue", Helvetica, sans-serif;
--tp-gutter: 48px;
--tp-h1: 104px;
--tp-h3: 30px;
--tp-lead: 19px;
--tp-body: 17px;
--tp-intro-photo: 460px;
--tp-card-media: 320px;
--tp-radius-xl: 64px;
--tp-corner: 4px 4px var(--tp-radius-xl) 4px;
--tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
background-color: var(--tp-bg);
}
@media (max-width: 1024px) {
:is(body.tpb-shop, .tpb-shop-cards) { --tp-gutter: 32px; --tp-h1: 76px; --tp-h3: 26px; --tp-intro-photo: 360px; }
}
@media (max-width: 640px) {
:is(body.tpb-shop, .tpb-shop-cards) {
--tp-gutter: 20px; --tp-h1: 52px; --tp-h3: 24px; --tp-lead: 17px; --tp-body: 16px;
--tp-intro-photo: 260px; --tp-card-media: 230px; --tp-radius-xl: 40px;
}
} body.tpb-shop #content > .ast-container {
display: block;
max-width: 1450px;
padding: 0 var(--tp-gutter);
}
body.tpb-shop #primary {
width: 100%;
margin: 0;
padding: 0;
}
body.tpb-shop .woocommerce-products-header {
margin: 0;
padding: 0;
}
body.tpb-shop .woocommerce-result-count,
body.tpb-shop .woocommerce-ordering {
display: none;
} body.tpb-shop .tpb-intro {
display: flex;
flex-direction: column;
gap: 24px;
padding: 96px 0 64px;
font-family: var(--tp-font-body);
}
@media (max-width: 1024px) {
body.tpb-shop .tpb-intro { padding: 64px 0 48px; }
} body.tpb-shop .tpb-intro.is-compact {
padding: 64px 0 32px;
}
@media (max-width: 640px) {
body.tpb-shop .tpb-intro.is-compact { padding: 40px 0 24px; }
}
body.tpb-shop .tpb-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
color: var(--tp-eyebrow);
font-family: var(--tp-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.75;
text-transform: uppercase;
}
body.tpb-shop .tpb-eyebrow-line {
flex: 0 0 auto;
width: 32px;
height: 1px;
background-color: currentColor;
} body.tpb-shop .tpb-intro-content > *,
body.tpb-shop .tpb-intro-content .wp-block-column > * {
margin-top: 0;
margin-bottom: 0;
}
body.tpb-shop .tpb-intro-content .wp-block-columns {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-end;
gap: 96px;
margin: 0;
}
body.tpb-shop .tpb-intro-content .wp-block-column {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1 1 50%;
min-width: 0;
margin: 0;
}
@media (max-width: 1024px) {
body.tpb-shop .tpb-intro-content .wp-block-columns {
flex-direction: column;
align-items: stretch;
gap: 32px;
}
}
body.tpb-shop .tpb-intro-content :is(h1, h2),
body.tpb-shop .tpb-intro-title {
margin: 0;
color: var(--tp-heading);
font-family: var(--tp-font-heading);
font-size: var(--tp-h1);
font-weight: 400;
line-height: 1;
letter-spacing: -0.035em;
text-wrap: balance;
}
body.tpb-shop .tpb-intro-content p,
body.tpb-shop .tpb-intro-text,
body.tpb-shop .tpb-intro-text p {
max-width: 560px;
margin: 0;
color: var(--tp-ink-soft);
font-size: var(--tp-lead);
line-height: 1.75;
}
body.tpb-shop .tpb-intro-content .wp-block-image {
margin: 0;
}
body.tpb-shop .tpb-intro-content .wp-block-image img {
display: block;
width: 100%;
height: var(--tp-intro-photo);
object-fit: cover;
border-radius: var(--tp-corner);
} body.tpb-shop .tpb-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 48px;
font-family: var(--tp-font-body);
}
body.tpb-shop .tpb-chip {
display: flex;
align-items: center;
min-height: 56px;
padding: 0 24px;
border: 1px solid var(--tp-ink-soft);
border-radius: 999px;
background-color: transparent;
color: var(--tp-heading);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color 300ms, color 300ms;
}
body.tpb-shop .tpb-chip:hover {
background-color: var(--tp-card);
color: var(--tp-heading);
}
body.tpb-shop .tpb-chip.is-active {
border-color: var(--tp-accent);
background-color: var(--tp-accent);
color: var(--tp-on-accent);
}
body.tpb-shop .tpb-chip.is-active:hover {
background-color: var(--tp-accent-hover);
}
@media (max-width: 640px) {
body.tpb-shop .tpb-filter { margin-bottom: 32px; }
body.tpb-shop .tpb-chip { min-height: 48px; padding: 0 20px; }
} body.tpb-shop .tpb-shop-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px 48px;
margin: 0 0 48px;
}
body.tpb-shop .tpb-shop-top .tpb-filter {
margin: 0;
}
body.tpb-shop .tpb-howto {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 24px;
margin: 0;
padding: 14px 24px;
border-radius: 4px 4px 24px 4px;
background-color: #ECEDE0;
font-family: var(--tp-font-body);
}
body.tpb-shop .tpb-howto-title {
margin: 0;
color: var(--tp-eyebrow);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.tpb-shop .tpb-howto-steps {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 0;
padding: 0;
list-style: none;
}
body.tpb-shop .tpb-howto-steps li {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--tp-ink);
font-size: 14px;
line-height: 1.4;
}
body.tpb-shop .tpb-howto-num {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: 999px;
background-color: var(--tp-accent);
color: var(--tp-on-accent);
font-size: 12px;
font-weight: 700;
}
@media (max-width: 640px) {
body.tpb-shop .tpb-shop-top { gap: 16px; margin-bottom: 32px; }
body.tpb-shop .tpb-howto { width: 100%; box-sizing: border-box; padding: 14px 16px; }
body.tpb-shop .tpb-howto-steps { flex-direction: column; gap: 8px; }
} body.tpb-shop #primary ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px 24px;
margin: 0 0 128px;
padding: 0;
list-style: none;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products::before,
:is(body.tpb-shop, .tpb-shop-cards) ul.products::after {
display: none;
} @media (max-width: 1399px) {
body.tpb-shop #primary ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
body.tpb-shop #primary ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 96px; }
} @media (max-width: 640px) {
body.tpb-shop #primary ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-bottom: 64px; }
} :is(body.tpb-shop, .tpb-shop-cards) ul.products li.product {
display: flex;
flex-direction: column;
float: none;
width: auto;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
text-align: left;
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card {
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
box-sizing: border-box;
padding: 24px 24px 28px;
border-radius: 4px 4px 40px 4px;
background-color: var(--tpb-card-bg, var(--tp-card));
font-family: var(--tp-font-body);
transition: transform 600ms var(--tp-ease), box-shadow 600ms var(--tp-ease);
}
@media (hover: hover) {
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product:hover .tpb-card {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(31, 58, 45, 0.10);
}
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-eyebrow {
margin: 0;
color: var(--tp-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
} :is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.55);
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-media-link {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media img.tpb-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
border-radius: 0;
box-shadow: none;
transition: transform 900ms var(--tp-ease);
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product:hover .tpb-card-img {
transform: scale(1.04);
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-tablet {
width: 34%;
aspect-ratio: 1 / 1;
margin-top: 16px;
border: 4px solid var(--tp-bg);
border-radius: 999px;
transition: transform 900ms var(--tp-ease);
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product:hover .tpb-card-tablet {
transform: scale(1.04);
} :is(body.tpb-shop, .tpb-shop-cards) .tpb-plants {
position: absolute;
top: 14px;
left: 12px;
right: 12px;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px 8px;
margin: 0;
color: var(--tp-terracotta);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.4;
text-transform: uppercase;
pointer-events: none;
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-dot {
width: 3px;
height: 3px;
border-radius: 999px;
background-color: currentColor;
} :is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: flex-end; gap: 10px;
box-sizing: border-box;
height: 44px;
min-height: 0;
max-width: 44px;
margin: 0;
padding: 0 12px;
overflow: hidden;
border: 0;
border-radius: 999px;
background-color: var(--tp-accent);
color: transparent; font-family: var(--tp-font-body);
font-size: 14px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 6px 16px rgba(31, 58, 45, 0.18);
transition: max-width 350ms var(--tp-ease), padding 350ms var(--tp-ease), background-color 300ms, color 200ms;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button::after {
content: "";
position: static;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin: 0;
background-color: var(--tp-on-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
font-family: inherit;
animation: none;
}
@media (hover: hover) {
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media:hover .button {
max-width: 180px;
padding-left: 18px;
color: var(--tp-on-accent);
transition-delay: 0s, 0s, 0s, 120ms;
}
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button:focus-visible {
max-width: 180px;
padding-left: 18px;
color: var(--tp-on-accent);
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button:hover {
background-color: var(--tp-accent-hover);
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button.loading {
opacity: 0.7;
} :is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .added_to_cart,
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media > a:not(.button):not(.tpb-card-media-link) {
display: none;
} :is(body.tpb-shop, .tpb-shop-cards) .tpb-card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-title {
margin: 0 0 2px;
padding: 0;
color: var(--tp-heading);
font-family: var(--tp-font-heading);
font-size: 28px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
text-align: left;
text-transform: none;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-title a {
color: inherit;
text-decoration: none;
}
.tpb-name-sub {
white-space: nowrap; }
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-net,
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-ingredients {
margin: 0;
color: var(--tp-ink-soft);
font-size: 14px;
line-height: 1.5;
}
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-net {
font-weight: 700;
letter-spacing: 0.04em;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-ingredients strong {
display: inline; color: var(--tp-heading);
font-weight: 700;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-body .price {
display: flex;
align-items: baseline;
gap: 8px;
margin: auto 0 0; padding-top: 10px;
color: var(--tp-heading);
font-family: var(--tp-font-body);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-body .price del {
font-size: 0.85em;
font-weight: 500;
opacity: 0.7;
}
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-body .price ins {
color: var(--tp-heading);
text-decoration: none;
} body.tpb-shop .woocommerce-pagination {
margin: -64px 0 128px;
font-family: var(--tp-font-body);
}
body.tpb-shop .woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
gap: 8px;
border: 0;
}
body.tpb-shop .woocommerce-pagination ul.page-numbers li {
border: 0;
}
body.tpb-shop .woocommerce-pagination .page-numbers a,
body.tpb-shop .woocommerce-pagination .page-numbers span {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
border: 1px solid var(--tp-ink-soft);
border-radius: 999px;
color: var(--tp-heading);
}
body.tpb-shop .woocommerce-pagination .page-numbers span.current {
border-color: var(--tp-accent);
background-color: var(--tp-accent);
color: var(--tp-on-accent);
} .elementor-widget-shortcode:has(.tpb-home-products) {
flex: 1 1 100%;
width: 100%;
}
.tpb-shop-cards.tpb-home-products {
width: 100%;
background-color: transparent;
} body .tpb-shop-cards.tpb-home-products ul.products:not(.elementor-grid) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px 24px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1100px) {
body .tpb-shop-cards.tpb-home-products ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
body .tpb-shop-cards.tpb-home-products ul.products:not(.elementor-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
} @media (max-width: 640px) {
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card { gap: 12px; padding: 14px 12px 18px; border-radius: 4px 4px 28px 4px; }
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-eyebrow { font-size: 10px; letter-spacing: 0.12em; }
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-title { font-size: 20px; }
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-net,
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-ingredients { font-size: 12px; }
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-body .price { font-size: 15px; padding-top: 6px; }
:is(body.tpb-shop, .tpb-shop-cards) .tpb-plants { top: 9px; left: 6px; right: 6px; font-size: 9px; letter-spacing: 0.04em; gap: 0 5px; line-height: 1.35; }
:is(body.tpb-shop, .tpb-shop-cards) ul.products li.product .tpb-card-media .button { right: 8px; bottom: 8px; height: 38px; max-width: 38px; padding: 0 9px; }
:is(body.tpb-shop, .tpb-shop-cards) .tpb-card-tablet { width: 30%; margin-top: 30px; border-width: 3px; }
}