.k-woo ul.products::before,
.k-woo ul.products::after {
content: none;
}
.k-woo ul.products li.product {
float: none;
width: auto;
margin: 0;
} .k-woo ul.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14.375rem, 100%), 1fr));
gap: var(--k-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.k-woo ul.products li.product {
position: relative;
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-elevation-shadow .k-woo ul.products li.product {
box-shadow: var(--k-shadow-sm);
}
.k-elevation-border .k-woo ul.products li.product {
border: var(--k-border-w) solid var(--k-border);
}
.k-elevation-tint .k-woo ul.products li.product {
background-color: var(--k-surface-hi);
}
.k-woo ul.products li.product > a {
display: flex;
flex-direction: column;
gap: var(--k-space-2);
color: inherit;
text-decoration: none;
min-inline-size: 0;
}
.k-woo ul.products li.product img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: calc(var(--k-radius-md) - var(--k-border-w));
background-color: var(--k-bg-subtle);
padding: var(--k-space-2);
box-sizing: border-box;
}
.k-woo .woocommerce-loop-product__title {
font-family: var(--k-font-head);
font-size: var(--k-fs-0);
font-weight: var(--k-weight-head);
line-height: 1.3;
color: var(--k-text); display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.k-woo ul.products .price {
margin-block-start: auto;
font-variant-numeric: tabular-nums;
} .k-woo ul.products .button {
inline-size: 100%;
} .k-woo .price {
color: var(--k-text);
font-weight: 700;
}
.k-woo .price ins {
text-decoration: none;
color: var(--k-accent);
}
.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.25em 0.7em;
background-color: var(--k-accent);
color: var(--k-accent-contrast);
border-radius: var(--k-radius-sm);
font-size: var(--k-ui--1);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
} .k-woo .star-rating {
position: relative;
display: inline-block;
overflow: hidden;
white-space: nowrap;
line-height: 1;
color: var(--k-border);
font-size: var(--k-fs--1);
}
.k-woo .star-rating::before {
content: "★★★★★";
letter-spacing: 0.125rem;
}
.k-woo .star-rating > span {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
overflow: hidden;
white-space: nowrap;
color: var(--k-accent);
}
.k-woo .star-rating > span::before {
content: "★★★★★";
letter-spacing: 0.125rem;
} .k-woo .star-rating .rating {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
} .k-woo .button,
.k-woo button.button,
.k-woo .single_add_to_cart_button,
.k-woo .checkout-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: var(--k-control-h);
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;
line-height: 1.3;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.k-woo .button:hover,
.k-woo button.button:hover,
.k-woo .single_add_to_cart_button:hover,
.k-woo .checkout-button:hover {
background-color: var(--k-accent-hover);
border-color: var(--k-accent-hover);
color: var(--k-accent-contrast);
} .k-buttons-pigulkowy .k-woo .button,
.k-buttons-pigulkowy .k-woo .single_add_to_cart_button {
border-radius: var(--k-radius-pill);
}
.k-buttons-obrysowy .k-woo .button,
.k-buttons-obrysowy .k-woo .single_add_to_cart_button {
background-color: transparent;
border-width: var(--k-border-w-strong);
color: var(--k-accent);
}
.k-buttons-obrysowy .k-woo .button:hover,
.k-buttons-obrysowy .k-woo .single_add_to_cart_button:hover {
background-color: var(--k-accent);
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,
.k-woo div.product > .woocommerce-Reviews,
.k-woo div.product > .up-sells {
grid-column: 1 / -1;
}
} .k-woo .woocommerce-product-gallery {
position: relative;
inline-size: 100%;
}
.k-woo .woocommerce-product-gallery img {
inline-size: 100%;
block-size: auto;
border-radius: var(--k-radius-md);
background-color: var(--k-bg-subtle);
}
.k-woo .woocommerce-product-gallery .flex-viewport {
border-radius: var(--k-radius-md);
overflow: hidden;
}
.k-woo .woocommerce-product-gallery .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--k-space-1);
margin: var(--k-space-2) 0 0;
padding: 0;
list-style: none;
}
.k-woo .woocommerce-product-gallery .flex-control-thumbs li {
inline-size: 4.5rem;
}
.k-woo .woocommerce-product-gallery .flex-control-thumbs img {
border-radius: var(--k-radius-sm);
cursor: pointer;
opacity: 0.6;
padding: 0.125rem;
}
.k-woo .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.k-woo .woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1;
}
.k-woo .woocommerce-product-gallery__trigger {
position: absolute;
inset-block-start: var(--k-space-2);
inset-inline-end: var(--k-space-2);
z-index: 2;
inline-size: 2.75rem;
block-size: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--k-surface);
border-radius: 50%;
box-shadow: var(--k-shadow-sm);
text-indent: -9var(--k-radius-pill);
overflow: hidden;
}
.k-woo .woocommerce-product-gallery__trigger::before {
content: "";
position: absolute;
inset-block-start: 0.875rem;
inset-inline-start: 0.875rem;
inline-size: 0.6875rem;
block-size: 0.6875rem;
border: 0.125rem solid var(--k-text-muted);
border-radius: 50%;
text-indent: 0;
}
.k-woo .woocommerce-product-gallery__trigger::after {
content: "";
position: absolute;
inset-block-end: 0.75rem;
inset-inline-end: 0.75rem;
inline-size: 0.4375rem;
block-size: 0.125rem;
background: var(--k-text-muted);
transform: rotate(45deg);
} .k-woo .summary .product_title {
font-size: var(--k-fs-3);
line-height: 1.15;
margin-block-end: var(--k-space-2);
text-wrap: balance;
}
.k-woo .summary .price {
font-size: var(--k-fs-2);
margin-block-end: var(--k-space-2);
}
.k-woo .woocommerce-product-details__short-description {
color: var(--k-text-muted);
line-height: var(--k-lh-body);
margin-block-end: var(--k-space-3);
}
.k-woo .summary .cart {
display: flex;
flex-wrap: wrap;
gap: var(--k-space-2);
align-items: stretch;
margin-block: var(--k-space-3);
}
.k-woo .summary .product_meta {
margin-block-start: var(--k-space-3);
padding-block-start: var(--k-space-2);
border-block-start: var(--k-border-w) solid color-mix(in oklab, var(--k-border) 60%, transparent);
color: var(--k-text-faint);
font-size: var(--k-fs--1);
line-height: 1.7;
}
.k-woo .summary .product_meta a {
color: var(--k-text-muted);
}
.k-woo .summary .product_meta > span {
display: block;
} .k-woo .quantity {
display: inline-flex;
}
.k-woo .quantity .qty {
inline-size: 5em;
text-align: center;
} .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 li {
margin: 0;
}
.k-woo .woocommerce-tabs ul.tabs a {
display: inline-block;
padding-block: var(--k-space-1);
color: var(--k-text-muted);
font-family: var(--k-font-head);
font-weight: 600;
text-decoration: none;
}
.k-woo .woocommerce-tabs ul.tabs li.active a {
color: var(--k-text);
box-shadow: inset 0 -0.125rem 0 var(--k-accent);
}
.k-woo .woocommerce-Tabs-panel {
line-height: var(--k-lh-body);
}
.k-woo .woocommerce-Tabs-panel > h2:first-child {
font-size: var(--k-fs-1);
margin-block-end: var(--k-space-2);
} .k-woo .related.products > h2,
.k-woo .upsells.products > h2,
.k-woo .up-sells > h2 {
font-size: var(--k-fs-2);
margin-block-end: var(--k-space-3);
} .k-woo input.input-text,
.k-woo .quantity .qty,
.k-woo select,
.k-woo textarea {
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: var(--k-control-h);
}
.k-woo input.input-text:focus-visible,
.k-woo .quantity .qty:focus-visible,
.k-woo select:focus-visible {
outline: 0.125rem solid var(--k-focus);
outline-offset: 1px;
} .k-woo .woocommerce-message,
.k-woo .woocommerce-info,
.k-woo .woocommerce-error,
.k-woo .woocommerce-noreviews {
display: flow-root;
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: 0.1875rem 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-message .button,
.k-woo .woocommerce-info .button,
.k-woo .woocommerce-error .button {
float: inline-end;
margin-inline-start: var(--k-space-2);
min-block-size: 2rem;
padding-block: 0.2em;
} .k-woo table.shop_table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--k-fs--1);
}
.k-woo table.shop_table th,
.k-woo table.shop_table td {
padding: var(--k-space-2);
border-block-end: var(--k-border-w) solid color-mix(in oklab, var(--k-border) 60%, transparent);
text-align: start;
vertical-align: middle;
}
.k-woo table.shop_table th {
font-family: var(--k-font-head);
font-weight: 600;
color: var(--k-text-muted);
}
.k-woo table.shop_table img {
inline-size: 4rem;
block-size: auto;
border-radius: var(--k-radius-sm);
} .k-woo .woocommerce-result-count {
color: var(--k-text-faint);
font-size: var(--k-fs--1);
margin-block-end: var(--k-space-3);
}
.k-woo .woocommerce-ordering {
float: inline-end;
margin-block-end: var(--k-space-3);
}
.k-woo .woocommerce-ordering select {
min-block-size: 2.5rem;
}
.k-woo ul.products {
clear: both;
} .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 .woocommerce-breadcrumb a:hover {
color: var(--k-accent);
}
.k-woo nav.woocommerce-pagination {
margin-block-start: var(--k-space-5);
text-align: center;
}
.k-woo nav.woocommerce-pagination ul {
display: inline-flex;
flex-wrap: wrap;
gap: var(--k-space-1);
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.k-woo nav.woocommerce-pagination ul li {
border: 0;
margin: 0;
float: none;
}
.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: var(--k-control-h);
min-block-size: var(--k-control-h);
padding: 0;
border-radius: var(--k-radius-sm);
background: none;
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);
}