/* ==========================================================================
   Lipslay Enterprise — Homepage & Shop/Restaurant polish
   Compiled from resources/sass/enterprise.scss (Vite). Uses --ls-* tokens.
   ========================================================================== */

/* --- Skeleton loader ------------------------------------------------------ */
.ls-skeleton {
    background: linear-gradient(90deg, var(--ls-surface-2) 25%, #eef2f7 50%, var(--ls-surface-2) 75%);
    background-size: 200% 100%;
    animation: ls-shimmer 1.4s var(--ls-ease) infinite;
}

@keyframes ls-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ls-skeleton {
        animation: none;
    }
}

/* --- Consistent image aspect ratios + object-fit cover -------------------- */
.ls-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.ls-aspect-square { aspect-ratio: 1 / 1; }
.ls-aspect-4-3 { aspect-ratio: 4 / 3; }
.ls-aspect-16-9 { aspect-ratio: 16 / 9; }
.ls-aspect-16-10 { aspect-ratio: 16 / 10; }

/* --- Shop & Restaurant category tiles ------------------------------------- */
.ls-u5-shop-tile {
    transition: transform var(--ls-dur-std) var(--ls-ease);
}

.ls-u5-shop-tile .ls-u5-shop-tile-img {
    aspect-ratio: 1 / 1;
    box-shadow: var(--ls-shadow-sm);
    transition: box-shadow var(--ls-dur-std) var(--ls-ease), transform var(--ls-dur-std) var(--ls-ease);
}

.ls-u5-shop-tile .ls-u5-shop-tile-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.ls-u5-shop-tile:hover {
    transform: translateY(-3px);
}

.ls-u5-shop-tile:hover .ls-u5-shop-tile-img {
    box-shadow: var(--ls-shadow-md);
    transform: scale(1.05);
}

/* --- Bottom sheet — soft elevated shadow ---------------------------------- */
.ls-u5-shop-sheet {
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
}

/* --- Sub-category buttons — hover affordance ------------------------------ */
.ls-u5-shop-sub {
    transition: background var(--ls-dur-micro) var(--ls-ease), transform var(--ls-dur-micro) var(--ls-ease);
}

.ls-u5-shop-sub:hover {
    background: var(--ls-surface-2);
    transform: translateY(-1px);
}

/* --- Lifestyle shop product grid — premium responsive grid ---------------- */
.ls-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ls-space-4);
}

/* --- Market category cards (Restaurant / Grocery / etc.) ------------------ */
.service-box .card {
    border-radius: var(--ls-radius-lg);
    overflow: hidden;
    box-shadow: var(--ls-shadow-sm);
    transition: transform var(--ls-dur-std) var(--ls-ease), box-shadow var(--ls-dur-std) var(--ls-ease);
}

.service-box .card img.card-img-top {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.service-box .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ls-shadow-lg);
}

/* --- Expert / store cards — image aspect ratio + cover -------------------- */
.ls-expert-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.ls-expert-photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.ls-expert-card {
    transition: transform var(--ls-dur-std) var(--ls-ease), box-shadow var(--ls-dur-std) var(--ls-ease);
}

.ls-expert-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ls-shadow-md);
}

/* --- Hero + CTA polish --- */
.ls-hero h1 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ls-hero-sub {
    max-width: 34rem;
}

.ls-btn-cta {
    transition: transform var(--ls-dur-std) var(--ls-ease), box-shadow var(--ls-dur-std) var(--ls-ease);
    box-shadow: var(--ls-shadow-cta);
}

.ls-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(225, 29, 72, 0.35);
}

.ls-section {
    scroll-margin-top: 1rem;
}