.aiweb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--space-12);
font-weight: var(--fw-semibold);
line-height: 1;
text-align: center;
white-space: nowrap;
border-radius: var(--radius-pill);
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.aiweb-btn__icon {
display: inline-flex;
}
.aiweb-btn--sm {
min-block-size: var(--space-10);
padding-block: var(--space-2);
padding-inline: var(--space-4);
font-size: var(--fs-caption);
}
.aiweb-btn--md {
padding-block: var(--space-3);
padding-inline: var(--space-5);
font-size: var(--fs-body);
}
.aiweb-btn--lg {
min-block-size: calc(var(--space-12) + var(--space-2));
padding-block: var(--space-4);
padding-inline: var(--space-6);
font-size: var(--fs-body-lg);
}
.aiweb-btn--primary {
background-color: var(--color-primary);
color: var(--text-on-primary);
}
.aiweb-btn--primary:hover {
background-color: var(--color-primary-dark);
}
.aiweb-btn--ink {
background-color: var(--color-ink);
color: var(--text-on-primary);
}
.aiweb-btn--ink:hover {
opacity: .9;
}
.aiweb-btn--ghost {
background-color: transparent;
color: var(--color-primary);
}
.aiweb-btn--ghost:hover {
background-color: var(--color-primary-soft);
}
.aiweb-btn--icon {
gap: 0;
padding: 0;
aspect-ratio: 1;
}
.aiweb-btn--icon.aiweb-btn--sm {
inline-size: var(--space-10);
}
.aiweb-btn--icon.aiweb-btn--md {
inline-size: var(--space-12);
}
.aiweb-btn--icon.aiweb-btn--lg {
inline-size: calc(var(--space-12) + var(--space-2));
}
.aiweb-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-caption);
font-weight: var(--fw-bold);
line-height: 1;
}
.aiweb-badge--discount {
padding-block: var(--space-1);
padding-inline: var(--space-2);
color: var(--text-on-primary);
background-color: var(--color-discount);
border-radius: var(--radius-pill);
}
.aiweb-badge__pct {
margin-inline-start: 1px;
}
.aiweb-badge--amount {
gap: var(--space-1);
white-space: nowrap;
}
.aiweb-badge__unit {
font-weight: var(--fw-medium);
}
.aiweb-badge--stock {
gap: var(--space-2);
font-weight: var(--fw-medium);
color: var(--text-secondary);
}
.aiweb-badge--dot-only {
gap: 0;
}
.aiweb-badge__dot {
inline-size: var(--space-3);
block-size: var(--space-3);
background-color: var(--color-stock);
border-radius: var(--radius-pill);
}
.aiweb-price {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
}
.aiweb-price__current {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
color: var(--text-primary);
}
.aiweb-price__amount {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
}
.aiweb-price__unit {
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.aiweb-price__regular {
font-size: var(--fs-caption);
color: var(--text-muted);
text-decoration-line: line-through;
}
.aiweb-price__out {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--text-muted);
}
.aiweb-rating {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-body);
color: var(--text-primary);
}
.aiweb-rating__star {
display: inline-flex;
color: var(--border); 
}
.aiweb-rating__star--filled {
color: var(--color-star);
}
.aiweb-rating__score {
font-weight: var(--fw-semibold);
}
.aiweb-rating__count {
font-size: var(--fs-caption);
color: var(--text-muted);
}
.aiweb-rating--stars {
gap: var(--space-2);
}
.aiweb-rating__stars {
display: inline-flex;
gap: 2px;
}
.aiweb-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-block-end: var(--space-5);
}
.aiweb-section-header__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-section-header__title {
margin: 0;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-section-header__link {
font-size: var(--fs-body);
color: var(--text-muted);
}
.aiweb-section-header__link:hover {
color: var(--color-primary);
}
.aiweb-section-header__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: calc(var(--space-12) + var(--space-3));
block-size: calc(var(--space-12) + var(--space-3));
color: var(--color-primary);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-search {
display: flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--space-12);
padding-inline: var(--space-4);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.aiweb-search__input {
flex: 1 1 auto;
min-inline-size: 0;
padding-block: var(--space-2);
background: transparent;
border: 0;
}
.aiweb-search__input::placeholder {
color: var(--text-muted);
}
.aiweb-search__input:focus-visible {
outline: 0;
}
.aiweb-search__submit {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
color: var(--text-primary);
}
.aiweb-product-card {
position: relative; 
display: flex;
flex-direction: column;
gap: var(--space-3);
block-size: 100%;
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-product-card__media {
position: relative;
display: grid;
place-items: stretch;
aspect-ratio: 1;
background-color: var(--background);
border-radius: var(--radius-md);
overflow: hidden;
}
.aiweb-product-card__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-product-card__stock {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-start: var(--space-3);
z-index: 2;
}
.aiweb-product-card__badge {
position: absolute;
inset-block-start: var(--space-3);
inset-inline-end: var(--space-3);
z-index: 2;
}
.aiweb-product-card__badge .aiweb-badge--discount {
background-color: var(--color-primary);
}
.aiweb-product-card__wishlist {
position: absolute;
inset-block-end: var(--space-2);
inset-inline-end: var(--space-2);
z-index: 2;
display: grid;
place-items: center;
inline-size: var(--space-8);
block-size: var(--space-8);
border: 0;
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--text-secondary);
box-shadow: var(--shadow-card);
cursor: pointer;
}
.aiweb-product-card__wishlist.is-active {
color: var(--color-discount);
}
.aiweb-product-card__wishlist.is-active .aiweb-icon {
fill: currentColor;
}
.aiweb-product-card__wishlist:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-product-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-2);
}
.aiweb-product-card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 0;
min-block-size: calc(2 * var(--fs-body-lg) * 1.6); 
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
line-height: 1.6;
}
.aiweb-product-card__link {
color: var(--text-primary);
}
.aiweb-product-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.aiweb-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-block-start: auto;
}
.aiweb-product-card__footer .aiweb-price {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;  
gap: var(--space-1);
min-inline-size: 0;
}
.aiweb-product-card__footer .aiweb-price__current {
flex-wrap: wrap;
}
.aiweb-product-card__footer .aiweb-price__amount {
overflow-wrap: anywhere;
}
.aiweb-product-card__cart {
position: relative;
z-index: 2;
flex: 0 0 auto;
inline-size: calc(var(--space-10) + var(--space-1));  
block-size: calc(var(--space-10) + var(--space-1));   
}
.aiweb-product-card__stepper {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
display: flex;
flex-direction: column;
align-items: center;
inline-size: 100%;
background-color: color-mix(in srgb, var(--surface) 62%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
color: var(--text-primary);
border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.aiweb-product-card__step {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: var(--space-8);  
padding: 0;
border: 0;
background-color: transparent;
color: inherit;
cursor: pointer;
}
.aiweb-product-card__step:disabled {
opacity: .4;
cursor: not-allowed;
}
.aiweb-product-card__step:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.aiweb-product-card__count {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: var(--space-5);  
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: inherit;
}
.aiweb-product-card__ic {
display: inline-flex;
}
.aiweb-product-card__ic--trash {
display: none;
}
.aiweb-product-card__cart.is-single .aiweb-product-card__ic--minus {
display: none;
}
.aiweb-product-card__cart.is-single .aiweb-product-card__ic--trash {
display: inline-flex;
color: var(--color-discount);
}
.aiweb-product-card__cart.is-collapsed .aiweb-product-card__count,
.aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--down {
display: none;
}
.aiweb-product-card__cart.is-collapsed .aiweb-product-card__step--up {
min-block-size: calc(var(--space-10) + var(--space-1));  
}
.aiweb-product-card__step--view {
min-block-size: calc(var(--space-10) + var(--space-1));  
}
@media (hover: hover) {
.aiweb-product-card__step {
transition: background-color var(--transition-base);
}
.aiweb-product-card__step:not(:disabled):hover {
background-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
}
.aiweb-product-card__cart.is-busy .aiweb-product-card__stepper {
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.aiweb-product-card__cart .aiweb-product-card__stepper {
transition: border-color var(--transition-base);
}
.aiweb-product-card__cart.is-busy .aiweb-product-card__stepper {
animation: aiweb-card-sync 1.1s ease-in-out infinite;
}
}
@keyframes aiweb-card-sync {
50% {
border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
}
[data-aiweb-add-to-cart].is-loading {
opacity: .72;
cursor: progress;
}
[data-aiweb-add-to-cart].is-added {
border-color: var(--color-stock);
color: var(--color-stock);
}
@media (prefers-reduced-motion: no-preference) {
[data-aiweb-add-to-cart] {
transition: opacity var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
[data-aiweb-add-to-cart].is-added {
animation: aiweb-added-pop var(--transition-base) ease-out;
}
}
@keyframes aiweb-added-pop {
50% {
transform: scale(1.06);
}
}
.aiweb-product-card-h {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.aiweb-product-card-h__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-3);
min-inline-size: 0;
}
.aiweb-product-card-h__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
line-height: 1.6;
}
.aiweb-product-card-h__link {
color: var(--text-primary);
}
.aiweb-product-card-h__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.aiweb-product-card-h__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.aiweb-product-card-h__sep {
inline-size: 1px;
block-size: var(--space-4);
background-color: var(--border);
}
.aiweb-product-card-h__media {
position: relative;
display: grid;
place-items: center;
flex: 0 0 auto;
inline-size: calc(var(--space-16) + var(--space-6)); 
aspect-ratio: 1;
padding: var(--space-2);
background-color: var(--background);
border-radius: var(--radius-md);
}
.aiweb-product-card-h__img {
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto;
block-size: auto;
object-fit: contain;
}
.aiweb-product-card-h__badge {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 2;
}
.aiweb-category-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
color: var(--text-primary);
text-align: center;
}
.aiweb-category-card__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
background-color: var(--background);
border-radius: var(--radius-md);
overflow: hidden;
}
.aiweb-category-card__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-category-card__title {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
line-height: var(--lh-body);
}
.aiweb-category-card__check {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
display: grid;
place-items: center;
inline-size: var(--space-6);
block-size: var(--space-6);
color: var(--text-on-primary);
background-color: var(--color-primary);
border-radius: var(--radius-pill);
}
.aiweb-category-card.is-selected {
box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-card);
}
.aiweb-category-card.is-selected .aiweb-category-card__title {
color: var(--color-primary);
font-weight: var(--fw-semibold);
}
.aiweb-category-card--row {
flex-direction: row-reverse;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
text-align: start;
}
.aiweb-category-card--row .aiweb-category-card__media {
flex: 0 0 auto;
inline-size: calc(var(--space-16) + var(--space-8)); 
aspect-ratio: 1;
}
.aiweb-category-card--row .aiweb-category-card__title {
flex: 1 1 auto;
min-inline-size: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
}
.aiweb-sheet {
position: fixed;
inset: 0;
z-index: var(--z-sheet);
display: flex;
align-items: flex-end;
justify-content: center;
}
.aiweb-sheet__backdrop {
position: absolute;
inset: 0;
background-color: var(--color-overlay);
animation: aiweb-sheet-backdrop-in .24s ease both;
}
.aiweb-sheet__panel {
position: relative;
display: flex;
flex-direction: column;
inline-size: 100%;
max-inline-size: var(--app-max);
max-block-size: var(--aiweb-sheet-max-h, 85vh);
background-color: var(--surface);
border-start-start-radius: var(--radius-lg);
border-start-end-radius: var(--radius-lg);
box-shadow: var(--shadow-nav);
padding-block-end: env(safe-area-inset-bottom, 0px);
animation: aiweb-sheet-panel-in .28s cubic-bezier(.4, 0, .2, 1) both;
}
.aiweb-sheet__handle {
flex: 0 0 auto;
inline-size: var(--space-10);
block-size: var(--space-1);
margin-inline: auto;
margin-block-start: var(--space-3);
background-color: var(--border);
border-radius: var(--radius-pill);
}
.aiweb-sheet__head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-4) var(--space-3);
padding-inline: var(--space-5);
}
.aiweb-sheet__title {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.aiweb-sheet__close {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-12); 
block-size: var(--space-12);
color: var(--text-secondary);
border-radius: var(--radius-pill);
}
.aiweb-sheet__close:hover {
background-color: var(--background);
color: var(--text-primary);
}
.aiweb-sheet__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-inline: var(--space-5);
padding-block: var(--space-2) var(--space-6);
}
@keyframes aiweb-sheet-backdrop-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes aiweb-sheet-panel-in {
from { transform: translateY(100%); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aiweb-sheet__backdrop,
.aiweb-sheet__panel {
animation: none;
}
}
.aiweb-toast {
position: fixed;
inset-inline: 0;
inset-block-end: calc(var(--space-16) + var(--space-12) + var(--space-2) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-overlay);
padding-inline: var(--space-4);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(var(--space-5));
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.aiweb-toast.is-shown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .25s ease, transform .25s ease;
}
.aiweb-toast__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-ink);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-nav);
color: var(--text-on-primary);
}
.aiweb-toast__lead {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-inline-size: 0;
}
.aiweb-toast__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: var(--space-6);
block-size: var(--space-6);
background-color: var(--color-primary);
color: var(--text-on-primary);
border-radius: var(--radius-pill);
}
.aiweb-toast__text {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
}
.aiweb-toast__link {
flex: 0 0 auto;
color: var(--color-primary);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
text-decoration: none;
white-space: nowrap;
}
.aiweb-toast__link:hover {
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
.aiweb-toast {
transform: none;
transition: opacity .2s ease, visibility 0s linear .2s;
}
.aiweb-toast.is-shown {
transform: none;
transition: opacity .2s ease;
}
}
@media (hover: hover) {
.aiweb-btn {
transition: background-color var(--transition-base), color var(--transition-base),
border-color var(--transition-base), box-shadow var(--transition-base);
}
.aiweb-btn--primary:hover,
.aiweb-btn--ink:hover {
box-shadow: var(--shadow-hover);
}
.aiweb-product-card,
.aiweb-product-card-h,
.aiweb-category-card {
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.aiweb-product-card:hover,
.aiweb-product-card-h:hover,
.aiweb-category-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(calc(-1 * var(--space-1)));
}
.aiweb-category-card.is-selected:hover {
box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-hover);
}
.aiweb-product-card:hover .aiweb-product-card__link,
.aiweb-product-card-h:hover .aiweb-product-card-h__link {
color: var(--color-primary);
}
}
:root .select2-dropdown {
border-color: var(--border);
box-shadow: var(--shadow-card);
}
:root .select2-container--default .select2-results__option {
padding-block: var(--space-2);
padding-inline: var(--space-4);
color: var(--text-primary);
}
:root .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--color-primary);
color: var(--text-on-primary);
}
:root .select2-container--default .select2-results__option[aria-selected="true"] {
background-color: var(--color-primary-soft);
color: var(--color-primary-fg);
}
:root .select2-container--default .select2-search--dropdown .select2-search__field {
border-color: var(--border);
border-radius: var(--radius-sm);
background-color: var(--background);
color: var(--text-primary);
}
:root[data-theme="dark"] .select2-dropdown {
background-color: var(--surface);
border-color: var(--border);
}
:root[data-theme="dark"] .select2-results__option {
color: var(--text-primary);
}
:root[data-theme="dark"] .select2-results__option--highlighted,
:root[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
background-color: var(--color-primary);
color: var(--text-on-primary);
}
:root[data-theme="dark"] .select2-results__option[aria-selected="true"] {
background-color: var(--color-primary-soft);
color: var(--text-primary);
}
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
background-color: var(--background);
border-color: var(--border);
color: var(--text-primary);
}
.aiweb-post-card {
position: relative; 
display: flex;
flex-direction: column;
block-size: 100%;
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden; 
}
.aiweb-post-card__media {
position: relative;
aspect-ratio: 16 / 10; 
overflow: hidden;
background-color: var(--background);
}
.aiweb-post-card__img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.aiweb-post-card__media--placeholder {
display: grid;
place-items: center;
background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.aiweb-post-card__placeholder-icon {
display: grid;
place-items: center;
color: var(--text-on-primary);
opacity: .55;
}
.aiweb-post-card__cat {
position: absolute;
inset-block-end: var(--space-3);
inset-inline-start: var(--space-3);
z-index: 2;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background-color: var(--surface);
color: var(--color-primary-fg);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
box-shadow: var(--shadow-card);
}
.aiweb-post-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
}
.aiweb-post-card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bold);
line-height: 1.6;
}
.aiweb-post-card__link {
color: var(--text-primary);
}
.aiweb-post-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.aiweb-post-card__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
margin: 0;
color: var(--text-secondary);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.aiweb-post-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-block-start: auto; 
padding-block-start: var(--space-1);
color: var(--text-muted);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
}
.aiweb-post-card__meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.aiweb-post-card--featured .aiweb-post-card__media {
aspect-ratio: 16 / 9;
}
.aiweb-post-card--featured .aiweb-post-card__title {
-webkit-line-clamp: 3;
line-clamp: 3;
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
.aiweb-post-card--row {
flex-direction: row;
align-items: stretch;
}
.aiweb-post-card--row .aiweb-post-card__media {
flex: 0 0 38%;
aspect-ratio: 1;
}
.aiweb-post-card--row .aiweb-post-card__body {
flex: 1 1 auto;
}
@media (hover: hover) {
.aiweb-post-card {
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.aiweb-post-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(calc(-1 * var(--space-1)));
}
.aiweb-post-card:hover .aiweb-post-card__link {
color: var(--color-primary);
}
}
.aiweb-sheet__panel--share .aiweb-sheet__body {
padding-block-start: var(--space-4);
}
.aiweb-share {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.aiweb-share__heading {
margin: var(--space-2) 0 0;
font-size: var(--fs-body-lg);
line-height: var(--lh-body-lg);
font-weight: var(--fw-semibold);
color: var(--text-primary);
text-align: start;
}
.aiweb-share__copy {
display: flex;
align-items: center;
gap: var(--space-3);
}
.aiweb-share__url {
flex: 1 1 auto;
min-inline-size: 0;
min-block-size: 48px;
padding-inline: var(--space-4);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-family: var(--font-base);
font-size: var(--fs-body);
text-overflow: ellipsis;
}
.aiweb-share__url:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-share__copybtn {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border: 1px solid var(--border);
background-color: var(--background);
border-radius: var(--radius-md);
color: var(--color-primary-fg);
cursor: pointer;
transition: background-color var(--transition-base), border-color var(--transition-base);
}
.aiweb-share__copybtn:hover {
background-color: var(--color-primary-soft);
}
.aiweb-share__copybtn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-share__copybtn.is-copied {
background-color: var(--color-primary-soft);
border-color: var(--color-primary);
}
.aiweb-share__copied {
position: absolute;
inset-block-end: calc(100% + var(--space-1));
inset-inline-end: 0;
padding-block: var(--space-1);
padding-inline: var(--space-2);
background-color: var(--color-ink);
color: var(--text-on-primary);
border-radius: var(--radius-sm);
font-size: var(--fs-caption);
white-space: nowrap;
pointer-events: none;
}
.aiweb-share__copied:empty {
display: none;
}
.aiweb-share__socials {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.aiweb-share__social {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 52px;
block-size: 52px;
background-color: var(--background);
border-radius: var(--radius-md);
color: var(--color-primary-fg);
text-decoration: none;
transition: background-color var(--transition-base);
}
.aiweb-share__social:hover {
background-color: var(--color-primary-soft);
}
.aiweb-share__social:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aiweb-share__close {
align-self: flex-end;
min-block-size: 44px;
margin-block-start: var(--space-2);
padding-block: var(--space-2);
padding-inline: var(--space-4);
border: 0;
background-color: transparent;
color: var(--text-secondary);
font-family: var(--font-base);
font-size: var(--fs-body-lg);
font-weight: var(--fw-medium);
cursor: pointer;
border-radius: var(--radius-pill);
}
.aiweb-share__close:hover {
color: var(--text-primary);
background-color: var(--background);
}
.aiweb-share__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.aiweb-share__copybtn,
.aiweb-share__social {
transition: none;
}
}