/*
    Theme Name: ModaParva Luxury
    Theme URI: https://modaparva.com/
    Author: ModaParva
    Description: Custom editorial luxury WooCommerce theme for ModaParva.
    Version: 1.3.0
    Requires at least: 6.4
    Requires PHP: 7.4
    Text Domain: modaparva-luxury
    */

    /* =========================================================
       MODAPARVA VARIABLES / RESET
       ========================================================= */

    :root {
        --mp-ivory: #f7f0e9;
        --mp-cream: #fffaf5;
        --mp-ink: #40221d;
        --mp-gold: #a87936;
        --mp-soft: #e9ddd2;
        --mp-white: #fff;
        --mp-max: 1440px;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--mp-cream);
        color: var(--mp-ink);
        font-family: Georgia, "Times New Roman", serif;
        line-height: 1.55;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .screen-reader-text {
        position: absolute;
        left: -9999px;
    }

    .mp-wrap {
        width: min(94%, var(--mp-max));
        margin: auto;
    }


    /* =========================================================
       HEADER / BRAND
       ========================================================= */

    .mp-top {
        background: linear-gradient(
            90deg,
            #f2e7dd,
            #fffaf5,
            #f2e7dd
        );
        padding: 14px 0;
    }

    .mp-brand-row {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: center;
        gap: 24px;
    }

    .mp-kicker,
    .mp-brand-sub,
    .mp-benefit,
    .mp-eyebrow {
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .mp-kicker {
        font-size: 11px;
    }

    .mp-brand {
        text-align: center;
    }

    .mp-crown {
        font-size: 25px;
        color: var(--mp-gold);
        line-height: 1;
    }

    .mp-site-title {
        font-size: clamp(36px, 4.2vw, 60px);
        letter-spacing: .08em;
        margin: 0;
        font-weight: 400;
        background: linear-gradient(
            90deg,
            #c38a21,
            #76512c
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .mp-brand-sub {
        font-size: 9px;
        margin-top: -4px;
    }

    .mp-tagline {
        text-align: right;
        font-style: italic;
        font-size: 16px;
    }

    .mp-icons {
        text-align: right;
        font-size: 18px;
        white-space: nowrap;
        margin-top: 3px;
    }

    .mp-icons a {
        margin-left: 15px;
    }


    /* =========================================================
       PRIMARY NAVIGATION
       ========================================================= */

    .mp-nav {
        position: relative;
        z-index: 1000;
        border-top: 1px solid #eadfd6;
        border-bottom: 1px solid #dfd0c4;
        background: rgba(255, 250, 245, .98);
    }

    /*
     * CRITICAL:
     * Only the TOP LEVEL menu receives flex layout.
     * Submenus are handled separately below.
     */

    .mp-nav > .mp-wrap > ul.menu {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(18px, 4.4vw, 68px);
        list-style: none;
        margin: 0;
        padding: 13px 10px;
        flex-wrap: wrap;
    }

    .mp-nav > .mp-wrap > ul.menu > li {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
    }

    .mp-nav a {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .mp-nav > .mp-wrap > ul.menu > li > a {
        display: block;
        padding: 6px 0;
    }

    .mp-nav > .mp-wrap > ul.menu > li.current-menu-item > a,
    .mp-nav > .mp-wrap > ul.menu > li.current-menu-ancestor > a,
    .mp-nav > .mp-wrap > ul.menu > li > a:hover {
        border-bottom: 2px solid var(--mp-gold);
    }


    /* =========================================================
       SHOP CATEGORIES DROPDOWN — DESKTOP
       ========================================================= */

    @media (min-width: 851px) {

        /*
         * Every first-level submenu starts hidden.
         */

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu {
            display: none !important;

            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);

            z-index: 99999;

            width: max-content;
            min-width: 260px;
            max-width: 340px;

            margin: 0;
            padding: 8px 0;

            list-style: none;

            background: var(--mp-cream);
            border: 1px solid #dfd0c4;

            box-shadow:
                0 14px 32px rgba(64, 34, 29, .14);

            flex-direction: column !important;
            flex-wrap: nowrap !important;
            gap: 0 !important;
        }

        /*
         * Reveal dropdown when parent is hovered
         * or keyboard-focused.
         */

        .mp-nav > .mp-wrap > ul.menu > li:hover > ul.sub-menu,
        .mp-nav > .mp-wrap > ul.menu > li:focus-within > ul.sub-menu {
            display: flex !important;
        }

        /*
         * Keep every category on its own dropdown row.
         */

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li {
            display: block !important;
            position: relative;
            width: 100% !important;

            margin: 0 !important;
            padding: 0 !important;
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li > a {
            display: block !important;
            width: 100% !important;

            padding: 11px 22px !important;

            border: 0 !important;

            white-space: nowrap;
            text-align: left;

            font-size: 11px;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li > a:hover {
            background: var(--mp-ivory);
            color: var(--mp-ink);
            border: 0 !important;
        }
    }


    /* =========================================================
       HERO
       ========================================================= */

    .mp-hero {
        min-height: 490px;
        position: relative;
        overflow: hidden;
        background: #f6eee7;
    }

    .mp-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            url("assets/hero-fashion.jpg")
            72% 48% / cover no-repeat;
        z-index: 0;
    }

    .mp-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            #f7f0e9 0%,
            rgba(247,240,233,.98) 28%,
            rgba(247,240,233,.78) 43%,
            rgba(247,240,233,.08) 64%
        );
        z-index: 1;
        pointer-events: none;
    }

    .mp-hero-content {
        width: min(94%, var(--mp-max));
        margin: auto;
        position: relative;
        z-index: 2;
    }

    .mp-hero-copy {
        max-width: 500px;
        padding: 70px 0 62px;
    }

    .mp-hero h1 {
        font-size: clamp(48px, 5.4vw, 76px);
        line-height: .92;
        font-weight: 400;
        margin: 0 0 18px;
        letter-spacing: -.025em;
    }

    .mp-script {
        display: block;
        font-style: italic;
        color: #77511f;
        font-size: .58em;
        line-height: 1.05;
        margin: 4px 0 0 76px;
        white-space: nowrap;
    }

    .mp-hero p {
        letter-spacing: .24em;
        text-transform: uppercase;
        font-size: 13px;
        margin: 26px 0 22px;
    }


    /* =========================================================
       BUTTONS
       ========================================================= */

    .mp-button,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button {
        display: inline-block;
        background: linear-gradient(
            90deg,
            #9c713b,
            #c4995d
        );
        color: white !important;
        padding: 15px 34px;
        border: 0 !important;
        border-radius: 0 !important;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-weight: 400 !important;
    }


    /* =========================================================
       BENEFITS
       ========================================================= */

    .mp-benefits {
        border-top: 1px solid #e7dbd0;
        border-bottom: 1px solid #e7dbd0;
        background: #fffaf5;
    }

    .mp-benefit-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mp-benefit {
        text-align: center;
        padding: 16px 8px;
        font-size: 10px;
    }

    .mp-benefit span {
        font-size: 21px;
        vertical-align: middle;
        margin-right: 8px;
    }


    /* =========================================================
       SECTIONS / CATEGORIES
       ========================================================= */

    .mp-section {
        padding: 54px 0;
    }

    .mp-section-title {
        text-align: center;
        font-size: 32px;
        font-weight: 400;
        letter-spacing: .12em;
        margin: 0 0 8px;
    }

    .mp-section-sub {
        text-align: center;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-size: 10px;
        margin-bottom: 32px;
    }

    .mp-category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .mp-category {
        background: #f2e7df;
        text-align: center;
        overflow: hidden;
    }

    .mp-category img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        width: 100%;
        transition: transform .4s;
    }

    .mp-category:hover img {
        transform: scale(1.025);
    }

    .mp-category h3 {
        font-weight: 400;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 14px;
        margin: 12px;
    }


    /* =========================================================
       EDITORIAL
       ========================================================= */

    .mp-editorial {
        background: #efe4dc;
        padding: 50px 0;
        text-align: center;
    }

    .mp-editorial blockquote {
        font-size: clamp(24px, 3.2vw, 42px);
        font-weight: 400;
        margin: 0 auto 12px;
        max-width: 900px;
    }

    .mp-editorial p {
        letter-spacing: .2em;
        text-transform: uppercase;
        font-size: 10px;
    }


    /* =========================================================
       MAIN CONTENT
       ========================================================= */

    .site-main {
        min-height: 50vh;
    }

    .mp-content {
        padding: 60px 0;
    }


    /* =========================================================
       WOOCOMMERCE
       ========================================================= */

    .woocommerce ul.products li.product .price {
        color: var(--mp-gold);
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        color: var(--mp-gold);
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    .mp-footer {
        background: #3d241f;
        color: #f7eee7;
        padding: 55px 0 25px;
    }

    .mp-footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 45px;
    }

    .mp-footer h3,
    .mp-footer h4 {
        font-weight: 400;
        letter-spacing: .12em;
    }

    .mp-footer ul {
        list-style: none;
        padding: 0;
    }

    .mp-footer li {
        margin: 8px 0;
    }

    .mp-copyright {
        border-top: 1px solid rgba(255,255,255,.18);
        margin-top: 35px;
        padding-top: 20px;
        font-size: 12px;
    }

    /* =========================================================
       RESPONSIVE NAVIGATION — CURRENT HEADER.PHP
       ========================================================= */

    .mp-menu-toggle,
    .mp-submenu-toggle {
        display: none;
    }

    /* =========================================================
       TABLET / MOBILE
       ========================================================= */

    @media (max-width: 850px) {

        .mp-brand-row {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .mp-kicker,
        .mp-tagline,
        .mp-icons {
            text-align: center;
        }

        .mp-site-title {
            font-size: clamp(34px, 10vw, 42px);
        }

        /* Main hamburger */
        .mp-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            width: 100%;
            min-height: 48px;
            margin: 0;
            padding: 10px 15px;
            background: var(--mp-cream);
            color: var(--mp-ink);
            border: 0;
            cursor: pointer;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 11px;
            letter-spacing: .20em;
            text-transform: uppercase;
        }

        .mp-menu-icon {
            font-size: 21px;
            line-height: 1;
        }

        /* Current header.php has ul.menu directly inside .mp-wrap */
        .mp-nav > .mp-wrap > ul.menu {
            display: none !important;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .mp-nav.mp-menu-open > .mp-wrap > ul.menu {
            display: block !important;
        }

        .mp-nav > .mp-wrap > ul.menu > li {
            position: relative;
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            border-top: 1px solid #eadfd6;
        }

        .mp-nav > .mp-wrap > ul.menu > li > a {
            display: block;
            width: 100%;
            min-height: 46px;
            padding: 14px 48px;
            border: 0 !important;
            text-align: center;
            font-size: 11px;
            line-height: 18px;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .mp-nav > .mp-wrap > ul.menu > li.current-menu-item > a,
        .mp-nav > .mp-wrap > ul.menu > li.current-menu-ancestor > a,
        .mp-nav > .mp-wrap > ul.menu > li > a:hover,
        .mp-nav > .mp-wrap > ul.menu > li > a:focus {
            color: var(--mp-gold);
            border: 0 !important;
        }

        /* Separate arrow button generated by header.php */
        .mp-nav > .mp-wrap > ul.menu > li.menu-item-has-children > .mp-submenu-toggle {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 46px;
            margin: 0;
            padding: 0;
            background: transparent;
            color: var(--mp-ink);
            border: 0;
            cursor: pointer;
            z-index: 5;
        }

        .mp-submenu-toggle span {
            display: block;
            font-size: 20px;
            line-height: 1;
            transition: transform .2s ease;
        }

        .mp-submenu-open > .mp-submenu-toggle span {
            transform: rotate(180deg);
        }

        /* CRITICAL: submenu closed until JS adds mp-submenu-open */
        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu {
            display: none !important;
            position: static !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: none !important;
            list-style: none;
            background: var(--mp-ivory) !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .mp-nav > .mp-wrap > ul.menu > li.mp-submenu-open > ul.sub-menu {
            display: block !important;
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border-top: 1px solid rgba(64, 34, 29, .08);
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li > a {
            display: block !important;
            width: 100% !important;
            padding: 11px 15px !important;
            border: 0 !important;
            text-align: center;
            font-size: 10px;
            line-height: 1.4;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li > a:hover,
        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu > li > a:focus {
            background: var(--mp-cream);
            color: var(--mp-gold);
        }

        .mp-hero::before {
            background-position: 64% center;
        }

        .mp-hero::after {
            background: linear-gradient(
                90deg,
                rgba(247,240,233,.98),
                rgba(247,240,233,.76) 55%,
                rgba(247,240,233,.18)
            );
        }

        .mp-hero-copy {
            max-width: 58%;
            padding: 55px 0;
        }

        .mp-hero h1 {
            font-size: 48px;
        }

        .mp-script {
            margin-left: 20px;
        }

        .mp-benefit-grid,
        .mp-category-grid {
            grid-template-columns: 1fr 1fr;
        }

        .mp-footer-grid {
            grid-template-columns: 1fr;
        }
    }

    /* =========================================================
       SMALL MOBILE
       ========================================================= */

    @media (max-width: 540px) {

        .mp-top {
            padding: 10px 0;
        }

        .mp-brand-row {
            gap: 7px;
        }

        .mp-kicker {
            font-size: 9px;
        }

        .mp-site-title {
            font-size: clamp(32px, 11vw, 40px);
        }

        .mp-brand-sub {
            font-size: 8px;
        }

        .mp-tagline {
            font-size: 14px;
        }

        .mp-icons {
            margin-top: 5px;
        }

        .mp-hero {
            min-height: 500px;
        }

        .mp-hero::before {
            background-position: 60% center;
        }

        .mp-hero::after {
            background: rgba(247,240,233,.68);
        }

        .mp-hero-copy {
            max-width: 100%;
            padding-top: 70px;
        }

        .mp-hero h1 {
            font-size: clamp(39px, 12vw, 45px);
        }

        .mp-script {
            white-space: normal;
            margin-left: 10px;
        }

        .mp-category-grid,
        .mp-benefit-grid {
            grid-template-columns: 1fr 1fr;
        }

        .mp-benefit {
            font-size: 9px;
        }

        .mp-footer-grid {
            grid-template-columns: 1fr;
        }
    }

    /* =========================================================
       DESKTOP SAFETY
       ========================================================= */

    @media (min-width: 851px) {

        .mp-menu-toggle,
        .mp-submenu-toggle {
            display: none !important;
        }

        .mp-nav > .mp-wrap > ul.menu {
            display: flex;
        }

        .mp-nav > .mp-wrap > ul.menu > li > ul.sub-menu {
            display: none !important;
        }

        .mp-nav > .mp-wrap > ul.menu > li:hover > ul.sub-menu,
        .mp-nav > .mp-wrap > ul.menu > li:focus-within > ul.sub-menu {
            display: flex !important;
        }
    }
/* =========================================================
   MODAPARVA — COMPACT MOBILE HEADER + MENU CONTAINER
   ========================================================= */

@media (max-width: 850px) {

    /* -----------------------------------------
       COMPACT HEADER
       ----------------------------------------- */

    .mp-top {
        padding: 8px 0 7px;
    }

    .mp-brand-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Remove excess vertical space */
    .mp-kicker {
        margin: 0;
        padding: 0;
        font-size: 9px;
        line-height: 1.3;
    }

    .mp-brand {
        margin: 0;
        padding: 0;
    }

    .mp-crown {
        margin: 0 0 1px;
        font-size: 20px;
        line-height: 1;
    }

    .mp-site-title {
        margin: 0;
        font-size: clamp(31px, 9vw, 40px);
        line-height: 1;
    }

    .mp-brand-sub {
        margin: 3px 0 0;
        font-size: 8px;
        line-height: 1.3;
    }

    .mp-tagline {
        margin: 2px 0 0;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
    }

    .mp-icons {
        margin: 5px 0 0;
        padding: 0;
        text-align: center;
        line-height: 1;
    }

    .mp-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;

        margin: 0 3px;

        font-size: 18px;
    }


    /* -----------------------------------------
       NAVIGATION GETS ITS OWN CONTAINER
       ----------------------------------------- */

    .mp-nav {
        padding: 8px 0;

        background: #f7f0e9;

        border-top: 1px solid #dfd0c4;
        border-bottom: 1px solid #dfd0c4;
    }

    .mp-nav > .mp-wrap {
        width: min(94%, 560px);

        margin: 0 auto;

        background: var(--mp-cream);

        border: 1px solid #dfd0c4;

        box-shadow:
            0 5px 16px rgba(64, 34, 29, .07);
    }


    /* -----------------------------------------
       MENU BUTTON
       ----------------------------------------- */

    .mp-menu-toggle {
        width: 100%;
        min-height: 48px;

        margin: 0;
        padding: 12px 16px;

        background: var(--mp-cream);

        border: 0;

        color: var(--mp-ink);

        cursor: pointer;
    }


    /* -----------------------------------------
       OPEN MENU
       ----------------------------------------- */

    .mp-nav.mp-menu-open
    > .mp-wrap
    > ul.menu {

        border-top: 1px solid #dfd0c4;
    }


    /* Individual navigation rows */

    .mp-nav
    > .mp-wrap
    > ul.menu
    > li {

        background: var(--mp-cream);

        border-top: 1px solid rgba(64, 34, 29, .09);
    }


    .mp-nav
    > .mp-wrap
    > ul.menu
    > li:first-child {

        border-top: 0;
    }


    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > a {

        min-height: 46px;

        padding:
            14px
            50px
            14px
            50px;

        text-align: center;
    }


    /* -----------------------------------------
       SHOP CATEGORIES
       ----------------------------------------- */

    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > ul.sub-menu {

        background: #f7f0e9 !important;

        border-top:
            1px solid
            rgba(64, 34, 29, .10) !important;
    }


    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > ul.sub-menu
    > li {

        background: #f7f0e9;
    }


    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > ul.sub-menu
    > li
    > a {

        min-height: 42px;

        padding: 12px 15px !important;

        text-align: center;
    }


    /* Gold interaction */

    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > a:hover,

    .mp-nav
    > .mp-wrap
    > ul.menu
    > li
    > a:focus {

        color: var(--mp-gold);
    }


    /* -----------------------------------------
       SUBMENU ARROW
       ----------------------------------------- */

    .mp-nav
    .mp-submenu-toggle {

        right: 4px;

        width: 44px;
        height: 46px;

        color: var(--mp-gold);
    }
}


/* =========================================================
   EXTRA-SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .mp-top {
        padding: 7px 0 6px;
    }

    .mp-kicker {
        font-size: 8px;
    }

    .mp-crown {
        font-size: 18px;
    }

    .mp-site-title {
        font-size: 32px;
    }

    .mp-brand-sub {
        font-size: 7px;
        letter-spacing: .17em;
    }

    .mp-tagline {
        font-size: 12px;
    }

    .mp-nav {
        padding: 6px 0;
    }

    .mp-nav > .mp-wrap {
        width: 96%;
    }
}