/* PARA BÉBÉ E-commerce Website Styles */

/* Fonts are loaded in the header: prefer local WOFF2 files (assets/fonts/Inter-*.woff2, LobsterTwo-*.woff2) with a Google Fonts fallback. */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
}

/* Color Palette Variables */
:root {
    --primary-green: #00CED1; /* turquoise */
    --dark-green: #008B8B; /* darker turquoise */
    --light-green: #E0FFFF; /* very light turquoise */
    --accent-green: #48D1CC; /* accent turquoise */
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #ffffff; /* keep overall white background */
    --white: #ffffff;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* Header Styles */
.header {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.header .header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 20px; /* more breathing room between icon and text */
    margin-right: 18px; /* push navigation away from the logo */
    text-decoration: none;
}

/* Stronger header-specific spacing to avoid nav overlapping logo and force subtitle on one line */
header .logo { gap: 28px !important; margin-right: 20px !important; }
header .nav { margin-left: 20px !important; }
/* allow the logo text to shrink so it doesn't push the search off-screen */
header .logo-text { min-width: 0 !important; max-width: 240px !important; overflow: hidden !important; }
header .logo-text span { white-space: nowrap !important; display: inline-block !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 240px !important; }

/* Make nav links compress and ensure flex children can shrink (prevents overflow) */
header .nav-links { gap: 1rem !important; flex: 0 1 auto !important; min-width: 0 !important; }
header .header-content { gap: 12px !important; padding-right: 1rem !important; align-items: center !important; }

/* Constrain the header search so it never extends beyond the viewport */
header .search-container { flex: 0 1 220px !important; max-width: 220px !important; min-width: 120px !important; margin-left: 12px !important; }
header .search-input { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

@media (min-width: 1400px) {
    /* allow a bit more room on very wide screens */
    header .search-container { flex: 0 1 280px !important; max-width: 280px !important; }
}

.logo-icon {
    font-size: 2.8rem;
    background: transparent;
    width: 96px;
    aspect-ratio: 1/1;
    min-height: 96px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    box-shadow: none;
    overflow: visible; position: relative; box-sizing: border-box; padding:0; border:none;
}

.logo-icon .site-logo { border-radius: 0 !important; transform: translate(-50%,-50%) scale(1) !important; width:auto; height:100%; object-fit:contain; background:transparent !important; }

/* Temporary: increase contrast/saturation for testing (option B) */
.logo-icon .site-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: contain !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    -webkit-filter: saturate(1.4) contrast(1.12) brightness(1);
    filter: saturate(1.4) contrast(1.12) brightness(1);
    transition: filter 0.2s ease, transform 0.2s ease;
    will-change: filter, transform;
} 
@media (max-width: 768px) {
    .logo-icon { width: 64px; aspect-ratio:1/1; min-height:64px; padding:0 }
    .logo-icon .site-logo { transform: translate(-50%,-50%) scale(1); height: 100%; width:auto; object-fit:contain }
}     

.logo-text h1 {
    /* Site title: single line and violet color */
    color: #6D28D9; /* violet */
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    white-space: nowrap; /* prevent breaking into two lines */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px; /* limit width to avoid layout overflow */
    display: inline-block;
}

@media (max-width: 768px) {
    .logo-text h1 {
        font-size: 1.25rem;
        max-width: 160px;
    }
}

.logo-text span {
    color: var(--light-green);
    font-size: 0.95rem;
    font-weight: 400;
    display: block; /* keep subtitle on its own line */
    white-space: nowrap; /* prevent wrapping into two lines */
    overflow: hidden;
    text-overflow: ellipsis; /* truncate if too long */
    max-width: 240px; /* limit width so it doesn't overflow header */
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-left: 8px; /* small extra gap in addition to .logo's margin-right */
}

/* Responsive: allow subtitle to wrap on very small screens and reduce spacing */
@media (max-width: 768px) {
    .logo { gap: 10px; margin-right: 8px; }
    .logo-text span { display: block; white-space: normal; max-width: 160px; font-size: 0.85rem; }
    .nav { margin-left: 6px; gap: 1rem; }
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex: 0 1 auto; /* don't stretch too wide or shrink to 0 */
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.search-container {
    position: relative;
    /* Cap the search width and allow it to shrink when space is tight */
    flex: 0 1 320px; /* don't grow to fill all space, but shrink if needed */
    min-width: 160px;
    max-width: clamp(180px, 30vw, 420px); /* responsive cap */
    margin-left: 1rem; /* small gap from nav links */
}

.search-input {
    width: 100%;
    padding: 0.6rem 0.9rem 0.6rem 3rem; /* slightly reduced padding to avoid overflow */
    border: none;
    border-radius: 50px;
    background: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    background: white;
}

/* Header-specific safety overrides to avoid clipping on narrow viewports */
header .header-content { overflow: visible !important; }
header .search-container { flex: 0 1 320px !important; min-width: 140px !important; max-width: 420px !important; }
header .search-input { padding-right: 1rem !important; }

@media (max-width: 992px) {
    /* make search lighter and narrower on medium screens */
    header .search-container { max-width: 280px !important; }
}

@media (max-width: 768px) {
    /* hide the big search on mobile (mobile menu contains a search) */
    .search-container { display: none !important; }
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-green);
    font-size: 1.1rem;
}

.cart-icon {
    position: relative;
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cart-icon:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.admin-link {
    color: white;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.06);
    font-weight: 600;
}

.admin-link:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-2px);
}


.header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-icon {
    font-size: 2.5rem;
}

/* Force circular header logo (safety override) */
header .logo .logo-icon { width: 96px !important; height: 96px !important; aspect-ratio: 1/1 !important; border-radius: 50% !important; padding:6px !important; box-sizing: border-box !important; }
header .logo .logo-icon .site-logo { width:100% !important; height:100% !important; transform: translate(-50%,-50%) scale(1) !important; border-radius:50% !important; object-fit: cover !important; }
@media (max-width:768px){ header .logo .logo-icon{width:64px !important;height:64px !important;padding:4px !important} }

.logo-text h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.logo-text p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

/* Search Bar */
.search-bar {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.2);
    border-radius: 25px;
    padding: 0.5rem 1rem;
    backdrop-filter: blur(10px);
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0.5rem;
    color: var(--white);
    width: 200px;
}

.search-bar input::placeholder {
    color: rgba(255,255,255,0.7);
}

.search-bar button {
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.5rem;
}

/* Cart Icon */
.cart-icon {
    position: relative;
    background: rgba(255,255,255,0.2);
    padding: 0.75rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.cart-icon:hover {
    background: rgba(255,255,255,0.3);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Categories Navigation */
.categories-nav {
    background: var(--light-beige);
    padding: 1rem 0;
    border-bottom: 1px solid var(--soft-green);
}

.categories-nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.categories-list {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.category-link {
    color: var(--dark-gray);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.category-link:hover,
.category-link.active {
    background: var(--soft-green);
    color: var(--white);
    border-color: var(--soft-green);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--soft-green) 0%, var(--subtle-blue) 50%, var(--light-beige) 100%);
    padding: 4rem 0;
    text-align: center;
    color: var(--dark-gray);
}

/* Video background for hero */
.hero-section .hero-video-container {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0; /* below overlay and content */
    pointer-events: none;
    overflow: hidden;
}

/* Make the video fill the container and ensure colors are unmodified */
.hero-section .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: none !important; /* force no color/brightness transform */
    background: transparent !important;
    pointer-events: none;
} 

/* On small screens, fit by width to avoid tall cropping */
@media (max-width: 768px) {
    .hero-section .hero-video {
        width: 100%;
        height: auto;
    }
}

/* Remove overlay pseudo-element to reveal video colors */
.hero-section::before {
    display: none !important;
    content: none !important;
}
.hero .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-gray);
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--medium-gray);
}

/* Hero title zoom-in animation */
.hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    color: var(--dark-gray);
    transform-origin: center;
    /* Normal duration = 1s, with 600ms entry delay */
    animation: zoomIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 600ms;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(8px);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* Mobile responsive tweaks */
@media (max-width: 600px) {
    /* Show a lightweight version of the video on mobile but constrain height to avoid large downloads/layout issues */
    .hero-section .hero-video {
        display: block !important;
        width: 100%;
        height: auto;
        max-height: 360px;
        object-fit: cover;
    }

    /* Use poster as additional fallback background on very small screens */
    .hero-section::before {
        background: url('../assets/images/para-bebe-poster.jpg') center/cover no-repeat;
        background-size: cover;
        z-index: 0; /* behind content */
    }

    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
        animation: none;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-content {
        max-width: 92%;
        padding: 0 1rem;
    }

    /* Ensure desktop nav is hidden on mobile to avoid duplicate menu */
    @media (max-width: 768px) {
        .nav-links { display: none !important; }
        .mobile-menu-btn { display: block !important; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
    }

    /* Anchor hero CTA at the bottom of the video on small screens */
    .hero-section {
        position: relative;
    }
    .hero-section .hero-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        display: flex;
        justify-content: center;
        z-index: 3;
        padding: 0 1rem;
    }
    .hero-section .hero-cta {
        padding: 0.9rem 1.2rem;
        font-size: 1rem;
        border-radius: 28px;
        background: var(--primary-green);
        color: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    /* Make nav stack and be touch-friendly */
    .nav {
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        text-align: center;
    }

    .nav-link {
        padding: 0.6rem 0.8rem;
        border-radius: 8px;
    }

    .cta-button, .admin-link {
        width: 100%;
        display: block;
    }

    /* Compact header for mobile */
    .header .header-content {
        padding: 0 1rem;
    }

    .logo-text h1 { font-size: 1.25rem; }
}

.cta-button {
    display: inline-block;
    background: var(--soft-green);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(168, 213, 186, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 213, 186, 0.4);
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Product Categories Section */
.product-categories {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark-gray);
    text-align: center;
    margin-bottom: 2rem;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
    justify-items: center;
}

/* Full circular category tile */
.category-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 220px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 18px 40px rgba(15,23,42,0.06);
    padding: 1rem;
    text-align: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.category-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 28px 70px rgba(15,23,42,0.12);
    border-color: rgba(0,128,85,0.06);
}

.category-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
    overflow: hidden;
    transition: transform 0.25s ease;
}

.category-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.category-card h3 {
    margin-top: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.category-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.category-link-btn {
    display: inline-block;
    color: var(--soft-green);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-link-btn:hover {
    color: var(--subtle-blue);
}

/* New modern rectangular category button (icon on left + label on right) */
/* Categories cards: modern vertical card with centered icon, title and count */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.category-item { list-style: none; }


/* Rectangular category card with left thumbnail and right meta */
.category-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.06) !important;
    border: 1px solid rgba(16,185,129,0.08) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    color: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.category-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,0.10) !important; }

/* Stronger grouping border when focused/active to emphasize the trio (thumb + title + count) */
.category-card:focus-within,
.category-card.active {
    border-color: rgba(16,185,129,0.14) !important;
    box-shadow: 0 14px 36px rgba(16,185,129,0.06) !important;
}

.category-thumb {
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, var(--primary-green), var(--dark-green)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(2,6,23,0.06) !important, inset 0 -6px 12px rgba(0,0,0,0.04) !important;
    flex: 0 0 72px !important;
}

.category-thumb img { width: 56px; height: 56px; object-fit: contain; display:block; }

.category-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.category-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); text-align: left; }
.category-count { font-size: 0.9rem; color: var(--text-light); text-align: left; }

/* Responsive: stack vertically on small screens */
@media (max-width: 640px) {
    .category-card { flex-direction: column !important; align-items: center !important; padding: 12px !important; }
    .category-thumb { margin-bottom: 8px !important; }
    .category-meta { align-items: center !important; text-align: center !important; }
}

/* Frame shadow for category thumbnail: subtle frame and hover lift */
.category-card .category-thumb {
    box-shadow: 0 6px 18px rgba(2,6,23,0.06) !important, inset 0 -6px 12px rgba(0,0,0,0.04) !important;
    background: #fff !important;
}
.category-card:hover .category-thumb {
    box-shadow: 0 12px 32px rgba(2,6,23,0.10) !important, inset 0 -6px 12px rgba(0,0,0,0.04) !important;
    transform: translateY(-2px);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .categories-grid { grid-template-columns: 1fr; }
}

/* Strongest overrides: ensure no outer white card is visible for category anchors */
.categories-grid .category-item,
.categories-grid .category-item > a.category-card,
.categories-grid .category-item > a.category-card > .category-icon {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.categories-grid .category-item,
.categories-grid .category-item > a.category-card {
    width: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* If previous styles created a white rounded container via :before or other pseudo elements, hide them */
.categories-grid .category-item > a.category-card::before,
.categories-grid .category-item > a.category-card::after {
    display: none !important;
}

/* Re-apply visible border/frame for category cards: stronger, more specific to override legacy resets */
.categories-grid .category-item > a.category-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(16,185,129,0.08) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.06) !important;
}


/* Override any legacy circular category styles so the new rectangular design is used */
.categories-section .category-item .category-card {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}

.categories-section .category-icon,
.categories-section .category-icon::after,
.categories-section .category-icon .emoji {
    display: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
}

/* If any page still uses .category-icon as the thumbnail, make it a small square instead of a large circle */
.categories-section .category-left,
.categories-section .category-item .category-left {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Ensure categories-grid uses the rectangular card layout and doesn't get overridden */
.categories-section .categories-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; align-items: start !important; }
.categories-section .category-item { margin: 6px 0 !important; }

/* Strong overrides to remove any legacy large circular white backgrounds */
.categories-section .category-icon,
.categories-section .category-icon::after,
.categories-section .category-icon *,
.categories-section .category-bg,
.categories-section .category-card .category-icon,
.categories-section .category-card .category-bg {
    display: none !important;
    visibility: hidden !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Ensure our left thumbnail (category-left) is visible and positioned */
.categories-section .category-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    margin-right: 12px !important;
}

/* Fallback: if any template still outputs a circle wrapper, collapse it to a small square */
.categories-section .category-item .circle-wrapper,
.categories-section .category-item .large-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* Featured Products */
.featured-products {
    margin-bottom: 3rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid var(--light-beige);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-color: var(--soft-green);
}

.product-image {
    height: 200px;
    background: linear-gradient(135deg, var(--soft-green), var(--subtle-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-image img {
    max-height: 80%;
    max-width: 80%;
    object-fit: contain;
}

.product-image .emoji {
    font-size: 4rem;
}

.product-info {
    padding: 1.5rem;
}

.product-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 0.5rem;
}

.product-description {
    color: var(--medium-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--soft-green);
    margin-bottom: 1rem;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stars {
    color: #ffd700;
}

.rating-text {
    color: var(--medium-gray);
    font-size: 0.9rem;
}

.add-to-cart-btn {
    width: 100%;
    background: var(--primary-green);
    color: var(--white);
    border: 2px solid transparent;
    padding: 0.75rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-decoration: none;
}

.add-to-cart-btn i { color: var(--white); }

.add-to-cart-btn:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.add-to-cart-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 206, 209, 0.12);
}

.add-to-cart-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* Force-safe rules to avoid overrides on small screens or other styles */
button.add-to-cart-btn, .add-to-cart-btn {
    background: var(--primary-green) !important;
    color: var(--white) !important;
    min-height: 44px;
    min-width: 84px;
    -webkit-appearance: none;
}

.add-to-cart-btn i { color: var(--white) !important; }

/* Ensure the button remains a flex item and shows its content */
.add-to-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Strong enforcement for product-actions context (fix mobile overrides) */

/* Ensure `.btn-view` looks like a real button everywhere (similar products, lists, admin small buttons) */
.btn-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    min-width: 84px;
    background: var(--primary-green);
    color: var(--white);
    border: 2px solid var(--primary-green);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.18s ease;
    box-shadow: 0 6px 12px rgba(2,6,23,0.04);
}

.btn-view i { color: var(--white); }

.btn-view:hover {
    background: var(--dark-green);
    border-color: var(--dark-green);
    color: var(--white);
} 

.product-actions .add-to-cart-btn,
.product-actions > button.add-to-cart-btn {
    background-color: var(--primary-green) !important;
    background-image: none !important;
    border: 2px solid var(--primary-green) !important;
    color: var(--white) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.09) !important;
    padding: 0.75rem 1rem !important;
    min-width: 90px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-actions .add-to-cart-btn:hover {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

/* Style the 'Voir' button to match layout and be clearly visible */
.product-actions .btn-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    min-width: 84px;
    background: var(--primary-green);
    color: var(--white);
    border: 2px solid var(--primary-green);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.18s ease;
    box-shadow: 0 6px 12px rgba(2,6,23,0.04);
}
.product-actions .btn-view:hover { background: var(--dark-green); border-color: var(--dark-green); color: var(--white); }

.product-actions .btn-view i { color: var(--text-dark); }

.product-actions .btn-view:hover {
    background: var(--bg-light);
    border-color: var(--primary-green);
    color: var(--primary-green);
}

/* Make action buttons behave better on small screens */
@media (max-width: 480px) {
    .product-actions { gap: 0.5rem; }
    .product-actions .btn-view, .product-actions .add-to-cart-btn { flex: 1 1 auto; min-width: 0; }
    .product-actions .btn-view { white-space: nowrap; padding: 0.6rem 0.9rem; }

    /* Ensure add-to-cart has visible green background on small screens */
    .product-actions .add-to-cart-btn {
        background-color: var(--primary-green) !important;
        background-image: none !important;
        color: var(--white) !important;
        border-color: var(--primary-green) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.09) !important;
        min-width: 84px !important;
        padding: 0.6rem 0.9rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* If a global rule forces button background to white, override it here */
    button.add-to-cart-btn, .add-to-cart-btn {
        background-color: var(--primary-green) !important;
        background-image: none !important;
        color: var(--white) !important;
    }
}


/* Promotional Banner */
.promo-banner {
    background: linear-gradient(135deg, var(--subtle-blue), var(--soft-green));
    color: var(--white);
    padding: 3rem 0;
    text-align: center;
    margin: 3rem 0;
    border-radius: 15px;
}

.promo-banner h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.promo-banner p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Header Content */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
}

/* Filters */
.filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Product Details */
.product-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Product Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
    justify-items: center;
}

/* Full circular category tile */
.category-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 220px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 18px 40px rgba(15,23,42,0.06);
    padding: 1rem;
    text-align: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.category-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 28px 70px rgba(15,23,42,0.12);
    border-color: rgba(0,128,85,0.06);
}

.category-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
    overflow: hidden;
    transition: transform 0.25s ease;
}

.category-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.category-card h3 {
    margin-top: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.category-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.category-link-btn {
    display: inline-block;
    color: var(--soft-green);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-link-btn:hover {
    color: var(--subtle-blue);
}

/* Promotional Banner */
.promo-banner {
    background: linear-gradient(135deg, var(--subtle-blue), var(--soft-green));
    color: var(--white);
    padding: 3rem 0;
    text-align: center;
    margin: 3rem 0;
    border-radius: 15px;
}

.promo-banner h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.promo-banner p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Footer */
.footer {
    background: var(--dark-gray);
    color: var(--white);
    padding: 3rem 0 1rem;
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--soft-green);
}

.footer-section p,
.footer-section a {
    color: #cccccc;
    text-decoration: none;
    margin-bottom: 0.5rem;
    display: block;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--soft-green);
}

/* Admin button in footer */
.footer-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: var(--primary-green);
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.footer-admin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16,185,129,0.12);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
} 

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    color: var(--white);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--soft-green);
}

.footer-bottom {
    border-top: 1px solid #555;
    padding-top: 1rem;
    text-align: center;
    color: #cccccc;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 1rem;
    }

    .nav {
        width: 100%;
        justify-content: space-between;
    }

    .search-bar input {
        width: 150px;
    }

    .categories-list {
        gap: 1rem;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-links {
        display: none;
    }

    .search-bar input {
        width: 120px;
    }

    .categories-list {
        justify-content: center;
        gap: 0.5rem;
    }

    .category-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states for accessibility */
.nav-link:focus,
.category-link:focus,
.cta-button:focus,
.add-to-cart-btn:focus {
    outline: 2px solid var(--subtle-blue);
    outline-offset: 2px;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Notification styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease-out;
}

.notification.success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    border-left: 4px solid #059669;
}

.notification.error {
    background: #ff4757;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Admin Dashboard layout */
.stats-grid {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin: 1.25rem 0;
}

.stat-card {
    flex: 1;
    background: var(--white);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.stat-title {
    font-size: 0.95rem;
    color: var(--text-light);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0.25rem;
}

.stat-change {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.35rem;
}

.stat-icon {
    font-size: 1.8rem;
    color: var(--primary-green);
    background: rgba(0,0,0,0.03);
    padding: 0.55rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tables-grid {
    display: grid;
    /* Force tables to stack vertically so "Stock faible" appears below "Dernières commandes" */
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.table-card {
    background: var(--white);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
    .stats-grid {
        flex-direction: column;
    }
    .tables-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra helpers for categories */
.categories-section .category-icon .emoji {
    font-size: 2.6rem !important;
    line-height: 1;
}

/* Contact page styles */
.contact-section { padding: 4rem 0; background: linear-gradient(135deg,#f8fafc,#f1f5f9); }
.contact-section .container { max-width: 900px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.contact-section h1 { font-size: 2.25rem; margin-bottom: 0.5rem; }
.contact-section .lead { color: var(--text-light); max-width: 700px; margin: 0 auto 1.5rem; }
.contact-form { margin-top: 1.25rem; text-align: left; background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); }
.contact-form .form-row { margin-bottom: 0.9rem; }
.contact-form label { display:block; font-weight:600; margin-bottom:0.45rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width:100%; padding:0.8rem 1rem; border-radius:8px; border:1px solid rgba(0,0,0,0.08); font-size:0.95rem; }
.contact-form textarea { resize:vertical; min-height:120px; }
.contact-form .btn { display:inline-block; background:var(--primary-green); color:#fff; padding:0.85rem 1.1rem; border-radius:8px; border:none; cursor:pointer; }
.alert { padding:0.85rem 1rem; border-radius:8px; margin-bottom:1rem; }
.alert.success { background:#ecfdf5; border:1px solid #bbf7d0; color:#064e3b; }
.alert.error { background:#fff1f2; border:1px solid #fecaca; color:#7f1d1d; }


/* Entrance animation helpers (staggered left/right slide-in) */
.category-card { opacity: 0; transform: translateX(0); --delay: 0ms; }
.category-card.from-left { transform: translateX(-22px); }
.category-card.from-right { transform: translateX(22px); }
.category-card.in-view { opacity: 1; transform: translateX(0) !important; }
@keyframes slideFromLeft { 0% { opacity:0; transform: translateX(-22px);} 60% { opacity:1; transform: translateX(6px);} 100% { transform: translateX(0);} }
@keyframes slideFromRight { 0% { opacity:0; transform: translateX(22px);} 60% { opacity:1; transform: translateX(-6px);} 100% { transform: translateX(0);} }
.category-card.from-left.in-view { animation: slideFromLeft .6s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--delay, 0ms); }
.category-card.from-right.in-view { animation: slideFromRight .6s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--delay, 0ms); }

/* product / stat animated entrance (avoid forced reflow by using classes + CSS var delay) */
.product-card, .stat-card { opacity: 0; transform: translateY(20px); --delay: 0ms; transition: transform .6s ease, opacity .6s ease; transition-delay: var(--delay); }
.product-card.in-view, .stat-card.in-view { opacity: 1; transform: translateY(0); }

/* Hover sweeping ring inside the circular thumb */
.category-icon { position: relative; }
.category-icon::after {
    content: '';
    position: absolute;
    inset: 6px; /* small inset so the ring sits inside the thumb */
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(6,95,70,0.25) 30%, rgba(6,95,70,0.6) 50%, rgba(6,95,70,0.25) 70%, transparent 100%);
    transform: translateX(-120%);
    opacity: 0;
}
@keyframes ringSweep { 0% { transform: translateX(-120%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
.category-card:hover .category-icon::after { animation: ringSweep 1s ease-in-out forwards; opacity: 1; }

/* Mobile tweaks: show full logo inside circular thumb */
@media (max-width: 768px) {
    .category-card { width: 160px !important; }
    /* remove padding so thumbnail can expand to full circle */
    .category-icon { width: 96px !important; height: 96px !important; padding: 0; display:flex; align-items:center; justify-content:center; }

    /* Make the image fill the circular frame completely on mobile / tablet */
    .category-thumb {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        margin: 0;
        /* Slightly zoom images to avoid visible transparent padding inside some images */
        transform: scale(1.06);
    }

    /* Slightly smaller emoji on mobile */
    .category-icon .emoji { font-size: 2rem; }

    .category-card h3 { font-size: 0.95rem; }
    .category-card p { font-size: 0.8rem; }
}

/* Background-image variant for category icons (show full logo without cropping; may leave some space) */
.category-icon.category-bg {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    /* remove inner content spacing */
    display:block;
}

/* If you want a slight zoom to crop small logos that have white space */
.category-icon.category-bg { transform: scale(1.0); }


/* Apply product-image style behavior to category circles so thumbnails center and size correctly */
.category-icon {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    position: relative;
    overflow: hidden;
}

.category-thumb {
    width: auto !important;
    height: 100% !important;
    max-width: 72% !important;
    max-height: 72% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

/* Mobile: optimize category thumbnail display */
@media (max-width: 600px) {
    .category-icon {
        width: 180px !important;
        height: 180px !important;
        padding: 0 !important;
    }

    .category-thumb {
        max-width: 65% !important;
        max-height: 65% !important;
        object-fit: contain !important;
    }
}

/* Category-specific circle colors (blue, green, medecin) */

/* Blue */
.cat-bleu .category-icon,
.cat-bleu .category-icon.category-bg {
    background-image: linear-gradient(135deg,#3B82F6 0%, #60A5FA 100%) !important;
    color: #ffffff;
}
.cat-bleu .category-icon.category-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,0.55) 0%, rgba(96,165,250,0.45) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* Green */
.cat-vert .category-icon,
.cat-vert .category-icon.category-bg {
    background-image: linear-gradient(135deg,#10B981 0%, #34D399 100%) !important;
    color: #ffffff;
}
.cat-vert .category-icon.category-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16,185,129,0.55) 0%, rgba(52,211,153,0.45) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* Medecin */
.cat-medecin .category-icon,
.cat-medecin .category-icon.category-bg {
    background-image: linear-gradient(135deg,#0EA5A4 0%, #34B3B0 100%) !important;
    color: #ffffff;
}
.cat-medecin .category-icon.category-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(14,165,164,0.55) 0%, rgba(52,179,176,0.45) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* Icons/colors: place icon above overlays and use dark icons on white inner circle */
.category-card .category-icon .emoji,
.category-card .category-icon i {
    color: #0f172a; /* dark for contrast on white inner circle */
    position: relative; /* so it sits above overlay */
    z-index: 2;
}

/* Slightly enhance contrast for the small inner circle */
.category-icon {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
}

/* If a category has an image background, ensure it sits behind the overlay */
.category-icon.category-bg {
    background-size: cover !important;
    background-position: center center !important;
}

/* Outer circle colors for category cards (default gradients) */
.category-card.cat-bleu { background: linear-gradient(135deg,#E6F3FF 0%, #DBEEFF 100%); }
.category-card.cat-vert { background: linear-gradient(135deg,#ECFDF5 0%, #DCFCE7 100%); }
.category-card.cat-medecin { background: linear-gradient(135deg,#E6FAF9 0%, #D1F6F4 100%); }

/* When an uploaded image exists, show the category photo across the outer circle but ensure the whole image is visible */
.category-card.has-outer-img.cat-bleu { background-image: var(--outer-image), linear-gradient(135deg,#E6F3FF 0%, #DBEEFF 100%); background-size: contain, cover; background-position: center center, center; background-repeat: no-repeat; background-blend-mode: normal, overlay; background-color: #ffffff; }
.category-card.has-outer-img.cat-vert { background-image: var(--outer-image), linear-gradient(135deg,#ECFDF5 0%, #DCFCE7 100%); background-size: contain, cover; background-position: center center, center; background-repeat: no-repeat; background-blend-mode: normal, overlay; background-color: #ffffff; }
.category-card.has-outer-img.cat-medecin { background-image: var(--outer-image), linear-gradient(135deg,#E6FAF9 0%, #D1F6F4 100%); background-size: contain, cover; background-position: center center, center; background-repeat: no-repeat; background-blend-mode: normal, overlay; background-color: #ffffff; }

/* Make the inner ring translucent so the outer image is visible */
.category-card.has-outer-img .category-icon.inner-ring {
    background: transparent !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display:block;
    border: 6px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 18px rgba(2,6,23,0.06) inset;
    z-index:2;
}

/* Ensure outer card keeps circular shape and shadow */
.category-card {
    border-radius: 50% !important;
    box-shadow: 0 8px 30px rgba(2,6,23,0.06);
    padding: 28px 20px;
    background-clip: padding-box;
}

/* Make inner icon circle white when no category image; otherwise show image with overlay */
.category-card .category-icon:not(.category-bg) {
    background: #ffffff !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
    z-index:2;
}

/* If category has an image, ensure the image is visible and not cropped */
.category-card .category-icon.category-bg {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display:block;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
}

/* Default overlay visible for bg images; color overlays per .cat-... rules */
.category-card .category-icon.category-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1; /* sits above image but below emoji */
    pointer-events: none;
    display:block;
}

/* Make background-image fallback element fill the circle (only used when an uploaded image is present) */
.category-card .category-icon.category-bg .category-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 0; /* behind overlay */
}

/* Slight tweak: hide the default placeholder from repeating visual artifacts (placeholder is used only as background if no uploaded image exists) */
.category-card .category-icon.category-bg { background-color: transparent !important; }

/* Ensure emoji/icons remain above overlays (if present) */
.category-card .category-icon .emoji,
.category-card .category-icon i {
    position: relative;
    z-index: 2;
}