/* Line clamp utility classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure all containers respect viewport width */
.container,
.mx-auto {
    overflow-x: hidden;
}

/* Fix for product page horizontal scrolling */
.product-page {
    overflow-x: hidden;
    max-width: 100vw;
}

/* NOTE: Do not set only overflow-x:hidden on generic .flex — per CSS, overflow-y:visible
   then becomes auto and can draw a spurious vertical scrollbar on flex rows (e.g. product price). */

/* Hide native number input steppers (WebKit/Chrome/Edge) — avoids stray “spinner” UI near prices/headers */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Product page: price row — clip both axes so no phantom scrollbar from overflow-x-only */
.product-price-row {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Fix for color variant buttons */
.color-variant-btn {
    flex-shrink: 0;
    min-width: fit-content;
}

/* Ensure images don't cause overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Poppins Font Face Declarations */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
}

/* Universo Font Face Declarations */
@font-face {
    font-family: 'Universo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Fontspring-DEMO-universo-light.otf') format('opentype');
}

@font-face {
    font-family: 'Universo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Fontspring-DEMO-universo-regular.otf') format('opentype');
}

@font-face {
    font-family: 'Universo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Fontspring-DEMO-universo-bold.otf') format('opentype');
}

:root {
    /* Blue/Beige Palette */
    --brand-50: #f0f4f8;
    --brand-100: #d9e2ec;
    --brand-200: #bcccdc;
    --brand-300: #9fb3c8;
    --brand-400: var(--color-accent);
    --brand-500: var(--color-primary);
    --brand-600: var(--color-highlight);
    --brand-700: var(--color-secondary);
    --brand-800: #152e3f;
    --brand-900: #0f212e;
    --brand: var(--brand-700);

    /* Beige Accent Colors */
    --accent-gold: var(--color-primary);
    --accent-cream: #E8DDD4;
    --accent-deep: var(--color-secondary);
    --accent-bronze: var(--color-highlight);
    --accent-amber: var(--color-primary);
    --accent-champagne: #F5F0EC;
    --neutral-white: #FEFEFE;
    --neutral-charcoal: #1a1a1a;

    /* Blue tone variations */
    --earth-brown: var(--color-primary);
    --earth-beige: var(--color-primary);
    --sage-green: var(--color-highlight);
    --forest-green: var(--color-secondary);
    --mint-green: #bcccdc;
}

.glass {
    backdrop-filter: saturate(180%) blur(12px);
    background: rgba(240, 244, 248, .85);
}

.glass-dark {
    backdrop-filter: saturate(180%) blur(12px);
    background: rgba(27, 60, 83, .7);
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 60, 83, .45);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(27, 60, 83, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(27, 60, 83, 0);
    }
}

.ring-glow {
    animation: pulseGlow 2.5s infinite;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    background-color: var(--brand-600);
}

.btn-primary:hover {
    background-color: var(--brand-700);
}

.btn-primary i {
    margin-right: .5rem;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border: 1px solid var(--brand-200);
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
    color: var(--brand-700);
}

.btn-ghost:hover {
    background-color: var(--brand-50);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    border: 1px solid var(--brand-600);
    color: var(--brand-700);
}

.btn-outline:hover {
    background-color: var(--brand-50);
}

.card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(69, 104, 130, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card:hover {
    box-shadow: 0 12px 24px -12px rgba(27, 60, 83, .25);
    transform: translateY(-2px);
    transition: all .3s;
}

.gradient-hero {
    background-image: radial-gradient(1200px 600px at 10% 0%, rgba(251, 207, 232, .3), transparent), radial-gradient(1000px 500px at 90% 10%, rgba(244, 114, 182, .25), transparent), linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer:after {
    content: "";
    position: absolute;
    inset: -100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shimmerMove 2.2s ease-in-out infinite;
}

@keyframes shimmerMove {
    100% {
        transform: translateX(100%);
    }
}

.shadow-brand {
    box-shadow: 0 20px 40px -20px rgba(27, 60, 83, .35);
}

/* Carter's-like homepage helpers */
.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

@media (min-width:768px) {
    .section-title {
        font-size: 1.875rem;
    }
}

/* Modern Section Titles with Poppins Font - Dark Golden Theme */
.section-title-modern {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-highlight);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.section-title-modern::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-highlight);
    border-radius: 2px;
}

/* Responsive adjustments for section titles */
@media (min-width: 768px) {
    .section-title-modern {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .section-title-modern {
        font-size: 3rem;
    }
}

/* Universo Section Titles - Clean & Modern */
.beauty-text {
    font-family: 'Universo', sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-highlight);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Optional: Add a variant with the underline decoration */
.beauty-text-decorated {
    font-family: 'Universo', sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--color-highlight);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    padding-bottom: 12px;
}

.beauty-text-decorated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-highlight), transparent);
    border-radius: 2px;
}

.deal-tile {
    position: relative;
    border: 1px solid rgba(69, 104, 130, 0.2);
    padding: 1rem;
    background: #fff;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 7rem;
    transition: box-shadow .2s ease, transform .2s ease;
}

.deal-tile:hover {
    box-shadow: 0 8px 24px -8px rgba(27, 60, 83, .2);
    transform: translateY(-2px);
}

.deal-label {
    font-weight: 600;
    color: var(--color-secondary);
}

.deal-cta {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--color-highlight);
    font-weight: 600;
}

.brand-badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 9999px;
    border: 1px solid rgba(69, 104, 130, 0.3);
    background: #fff;
    color: var(--color-secondary);
    font-size: .875rem;
}

/* Modern Navigation Styles */
.nav-link-modern {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #222;
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    overflow: hidden;
}

.nav-link-modern:hover {
    color: var(--color-secondary);
    background: linear-gradient(135deg, rgba(69, 104, 130, 0.1), rgba(35, 76, 106, 0.1));
    transform: translateY(-1px);
}

.nav-link-modern .nav-link-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-highlight));
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.nav-link-modern:hover .nav-link-indicator {
    width: 80%;
}

.mobile-link-modern {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-secondary);
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(210, 193, 182, 0.3) 100%);
    border: 1px solid rgba(69, 104, 130, 0.15);
    box-shadow: 0 2px 8px rgba(27, 60, 83, 0.08);
    position: relative;
    overflow: hidden;
}

.mobile-link-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(69, 104, 130, 0.1), transparent);
    transition: left 0.5s;
}

.mobile-link-modern:hover::before {
    left: 100%;
}

.mobile-link-modern:hover {
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-highlight) 50%, var(--color-secondary) 100%);
    border-color: rgba(27, 60, 83, 0.3);
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 8px 20px rgba(27, 60, 83, 0.25);
}

.mobile-link-modern i {
    font-size: 1.1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-link-modern:hover i {
    transform: scale(1.2) rotate(5deg);
    -webkit-text-fill-color: var(--color-primary);
}

/* Floating Animation for Stars */
@keyframes floatStars {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(5deg);
    }

    50% {
        transform: translateY(-5px) rotate(-3deg);
    }

    75% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.floating-star {
    animation: floatStars 3s ease-in-out infinite;
}

/* Enhanced Glassmorphism */
.glass-modern {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient Text Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-text-animated {
    background: linear-gradient(-45deg, var(--color-secondary), var(--color-highlight), var(--color-primary), var(--color-highlight));
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Modern Button Hover Effects */
.btn-modern {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-modern:hover::before {
    left: 100%;
}

/* Enhanced Shadow Effects */
.shadow-modern {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.shadow-modern:hover {
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Navbar/link helpers */
.nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-secondary);
}

.nav-link:hover {
    color: var(--color-highlight);
}

.mobile-link {
    display: block;
    color: var(--color-secondary);
}

.mobile-link:hover {
    color: var(--color-highlight);
}

/* Forms */
.form-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.form-input:focus {
    outline: 2px solid rgba(69, 104, 130, .35);
    outline-offset: 1px;
}

.form-label {
    font-size: .75rem;
    color: var(--color-secondary);
}

/* Modern Product Card Enhancements */
.product-card-modern {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.product-card-modern:hover {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(212, 165, 116, 0.1);
    transform: translateY(-8px) scale(1.02);
}

/* Stock Status Animations */
@keyframes stockPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.stock-indicator {
    animation: stockPulse 2s ease-in-out infinite;
}

/* Gradient Button Effects - Blue/Beige Theme */
.btn-gradient {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-highlight) 100%);
    position: relative;
    overflow: hidden;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-gradient:hover::before {
    left: 100%;
}

/* Image Hover Effects */
.product-image-hover {
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-image-hover:hover {
    transform: scale(1.1) rotate(1deg);
    filter: brightness(1.1) contrast(1.05);
}

/* Badge Animations */
@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-2px);
    }
}

.badge-float {
    animation: badgeFloat 3s ease-in-out infinite;
}

/* Quick Action Buttons */
.quick-action-btn {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* Disable hover effects on touch devices to prevent double-tap issue */
@media (hover: none) and (pointer: coarse) {

    /* Product cards - disable ALL hover effects on mobile */
    .group:hover .group-hover\:scale-105,
    .group:hover .group-hover\:scale-110 {
        transform: none !important;
    }

    .group:hover .group-hover\:opacity-100 {
        opacity: 0 !important;
    }

    .group:hover .group-hover\:translate-y-0 {
        transform: translateY(1rem) !important;
    }

    .group:hover .group-hover\:text-gray-800 {
        color: inherit !important;
    }

    /* Disable border and shadow changes on mobile */
    .group:hover.hover\:border-gray-300,
    a.hover\:border-gray-300:hover {
        border-color: rgb(243 244 246) !important;
    }

    .group:hover.hover\:shadow-xl,
    .group:hover.hover\:shadow-2xl,
    a.hover\:shadow-xl:hover,
    a.hover\:shadow-2xl:hover {
        box-shadow: none !important;
    }

    /* Disable transition delays that cause the double-tap feel */
    .group,
    .group * {
        transition-duration: 0s !important;
    }
}

/* Slide-up animation for mobile filter sidebar */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideUp {
    animation: slideUp 0.3s ease-out;
}

/* Hide scrollbar for filter sidebar */
.overflow-y-auto::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.overflow-y-auto {
    scrollbar-width: none;
    -ms-overflow-style: none;
}