/*
 * =============================================
 * Mom & Mihi — Complete Brand Theme
 * "Where Motherhood Meets Elegance"
 *
 * USAGE: Replace assets/css/mom-mihi-theme.css
 * entirely with this file.
 *
 * Load LAST in layouts/app.blade.php:
 * <link rel="stylesheet" href="{{ asset('assets/css/mom-mihi-theme.css') }}">
 * =============================================
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
    --mm-primary: #4d2871;   /* Honey Flower */
    --mm-dark:    #4d2871;
    --mm-mid:     #7e4d9f;   /* Dark Lavender */
    --mm-accent:  #a780b9;   /* Wisteria */
    --mm-light:   #d4b5d6;   /* Thistle */
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.sub-title,
.section-title,
.subtitle {
    font-family: 'Syne', sans-serif;
    font-weight: 400;
}

button,
.default-btn,
.optional-btn {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
}

.navbar,
.navbar a,
.main-menu {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
}

.product-title,
.products-content h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 500;
}

p {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    line-height: 1.7;
}

/* =============================================
   GLOBAL BRAND OVERRIDES
   ============================================= */

/* Top header bar */
.top-header {
    background-color: var(--mm-dark) !important;
}

/* Bootstrap primary button */
.btn-primary {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 #7e4d9f;
    --bs-btn-border-color:       #4d2871;
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #4d2871;
    --bs-btn-hover-border-color: #4d2871;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          #4d2871;
    --bs-btn-active-border-color:#4d2871;
    --bs-btn-disabled-color:     #fff;
    --bs-btn-disabled-bg:        #4d2871;
    --bs-btn-disabled-border-color:#4d2871;
}

/* Default button hover */
.default-btn:hover {
    background-color: var(--mm-dark) !important;
    color: #ffffff !important;
    border-color: var(--mm-dark) !important;
}

/* Optional button */
.optional-btn {
    border-color: var(--mm-primary) !important;
    color: var(--mm-primary) !important;
}
.optional-btn:hover {
    background-color: var(--mm-primary) !important;
    color: #ffffff !important;
    border-color: var(--mm-primary) !important;
}

/* Link hover */
a:hover {
    color: #be6ad1 !important;
}

/* Sale tag */
.single-products-box .products-image .sale-tag,
.products-box .products-image .sale-tag,
.single-productsBox .products-image .sale-tag {
    background-color: var(--mm-primary) !important;
}

/* New tag */
.single-products-box .products-image .new-tag,
.products-box .products-image .new-tag,
.single-productsBox .products-image .new-tag {
    background-color: var(--mm-mid) !important;
}

/* Discount ribbon */
.products-box .products-discount span,
.single-productsBox .products-discount span {
    background-color: var(--mm-primary) !important;
}
.products-box .products-discount span::before,
.products-box .products-discount span::after,
.single-productsBox .products-discount span::before,
.single-productsBox .products-discount span::after {
    background: var(--mm-primary) !important;
}

/* Sizing guide table header */
.sizing-guide-table table thead {
    background-color: var(--mm-dark) !important;
}

/* Scrollbar */
::-webkit-scrollbar          { width: 6px; }
::-webkit-scrollbar-track    { background: var(--mm-light); }
::-webkit-scrollbar-thumb    { background: var(--mm-accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mm-primary); }

/* Text selection */
::selection      { background: var(--mm-primary); color: #fff; }
::-moz-selection { background: var(--mm-primary); color: #fff; }

/* =============================================
   MARQUEE STRIP
   (between top-header and navbar)
   ============================================= */
.mm-marquee-strip {
    background: linear-gradient(90deg, var(--mm-primary) 0%, var(--mm-mid) 50%, var(--mm-primary) 100%);
    background-size: 200% 100%;
    animation: mmMarqueeBg 6s linear infinite;
    color: #fff;
    font-size: 13px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    overflow: hidden;
    white-space: nowrap;
    padding: 9px 0;
    position: relative;
    z-index: 999;
}

@keyframes mmMarqueeBg {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}

.mm-marquee-track {
    display: inline-block;
    animation: mmMarqueeScroll 30s linear infinite;
}

.mm-marquee-strip:hover .mm-marquee-track {
    animation-play-state: paused;
}

.mm-marquee-track span {
    padding: 0 6px;
    opacity: 0.95;
}

.mm-marquee-track strong {
    color: var(--mm-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

@keyframes mmMarqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =============================================
   HERO BANNER
   Landscape image — cover on all screen sizes.
   No empty space, no stretch.
   ============================================= */

/* Kill all ghost spacing from Owl Carousel */
.home-slides,
.home-slides.owl-carousel,
.home-slides .owl-stage-outer,
.home-slides .owl-stage,
.home-slides .owl-item {
    line-height: 0 !important;
    font-size: 0 !important;
    margin-bottom: 0 !important;
}

.home-slides.owl-carousel {
    margin-bottom: 0 !important;
}

/* Hide owl dots — they add space below */
.home-slides .owl-dots {
    display: none !important;
}

/* Banner — cover fills the box exactly, ratio matches your landscape image */
.home-slides .main-banner {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: transparent !important;
    width: 100% !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 0 !important;
    /* Desktop: your banner looks ~8:3 landscape */
    aspect-ratio: 8 / 3;
}

/* Tablet — slightly taller */
@media (max-width: 991px) {
    .home-slides .main-banner {
        aspect-ratio: 16 / 7;
    }
}

/* Mobile — keep landscape ratio, image covers fully, no empty space */
@media (max-width: 575px) {
    .home-slides .main-banner {
        aspect-ratio: 16 / 9;
        background-position: center center !important;
    }
}

/* Remove all height from d-table inner wrappers */
.home-slides .main-banner .d-table,
.home-slides .main-banner .d-table-cell {
    display: block !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* =============================================
   CATEGORY AUTO-CAROUSEL
   Gladxe-style landscape cards,
   CSS infinite auto-scroll, drag to browse,
   no arrow buttons.
   ============================================= */
.mm-category-scroll-section {
    padding: 48px 0 56px;
    overflow: hidden;
}

/* Section heading */
.mm-cat-section-title {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 16px;
}

.mm-cat-section-title .sub-title {
    display: block;
    color: var(--mm-mid);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
}

.mm-cat-section-title h2 {
    font-family: 'Syne', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Outer container — clips overflow, no scrollbar */
.mm-cat-auto-outer {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.mm-cat-auto-outer.dragging {
    cursor: grabbing;
}

/* Scrolling track */
.mm-cat-auto-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 10px 24px 24px;
    animation: mmCatScroll 35s linear infinite;
    will-change: transform;
}

/* Pause on hover or drag */
.mm-cat-auto-outer:hover .mm-cat-auto-track,
.mm-cat-auto-outer.dragging .mm-cat-auto-track {
    animation-play-state: paused;
}

@keyframes mmCatScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Individual card */
.mm-cat-card {
    flex: 0 0 auto;
    width: 300px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(77, 40, 113, 0.14);
    display: block;
    text-decoration: none !important;
    transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 0.3s ease;
}

.mm-cat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px rgba(77, 40, 113, 0.26);
}

/* Card image */
.mm-cat-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.mm-cat-card:hover img {
    transform: scale(1.06);
}

/* Bottom gradient label — Gladxe signature */
.mm-cat-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 16px 16px;
    background: linear-gradient(to top, rgba(15, 5, 35, 0.88) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* White left-bar accent */
.mm-cat-card-label::before {
    content: '';
    display: inline-block;
    flex: 0 0 4px;
    height: 22px;
    background: #fff;
    border-radius: 3px;
}

.mm-cat-card-label span {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.2px;
}

/* Tablet */
@media (max-width: 991px) {
    .mm-cat-card       { width: 240px; }
    .mm-cat-card img   { height: 185px; }
    .mm-cat-auto-track { gap: 14px; }
}

/* Mobile */
@media (max-width: 575px) {
    .mm-cat-card            { width: 180px; }
    .mm-cat-card img        { height: 150px; }
    .mm-cat-card-label      { padding: 26px 12px 12px; }
    .mm-cat-card-label span { font-size: 12px; }
    .mm-cat-auto-track      { gap: 10px; padding: 8px 12px 16px; }
}

/* Very small phones */
@media (max-width: 380px) {
    .mm-cat-card         { width: 155px; }
    .mm-cat-card img     { height: 128px; }
}

/* =============================================
   ANIMATED FOOTER
   ============================================= */
.footer-area {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        #1f0d3a 0%,
        #2e1254 35%,
        #4d2871 70%,
        #3b1a60 100%
    ) !important;
}

/* Animated mesh overlay */
.footer-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 45% at 15% 25%, rgba(167, 128, 185, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 55% 65% at 85% 75%, rgba(77,  40, 113, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 45% 35% at 55%  5%, rgba(212, 181, 214, 0.10) 0%, transparent 55%);
    animation: mmFooterMesh 9s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes mmFooterMesh {
    0%   { opacity: 0.60; transform: scale(1)    rotate(0deg);    }
    50%  { opacity: 1.00; transform: scale(1.06) rotate(0.8deg);  }
    100% { opacity: 0.75; transform: scale(0.97) rotate(-0.5deg); }
}

/* Soft orb — top right */
.footer-area::after {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 128, 185, 0.14) 0%, transparent 72%);
    top: -100px;
    right: -100px;
    animation: mmOrb 12s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes mmOrb {
    0%   { transform: translate(0, 0)       scale(1);   }
    100% { transform: translate(-50px, 55px) scale(1.2); }
}

/* Vertical lines animation */
.footer-area .lines {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-area .lines .line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(201, 168, 212, 0.08) 40%,
        rgba(201, 168, 212, 0.14) 60%,
        transparent 100%
    ) !important;
    animation: mmLinePulse 5s ease-in-out infinite;
}
.footer-area .lines .line:nth-child(2) { animation-delay: 1.6s; }
.footer-area .lines .line:nth-child(3) { animation-delay: 3.2s; }

@keyframes mmLinePulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.9; }
}

/* Content above animations */
.footer-area .container {
    position: relative;
    z-index: 1;
}

/* Shimmer divider */
.footer-area .footer-bottom-area {
    position: relative;
}

.footer-area .footer-bottom-area::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--mm-accent) 30%,
        var(--mm-light)  50%,
        var(--mm-accent) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: mmShimmer 3.5s linear infinite;
    margin-bottom: 28px;
}

@keyframes mmShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Footer newsletter button hover */
.single-footer-widget .footer-newsletter-box button:hover {
    background-color: var(--mm-mid) !important;
    color: #ffffff !important;
}

/* Footer headings — animated underline */
.single-footer-widget h3 {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.single-footer-widget h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 36px;
    background: linear-gradient(90deg, var(--mm-accent), var(--mm-light));
    border-radius: 2px;
    animation: mmHeadingLine 3s ease-in-out infinite;
}

@keyframes mmHeadingLine {
    0%, 100% { width: 36px; opacity: 1;    }
    50%       { width: 68px; opacity: 0.55; }
}

/* Social icon hover */
.footer-area .social-link li a {
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.footer-area .social-link li a:hover {
    transform: translateY(-5px) rotate(-8deg) scale(1.18) !important;
    background: var(--mm-mid) !important;
    box-shadow: 0 8px 20px rgba(126, 77, 159, 0.45) !important;
}

/* Footer links — slide-in arrow */
.footer-area .quick-links li a,
.footer-area .customer-support li a {
    position: relative;
    transition: padding-left 0.25s ease, color 0.25s ease;
}

.footer-area .quick-links li a::before,
.footer-area .customer-support li a::before {
    content: '›';
    position: absolute;
    left: -12px;
    opacity: 0;
    transition: opacity 0.2s, left 0.25s;
    color: var(--mm-accent);
}

.footer-area .quick-links li a:hover,
.footer-area .customer-support li a:hover {
    padding-left: 10px;
    color: var(--mm-light) !important;
}

.footer-area .quick-links li a:hover::before,
.footer-area .customer-support li a:hover::before {
    opacity: 1;
    left: -2px;
}

/* Newsletter button shine sweep */
.footer-area .footer-newsletter-box button {
    position: relative;
    overflow: hidden;
    background: var(--mm-mid) !important;
    border-color: var(--mm-mid) !important;
    transition: background 0.3s ease, transform 0.2s ease;
}

.footer-area .footer-newsletter-box button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.55s ease;
}

.footer-area .footer-newsletter-box button:hover::after { left: 160%; }
.footer-area .footer-newsletter-box button:hover {
    background: var(--mm-primary) !important;
    transform: translateY(-1px);
}

/* Sparkle dots per column */
.footer-area .single-footer-widget {
    position: relative;
}

.footer-area .single-footer-widget::after {
    content: '✦';
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 10px;
    color: var(--mm-light);
    opacity: 0;
    animation: mmSparkle 4s ease-in-out infinite;
}

.footer-area .col-lg-3:nth-child(2) .single-footer-widget::after { animation-delay: 1s; }
.footer-area .col-lg-3:nth-child(3) .single-footer-widget::after { animation-delay: 2s; }
.footer-area .col-lg-3:nth-child(4) .single-footer-widget::after { animation-delay: 3s; }

@keyframes mmSparkle {
    0%, 100% { opacity: 0; transform: scale(0) translateY(0);    }
    50%       { opacity: 0.6; transform: scale(1) translateY(-12px); }
}

/* Discount badge */
.single-products-box .products-image .discount-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff6b6b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

/* Price with discount badge */
.products-content .price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.products-content .price .discount-badge {
    background: #ff6b6b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}