.k-woo ul.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: var(--k-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.k-woo ul.products li.product {
display: flex;
flex-direction: column;
gap: var(--k-space-2);
min-inline-size: 0;
background-color: var(--k-surface);
border-radius: var(--k-radius-md);
padding: var(--k-space-3);
}
.k-woo ul.products li.product img {
inline-size: 100%;
block-size: auto;
border-radius: calc(var(--k-radius-md) - var(--k-border-w));
aspect-ratio: 1 / 1;
object-fit: cover;
background-color: var(--k-bg-subtle);
}
.k-woo .woocommerce-loop-product__title {
font-family: var(--k-font-head);
font-size: var(--k-fs-1);
line-height: 1.3;
color: var(--k-text);
}
.k-woo .price {
color: var(--k-accent);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.k-woo .price del {
color: var(--k-text-faint);
font-weight: 400;
margin-inline-end: 0.4em;
}
.k-woo .onsale {
position: absolute;
inset-block-start: var(--k-space-2);
inset-inline-start: var(--k-space-2);
z-index: 2;
padding: 0.2em 0.7em;
background-color: var(--k-accent);
color: var(--k-accent-contrast);
border-radius: var(--k-radius-sm);
font-size: var(--k-fs--2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.k-woo ul.products li.product {
position: relative;
} .k-woo .button,
.k-woo button.button,
.k-woo .single_add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--k-space-1);
padding: var(--k-space-1) var(--k-space-3);
min-block-size: 44px;
background-color: var(--k-accent);
border: var(--k-border-w) solid var(--k-accent);
border-radius: var(--k-radius-sm);
color: var(--k-accent-contrast);
font-family: var(--k-font-head);
font-size: var(--k-fs--1);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.k-woo .button:hover,
.k-woo button.button:hover,
.k-woo .single_add_to_cart_button:hover {
background-color: var(--k-accent-hover);
border-color: var(--k-accent-hover);
color: var(--k-accent-contrast);
} .k-woo div.product {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--k-space-5);
}
@media (min-width: 40em) {
.k-woo div.product {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: start;
}
.k-woo div.product .woocommerce-tabs,
.k-woo div.product .related.products,
.k-woo div.product .upsells.products {
grid-column: 1 / -1;
}
}
.k-woo div.product .woocommerce-product-gallery img {
border-radius: var(--k-radius-md);
}
.k-woo .product_title {
font-size: var(--k-fs-4);
line-height: 1.15;
}
.k-woo div.product p.price {
font-size: var(--k-fs-2);
}
.k-woo .woocommerce-product-details__short-description {
color: var(--k-text-muted);
line-height: var(--k-lh-body);
} .k-woo .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--k-space-3);
margin: 0 0 var(--k-space-3);
padding: 0;
list-style: none;
border-block-end: var(--k-border-w) solid var(--k-border);
}
.k-woo .woocommerce-tabs ul.tabs a {
display: inline-block;
padding-block: var(--k-space-1);
color: var(--k-text-muted);
font-weight: 600;
text-decoration: none;
}
.k-woo .woocommerce-tabs ul.tabs li.active a {
color: var(--k-text);
box-shadow: inset 0 -2px 0 var(--k-accent);
} .k-woo input.input-text,
.k-woo .quantity .qty,
.k-woo select {
padding: var(--k-space-1) var(--k-space-2);
background-color: var(--k-surface);
border: var(--k-border-w) solid var(--k-border);
border-radius: var(--k-radius-sm);
color: var(--k-text);
font: inherit;
min-block-size: 44px;
}
.k-woo .woocommerce-message,
.k-woo .woocommerce-info,
.k-woo .woocommerce-error {
margin-block: 0 var(--k-space-4);
padding: var(--k-space-2) var(--k-space-3);
background-color: var(--k-accent-subtle);
border-inline-start: 3px solid var(--k-accent);
border-radius: var(--k-radius-sm);
color: var(--k-text);
list-style: none;
}
.k-woo .woocommerce-error {
border-inline-start-color: var(--k-accent-2);
} .k-woo .woocommerce-breadcrumb {
margin-block-end: var(--k-space-3);
color: var(--k-text-faint);
font-size: var(--k-fs--1);
}
.k-woo .woocommerce-breadcrumb a {
color: var(--k-text-muted);
text-decoration: none;
}
.k-woo nav.woocommerce-pagination ul {
display: flex;
flex-wrap: wrap;
gap: var(--k-space-1);
margin: var(--k-space-5) 0 0;
padding: 0;
list-style: none;
border: 0;
}
.k-woo nav.woocommerce-pagination ul li {
border: 0;
}
.k-woo nav.woocommerce-pagination ul li a,
.k-woo nav.woocommerce-pagination ul li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 44px;
min-block-size: 44px;
border-radius: var(--k-radius-sm);
color: var(--k-text);
text-decoration: none;
}
.k-woo nav.woocommerce-pagination ul li span.current {
background-color: var(--k-accent);
color: var(--k-accent-contrast);
}
.k-woo nav.woocommerce-pagination ul li a:hover {
background-color: var(--k-bg-subtle);
}