.aiweb-has-buybar .aiweb-header,
.aiweb-has-buybar .aiweb-bottomnav {
display: none;
}
.aiweb-has-buybar .aiweb-site {
padding-block-end: calc(var(--space-16) + var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.aiweb-single {
display: block;
}
.aiweb-gallery,
.aiweb-single__info,
.aiweb-single__buy {
background-color: var(--surface);
}
.aiweb-gallery.aiweb-app {
position: relative;
padding-inline: 0;            
}
.aiweb-gallery__viewport {
position: relative;
aspect-ratio: 1 / 1;          
inline-size: 100%;
background-color: var(--background);
overflow: hidden;
}
.aiweb-gallery__slide {
display: block;
block-size: 100%;
}
.aiweb-gallery__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-gallery .swiper-pagination {
position: absolute;
inset-block-end: var(--space-4);
inset-inline: 0;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2);
z-index: 2;
}
.aiweb-gallery .swiper-pagination-bullet {
inline-size: 7px;
block-size: 7px;
border-radius: var(--radius-pill);
background-color: var(--text-on-primary);
opacity: .55;
margin: 0;
transition: inline-size .25s ease, opacity .25s ease;
}
.aiweb-gallery .swiper-pagination-bullet-active {
inline-size: 22px;
opacity: 1;
}
.aiweb-gallery__controls {
position: absolute;
inset-block-start: calc(var(--space-3) + env(safe-area-inset-top, 0px));
inset-inline: 0;
z-index: 3;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-inline: var(--space-4);
pointer-events: none;          
}
.aiweb-gallery__fab {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border: 0;
border-radius: var(--radius-md);
background-color: var(--surface);
color: var(--text-primary);
box-shadow: var(--shadow-nav);
cursor: pointer;
text-decoration: none;
}
.aiweb-gallery__fab:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-gallery__fab-group {
pointer-events: auto;
display: inline-flex;
align-items: center;
background-color: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-nav);
overflow: hidden;
}
.aiweb-gallery__fab-group .aiweb-gallery__fab {
box-shadow: none;
border-radius: 0;
background-color: transparent;
color: var(--text-secondary);
}
.aiweb-gallery__fab[data-aiweb-wishlist].is-active {
color: var(--color-discount);
}
.aiweb-gallery__fab[data-aiweb-wishlist].is-active .aiweb-icon {
fill: currentColor;
}
.aiweb-single__info {
padding-block: var(--space-5) var(--space-6);
}
.aiweb-single__buy {
padding-block: var(--space-5) var(--space-6);
}
.aiweb-seller {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.aiweb-seller__logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
inline-size: var(--space-10);
block-size: var(--space-10);
}
.aiweb-seller__logo svg {
display: block;
}
.aiweb-seller__logo .aiweb-icon {
color: var(--color-primary-fg);
}
.aiweb-seller__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
border-radius: var(--radius-sm);
}
.aiweb-seller__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-seller__label {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
}
.aiweb-seller__name {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-single__desc {
margin-block-start: var(--space-5);
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: 1.9;
}
.aiweb-single__desc > :first-child {
margin-block-start: 0;
}
.aiweb-single__desc > :last-child {
margin-block-end: 0;
}
.aiweb-single__desc p {
margin-block: 0 var(--space-3);
}
.aiweb-single__desc ul,
.aiweb-single__desc ol {
margin-block: 0 var(--space-3);
padding-inline-start: var(--space-5);
}
.aiweb-single__desc li {
margin-block-end: var(--space-1);
}
.aiweb-summary__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-3);
}
.aiweb-crumb {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
text-decoration: none;
}
.aiweb-crumb--cat {
color: var(--color-primary);
font-weight: var(--fw-medium);
}
.aiweb-crumb--brand {
color: var(--text-secondary);
background-color: var(--background);
border: 1px solid var(--border);
padding-block: var(--space-1);
padding-inline: var(--space-3);
border-radius: var(--radius-pill);
}
.aiweb-summary__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-summary__subtitle {
margin-block: var(--space-2) 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
text-align: start;
}
.aiweb-summary__meta {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block-start: var(--space-4);
}
.aiweb-stock {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
}
.aiweb-stock__dot {
inline-size: 9px;
block-size: 9px;
border-radius: var(--radius-pill);
flex: 0 0 auto;
}
.aiweb-stock--in {
color: var(--color-primary-fg);
}
.aiweb-stock--in .aiweb-stock__dot {
background-color: var(--color-stock);
}
.aiweb-stock--out {
color: var(--text-muted);
}
.aiweb-stock--out .aiweb-stock__dot {
background-color: var(--text-muted);
}
.aiweb-prodrating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-prodrating__score {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--text-primary);
font-weight: var(--fw-semibold);
}
.aiweb-prodrating__star {
display: inline-flex;
color: var(--color-star);
}
.aiweb-prodrating__sep {
color: var(--text-muted);
}
.aiweb-prodrating__satisfaction {
color: var(--color-primary-fg);
font-weight: var(--fw-medium);
}
.aiweb-variations {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-block-start: var(--space-6);
}
.aiweb-variation__head {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-3);
}
.aiweb-variation__label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-variation__label::before {
content: "";
display: inline-block;
inline-size: 4px;
block-size: 18px;
border-radius: var(--radius-pill);
background-color: var(--color-primary);
}
.aiweb-variation__selected {
color: var(--text-muted);
font-size: var(--fs-body);
}
.aiweb-variation__options {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.aiweb-variation__option {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-block-size: 44px;
padding-block: var(--space-2);
padding-inline: var(--space-4);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.aiweb-variation__option:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-variation__option.is-selected {
border-color: var(--color-primary);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.aiweb-variation__option.is-unavailable {
opacity: .4;
}
.aiweb-variation__swatch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 22px;
block-size: 22px;
border-radius: var(--radius-pill);
background-color: var(--aiweb-swatch, var(--border));
border: 1px solid var(--border);
flex: 0 0 auto;
}
.aiweb-variation__check {
display: none;
align-items: center;
justify-content: center;
color: var(--text-on-primary);
}
.aiweb-variation__check--plain {
color: var(--color-primary);
}
.aiweb-variation__option.is-selected .aiweb-variation__check {
display: inline-flex;
}
.aiweb-return-notice {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-block-start: var(--space-6);
padding: var(--space-4);
background-color: var(--color-notice-bg);
border: 1px solid var(--color-notice-border);
border-radius: var(--radius-md);
}
.aiweb-return-notice__icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--color-notice-icon);
}
.aiweb-return-notice__text {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
}
.aiweb-buybar {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--z-bottomnav);
padding-inline: var(--space-4);
padding-block-start: var(--space-3);
padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
pointer-events: none;          
}
.aiweb-buybar__inner.aiweb-app {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2);
padding-inline-start: var(--space-5);
background-color: var(--color-ink);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-nav);
}
.aiweb-buybar__add {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-block-size: 44px;
padding: 0;
border: 0;
background-color: transparent;
color: var(--text-on-primary);
font-family: var(--font-base);
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
cursor: pointer;
}
.aiweb-buybar__add:disabled {
opacity: .5;
cursor: not-allowed;
}
.aiweb-buybar__add-icon {
display: inline-flex;
}
.aiweb-buybar__price {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-2);
padding-inline: var(--space-4);
background-color: var(--color-ink-soft);
border-radius: var(--radius-pill);
color: var(--text-on-primary);
white-space: nowrap;
}
.aiweb-buybar__price-current {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
}
.aiweb-buybar__amount {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-buybar__unit {
font-size: var(--fs-caption);
color: var(--text-muted);
}
:root[data-theme="dark"] .aiweb-buybar__unit {
color: var(--text-secondary);
}
.aiweb-buybar__out {
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
color: var(--text-on-primary);
}
.aiweb-single__sections {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-block: var(--space-4) var(--space-6);
}
.aiweb-actionrow {
display: flex;
align-items: stretch;
justify-content: space-around;
gap: var(--space-2);
padding: var(--space-5) var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-actionrow__item {
flex: 1 1 0;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-1);
border: 0;
background-color: transparent;
color: var(--text-secondary);
font-family: var(--font-base);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
font-weight: var(--fw-medium);
cursor: pointer;
border-radius: var(--radius-md);
}
.aiweb-actionrow__item.is-disabled {
cursor: default;
color: var(--text-muted);
}
.aiweb-actionrow__icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 52px;
block-size: 52px;
border-radius: var(--radius-pill);
background-color: var(--background);
color: var(--text-secondary);
transition: background-color .15s ease, color .15s ease;
}
.aiweb-actionrow__item.is-disabled .aiweb-actionrow__icon {
color: var(--text-muted);
}
.aiweb-actionrow__item:not(.is-disabled):hover .aiweb-actionrow__icon {
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-actionrow__item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-actionrow__item.is-active {
color: var(--color-primary-fg);
}
.aiweb-actionrow__item.is-active .aiweb-actionrow__icon {
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
.aiweb-tabs {
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.aiweb-tabs__strip {
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--space-2);
padding: var(--space-3);
border-block-end: 1px solid var(--border);
}
.aiweb-tabs__tab {
flex: 0 0 auto;
min-block-size: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-block: var(--space-2);
padding-inline: var(--space-4);
border: 0;
background-color: transparent;
border-radius: var(--radius-pill);
color: var(--text-secondary);
font-family: var(--font-base);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.aiweb-tabs__tab.is-active {
background-color: var(--color-primary);
color: var(--text-on-primary);
}
.aiweb-tabs__tab:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-tabs__panels {
padding: var(--space-5);
}
.aiweb-tabs__panel:focus {
outline: none;
}
.aiweb-tabs__empty {
margin: 0;
padding-block: var(--space-4);
color: var(--text-muted);
font-size: var(--fs-body);
text-align: center;
}
.aiweb-prose {
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-prose > * {
margin-block: 0 var(--space-4);
}
.aiweb-prose > *:last-child {
margin-block-end: 0;
}
.aiweb-prose h2,
.aiweb-prose h3 {
color: var(--text-primary);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-prose a {
color: var(--color-primary-fg);
}
.aiweb-prose img {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--radius-md);
}
.aiweb-specs {
inline-size: 100%;
border-collapse: collapse;
}
.aiweb-specs__head {
padding-block: var(--space-3);
padding-inline: var(--space-2);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-primary);
text-align: center;
}
.aiweb-specs__head--key {
text-align: start;
}
.aiweb-specs__key,
.aiweb-specs__val {
padding-block: var(--space-4);
padding-inline: var(--space-2);
border-block-start: 1px solid var(--border);
font-size: var(--fs-body);
}
.aiweb-specs__key {
text-align: start;
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-specs__val {
text-align: center;
color: var(--text-secondary);
}
.aiweb-aicard {
position: relative;
overflow: hidden;
padding: var(--space-6);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-aicard__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-block-end: var(--space-4);
}
.aiweb-aicard__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-aicard__subtitle {
margin-block: var(--space-1) 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
color: var(--text-muted);
}
.aiweb-aicard__blob {
flex: 0 0 auto;
inline-size: 84px;
block-size: 84px;
border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
background-image:
radial-gradient(circle at 30% 28%, var(--color-ai-blob-a), transparent 58%),
radial-gradient(circle at 72% 70%, var(--color-ai-blob-c), transparent 60%),
linear-gradient(135deg, var(--color-ai-blob-b), var(--color-ai-blob-a));
filter: blur(1px);
opacity: .92;
}
.aiweb-aicard__text {
margin: 0;
font-size: var(--fs-body);
line-height: 1.9;
color: var(--text-secondary);
}
.aiweb-pricechart {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-pricechart__range {
margin: 0;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
text-align: center;
}
.aiweb-pricechart__svg {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 320 / 170;
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-pricechart__axis {
display: flex;
justify-content: space-between;
margin-block-start: calc(var(--space-3) * -1);
padding-inline: var(--space-2);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
}
.aiweb-pricechart__grid {
stroke: var(--border);
stroke-width: 1;
stroke-dasharray: 3 4;
}
.aiweb-pricechart__area {
fill: var(--color-primary-soft);
opacity: .7;
stroke: none;
}
.aiweb-pricechart__line {
fill: none;
stroke: var(--color-primary);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.aiweb-pricechart__dot {
fill: var(--color-primary);
}
.aiweb-pricechart__dot--min {
fill: var(--color-stock);
}
.aiweb-pricechart__dot--max {
fill: var(--text-muted);
}
.aiweb-pricechart__dot--current {
fill: var(--surface);
stroke: var(--color-primary);
stroke-width: 3;
}
.aiweb-pricechart__legend {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: var(--space-4);
list-style: none;
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-pricechart__legend-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-pricechart__legend-dot {
flex: 0 0 auto;
inline-size: 12px;
block-size: 12px;
border-radius: var(--radius-pill);
}
.aiweb-pricechart__legend-dot--min {
background-color: var(--color-stock);
}
.aiweb-pricechart__legend-dot--max {
background-color: var(--text-muted);
}
.aiweb-pricechart__legend-dot--current {
background-color: var(--surface);
box-shadow: inset 0 0 0 3px var(--color-primary);
}
.aiweb-pricechart__legend-label {
color: var(--text-secondary);
}
.aiweb-pricechart__legend-value {
margin-inline-start: auto;
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-pricechart__empty,
.aiweb-pricechart__single {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-8);
text-align: center;
}
.aiweb-pricechart__empty-icon {
display: inline-flex;
margin-block-end: var(--space-2);
color: var(--text-muted);
}
.aiweb-pricechart__empty-text,
.aiweb-pricechart__single-label {
margin: 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-medium);
color: var(--text-primary);
}
.aiweb-pricechart__empty-hint,
.aiweb-pricechart__single-date {
margin: 0;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--text-muted);
}
.aiweb-pricechart__single-price {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
margin: 0;
}
.aiweb-pricechart__single-amount {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
color: var(--color-primary-fg);
}
.aiweb-pricechart__single-unit {
font-size: var(--fs-body);
color: var(--text-secondary);
}
.aiweb-tabs__panel--reviews {
display: block;
}
.aiweb-reviews__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.aiweb-review {
margin: 0;
}
.aiweb-review__card {
padding: var(--space-5);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.aiweb-review__head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-review__avatar {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border-radius: var(--radius-md);
background-color: var(--border);
color: var(--text-secondary);
}
.aiweb-review__author {
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.aiweb-review__text {
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: 1.9;
text-align: start;
}
.aiweb-review__text > * {
margin-block: 0 var(--space-3);
}
.aiweb-review__text > *:last-child {
margin-block-end: 0;
}
.aiweb-review__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.aiweb-review__date {
color: var(--text-muted);
font-size: var(--fs-caption);
}
.aiweb-reviews__empty {
margin: 0;
padding-block: var(--space-4);
color: var(--text-muted);
font-size: var(--fs-body);
text-align: center;
}
.aiweb-reviews__form {
margin-block-start: var(--space-6);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--border);
}
.aiweb-reviews__form-title {
display: block;
margin-block-end: var(--space-4);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-reviews__form .comment-form,
.aiweb-reviews__form #respond {
margin: 0;
}
.aiweb-reviews__field,
.aiweb-reviews__rating-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block-end: var(--space-4);
}
.aiweb-reviews__field label,
.aiweb-reviews__rating-field label {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-primary);
}
.aiweb-reviews__field input,
.aiweb-reviews__field textarea {
inline-size: 100%;
min-block-size: 48px;
padding-block: var(--space-3);
padding-inline: var(--space-4);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-base);
font-size: var(--fs-body);
}
.aiweb-reviews__field textarea {
min-block-size: 110px;
line-height: var(--lh-body);
resize: vertical;
}
.aiweb-reviews__field input:focus-visible,
.aiweb-reviews__field textarea:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-color: var(--color-primary);
}
.aiweb-stars {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.aiweb-stars__star {
display: inline-flex;
padding: var(--space-1);
border: 0;
background-color: transparent;
color: var(--border);
cursor: pointer;
transition: color .12s ease, transform .12s ease;
}
.aiweb-stars__star.is-on {
color: var(--color-star);
}
.aiweb-stars__star:hover {
transform: scale(1.08);
}
.aiweb-stars__star:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.aiweb-reviews .required {
color: var(--color-discount);
}
.aiweb-reviews__submit {
inline-size: 100%;
margin-block-start: var(--space-2);
}
.aiweb-reviews__must-login,
.aiweb-reviews__verification {
margin: 0;
padding: var(--space-4);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: var(--fs-body);
text-align: center;
}
.aiweb-reviews__must-login a {
color: var(--color-primary-fg);
font-weight: var(--fw-medium);
}
.aiweb-faq {
padding: var(--space-6);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-faq__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-block-end: var(--space-2);
}
.aiweb-faq__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-faq__subtitle {
margin-block: var(--space-1) 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
color: var(--text-muted);
}
.aiweb-faq__icon {
flex: 0 0 auto;
display: inline-flex;
color: var(--text-primary);
}
.aiweb-faq__list {
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-faq__item + .aiweb-faq__item {
border-block-start: 1px solid var(--border);
}
.aiweb-faq__qwrap {
margin: 0;
}
.aiweb-faq__q {
inline-size: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-block-size: 56px;
padding-block: var(--space-4);
padding-inline: 0;
border: 0;
background-color: transparent;
color: var(--text-primary);
font-family: var(--font-base);
font-size: var(--fs-body-lg);
font-weight: var(--fw-semibold);
text-align: start;
cursor: pointer;
}
.aiweb-faq__q:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.aiweb-faq__q-text {
flex: 1 1 auto;
}
.aiweb-faq__chevron {
flex: 0 0 auto;
display: inline-flex;
color: var(--text-muted);
transition: transform .2s ease;
}
.aiweb-faq__chevron.is-open {
transform: rotate(90deg);
}
.aiweb-faq__a {
overflow: hidden;
padding-block-end: var(--space-4);
animation: aiweb-faq-reveal .2s ease both;
}
.aiweb-faq__a-text {
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: 1.9;
text-align: start;
}
@keyframes aiweb-faq-reveal {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.aiweb-related {
padding-block-end: var(--space-6);
}
.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-sheet__panel--add .aiweb-sheet__body {
padding-block-end: 0;
}
.aiweb-add__head {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding-block: var(--space-2) var(--space-5);
}
.aiweb-add__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-add__head-icon {
display: inline-flex;
color: var(--color-primary);
}
.aiweb-add-price {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
color: var(--color-primary);
font-weight: var(--fw-bold);
}
.aiweb-add-price .aiweb-buybar__price-current {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
}
.aiweb-add-price .aiweb-buybar__amount {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-add-price .aiweb-buybar__unit {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--color-primary);
}
.aiweb-add-price .aiweb-buybar__out {
color: var(--text-muted);
font-weight: var(--fw-semibold);
}
.aiweb-add-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--background);
border-radius: var(--radius-lg);
}
.aiweb-add-summary__info {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-add-summary__name {
margin: 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-add-summary__media {
flex: 0 0 auto;
inline-size: var(--space-16);
block-size: var(--space-16);
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--surface);
}
.aiweb-add-summary__img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.aiweb-add-services {
margin-block-start: var(--space-6);
}
.aiweb-add-services__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
.aiweb-add-services__title {
margin: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-add-services__optional {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-add-services__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aiweb-add-service {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
}
.aiweb-add-service__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-12);
block-size: var(--space-12);
background-color: var(--surface);
border-radius: var(--radius-md);
color: var(--color-primary);
}
.aiweb-add-service__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-add-service__name {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-add-service__sub {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-add-service__meta {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.aiweb-add-service__amount {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
color: var(--color-primary);
white-space: nowrap;
}
.aiweb-add-service__unit {
font-weight: var(--fw-medium);
}
.aiweb-add-service__check {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
inline-size: var(--space-6);
block-size: var(--space-6);
margin: 0;
border: 2px solid var(--border);
border-radius: var(--space-2);
background-color: var(--surface);
cursor: pointer;
position: relative;
}
.aiweb-add-service__check:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.aiweb-add-service__check:checked::after {
content: "";
position: absolute;
inset-block-start: 2px;
inset-inline-start: 6px;
inline-size: 6px;
block-size: 11px;
border: solid var(--text-on-primary);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.aiweb-add-service__check:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-add-cross {
margin-block-start: var(--space-6);
}
.aiweb-add-cross__title {
margin: 0 0 var(--space-3);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-add-cross__carousel {
margin-inline: calc(var(--space-5) * -1);
padding-inline: var(--space-5);
}
.aiweb-add-foot {
position: sticky;
inset-block-end: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-block-start: var(--space-5);
margin-inline: calc(var(--space-5) * -1);
padding-inline: var(--space-5);
padding-block: var(--space-4);
padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
background-color: var(--surface);
border-block-start: 1px solid var(--border);
}
.aiweb-add-foot__total {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-add-foot__label {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-add-foot__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--space-12);
padding-inline: var(--space-8);
border: 0;
border-radius: var(--radius-pill);
background-color: var(--color-primary);
color: var(--text-on-primary);
font-family: var(--font-base);
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
cursor: pointer;
transition: background-color .15s ease;
}
.aiweb-add-foot__btn:hover {
background-color: var(--color-primary-dark);
}
.aiweb-add-foot__btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.aiweb-add-foot__btn:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
.aiweb-add-foot__btn-icon {
display: inline-flex;
}
.aiweb-added {
position: fixed;
inset-inline: 0;
inset-block-end: calc(44px + var(--space-2) * 2 + var(--space-3) * 2 + env(safe-area-inset-bottom, 0px));
z-index: var(--z-bottomnav);
padding-inline: var(--space-4);
padding-block-end: var(--space-3);
pointer-events: none;
}
.aiweb-added.is-shown {
animation: aiweb-added-in .28s cubic-bezier(.4, 0, .2, 1) both;
}
.aiweb-added__inner.aiweb-app {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background-color: var(--color-primary-soft);
border: 1px solid var(--color-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-added__lead {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-added__badge {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
background-color: var(--color-primary);
color: var(--text-on-primary);
border-radius: var(--radius-pill);
}
.aiweb-added__text {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--color-primary-fg);
}
.aiweb-added__view {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--space-10);
padding-inline: var(--space-4);
background-color: var(--surface);
border: 1px solid var(--color-primary);
border-radius: var(--radius-pill);
color: var(--color-primary);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.aiweb-added__view:hover {
background-color: var(--color-primary);
color: var(--text-on-primary);
}
.aiweb-added__view-icon {
display: inline-flex;
}
@keyframes aiweb-added-in {
from { transform: translateY(var(--space-4)); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aiweb-gallery .swiper-pagination-bullet,
.aiweb-variation__option,
.aiweb-tabs__tab,
.aiweb-actionrow__icon,
.aiweb-faq__chevron,
.aiweb-stars__star,
.aiweb-add-foot__btn,
.aiweb-added__view {
transition: none;
}
.aiweb-faq__a,
.aiweb-added.is-shown {
animation: none;
}
}
.aiweb-gallery__thumbs,
.aiweb-add__close {
display: none;
}
@media (min-width: 768px) {
.aiweb-gallery.aiweb-app {
max-inline-size: var(--app-max);
margin-inline: auto;
border-radius: var(--radius-lg);
overflow: hidden;
}
}
@media (min-width: 1024px) {
.aiweb-has-buybar .aiweb-header {
display: block;
}
.aiweb-has-buybar .aiweb-site {
padding-block-end: 0;
}
.aiweb-single__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
grid-template-rows: auto auto;
align-items: start;
column-gap: var(--space-6);
row-gap: var(--space-8);
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-6);
padding-block-start: var(--space-6);
}
.aiweb-single__top {
grid-column: 1;
grid-row: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
align-items: start;
gap: var(--space-6);
}
.aiweb-single__top > .aiweb-gallery.aiweb-app {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-inline-size: none;
margin-inline: 0;
padding: var(--space-3);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.aiweb-gallery__stage {
position: relative;
inline-size: 100%;
}
.aiweb-gallery__viewport {
border-radius: var(--radius-md);
}
.aiweb-gallery .swiper-pagination {
display: none;
}
.aiweb-gallery__thumbs {
display: flex;
flex-direction: row;
gap: var(--space-2);
inline-size: 100%;
overflow-x: auto;
scrollbar-width: thin;
}
.aiweb-gallery__thumb {
flex: 0 0 var(--space-16);
display: block;
padding: 0;
inline-size: var(--space-16);
aspect-ratio: 1 / 1;
border: 2px solid transparent;
border-radius: var(--radius-md);
background-color: var(--background);
overflow: hidden;
cursor: pointer;
transition: border-color var(--transition-base);
}
.aiweb-gallery__thumb.is-active {
border-color: var(--color-primary);
}
.aiweb-gallery__thumb:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-gallery__thumb-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-single__top > .aiweb-single__info.aiweb-app {
max-inline-size: none;
margin-inline: 0;
padding: var(--space-6);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-single__layout > .aiweb-single__sections.aiweb-app {
grid-column: 1;
grid-row: 2;
max-inline-size: none;
margin-inline: 0;
padding-inline: 0;
padding-block: 0;
gap: var(--space-5);
}
.aiweb-single__layout > .aiweb-single__buy.aiweb-app {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-4));
max-inline-size: none;
margin-inline: 0;
padding: var(--space-6);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-buybar {
position: static;
z-index: auto;
margin-block-start: var(--space-6);
padding: 0;
pointer-events: auto;
}
.aiweb-buybar__inner.aiweb-app {
flex-direction: column-reverse;
align-items: stretch;
gap: var(--space-3);
max-inline-size: none;
margin-inline: 0;
padding: var(--space-4);
border-radius: var(--radius-lg);
}
.aiweb-buybar__add {
justify-content: center;
min-block-size: 48px;
}
.aiweb-buybar__price {
justify-content: center;
}
.aiweb-added {
inset-block-end: var(--space-6);
}
.aiweb-sheet__panel--add {
margin-inline: auto;
align-self: center;
max-block-size: 88vh;
border-radius: var(--radius-lg);
animation-name: aiweb-modal-in;
}
.aiweb-sheet__panel--add .aiweb-sheet__handle {
display: none;
}
.aiweb-add__head {
position: relative;
}
.aiweb-add__close {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border: 0;
border-radius: var(--radius-pill);
background-color: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: background-color var(--transition-base), color var(--transition-base);
}
.aiweb-add__close:hover {
background-color: var(--background);
color: var(--text-primary);
}
.aiweb-add__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-related {
margin-block-start: var(--space-10);
}
.aiweb-related .aiweb-app {
max-inline-size: var(--container-max);
padding-inline: var(--space-6);
}
.aiweb-related__carousel.aiweb-app {
max-inline-size: min(100% - 2 * var(--space-6), var(--container-max) - 2 * var(--space-6));
padding-inline: 0;
}
.aiweb-related__carousel .aiweb-pcard-track__item {
flex: 0 0 22%;
}
}
@media (min-width: 1280px) {
.aiweb-related__carousel .aiweb-pcard-track__item {
flex: 0 0 18%;
}
}
@keyframes aiweb-modal-in {
from { transform: translateY(var(--space-4)) scale(.98); opacity: 0; }
to   { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aiweb-gallery__thumb,
.aiweb-add__close {
transition: none;
}
.aiweb-sheet__panel--add {
animation: none;
}
}