:root {
            --background: #F7F7FF;
            --surface: #FFFFFF;
            --text: #3F3F46;
            --text-muted: #6B7280;
            --border: #ECEFF1;
            --primary: #EED3FF;
			--btn-primary: #EED3FF;
            --primary-emphasis: #D7A7FF;
            --primary-deep: #BF7FFF;
            --secondary: #eddf5d;
            --secondary-emphasis: #FFE86E;
            --secondary-deep: #FFD83B;
            --success: #10B981;
            --danger: #EF4444;
            --warning: #F59E0B;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
			--radius:14px; --shadow:0 10px 30px rgba(31,31,40,.08);
        }
@font-face {
    font-display: swap;
    font-family: dana;
    font-style: normal;
    font-weight: 400;
    src: url('fonts/400.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: dana;
    font-style: normal;
    font-weight: 500;
    src: url('fonts/500.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: dana;
    font-style: normal;
    font-weight: 700;
    src: url('fonts/700.woff2') format('woff2')
}

body {
    font-family: dana!important;
    background: var(--background);
            color: var(--text);
    margin: 0;
    font-size: 15px!important;
}




/* Flexbox utilities */

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.space-x-2 > * + * {
    margin-left: 0.5rem;
}

.space-x-4 > * + * {
    margin-left: 1rem;
}

.space-x-6 > * + * {
    margin-left: 1.5rem;
}

.space-x-8 > * + * {
    margin-left: 2rem;
}

.space-x-reverse {
    flex-direction: row-reverse;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

/* Grid */

.grid {
    display: grid;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

/* Positioning */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.top-16 {
    top: 6rem;
}

.right-0 {
    right: 0;
}

.left-0 {
    left: 0;
}

.bottom-0 {
    bottom: 0;
}

/* Z-index */

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* Width & Height */

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-80 {
    width: 20rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-16 {
    height: 4rem;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

/* Padding & Margin */

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.p-12 {
    padding: 3rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-12 {
    margin-top: 7rem;
}

.mb-12 {
    margin-bottom: 7rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Text */

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-center {
    text-align: center;
}

/* Colors */

.text-white {
    color: white;
}

.bg-white {
    background-color: var(--surface);
}

/* Border */

.border {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

/* Display */

.hidden {
    display: none;
}

.block {
    display: block;
}

/* Overflow */

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* Cursor */

.cursor-pointer {
    cursor: pointer;
}

/* Transitions */

.transition-all {
    transition: all 0.15s ease-in-out;
}

.transition-colors {
    transition: color 0.15s ease-in-out;
}

.transition-transform {
    transition: transform 0.15s ease-in-out;
}

.duration-300 {
    transition-duration: 300ms;
}

/* Transform */

.transform {
    transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}

.translate-x-full {
    transform: translateX(100%);
}

.translate-y-4 {
    transform: translateY(1rem);
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Opacity */

.opacity-0 {
    opacity: 0;
}

/* Backdrop */

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

.backdrop-blur-glass {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
}

/* Shadow */

.shadow-lg {
    box-shadow: var(--shadow);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Responsive */

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
    .lg\:flex {
        display: flex;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Custom styles */

.header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border);
    padding: 10px;
}

.logo-gradient {
    background: linear-gradient(135deg, var(--primary-deep), var(--secondary-deep));
}

.menu-item:hover {
    background: linear-gradient(135deg, rgba(238, 211, 255, 0.3), rgba(255, 246, 166, 0.3));
}

.mega-menu {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
}

.mobile-menu {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(25px);
}

.mobile-level {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease-out;
    overflow-y: auto;
}

.nav-link {
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}

.nav-link:hover {
    color: #bf7fff;
}

.phone-link {
    text-decoration: none;
    color: var(--text-muted);
    transition: all 0.15s ease-in-out;
}

.phone-link:hover {
    color: var(--primary-deep);
}

.login-btn {
    background: var(--primary);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--primary-emphasis);
    transition: all 0.15s ease-in-out;
}

.login-btn:hover {
    background: var(--primary-emphasis);
    transform: translateY(-1px);
}

.feature-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.icon-primary {
    background: var(--primary-deep);
}

.icon-secondary {
    background: var(--secondary-deep);
}

.icon-success {
    background: var(--success);
}

.text-primary {
    color: var(--text);
}

.text-muted {
    color: var(--text-muted);
}

.border-color {
    border-color: var(--border);
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-white-20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2);
}


button#closeMobileMenu , button#mobileMenuBtn {
    background: #6b72804a;
    color: #6b7280 !important;
    border: 0;
    border-radius: 5px;
}


/**** HERO ***/

.hero{position:relative; padding:72px 0}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 400px at 80% -20%, rgb(221 194 255), transparent 60%), radial-gradient(800px 320px at 10% 0%, rgb(255 246 166), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:32px}
.kicker{color:var(--text-muted); font-weight:700; letter-spacing:.02em}
.title{font-size: 32px;line-height:1.2;font-weight: 600;}
.lead{color:var(--text-muted); margin:0 0 20px}


/**** feature ***/
.card-feature {
    background: var(--surface) ;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-feature svg {
    background: var(--primary-deep);
    fill: #fff;
    width: 40px;
    height: 40px;
    padding: 7px;
    border-radius: 14px;
}
article.card-feature h3 {
    color: var(--bs-heading-color);
    font-size: 20px;
	    margin: 15px 0;

}
.cta {
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
	background: linear-gradient(270deg, var(--primary) 0%, var(--primary-emphasis) 100%);
    color: var(--on-primary);
}
.cta strong {
    font-size: 19px;
    margin-bottom: 10px !important;
    display: inline-block;
}
.cta .muted {
    font-size: 14px;
    font-weight: 500;
}

section#about {
    background: #fff;
    padding: 30px;
    box-shadow: var(--shadow);
}
section#about p {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

section#about h2 {
    font-size: 22px;
    margin-bottom: 25px !important;
    display: inline-block;
}

.btn-secondary {
   background: var(--secondary);
	border:0px;
	color:#1f2937;
}

.btn-secondary:hover {
   background: var(--secondary);
	border:0px;
	color:#1f2937;
}

.btn-deep {
   background: var(--primary-deep);
	border:0px;
	color:#fff;
}
.btn-deep:hover {
   background: var(--primary-deep);
	border:0px;
	color:#fff;
}

.hzc-title a {
    text-decoration: none;
    color: #3f3f46;
}
.hzc-line {
    font-size: 14px;
    color: #444;
    font-weight: 500;
}

.hzc-title {
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
}

button#backBtn {
    background: #6b72804a;
    color: #6b7280 !important;
    border: 0;
    border-radius: 5px;
}
.lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
}

.btn-hero {
    gap: 15px;
    justify-content: space-evenly;
}

.logo-header {
    width: 110px;
}

.about-cta {
    display: flex
;
    gap: 10px;
}


.gallery-top , .product-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.name-product h1 {
    font-size: 20px;
    font-weight: 500;
}

.item-rpd div {
    margin: 10px 0;
    font-size: 14px;
}
.item-rpd svg {
    background: var(--secondary);
    border: 0px;
    color: #1f2937;
    width: 25px;
    height: auto;
    padding: 4px;
    border-radius: 5px;
}
.simple-price.price {
    display: flex
;
    align-items: center;
}

.tab-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 10px 0;
}
.tabs-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.nav-tabs .nav-link {
    padding: 15px;
    border: 0;
    margin: 0;
}
.nav-tabs .nav-link.active {
    background: #bf7fff;
    color: #fff;
    border-radius: 0;
}
.product-breadcrumb a {
    color: var(--bs-heading-color);
    text-decoration: none;
}
.product-breadcrumb {
    margin: 30px 0;
}
button#toTop img {
    width: 24px;
    margin-right: 7px;
}
button#toTop {
    display: flex
;
    align-items: center;
}

.badge-box img {
    width: 150px;
    height: auto;
    margin: auto;
    text-align: center;
    display: block;
}

    #siteFooter{color:var(--text); background:var(--surface)}
    #siteFooter .link-muted{color:var(--text-muted); text-decoration:none}
    #siteFooter .link-muted:hover{color:#1F2937}
    #siteFooter .chip{background:var(--primary); color:var(--on-primary); border-radius:999px; padding:.5rem .75rem; display:inline-flex; align-items:center; gap:.35rem}
    #siteFooter .btn-top{background:linear-gradient(90deg,var(--secondary),var(--secondary-emphasis)); color:var(--on-secondary); border:0; border-radius:999px; padding:.55rem .9rem; font-weight:700}
    #siteFooter .social a{width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:var(--on-primary); text-decoration:none}
    #siteFooter .social a:hover{background:var(--primary-emphasis)}
#siteFooter .badge-box {
    border: 1px dashed #dee2e6;
    border-radius: 12px;
    background: #f7f7ff;
    text-align: center;
}

ul.menu-footer li {
    padding: 4px 0;
}

.small, small {
    font-size: 0.9rem;
}
.instagram-section {
            margin: 5rem 0;
            position: relative;
            overflow: hidden;
        }


        .section-content {
            position: relative;
            z-index: 2;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .section-subtitle {
            font-size: 1.2rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
        }

        .instagram-handle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(188, 24, 136, 0.3);
        }

        .instagram-handle:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(188, 24, 136, 0.4);
            color: white;
        }

        .instagram-icon {
            font-size: 1.2rem;
        }

        .posts-swiper ,.feature-swiper {
            margin-bottom: 3rem;
            overflow: visible;
        }

        .swiper-slide {
            height: auto;
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: var(--primary-deep);
            background: var(--surface);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            margin-top: -22px;
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 18px;
            font-weight: 700;
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background: var(--primary);
            transform: scale(1.1);
        }

        .swiper-pagination {
            position: relative;
            margin-top: 2rem;
        }

        .swiper-pagination-bullet {
            background: var(--primary-deep);
            opacity: 0.3;
            width: 12px;
            height: 12px;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
            background: var(--primary-deep);
        }

        .post-card {
            background: var(--surface);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            height: 100%;
        }

        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        .post-header {
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .profile-pic {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--instagram-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .post-info h6 {
            margin: 0;
            font-weight: 600;
            color: var(--text);
        }

        .post-time {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .post-image {
            width: 100%;
            height: 250px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-emphasis) 50%, var(--secondary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .post-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(1px);
        }

        .post-content {
            padding: 1rem;
        }

        .post-text {
            font-size: 0.9rem;
            color: var(--text);
            margin-bottom: 0.75rem;
            line-height: 1.5;
        }

        .post-hashtags {
            font-size: 0.8rem;
            color: var(--primary-deep);
            font-weight: 500;
        }

        .post-actions {
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
        }

        .action-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.25rem;
            border-radius: 50%;
        }

        .action-btn:hover {
            background: var(--primary);
            transform: scale(1.1);
        }

        .likes-count {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .view-all-btn {
            border: none;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(191, 127, 255, 0.3);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        .view-all-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(191, 127, 255, 0.4);
            color: white;
        }

        .decorative-shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--secondary) 0%, var(--primary) 100%);
            opacity: 0.1;
            z-index: 1;
        }

        .shape-1 {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 5%;
            animation: bounce 6s ease-in-out infinite;
        }

        .shape-2 {
            width: 60px;
            height: 60px;
            top: 70%;
            right: 8%;
            animation: bounce 8s ease-in-out infinite reverse;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 10%;
            animation: bounce 7s ease-in-out infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .text-center {
            text-align: center;
        }

        @media (max-width: 768px) {
            .instagram-section {
                padding: 2rem 1rem;
                margin: 1rem;
                border-radius: 16px;
            }

            .section-title {
                font-size: 2rem;
            }

            .section-subtitle {
                font-size: 1rem;
            }

            .post-image {
                height: 200px;
                font-size: 2rem;
            }

            .decorative-shape {
                display: none;
            }

            .posts-swiper {
            }

            .swiper-button-next,
            .swiper-button-prev {
                width: 36px;
                height: 36px;
                margin-top: -18px;
            }

            .swiper-button-next:after,
            .swiper-button-prev:after {
                font-size: 14px;
            }
        }

/* Base Skeleton Animation */
        @keyframes skeleton-shimmer {
            0% {
                background-position: -200px 0;
            }
            100% {
                background-position: calc(200px + 100%) 0;
            }
        }

        /* Individual Skeleton Components */
        .skeleton-text {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 4px;
            height: 1em;
            margin: 0.5em 0;
            display: block;
        }

        .skeleton-text.short {
            width: 60%;
        }

        .skeleton-text.medium {
            width: 80%;
        }

        .skeleton-text.long {
            width: 100%;
        }

        .skeleton-title {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 6px;
            height: 2em;
            width: 70%;
            margin: 1em 0;
            display: block;
        }

        .skeleton-avatar {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: block;
        }

        .skeleton-avatar.large {
            width: 60px;
            height: 60px;
        }

        .skeleton-avatar.small {
            width: 30px;
            height: 30px;
        }

        .skeleton-image {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 8px;
            width: 100%;
            height: 200px;
            display: block;
        }

        .skeleton-image.small {
            height: 120px;
        }

        .skeleton-image.large {
            height: 300px;
        }

        .skeleton-button {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 25px;
            height: 44px;
            width: 120px;
            display: inline-block;
        }

        .skeleton-button.wide {
            width: 200px;
        }

        .skeleton-button.small {
            height: 32px;
            width: 80px;
            border-radius: 16px;
        }

        .skeleton-card {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 16px;
            height: 300px;
            width: 100%;
            display: block;
        }

        .skeleton-card.small {
            height: 200px;
        }

        .skeleton-card.large {
            height: 400px;
        }

        /* Skeleton Line (for multiple text lines) */
        .skeleton-line {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 4px;
            height: 1em;
            margin: 0.3em 0;
            display: block;
        }

        /* Skeleton Circle (for icons, badges) */
        .skeleton-circle {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: inline-block;
        }

        .skeleton-circle.large {
            width: 48px;
            height: 48px;
        }

        /* Skeleton Rectangle (for various shapes) */
        .skeleton-rect {
            background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
            background-size: 200px 100%;
            animation: skeleton-shimmer 2s infinite;
            border-radius: 8px;
            height: 40px;
            width: 100%;
            display: block;
        }

        /* Hide original content when skeleton is active */
        .skeleton-active {
            position: relative;
        }

        .skeleton-active > *:not([class*="skeleton"]) {
            visibility: hidden;
        }