@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.tail-container { font-family: 'Inter', system-ui, sans-serif; }
.logo-font { font-family: 'Space Grotesk', sans-serif; }

.product-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .product-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    }
}
.swiper-slide img, .swiper-slide video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.vertical-media { aspect-ratio: 9 / 16; }
.dark .product-card { background-color: #18181b; }
.cart-bounce { animation: cartBounce 0.6s ease; }
.line-clamp-2-custom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes cartBounce { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }

.premium-action-buttons { width: 100%; }
.premium-expand-btn {
    position: relative; display: flex; align-items: center; width: 100%; min-height: 58px;
    border-radius: 9999px; overflow: hidden; text-decoration: none; isolation: isolate;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, padding 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.premium-expand-btn:active { transform: scale(0.98); }
.premium-expand-btn__text { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; line-height: 1; transition: opacity 0.3s ease, max-width 0.3s ease, transform 0.3s ease; }
.premium-expand-btn__icon-wrap { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.premium-expand-btn__icon { width: 42px; height: 42px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }

.premium-cart-btn { background: linear-gradient(180deg,#ffffff 0%,#f4f4f5 100%); color: #111; border: 1px solid rgba(255,255,255,0.72); }
.premium-cart-btn:hover { background: linear-gradient(180deg,#ffffff 0%,#ececef 100%); box-shadow: 0 16px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.premium-cart-btn .premium-expand-btn__icon { background: rgba(17,17,17,0.06); color: #111; }

.premium-custom-btn { color: #fff; border: 1px solid rgba(255,255,255,0.12); background-color: rgba(0,0,0,0.65); }
.premium-custom-btn:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
.premium-custom-btn .premium-expand-btn__icon { color: #fff; background-color: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

@media (max-width:767px) {
    .premium-expand-btn { justify-content: space-between; padding: 8px 10px 8px 22px; }
    .premium-expand-btn__text { opacity: 1; max-width: 220px; transform: translateX(0); }
}
@media (min-width:768px) {
    .premium-action-buttons { width: 100%; }
    .premium-expand-btn { width: 58px; min-width: 58px; justify-content: center; padding: 8px; }
    .premium-expand-btn__text { position: absolute; left: 22px; top: 50%; transform: translateY(-50%) translateX(-8px); max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
    /* Expanded state: full width with text visible */
    .premium-expand-btn.is-expanded { width: 100%; min-width: 100%; justify-content: space-between; padding: 8px 10px 8px 22px; }
    .premium-expand-btn.is-expanded .premium-expand-btn__text { max-width: 300px; opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
    .premium-expand-btn.is-expanded .premium-expand-btn__icon { transform: scale(1.03); }
    .premium-expand-btn:not(.is-expanded) .premium-expand-btn__icon-wrap { margin: 0 auto; }
    .premium-expand-btn.is-expanded .premium-expand-btn__icon-wrap { margin-left: auto; margin-right: 0; }
    /* Hidden state: other buttons fade out */
    .premium-expand-btn.is-hidden { opacity: 0; width: 0 !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden; pointer-events: none; }
}

.dark .premium-cart-btn { background: linear-gradient(180deg,#fafafa 0%,#e8e8ea 100%); color: #111; border: 1px solid rgba(255,255,255,0.55); }
.dark .premium-cart-btn .premium-expand-btn__icon { background: rgba(17,17,17,0.08); color: #111; }

.favorite-btn { width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); color: #fefefe; box-shadow: 0 10px 25px rgba(0,0,0,.18); transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.favorite-btn:hover { transform: scale(1.08); }
.dark .favorite-btn { background: #ffffff80; color: #fafafa; }
.favorite-btn.is-favorite { background: #ff0050; color: #fff; }
.favorite-pop { animation: favoritePop .35s ease; }
@keyframes favoritePop { 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* Chatbot */
#chatbot-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; }
#chatbot-bubble { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--tik-tok-cyan), var(--tik-tok-pink)); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: transform 0.2s; }
#chatbot-bubble:hover { transform: scale(1.1); }
#chatbot-panel { display: none; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 120px); background: #18181b; border: 1px solid #27272a; border-radius: 1.5rem; overflow: hidden; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.4); }
#chatbot-panel.open { display: flex; }
#chatbot-messages { flex: 1; overflow-y: auto; padding: 16px; }
.chat-msg { margin-bottom: 12px; max-width: 85%; }
.chat-msg.bot { margin-right: auto; }
.chat-msg.user { margin-left: auto; }
.chat-msg .bubble { padding: 10px 14px; border-radius: 1rem; font-size: 0.875rem; line-height: 1.5; }
.chat-msg.bot .bubble { background: #27272a; color: #e4e4e7; border-bottom-left-radius: 4px; }
.chat-msg.user .bubble { background: linear-gradient(135deg, var(--tik-tok-cyan), var(--tik-tok-pink)); color: #000; border-bottom-right-radius: 4px; font-weight: 500; }