.products-display-block { }
.products-display-block .no-products {
text-align: center;
padding: 30px;
background: #f8f8f8;
border-radius: 4px;
color: #666;
} .products-carousel-container {
position: relative; } .products-carousel.swiper {
width: 100%;
margin-bottom: 10px;
position: relative;
.swiper-wrapper {
padding-bottom: 15px;
}
} .products-carousel.shadow-right::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
pointer-events: none;
z-index: 1;
}
.products-carousel.shadow-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40px;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
pointer-events: none;
z-index: 1;
} .products-carousel .swiper-slide {
height: auto;
box-sizing: border-box;
} .products-carousel .swiper-slide .product {
width: 100% !important;
margin: 0 !important;
padding: 0;
float: none !important;
list-style: none;
} .products-display-block.display-mode-carousel .carousel-nav {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 16px;
} .products-display-block.display-mode-carousel .swiper-pagination {
position:  relative;
}
.carousel-pagination {
display: flex;
justify-content: center;
align-items: center;
} .pagination-svg-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 280px;
margin: 0 auto;
} .pagination-indicators {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1;
} .pagination-arrow-container {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
transition: all 0.3s ease;
position: relative;
}
.pagination-arrow-container:before {
content: '';
position: absolute;
width: 26px;
height: 26px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid transparent;
transition: border-color 0.3s ease;
}
.pagination-arrow-container:hover:before {
border-color: rgba(114, 2, 19, 0.3);
}
.pagination-arrow-container.disabled {
opacity: 0.5;
cursor: default !important;
}
.pagination-arrow-container.disabled:hover {
background-color: transparent;
}
.pagination-arrow-container.disabled:hover:before {
border-color: transparent;
} .pagination-arrow-svg {
display: block;
width: 7px;
height: 12px;
} .pagination-indicator {
display: block;
width: 35px;
height: 4px;
transition: all 0.3s ease;
border-radius: 2px;
}
.pagination-indicator.active {
background-color: #720213;
}
.pagination-indicator.inactive {
background-color: #FFE7E7;
}
.pagination-indicator.inactive:hover {
background-color: #FFD0D0;
} .carousel-pagination .swiper-pagination-bullet {
display: none;
} .products-display-block .product::before {
display: none !important;
} @media (max-width: 768px) { .pagination-svg-container {
gap: 15px;
max-width: 220px;
}
.pagination-indicators {
gap: 10px;
}
.pagination-indicator {
width: 30px;
height: 3px;
}
.pagination-arrow-container {
width: 28px;
height: 28px;
}
.carousel-nav {
gap: 10px;
} .pagination-svg-container {
gap: 10px;
max-width: 180px;
}
.pagination-indicators {
gap: 8px;
}
.pagination-indicator {
width: 25px;
height: 2px;
}
.pagination-arrow-container {
width: 24px;
height: 24px;
}
.carousel-nav {
gap: 5px;
} .products-carousel.shadow-right::after,
.products-carousel.shadow-left::before {
width: 30px;
}
.products-carousel.swiper .swiper-wrapper {
padding-bottom: 10px;
}
.product {
box-shadow: none;
}
.product:hover .product-card-inner {
box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
}.parent-categories-grid {
display: grid;
gap: 24px;
margin-bottom: 32px;
} .parent-categories-grid {
grid-template-columns: repeat(2, 1fr);
} @media (min-width: 576px) {
.parent-categories-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.parent-categories-grid.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.parent-categories-grid.columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.parent-categories-grid.columns-6 {
grid-template-columns: repeat(6, 1fr);
}
} .parent-category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none !important;
transition: transform 0.3s ease;
}
.parent-category-item:hover {
transform: translateY(-5px);
} .parent-category-image-container {
width: 100%;
padding-bottom: 100%; position: relative;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
background-color: #f5f5f5;
border: 1px solid #f2f2f2;
}
.parent-category-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0 !important;
} .parent-category-name {
font-family: 'Manrope', sans-serif;
font-weight: 500;
font-size: 1.125rem;
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
margin-top: 0px !important;
&:hover {
color: var(--primary-color);
}
} .parent-category-count {
font-family: 'Manrope', sans-serif;
font-size: 0.875rem;
color: #484848;
margin-top: 4px;
} .parent-categories-carousel-container {
position: relative;
margin-bottom: 32px;
} .parent-categories-carousel-container.carousel-disabled {
display: grid;
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
.parent-categories-carousel-container.carousel-disabled .parent-categories-carousel {
display: contents;
}
.parent-categories-carousel-container.carousel-disabled .swiper-wrapper {
display: contents;
}
.parent-categories-carousel-container.carousel-disabled .swiper-slide {
display: block;
} @media (min-width: 576px) {
.parent-categories-carousel-container.carousel-disabled {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.parent-categories-carousel-container.carousel-disabled.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.parent-categories-carousel-container.carousel-disabled.columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.parent-categories-carousel-container.carousel-disabled.columns-6 {
grid-template-columns: repeat(6, 1fr);
}
} .parent-categories-carousel-container .swiper-button-prev,
.parent-categories-carousel-container .swiper-button-next {
color: #720213;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.parent-categories-carousel-container .swiper-button-prev:after,
.parent-categories-carousel-container .swiper-button-next:after {
font-size: 16px;
font-weight: bold;
} @media (min-width: 768px) {
.parent-categories-carousel-container .swiper-button-prev,
.parent-categories-carousel-container .swiper-button-next {
display: none;
}
} .parent-categories-carousel-container.mobile-grid-3 .parent-categories-mobile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.parent-categories-carousel-container.mobile-grid-3 .parent-category-grid-item {
display: block;
} @media (min-width: 768px) {
.parent-categories-carousel-container.mobile-grid-3 .parent-categories-mobile-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 576px) {
.parent-categories-carousel-container.mobile-grid-3 .parent-categories-mobile-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.parent-categories-carousel-container.mobile-grid-3.columns-4 .parent-categories-mobile-grid {
grid-template-columns: repeat(4, 1fr);
}
.parent-categories-carousel-container.mobile-grid-3.columns-5 .parent-categories-mobile-grid {
grid-template-columns: repeat(5, 1fr);
}
.parent-categories-carousel-container.mobile-grid-3.columns-6 .parent-categories-mobile-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (max-width: 767px) {
.parent-category-name {
font-size: 1rem !important;
}
}.heading-divider {
position: relative;
margin-bottom: 30px;
}
.heading-divider__title {
margin-top: 0;
margin-bottom: 15px;
font-weight: 600;
}
.heading-divider.text-left {
text-align: left;
}
.heading-divider.text-center {
text-align: center;
}
.heading-divider.text-right {
text-align: right;
}
.heading-divider__image {
display: flex;
justify-content: center;
margin-top: 10px;
}
.heading-divider.text-left .heading-divider__image {
justify-content: flex-start;
}
.heading-divider.text-right .heading-divider__image {
justify-content: flex-end;
}
.heading-divider__svg {
height: 20px;
width: auto;
margin: 0 !important;
}.wp-block-ruoungon24h-deal-section-link {
display: block;
text-decoration: none;
color: inherit;
transition: opacity 0.3s ease;
}
.wp-block-ruoungon24h-deal-section-link:hover {
opacity: 0.95;
text-decoration: none;
color: inherit;
}
.wp-block-ruoungon24h-deal-section {
position: relative;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
border-radius: 8px;
overflow: hidden;
}
.wp-block-ruoungon24h-deal-section-inner {
position: relative;
z-index: 1;
width: 100%;
min-width: 90vw;
margin: 0 auto;
&>h2 {
margin: 0;
}
.products-display-block {
margin-top:	1rem;
}
} .wp-block-ruoungon24h-deal-section-inner:not(.has-background) {
background: linear-gradient(256.2deg, #720213 20.7%, #C31732 50%, #720213 79.3%);
color: #ffffff;
padding: 2rem;
border-radius: 8px;
} .wp-block-ruoungon24h-deal-section.alignfull {
width: 100vw;
max-width: 100%;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
border-radius: 0;
}
.wp-block-ruoungon24h-deal-section.alignwide {
width: calc(100% + 4rem);
max-width: calc(100% + 4rem);
margin-left: -2rem;
margin-right: -2rem;
} .wp-block-ruoungon24h-deal-section .products-carousel.swiper .swiper-wrapper {
padding-bottom: 0;
}
.wp-block-ruoungon24h-deal-section .pagination-indicator.inactive {
background: rgba(255, 255, 255, 0.5);
}
.wp-block-ruoungon24h-deal-section .pagination-indicator.active {
background-color: #fff;
}
.wp-block-ruoungon24h-deal-section .pagination-arrow-container .pagination-arrow-svg path {
color: #fff;
fill: #fff;
}
.wp-block-ruoungon24h-deal-section .products-carousel .swiper-slide .product {
box-shadow: none;
}
.wp-block-ruoungon24h-deal-section .products-carousel .swiper-slide .product:hover .product-card-inner {
box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.wp-block-ruoungon24h-deal-section .products-carousel.shadow-left::before,
.wp-block-ruoungon24h-deal-section .products-carousel.shadow-right::after {
display: none;
}
.wp-block-ruoungon24h-deal-section .pagination-arrow-container:hover:before {
border-color: rgba(255, 255, 255, 1);
}
.wp-block-ruoungon24h-deal-section {
padding-left: 2rem;
padding-right: 2rem;
} @media (max-width: 768px) {
.wp-block-ruoungon24h-deal-section {
padding: 0 !important;
}
.wp-block-ruoungon24h-deal-section-inner {
min-width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}.wp-block-ruoungon24h-section-divider-link-wrapper {
position: relative;
display: block;
width: 100%;
}
.wp-block-ruoungon24h-section-divider-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
text-decoration: none;
color: inherit;
transition: background-color 0.3s ease;
cursor: pointer;
}
.wp-block-ruoungon24h-section-divider-link:hover {
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none;
color: inherit;
} .wp-block-ruoungon24h-section-divider.is-background-divider { } .wp-block-ruoungon24h-section-divider-image {
display: block;
max-width: 100%;
height: auto;
}
.wp-block-ruoungon24h-section-divider-image-link {
display: inline-block;
max-width: 100%;
transition: opacity 0.3s ease;
}
.wp-block-ruoungon24h-section-divider-image-link:hover {
opacity: 0.9;
}
.wp-block-ruoungon24h-section-divider-image-placeholder {
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 2rem;
border: 1px dashed #ccc;
border-radius: 4px;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.wp-block-ruoungon24h-section-divider {
width: 100%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-ruoungon24h-section-divider-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
z-index: 2;
} .wp-block-ruoungon24h-section-divider.has-parallax {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
} .wp-block-ruoungon24h-section-divider.alignfull {
max-width: 100%;
margin-left: 0;
margin-right: 0;
} .wp-block-ruoungon24h-section-divider.alignwide {
max-width: var(--wp--style--global--wide-size);
margin-left: auto;
margin-right: auto;
}