.cg-shop > section {
position: relative;
isolation: isolate;
--cg-commerce-bg-shift: 0px;
--cg-commerce-bg-rotate: 0deg;
--cg-commerce-bg-shift-secondary: 0px;
--cg-commerce-bg-rotate-secondary: 0deg;
}
.cg-shop > section > .container {
position: relative;
z-index: 2;
}
body.cg-shop-filters-open .cg-shop > section {
z-index: 1200;
}
.cg-shop > section::before,
.cg-shop > section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.16s linear;
}
.cg-shop > section::before {
top: 8%;
right: -120px;
width: clamp(210px, 22vw, 320px);
height: clamp(210px, 22vw, 320px);
border: 1px solid rgba(183, 141, 121, 0.16);
border-radius: 999px;
background:
radial-gradient(
circle at center,
transparent 58%,
rgba(183, 141, 121, 0.14) 59% 60%,
transparent 61% 100%
),
repeating-linear-gradient(
35deg,
rgba(183, 141, 121, 0.08) 0 1px,
transparent 1px 14px
);
transform: translate3d(0, var(--cg-commerce-bg-shift), 0)
rotate(var(--cg-commerce-bg-rotate));
}
.cg-shop > section::after {
left: -110px;
bottom: 10%;
width: clamp(190px, 20vw, 290px);
height: clamp(190px, 20vw, 290px);
border: 1px solid rgba(183, 141, 121, 0.14);
border-radius: 24px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.2),
rgba(243, 231, 223, 0.08)
),
repeating-linear-gradient(
-30deg,
rgba(29, 29, 29, 0.05) 0 1px,
transparent 1px 12px
);
transform: translate3d(0, var(--cg-commerce-bg-shift-secondary), 0)
rotate(var(--cg-commerce-bg-rotate-secondary));
}
.cg-shop-hero {
background: linear-gradient(180deg, #fcf7f3 0%, #fffdfb 100%);
}
.cg-shop-hero__content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.cg-shop-hero__title {
margin: 0 0 14px;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cg-color-text);
}
.cg-shop-hero__text {
font-size: 17px;
line-height: 1.75;
color: var(--cg-color-muted);
}
.cg-shop-hero__text p:last-child {
margin-bottom: 0;
}
.cg-shop-layout {
padding-top: 28px;
}
.cg-shop-heading {
margin-bottom: 18px;
}
.cg-shop-heading__title {
margin: 0;
color: var(--cg-color-text);
font-size: clamp(30px, 3vw, 42px);
line-height: 1.05;
letter-spacing: -0.02em;
}
.cg-shop-heading__text {
max-width: 720px;
margin-top: 10px;
color: var(--cg-color-muted);
font-size: 15px;
line-height: 1.6;
}
.cg-shop-heading__text p {
margin: 0;
}
.cg-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
padding: 18px 20px;
border-radius: 20px;
background: #fff;
border: 1px solid rgba(29, 29, 29, 0.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}
.cg-shop-toolbar__left,
.cg-shop-toolbar__right {
display: flex;
align-items: center;
gap: 16px;
}
.cg-shop-toolbar__count {
font-size: 14px;
color: var(--cg-color-muted);
}
.cg-shop-toolbar__count .woocommerce-result-count {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--cg-color-muted);
}
.cg-shop-toolbar__right .woocommerce-ordering {
position: relative;
margin: 0;
}
.cg-shop-toolbar__right .woocommerce-ordering::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 10px;
height: 10px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
color: rgba(31, 26, 23, 0.72);
}
.cg-shop-toolbar__right .orderby {
min-width: 250px;
min-height: 52px;
padding: 14px 48px 14px 18px;
border: 1px solid rgba(29, 29, 29, 0.1);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 241, 235, 0.92));
box-shadow: 0 12px 24px rgba(44, 29, 20, 0.06);
color: var(--cg-color-text);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
appearance: none;
-webkit-appearance: none;
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s ease;
}
.cg-shop-toolbar__right .orderby:hover {
transform: translateY(-1px);
border-color: rgba(183, 141, 121, 0.35);
box-shadow: 0 16px 28px rgba(44, 29, 20, 0.08);
}
.cg-shop-toolbar__right .orderby:focus:not(:focus-visible) {
outline: 0;
}
.cg-shop-toolbar__right .orderby:focus-visible {
outline: 0;
border-color: rgba(183, 141, 121, 0.55);
box-shadow:
0 0 0 4px rgba(217, 184, 167, 0.22),
0 16px 28px rgba(44, 29, 20, 0.08);
}
.cg-shop-filters-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid rgba(29, 29, 29, 0.1);
background: #fff;
color: var(--cg-color-text);
font-weight: 600;
cursor: pointer;
}
.cg-shop-filters-toggle:focus-visible,
.cg-shop-sidebar__close:focus-visible {
outline: 2px solid var(--cg-color-dark);
outline-offset: 3px;
}
.cg-shop-content {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
.cg-shop-sidebar {
position: fixed;
top: 0;
left: 0;
z-index: 1300;
width: min(390px, 100%);
height: 100dvh;
overflow: visible;
transform: translateX(-100%);
transition: transform 0.35s ease;
}
.cg-shop-sidebar[data-animate] {
opacity: 1;
transform: translateX(-100%);
}
.cg-shop-sidebar.is-open,
.cg-shop-sidebar[data-animate].is-open {
transform: translateX(0);
}
.cg-shop-sidebar__inner {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 28px;
border-radius: 0 30px 30px 0;
background:
radial-gradient(circle at 100% 0%, rgba(216, 168, 142, 0.16) 0%, transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.94));
border: 1px solid rgba(183, 141, 121, 0.16);
box-shadow:
0 28px 80px rgba(31, 26, 23, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.cg-shop-sidebar__inner::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(220px, 52%);
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #9f735f 0%, #d8a88e 100%);
transform: translateX(-50%);
}
.cg-shop-sidebar__header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(183, 141, 121, 0.14);
}
.cg-shop-sidebar__title {
margin: 0;
font-size: 26px;
line-height: 1.12;
letter-spacing: 0;
color: var(--cg-color-text);
}
.cg-shop-sidebar__close {
position: relative;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(183, 141, 121, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 24px rgba(58, 47, 41, 0.06);
cursor: pointer;
transition:
background 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease;
}
.cg-shop-sidebar__close:hover {
transform: translateY(-1px);
border-color: rgba(183, 141, 121, 0.3);
background: #fff;
}
.cg-shop-sidebar__close span {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background: var(--cg-color-text);
border-radius: 999px;
}
.cg-shop-sidebar__close span:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.cg-shop-sidebar__close span:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.cg-filter-widget + .cg-filter-widget {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(183, 141, 121, 0.14);
}
.cg-filter-widget__title {
margin: 0 0 16px;
font-size: 18px;
line-height: 1.2;
color: var(--cg-color-text);
}
.cg-filter-widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.cg-filter-widget ul li {
margin: 0 0 12px;
}
.cg-filter-widget a {
color: var(--cg-color-muted);
text-decoration: none;
}
.cg-filter-widget a:hover {
color: var(--cg-color-text);
}
.cg-shop-sidebar .widget,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-taxonomy,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-status,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-attribute {
position: relative;
z-index: 1;
}
.cg-shop-sidebar .wc-block-product-filters {
display: block !important;
}
.cg-shop-sidebar .wc-block-product-filters__open-overlay,
.cg-shop-sidebar .wc-block-product-filters__overlay-header,
.cg-shop-sidebar .wc-block-product-filters__overlay-backdrop {
display: none !important;
}
.cg-shop-sidebar .wc-block-product-filters__overlay,
.cg-shop-sidebar .wc-block-product-filters__overlay-wrapper,
.cg-shop-sidebar .wc-block-product-filters__overlay-dialog,
.cg-shop-sidebar .wc-block-product-filters__overlay-content {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
.cg-shop-sidebar .wc-block-product-filters__overlay-dialog,
.cg-shop-sidebar .wc-block-product-filters__overlay-content {
display: block !important;
}
.cg-shop-sidebar .wc-block-product-filters__overlay-content > .wp-block-heading:first-child {
display: none;
}
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price-slider {
padding-inline: 8px;
}
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price-slider input[type="text"],
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price-slider input[type="number"] {
max-width: 68px;
}
.cg-shop-sidebar .wc-block-product-filters__actions {
position: static !important;
padding: 14px 0 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.cg-shop-sidebar .wc-block-product-filters__actions button,
.cg-shop-sidebar .wc-block-product-filters__actions .wp-block-button__link {
width: 100%;
border-radius: 999px;
font-weight: 700;
}
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-taxonomy,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-status,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-attribute {
margin-top: 24px;
}
.cg-shop-sidebar .wp-block-woocommerce-product-filter-price h3,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-taxonomy h3,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-status h3,
.cg-shop-sidebar .wp-block-woocommerce-product-filter-attribute h3 {
margin: 0 0 14px;
font-size: 20px;
line-height: 1.2;
color: var(--cg-color-text);
}
.cg-shop-products .products {
margin: 0;
padding: 0;
list-style: none;
}
.cg-products-grid,
.cg-shop-products ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.cg-products-grid::before,
.cg-products-grid::after,
.cg-shop-products ul.products::before,
.cg-shop-products ul.products::after {
content: none;
display: none;
}
.cg-product-card {
margin: 0 !important;
width: auto !important;
float: none !important;
clear: none !important;
list-style: none;
}
.cg-product-card__inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(29, 29, 29, 0.06);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.3s ease;
}
.cg-product-card__image-wrap {
position: relative;
aspect-ratio: 1 / 1;
padding: 0;
margin-bottom: 18px;
border-radius: 20px;
background: #f8f1eb;
overflow: hidden;
}
.cg-product-card__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
font-size: 12px;
font-weight: 600;
color: var(--cg-color-text);
}
.cg-product-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
.cg-product-card__inner {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.cg-product-card__inner:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.07);
}
.cg-product-card__img {
transition: transform 0.35s ease;
}
.cg-product-card__inner:hover .cg-product-card__img {
transform: scale(1.04);
}
}
.cg-product-card__content {
display: flex;
flex: 1;
flex-direction: column;
}
.cg-product-card__title {
margin: 0 0 10px;
font-size: 18px;
line-height: 1.3;
}
.cg-product-card__title a {
color: var(--cg-color-text);
text-decoration: none;
}
.cg-product-card__price {
margin-bottom: 16px;
font-size: 17px;
line-height: 1.4;
color: var(--cg-color-text);
}
.cg-product-card__price .amount {
font-weight: 600;
}
.cg-product-card__actions {
display: flex;
flex-flow: column;
gap: 10px;
margin-top: auto;
}
.woocommerce-page .cg-product-card__actions .button,
.woocommerce-page .cg-product-card__actions .added_to_cart {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 14px 18px;
border-radius: 999px;
background: var(--cg-color-dark);
color: #fff;
text-decoration: none;
font-weight: 600;
}
.cg-shop-pagination {
display: flex;
justify-content: center;
margin-top: 42px;
}
.cg-shop-pagination .woocommerce-pagination {
display: flex;
justify-content: center;
width: 100%;
}
.cg-shop-pagination ul.page-numbers {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.cg-shop-pagination ul.page-numbers li {
margin: 0;
}
.cg-shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0 !important;
border-radius: 999px;
background: rgba(255, 255, 255, 0.66) !important;
border: 1px solid rgba(29, 29, 29, 0.1);
color: var(--cg-color-text);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
box-shadow: 0 10px 24px rgba(45, 28, 19, 0.04);
transition:
background 0.22s ease,
border-color 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease;
}
.cg-shop-pagination .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.cg-shop-pagination .woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
border-color: rgba(29, 29, 29, 0.16);
background: #fff !important;
box-shadow: 0 10px 22px rgba(45, 28, 19, 0.08);
}
.cg-shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.current {
border-color: var(--cg-color-dark);
background: #fff !important;
color: var(--cg-color-text);
box-shadow: none;
}
.cg-shop-pagination ul.page-numbers .prev,
.cg-shop-pagination ul.page-numbers .next {
font-size: 16px;
font-weight: 800;
}
.cg-shop-pagination ul.page-numbers .prev::before,
.cg-shop-pagination ul.page-numbers .next::before {
content: none;
}
.cg-shop-overlay {
position: fixed;
inset: 0;
z-index: 1290;
background: rgba(0, 0, 0, 0.36);
opacity: 0;
transition: opacity 0.3s ease;
}
.cg-shop-overlay.is-visible {
opacity: 1;
}
body.cg-shop-filters-open {
overflow: hidden;
}
@media (max-width: 1199px) {
.cg-products-grid,
.cg-shop-products ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.cg-products-grid,
.cg-shop-products ul.products {
gap: 18px;
}
}
@media (max-width: 768px) {
.cg-shop-sidebar {
top: 6px;
left: 6px;
width: min(360px, calc(100vw - 12px));
height: calc(100dvh - 12px);
}
.cg-shop-sidebar[data-animate] {
transform: translateX(calc(-100% - 12px));
}
.cg-shop-sidebar__inner {
padding: 24px 22px;
border-radius: 24px;
}
.cg-shop-layout {
padding-top: 18px;
}
.cg-shop-heading {
margin-bottom: 14px;
}
.cg-shop-heading__title {
font-size: 30px;
}
.cg-shop-heading__text {
font-size: 14px;
}
.cg-shop-toolbar {
flex-direction: column;
align-items: stretch;
margin-bottom: 18px;
}
.cg-shop-toolbar__left,
.cg-shop-toolbar__right {
justify-content: space-between;
}
.cg-shop-toolbar__right .woocommerce-ordering,
.cg-shop-toolbar__right .orderby {
width: 100%;
}
.cg-products-grid,
.cg-shop-products ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.cg-product-card__inner {
padding: 12px;
border-radius: 18px;
}
.cg-product-card__image-wrap {
margin-bottom: 12px;
border-radius: 16px;
}
.cg-product-card__img {
height: 100%;
}
.cg-product-card__badge {
top: 8px;
left: 8px;
padding: 6px 9px;
font-size: 11px;
}
.cg-product-card__title {
font-size: 15px;
}
.cg-product-card__price {
margin-bottom: 12px;
font-size: 14px;
}
.woocommerce-page .cg-product-card__actions .button,
.woocommerce-page .cg-product-card__actions .added_to_cart {
min-height: 44px;
padding: 11px 12px;
font-size: 14px;
}
}
@media (max-width: 375px) {
.cg-products-grid,
.cg-shop-products ul.products {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}