.sgpf {
--sgpf-primary: #ea6612;
--sgpf-primary-dark: #cf5303;
--sgpf-surface: #ffffff;
--sgpf-heading: #111111;
--sgpf-text: #1f2937;
--sgpf-muted: #6b7280;
--sgpf-star: #ea6612;
--sgpf-border: #eadfd6;
--sgpf-search-btn: #111111;
--sgpf-search-btn-hover: #000000;
--sgpf-button-text: #ffffff;
--sgpf-count-bg: #faf7f4;
--sgpf-count-text: #7a7f90;
--sgpf-heading-size: 17px;
--sgpf-option-size: 13px;
--sgpf-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
--sgpf-card-surface: #ffffff;
--sgpf-card-border: #e5e7eb;
--sgpf-card-title: #111111;
--sgpf-card-price: #111827;
--sgpf-card-price-old: #6b7280;
--sgpf-card-button: #ea6612;
--sgpf-card-button-hover: #cf5303;
--sgpf-card-button-text: #ffffff;
--sgpf-card-star: #ea6612;
--sgpf-card-star-empty: #d1d5db;
--sgpf-success: #0a6a42;
--sgpf-success-dark: #085738;
color: var(--sgpf-text);
}
.sgpf__mobile-bar,
.sgpf__drawer-header,
.sgpf__overlay {
display: none;
}
.sgpf__layout {
display: grid;
grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.sgpf__sidebar,
.sgpf__results {
min-width: 0;
}
.sgpf .products {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.sgpf .products.columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sgpf .products.columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sgpf .products li.product {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
height: 100%;
overflow: hidden;
border: 1px solid var(--sgpf-card-border) !important;
border-radius: 8px !important;
background: var(--sgpf-card-surface) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sgpf .products li.product:hover {
transform: translateY(-2px);
border-color: var(--sgpf-card-border) !important;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10) !important;
}
.sgpf .sgpf-product-card__media {
padding: 10px 10px 0;
}
.sgpf .sgpf-product-card__image-link {
display: block;
width: 100%;
aspect-ratio: 0.86 / 1;
overflow: hidden;
border: 1px solid var(--sgpf-card-border);
border-radius: 4px;
background: var(--sgpf-card-surface);
}
.sgpf .sgpf-product-card__image-link img,
.sgpf .products li.product img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--sgpf-card-surface);
}
.sgpf .sgpf-product-card__body {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 auto;
padding: 12px 12px 14px;
text-align: center;
}
.sgpf .sgpf-product-card__title {
margin: 0 0 6px !important;
color: var(--sgpf-card-title) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-align: center !important;
}
.sgpf .sgpf-product-card__title a {
color: inherit !important;
text-decoration: none !important;
}
.sgpf .sgpf-product-card__rating {
margin: 0 auto 6px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 18px;
line-height: 1;
}
.sgpf .sgpf-product-card__rating--empty {
min-height: 18px;
}
.sgpf .sgpf-product-card__star {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
color: var(--sgpf-card-star-empty);
}
.sgpf .sgpf-product-card__star.is-filled {
color: var(--sgpf-card-star);
}
.sgpf .sgpf-product-card__price {
margin: 0 0 12px !important;
color: var(--sgpf-card-price) !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
text-align: center !important;
}
.sgpf .sgpf-product-card__price del {
color: var(--sgpf-card-price-old) !important;
font-size: 14px !important;
font-weight: 600 !important;
opacity: 1 !important;
margin-right: 6px;
}
.sgpf .sgpf-product-card__price ins {
text-decoration: none !important;
}
.sgpf .sgpf-product-card__button {
margin: 0 !important;
width: 100%;
min-height: auto !important;
height: auto !important;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 4px !important;
background: var(--sgpf-card-button) !important;
color: var(--sgpf-card-button-text) !important;
box-shadow: none !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
text-decoration: none !important;
}
.sgpf .sgpf-product-card__button:hover,
.sgpf .sgpf-product-card__button:focus {
background: var(--sgpf-card-button-hover) !important;
color: var(--sgpf-card-button-text) !important;
}
.sgpf__drawer-header {
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.sgpf__drawer-title {
margin: 0;
color: var(--sgpf-heading);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.sgpf__drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--sgpf-heading);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.sgpf__form {
position: sticky;
top: 24px;
padding: 22px 18px 18px;
border: 1px solid var(--sgpf-border);
border-radius: 18px;
background: linear-gradient(180deg, var(--sgpf-surface) 0%, var(--sgpf-surface) 100%);
box-shadow:
0 24px 42px rgba(17, 24, 39, 0.06),
0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.sgpf__section + .sgpf__section {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--sgpf-border);
}
.sgpf__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sgpf__title {
margin: 0 0 14px;
color: var(--sgpf-heading);
font-size: var(--sgpf-heading-size);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.02em;
}
.sgpf__section-head .sgpf__title {
margin-bottom: 0;
}
.sgpf__section-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0 !important;
border-radius: 999px;
background: rgba(234, 102, 18, 0.12) !important;
background-image: none !important;
color: #ea6612 !important;
box-shadow: none !important;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
appearance: none !important;
-webkit-appearance: none !important;
}
@media (max-width: 991px) {
.sgpf .products.columns-4 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.sgpf .products,
.sgpf .products.columns-2,
.sgpf .products.columns-3,
.sgpf .products.columns-4 {
grid-template-columns: 1fr;
}
}
.sgpf__section-toggle:hover,
.sgpf__section-toggle:focus {
background: rgba(234, 102, 18, 0.16) !important;
background-image: none !important;
color: #cf5303 !important;
transform: translateY(-1px);
}
.sgpf__section-toggle-plus,
.sgpf__section-toggle-minus {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
line-height: 1;
color: inherit !important;
}
.sgpf__section-toggle-plus {
display: none;
}
.sgpf__section-body {
margin-top: 14px;
}
.sgpf__section--collapsible.is-collapsed .sgpf__section-body {
display: none;
}
.sgpf__section--collapsible.is-collapsed .sgpf__section-toggle-plus {
display: inline-flex;
}
.sgpf__section--collapsible.is-collapsed .sgpf__section-toggle-minus {
display: none;
}
.sgpf__search {
display: grid;
grid-template-columns: 1fr 44px;
gap: 6px;
align-items: center;
padding: 4px;
border: 1px solid var(--sgpf-border);
border-radius: 10px;
background: var(--sgpf-surface);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.sgpf__search input,
.sgpf__field input {
width: 100%;
min-height: 48px;
padding: 12px 16px;
border: 1px solid var(--sgpf-border);
border-radius: 10px;
background: var(--sgpf-surface);
color: var(--sgpf-text);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.sgpf__search input::placeholder,
.sgpf__field input::placeholder {
color: var(--sgpf-muted);
}
.sgpf__search input:focus,
.sgpf__field input:focus {
outline: 0;
border-color: var(--sgpf-primary);
box-shadow: 0 0 0 4px rgba(234, 102, 18, 0.09);
}
.sgpf__search input {
min-height: 40px;
padding: 10px 14px;
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
}
.sgpf__search input:focus {
border-color: transparent;
box-shadow: none;
}
.sgpf__search-button,
.sgpf__button {
border: 0;
border-radius: 7px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.sgpf__search-button {
min-height: 40px;
min-width: 40px;
padding: 0;
border: 0 !important;
border-radius: 5px !important;
background: var(--sgpf-search-btn) !important;
background-image: none !important;
color: var(--sgpf-button-text) !important;
font-size: 18px;
font-weight: 700;
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
clip-path: inset(0 round 5px);
appearance: none;
-webkit-appearance: none;
}
.sgpf__search-button:hover,
.sgpf__search-button:focus {
border-radius: 5px !important;
background: var(--sgpf-search-btn-hover) !important;
background-image: none !important;
color: var(--sgpf-button-text) !important;
transform: translateY(-1px);
}
.sgpf .sgpf__search .sgpf__search-button,
.sgpf .sgpf__search .sgpf__search-button:hover,
.sgpf .sgpf__search .sgpf__search-button:focus,
.sgpf .sgpf__search .sgpf__search-button:active {
border-radius: 5px !important;
}
.sgpf__search-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--sgpf-button-text);
}
.sgpf__search-glyph svg {
display: block;
width: 100%;
height: 100%;
}
.sgpf__option-list {
display: grid;
gap: 6px;
}
.sgpf__option-list--scroll {
max-height: 298px;
padding-right: 6px;
overflow-y: auto;
}
.sgpf__option-list--scroll::-webkit-scrollbar {
width: 5px;
}
.sgpf__option-list--scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #d9deeb;
}
.sgpf__option-list--scroll::-webkit-scrollbar-track {
background: #f7f8fb;
}
.sgpf__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 6px;
border-radius: 10px;
color: var(--sgpf-text);
font-size: var(--sgpf-option-size);
line-height: 1.35;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.sgpf__option:hover {
background: #f7f9fd;
}
.sgpf__option-main {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.sgpf__section .sgpf__option-main .sgpf__stars + .sgpf__muted {
margin-left: 2px;
}
.sgpf__option input {
width: 18px;
height: 18px;
margin: 0;
border: 1px solid #dfe4ee;
border-radius: 5px;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
accent-color: var(--sgpf-primary);
}
.sgpf__count,
.sgpf__muted {
font-size: 12px;
}
.sgpf__muted {
color: var(--sgpf-muted);
}
.sgpf__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 24px;
padding: 2px 8px;
border-radius: 999px;
background: var(--sgpf-count-bg);
color: var(--sgpf-count-text);
font-weight: 600;
}
.sgpf__stars {
color: var(--sgpf-star);
display: inline-flex;
align-items: center;
letter-spacing: 1px;
white-space: nowrap;
font-size: 18px;
line-height: 1;
}
.sgpf__price-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.sgpf__price-grid--boxed {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
.sgpf__price-box {
display: grid;
gap: 6px;
}
.sgpf__price-label {
color: var(--sgpf-muted);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
}
.sgpf__field {
position: relative;
}
.sgpf__field--range input {
min-height: 44px;
padding: 10px 14px;
}
.sgpf .sgpf__field.sgpf__field--price input {
padding-left: 42px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
border-radius: 12px;
}
.sgpf__currency {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: var(--sgpf-muted);
font-size: 14px;
font-weight: 700;
}
.sgpf__actions {
display: grid;
gap: 10px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--sgpf-border);
}
.sgpf__button {
min-height: 40px;
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
}
.sgpf__button--primary {
background: var(--sgpf-primary);
color: var(--sgpf-button-text);
border-radius: 9px;
box-shadow: 0 10px 18px rgba(17, 24, 39, 0.16);
}
.sgpf__button--secondary {
min-height: auto;
justify-self: center;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
color: var(--sgpf-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 12px;
letter-spacing: 0.01em;
appearance: none !important;
-webkit-appearance: none !important;
outline: 0 !important;
}
.sgpf__button--primary:hover,
.sgpf__button--primary:focus {
background: var(--sgpf-primary-dark);
color: var(--sgpf-button-text);
transform: translateY(-1px);
}
.sgpf__button--secondary:hover {
background: transparent !important;
background-image: none !important;
color: var(--sgpf-text) !important;
box-shadow: none !important;
}
.sgpf__button--secondary:focus,
.sgpf__button--secondary:active,
.sgpf__button--secondary:visited {
background: transparent !important;
background-image: none !important;
color: var(--sgpf-text) !important;
box-shadow: none !important;
border: 0 !important;
}
.sgpf__results-shell {
min-height: 100%;
width: 100%;
}
.sgpf__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.sgpf__result-count {
margin: 0;
color: var(--sgpf-text);
font-size: 15px;
font-weight: 700;
}
.sgpf__grid-wrap {
position: relative;
width: 100%;
}
.sgpf__catalog {
width: 100%;
}
.sgpf__grid-wrap .products {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 24px;
padding: 0;
list-style: none;
}
.sgpf__grid-wrap .products::before,
.sgpf__grid-wrap .products::after {
content: none !important;
display: none !important;
}
.sgpf__grid-wrap .products[class*="columns-"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sgpf__grid-wrap .products > li.product {
display: flex;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
.sgpf__catalog .products li.product .woocommerce-loop-product__title {
font-size: 15px !important;
line-height: 1.35 !important;
}
.sgpf__empty {
padding: 48px 24px;
border: 1px solid var(--sgpf-border);
border-radius: 24px;
background: var(--sgpf-surface);
box-shadow: var(--sgpf-shadow);
text-align: center;
}
.sgpf__empty h3 {
margin: 0 0 10px;
color: var(--sgpf-text);
font-size: 22px;
}
.sgpf__empty p {
margin: 0;
color: var(--sgpf-muted);
}
.sgpf__infinite-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
margin-top: 22px;
text-align: center;
}
.sgpf__infinite-wrap.is-end {
margin-top: 18px;
}
.sgpf__infinite-text {
margin: 0;
color: var(--sgpf-muted);
font-size: 13px;
font-weight: 500;
}
.sgpf__infinite-trigger {
width: 1px;
height: 1px;
}
.sgpf.is-loading .sgpf__results-shell {
opacity: 0.55;
pointer-events: none;
}
.sgpf.is-appending .sgpf__infinite-text {
color: var(--sgpf-primary);
}
.sgpf.is-loading .sgpf__results-shell::after {
content: "";
position: absolute;
inset: 0;
}
.sgpf.is-loading .sgpf__button,
.sgpf.is-loading .sgpf__search-button {
opacity: 0.65;
}
@media (max-width: 1024px) {
.sgpf__layout {
grid-template-columns: 1fr;
}
.sgpf__form {
position: static;
}
.sgpf__grid-wrap .products,
.sgpf__grid-wrap .products[class*="columns-"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 18px;
row-gap: 22px;
}
}
@media (max-width: 767px) {
body.sgpf-drawer-open {
overflow: hidden;
}
.sgpf__mobile-bar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 14px;
}
.sgpf__mobile-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 14px;
border: 1px solid #e7ebf2;
border-radius: 10px;
background: var(--sgpf-surface);
color: var(--sgpf-heading);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.sgpf__mobile-toggle:hover,
.sgpf__mobile-toggle:focus {
background: #ea6612;
color: #ffffff;
border-color: #ea6612;
}
.sgpf__mobile-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.sgpf__mobile-toggle-icon svg {
display: block;
width: 100%;
height: 100%;
}
.sgpf__overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(17, 24, 39, 0.52);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.24s ease, visibility 0.24s ease;
z-index: 9998;
}
.sgpf__layout {
grid-template-columns: 1fr;
}
.sgpf__sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9999;
width: min(320px, 86vw);
padding: 14px 12px;
background: var(--sgpf-surface);
box-shadow: 18px 0 40px rgba(15, 23, 42, 0.18);
transform: translateX(-102%);
transition: transform 0.28s ease;
overflow-y: auto;
}
.sgpf.is-open .sgpf__sidebar {
transform: translateX(0);
}
.sgpf.is-open .sgpf__overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sgpf__drawer-header {
display: flex;
}
.sgpf__form {
position: static;
padding: 18px 14px;
border-radius: 14px;
box-shadow: none;
border: 0;
background: transparent;
}
.sgpf__search {
grid-template-columns: 1fr 42px;
}
.sgpf__price-grid,
.sgpf__price-grid--boxed {
grid-template-columns: 1fr;
}
.sgpf__grid-wrap .products,
.sgpf__grid-wrap .products[class*="columns-"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
row-gap: 16px;
}
.sgpf__pagination .page-numbers {
gap: 8px;
}
}
@media (max-width: 480px) {
.sgpf__grid-wrap .products,
.sgpf__grid-wrap .products[class*="columns-"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 10px;
row-gap: 14px;
}
}