/*
Theme Name: Trend Kart
Theme URI: https://techysudip.com/
Author: techysudip
Author URI: https://techysudip.com/
Description: A fully custom, standalone WordPress theme (no WooCommerce) with its own product catalog, session-based cart, and a step-by-step one-field-per-page checkout flow.
Version: 1.0.1
Text Domain: trend-kart
*/

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7fafc;
    overflow-x: hidden;
}

.fade-in {
    animation: sfFadeIn ease 0.6s;
}
@keyframes sfFadeIn {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

.product-card {
    transition: all 0.3s ease-in-out;
}
.product-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.sf-sidebar {
    position: fixed; top: 0; right: 0; height: 100%; width: 80%; max-width: 320px;
    background-color: #ffffff; z-index: 100; transform: translateX(100%);
    transition: transform 0.3s ease-in-out; box-shadow: -10px 0 20px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
}
.sf-sidebar.open { transform: translateX(0); }

.sf-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); z-index: 90;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.sf-overlay.open { opacity: 1; visibility: visible; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.sf-stepper-btn:disabled { opacity: .5; cursor: not-allowed; }

/* wp_nav_menu() outputs bare <li> items (no <ul> wrapper) so they sit inline
   next to the theme's own links — without this, browsers show a bullet dot
   on each one by default. */
.menu-item {
    list-style: none;
}

/* Custom container width override (uses !important since Tailwind's CDN
   stylesheet is injected after this one and would otherwise win). */
.max-w-lg {
    max-width: 40rem !important;
}