:root {
--wcs-color: #e53935;
--wcs-color-2: #ff7043;
--wcs-text: #1f2430;
--wcs-line: #ececf1;
} .wc-sale-section {
margin-bottom: 40px;
} .wc-sale-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--wcs-line);
position: relative;
} .wc-sale-section__header::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 110px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--wcs-color), var(--wcs-color-2));
}
.wc-sale-section__title {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.45em;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--wcs-text);
} .wc-sale-section__title::before {
content: "";
flex: 0 0 auto;
width: 5px;
height: 1.2em;
border-radius: 4px;
background: linear-gradient(180deg, var(--wcs-color), var(--wcs-color-2));
} .wc-sale-section__btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 6px 6px 6px 20px;
border-radius: 50px;
background: linear-gradient(135deg, var(--wcs-color), var(--wcs-color-2));
color: #fff;
font-size: 0.88em;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 6px 16px rgba(229, 57, 53, 0.28);
position: relative;
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
} .wc-sale-section__btn::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.45),
transparent
);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.wc-sale-section__btn:hover,
.wc-sale-section__btn:focus {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(229, 57, 53, 0.38);
}
.wc-sale-section__btn:hover::before,
.wc-sale-section__btn:focus::before {
left: 130%;
}
.wc-sale-section__btn:active {
transform: translateY(0);
}
.wc-sale-section__btn-text {
position: relative;
}
.wc-sale-section__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: var(--wcs-color);
position: relative;
transition: transform 0.3s ease;
}
.wc-sale-section__btn:hover .wc-sale-section__arrow {
transform: translateX(3px);
}
.wc-sale-section__arrow svg {
display: block;
} @keyframes wcsFadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes wcsGrow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
} .wcs-js .wc-sale-section:not(.is-visible) {
opacity: 0;
}
.wcs-js .wc-sale-section:not(.is-visible) .products > * {
opacity: 0;
} .wc-sale-section.is-visible {
animation: wcsFadeUp 0.7s ease backwards;
}
.wc-sale-section.is-visible .wc-sale-section__header::after {
transform-origin: left;
animation: wcsGrow 0.8s ease 0.3s backwards;
}
.wc-sale-section.is-visible .products > * {
animation: wcsFadeUp 0.6s ease backwards;
}
.wc-sale-section.is-visible .products > *:nth-child(1) {
animation-delay: 0.15s;
}
.wc-sale-section.is-visible .products > *:nth-child(2) {
animation-delay: 0.23s;
}
.wc-sale-section.is-visible .products > *:nth-child(3) {
animation-delay: 0.31s;
}
.wc-sale-section.is-visible .products > *:nth-child(4) {
animation-delay: 0.39s;
}
.wc-sale-section.is-visible .products > *:nth-child(5) {
animation-delay: 0.47s;
}
.wc-sale-section.is-visible .products > *:nth-child(6) {
animation-delay: 0.55s;
}
.wc-sale-section.is-visible .products > *:nth-child(7) {
animation-delay: 0.63s;
}
.wc-sale-section.is-visible .products > *:nth-child(n + 8) {
animation-delay: 0.7s;
}
.wc-sale-section__footer {
display: flex;
justify-content: center;
margin-top: 24px;
} @media (max-width: 549px) {
.wc-sale-section {
margin-bottom: 28px;
}
.wc-sale-section__title {
font-size: 1.05em;
gap: 8px;
}
.wc-sale-section__title::before {
width: 4px;
}
.wc-sale-section__btn {
padding: 4px 4px 4px 14px;
font-size: 0.78em;
gap: 8px;
}
.wc-sale-section__arrow {
width: 24px;
height: 24px;
}
} @media (prefers-reduced-motion: reduce) {
.wcs-js .wc-sale-section:not(.is-visible),
.wcs-js .wc-sale-section:not(.is-visible) .products > * {
opacity: 1;
}
.wc-sale-section.is-visible,
.wc-sale-section.is-visible .products > *,
.wc-sale-section.is-visible .wc-sale-section__header::after {
animation: none;
}
.wc-sale-section__btn,
.wc-sale-section__btn::before,
.wc-sale-section__arrow {
transition: none;
}
}