/* ============================================
   Shop Enhancements - Makeuart Marketplace
   ============================================ */

:root {
    --shop-primary: #f97316;
    --shop-primary-dark: #ea580c;
    --shop-primary-darker: #c2410c;
    --shop-gold: #fbbf24;
    --shop-gold-dark: #f59e0b;
    --shop-gradient: linear-gradient(135deg, #f97316, #ea580c);
    --shop-gradient-hover: linear-gradient(135deg, #ea580c, #c2410c);
    --shop-gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
    --shop-gradient-soft: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.04));
    --shop-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shop-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shop-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
    --shop-shadow-cta: 0 8px 20px rgba(249, 115, 22, 0.35);
    --shop-shadow-cta-hover: 0 12px 28px rgba(249, 115, 22, 0.5);
    --shop-radius: 12px;
    --shop-radius-lg: 18px;
    --shop-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-hero, .boutique-hero, .shop-banner {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    padding: 80px 20px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 32px !important;
}
.shop-hero h1, .boutique-hero h1, .shop-banner h1 {
    font-size: 2.75rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.shop-hero p, .boutique-hero p {
    font-size: 1.15rem !important;
    color: rgba(255,255,255,0.95) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.category-card, .category-grid > a, .category-grid > div {
    background: #fff !important;
    border-radius: var(--shop-radius) !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: var(--shop-shadow-sm) !important;
    transition: var(--shop-transition) !important;
    text-decoration: none !important;
    color: #1f2937 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.category-card::after, .category-grid > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--shop-gradient) !important;
    transform: scaleX(0) !important;
    transition: transform 0.4s ease !important;
}
.category-card:hover, .category-grid > a:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shop-shadow-md) !important;
    color: var(--shop-primary-dark) !important;
}
.category-card:hover::after, .category-grid > a:hover::after {
    transform: scaleX(1) !important;
}
.category-card h3, .category-card .category-name {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    transition: color 0.3s !important;
}
.category-card:hover h3 {
    color: var(--shop-primary-dark) !important;
}
.category-card .product-count, .category-card small {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

.product-card {
    background: #fff !important;
    border-radius: var(--shop-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shop-shadow-sm) !important;
    transition: var(--shop-transition) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shop-shadow-md) !important;
}
.product-card .product-image, .product-card img {
    transition: transform 0.5s ease !important;
}
.product-card:hover .product-image, .product-card:hover img {
    transform: scale(1.05) !important;
}
.product-card-image-wrapper {
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
}
.product-card .product-name, .product-card h3 {
    font-weight: 600 !important;
    margin: 12px 16px 8px !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
}
.product-card .product-price, .product-card .price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--shop-primary-dark) !important;
    margin: 0 16px 12px !important;
}
.product-card .product-price-old, .product-card .price-old {
    text-decoration: line-through !important;
    color: #9ca3af !important;
    font-size: 0.9rem !important;
    margin-right: 8px !important;
}

.product-badge, .badge-promo, .badge-new, .badge-sale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: var(--shop-gradient) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.4) !important;
    text-transform: uppercase !important;
}
.product-badge.badge-pro, .badge-pro {
    background: var(--shop-gradient-gold) !important;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4) !important;
}

.btn-shop-primary, .btn-add-to-cart, .btn-checkout, .shop-btn-cta {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: var(--shop-transition) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: var(--shop-shadow-cta) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.btn-shop-primary:hover, .btn-add-to-cart:hover, .btn-checkout:hover, .shop-btn-cta:hover {
    background: var(--shop-gradient-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shop-shadow-cta-hover) !important;
    color: #fff !important;
}
.btn-shop-outline, .btn-shop-secondary {
    background: transparent !important;
    color: var(--shop-primary-dark) !important;
    border: 2px solid var(--shop-primary) !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: var(--shop-transition) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-shop-outline:hover, .btn-shop-secondary:hover {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.shop-filters, .shop-sidebar {
    background: #fff !important;
    border-radius: var(--shop-radius) !important;
    padding: 24px !important;
    box-shadow: var(--shop-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.shop-filters input[type="text"], .shop-filters input[type="search"], .shop-filters select,
.shop-sidebar input[type="text"], .shop-sidebar select {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
    background: #fff !important;
}
.shop-filters input:focus, .shop-filters select:focus,
.shop-sidebar input:focus, .shop-sidebar select:focus {
    border-color: var(--shop-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}
.shop-sidebar h3, .shop-filters h3 {
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #f3f4f6 !important;
}
.shop-sidebar .filter-item.active, .shop-sidebar a.active {
    background: var(--shop-gradient-soft) !important;
    border-left: 3px solid var(--shop-primary) !important;
    padding-left: 12px !important;
    color: var(--shop-primary-dark) !important;
    font-weight: 600 !important;
}

.shop-breadcrumb, .breadcrumb-shop {
    padding: 16px 0 !important;
    font-size: 0.9rem !important;
    color: #6b7280 !important;
}
.shop-breadcrumb a, .breadcrumb-shop a {
    color: var(--shop-primary-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.shop-breadcrumb a:hover, .breadcrumb-shop a:hover {
    color: var(--shop-primary-darker) !important;
    text-decoration: underline !important;
}

.product-detail-wrap, .product-detail {
    background: #fff !important;
    border-radius: var(--shop-radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--shop-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.product-detail-image img, .product-detail-gallery img {
    border-radius: var(--shop-radius) !important;
    transition: transform 0.4s !important;
}
.product-detail-name, .product-detail h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
}
.product-detail-price {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--shop-primary-dark) !important;
    margin-bottom: 24px !important;
}
.quantity-input {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    width: 80px !important;
    text-align: center !important;
}
.quantity-input:focus {
    border-color: var(--shop-primary) !important;
    outline: none !important;
}

.cart-item {
    background: #fff !important;
    border-radius: var(--shop-radius) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--shop-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: var(--shop-transition) !important;
}
.cart-item:hover {
    box-shadow: var(--shop-shadow-md) !important;
    transform: translateY(-2px) !important;
}
.cart-summary {
    background: var(--shop-gradient-soft) !important;
    border-radius: var(--shop-radius-lg) !important;
    padding: 28px !important;
    border: 1px solid rgba(249, 115, 22, 0.15) !important;
}
.cart-summary h3 {
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    color: #1f2937 !important;
}
.cart-summary .total-line {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--shop-primary-dark) !important;
    border-top: 2px solid rgba(249, 115, 22, 0.2) !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
}
.btn-remove, .cart-item .remove-btn {
    background: transparent !important;
    color: #dc2626 !important;
    border: none !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}
.btn-remove:hover {
    transform: scale(1.15) !important;
    color: #b91c1c !important;
}

.checkout-form, .checkout-summary {
    background: #fff !important;
    border-radius: var(--shop-radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--shop-shadow-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.checkout-form input, .checkout-form select, .checkout-form textarea {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
    background: #fff !important;
}
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus {
    border-color: var(--shop-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}
.checkout-form label {
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #374151 !important;
    display: block !important;
}

.order-success {
    text-align: center !important;
    padding: 64px 20px !important;
}
.order-success .success-icon {
    width: 100px !important;
    height: 100px !important;
    background: var(--shop-gradient) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 3rem !important;
    margin-bottom: 24px !important;
    box-shadow: var(--shop-shadow-cta) !important;
    animation: shopBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
@keyframes shopBounce {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.order-success h1 {
    color: var(--shop-primary-dark) !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.empty-state {
    text-align: center !important;
    padding: 64px 20px !important;
    color: #6b7280 !important;
}
.empty-state .empty-icon {
    font-size: 4rem !important;
    color: #d1d5db !important;
    margin-bottom: 16px !important;
}
.empty-state h3 {
    color: #1f2937 !important;
    margin-bottom: 8px !important;
}

.pagination, nav.pagination ul {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 32px 0 !important;
}
.pagination .page-item .page-link, .pagination a, .pagination span {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    color: var(--shop-primary-dark) !important;
    text-decoration: none !important;
    border: 1px solid #e5e7eb !important;
    transition: var(--shop-transition) !important;
    background: #fff !important;
}
.pagination .page-item.active .page-link, .pagination .active a, .pagination .active span {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--shop-shadow-cta) !important;
}
.pagination .page-link:hover, .pagination a:hover {
    background: var(--shop-gradient-soft) !important;
    border-color: var(--shop-primary) !important;
}

[data-aos], .shop-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-aos].aos-animate, .shop-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.product-grid > *, .row.product-row > [class^="col"], .category-grid > * {
    opacity: 0;
    transform: translateY(16px);
    animation: shopFadeInUp 0.6s ease forwards;
}
.product-grid > *:nth-child(1),  .category-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.product-grid > *:nth-child(2),  .category-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.product-grid > *:nth-child(3),  .category-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.product-grid > *:nth-child(4),  .category-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.product-grid > *:nth-child(5),  .category-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.product-grid > *:nth-child(6),  .category-grid > *:nth-child(6)  { animation-delay: 0.30s; }
.product-grid > *:nth-child(7),  .category-grid > *:nth-child(7)  { animation-delay: 0.35s; }
.product-grid > *:nth-child(8),  .category-grid > *:nth-child(8)  { animation-delay: 0.40s; }
.product-grid > *:nth-child(9),  .category-grid > *:nth-child(9)  { animation-delay: 0.45s; }
.product-grid > *:nth-child(10), .category-grid > *:nth-child(10) { animation-delay: 0.50s; }

@keyframes shopFadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .shop-hero h1, .boutique-hero h1, .shop-banner h1 { font-size: 2rem !important; }
    .shop-hero, .boutique-hero, .shop-banner { padding: 56px 16px !important; }
    .product-detail-wrap, .product-detail { padding: 20px !important; }
    .checkout-form, .checkout-summary { padding: 20px !important; }
    .product-detail-name, .product-detail h1 { font-size: 1.5rem !important; }
    .product-detail-price { font-size: 1.4rem !important; }
}

/* ============================================
   Generic button overrides for shop pages
   Targets buttons used in views that may use
   .btn / .btn-primary from base theme.
   ============================================ */
body:has(.shop-hero) .btn-primary,
body:has(.shop-categories) .btn-primary,
body:has(.cart-summary) .btn-primary,
body:has(.checkout-form) .btn-primary,
body:has(.product-detail) .btn-primary,
body:has(.product-detail-wrap) .btn-primary,
body:has(.order-success) .btn-primary,
.shop-hero ~ * .btn-primary,
.shop-categories .btn-primary,
.cart-page .btn-primary,
.cart-summary .btn-primary,
.checkout-form .btn-primary,
.empty-state .btn-primary,
.empty-state .btn,
.shop-empty .btn,
.cart-empty .btn,
.empty-state a.btn,
.shop-page .btn-primary {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: var(--shop-transition) !important;
    box-shadow: var(--shop-shadow-cta) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body:has(.shop-hero) .btn-primary:hover,
body:has(.shop-categories) .btn-primary:hover,
body:has(.cart-summary) .btn-primary:hover,
body:has(.checkout-form) .btn-primary:hover,
.empty-state .btn:hover,
.shop-empty .btn:hover,
.cart-empty .btn:hover,
.empty-state a.btn:hover,
.shop-page .btn-primary:hover {
    background: var(--shop-gradient-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shop-shadow-cta-hover) !important;
}

/* Buttons inside cart/empty-state that may use generic .btn or .btn-secondary */
.cart-page a.btn,
.cart-empty a,
.cart-empty button,
a.discover-shop,
a.return-shop,
a[href*="/shop"].btn {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--shop-transition) !important;
    box-shadow: var(--shop-shadow-cta) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.cart-page a.btn:hover,
.cart-empty a:hover,
a.discover-shop:hover,
a.return-shop:hover,
a[href*="/shop"].btn:hover {
    background: var(--shop-gradient-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shop-shadow-cta-hover) !important;
}

/* Empty state CTAs in shop pages — visual fallback */
.shop-page .text-center > .btn,
.shop-page .text-center > a.btn,
section.shop-categories ~ section .btn {
    background: var(--shop-gradient) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shop-shadow-cta) !important;
}

/* Category page breadcrumb uses dark bg in current theme — soften it */
.shop-page .breadcrumb,
nav.breadcrumb,
.breadcrumb-shop {
    background: var(--shop-gradient-soft) !important;
    border-radius: var(--shop-radius) !important;
    padding: 12px 20px !important;
    color: #6b7280 !important;
}
.shop-page .breadcrumb a,
nav.breadcrumb a,
.breadcrumb-shop a {
    color: var(--shop-primary-dark) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.shop-page .breadcrumb a:hover,
nav.breadcrumb a:hover {
    color: var(--shop-primary-darker) !important;
    text-decoration: underline !important;
}

/* ============================================
   High-specificity .btn override for shop routes
   Targets generic .btn that links to /shop or /cart
   ============================================ */
html body a.btn[href*="/shop"],
html body a.btn[href*="/cart"],
html body a.btn[href*="/checkout"],
html body a.btn[href*="/order"] {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    background-image: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
}
html body a.btn[href*="/shop"]:hover,
html body a.btn[href*="/cart"]:hover,
html body a.btn[href*="/checkout"]:hover,
html body a.btn[href*="/order"]:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    background-image: linear-gradient(135deg, #ea580c, #c2410c) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.5) !important;
    text-decoration: none !important;
}

/* Within shop pages, all .btn that is a child of .shop-page or shop sections */
html body .shop-page .btn,
html body .shop-categories .btn,
html body .shop-content .btn,
html body .product-detail-wrap .btn,
html body .cart-page .btn,
html body .checkout-form .btn,
html body .empty-state .btn {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .shop-page .btn:hover,
html body .empty-state .btn:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.5) !important;
}

/* ============================================
   Image-Rich Category Cards
   ============================================ */
.category-grid-rich {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    margin-top: 24px !important;
}

.category-card-rich {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #1f2937 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    cursor: pointer !important;
}

.category-card-rich:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.18) !important;
    color: #ea580c !important;
}

/* Image area with photo + emoji overlay */
.category-card-image {
    position: relative !important;
    height: 160px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    transition: transform 0.5s ease !important;
}

.category-card-rich:hover .category-card-image {
    transform: scale(1.08) !important;
}

/* Gradient overlay (per-category color via CSS var --cat-gradient) */
.category-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: var(--cat-gradient, linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(234, 88, 12, 0.75))) !important;
    transition: opacity 0.4s ease !important;
    opacity: 0.9 !important;
    z-index: 1 !important;
}

.category-card-rich:hover .category-card-overlay {
    opacity: 0.7 !important;
}

/* Big emoji centered over image */
.category-card-emoji {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 3.5rem !important;
    z-index: 2 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)) !important;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    pointer-events: none !important;
}

.category-card-rich:hover .category-card-emoji {
    transform: translate(-50%, -50%) scale(1.15) rotate(-5deg) !important;
}

/* Body */
.category-card-body {
    padding: 18px 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    background: #fff !important;
    position: relative !important;
    z-index: 2 !important;
}

.category-card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    transition: color 0.3s !important;
    min-height: 2.6em !important;
    display: flex !important;
    align-items: center !important;
}

.category-card-rich:hover .category-card-title {
    color: #ea580c !important;
}

/* Badge with count */
.category-card-badge {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #ea580c !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05)) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    transition: all 0.3s !important;
}

.category-card-rich:hover .category-card-badge {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}

.category-card-badge small {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
}

/* Arrow indicator */
.category-card-arrow {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #ea580c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    z-index: 3 !important;
    opacity: 0 !important;
    transform: translateX(-8px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.category-card-rich:hover .category-card-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .category-grid-rich {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 16px !important;
    }
    .category-card-image { height: 130px !important; }
    .category-card-emoji { font-size: 2.5rem !important; }
    .category-card-title { font-size: 0.9rem !important; min-height: 2.4em !important; }
    .category-card-body { padding: 14px 12px !important; }
}

/* Section title with underline accent (used in shop home) */
.section-title {
    text-align: center !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    position: relative !important;
}

/* Stagger entrance for rich cards */
.category-grid-rich > * {
    opacity: 0;
    transform: translateY(20px);
    animation: shopFadeInUp 0.6s ease forwards;
}
.category-grid-rich > *:nth-child(1)  { animation-delay: 0.05s; }
.category-grid-rich > *:nth-child(2)  { animation-delay: 0.10s; }
.category-grid-rich > *:nth-child(3)  { animation-delay: 0.15s; }
.category-grid-rich > *:nth-child(4)  { animation-delay: 0.20s; }
.category-grid-rich > *:nth-child(5)  { animation-delay: 0.25s; }
.category-grid-rich > *:nth-child(6)  { animation-delay: 0.30s; }
.category-grid-rich > *:nth-child(7)  { animation-delay: 0.35s; }
.category-grid-rich > *:nth-child(8)  { animation-delay: 0.40s; }
.category-grid-rich > *:nth-child(9)  { animation-delay: 0.45s; }
.category-grid-rich > *:nth-child(10) { animation-delay: 0.50s; }

/* ============================================
   FIX: image area width 0 — force full width
   ============================================ */
.category-card-rich {
    align-items: stretch !important;
}
.category-card-image {
    width: 100% !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
}
.category-card-body {
    width: 100% !important;
    align-self: stretch !important;
}
.category-card-overlay {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   ENRICHMENT — pattern + glow + sparkles
   ============================================ */

/* Decorative dots pattern as SVG data URI overlay */
.category-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='1.5' fill='rgba(255,255,255,0.25)'/></svg>");
    background-size: 24px 24px;
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
    animation: shopPatternDrift 30s linear infinite;
}

@keyframes shopPatternDrift {
    from { background-position: 0 0; }
    to   { background-position: 100px 100px; }
}

/* Soft glow behind emoji (radial gradient) */
.category-card-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 65%);
    z-index: 1;
    pointer-events: none;
    transition: width 0.5s, height 0.5s, opacity 0.5s;
    opacity: 0.85;
}

.category-card-rich:hover .category-card-image::after {
    width: 180px;
    height: 180px;
    opacity: 1;
}

/* Bigger emoji + soft white outline */
.category-card-emoji {
    font-size: 4rem !important;
    z-index: 3 !important;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Sparkles - decorative SVG dots that float */
.category-card-rich::before {
    content: '✨';
    position: absolute;
    top: 18px;
    left: 18px;
    font-size: 0.95rem;
    z-index: 4;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.category-card-rich:hover::before {
    opacity: 0.9;
    transform: scale(1) translateY(-2px);
}

/* Subtle edge highlight on body */
.category-card-body {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%) !important;
    border-top: 3px solid transparent !important;
    background-clip: padding-box !important;
}
.category-card-rich:hover .category-card-body {
    background: linear-gradient(180deg, #fff 0%, rgba(249, 115, 22, 0.04) 100%) !important;
}

/* Reduce overlay slightly so the SVG dots show through */
.category-card-overlay {
    opacity: 0.88 !important;
}

/* ============================================
   PREMIUM CATEGORY CARDS V3 — Pro design
   ============================================ */

/* Section header with eyebrow + title + subtitle */
.shop-categories .section-header {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.section-eyebrow {
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #ea580c !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05)) !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

.shop-categories .section-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.5px !important;
}
.shop-categories .section-title::after {
    display: none !important;
}

.section-subtitle {
    color: #6b7280 !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Grid */
.category-grid-rich {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 28px !important;
    margin-top: 32px !important;
}

/* === The premium card === */
.category-card-pro {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #1f2937 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    isolation: isolate !important;
}

.category-card-pro::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--cat-gradient) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    z-index: -1 !important;
    border-radius: 20px !important;
}

.category-card-pro:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--cat-accent, rgba(249,115,22,0.2)) !important;
}

/* Visual area (top, with gradient bg + SVG icon) */
.category-card-visual {
    position: relative !important;
    height: 180px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: var(--cat-gradient) !important;
}

.category-card-visual-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(0,0,0,0.15), transparent 50%);
    pointer-events: none !important;
    transition: transform 0.6s ease !important;
}

.category-card-pro:hover .category-card-visual-bg {
    transform: scale(1.1) rotate(2deg) !important;
}

/* SVG icon (replaces emoji) */
.category-card-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 72px !important;
    height: 72px !important;
    z-index: 2 !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.category-card-pro:hover .category-card-icon {
    transform: translate(-50%, -50%) scale(1.12) !important;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)) !important;
}

/* Glow ring around icon */
.category-card-glow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 110px !important;
    height: 110px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: all 0.5s ease !important;
}

.category-card-pro:hover .category-card-glow {
    width: 150px !important;
    height: 150px !important;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) !important;
}

/* Content area */
.category-card-content {
    padding: 22px 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 !important;
    background: #fff !important;
    position: relative !important;
    z-index: 2 !important;
}

.category-card-name {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    transition: color 0.3s !important;
}

.category-card-pro:hover .category-card-name {
    color: #ea580c !important;
}

.category-card-meta {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}

.category-card-count {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--cat-accent, #ea580c) !important;
    line-height: 1 !important;
    transition: color 0.3s !important;
}

.category-card-pro:hover .category-card-count {
    background: var(--cat-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.category-card-count-label {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* "Découvrir →" CTA */
.category-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #ea580c !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    transition: gap 0.3s ease, color 0.3s !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
}

.category-card-cta svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
}

.category-card-pro:hover .category-card-cta {
    gap: 14px !important;
    color: #c2410c !important;
}

.category-card-pro:hover .category-card-cta svg {
    transform: translateX(4px) !important;
}

/* Stagger entrance */
.category-grid-rich > .category-card-pro {
    opacity: 0;
    transform: translateY(20px);
    animation: shopFadeInUp 0.6s ease forwards;
}
.category-grid-rich > .category-card-pro:nth-child(1)  { animation-delay: 0.05s; }
.category-grid-rich > .category-card-pro:nth-child(2)  { animation-delay: 0.10s; }
.category-grid-rich > .category-card-pro:nth-child(3)  { animation-delay: 0.15s; }
.category-grid-rich > .category-card-pro:nth-child(4)  { animation-delay: 0.20s; }
.category-grid-rich > .category-card-pro:nth-child(5)  { animation-delay: 0.25s; }
.category-grid-rich > .category-card-pro:nth-child(6)  { animation-delay: 0.30s; }
.category-grid-rich > .category-card-pro:nth-child(7)  { animation-delay: 0.35s; }
.category-grid-rich > .category-card-pro:nth-child(8)  { animation-delay: 0.40s; }
.category-grid-rich > .category-card-pro:nth-child(9)  { animation-delay: 0.45s; }
.category-grid-rich > .category-card-pro:nth-child(10) { animation-delay: 0.50s; }

/* Hide old elements (legacy) */
.category-card-emoji, .category-card-arrow, .category-card-overlay, .category-card-image::before, .category-card-image::after { display: none !important; }
.category-card-rich:hover::before { display: none !important; }
.category-card-rich {
    /* Reset old hover effects */
}

/* Responsive */
@media (max-width: 768px) {
    .category-grid-rich {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 16px !important;
    }
    .category-card-visual { height: 140px !important; }
    .category-card-icon { width: 56px !important; height: 56px !important; }
    .category-card-glow { width: 90px !important; height: 90px !important; }
    .category-card-name { font-size: 0.95rem !important; }
    .category-card-content { padding: 16px 14px !important; }
    .shop-categories .section-title { font-size: 1.75rem !important; }
    .section-subtitle { font-size: 0.9rem !important; }
}

/* ============================================
   FIX V3: full width on flex column children
   ============================================ */
.category-card-pro {
    align-items: stretch !important;
}
.category-card-visual {
    width: 100% !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.category-card-content {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}
.category-card-visual-bg {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   GRID FIX V4 — 5 colonnes pile sur desktop
   10 catégories = 5×2 sans espace vide
   ============================================ */
.category-grid-rich {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* Tablet : 3 colonnes (3+3+3+1 → on cache le dernier vide via centrage) */
@media (max-width: 1199px) and (min-width: 901px) {
    .category-grid-rich {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Tablet portrait / large mobile : 2 colonnes (2×5 = 10 parfait) */
@media (max-width: 900px) and (min-width: 481px) {
    .category-grid-rich {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Mobile : 2 colonnes serrées (2×5 = 10 parfait) */
@media (max-width: 480px) {
    .category-grid-rich {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .category-card-visual { height: 110px !important; }
    .category-card-icon { width: 48px !important; height: 48px !important; }
    .category-card-name { font-size: 0.85rem !important; min-height: 0 !important; }
    .category-card-content { padding: 14px 12px !important; }
    .category-card-count { font-size: 1.2rem !important; }
    .category-card-cta { font-size: 0.7rem !important; letter-spacing: 0.8px !important; }
}

/* Sur tablet 3 colonnes : la 10ᵉ carte sera seule sur la dernière ligne.
   On la centre au lieu de la laisser en début de ligne. */
@media (max-width: 1199px) and (min-width: 901px) {
    .category-grid-rich > .category-card-pro:last-child:nth-child(3n + 1) {
        grid-column: 2 / 3;
    }
    .category-grid-rich > .category-card-pro:nth-last-child(2):nth-child(3n + 1) {
        grid-column: 1 / 2;
    }
}

/* Réduire un peu les images sur les écrans plus petits pour rester équilibré */
@media (max-width: 1500px) and (min-width: 1200px) {
    .category-card-visual { height: 160px !important; }
    .category-card-icon { width: 64px !important; height: 64px !important; }
}

/* ============================================
   FADING BACKGROUND PATTERNS (per category)
   ============================================ */
.category-card-visual-pattern {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--cat-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.55 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.6s ease, transform 0.8s ease !important;
    animation: shopPatternBreathe 8s ease-in-out infinite !important;
}

@keyframes shopPatternBreathe {
    0%, 100% { opacity: 0.45; transform: scale(1) translateY(0); }
    50%      { opacity: 0.80; transform: scale(1.05) translateY(-3px); }
}

.category-card-pro:hover .category-card-visual-pattern {
    opacity: 0.95 !important;
    transform: scale(1.10) !important;
    animation-play-state: paused !important;
}

.category-card-icon { z-index: 3 !important; }
.category-card-glow { z-index: 2 !important; }
.category-card-visual-bg { z-index: 0 !important; }

.category-card-visual::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.20) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* ============================================
   REAL PHOTOS as backgrounds — fade & ken-burns
   ============================================ */
.category-card-photo {
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--cat-photo) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease !important;
    filter: saturate(1.1) brightness(0.95) !important;
    animation: shopKenBurns 18s ease-in-out infinite alternate !important;
}

@keyframes shopKenBurns {
    0%   { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* The colored gradient overlay sits above the photo, semi-transparent */
.category-card-visual-bg {
    position: absolute !important;
    inset: 0 !important;
    background: var(--cat-gradient) !important;
    z-index: 1 !important;
    transition: opacity 0.5s ease !important;
    mix-blend-mode: multiply !important;
    pointer-events: none !important;
}

/* Hover : photo se révèle plus, gradient s'atténue */
.category-card-pro:hover .category-card-photo {
    transform: scale(1.20) !important;
    filter: saturate(1.25) brightness(1.05) !important;
    animation-play-state: paused !important;
}

.category-card-pro:hover .category-card-visual-bg {
    opacity: 0.65 !important;
}

/* Hide the now-deprecated decorative pattern layer — photos remplacent les patterns */
.category-card-visual-pattern { display: none !important; }

/* Vignette plus marquée pour faire ressortir l'icône sur la photo */
.category-card-visual::after {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%) !important;
    z-index: 2 !important;
}

/* Icon glow (white halo) — renforcé pour rester lisible sur photo */
.category-card-glow {
    z-index: 3 !important;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 60%) !important;
}

.category-card-icon {
    z-index: 4 !important;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55)) !important;
}