/* =============================================
   MARLOTA DESIGN SYSTEM
   Color Palette:
    Primary (deep purple):  #3a1b76
    Secondary (gold):       #C9A646
    Neutral dark:           #1E1E1E
    Neutral light:          #FFFFFF
    Accent (lavender):      #E6D9F5
    Extended slate:         #4A4A4A
    Extended ivory:         #F9F6F1
   ============================================= */

/* ---- Google Font (Poppins already loaded via WebFont.js) ---- */

/* =============================================
   GLOBAL OVERRIDES
   Counter weblibrary/css/style.css which sets:
     html { font-size: 10px }
     h1-h5 { font-family: "Jost" }
     a { font-size: 1.5rem; font-family: "Inter" }
     p { font-family: "Inter" }
   All rem values below use px equivalents (16px base).
   ============================================= */
body {
    font-family: 'Poppins', sans-serif;
    color: #1E1E1E;
}

:root {
    --brand-primary: #3a1b76;
    --brand-secondary: #C9A646;
    --brand-neutral-dark: #1E1E1E;
    --brand-neutral-light: #FFFFFF;
    --brand-accent: #E6D9F5;
    --brand-slate: #4A4A4A;
    --brand-ivory: #F9F6F1;

    --mx-space-2: 8px;
    --mx-space-3: 12px;
    --mx-space-4: 16px;
    --mx-space-5: 20px;
    --mx-space-6: 24px;
    --mx-space-7: 28px;
    --mx-space-8: 32px;
    --mx-space-9: 40px;
    --mx-space-10: 48px;
    --mx-space-11: 56px;
    --mx-space-12: 64px;
    --mx-space-13: 72px;
    --mx-space-14: 84px;
    --mx-space-15: 96px;
}

/* Reset anchor properties inside all Marlota-designed sections */
.marlota-header a,
.marlota-hero a,
.marlota-categories a,
.marlota-why a,
.marlota-products-section a,
.marlota-newsletter a,
.marlota-page-hero a,
.marlota-about-who a,
.marlota-core-values a,
.marlota-mission a,
.marlota-contact-section a,
.marlota-cta a,
.marlota-footer a {
    /* font-size: inherit; */
    font-family: 'Poppins', sans-serif;
    color: inherit;
}

/* Reset heading font-family/color inside Marlota sections */
.marlota-header h1, .marlota-header h2, .marlota-header h3, .marlota-header h4, .marlota-header h5,
.marlota-hero h1, .marlota-hero h2, .marlota-hero h3, .marlota-hero h4, .marlota-hero h5,
.marlota-categories h1, .marlota-categories h2, .marlota-categories h3, .marlota-categories h4, .marlota-categories h5,
.marlota-why h1, .marlota-why h2, .marlota-why h3, .marlota-why h4, .marlota-why h5,
.marlota-products-section h1, .marlota-products-section h2, .marlota-products-section h3, .marlota-products-section h4, .marlota-products-section h5,
.marlota-newsletter h1, .marlota-newsletter h2, .marlota-newsletter h3, .marlota-newsletter h4, .marlota-newsletter h5,
.marlota-page-hero h1, .marlota-page-hero h2, .marlota-page-hero h3, .marlota-page-hero h4, .marlota-page-hero h5,
.marlota-about-who h1, .marlota-about-who h2, .marlota-about-who h3, .marlota-about-who h4, .marlota-about-who h5,
.marlota-core-values h1, .marlota-core-values h2, .marlota-core-values h3, .marlota-core-values h4, .marlota-core-values h5,
.marlota-mission h1, .marlota-mission h2, .marlota-mission h3, .marlota-mission h4, .marlota-mission h5,
.marlota-contact-section h1, .marlota-contact-section h2, .marlota-contact-section h3, .marlota-contact-section h4, .marlota-contact-section h5,
.marlota-cta h1, .marlota-cta h2, .marlota-cta h3, .marlota-cta h4, .marlota-cta h5,
.marlota-footer h1, .marlota-footer h2, .marlota-footer h3, .marlota-footer h4, .marlota-footer h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}

/* Reset paragraph font inside Marlota sections */
.marlota-hero p, .marlota-categories p, .marlota-why p, .marlota-products-section p,
.marlota-newsletter p, .marlota-page-hero p, .marlota-about-who p, .marlota-core-values p,
.marlota-mission p, .marlota-contact-section p, .marlota-cta p, .marlota-footer p {
    font-family: 'Poppins', sans-serif;
}

/* Global btn-shop-now (used in header and on About/other pages) */
.btn-shop-now {
    background: #c08c00;
    color: #fff !important;
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: background .2s;
    display: inline-block;
}
.btn-shop-now:hover {
    background: #A88432;
    color: #fff !important;
}

/* =============================================
   HEADER — white sticky navbar
   ============================================= */
.marlota-header {
    background: #fff !important;
    border-top: 10px solid #3a1b76;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: relative;
    z-index: 999;
    overflow: visible;
}

.marlota-header .navbar {
    background: #fff !important;
    border-bottom: 1px solid #eee;
    padding: 2px 0;
    position: relative;
    z-index: 1000;
}

.marlota-header .navbar-nav {
    position: static;
}

.marlota-header .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.marlota-header .nav-link {
    color: #1E1E1E !important;
    font-weight: 500;
    font-size: 18px;
    padding: 6px 4px !important;
    transition: color .2s;
}

.marlota-header .nav-link:hover {
    color: #C9A646 !important;
}

/* Reusable frontend utility classes (replacing inline styles) */
.header-logo-fixed {
    height: 70px;
    width: 250px;
}

.mega-trigger-icon {
    font-size: 11px;
    margin-left: 3px;
}

.header-icon-link {
    color: #1E1E1E !important;
    font-size: 20px;
    padding: 6px 8px !important;
}

.header-cart-link {
    position: relative;
}

.header-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.header-user-icon,
.header-cart-icon {
    color: #3a1b76;
    font-size: 20px;
    line-height: 1;
}

.mobile-cart-link {
    color: #3a1b76;
    position: relative;
    font-size: 24px;
}

.mobile-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #C9A646;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.sidebar-widget-title-custom {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-radius: 5px;
    padding: 10px;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.sidebar-sublist-hidden {
    display: none;
}

.sidebar-subitem {
    background: rgba(230,217,245,.15);
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
}

.sidebar-subitem-na {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
}

.footer-logo-large {
    height: 70px;
    width: 200px;
}

.footer-mobile-cat-icon {
    width: 24px;
    height: 24px;
}

.home-category-fallback {
    height: 160px;
    width: 160px;
    background: #ede8f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #3a1b76;
}

.home-card-slider-margin {
    margin: 0 5px;
}

/* Mobile hamburger button */
.marlota-header .navbar-toggler-marlota {
    background: none;
    border: 2px solid #3a1b76;
    border-radius: 5px;
    padding: 6px 10px;
    cursor: pointer;
    color: #3a1b76;
    font-size: 19px;
}

/* Cart badge in mobile header */
.marlota-header .mobile-cart-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.marlota-header .mobile-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #C9A646;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Sidebar category override to match new purple */
#mySidebar {
    background-color: #3a1b76 !important;
}

#mySidebar .widget-title {
    background: rgba(255,255,255,.15) !important;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

#mySidebar .widget-body li {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

#mySidebar .widget-body li a {
    color: #fff !important;
}

/* =============================================
   HERO SECTION
   ============================================= */
.marlota-hero {
    background: #3a1b76;
    background: linear-gradient(135deg, #3a1b76 0%, #4A4A4A 100%);
    min-height: 492px;
    display: flex;
    align-items: center;
    padding: var(--mx-space-13) 0 80px;
    position: relative;
    overflow: hidden;
}

.marlota-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 500px;
    height: 500px;
    background: rgba(230, 217, 245, .07);
    border-radius: 50%;
}

.marlota-hero::before,
.marlota-page-hero::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 Q720 0 1440 80 L1440 80 L0 80 Z' fill='%23ffffff'/%3E%3Cpath d='M0 80 Q720 0 1440 80' fill='none' stroke='%23C9A646' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2;
}

.marlota-hero > .container,
.marlota-page-hero > .container {
    position: relative;
    z-index: 3;
}

.marlota-hero .badge-hero {
    display: inline-block;
    background: rgba(230, 217, 245, .18);
    color: #C9A646;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(230, 217, 245, .35);
    margin-bottom: 18px;
}

.marlota-hero h1 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
}

.marlota-hero h1 .accent {
    color: #C9A646;
}

.marlota-hero .hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,.75);
    margin-bottom: 32px;
    max-width: 480px;
}

.marlota-hero .btn-hero-primary {
    background: #C9A646;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 28px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    margin-right: 12px;
    transition: background .2s, transform .15s;
}

.marlota-hero .btn-hero-primary:hover {
    background: #A88432;
    color: #fff;
    transform: translateY(-2px);
}

.marlota-hero .btn-hero-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.6);
    border-radius: 8px;
    padding: 11px 26px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: border-color .2s, background .2s;
}

.marlota-hero .btn-hero-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,.08);
    color: #fff;
}

.marlota-hero .hero-image {
    text-align: center;
}

.marlota-hero .hero-image img {
    max-width: initial;
    width: 740px;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.3));
}

/* Page hero (About / Contact) */
.marlota-page-hero {
    background: linear-gradient(135deg, #3a1b76 0%, #4A4A4A 100%);
    padding: var(--mx-space-11) 0 80px;
    position: relative;
    overflow: hidden;
}

.marlota-page-hero .breadcrumb-hero {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-bottom: 14px;
}

.marlota-page-hero .breadcrumb-hero a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
}

.marlota-page-hero .breadcrumb-hero a:hover {
    color: #C9A646;
}

.marlota-page-hero .breadcrumb-hero span {
    color: #C9A646;
}

.marlota-page-hero h1 {
    font-size: 46px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.1;
}

.marlota-page-hero .hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,.7);
    max-width: 500px;
    line-height: 1.6;
}

.marlota-page-hero-about .hero-visual img {
    max-width: initial;
    width: 600px;
    object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.34));
}
.contact-hero{
        width: 750px;
        max-width: initial;
}

.marlota-page-hero-contact .hero-contact-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 48px;
}

.marlota-page-hero-contact .hero-contact-icons i {
    font-size: 92px;
    color: rgba(255,255,255,.13);
    line-height: 1;
}

.marlota-page-hero .hero-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 20px;
}

.marlota-page-hero .hero-icon-wrap {
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: 32px;
}

/* =============================================
   SECTION SHARED
   ============================================= */
.section-title {
    font-size: 34px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: var(--mx-space-2);
}

.section-title-white {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--mx-space-2);
}

.section-sub {
    font-size: 15px;
    color: #4A4A4A;
    margin-bottom: var(--mx-space-9);
    line-height: 1.65;
}

.section-sub-white {
    font-size: 16px;
    color: rgba(255,255,255,.7);
    margin-bottom: 40px;
}

.section-underline {
    width: 50px;
    height: 4px;
    background: #C9A646;
    border-radius: 2px;
    margin: var(--mx-space-2) 0 var(--mx-space-5);
}

.section-underline-center {
    width: 50px;
    height: 4px;
    background: #C9A646;
    border-radius: 2px;
    margin: var(--mx-space-2) auto var(--mx-space-5);
}

/* =============================================
   SHOP BY CATEGORY
   ============================================= */
.marlota-categories {
    background: #fff;
    padding: var(--mx-space-12) 0;
}

.marlota-categories .category-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow .25s, transform .2s;
    text-decoration: none;
    display: block;
    color: inherit;
}

.marlota-categories .category-card:hover {
    box-shadow: 0 8px 28px rgba(45, 27, 105, .12);
    transform: translateY(-4px);
    color: inherit;
    text-decoration: none;
}

.marlota-categories .category-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.marlota-categories .category-card .card-body {
    padding: 16px;
}

.marlota-categories .category-card h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 6px;
}

.marlota-categories .category-card .browse-link {
    font-size: 14px;
    color: #C9A646;
    font-weight: 600;
}

/* =============================================
   WHY CHOOSE MARLOTA (dark purple bg)
   ============================================= */
.marlota-why {
    background: #3a1b76;
    padding: var(--mx-space-12) 0;
}

.marlota-why .feature-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 36px 28px;
    text-align: center;
    transition: background .25s;
}

.marlota-why .feature-card:hover {
    background: rgba(255,255,255,.12);
}

.marlota-why .icon-circle {
    width: 72px;
    height: 72px;
    background: rgba(230, 217, 245, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 27px;
    color: #C9A646;
}

.marlota-why .feature-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.marlota-why .feature-card p {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    margin: 0;
}

/* =============================================
   NEWSLETTER SECTION
   ============================================= */
.marlota-newsletter {
    background: #fff;
    padding: var(--mx-space-10) 0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.marlota-newsletter .nl-icon {
    font-size: 40px;
    color: #3a1b76;
    margin-bottom: 12px;
}

.marlota-newsletter h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 6px;
}

.marlota-newsletter p {
    font-size: 14px;
    color: #666;
}

.marlota-newsletter .nl-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.marlota-newsletter .nl-form input {
    flex: 1;
    min-width: 200px;
    padding: 12px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}

.marlota-newsletter .nl-form input:focus {
    border-color: #3a1b76;
}

.marlota-newsletter .nl-form button {
    background: #3a1b76;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    font-family: 'Poppins', sans-serif;
}

.marlota-newsletter .nl-form button:hover {
    background: #4A4A4A;
}

/* Home page: 2025 newsletter style */
.marlota-newsletter.newsletter-2025 {
    /* background: linear-gradient(180deg, #4a1f6f 0%, #3a1b76 100%); */
    padding: 24px 0;
    border: 0;
}

.newsletter-2025 .newsletter-2025-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(28, 12, 44, 0.24);
    border: 1px solid #efeaf7;
    padding: 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.newsletter-2025 .newsletter-2025-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.newsletter-2025 .nl-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eab64f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(234, 182, 79, 0.35);
}

.newsletter-2025 .newsletter-copy h4 {
    margin: 0 0 4px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 750;
    color: #1E1E1E;
}

.newsletter-2025 .newsletter-copy p {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    color: #5d5d5d;
    max-width: 500px;
}

.newsletter-2025 .newsletter-2025-right {
    flex: 0 0 50%;
    max-width: 560px;
    width: 100%;
}

.newsletter-2025 .nl-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 2px solid #eee9f7;
    border-radius: 12px;
    overflow: hidden;
}

.newsletter-2025 .nl-form input {
    border: 0;
    border-radius: 0;
    min-width: 0;
    height: 58px;
    padding: 0 20px;
    font-size: 16px;
    color: #212121;
    background: transparent;
}

.newsletter-2025 .nl-form input::placeholder {
    color: #9690a3;
}

.newsletter-2025 .nl-form input:focus {
    border: 0;
    box-shadow: none;
}

.newsletter-2025 .nl-form button {
    height: 58px;
    border-radius: 0;
    padding: 0 30px;
    background: #3a1b76;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    min-width: 170px;
    transition: background .2s ease;
}

.newsletter-2025 .nl-form button:hover {
    background: #4a236d;
}

@media (max-width: 991px) {
    .newsletter-2025 .newsletter-2025-card {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-2025 .newsletter-2025-right {
        flex: 0 0 auto;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .marlota-newsletter.newsletter-2025 {
        padding: 18px 0;
    }

    .newsletter-2025 .newsletter-2025-card {
        padding: 18px;
        border-radius: 14px;
        gap: 16px;
    }

    .newsletter-2025 .newsletter-2025-left {
        align-items: flex-start;
    }

    .newsletter-2025 .nl-icon {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .newsletter-2025 .newsletter-copy h4 {
        font-size: 20px;
    }

    .newsletter-2025 .newsletter-copy p {
        font-size: 13px;
    }

    .newsletter-2025 .nl-form {
        flex-direction: column;
        border: 0;
        background: transparent;
        gap: 10px;
        overflow: visible;
    }

    .newsletter-2025 .nl-form input,
    .newsletter-2025 .nl-form button {
        width: 100%;
        border-radius: 10px;
    }

    .newsletter-2025 .nl-form input {
        border: 1px solid #e7e2f0;
        background: #fff;
    }

    .newsletter-2025 .nl-form button {
        min-width: 0;
    }
}

/* =============================================
   PRODUCT SLIDERS — clean cards
   ============================================= */
.marlota-products-section {
    background: #F9F6F1;
    padding: var(--mx-space-11) 0;
}

.marlota-products-section .section-title {
    margin-bottom: 30px;
}

/* Products listing page theme alignment */
.marlota-products-listing-page {
    background: #F9F6F1;
}

.marlota-products-listing-page .sidebar {
    position: sticky;
    top: 110px;
}

.marlota-products-listing-page .sidebar-wrapper {
    background: #fff;
    border: 1px solid #ece7f7;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 18px rgba(90, 45, 130, .07);
}

.marlota-products-listing-page .wrapper-heading {
    font-size: 15px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1eef8;
}

.marlota-products-listing-page .sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.marlota-products-listing-page .sidebar-list li {
    margin-bottom: 6px;
}

.marlota-products-listing-page .sidebar-list li a {
    display: block;
    border: 1px solid #efeaf8;
    border-radius: 10px;
    padding: 8px 10px;
    color: #4f4f4f;
    text-decoration: none;
    transition: all .2s;
}

.marlota-products-listing-page .sidebar-list li a:hover {
    border-color: #3a1b76;
    color: #3a1b76;
    background: #faf7ff;
}

.marlota-products-listing-page .sidebar-list li a label {
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.marlota-products-listing-page .sidebar-section hr {
    display: none;
}

.marlota-products-listing-page .product-sorting-section {
    background: #fff;
    border: 1px solid #ece7f7;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(90, 45, 130, .06);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.marlota-products-listing-page .product-sort {
    font-size: 13px;
    font-weight: 600;
    color: #3a1b76;
    margin-right: 8px;
}

.marlota-products-listing-page .product-sorting-section .form-control {
    border: 1px solid #e8e3f2;
    border-radius: 9px;
    height: 40px;
    font-size: 13px;
    color: #333;
    min-width: 190px;
    box-shadow: none;
}

.marlota-products-listing-page .product-sorting-section .form-control:focus {
    border-color: #3a1b76;
}

.marlota-products-listing-page .no-products-message {
    margin: 14px 0;
    text-align: center;
    color: #a12f4c;
    background: #ffeef3;
    border: 1px solid #ffd3df;
    border-radius: 10px;
    padding: 12px;
    font-weight: 500;
}

.marlota-products-listing-page .toolbox-pagination {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #ece7f7;
    border-radius: 14px;
    padding: 12px 14px;
}

.marlota-products-listing-page .showing-info {
    font-size: 13px;
    color: #666;
}

.marlota-products-listing-page .showing-info span {
    color: #3a1b76;
    font-weight: 700;
}

.marlota-products-listing-page .pagination {
    margin: 0;
    gap: 8px;
}

.marlota-products-listing-page .pagination li a {
    border: 1px solid #e8e3f2;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #3a1b76;
    background: #fff;
    text-decoration: none;
    transition: all .2s;
}

.marlota-products-listing-page .pagination li a:hover {
    background: #3a1b76;
    border-color: #3a1b76;
    color: #fff;
}

.marlota-products-listing-page .pagination li.disabled a {
    opacity: .45;
    pointer-events: none;
}

@media (max-width: 991px) {
    .marlota-products-listing-page .sidebar {
        position: static;
    }

    .marlota-products-listing-page .product-sorting-section {
        padding: 10px;
    }

    .marlota-products-listing-page .product-sorting-section .form-control {
        min-width: 160px;
    }
}

/* Override old teal borders on product cards */
.custom-product,
.product-wrap,
.card[style*="#1d5366"],
.card.marlota-card {
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
    transition: box-shadow .25s, transform .2s;
    background: #fff;
}

.custom-product:hover,
.product-wrap:hover {
    box-shadow: 0 8px 24px rgba(45, 27, 105, .10) !important;
    transform: translateY(-2px);
}

/* Tab nav overrides */
.tab-nav-boxed .nav-tabs .nav-link.active,
.tab-nav-boxed .nav-tabs .nav-link:hover {
    background: #3a1b76 !important;
    color: #fff !important;
    border-color: #3a1b76 !important;
}

/* =============================================
   FOOTER
   ============================================= */
.marlota-footer {
    background: #3a1b76;
    color: rgba(255,255,255,.85);
    padding: var(--mx-space-11) 0 0;
}

.marlota-footer .footer-logo {
    height: 70px;
    width: 250px;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.marlota-footer .footer-tagline {
    font-size: 14px;
    color: rgba(255,255,255,.65);
    margin-bottom: 22px;
    line-height: 1.65;
}

.marlota-footer .footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.marlota-footer .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.marlota-footer .footer-social a:hover {
    background: #C9A646;
    color: #fff;
}

.marlota-footer .footer-col-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.marlota-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.marlota-footer .footer-links li {
    margin-bottom: 8px;
}

.marlota-footer .footer-links a {
    font-size: 14px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .2s;
}

.marlota-footer .footer-links a:hover {
    color: #C9A646;
}

.marlota-footer .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.65);
}

.marlota-footer .footer-contact-item .fc-icon {
    font-size: 16px;
    color: #C9A646;
    margin-top: 2px;
    flex-shrink: 0;
}

.marlota-footer .footer-bottom {
    background: rgba(0,0,0,.2);
    margin-top: var(--mx-space-10);
    padding: 18px 0;
}

.marlota-footer .footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.marlota-about-who {
    background: #fff;
    padding: var(--mx-space-11) 0;
}

.marlota-about-who .badge-section {
    display: inline-block;
    background: rgba(230, 217, 245, .15);
    color: #C9A646;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(230, 217, 245, .3);
    margin-bottom: 14px;
}

.marlota-about-who h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 16px;
    line-height: 1.3;
}

.marlota-about-who p {
    font-size: 18px;
    color: #555;
    line-height: 1.75;
}

.marlota-about-who .about-img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(0,0,0,.12);
    object-fit: cover;
    height: 380px;
}

.marlota-core-values {
    background: #fff;
    padding: var(--mx-space-11) 0;
    border-top: 1px solid #f0f0f0;
}

.marlota-core-values .value-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px 24px;
    text-align: center;
    height: 100%;
    box-shadow: 0 4px 18px rgba(58,27,118,.08);
    border: 1px solid #ede9f5;
    transition: box-shadow .25s, transform .2s;
}

.marlota-core-values .value-card:hover {
    box-shadow: 0 10px 32px rgba(58,27,118,.15);
    transform: translateY(-4px);
}

.marlota-core-values .icon-circle {
    width: 70px;
    height: 70px;
    background: #3a1b76;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 26px;
    color: #fff;
}

.marlota-core-values h5 {
    font-size: 17px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 10px;
}

.marlota-core-values p {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.marlota-mission {
    background: #fff;
    padding: var(--mx-space-11) 0;
}

.marlota-mission .mission-card {
    background: #fffefd;
    border-radius: 16px;
    border-left: 5px solid #C9A646;
    padding: 70px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding-left: 170px;
}

.marlota-mission .mission-icon-wrap {
    width: 150px;
    height: 150px;
    background: #3a1b76;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: #ffffff;
    flex-shrink: 0;
}

.marlota-mission h4 {
    font-size: 26px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 12px;
}

.marlota-mission p {
    font-size: 22px;
    color: #555;
    line-height: 1.75;
    margin: 0;
    max-width: 800px;
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.marlota-contact-section {
    background: #fff;
    padding: var(--mx-space-11) 0;
}

.marlota-contact-section .contact-form-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: var(--mx-space-9) var(--mx-space-8);
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.marlota-contact-section h4 {
    font-size: 21px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 22px;
}

.marlota-contact-section .form-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.marlota-contact-section .form-control {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: border-color .2s;
}

.marlota-contact-section .form-control:focus {
    border-color: #3a1b76;
    box-shadow: 0 0 0 3px rgba(45, 27, 105, .1);
}

.marlota-contact-section .btn-send {
    background: #3a1b76;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    transition: background .2s;
    font-family: 'Poppins', sans-serif;
}

.marlota-contact-section .btn-send:hover {
    background: #4A4A4A;
}

.marlota-contact-section .contact-info-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 4px solid #3a1b76;
    border-radius: 14px;
    padding: var(--mx-space-9) var(--mx-space-8);
    height: 100%;
    box-shadow: 0 4px 20px rgba(58,27,118,.09);
}

.marlota-contact-section .contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.marlota-contact-section .ci-icon {
    width: 42px;
    height: 42px;
    background: #3a1b76;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A646;
    font-size: 16px;
    flex-shrink: 0;
}

.marlota-contact-section .ci-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #888;
    margin-bottom: 3px;
}

.marlota-contact-section .ci-value {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.marlota-contact-section .follow-title {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 12px;
}

.marlota-contact-section .social-icons-contact {
    display: flex;
    gap: 10px;
}

.marlota-contact-section .social-icons-contact a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3a1b76;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}

.marlota-contact-section .social-icons-contact a:hover {
    background: #C9A646;
}

.marlota-contact-section .radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.marlota-contact-section .radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

/* =============================================
   ABOUT PAGE — MISSION PRINCIPLES
   ============================================= */
.marlota-mission .mission-principle {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    height: 100%;
    border-top: 4px solid #3a1b76;
    box-shadow: 0 4px 18px rgba(58,27,118,.08);
    border: 1px solid #ede9f5;
    border-top: 4px solid #3a1b76;
    transition: box-shadow .25s, transform .2s;
}
.marlota-mission .mission-principle:hover {
    box-shadow: 0 10px 32px rgba(58,27,118,.15);
    transform: translateY(-4px);
}
.marlota-mission .mp-number {
    font-size: 36px;
    font-weight: 800;
    color: #C9A646;
    line-height: 1;
    margin-bottom: 12px;
}
.marlota-mission .mission-principle h5 {
    font-size: 17px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 10px;
}
.marlota-mission .mission-principle p {
    font-size: 15px;
    color: #666;
    margin: 0;
}

/* =============================================
   ABOUT PAGE — WHY CHOOSE
   ============================================= */
.marlota-why-choose {
    background: var(--brand-ivory);
    padding: var(--mx-space-11) 0;
}
.marlota-why-choose h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 16px;
}
.marlota-why-choose p {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
    font-family: 'Poppins', sans-serif;
}
.marlota-why-choose h1,.marlota-why-choose h2,.marlota-why-choose h3,.marlota-why-choose h4,.marlota-why-choose h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-why-choose a {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.marlota-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ede9f5;
    font-family: 'Poppins', sans-serif;
}
.marlota-checklist li:last-child { border-bottom: none; }
.marlota-checklist li .fa-check-circle {
    color: #3a1b76;
    font-size: 18px;
    flex-shrink: 0;
}
.marlota-checklist-light li {
    color: rgba(255,255,255,.88);
    border-bottom-color: rgba(255,255,255,.12);
}
.marlota-checklist-light li .fa-check-circle {
    color: #C9A646;
}
.why-choose-quote {
    background: #3a1b76;
    border-radius: 16px;
    padding: 40px 36px;
    color: #fff;
    position: relative;
}
.why-choose-quote .wc-quote-icon {
    font-size: 36px;
    color: #C9A646;
    margin-bottom: 16px;
    display: block;
}
.why-choose-quote p {
    font-size: 20px;
    color: rgba(255,255,255,.92);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 20px;
}
.why-choose-quote .wc-author {
    font-size: 14px;
    font-weight: 600;
    color: #C9A646;
    letter-spacing: .5px;
}

/* =============================================
   ABOUT PAGE — OUR PRODUCTS RANGE
   ============================================= */
.marlota-products-range {
    background: #fff;
    padding: var(--mx-space-11) 0;
    border-top: 1px solid #f0f0f0;
}
.marlota-products-range h1,.marlota-products-range h2,.marlota-products-range h3,.marlota-products-range h4,.marlota-products-range h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-products-range a { font-family: 'Poppins', sans-serif; color: inherit; }
.marlota-products-range p { font-family: 'Poppins', sans-serif; }
.range-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 24px;
    height: 100%;
    text-align: center;
    box-shadow: 0 4px 18px rgba(58,27,118,.08);
    border: 1px solid #ede9f5;
    border-bottom: 3px solid transparent;
    transition: box-shadow .25s, transform .2s;
}
.range-card:hover {
    box-shadow: 0 10px 32px rgba(58,27,118,.15);
    transform: translateY(-4px);
    border-bottom-color: #C9A646;
}
.range-icon {
    width: 64px;
    height: 64px;
    background: #3a1b76;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 24px;
    color: #fff;
}
.range-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.range-card p {
    font-size: 15px;
    color: #666;
    margin: 0;
}
.range-card-cta {
    background: linear-gradient(135deg, #3a1b76 0%, #4A4A4A 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.range-card-cta h5,
.range-card-cta p {
    color: rgba(255,255,255,.9) !important;
}

/* =============================================
   ABOUT PAGE — 3PL FULFILMENT
   ============================================= */
.marlota-3pl {
    background: linear-gradient(160deg, #2a1256 0%, #1E1E1E 100%);
    padding: var(--mx-space-12) 0;
}
.marlota-3pl h1,.marlota-3pl h2,.marlota-3pl h3,.marlota-3pl h4,.marlota-3pl h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-3pl a { font-family: 'Poppins', sans-serif; color: inherit; }
.marlota-3pl p { font-family: 'Poppins', sans-serif; }
.badge-3pl {
    display: inline-block;
    background: #C9A646;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
}
.tpl-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 28px 22px;
    height: 100%;
    transition: background .25s, transform .2s;
}
.tpl-card:hover {
    background: rgba(255,255,255,.1);
    transform: translateY(-4px);
}
.tpl-icon {
    width: 56px;
    height: 56px;
    background: #C9A646;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
}
.tpl-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.tpl-card p {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin: 0;
    line-height: 1.6;
}
.tpl-who-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 32px 28px;
    height: 100%;
}
.tpl-who-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #C9A646;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}
.tpl-who-card h4 .fa {
    margin-right: 8px;
}
.tpl-partner-note {
    font-size: 14px;
    color: rgba(255,255,255,.65);
    font-style: italic;
    margin-top: 16px;
    line-height: 1.6;
}

/* =============================================
   ABOUT PAGE — COMMITMENT + STANDARD
   ============================================= */
.marlota-commitment {
    background: #fff;
    padding: var(--mx-space-11) 0;
    border-top: 1px solid #f0f0f0;
}
.marlota-commitment h1,.marlota-commitment h2,.marlota-commitment h3,.marlota-commitment h4,.marlota-commitment h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-commitment a { font-family: 'Poppins', sans-serif; color: inherit; }
.marlota-commitment p { font-family: 'Poppins', sans-serif; }
.marlota-commitment h2 {
    font-size: 30px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 16px;
}
.marlota-commitment p {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
}
.standard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.std-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F9F6F1;
    border: 1px solid #e0d5f0;
    color: #3a1b76;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    transition: background .2s, color .2s;
}
.std-badge:hover {
    background: #3a1b76;
    color: #fff;
    border-color: #3a1b76;
}
.std-badge .fa {
    color: #C9A646;
    font-size: 12px;
}
.std-badge:hover .fa {
    color: #C9A646;
}

/* =============================================
   ABOUT PAGE — LOOKING AHEAD
   ============================================= */
.marlota-looking-ahead {
    background: var(--brand-ivory);
    padding: var(--mx-space-11) 0;
}
.marlota-looking-ahead h1,.marlota-looking-ahead h2,.marlota-looking-ahead h3,.marlota-looking-ahead h4,.marlota-looking-ahead h5 {
    font-family: 'Poppins', sans-serif;
    color: inherit;
}
.marlota-looking-ahead a { font-family: 'Poppins', sans-serif; color: inherit; }
.marlota-looking-ahead p { font-family: 'Poppins', sans-serif; }
.marlota-looking-ahead h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 16px;
}
.marlota-looking-ahead p {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
}
.ahead-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ahead-stat {
    background: #fff;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid #C9A646;
}
.ahead-num {
    font-size: 30px;
    font-weight: 800;
    color: #3a1b76;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}
.ahead-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

/* =============================================
   RESPONSIVE — NEW ABOUT SECTIONS
   ============================================= */
@media (max-width: 767px) {
    .marlota-mission .mission-card {
        padding: 30px 24px;
        padding-left: 30px;
        gap: 24px;
        flex-direction: column;
    }
    .marlota-mission .mission-icon-wrap {
        width: 80px;
        height: 80px;
        font-size: 30px;
        margin: 0 auto;
    }
    .ahead-stats {
        grid-template-columns: 1fr 1fr;
    }
    .why-choose-quote {
        padding: 28px 24px;
    }
    .why-choose-quote p {
        font-size: 17px;
    }
}

/* CTA Banner */
.marlota-cta {
    background: linear-gradient(135deg, #3a1b76 0%, #4A4A4A 100%);
    padding: var(--mx-space-10) 0;
}

.marlota-cta .cta-icon-wrap {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    color: #C9A646;
    margin-right: 24px;
    flex-shrink: 0;
}

.marlota-cta h4 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.marlota-cta p {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin: 0;
}

.marlota-cta .btn-cta {
    background: #C9A646;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 30px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: background .2s;
}

.marlota-cta .btn-cta:hover {
    background: #A88432;
    color: #fff;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 991px) {
    :root {
        --mx-space-10: 40px;
        --mx-space-11: 48px;
        --mx-space-12: 56px;
        --mx-space-13: 60px;
        --mx-space-14: 68px;
        --mx-space-15: 76px;
    }

    .marlota-hero h1 {
        font-size: 35px;
    }
    .marlota-hero {
        min-height: auto;
        padding: var(--mx-space-12) 0 var(--mx-space-14);
    }
    .marlota-page-hero {
        padding: var(--mx-space-11) 0 var(--mx-space-15);
    }
    .marlota-hero .hero-image {
        margin-top: 36px;
    }
    .marlota-hero::before,
    .marlota-page-hero::before {
        height: 54px;
        bottom: -24px;
    }
    .section-title,
    .section-title-white {
        font-size: 30px;
    }
    .marlota-page-hero h1 {
        font-size: 40px;
    }
    .marlota-page-hero-about .hero-visual img {
        max-height: 270px;
    }
    .marlota-mission .mission-card {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    :root {
        --mx-space-8: 24px;
        --mx-space-9: 28px;
        --mx-space-10: 32px;
        --mx-space-11: 36px;
        --mx-space-12: 40px;
        --mx-space-13: 44px;
        --mx-space-14: 52px;
        --mx-space-15: 60px;
    }

    .marlota-hero h1 {
        font-size: 30px;
        line-height: 1.2;
    }
    .marlota-page-hero h1 {
        font-size: 32px;
        line-height: 1.2;
    }
    .marlota-hero .hero-sub,
    .marlota-page-hero .hero-sub {
        font-size: 14px;
        line-height: 1.6;
    }
    .marlota-hero::before,
    .marlota-page-hero::before {
        height: 44px;
        bottom: -18px;
    }
    .marlota-page-hero-contact .hero-contact-icons {
        justify-content: center;
        gap: 20px;
    }
    .marlota-page-hero-contact .hero-contact-icons i {
        font-size: 48px;
    }
    .section-title,
    .section-title-white {
        font-size: 27px;
    }
    .marlota-header .logo img {
        height: 40px;
    }
    .btn-shop-now {
        padding: 8px 14px;
        font-size: 13px;
    }
    .marlota-contact-section .contact-form-card,
    .marlota-contact-section .contact-info-card {
        padding: 24px 20px;
    }
    .marlota-cta .cta-icon-wrap {
        display: none;
    }
    .marlota-footer .footer-col-title {
        margin-top: 28px;
    }
}

/* =============================================
   LEGACY ELEMENT FIXES
   These elements come from header.php / footer.php
   and previously relied on style.min.css / custom.css
   which are no longer loaded. These rules restore the
   correct behaviour without that stylesheet.
   ============================================= */

/* Magnific Popup hidden class */
.mfp-hide {
    display: none !important;
}

/* Newsletter popup */
.newsletter-popup {
    display: none !important;
}

/* Mobile menu wrapper – fixed overlay, hidden until activated */
.mobile-menu-wrapper {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2400;
    overflow: hidden;
}
.mmenu-active .mobile-menu-wrapper {
    visibility: visible;
}

/* Sticky footer (Wolmart mobile nav bar) –
   the new design has its own responsive header,
   so hide this legacy component */
.sticky-footer,
.sticky-content.fix-bottom {
    display: none !important;
}

/* Scroll-to-top button */
#scroll-top {
    position: fixed;
    right: 2rem;
    bottom: 4rem;
    z-index: 1100;
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #3a1b76;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    text-decoration: none;
    transition: background .2s, opacity .3s;
}
#scroll-top.show {
    display: flex;
}
#scroll-top i {
    font-size: 16px;
    line-height: 1;
}
#scroll-top svg {
    display: none;
}

/* Ensure Bootstrap 5 tab-panes are shown when active */
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .tab-pane.active {
    display: block;
}

/* =============================================
   MEGA MENU
   ============================================= */
.marlota-header .has-megamenu {
    position: static;
}

.marlota-header .megamenu-trigger {
    cursor: pointer;
}

.marlota-header .megamenu-trigger .fa-chevron-down {
    transition: transform .2s;
}

.marlota-header .has-megamenu:hover .megamenu-trigger .fa-chevron-down,
.marlota-header .has-megamenu:focus-within .megamenu-trigger .fa-chevron-down,
.marlota-header .has-megamenu.menu-open .megamenu-trigger .fa-chevron-down {
    transform: rotate(180deg);
}

.megamenu-panel {
    display: none;
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    border-top: 3px solid #C9A646;
    z-index: 1050;
    padding: 28px 0 24px;
    max-height: 72vh;
    overflow-y: auto;
}

.has-megamenu:hover .megamenu-panel,
.has-megamenu:focus-within .megamenu-panel,
.has-megamenu.menu-open .megamenu-panel {
    display: block;
}

.megamenu-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
}

.megamenu-col {
    min-width: 0;
    max-width: none;
    padding: 0;
    margin-bottom: 10px;
}

.megamenu-cat-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1E1E1E !important;
    text-decoration: none;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C9A646;
    font-family: 'Poppins', sans-serif;
    transition: color .2s;
}

.megamenu-cat-title:hover {
    color: #C9A646 !important;
}

.megamenu-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu-sublist li {
    margin-bottom: 4px;
}

.megamenu-sublist li a {
    font-size: 13px;
    color: #555 !important;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: color .2s;
    display: block;
    padding: 2px 0;
}

.megamenu-sublist li a:hover {
    color: #3a1b76 !important;
}

.megamenu-sublist .megamenu-see-all {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eee;
}

.megamenu-sublist .megamenu-see-all a {
    font-weight: 700;
    color: #3a1b76 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.megamenu-sublist .megamenu-see-all a:hover {
    color: #C9A646 !important;
}

/* =============================================
   PRODUCT CARD — NEW DESIGN
   (inspired by reference: star badge, % off, fast delivery)
   ============================================= */
.product-card-new {
    background: #fff;
    border-radius: 14px;
    border: 2px solid #f5e049;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: box-shadow .25s, transform .2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-new:hover {
    box-shadow: 0 10px 30px rgba(45,27,105,.13);
    transform: translateY(-3px);
}

.product-card-listing {
    border-color: #ececec;
}

.product-card-new .pc-image-wrap {
    position: relative;
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    min-height: 210px;
    max-height: 210px;
    padding: 12px;
}

.product-card-new .pc-image-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.product-card-new .pc-image-wrap img {
    height: 185px;
    width: 100%;
    object-fit: contain;
    transition: transform .3s;
}

.product-card-new:hover .pc-image-wrap img {
    transform: scale(1.04);
}

.product-card-new .pc-badge-off {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3a1b76;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
}

.product-card-new .pc-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #444;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-rating .pc-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.product-card-new .pc-rating .pc-stars i {
    font-size: 12px;
    color: #f5a623;
}

.product-card-new .pc-rating .pc-stars i.fa-star-o {
    color: #f5a623;
    opacity: 0.45;
}

.product-card-new .pc-rating .pc-review-count {
    color: #888;
    font-size: 11px;
}

.product-card-new .pc-name {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    min-height: 36px;
    flex: 1;
}

.product-card-new .pc-name a {
    color: #1E1E1E !important;
    text-decoration: none;
    transition: color .2s;
}

.product-card-new .pc-name a:hover {
    color: #3a1b76 !important;
}

.product-card-new .pc-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-card-new .pc-price-row .pc-price {
    font-size: 16px;
    font-weight: 700;
    color: #1E1E1E;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-price-row .pc-old-price {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-price-row .pc-pct-off {
    font-size: 11px;
    font-weight: 700;
    color: #00897b;
    background: #e0f2f1;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-fast-delivery {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}

.product-card-new .pc-fast-delivery .pc-fd-fast {
    background: #ff4488;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px 0 0 4px;
    font-family: 'Poppins', sans-serif;
}

.product-card-new .pc-fast-delivery .pc-fd-label {
    background: #f5e049;
    color: #1E1E1E;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 0 4px 4px 0;
    font-family: 'Poppins', sans-serif;
}

/* Grid for new product cards */
.product-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

@media (max-width: 1199px) {
    .product-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .product-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .megamenu-panel {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .product-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-cards-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ============================================================
   POPULAR DEPARTMENTS — MODERN 2025 REDESIGN
   ============================================================ */
.pop-dept-section {
    margin-top: 60px;
    padding: 48px 0 8px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 32px rgba(90,45,130,.06);
    overflow: hidden;
}

.pop-dept-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 28px 24px;
    border-bottom: 1px solid #f0eef8;
}
.pop-dept-title-wrap { flex: 1 1 auto; }
.pop-dept-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C9A646;
    margin-bottom: 4px;
    font-family: 'Poppins', sans-serif;
}
.pop-dept-title {
    font-size: 26px;
    font-weight: 800;
    color: #1E1E1E;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.pop-dept-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.pd-filter {
    padding: 8px 20px;
    border-radius: 50px;
    border: 2px solid #e8e2f4;
    background: transparent;
    color: #3a1b76;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all .2s;
}
.pd-filter:hover,
.pd-filter.active {
    background: #3a1b76;
    border-color: #3a1b76;
    color: #fff;
    box-shadow: 0 4px 14px rgba(90,45,130,.3);
}

.pop-dept-viewall {
    font-size: 13px;
    font-weight: 600;
    color: #3a1b76;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s;
}
.pop-dept-viewall:hover { gap: 10px; color: #3a1b76; text-decoration: none; }

.pop-dept-panels { padding: 28px 28px 0; }
.pd-panel { display: none; }
.pd-panel.active { display: block; }

.pd-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.pd-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #ede9f8;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.pd-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(90,45,130,.12);
    border-color: #c3b0e8;
}

.pd-card-img {
    position: relative;
    background: #ffffff;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
}
.pd-card-img img {
    height: 180px;
    width: 100%;
    object-fit: contain;
    transition: transform .35s;
}
.pd-card:hover .pd-card-img img { transform: scale(1.06); }

.pd-badge-off {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3a1b76;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    font-family: 'Poppins', sans-serif;
    z-index: 2;
}
.pd-badge-new,
.pd-badge-hot,
.pd-badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pd-badge-new  { background: #e8f5e9; color: #2e7d32; }
.pd-badge-hot  { background: #fff3e0; color: #e65100; }
.pd-badge-sale { background: #fce4ec; color: #c62828; }

.pd-hover-actions {
    position: absolute;
    bottom: -50px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    padding: 10px;
    transition: bottom .25s;
    z-index: 3;
}
.pd-card:hover .pd-hover-actions { bottom: 8px; }
.pd-btn-view {
    background: rgba(255,255,255,.95);
    color: #3a1b76;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: background .2s, color .2s;
    font-family: 'Poppins', sans-serif;
}
.pd-btn-view:hover { background: #3a1b76; color: #fff; text-decoration: none; }

.pd-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.pd-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}
.pd-stars i { color: #f5a623; }
.pd-stars i.fa-star-o { color: #f5a623; opacity: .4; }
.pd-stars span { font-size: 11px; color: #888; margin-left: 4px; font-family: 'Poppins', sans-serif; }

.pd-name {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
    flex: 1;
    font-family: 'Poppins', sans-serif;
}
.pd-name a { color: inherit; text-decoration: none; }
.pd-name a:hover { color: #3a1b76; }

.pd-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pd-price {
    font-size: 17px;
    font-weight: 800;
    color: #3a1b76;
    font-family: 'Poppins', sans-serif;
}
.pd-orig {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
    font-family: 'Poppins', sans-serif;
}

.pd-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #3a1b76;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: auto;
    transition: background .2s, transform .15s;
    font-family: 'Poppins', sans-serif;
    letter-spacing: .02em;
}
.pd-add-cart:hover {
    background: #7c3fa8;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.pd-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #888;
    font-family: 'Poppins', sans-serif;
}
.pd-empty a { color: #3a1b76; }

.pop-dept-cta {
    text-align: center;
    padding: 32px 28px 36px;
    border-top: 1px solid #f0eef8;
    margin-top: 28px;
}
.pop-dept-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid #3a1b76;
    color: #3a1b76;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 34px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: background .2s, color .2s, gap .2s;
}
.pop-dept-cta-btn:hover {
    background: #3a1b76;
    color: #fff;
    text-decoration: none;
    gap: 14px;
}

@media (max-width: 1199px) { .pd-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .pd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  {
    .pd-grid { grid-template-columns: repeat(2, 1fr); }
    .pop-dept-header { flex-direction: column; align-items: flex-start; }
    .pop-dept-viewall { align-self: flex-end; }
}
@media (max-width: 480px)  { .pd-grid { grid-template-columns: repeat(1, 1fr); } }

    .text-center{
        text-align: center;
        display: block;
    }
    .marlota-title-white{
        color: #fff !important;
    }
    .second-p{
        padding-top: 10px;
    }