.env-carousel {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.env-carousel[data-env-carousel-ready="1"] {
cursor: grab;
}
.env-carousel.is-dragging {
cursor: grabbing;
}
.env-carousel.is-dragging .env-carousel-track {
transition: none;
}
.env-carousel.is-dragging,
.env-carousel.is-dragging * {
user-select: none;
-webkit-user-select: none;
}
.env-carousel-track {
display: flex;
transition: transform 0.4s ease;
gap: var(--env-carousel-gap, 0px);
will-change: transform;
}
.env-carousel-slide {
flex: 0 0
calc(
(100% - (var(--env-carousel-per-view, 1) - 1) * var(--env-carousel-gap, 0px)) /
var(--env-carousel-per-view, 1)
);
width: auto;
min-width: 0;
aspect-ratio: var(--env-carousel-ratio, 16 / 9);
height: auto;
display: block;
}
.env-carousel[data-ratio="4-3"] .env-carousel-slide {
aspect-ratio: 4 / 3;
}
.env-carousel[data-ratio="1-1"] .env-carousel-slide {
aspect-ratio: 1 / 1;
}
.env-carousel[data-ratio="3-4"] .env-carousel-slide {
aspect-ratio: 3 / 4;
}
.env-carousel[data-ratio="auto"] .env-carousel-slide {
aspect-ratio: auto;
}
.env-carousel-slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
img.env-carousel-slide {
object-fit: cover;
}
.env-carousel[data-arrows="0"] .env-carousel-prev,
.env-carousel[data-arrows="0"] .env-carousel-next,
.env-carousel[data-dots="0"] .env-carousel-dots {
display: none;
}
.env-carousel-prev,
.env-carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
z-index: 2;
}
.env-carousel-prev {
left: 12px;
}
.env-carousel-next {
right: 12px;
}
.env-carousel-prev:hover,
.env-carousel-next:hover {
background: rgba(0, 0, 0, 0.65);
}
.env-carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 2;
}
.env-carousel-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.env-carousel-dot.is-active {
background: #fff;
}
.env-carousel-prev:focus-visible,
.env-carousel-next:focus-visible,
.env-carousel-dot:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.env-carousel-track {
transition: none;
}
}
.env-carousel-slide-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.env-carousel-slide-content .env-btn {
align-self: center;
}
[data-env-widget="post-carousel"] {
--env-pc-dots-gap: 30px;
--env-pc-dots-size: 9px;
padding-bottom: calc(var(--env-pc-dots-gap) + var(--env-pc-dots-size));
}
[data-env-widget="post-carousel"] .env-carousel-dots {
bottom: 0;
}
[data-env-widget="post-carousel"] .env-carousel-prev,
[data-env-widget="post-carousel"] .env-carousel-next {
top: calc((100% - var(--env-pc-dots-gap) - var(--env-pc-dots-size)) / 2);
}
[data-env-widget="post-carousel"] .env-carousel-dot {
box-sizing: border-box;
width: var(--env-pc-dots-size);
height: var(--env-pc-dots-size);
background: transparent;
border: 1px solid var(--env-primary, #0fa697);
}
[data-env-widget="post-carousel"] .env-carousel-dot.is-active {
background: var(--env-primary, #0fa697);
}
.env-post-card.env-carousel-slide {
aspect-ratio: auto;
height: auto;
align-items: stretch;
}
.env-post-card {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(17, 24, 39, 0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.env-post-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -28px rgba(17, 24, 39, 0.5);
}
.env-post-card-link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
color: inherit;
text-decoration: none;
}
.env-post-card-link:hover {
color: inherit;
}
.env-post-card-media {
display: block;
margin-bottom: 14px;
}
.env-post-card-image {
display: block;
width: 100%;
aspect-ratio: var(--env-pc-image-ratio, 1 / 1);
height: auto;
border-radius: var(--env-wc-radius-sm, 10px);
object-fit: cover;
}
.env-post-card-image--empty {
background:
linear-gradient(135deg, rgba(17, 24, 39, 0.06), rgba(17, 24, 39, 0.12));
}
.env-post-card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
}
.env-post-card-title {
font-size: 1.05rem;
font-weight: 600;
line-height: 1.35;
}
.env-post-card-excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: #6b7280;
}
.env-post-card-more {
margin-top: 4px;
font-size: 0.85rem;
font-weight: 600;
color: #111827;
}
.env-carousel-slide.env-carousel-zoomable {
cursor: zoom-in;
}
.env-carousel-slide.env-carousel-zoomable:focus-visible {
outline: 2px solid var(--env-primary, #0fa697);
outline-offset: 2px;
}
.env-post-card-price {
margin-top: 2px;
color: var(--env-wc-accent, #0fa697);
font-weight: 700;
font-size: 0.98rem;
}
.env-post-card-price del {
margin-right: 6px;
color: rgba(17, 24, 39, 0.5);
font-weight: 500;
text-decoration: line-through;
}
.env-post-card-price ins {
background: none;
text-decoration: none;
}
.env-post-card-media {
position: relative;
}
.env-post-card-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 1;
padding: 3px 9px;
border-radius: 999px;
background: var(--env-wc-accent, #0fa697);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.env-post-card-actions {
display: block;
padding: 12px 0 0;
}
.env-post-card-actions .button {
display: inline-block;
width: 100%;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: var(--env-wc-accent, #0fa697);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.env-post-card-actions .button:hover {
filter: brightness(1.06);
}