/* Desktop CSS for Home Page (min-width: 1024px) */

/* Global Layout Adjustments */
body {
    background-color: #fdfbfb;
}

.dark body {
    background-color: #1b0d10;
}

/* Center and constrain main content */
#main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 4rem !important;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Header Adjustments */
header {
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    padding: 0.8rem 2rem !important;
    background: #800000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Navigation & Header Visibility */
#bottom-nav {
    display: none !important;
}

#menu-btn {
    display: none !important;
}

#drawer-panel {
    display: none !important;
}

#drawer-overlay {
    display: none !important;
}

#desktop-nav {
    display: flex !important;
}

/* Hero Section on Desktop */
#hero-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

#hero-slider {
    scroll-behavior: smooth;
    gap: 1.5rem;
}

#hero-slider > div {
    height: 380px !important;
    border-radius: 2rem !important;
}

#hero-slider h1 {
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
    margin-bottom: 1.25rem !important;
}

#hero-slider .w-1\/2 {
    width: 58% !important;
    padding-left: 3.5rem !important;
}

#hero-slider button {
    padding: 0.75rem 2rem !important;
    font-size: 0.95rem !important;
    border-radius: 1rem !important;
}

#hero-slider .floating-badge {
    top: 1.5rem !important;
    right: 1.5rem !important;
    padding: 0.5rem 1rem !important;
}

/* Features Grid */
#features-section {
    padding: 1.5rem 0;
}

#features-section .p-4 {
    padding: 1.25rem 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#features-section .p-4:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(128, 0, 0, 0.08);
}

/* Explore By Type Section Desktop */
#explore-type-section {
    padding: 2.5rem 0 1.5rem 0;
}

#cake-categories-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 1.25rem !important;
    overflow: visible !important;
    padding-bottom: 0.5rem;
}

.category-item-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dark .category-item-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.category-item-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(128, 0, 0, 0.3);
    box-shadow: 0 16px 32px -8px rgba(128, 0, 0, 0.15);
}

/* Product & Cake Grids on Desktop */
#random-cakes-grid,
#pastry-grid,
#dessert-grid,
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
}

/* Product Cards Desktop Polish */
.product-item-card,
.cake-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 1.5rem !important;
}

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

/* Video Promo Section on Desktop */
#video-promo-section {
    aspect-ratio: 21/9 !important;
    border-radius: 2.5rem !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Footer Adjustments */
footer {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-bottom: 2rem !important;
}

/* Product Details Sheet (Desktop Modal Mode) */
#product-sheet {
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100 !important;
    padding: 2rem;
}

#product-sheet:not(.hidden) {
    display: flex !important;
}

#product-content {
    position: relative !important;
    width: 600px !important;
    max-width: 90vw;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 1.75rem !important;
    margin: auto;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow-y: auto;
    background-color: white;
}

.dark #product-content {
    background-color: #221013;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#product-content .w-12.h-1\.5 {
    display: none;
}