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

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 60px;
}

.brand-text {
    color: #333;
    letter-spacing: 2px;
}

.nav-actions .nav-action-btn,
.nav-actions a.nav-action-btn,
.nav-actions button.nav-action-btn {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    border-width: 1px;
}

.nav-actions button.nav-action-btn {
    appearance: none;
    -webkit-appearance: none;
}

.nav-actions .nav-action-btn i {
    font-size: 1.25rem;
    line-height: 1;
}

.nav-actions form {
    display: inline-flex;
    margin: 0;
    line-height: 0;
}

.hero-section {
    height: 70vh;
    position: relative;
    background: center/cover no-repeat;
    animation: fadeIn 1s ease-in;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.category-card {
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-8px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pdp-gallery #productCarousel {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.pdp-main-image {
    width: 100%;
    height: 520px;
    object-fit: contain;
    background: #fff;
}

.pdp-nav {
    width: 18%;
    opacity: 1;
}

.pdp-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    font-size: 1.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}

.pdp-nav:hover .pdp-nav-icon {
    background: #111;
    color: #fff;
    transform: scale(1.05);
}

.pdp-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pdp-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-thumb.active {
    border-color: #111;
}

.pdp-purchase {
    position: sticky;
    top: 1.5rem;
}

.pdp-perks li {
    margin-bottom: 0.35rem;
}

.pdp-perks i {
    margin-right: 0.4rem;
}

.pdp-tab-content {
    font-size: 0.95rem;
    line-height: 1.7;
}

.pdp-spec th {
    width: 40%;
    color: #6c757d;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .pdp-main-image { height: 360px; }
}

.admin-sidebar {
    min-height: calc(100vh - 56px);
    background: #212529;
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.lang-switch .btn {
    min-width: 2.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.lang-switch .btn.active {
    background: #212529;
    border-color: #212529;
    color: #fff;
}

.ig-gradient {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================================
   Mobile-only optimizations (<= 768px).
   These rules add to — and never replace — the desktop styles above.
   They apply only on small screens, so desktop layout is unaffected.
   !important is used only where the markup uses inline styles or Bootstrap
   utility classes that would otherwise win.
   ========================================================================== */
@media (max-width: 768px) {
    /* --- Hero (home) --- */
    .hero-section {
        height: auto !important;
        min-height: 56vh;
        padding: 3rem 0;
        background-position: center !important;
    }

    .hero-section .display-3 {
        font-size: 2rem;
        letter-spacing: 2px !important;
    }

    .hero-section .lead {
        font-size: 1rem !important;
        letter-spacing: 1px !important;
    }

    .hero-section .btn-lg {
        padding: 0.7rem 1.75rem !important;
        letter-spacing: 1px !important;
    }

    /* --- Large display headings on inner pages (Products, CTA, etc.) --- */
    .display-3 { font-size: 2.1rem; }
    .display-4 { font-size: 1.85rem; }
    .display-5 { font-size: 1.6rem; }

    /* --- Tighter vertical rhythm on phones --- */
    section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* --- Roomy card padding becomes phone-friendly --- */
    .category-card .card-body.p-5 {
        padding: 1.75rem 1.25rem !important;
    }

    /* --- Navbar: keep brand + action buttons from crowding --- */
    .navbar-brand.brand-text {
        font-size: 1.15rem !important;
        letter-spacing: 1px;
    }

    .nav-actions {
        gap: 0.35rem !important;
    }

    .nav-actions .nav-action-btn,
    .nav-actions a.nav-action-btn,
    .nav-actions button.nav-action-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .nav-actions .nav-action-btn i {
        font-size: 1.05rem;
    }

    .lang-switch .btn {
        min-width: 2rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    /* --- Touch screens: drop hover-lift transforms that feel sticky --- */
    .product-card:hover,
    .category-card:hover {
        transform: none;
    }

    /* --- Product detail: don't pin the purchase panel on small screens --- */
    .pdp-purchase {
        position: static;
        top: auto;
    }

    /* --- Product detail: smaller carousel nav controls --- */
    .pdp-nav-icon {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.1rem;
    }

    /* --- Product detail thumbnails sized for touch --- */
    .pdp-thumb {
        width: 60px;
        height: 60px;
    }
}