.budbe-gallery-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 60px 40px;
}
.budbe-gallery-item {
width: 230px;
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: var(--secondary-color);
display: flex;
text-decoration: none;
height: 118px;
position: relative;
}
.budbe-gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}
.budbe-gallery-item-content {
display: flex;
width: 100%;
height: 100%;
}
.budbe-gallery-item-image {
flex: 0 0 55%;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: center;
}
.budbe-gallery-item-image img {
height: 100%;
width: auto;
object-fit: contain;
display: block;
max-width: 100%;
}
.budbe-gallery-item-text {
flex: 0 0 45%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px;
color: var(--primary-color);
font-family: 'Georgia', serif;
font-size: 14px;
line-height: 1.3;
word-wrap: break-word;
hyphens: auto;
}
.budbe-gallery-item-text span {
display: block;
width: 100%;
text-align: center;
overflow-wrap: break-word;
} .budbe-shop-gallery {
max-width: var(--container-width);
padding: 15px 0;
margin: 0px auto;
}
.budbe-shop-gallery .budbe-gallery-container {
gap: 15px 40px;
}
.budbe-shop-gallery .budbe-gallery-item {
height: 80px;
background: var(--primary-color);
width: 200px;
}
.budbe-shop-gallery .budbe-gallery-item-image {
flex: 0 0 45%;
}
.budbe-shop-gallery .budbe-gallery-item-text {
color: var(--secondary-color);
flex: 0 0 55%;
} @media (max-width: 1024px) {
.budbe-shop-gallery .budbe-gallery-container {
gap: 25px 30px;
}
}
@media (max-width: 768px) {
.budbe-shop-gallery .budbe-gallery-container {
gap: 20px 20px;
}
} @media (max-width: 480px) {
.budbe-shop-gallery {
padding: 10px 0;
}
.budbe-shop-gallery .budbe-gallery-container {
gap: 15px 15px;
}
.budbe-shop-gallery .budbe-gallery-item {
width: calc(50% - 10px);
flex: 0 1 calc(50% - 10px);
max-width: none;
}
.budbe-shop-gallery .budbe-gallery-item-text {
font-size: 10px;
}
} @media (max-width: 360px) {
.budbe-shop-gallery .budbe-gallery-container {
gap: 15px 0;
}
.budbe-shop-gallery .budbe-gallery-item {
width: 100%;
max-width: 250px;
flex: 0 1 100%;
margin-left: auto;
margin-right: auto;
}
.budbe-shop-gallery .budbe-gallery-item-text {
font-size: 11px;
}
}
.budbe-shop-main {
background: var(--secondary-color);
min-height: calc(100vh - var(--header-height) - 100px);
min-height: calc(100dvh - var(--header-height) - 100px);
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: clip;
}
.budbe-shop-catalog-title {
max-width: var(--container-width);
margin: 24px auto 8px;
padding: 0 20px;
font-family: 'Georgia', serif;
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 400;
line-height: 1.25;
color: var(--primary-color);
text-align: center;
}
@media (max-width: 768px) {
.budbe-shop-catalog-title {
margin-top: 16px;
margin-bottom: 4px;
}
} .budbe-shop-products {
padding: 0;
background: var(--secondary-color);
}
.budbe-products-grid-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.budbe-products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
margin-top: 15px;
align-items: stretch;
} .budbe-shop-product-card {
background: transparent;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
}
.budbe-shop-product-image-link {
text-decoration: none;
color: inherit;
display: block;
margin-bottom: 8px;
}
.budbe-shop-product-image {
position: relative;
overflow: hidden;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.budbe-shop-product-image img {
width: 100%;
height: auto;
display: block;
} .budbe-shop-product-media {
margin-bottom: 8px;
}
.budbe-shop-product-media .budbe-shop-product-image-link {
margin-bottom: 0;
}
.budbe-shop-product-image--catalog-gallery {
position: relative;
}
.budbe-catalog-gallery-viewport {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 12px;
min-height: 160px;
touch-action: pan-y;
}
.budbe-catalog-gallery-slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
pointer-events: none;
transition: none;
}
.budbe-catalog-gallery-slide.is-active {
opacity: 1;
z-index: 1;
}
.budbe-shop-product-image--catalog-gallery .budbe-shop-sale-badge {
z-index: 3;
}
.budbe-catalog-gallery-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
padding: 8px 4px 2px;
flex-wrap: wrap;
}
.budbe-catalog-gallery-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(49, 83, 58, 0.28);
cursor: pointer;
flex-shrink: 0;
}
.budbe-catalog-gallery-dot:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.budbe-catalog-gallery-dot.is-active {
background: var(--primary-color);
transform: scale(1.2);
} .budbe-shop-sale-badge,
.budbe-single-product-root .woocommerce-product-gallery span.budbe-shop-sale-badge,
.budbe-single-product-root .woocommerce-product-gallery span.onsale.budbe-shop-sale-badge,
.budbe-single-product-root .budbe-single-product-gallery__main span.budbe-shop-sale-badge,
.budbe-single-product-root .budbe-single-product-gallery__main span.onsale.budbe-shop-sale-badge {
position: absolute;
top: 12px;
right: 12px;
left: auto;
bottom: auto;
margin: 0;
transform: none;
background: #ff4444;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
font-family: Arial, sans-serif;
text-transform: uppercase;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.15;
letter-spacing: normal;
box-sizing: border-box;
box-shadow: none;
min-width: 0;
} .budbe-shop-product-heading {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
.budbe-shop-product-title-container {
text-align: center;
margin: 0;
}
.budbe-shop-product-rating-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 2px;
min-height: 1.35em;
}
.budbe-shop-product-card .budbe-product-rating-compact {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px 7px;
font-size: 0.88rem;
line-height: 1.25;
color: var(--text-color);
}
.budbe-shop-product-card .budbe-product-rating-compact__star {
display: inline-flex;
color: #e6b800;
line-height: 1;
}
.budbe-shop-product-card .budbe-product-rating-compact__star i {
font-size: 0.95em;
line-height: 1;
}
.budbe-shop-product-card .budbe-product-rating-compact__score {
font-weight: 600;
color: var(--primary-color);
}
.budbe-shop-product-card .budbe-product-rating-compact__count {
color: rgba(49, 83, 58, 0.75);
font-size: 0.95em;
}
.budbe-shop-product-title-link {
text-decoration: none;
color: inherit;
display: inline-block;
max-width: 100%;
}
.budbe-shop-product-title {
font-family: 'Georgia', serif;
font-size: 1rem;
color: var(--primary-color);
margin: 0;
line-height: 1.4;
white-space: normal;
overflow: visible;
max-height: 2.6em;
text-overflow: unset;
display: -webkit-box;
text-align: center;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.budbe-shop-product-content {
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: auto;
}
.budbe-shop-product-price {
font-size: 1.1rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 10px;
width: 100%;
}
.budbe-shop-product-price del {
color: rgba(49, 83, 58, 0.7);
font-size: 0.9rem;
margin-right: 5px;
}
.budbe-shop-product-price ins {
text-decoration: none;
color: var(--primary-color);
}
.budbe-shop-add-to-cart-button {
background: var(--primary-color);
color: var(--secondary-color);
border: none;
border-radius: 12px;
padding: 8px 16px;
cursor: pointer;
font-size: 0.9rem;
font-weight: bold;
transition: background-color 0.3s ease;
width: 160px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.budbe-shop-add-to-cart-button:hover {
background: #2a4730;
}
.budbe-shop-product-card.budbe-shop-out-of-stock {
opacity: 0.7;
}
.budbe-shop-add-to-cart-button.budbe-shop-out-of-stock {
background: rgba(49, 83, 58, 0.3);
color: rgba(220, 221, 214, 0.7);
cursor: not-allowed;
}
.budbe-shop-add-to-cart-button.budbe-shop-out-of-stock:hover {
background: rgba(49, 83, 58, 0.3);
}
.budbe-no-products {
text-align: center;
padding: 60px 20px;
color: var(--primary-color);
font-size: 1.2rem;
}
@media (max-width: 1024px) {
.budbe-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.budbe-shop-product-title {
font-size: 0.95rem;
}
.budbe-shop-add-to-cart-button {
width: 140px;
height: 34px;
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.budbe-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.budbe-products-grid-container {
padding: 0 15px;
}
.budbe-shop-product-title {
font-size: 0.9rem;
}
.budbe-shop-product-price {
font-size: 1rem;
margin-bottom: 8px;
}
}
@media (max-width: 480px) {
.budbe-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.budbe-products-grid-container {
padding: 0 8px;
}
.budbe-shop-product-title {
font-size: 0.8rem;
line-height: 1.3;
}
.budbe-shop-product-price {
font-size: 0.85rem;
margin-bottom: 5px;
}
.budbe-shop-add-to-cart-button {
width: 120px;
height: 30px;
font-size: 0.75rem;
padding: 4px 8px;
}
.budbe-shop-sale-badge,
.budbe-single-product-root .woocommerce-product-gallery span.budbe-shop-sale-badge,
.budbe-single-product-root .woocommerce-product-gallery span.onsale.budbe-shop-sale-badge,
.budbe-single-product-root .budbe-single-product-gallery__main span.budbe-shop-sale-badge,
.budbe-single-product-root .budbe-single-product-gallery__main span.onsale.budbe-shop-sale-badge {
top: 6px;
right: 6px;
padding: 3px 6px;
}
.budbe-shop-pagination-wrap {
margin-top: 30px;
}
}
@media (max-width: 360px) {
.budbe-products-grid {
grid-template-columns: 1fr;
gap: 15px;
}
} .budbe-shop-pagination-wrap {
margin-top: 40px;
} .budbe-shop-pagination-wrap nav.woocommerce-pagination ul.page-numbers {
border: none;
}
.budbe-shop-pagination-wrap nav.woocommerce-pagination ul.page-numbers li {
border: none;
border-right: none;
}
.budbe-shop-pagination-wrap .page-numbers a.page-numbers,
.budbe-shop-pagination-wrap .page-numbers span.page-numbers {
border: none;
border-radius: 12px;
color: var(--primary-color);
}
.budbe-shop-pagination-wrap .page-numbers a.page-numbers:hover,
.budbe-shop-pagination-wrap .page-numbers a.page-numbers:focus {
background: #2a4730;
color: var(--secondary-color);
}
.budbe-shop-pagination-wrap .page-numbers span.page-numbers.current {
background: var(--primary-color);
color: var(--secondary-color);
} .budbe-filters-section {
background: var(--secondary-color);
padding: 30px 0;
margin: 0;
}
.budbe-filters-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.budbe-filters-row {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-wrap: wrap;
} .budbe-filter-dropdown {
position: relative;
display: inline-block;
}
.budbe-filter-toggle {
background: var(--primary-color);
color: var(--secondary-color);
border: none;
padding: 12px 20px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
min-width: 140px;
justify-content: space-between;
}
.budbe-filter-toggle:hover {
background: #2a4730;
transform: translateY(-1px);
}
.budbe-filter-toggle i {
font-size: 12px;
transition: transform 0.3s ease;
}
.budbe-filter-toggle.active i {
transform: rotate(180deg);
}
.budbe-filter-dropdown-content {
position: absolute;
top: 100%;
left: 0;
background: var(--secondary-color);
min-width: 220px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-radius: 12px;
padding: 15px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
margin-top: 5px;
}
.budbe-filter-dropdown-content.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
} .budbe-price-filter .budbe-filter-dropdown-content {
min-width: 250px;
}
.budbe-price-inputs {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.budbe-price-input {
flex: 1;
position: relative;
padding: 11px 14px;
border: 1px solid rgba(49, 83, 58, 0.4);
border-radius: 12px;
font-size: 15px;
line-height: 1.4;
color: #333333;
background: var(--secondary-color);
box-sizing: border-box;
}
.budbe-price-input::placeholder {
color: rgba(51, 51, 51, 0.55);
}
.budbe-price-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(49, 83, 58, 0.15);
background: var(--secondary-color);
} .budbe-price-input::-webkit-textfield-decoration-container {
background: transparent;
}
.budbe-price-input::-webkit-inner-spin-button,
.budbe-price-input::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
opacity: 1;
display: block;
position: absolute;
top: 0;
right: 0;
width: 1.4em;
height: 100%;
margin: 0;
cursor: pointer;
background-color: var(--secondary-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1 4.5 5 1.5 9 4.5' fill='none' stroke='%23333333' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 9.5 5 12.5 9 9.5' fill='none' stroke='%23333333' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 10px 14px;
border-radius: 0 11px 11px 0;
}
.budbe-price-slider {
margin-bottom: 15px;
}
.budbe-price-apply {
background: var(--primary-color);
color: var(--secondary-color);
border: none;
padding: 8px 16px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
width: 100%;
transition: background-color 0.3s ease;
}
.budbe-price-apply:hover {
background: #2a4730;
} .budbe-filter-options {
max-height: 200px;
overflow-y: auto;
}
.budbe-filter-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
cursor: pointer;
}
.budbe-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.budbe-filter-option input[type="checkbox"],
.budbe-sort-option input[type="radio"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
border: 1px solid rgba(49, 83, 58, 0.4);
border-radius: 4px;
background: var(--secondary-color);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
vertical-align: middle;
}
.budbe-filter-option input[type="checkbox"]:checked,
.budbe-filter-option input[type="checkbox"]:focus-visible,
.budbe-sort-option input[type="radio"]:checked,
.budbe-sort-option input[type="radio"]:focus-visible {
outline: none;
}
.budbe-filter-option input[type="checkbox"]:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.6' stroke='%23dcddd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 9px;
}
.budbe-sort-option input[type="radio"] {
border-radius: 50%;
}
.budbe-sort-option input[type="radio"]:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
box-shadow: inset 0 0 0 3px var(--secondary-color);
}
.budbe-filter-option input[type="checkbox"]:focus-visible,
.budbe-sort-option input[type="radio"]:focus-visible {
box-shadow: 0 0 0 2px rgba(49, 83, 58, 0.2);
}
.budbe-filter-option label {
cursor: pointer;
font-size: 14px;
margin: 0;
flex: 1;
} .budbe-reset-filters {
background: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 12px 20px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.budbe-reset-filters:hover {
background: var(--primary-color);
color: var(--secondary-color);
} .budbe-filter-results {
text-align: center;
margin-top: 15px;
color: var(--primary-color);
font-size: 14px;
}
@media (max-width: 768px) {
.budbe-filters-row {
gap: 10px;
}
.budbe-filter-toggle,
.budbe-reset-filters {
padding: 10px 16px;
font-size: 13px;
}
.budbe-filter-toggle {
min-width: 120px;
}
.budbe-filter-dropdown-content {
min-width: 200px;
}
}
@media (max-width: 480px) {
.budbe-filters-section {
padding: 20px 0;
}
.budbe-filters-container {
padding: 0 15px;
}
.budbe-filters-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: center;
justify-items: center;
}
.budbe-filter-dropdown {
width: 100%;
max-width: 160px;
}
.budbe-filter-toggle {
width: 100%;
justify-content: center;
text-align: center;
min-width: auto;
}
.budbe-reset-filters {
grid-column: 1 / -1;
width: auto;
min-width: 160px;
margin-top: 5px;
justify-self: center;
}
.budbe-filter-dropdown-content {
left: 50%;
transform: translateX(-50%) translateY(-10px);
min-width: 200px;
width: auto;
}
.budbe-filter-dropdown-content.active {
transform: translateX(-50%) translateY(0);
}
}
@media (max-width: 360px) {
.budbe-filters-row {
grid-template-columns: 1fr;
}
.budbe-filter-dropdown {
max-width: 100%;
}
.budbe-reset-filters {
width: 100%;
min-width: auto;
}
} .budbe-filter-dropdown-content,
.budbe-filter-option label {
color: var(--primary-color);
} .budbe-filter-options::-webkit-scrollbar-thumb {
background: var(--primary-color);
} .budbe-gallery-item.active {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,1);
}