.aiweb-home {
display: flex;
flex-direction: column;
padding-block-start: var(--space-4);
}
.aiweb-home-section {
margin-block-start: var(--aiweb-sec-top, var(--space-10));
margin-block-end: var(--aiweb-sec-bottom, 0);
}
.aiweb-home-section:first-child {
margin-block-start: var(--aiweb-sec-top, 0);
}
.aiweb-hscroll {
display: flex;
gap: var(--space-3);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block: var(--space-2); 
scroll-padding-inline-start: var(--space-4);
}
.aiweb-hscroll::-webkit-scrollbar {
display: none;
}
.aiweb-hscroll > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
.aiweb-pcard-track {
align-items: stretch;
}
.aiweb-pcard-track__item {
flex: 0 0 46%;
}
.aiweb-pcard-track__item > .aiweb-product-card {
block-size: 100%;
}
.aiweb-articles__track {
align-items: stretch;
}
.aiweb-articles__item {
flex: 0 0 80%;
}
.aiweb-articles__item > .aiweb-post-card {
block-size: 100%;
}
.aiweb-hero.aiweb-app {
padding-inline: 0;
}
.aiweb-hero__swiper {
--swiper-pagination-color: var(--text-on-primary);
--swiper-pagination-bullet-inactive-color: var(--text-on-primary);
--swiper-pagination-bullet-inactive-opacity: .45;
--swiper-pagination-bullet-size: var(--space-2);
overflow: hidden;
}
.aiweb-hero__slide {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-primary-dark);
}
.aiweb-hero__link {
display: block;
color: inherit;
}
.aiweb-hero__img {
inline-size: 100%;
block-size: auto;
}
.aiweb-hero__img--default {
aspect-ratio: 840 / 1000;
object-fit: cover;
}
.aiweb-hero__content {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-6);
direction: rtl;
}
.aiweb-hero__title {
margin: 0;
max-inline-size: 72%;
color: var(--text-on-primary);
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: var(--fw-bold);
text-align: start;
}
.aiweb-hero__subtitle {
margin: 0;
max-inline-size: 80%;
color: var(--text-on-primary);
opacity: .85;
font-size: var(--fs-body);
}
.aiweb-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--space-10);
margin-block-start: var(--space-2);
padding-block: var(--space-2);
padding-inline: var(--space-6);
color: var(--text-primary);
background-color: var(--surface);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
border-radius: var(--radius-pill);
transition: background-color .15s ease;
}
.aiweb-hero__cta:hover,
.aiweb-hero__link:hover .aiweb-hero__cta { 
color: var(--text-primary);
background-color: var(--color-primary-soft);
}
.aiweb-categories__panel {
padding: var(--space-4);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-categories__featured {
margin: 0;
margin-block-end: var(--space-3);
color: var(--color-primary);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
text-align: start;
}
.aiweb-categories__cards {
margin-inline: calc(-1 * var(--space-4));
padding-inline: var(--space-4);
}
.aiweb-categories__cards .aiweb-category-card {
flex: 0 0 40%;
}
.aiweb-bestsellers__list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-sale__seal-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
block-size: 100%;
padding-block: var(--space-6);
padding-inline: var(--space-4);
color: var(--text-on-primary);
text-align: center;
background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-sale__seal-card:hover {
color: var(--text-on-primary);
}
.aiweb-sale__seal-title {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-sale__seal {
display: grid;
place-items: center;
inline-size: var(--space-16);
block-size: var(--space-16);
color: var(--color-primary-fg);
background-color: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-card);
}
.aiweb-sale__seal-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-sale__timer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
.aiweb-sale__timer-clock {
display: inline-flex;
align-items: center;
gap: var(--space-1);
direction: ltr; 
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.aiweb-sale__timer-num {
min-inline-size: 2ch;
padding-block: var(--space-1);
padding-inline: var(--space-1);
font-size: var(--fs-body);
line-height: 1;
text-align: center;
background-color: color-mix(in srgb, var(--text-on-primary) 18%, transparent);
border-radius: var(--radius-sm);
}
.aiweb-sale__timer-sep {
font-style: normal;
opacity: 0.7;
}
.aiweb-sale__timer-cap {
font-size: var(--fs-caption);
opacity: 0.85;
}
.aiweb-sale__timer.is-ended {
opacity: 0.6;
}
.aiweb-cashback-row {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-cashback {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: calc(var(--space-16) * 4 + var(--space-4));
padding: var(--space-6);
background: linear-gradient(135deg, var(--color-primary-soft), var(--surface));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-cashback__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-cashback__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-cashback__lead {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body);
}
.aiweb-cashback__sub {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-cashback__art {
flex: 0 0 auto;
color: var(--color-star);
}
.aiweb-cashback__art--invite {
color: var(--color-primary);
}
.aiweb-strip__link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-strip__img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1200 / 200; 
object-fit: cover;
}
.aiweb-strip__inner {
display: flex;
flex-wrap: wrap; 
align-items: center;
gap: var(--space-3) var(--space-4);
padding-block: var(--space-4);
padding-inline: var(--space-5);
background: var(--color-primary-soft);
border-radius: var(--radius-lg);
}
.aiweb-strip__content {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-strip__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-strip__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-strip__cta {
margin-inline-start: auto;
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-strip2__link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-strip2__img {
display: block;
inline-size: 100%;
block-size: auto; 
}
.aiweb-strip2__inner {
display: flex;
flex-wrap: wrap; 
align-items: center;
gap: var(--space-3) var(--space-4);
padding-block: var(--space-4);
padding-inline: var(--space-5);
background: var(--color-primary-soft);
border-radius: var(--radius-lg);
}
.aiweb-strip2__content {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aiweb-strip2__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-strip2__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-strip2__cta {
margin-inline-start: auto;
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-banners__row {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-banners__cell {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.aiweb-banners__cell--image {
display: block;
box-shadow: var(--shadow-card);
}
.aiweb-banners__img {
display: block;
inline-size: 100%;
block-size: auto;
}
.aiweb-banners__cell--text {
min-block-size: calc(var(--space-16) * 4 + var(--space-4));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-primary-soft);
}
.aiweb-banners__text {
display: flex;
flex-direction: column;
align-items: flex-start; 
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-banners__title {
margin: 0;
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-banners__desc {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-banners__cta {
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-banners__art {
flex: 0 0 auto;
color: var(--color-star);
}
.aiweb-banners__art--alt {
color: var(--color-primary);
}
.aiweb-banners4__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
align-items: start; 
}
.aiweb-banners4__cell {
position: relative;
display: block;
overflow: hidden;
border-start-start-radius: var(--aiweb-b4-rss, var(--radius-lg));
border-start-end-radius: var(--aiweb-b4-rse, var(--radius-lg));
border-end-start-radius: var(--aiweb-b4-res, var(--radius-lg));
border-end-end-radius: var(--aiweb-b4-ree, var(--radius-lg));
box-shadow: var(--shadow-card);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-banners4__cell:hover,
.aiweb-banners4__cell:focus-visible {
transform: translateY(calc(-1 * var(--space-1)));
box-shadow: var(--shadow-hover);
}
.aiweb-banners4__img {
display: block;
inline-size: 100%;
block-size: auto;
transition: transform var(--transition-base);
}
.aiweb-banners4__cell:hover .aiweb-banners4__img {
transform: scale(1.04);
}
.aiweb-banners4__cell--text {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4);
text-align: center;
background:
radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 58%),
var(--color-primary-soft);
}
.aiweb-banners4__deco {
display: grid;
place-items: center;
inline-size: var(--space-12);
block-size: var(--space-12);
border-radius: var(--radius-pill);
color: var(--color-primary-fg);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.aiweb-banners4__title {
color: var(--color-primary-fg);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-banners4__sub {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-banners4__cell,
.aiweb-banners4__img {
transition: none;
}
.aiweb-banners4__cell:hover,
.aiweb-banners4__cell:focus-visible {
transform: none;
}
.aiweb-banners4__cell:hover .aiweb-banners4__img {
transform: none;
}
}
.aiweb-testimonials__header {
margin-block-end: var(--space-6);
text-align: center;
}
.aiweb-testimonials__eyebrow {
display: block;
margin-block-end: var(--space-1);
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
}
.aiweb-testimonials__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-wrap: balance;
}
.aiweb-testimonials__cols {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.aiweb-stories {
display: flex;
gap: var(--space-3);
margin: 0;
padding: var(--space-1) 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-inline-start: var(--space-1);
}
.aiweb-stories::-webkit-scrollbar {
display: none;
}
.aiweb-story {
flex: 0 0 42%; 
scroll-snap-align: start;
}
.aiweb-story__ring {
display: block;
padding: 2.5px;
border-radius: var(--radius-lg);
background-image: linear-gradient(150deg, var(--color-primary), var(--color-discount));
}
.aiweb-story__frame {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 9 / 16;
border-radius: calc(var(--radius-lg) - 3px);
border: 2px solid var(--surface); 
background: var(--background);
}
.aiweb-story__frame--placeholder {
border: 0;
background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
}
.aiweb-story__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-story__play {
position: absolute;
inset: 0;
margin: auto;
inline-size: calc(var(--space-12) + var(--space-1));
block-size: calc(var(--space-12) + var(--space-1));
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--color-primary-fg);
box-shadow: var(--shadow-hover);
cursor: pointer;
}
.aiweb-story__play--static {
cursor: default;
}
.aiweb-story__meta {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
padding: var(--space-8) var(--space-3) var(--space-3);
background-image: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 92%, transparent), transparent);
text-align: start;
}
.aiweb-story__name {
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-story__role {
color: color-mix(in srgb, var(--text-on-primary) 82%, transparent);
font-size: var(--fs-caption);
}
@media (hover: hover) {
.aiweb-story__ring {
transition: transform var(--transition-base);
}
.aiweb-story:hover .aiweb-story__ring {
transform: translateY(-3px);
}
button.aiweb-story__play {
transition: transform var(--transition-base);
}
.aiweb-story:hover button.aiweb-story__play {
transform: scale(1.06);
}
}
.aiweb-testimonials__comments {
position: relative;
}
.aiweb-tmarquee {
position: relative;
overflow: hidden;
block-size: calc(var(--space-16) * 5); 
}
.aiweb-tmarquee::before,
.aiweb-tmarquee::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: var(--space-8);
z-index: 1;
pointer-events: none;
}
.aiweb-tmarquee::before {
inset-block-start: 0;
background-image: linear-gradient(to bottom, var(--background), transparent);
}
.aiweb-tmarquee::after {
inset-block-end: 0;
background-image: linear-gradient(to top, var(--background), transparent);
}
.aiweb-tmarquee__track {
display: flow-root; 
animation: aiweb-tmarquee-scroll 32s linear infinite;
will-change: transform;
}
.aiweb-tmarquee:hover .aiweb-tmarquee__track {
animation-play-state: paused;
}
.aiweb-tmarquee__dup {
display: contents;
}
@keyframes aiweb-tmarquee-scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.aiweb-comment {
margin-block-end: var(--space-3);
padding: var(--space-4);
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.aiweb-comment__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-2);
}
.aiweb-comment__avatar {
flex: 0 0 auto;
inline-size: var(--space-10);
block-size: var(--space-10);
display: grid;
place-items: center;
border-radius: var(--radius-pill);
overflow: hidden;
box-shadow: 0 0 0 2px var(--color-primary); 
}
.aiweb-comment__avatar-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-comment__avatar--placeholder {
background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.aiweb-comment__avatar-initial {
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1;
}
.aiweb-comment__id {
display: flex;
flex-direction: column;
min-inline-size: 0;
margin-inline-end: auto;
}
.aiweb-comment__name {
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-comment__role {
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-comment__rating {
flex: 0 0 auto;
}
.aiweb-comment__quote {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body);
line-height: var(--lh-body-lg);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.aiweb-tmarquee {
overflow-y: auto;
}
.aiweb-tmarquee__track {
animation: none;
}
.aiweb-tmarquee__dup {
display: none;
}
}
.aiweb-sheet__panel--video .aiweb-sheet__body {
padding: var(--space-4);
}
.aiweb-video-frame {
position: relative;
inline-size: min(100%, calc(72vh * 9 / 16));
margin-inline: auto;
aspect-ratio: 9 / 16;
max-block-size: 72vh;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-ink);
}
.aiweb-video-frame__media {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: 0;
}
@media (min-width: 768px) {
.aiweb-testimonials__cols {
flex-direction: row;
align-items: stretch;
gap: var(--space-6);
}
.aiweb-testimonials__cols > * {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-testimonials__cols--single > * {
flex-basis: auto;
}
.aiweb-stories {
overflow: visible;
}
.aiweb-story {
flex: 1 1 0;
min-inline-size: 0;
}
.aiweb-testimonials__cols:not(.aiweb-testimonials__cols--single) .aiweb-tmarquee {
position: absolute;
inset: 0;
block-size: auto;
}
.aiweb-testimonials__cols--single .aiweb-tmarquee {
block-size: calc(var(--space-16) * 6);
}
}
@media (min-width: 768px) {
.aiweb-home .aiweb-app {
max-inline-size: var(--container-max);
padding-inline: var(--space-6);
}
.aiweb-home-section {
margin-block-start: var(--aiweb-sec-top, var(--space-12));
}
.aiweb-home-section:first-child {
margin-block-start: var(--aiweb-sec-top, 0);
}
.aiweb-hero__img--default {
aspect-ratio: 16 / 9;
}
.aiweb-hero__content {
padding: var(--space-8);
}
.aiweb-categories__cards .aiweb-category-card {
flex-basis: 22%;
}
.aiweb-bestsellers__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.aiweb-newest__carousel.aiweb-app,
.aiweb-sale__offers.aiweb-app,
.aiweb-articles__carousel.aiweb-app {
max-inline-size: min(100% - 2 * var(--space-6), var(--container-max) - 2 * var(--space-6));
padding-inline: 0;
}
.aiweb-pcard-track__item {
flex-basis: 30%;
}
.aiweb-articles__item {
flex-basis: 46%;
}
.aiweb-cashback-row,
.aiweb-banners__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aiweb-banners__row {
align-items: start;
}
.aiweb-banners4__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
}
@media (min-width: 1024px) {
.aiweb-hero__img--default {
aspect-ratio: 27 / 9;
}
.aiweb-hero__content {
padding: var(--space-10);
}
.aiweb-categories__cards .aiweb-category-card {
flex-basis: 15%;
}
.aiweb-bestsellers__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aiweb-pcard-track__item {
flex-basis: 22%;
}
.aiweb-articles__item {
flex-basis: calc((100% - 3 * var(--space-3)) / 3.5);
}
}
@media (min-width: 1280px) {
.aiweb-pcard-track__item {
flex-basis: 18%;
}
}
.aiweb-about__inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.aiweb-about__content {
display: flex;
flex-direction: column;
align-items: flex-start; 
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-about__eyebrow {
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
}
.aiweb-about__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-wrap: balance;
}
.aiweb-about__text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-about__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-4);
inline-size: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-about__feature {
display: flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-about__feature-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: calc(var(--space-10) + var(--space-1)); 
block-size: calc(var(--space-10) + var(--space-1));
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-about__feature-label {
min-inline-size: 0;
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
}
.aiweb-about__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-8);
inline-size: 100%;
margin: 0;
}
.aiweb-about__stat {
display: flex;
flex-direction: column;
}
.aiweb-about__stat-value {
color: var(--color-primary-fg);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
}
.aiweb-about__stat-label {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-caption);
}
.aiweb-about__cta {
margin-block-start: var(--space-2);
min-block-size: calc(var(--space-10) + var(--space-1));
}
.aiweb-about__media {
position: relative;
inline-size: 100%;
}
.aiweb-about__media--collage {
padding-block-end: var(--space-8);
padding-inline-start: var(--space-8);
}
.aiweb-about__frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
background: var(--background);
}
.aiweb-about__frame--placeholder {
display: grid;
place-items: center;
background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
color: var(--text-on-primary);
}
.aiweb-about__img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-about__frame--overlap {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 46%;
aspect-ratio: 1 / 1;
border: 4px solid var(--surface);
box-shadow: var(--shadow-hover);
}
.aiweb-about__badge {
position: absolute;
inset-block-end: var(--space-4);
inset-inline-end: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-ink);
color: var(--text-on-primary);
box-shadow: var(--shadow-floating);
text-align: center;
}
.aiweb-about__badge-value {
font-size: var(--fs-h3);
line-height: 1;
font-weight: var(--fw-bold);
}
.aiweb-about__badge-label {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
}
@media (min-width: 768px) {
.aiweb-about__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--space-10);
}
}
@media (min-width: 1024px) {
.aiweb-about__inner {
gap: var(--space-16);
}
.aiweb-about__content {
gap: var(--space-5);
}
}
.aiweb-deals__box {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-4);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.aiweb-deals__flag {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
padding: var(--space-2) var(--space-5);
border-start-end-radius: var(--radius-xl);
border-end-start-radius: var(--radius-lg);
background: var(--color-discount);
color: var(--text-on-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
}
.aiweb-deals__head {
display: flex;
align-items: center;
gap: var(--space-2);
padding-inline-end: calc(var(--space-16) + var(--space-12));
}
.aiweb-deals__head-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-md);
background: var(--color-danger-soft);
color: var(--color-discount);
}
.aiweb-deals__title {
margin: 0;
color: var(--text-primary);
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-deals__body {
min-inline-size: 0;
margin-block-start: var(--space-4);
}
.aiweb-deals__main {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
}
.aiweb-deals__side {
display: none;
}
.aiweb-deals__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"media timer"
"name  name"
"price btns";
column-gap: var(--space-2); 
row-gap: var(--space-4);
align-items: center;
}
.aiweb-deals__name {
grid-area: name;
}
.aiweb-deals__btns {
grid-area: btns;
}
.aiweb-deals__panel[hidden] {
display: none;
}
@keyframes aiweb-deal-in {
from {
opacity: 0;
transform: translateY(var(--space-2));
}
to {
opacity: 1;
transform: none;
}
}
.aiweb-deals__panel:not([hidden]) {
animation: aiweb-deal-in 240ms ease;
}
.aiweb-deals__media {
grid-area: media;
position: relative;
min-inline-size: 0;
}
.aiweb-deals__img-link {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--background);
}
.aiweb-deals__img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-lg);
}
.aiweb-deals__badge {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-start: var(--space-3);
}
.aiweb-deals__progress {
position: absolute;
inset-inline: 25%; 
inset-block-end: var(--space-3);
display: none;
block-size: var(--space-1);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-ink) 28%, transparent);
overflow: hidden;
}
.aiweb-deals__box.is-autoplay .aiweb-deals__progress {
display: block;
}
.aiweb-deals__progress-fill {
display: block;
inline-size: 0;
block-size: 100%;
border-radius: inherit;
background: var(--color-discount);
}
.aiweb-deals__progress-fill.is-running {
animation: aiweb-deal-progress var(--aiweb-deals-autoplay, 6000ms) linear forwards;
}
@keyframes aiweb-deal-progress {
from {
inline-size: 0;
}
to {
inline-size: 100%;
}
}
.aiweb-deals__info {
display: contents;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-deals__name {
margin: 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-deals__name-link {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.aiweb-deals__name-link:hover {
color: var(--color-primary-fg);
}
.aiweb-deals__desc {
display: none;
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-deals__price {
grid-area: price;
margin-block-start: 0;
}
.aiweb-deals__price .aiweb-price__current {
align-items: baseline;
color: var(--color-discount);
}
.aiweb-deals__price .aiweb-price__amount {
font-size: var(--fs-h3);
}
.aiweb-deals__price .aiweb-price__unit {
color: inherit;
}
.aiweb-deals__price .aiweb-price__regular {
font-size: var(--fs-body);
}
.aiweb-deals__actions {
display: contents; 
align-items: flex-end;
flex-wrap: wrap;
gap: var(--space-3);
margin-block-start: auto;
padding-block-start: var(--space-1);
}
.aiweb-deals__btns {
display: flex;
align-items: center;
gap: var(--space-2);
margin-inline-start: auto;
}
.aiweb-deals__btn {
min-block-size: calc(var(--space-10) + var(--space-1)); 
}
.aiweb-deals__btn--view {
min-block-size: var(--space-12);
padding-inline: var(--space-3);
background-color: var(--color-primary);
color: var(--text-on-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.aiweb-deals__btn--view:hover {
background-color: var(--color-primary-dark);
}
.aiweb-deals__timer {
grid-area: timer;
align-self: center;
justify-self: end; 
display: flex;
flex-direction: column-reverse; 
align-items: flex-end; 
gap: var(--space-3); 
}
.aiweb-deals__t {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-1);
}
.aiweb-deals__t-num {
display: grid;
place-items: center;
inline-size: var(--space-10); 
block-size: var(--space-10);
border: 1px solid var(--border);
border-radius: var(--radius-sm); 
background: var(--background);
color: var(--text-primary);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
font-style: normal;
}
.aiweb-deals__t--seconds .aiweb-deals__t-num {
border-color: var(--color-discount);
background: var(--color-discount);
color: var(--text-on-primary);
}
.aiweb-deals__t-cap {
writing-mode: vertical-rl; 
transform: rotate(180deg); 
color: var(--text-secondary);
font-size: var(--fs-caption);
font-style: normal;
}
.aiweb-deals__timer.is-ended .aiweb-deals__t-num {
border-color: var(--border);
background: var(--background);
color: var(--text-muted);
}
.aiweb-deals__rail {
display: flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-deals__nav {
display: none;
place-items: center;
inline-size: calc(var(--space-10) + var(--space-1)); 
block-size: calc(var(--space-10) + var(--space-1));
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
transition: color var(--transition-base), border-color var(--transition-base);
}
.aiweb-deals__nav:hover {
color: var(--color-discount);
border-color: var(--color-discount);
}
.aiweb-deals__nav--up svg {
transform: rotate(180deg);
}
.aiweb-deals__thumbs {
display: flex;
flex: 1 1 auto;
gap: var(--space-3);
margin: 0;
padding: var(--space-1);
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.aiweb-deals__thumbs::-webkit-scrollbar {
display: none;
}
.aiweb-deals__thumb-item {
flex: 0 0 auto;
}
.aiweb-deals__thumb {
display: block;
inline-size: calc(var(--space-16) + var(--space-2)); 
block-size: calc(var(--space-16) + var(--space-2));
padding: var(--space-1);
border: 1px dashed transparent;
border-radius: var(--radius-pill);
background: var(--background);
cursor: pointer;
transition: border-color var(--transition-base);
}
.aiweb-deals__thumb:hover {
border-color: color-mix(in srgb, var(--color-discount) 45%, transparent);
}
.aiweb-deals__thumb.is-active {
border-color: var(--color-discount);
}
.aiweb-deals__thumb-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: var(--radius-pill);
}
@media (prefers-reduced-motion: reduce) {
.aiweb-deals__panel:not([hidden]) {
animation: none;
}
.aiweb-deals__progress-fill.is-running {
animation: none;
}
}
@media (min-width: 1024px) {
.aiweb-deals__box {
padding: var(--space-5);
}
.aiweb-deals__body {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
gap: var(--space-6);
align-items: start;
margin-block-start: var(--space-4);
}
.aiweb-deals__main {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-6);
align-items: stretch;
}
.aiweb-deals__side {
display: block;
min-inline-size: 0;
}
.aiweb-deals__side .aiweb-product-card__title {
display: none;
}
.aiweb-deals__rail {
flex-direction: column;
align-self: center;
}
.aiweb-deals__nav {
display: grid;
}
.aiweb-deals__thumbs {
flex: 0 1 auto;
flex-direction: column;
max-block-size: calc((var(--space-16) + var(--space-2)) * 3 + var(--space-3) * 2);
overflow-x: hidden;
overflow-y: auto;
}
.aiweb-deals__price {
margin-block-start: auto;
margin-block-end: var(--space-2);
}
.aiweb-deals__timer {
flex-direction: row;
align-items: flex-start;
gap: var(--space-3);
}
.aiweb-deals__t {
flex-direction: column-reverse;
}
.aiweb-deals__t-cap {
writing-mode: horizontal-tb;
transform: none;
}
.aiweb-deals__name {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
.aiweb-deals__actions {
gap: var(--space-4);
align-items: flex-end;
margin-block-start: 0;
padding-block-start: 0;
}
.aiweb-deals__desc {
display: block;
}
.aiweb-deals__btn--view {
min-inline-size: calc(var(--space-16) * 3);
padding-inline: var(--space-5);
background-color: transparent;
color: var(--color-primary);
}
.aiweb-deals__btn--view:hover {
background-color: var(--color-primary-soft);
}
.aiweb-deals__panel {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
grid-template-areas: none;
gap: var(--space-6);
align-items: stretch;
}
.aiweb-deals__info,
.aiweb-deals__actions {
display: flex;
}
.aiweb-deals__media {
grid-area: auto;
}
.aiweb-deals__t-num {
inline-size: var(--space-12);
block-size: var(--space-12);
}
}