/* Made4u — Next Level Designs Core Styling */

:root {
    --m4u-dark: #121212;
    --m4u-dark-light: #222222;
    --m4u-bg: #FAFAFA;
    --m4u-card-bg: #FFFFFF;
    --m4u-accent: #C5A880;
    --m4u-accent-hover: #B3946B;
    --m4u-border: #E8E8E8;
    --m4u-text-muted: #777777;
    --m4u-font-heading: 'Playfair Display', Georgia, serif;
    --m4u-font-body: 'Jost', system-ui, -apple-system, sans-serif;
}

/* Global Reset & Base */
body {
    font-family: var(--m4u-font-body);
    color: var(--m4u-dark);
    background-color: var(--m4u-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .m4u-heading {
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    color: var(--m4u-dark);
    letter-spacing: -0.02em;
}

a {
    color: var(--m4u-dark);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--m4u-accent);
}

.m4u-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Announcement Bar */
.m4u-announcement-bar {
    background-color: var(--m4u-dark);
    color: #FFFFFF;
    padding: 9px 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.m4u-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 15px;
}

.m4u-announcement-msg {
    flex: 1;
    text-align: center;
    line-height: 1.4;
}

.m4u-announcement-links {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.m4u-announcement-links a {
    color: #FFFFFF !important;
    text-decoration: none;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.m4u-announcement-links a:hover {
    opacity: 1;
    color: var(--m4u-accent) !important;
}

.m4u-ann-divider {
    opacity: 0.4;
    font-weight: 300;
}

@media (max-width: 767px) {
    .m4u-announcement-inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    .m4u-announcement-links {
        font-size: 10.5px;
        gap: 8px;
    }
    .m4u-announcement-bar {
        padding: 8px 12px;
        font-size: 10.5px;
    }
}

/* Section Common Styling */
.m4u-section {
    padding: 70px 0;
}

.m4u-section.bg-alt {
    background-color: #FFFFFF;
}

.m4u-section-header {
    text-align: center;
    margin-bottom: 45px;
}

.m4u-section-header.left {
    text-align: left;
}

.m4u-subheading {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--m4u-accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.m4u-subheading.m4u-light {
    color: #DFCAA8;
}

.m4u-heading {
    font-size: 38px;
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    color: var(--m4u-dark);
    letter-spacing: -0.01em;
    margin: 0;
}

.m4u-section-desc {
    font-size: 15px;
    color: var(--m4u-text-muted);
    margin: 8px 0 0;
    font-weight: 400;
}

/* =========================================================
   HERO BANNER — Brand-First Hierarchy
   ========================================================= */
.m4u-hero-section {
    position: relative;
    height: 72vh;
    min-height: 520px;
    max-height: 680px;
    background-size: cover;
    background-position: center 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    padding: 0 20px;
}

.m4u-hero-content {
    max-width: 720px;
}

.m4u-hero-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--m4u-accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.95;
}

.m4u-hero-title {
    font-size: 68px;
    color: #FFFFFF;
    margin: 0 0 8px;
    line-height: 1.05;
    font-family: var(--m4u-font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.m4u-hero-slogan {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--m4u-accent);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.m4u-hero-desc {
    font-size: 15px;
    font-weight: 300;
    margin: 0 auto 30px;
    color: #ECECEC;
    max-width: 460px;
    line-height: 1.6;
}

.m4u-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
   BUTTONS — Luxury Design System (No SaaS Glassmorphism)
   ========================================================= */
.m4u-btn {
    display: inline-block;
    padding: 13px 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}

.m4u-btn-primary {
    background-color: var(--m4u-dark);
    color: #FFFFFF;
    border-color: var(--m4u-dark);
}

.m4u-btn-primary:hover {
    background-color: var(--m4u-accent);
    border-color: var(--m4u-accent);
    color: #FFFFFF;
}

.m4u-btn-outline {
    background-color: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.85);
}

.m4u-btn-outline:hover {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--m4u-dark);
}

.m4u-btn-dark {
    background-color: var(--m4u-dark);
    color: #FFFFFF;
    border-color: var(--m4u-dark);
}

.m4u-btn-dark:hover {
    background-color: var(--m4u-accent);
    border-color: var(--m4u-accent);
    color: #FFFFFF;
}

.m4u-btn-accent {
    background-color: var(--m4u-accent);
    color: #FFFFFF;
    border-color: var(--m4u-accent);
}

.m4u-btn-accent:hover {
    background-color: var(--m4u-accent-hover);
    border-color: var(--m4u-accent-hover);
    color: #FFFFFF;
}

/* =========================================================
   CATEGORY GRID — Editorial 3:4 Cards
   ========================================================= */
.m4u-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.m4u-cat-card {
    position: relative;
    display: block;
    background-color: #FFFFFF;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.m4u-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.m4u-cat-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #F2F2F2;
}

.m4u-cat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.m4u-cat-card:hover .m4u-cat-img-wrap img {
    transform: scale(1.04);
}

.m4u-cat-info {
    padding: 18px 15px;
    text-align: center;
    background: #FFFFFF;
}

.m4u-cat-info h3 {
    font-size: 20px;
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    color: var(--m4u-dark);
    margin: 0 0 6px;
}

.m4u-cat-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--m4u-accent);
    text-transform: uppercase;
    transition: letter-spacing 0.2s ease;
}

.m4u-cat-card:hover .m4u-cat-link {
    letter-spacing: 0.22em;
}

/* =========================================================
   PRODUCT CARDS & GRID
   ========================================================= */
.m4u-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    margin: 0 0 40px;
}

.m4u-p-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
}

.m4u-p-card:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

.m4u-p-img-wrap {
    position: relative;
    overflow: visible; /* toolbar slides out from bottom without clipping */
    background: transparent;
}

/* Inner div clips the product images only (zoom effect stays contained) */
.m4u-p-img-inner {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #F5F5F5;
    border-radius: 2px;
}

.m4u-p-img-inner a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.m4u-p-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
    margin: 0;
}

.m4u-p-card:hover .m4u-p-img-inner img {
    transform: scale(1.06);
}

.m4u-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--m4u-dark);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    letter-spacing: 0.08em;
    z-index: 2;
    border-radius: 1px;
}

.m4u-p-details {
    padding: 12px 4px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

.m4u-p-category {
    display: block;
    font-family: var(--m4u-font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777777;
    text-align: center;
    margin-bottom: 4px;
    font-weight: 500;
}

.m4u-p-title {
    font-family: var(--m4u-font-body);
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    text-align: center;
    margin: 0 0 6px;
    padding: 0 4px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.m4u-p-title a {
    color: #111111;
    text-decoration: none;
}

.m4u-p-price {
    font-family: var(--m4u-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    padding: 0 4px;
    margin: 0;
}

.m4u-p-price del {
    font-size: 13px;
    color: #888888;
    font-weight: 400;
    margin-right: 0;
    text-decoration: line-through;
}

.m4u-p-price ins {
    text-decoration: none;
    color: #e53935;
    font-weight: 600;
    font-size: 14px;
}

.m4u-p-action {
    margin-top: auto;
}

.m4u-btn-card-add {
    display: block;
    width: 100%;
    padding: 9px 0;
    text-align: center;
    background: #F4F4F4;
    color: var(--m4u-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    border-radius: 2px;
    transition: all 0.25s ease;
    text-decoration: none;
    text-transform: uppercase;
}

.m4u-p-card:hover .m4u-btn-card-add {
    background: var(--m4u-dark);
    color: #FFFFFF;
}

/* =========================================================
   ADD TO BAG — Suppress WooCommerce native .added::after icon
   WooCommerce injects a checkmark via .added::after (font-family WooCommerce).
   Our JS sets the button text to "ADDED TO BAG" (no ✓ appended).
   We suppress the native CSS icon so only the text label is shown.
   ========================================================= */
.m4u-btn-card-add.added::after,
.m4u-btn-card-add.added:after {
    display: none !important;
    content: none !important;
}

/* Added state: accent background to signal success */
.m4u-btn-card-add.added {
    background: var(--m4u-accent) !important;
    color: #FFFFFF !important;
    cursor: default;
}

.m4u-center-btn {
    text-align: center;
    margin-top: 40px;
}

/* =========================================================
   EDITORIAL PROMO BANNER
   ========================================================= */
.m4u-promo-banner {
    position: relative;
    padding: 110px 0;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.m4u-promo-content {
    max-width: 560px;
}

.m4u-promo-content h2 {
    font-size: 42px;
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    color: #FFFFFF;
    margin: 10px 0 15px;
    line-height: 1.15;
}

.m4u-promo-content p {
    font-size: 16px;
    margin-bottom: 28px;
    color: #E2E2E2;
    line-height: 1.6;
}

/* =========================================================
   BRAND STORY SECTION — Editorial Asymmetric Grid
   ========================================================= */
.m4u-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.m4u-story-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.m4u-story-lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--m4u-dark);
    line-height: 1.7;
    margin-bottom: 16px;
}

.m4u-story-content p {
    color: #555555;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.m4u-story-cta {
    margin-top: 25px;
}

/* =========================================================
   TRUST SECTION — Subtle Luxury Benefits
   ========================================================= */
.m4u-trust-section {
    background-color: #FFFFFF;
    border-top: 1px solid var(--m4u-border);
    border-bottom: 1px solid var(--m4u-border);
    padding: 45px 0;
}

.m4u-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    text-align: center;
}

.m4u-trust-card i {
    font-size: 26px;
    color: var(--m4u-accent);
    margin-bottom: 12px;
    display: inline-block;
}

.m4u-trust-card h4 {
    font-size: 15px;
    margin: 0 0 6px;
    font-family: var(--m4u-font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--m4u-dark);
}

.m4u-trust-card p {
    font-size: 13px;
    color: var(--m4u-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Newsletter Section */
.m4u-newsletter-section {
    background: var(--m4u-dark);
    color: #FFFFFF;
    padding: 70px 0;
    text-align: center;
}

.m4u-newsletter-box {
    max-width: 600px;
    margin: 0 auto;
}

.m4u-newsletter-box h2 {
    color: #FFFFFF;
    font-size: 36px;
    margin: 10px 0 15px;
}

.m4u-newsletter-box p {
    color: #CCCCCC;
    margin-bottom: 30px;
}

.m4u-newsletter-form {
    display: flex;
    gap: 10px;
}

.m4u-newsletter-form input {
    flex-grow: 1;
    padding: 14px 20px;
    border: 1px solid #333333;
    border-radius: 2px;
    background: #1E1E1E;
    color: #FFFFFF;
    font-size: 14px;
}

.m4u-newsletter-form input:focus {
    outline: none;
    border-color: var(--m4u-accent);
}

.m4u-newsletter-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    padding: 10px 14px;
}

.m4u-newsletter-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    padding: 12px 16px;
}

.m4u-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* FAQ Accordion */
.m4u-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.m4u-accordion-item {
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 4px;
    overflow: hidden;
}

.m4u-accordion-header {
    width: 100%;
    padding: 18px 22px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    font-family: var(--m4u-font-body);
    text-align: left;
    cursor: pointer;
}

.m4u-accordion-body {
    display: none;
    padding: 0 22px 20px;
    color: #555555;
    font-size: 15px;
}

.m4u-accordion-item.active .m4u-accordion-body {
    display: block;
}

.m4u-accordion-item.active .m4u-accordion-header i {
    transform: rotate(180deg);
}

/* Contact Page */
.m4u-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 40px 0;
}

.m4u-contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.m4u-c-item {
    display: flex;
    gap: 15px;
}

.m4u-c-item i {
    font-size: 22px;
    color: var(--m4u-accent);
    margin-top: 4px;
}

.m4u-form-group {
    margin-bottom: 20px;
}

.m4u-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.m4u-form-group input, .m4u-form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    font-size: 14px;
    font-family: var(--m4u-font-body);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .m4u-section {
        padding: 65px 0;
    }
    .m4u-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 16px;
    }
    .m4u-cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .m4u-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .m4u-section {
        padding: 50px 0;
    }
    .m4u-hero-section {
        min-height: 480px;
        max-height: 600px;
        padding: 40px 16px;
    }
    .m4u-hero-eyebrow {
        font-size: 10px;
        letter-spacing: 0.22em;
    }
    .m4u-hero-title {
        font-size: 46px;
        letter-spacing: 0.06em;
    }
    .m4u-hero-slogan {
        font-size: 12px;
        letter-spacing: 0.28em;
    }
    .m4u-hero-desc {
        font-size: 14px;
        margin-bottom: 24px;
    }
    .m4u-heading {
        font-size: 28px;
    }
    .m4u-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
    }
    .m4u-p-details {
        padding: 10px 4px 12px;
    }
    .m4u-p-title {
        font-size: 13px;
    }
    .m4u-p-price {
        font-size: 13px;
        margin-bottom: 0;
    }
    .m4u-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .m4u-cat-info {
        padding: 12px 8px;
    }
    .m4u-cat-info h3 {
        font-size: 16px;
    }
    .m4u-story-grid, .m4u-contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .m4u-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .m4u-newsletter-form {
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .m4u-cat-grid {
        grid-template-columns: 1fr;
    }
}

/* Made4u Footer Styles */
.m4u-footer {
    background-color: var(--m4u-dark) !important;
    color: #CCCCCC !important;
    padding: 70px 0 30px !important;
    border-top: 1px solid #222222 !important;
    display: block !important;
}

.m4u-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

/* Tablet: footer collapses to 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    .m4u-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* Mobile: footer collapses to single column */
@media (max-width: 768px) {
    .m4u-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.m4u-f-logo .m4u-f-slogan,
.m4u-f-logo span {
    display: block;
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
    color: var(--m4u-accent) !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
}

.m4u-f-col h4 {
    color: #FFFFFF !important;
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 20px !important;
    font-family: var(--m4u-font-body) !important;
}

.m4u-f-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.m4u-f-col ul li {
    margin-bottom: 10px !important;
}

.m4u-f-col ul li a {
    color: #AAAAAA !important;
    font-size: 14px !important;
    transition: color 0.25s ease !important;
}

.m4u-f-col ul li a:hover {
    color: var(--m4u-accent) !important;
}

.m4u-footer-bottom {
    border-top: 1px solid #222222 !important;
    padding-top: 25px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px !important;
    color: #888888 !important;
    flex-wrap: wrap;
    gap: 15px;
}

.m4u-payment-badges span {
    background: #222222;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

/* =====================================================
   MADE4U OFFICIAL BRAND LOGO STYLING
   ===================================================== */
.site-branding,
.site-branding a,
.custom-logo-link,
.ast-site-identity {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.custom-logo,
img.custom-logo,
.site-logo-img img,
.ast-site-identity img {
    display: block !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
}

.custom-logo:hover,
.site-logo-img img:hover {
    transform: scale(1.02);
}

/* Hide plain text site title when official logo image is present */
.ast-site-identity .site-title,
.site-branding .site-title,
.site-description {
    display: none !important;
}

@media (max-width: 768px) {
    .custom-logo,
    img.custom-logo,
    .site-logo-img img,
    .ast-site-identity img {
        max-height: 38px !important;
    }
}

/* Hide all starter theme footers, widgets, and blue icons */
footer.site-footer,
#colophon,
.ast-footer-overlay,
.site-footer,
.footer-widget-area,
.site-footer-primary-section-1,
.site-footer-primary-section-2,
.ast-builder-footer-grid,
.botiga-footer-widgets,
.botiga-footer {
    display: none !important;
}

/* Ensure Made4u Custom Footer is visible */
.m4u-footer {
    display: block !important;
}

/* =========================================================
   BUTTON OVERRIDE — Targeted Specific Buttons Only
   ========================================================= */

.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce .button.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.woocommerce .woocommerce-cart-form button[name="update_cart"],
.wc-block-components-button,
input[type="submit"],
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
    background-color: var(--m4u-dark) !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
    font-family: var(--m4u-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: background-color 0.25s ease !important;
    border: none !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce .button.single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
input[type="submit"]:hover {
    background-color: var(--m4u-accent) !important;
    color: #FFFFFF !important;
}

/* =========================================================
   NAVIGATION — PREMIUM STYLISH HEADER
   ========================================================= */

/* ── Header Bar — Glassmorphism + gradient underline border */
.main-header-bar,
.ast-primary-header-bar,
#masthead .main-header-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.25) !important;
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.05) !important;
    transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Scrolled state — more compact & slightly elevated */
.main-header-bar.m4u-scrolled,
.ast-primary-header-bar.m4u-scrolled {
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.10) !important;
    background: rgba(255, 255, 255, 0.99) !important;
}

/* ── Nav Links — animated gradient underline on hover */
.ast-main-header-wrap .main-header-bar-navigation .ast-nav-link,
.main-navigation .nav-link,
header.site-header a.nav-link,
.main-header-menu > li > a,
.main-header-menu .menu-link {
    color: #1a1a1a !important;
    font-family: var(--m4u-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    position: relative !important;
    padding-bottom: 4px !important;
    transition: color 0.25s ease !important;
}

/* Animated underline — gradient bar slides in on hover */
.main-header-menu > li > a::after,
.main-header-menu .menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #C5A880 0%, #e8c99a 50%, #C5A880 100%) !important;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), left 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border-radius: 2px !important;
}

.main-header-menu > li > a:hover::after,
.main-header-menu > li.current-menu-item > a::after,
.main-header-menu > li.current_page_item > a::after,
.main-header-menu > li.current-menu-ancestor > a::after {
    width: 100% !important;
    left: 0 !important;
}

/* Active/current page link — golden accent */
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current_page_item > a,
.main-header-menu > li.current-menu-ancestor > a {
    color: var(--m4u-accent) !important;
}

.main-header-menu .menu-link:hover,
.main-navigation .nav-link:hover {
    color: var(--m4u-accent) !important;
}

/* ── Dropdown Submenu — premium card with staggered animation */
.sub-menu,
.main-header-menu .sub-menu {
    background: #FFFFFF !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    border-top: 2px solid var(--m4u-accent) !important;
    border-radius: 0 0 6px 6px !important;
    padding: 10px 0 12px !important;
    min-width: 200px !important;
    animation: m4u-dropdown-in 0.22s cubic-bezier(0.25, 1, 0.5, 1) both !important;
}

@keyframes m4u-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-menu li {
    background: transparent !important;
    border: none !important;
}

.sub-menu li a,
.sub-menu li a.ast-nav-link {
    color: #1a1a1a !important;
    padding: 10px 24px !important;
    font-family: var(--m4u-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Left accent stripe on submenu hover */
.sub-menu li a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 0px !important;
    background: var(--m4u-accent) !important;
    border-radius: 0 2px 2px 0 !important;
    transition: width 0.2s ease !important;
}

.sub-menu li a:hover::before {
    width: 3px !important;
}

.sub-menu li a:hover {
    color: var(--m4u-accent) !important;
    background: linear-gradient(90deg, rgba(197,168,128,0.07) 0%, transparent 100%) !important;
    padding-left: 30px !important;
}

/* Hide stray arrow icons inside submenu links */
.sub-menu .ast-icon,
.sub-menu .ast-arrow-svg {
    display: none !important;
}

/* ── Dropdown toggle arrow — subtle & clean */
button.ast-menu-toggle,
.dropdown-menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    color: var(--m4u-dark) !important;
    transition: transform 0.25s ease !important;
}

button.ast-menu-toggle svg,
.dropdown-menu-toggle svg {
    fill: var(--m4u-dark) !important;
    width: 11px !important;
    height: 11px !important;
    transition: fill 0.2s ease, transform 0.25s ease !important;
}

button.ast-menu-toggle:hover svg,
.dropdown-menu-toggle:hover svg {
    fill: var(--m4u-accent) !important;
}

/* Rotate arrow when dropdown is open */
.ast-submenu-open > button.ast-menu-toggle svg,
li.focus > button.ast-menu-toggle svg {
    transform: rotate(180deg) !important;
    fill: var(--m4u-accent) !important;
}

/* =========================================================
   MOBILE HAMBURGER & CLOSE (×) TOGGLE LOGIC
   ========================================================= */

button.menu-toggle,
button.main-header-menu-toggle,
button.ast-mobile-menu-trigger-minimal {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 8px !important;
    margin: 0 !important;
    color: var(--m4u-dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.25s ease !important;
}

button.menu-toggle:hover {
    background: transparent !important;
    transform: scale(1.08) !important;
}

/* SVG icons default: 24px and dark */
button.menu-toggle svg.ast-mobile-svg {
    fill: var(--m4u-dark) !important;
    color: var(--m4u-dark) !important;
    width: 24px !important;
    height: 24px !important;
    transition: fill 0.2s ease !important;
}

/* WHEN MENU IS CLOSED: show 3-line hamburger, hide close (×) */
button.menu-toggle:not(.open):not(.is-active) svg.ast-menu-svg {
    display: block !important;
}

button.menu-toggle:not(.open):not(.is-active) svg.ast-close-svg {
    display: none !important;
}

/* WHEN MENU IS OPEN: hide hamburger, show close (×) */
button.menu-toggle.open svg.ast-menu-svg,
button.menu-toggle.is-active svg.ast-menu-svg,
.ast-main-header-nav-open button.menu-toggle svg.ast-menu-svg,
button.menu-toggle[aria-expanded="true"] svg.ast-menu-svg {
    display: none !important;
}

button.menu-toggle.open svg.ast-close-svg,
button.menu-toggle.is-active svg.ast-close-svg,
.ast-main-header-nav-open button.menu-toggle svg.ast-close-svg,
button.menu-toggle[aria-expanded="true"] svg.ast-close-svg {
    display: block !important;
}

button.menu-toggle:hover svg.ast-mobile-svg {
    fill: var(--m4u-accent) !important;
}

/* ── Mobile nav panel — clean slide-down */
@media (max-width: 920px) {
    .ast-mobile-menu-trigger-minimal + .main-navigation,
    .main-navigation.toggle-on {
        background: #FFFFFF !important;
        border-top: 2px solid var(--m4u-accent) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
        animation: m4u-mobile-nav-in 0.28s cubic-bezier(0.25, 1, 0.5, 1) both !important;
    }

    @keyframes m4u-mobile-nav-in {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Mobile nav links */
    .main-navigation .ast-nav-link,
    .main-navigation li a {
        font-family: var(--m4u-font-body) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: #1a1a1a !important;
        padding: 14px 22px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        transition: color 0.2s ease, background 0.2s ease !important;
    }

    .main-navigation li a:hover {
        color: var(--m4u-accent) !important;
        background: rgba(197, 168, 128, 0.06) !important;
    }
}

/* =========================================================
   MADE4U BUTTONS & LINK OVERRIDES
   ========================================================= */

a:not(.m4u-btn):not(.m4u-btn-primary):not(.m4u-btn-outline):not(.m4u-btn-dark):not(.m4u-btn-accent):not(.m4u-btn-card-add):not(.m4u-cat-card):not(.button):not(.wc-block-components-button) {
    color: var(--m4u-dark);
    transition: color 0.2s ease;
}

a:not(.m4u-btn):not(.m4u-btn-primary):not(.m4u-btn-outline):not(.m4u-btn-dark):not(.m4u-btn-accent):not(.m4u-btn-card-add):not(.m4u-cat-card):not(.button):not(.wc-block-components-button):hover {
    color: var(--m4u-accent);
}

.m4u-btn,
.m4u-btn-primary,
.m4u-btn-dark,
.m4u-btn-accent,
a.m4u-btn,
a.m4u-btn-primary,
a.m4u-btn-dark,
a.m4u-btn-accent {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

a.m4u-btn-card-add,
.m4u-btn-card-add {
    color: var(--m4u-dark) !important;
    text-decoration: none !important;
}

.m4u-p-card:hover .m4u-btn-card-add,
.m4u-p-card:hover a.m4u-btn-card-add {
    color: #FFFFFF !important;
    background: var(--m4u-dark) !important;
}

a.m4u-btn-outline {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

a.m4u-btn-outline:hover {
    color: var(--m4u-dark) !important;
    background-color: #FFFFFF !important;
}

/* Trust section icon color explicitly gold */
.m4u-trust-card i,
.m4u-trust-card svg {
    color: var(--m4u-accent) !important;
    fill: var(--m4u-accent) !important;
}

/* ==========================================================
   MADE4U BUSINESS SYSTEM v2.0.0
   My Account · Order Tracking · Product Tabs · Shipped Status
   ========================================================== */

/* =========================================================
   WooCommerce ORDER STATUS BADGES
   ========================================================= */
mark.order-status,
.woocommerce-order-status,
.order-status {
    border-radius: 2px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
}

/* Shipped status — gold */
.wc-shipped,
.order-status.status-shipped,
mark.status-shipped,
.m4u-status-shipped {
    background: var(--m4u-accent) !important;
    color: #FFFFFF !important;
}

/* Processing — dark */
.order-status.status-processing,
mark.status-processing {
    background: var(--m4u-dark) !important;
    color: #FFFFFF !important;
}

/* Completed — deep green */
.order-status.status-completed,
mark.status-completed,
.m4u-status-completed {
    background: #2E7D5A !important;
    color: #FFFFFF !important;
}

/* Cancelled / Failed */
.order-status.status-cancelled,
mark.status-cancelled,
.m4u-status-cancelled {
    background: #B0381E !important;
    color: #FFFFFF !important;
}

.order-status.status-pending,
mark.status-pending,
.m4u-status-pending,
.m4u-status-processing {
    background: #444444 !important;
    color: #FFFFFF !important;
}

/* =========================================================
   MY ACCOUNT PAGE — Full Made4u Branding
   ========================================================= */

.woocommerce-account .woocommerce {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ---- Sidebar Nav ---- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 240px;
    flex-shrink: 0;
    background: var(--m4u-dark);
    border-radius: 2px;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.woocommerce-account .woocommerce-MyAccount-navigation::before {
    content: '';
    display: block;
    background: var(--m4u-accent);
    height: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 16px 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 13px 22px !important;
    color: #AAAAAA !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    font-family: var(--m4u-font-body) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #FFFFFF !important;
    background: rgba(197,168,128,0.12) !important;
    padding-left: 28px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
    color: var(--m4u-accent) !important;
    background: rgba(197,168,128,0.15) !important;
    border-left: 3px solid var(--m4u-accent);
    padding-left: 19px !important;
}

/* ---- Content Area ---- */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
}

/* ---- My Account Dashboard ---- */
.woocommerce-account .woocommerce-MyAccount-content p.woocommerce-notice--info,
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-left: 4px solid var(--m4u-accent);
    padding: 16px 20px;
    border-radius: 2px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ---- Orders Table ---- */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    overflow: hidden;
    font-family: var(--m4u-font-body);
}

.woocommerce-account table.woocommerce-orders-table thead,
.woocommerce-account table.shop_table thead {
    background: var(--m4u-dark);
}

.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
    border: none !important;
}

.woocommerce-account table.woocommerce-orders-table tbody tr,
.woocommerce-account table.shop_table tbody tr {
    border-bottom: 1px solid var(--m4u-border);
    transition: background 0.2s ease;
}

.woocommerce-account table.woocommerce-orders-table tbody tr:hover,
.woocommerce-account table.shop_table tbody tr:hover {
    background: #FAFAFA;
}

.woocommerce-account table.woocommerce-orders-table tbody td,
.woocommerce-account table.shop_table tbody td {
    padding: 14px 18px !important;
    font-size: 14px !important;
    color: var(--m4u-dark) !important;
    vertical-align: middle !important;
}

.woocommerce-account table.woocommerce-orders-table tbody td .button,
.woocommerce-account table.woocommerce-orders-table tbody td a.button {
    font-size: 11px !important;
    padding: 7px 16px !important;
    letter-spacing: 0.08em !important;
}

/* ---- Order Detail Page ---- */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
    margin-bottom: 35px;
}

.woocommerce-account h2.woocommerce-order-details__title,
.woocommerce-account h2.woocommerce-column__title {
    font-size: 16px !important;
    font-family: var(--m4u-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--m4u-dark) !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--m4u-border) !important;
    margin-bottom: 18px !important;
}

/* ---- Address Boxes ---- */
.woocommerce-account address {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #555 !important;
}

/* ---- Account Form (Login / Register / Edit) ---- */
.woocommerce-account form.woocommerce-form,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce form.lost_reset_password {
    max-width: 520px;
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    padding: 36px 40px;
}

.woocommerce-account .u-columns.col2-set form.login,
.woocommerce-account .u-columns.col2-set form.register,
.woocommerce .u-columns.col2-set form.login,
.woocommerce .u-columns.col2-set form.register {
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.woocommerce-account form .woocommerce-form-row label,
.woocommerce form .woocommerce-form-row label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--m4u-dark) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.woocommerce-account form .woocommerce-form-row input,
.woocommerce form .woocommerce-form-row input {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--m4u-border) !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    font-family: var(--m4u-font-body) !important;
    color: var(--m4u-dark) !important;
    background: #FAFAFA !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.woocommerce-account form .woocommerce-form-row input:focus,
.woocommerce form .woocommerce-form-row input:focus {
    outline: none !important;
    border-color: var(--m4u-accent) !important;
    background: #FFFFFF !important;
}

/* My Account page header when shown without sidebar */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper + h2,
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child {
    font-size: 22px;
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--m4u-dark);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--m4u-border);
}

/* ---- Login / Register page layout ---- */
.woocommerce-account .u-columns.col2-set,
.woocommerce .u-columns.col2-set,
#customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 35px !important;
    align-items: start !important;
    max-width: 1050px !important;
    margin: 20px auto 40px !important;
    width: 100% !important;
}

.woocommerce .u-columns.col2-set .col-1,
.woocommerce .u-columns.col2-set .col-2,
.woocommerce .u-columns.col2-set .u-column1,
.woocommerce .u-columns.col2-set .u-column2,
#customer_login .col-1,
#customer_login .col-2,
#customer_login .u-column1,
#customer_login .u-column2 {
    background: #FFFFFF !important;
    border: 1px solid var(--m4u-border) !important;
    border-radius: 2px !important;
    padding: 36px 40px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    float: none !important;
}

.woocommerce .u-columns.col2-set h2,
#customer_login h2 {
    font-size: 18px !important;
    font-family: var(--m4u-font-heading) !important;
    font-weight: 600 !important;
    color: var(--m4u-dark) !important;
    margin: 0 0 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--m4u-border) !important;
    letter-spacing: -0.01em !important;
}

/* ---- Notices ---- */
.woocommerce-account .woocommerce-message,
.woocommerce .woocommerce-message {
    background: #FFFFFF !important;
    border-left: 4px solid #2E7D5A !important;
    color: var(--m4u-dark) !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
    margin-bottom: 24px !important;
}

.woocommerce-account .woocommerce-error,
.woocommerce .woocommerce-error {
    border-left: 4px solid #B0381E !important;
    border-radius: 2px !important;
}

/* =========================================================
   CUSTOMER-FACING ORDER TRACKING (My Account order detail)
   ========================================================= */

.m4u-tracking-info-block {
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--m4u-dark);
    border-radius: 2px;
    color: #FFFFFF;
}

.m4u-tracking-heading {
    font-size: 14px !important;
    font-family: var(--m4u-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--m4u-accent) !important;
    margin: 0 0 18px !important;
}

.m4u-tracking-heading i {
    margin-right: 8px;
}

.m4u-tracking-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m4u-track-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.m4u-track-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    min-width: 130px;
}

.m4u-track-value {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 500;
}

.m4u-track-btn {
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.m4u-tracking-pending {
    background: #F8F8F8 !important;
    border: 1px solid var(--m4u-border) !important;
    border-left: 4px solid var(--m4u-accent) !important;
}

.m4u-tracking-pending p {
    margin: 0;
    color: #555;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.m4u-tracking-pending i {
    color: var(--m4u-accent);
    font-size: 20px;
}

/* =========================================================
   ORDER TRACKING PAGE — [made4u_order_tracking]
   ========================================================= */

.m4u-track-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.m4u-track-header {
    text-align: center;
    margin-bottom: 40px;
}

.m4u-track-title {
    font-size: 34px;
    font-family: var(--m4u-font-heading);
    font-weight: 600;
    color: var(--m4u-dark);
    margin: 8px 0 12px;
}

.m4u-track-desc {
    font-size: 15px;
    color: var(--m4u-text-muted);
    margin: 0;
}

/* ---- Tracking Form ---- */
.m4u-track-form-wrap {
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    padding: 36px 40px;
}

.m4u-track-error {
    background: #fff5f5;
    border: 1px solid #fcc;
    border-left: 4px solid #B0381E;
    padding: 12px 18px;
    border-radius: 2px;
    font-size: 14px;
    color: #B0381E;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.m4u-track-field {
    margin-bottom: 20px;
}

.m4u-track-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m4u-dark);
    margin-bottom: 7px;
}

.m4u-required {
    color: var(--m4u-accent);
}

.m4u-track-field input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    font-size: 14px;
    font-family: var(--m4u-font-body);
    color: var(--m4u-dark);
    background: #FAFAFA;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.m4u-track-field input:focus {
    outline: none;
    border-color: var(--m4u-accent);
    background: #FFFFFF;
}

.m4u-track-submit {
    width: 100%;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 13px !important;
}

.m4u-track-help {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--m4u-text-muted);
}

.m4u-track-help a {
    color: var(--m4u-accent);
    font-weight: 600;
}

/* ---- Tracking Result ---- */
.m4u-track-result {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Summary bar */
.m4u-track-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    overflow: hidden;
}

.m4u-track-sum-item {
    padding: 18px 20px;
    border-right: 1px solid var(--m4u-border);
    text-align: center;
}

.m4u-track-sum-item:last-child {
    border-right: none;
}

.m4u-track-sum-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m4u-text-muted);
    margin-bottom: 5px;
}

.m4u-track-sum-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--m4u-dark);
    line-height: 1.3;
}

/* Status badge inside summary */
.m4u-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Progress Steps */
.m4u-track-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    padding: 28px 24px;
    gap: 0;
    overflow-x: auto;
}

.m4u-track-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 80px;
}

.m4u-track-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--m4u-border);
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CCCCCC;
    font-size: 16px;
    transition: all 0.3s ease;
}

.m4u-track-step.done .m4u-track-step-icon {
    background: #F0EAE0;
    border-color: var(--m4u-accent);
    color: var(--m4u-accent);
}

.m4u-track-step.active .m4u-track-step-icon {
    background: var(--m4u-accent);
    border-color: var(--m4u-accent);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(197,168,128,0.4);
}

.m4u-track-step-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #AAAAAA;
    text-transform: uppercase;
    text-align: center;
}

.m4u-track-step.done .m4u-track-step-label,
.m4u-track-step.active .m4u-track-step-label {
    color: var(--m4u-dark);
}

.m4u-track-connector {
    flex: 1;
    height: 2px;
    background: var(--m4u-border);
    min-width: 20px;
    margin-bottom: 22px;
    transition: background 0.3s ease;
}

.m4u-track-connector.done {
    background: var(--m4u-accent);
}

/* Items List */
.m4u-track-items {
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    padding: 22px 24px;
}

.m4u-track-items-title {
    font-size: 13px !important;
    font-family: var(--m4u-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--m4u-text-muted) !important;
    margin: 0 0 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--m4u-border) !important;
}

.m4u-track-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m4u-track-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.m4u-track-item img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--m4u-border);
    flex-shrink: 0;
}

.m4u-track-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--m4u-dark);
    margin: 0 0 3px;
}

.m4u-track-item-qty {
    font-size: 12px;
    color: var(--m4u-text-muted);
    margin: 0;
}

/* Courier Box */
.m4u-track-courier-box {
    background: var(--m4u-dark);
    border-radius: 2px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m4u-track-courier-title {
    font-size: 13px !important;
    font-family: var(--m4u-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--m4u-accent) !important;
    margin: 0 0 6px !important;
}

.m4u-track-courier-row {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
}

.m4u-track-courier-row span {
    color: #888;
    min-width: 130px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.m4u-track-courier-row strong {
    color: #FFFFFF;
}

.m4u-track-courier-btn {
    margin-top: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    align-self: flex-start !important;
}

/* Pending tracking box */
.m4u-track-pending-box {
    background: #FAFAFA;
    border: 1px solid var(--m4u-border);
    border-left: 4px solid var(--m4u-accent);
    border-radius: 2px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.m4u-track-pending-box i {
    font-size: 22px;
    color: var(--m4u-accent);
    flex-shrink: 0;
}

.m4u-track-pending-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.m4u-track-again {
    text-align: center;
    padding-top: 10px;
}

/* =========================================================
   PRODUCT SUIT DETAILS TAB
   ========================================================= */

.m4u-suit-details-tab {
    padding: 10px 0;
}

.m4u-unstitched-notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--m4u-dark);
    color: #FFFFFF;
    padding: 18px 22px;
    border-radius: 2px;
    margin-bottom: 24px;
}

.m4u-unstitched-notice i {
    font-size: 22px;
    color: var(--m4u-accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.m4u-unstitched-notice strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m4u-accent);
    margin-bottom: 5px;
}

.m4u-unstitched-notice p {
    margin: 0;
    font-size: 14px;
    color: #CCCCCC;
    line-height: 1.6;
}

.m4u-suit-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--m4u-border);
}

.m4u-suit-detail-row:last-child {
    border-bottom: none;
}

.m4u-suit-detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--m4u-text-muted);
    min-width: 130px;
    padding-top: 2px;
}

.m4u-suit-detail-value {
    font-size: 15px;
    color: var(--m4u-dark);
    font-weight: 500;
    flex: 1;
}

.m4u-suit-items-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.m4u-suit-items-list li {
    padding: 4px 0 4px 20px;
    position: relative;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.m4u-suit-items-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--m4u-accent);
    font-weight: 700;
}

/* =========================================================
   MOBILE RESPONSIVENESS — My Account & Tracking
   ========================================================= */

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 200px;
    }
    .m4u-track-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .m4u-track-sum-item:nth-child(2) {
        border-right: none;
    }
    .m4u-track-sum-item:nth-child(3) {
        border-top: 1px solid var(--m4u-border);
    }
    .m4u-track-sum-item:nth-child(4) {
        border-top: 1px solid var(--m4u-border);
    }
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 24px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
        position: static;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 8px !important;
        gap: 4px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border-bottom: none !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 8px 14px !important;
        font-size: 10px !important;
        border-radius: 2px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
        padding-left: 14px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        padding-left: 14px !important;
        border-left: none !important;
        border-bottom: 2px solid var(--m4u-accent) !important;
    }

    /* My Account tables responsive */
    .woocommerce-account table.woocommerce-orders-table thead {
        display: none !important;
    }
    .woocommerce-account table.woocommerce-orders-table,
    .woocommerce-account table.woocommerce-orders-table tbody,
    .woocommerce-account table.woocommerce-orders-table tr,
    .woocommerce-account table.woocommerce-orders-table td {
        display: block !important;
        width: 100% !important;
    }
    .woocommerce-account table.woocommerce-orders-table tbody td {
        text-align: right !important;
        padding: 10px 14px !important;
        position: relative;
    }
    .woocommerce-account table.woocommerce-orders-table tbody td::before {
        content: attr(data-title);
        position: absolute;
        left: 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--m4u-text-muted);
    }
    .woocommerce-account table.woocommerce-orders-table tbody tr {
        margin-bottom: 16px;
        border: 1px solid var(--m4u-border) !important;
        border-radius: 2px;
    }

    /* Login/Register 2-col → stack */
    .woocommerce .u-columns.col2-set {
        grid-template-columns: 1fr;
    }

    /* Account forms full-width on mobile */
    .woocommerce-account form.woocommerce-form,
    .woocommerce-account .woocommerce-EditAccountForm,
    .woocommerce form.login,
    .woocommerce form.register {
        padding: 24px 20px;
    }

    /* Tracking page */
    .m4u-track-form-wrap {
        padding: 24px 20px;
    }
    .m4u-track-summary {
        grid-template-columns: 1fr 1fr;
    }
    .m4u-track-sum-item {
        padding: 14px;
    }
    .m4u-track-progress {
        padding: 22px 16px;
        gap: 0;
        justify-content: flex-start;
    }
    .m4u-track-step {
        min-width: 60px;
    }
    .m4u-track-step-icon {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .m4u-track-step-label {
        font-size: 9px;
    }
    .m4u-track-connector {
        min-width: 12px;
    }
    .m4u-track-courier-box {
        padding: 18px 18px;
    }
    .m4u-track-courier-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .m4u-tracking-info-block {
        padding: 18px 18px;
    }
    .m4u-track-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .m4u-suit-detail-row {
        flex-direction: column;
        gap: 6px;
    }
    .m4u-suit-detail-label {
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .m4u-track-title {
        font-size: 26px;
    }
    .m4u-track-summary {
        grid-template-columns: 1fr;
    }
    .m4u-track-sum-item {
        border-right: none;
        border-bottom: 1px solid var(--m4u-border);
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .m4u-track-sum-item:last-child {
        border-bottom: none;
    }
    .m4u-track-progress {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .m4u-track-page {
        padding: 24px 16px 40px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        font-size: 9px !important;
        padding: 7px 10px !important;
    }
}

/* =========================================================
   WOOCOMMERCE GENERAL IMPROVEMENTS
   ========================================================= */

/* Checkout account creation notice */
.woocommerce-checkout .woocommerce-account-fields {
    background: #FAFAFA;
    border: 1px solid var(--m4u-border);
    border-left: 4px solid var(--m4u-accent);
    border-radius: 2px;
    padding: 16px 20px;
    margin-top: 16px;
}

/* Lost password form */
.woocommerce .lost_reset_password {
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--m4u-border);
    border-radius: 2px;
    max-width: 460px;
}

/* Password reset success */
.woocommerce .woocommerce-message a.button {
    margin-left: 12px;
}

/* =========================================================
   MADE4U SHOPPING BAG & HEADER COUNT BADGE
   ========================================================= */

.ast-site-header-cart {
    display: inline-flex;
    align-items: center;
}

.ast-site-header-cart a.cart-container {
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    padding: 6px 8px;
}

.ast-site-header-cart i.astra-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--m4u-dark, #121212);
    transition: color 0.2s ease;
}

.ast-site-header-cart a.cart-container:hover i.astra-icon {
    color: var(--m4u-accent, #C5A880);
}

.ast-site-header-cart i.astra-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.ast-site-header-cart i.astra-icon:after {
    content: attr(data-cart-total) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: -6px !important;
    right: -9px !important;
    background-color: var(--m4u-accent, #C5A880) !important;
    color: #FFFFFF !important;
    font-family: var(--m4u-font-body, system-ui, -apple-system, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    height: 17px !important;
    min-width: 17px !important;
    padding: 0 4px !important;
    border-radius: 99px !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

/* Mobile header bag icon integration */
@media (max-width: 921px) {
    .ast-mobile-header-wrap .ast-header-woo-cart {
        display: inline-flex;
        align-items: center;
        margin-right: 8px;
    }
    .ast-mobile-header-wrap .ast-site-header-cart a.cart-container {
        padding: 4px 6px;
    }
    .ast-mobile-header-wrap .ast-site-header-cart i.astra-icon svg {
        width: 20px;
        height: 20px;
    }
    .ast-mobile-header-wrap .ast-site-header-cart .ast-woo-header-cart-total {
        display: none;
    }
}

/* =========================================================
 * WHATSAPP PRODUCT INQUIRY FEATURE STYLES
 * ========================================================= */

/* 1. Loop Product Card WhatsApp Button (Shop, Categories, Search) */
.m4u-btn-whatsapp-loop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #25D366;
    color: #FFFFFF !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    border-radius: 3px;
    text-decoration: none;
    margin-top: 8px;
    transition: all 0.25s ease;
    width: 100%;
    box-sizing: border-box;
    border: none;
    line-height: 1.3;
}

.m4u-btn-whatsapp-loop i {
    font-size: 14px;
}

.m4u-btn-whatsapp-loop:hover,
.m4u-btn-whatsapp-loop:focus {
    background-color: #1EBE5D;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    outline: 2px solid #1EBE5D;
    outline-offset: 1px;
}

/* 2. Homepage Section Product Card Action Buttons */
.m4u-p-action {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.m4u-p-action .m4u-btn-card-add {
    flex: 1;
    margin: 0;
}

.m4u-btn-whatsapp-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #25D366;
    color: #FFFFFF !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 12px;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.25s ease;
    flex: 1;
    box-sizing: border-box;
    border: none;
    line-height: 1.3;
}

.m4u-btn-whatsapp-card i {
    font-size: 14px;
}

.m4u-btn-whatsapp-card:hover,
.m4u-btn-whatsapp-card:focus {
    background-color: #1EBE5D;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    outline: 2px solid #1EBE5D;
    outline-offset: 1px;
}

/* 3. Single Product Page WhatsApp Inquiry Button */
.m4u-single-whatsapp-wrap {
    margin-top: 14px;
    margin-bottom: 12px;
    width: 100%;
    clear: both;
}

.m4u-btn-whatsapp-single {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: #FFFFFF !important;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 13px 26px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.25s ease;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
    border: none;
}

.m4u-btn-whatsapp-single i {
    font-size: 18px;
}

.m4u-btn-whatsapp-single:hover,
.m4u-btn-whatsapp-single:focus {
    background-color: #1EBE5D;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
    outline: 2px solid #1EBE5D;
    outline-offset: 2px;
}

/* =========================================================
   POLICY PAGES & POLICY LINKS STYLING
   ========================================================= */

/* Policy Pages Container */
.m4u-policy-container {
    max-width: 860px;
    margin: 20px auto 50px auto;
    padding: 0 20px;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    color: #333333;
    line-height: 1.7;
}

.m4u-policy-container .m4u-policy-lead {
    font-size: 16px;
    line-height: 1.75;
    color: #222222;
    margin-bottom: 24px;
}

.m4u-policy-container h2 {
    font-family: var(--m4u-font-heading, 'Playfair Display', Georgia, serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--m4u-dark, #121212);
    margin: 36px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--m4u-border, #E8E8E8);
    letter-spacing: -0.01em;
}

.m4u-policy-container p {
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 16px;
}

.m4u-policy-container .m4u-policy-list,
.m4u-policy-container .m4u-policy-ordered-list {
    margin: 16px 0 20px 24px;
    line-height: 1.75;
    color: #444444;
}

.m4u-policy-container li {
    margin-bottom: 8px;
}

.m4u-policy-container strong {
    color: var(--m4u-dark, #121212);
}

.m4u-policy-container .m4u-policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 24px 0;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid var(--m4u-border, #E8E8E8);
    border-radius: 6px;
    overflow: hidden;
}

.m4u-policy-container .m4u-policy-table th {
    background: #f8f8f8;
    color: var(--m4u-dark, #121212);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--m4u-border, #E8E8E8);
}

.m4u-policy-container .m4u-policy-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #444444;
}

.m4u-policy-container .m4u-policy-table tr:last-child td {
    border-bottom: none;
}

.m4u-policy-container .m4u-policy-table tr:hover {
    background: #fafafa;
}

@media (max-width: 768px) {
    .m4u-policy-container {
        padding: 0 15px;
        margin: 15px auto 40px auto;
    }
    .m4u-policy-container h2 {
        font-size: 20px;
        margin-top: 28px;
    }
    .m4u-policy-container .m4u-policy-lead {
        font-size: 15px;
    }
    .m4u-policy-container .m4u-policy-table {
        font-size: 13px;
    }
    .m4u-policy-container .m4u-policy-table th,
    .m4u-policy-container .m4u-policy-table td {
        padding: 9px 10px;
    }
}

/* Single Product Page - 4-Item Trust Strip */
.m4u-pdp-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0 20px;
    padding: 16px 14px;
    background: #FAFAFA;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
}

.m4u-pdp-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.m4u-pdp-trust-icon {
    font-size: 18px;
    color: var(--m4u-accent, #C5A880);
    margin-top: 2px;
    flex-shrink: 0;
    line-height: 1;
}

.m4u-pdp-trust-text {
    font-size: 11.5px;
    line-height: 1.45;
    color: #555555;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
}

.m4u-pdp-trust-text strong {
    display: block;
    color: var(--m4u-dark, #121212);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

.m4u-pdp-trust-text a {
    color: var(--m4u-dark, #121212);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.m4u-pdp-trust-text a:hover {
    color: var(--m4u-accent, #C5A880);
}

@media (max-width: 767px) {
    .m4u-pdp-trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 10px;
        padding: 14px 12px;
    }
}

/* Checkout Page - Policy Bar */
.m4u-checkout-policies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 16px auto;
    padding: 13px 20px;
    background: #FFFFFF;
    border: 1px solid var(--m4u-border, #E8E8E8);
    border-radius: 6px;
    font-size: 13px;
    color: #555555;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    max-width: 650px;
    text-align: center;
}

.m4u-checkout-policies .m4u-checkout-trust-badge {
    font-weight: 600;
    color: var(--m4u-dark, #121212);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m4u-checkout-policies .m4u-checkout-trust-badge i {
    color: #2E7D32;
    font-size: 14px;
}

.m4u-checkout-policies a {
    color: var(--m4u-dark, #121212);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.m4u-checkout-policies a:hover {
    color: var(--m4u-accent, #C5A880);
}

.m4u-checkout-policies .m4u-sep {
    color: #CCCCCC;
    font-size: 11px;
}

/* Single Product Free Shipping Badge */
.m4u-product-policy-links .m4u-product-free-shipping {
    font-weight: 600;
    color: var(--m4u-dark, #121212);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.m4u-product-policy-links .m4u-product-free-shipping i {
    color: #2E7D32;
    font-size: 13px;
}

.m4u-product-policy-links .m4u-sep {
    color: #CCCCCC;
    font-size: 11px;
}

/* Cart & Checkout Free Delivery Dynamic Progress Banner */
.m4u-free-shipping-progress-wrap {
    background: #FFFFFF;
    border: 1px solid var(--m4u-border, #E8E8E8);
    border-radius: 8px;
    padding: 14px 20px;
    margin: 16px 0 24px 0;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.m4u-free-shipping-progress-wrap .m4u-fsp-message {
    font-size: 14px;
    color: #333333;
    margin-bottom: 8px;
    line-height: 1.5;
}

.m4u-free-shipping-progress-wrap .m4u-fsp-message i {
    color: var(--m4u-accent, #C5A880);
    margin-right: 6px;
    font-size: 15px;
}

.m4u-free-shipping-progress-wrap .m4u-fsp-message.m4u-fsp-qualified i {
    color: #2E7D32;
}

.m4u-free-shipping-progress-wrap .m4u-fsp-bar {
    height: 7px;
    background: #F0F0F0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.m4u-free-shipping-progress-wrap .m4u-fsp-fill {
    height: 100%;
    background: linear-gradient(90deg, #C5A880, #DFC8A7);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.m4u-free-shipping-progress-wrap .m4u-fsp-fill.m4u-fsp-full {
    background: linear-gradient(90deg, #2E7D32, #4CAF50);
}


/* =========================================================
   AUTH PAGES — Phase 5 — Login & Register
   ========================================================= */

/* Page wrapper — full min-height, centred card */
.m4u-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F6F2EE;
    padding: 48px 20px;
    position: relative;
}

/* Warm gold top-bar accent */
.m4u-auth-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m4u-accent), #E8D5BA, var(--m4u-accent));
    z-index: 10;
}

/* Card container */
.m4u-auth-card {
    background: #FFFFFF;
    border: 1px solid rgba(197, 168, 128, 0.18);
    border-radius: 2px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    padding: 52px 48px 48px;
    width: 100%;
    max-width: 480px;
    position: relative;
}

/* Header — logo + title */
.m4u-auth-header {
    text-align: center;
    margin-bottom: 34px;
}

.m4u-auth-logo {
    display: block;
    margin: 0 auto 22px;
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

.m4u-auth-title {
    font-family: var(--m4u-font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--m4u-dark);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.m4u-auth-subtitle {
    font-size: 14px;
    color: var(--m4u-text-muted);
    margin: 0;
    line-height: 1.6;
    font-family: var(--m4u-font-body);
}

/* WooCommerce notices inside auth card */
.m4u-auth-notices .woocommerce-error,
.m4u-auth-notices .woocommerce-message,
.m4u-auth-notices .woocommerce-info {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 14px;
    list-style: none;
    border-left: 3px solid;
}
.m4u-auth-notices .woocommerce-error  { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.m4u-auth-notices .woocommerce-message { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.m4u-auth-notices .woocommerce-info   { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }

/* Error / success banners (custom) */
.m4u-auth-error,
.m4u-auth-success {
    padding: 13px 16px;
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.6;
    animation: m4u-auth-fadein 0.3s ease;
}
.m4u-auth-error   { background: #fef6f6; border: 1px solid rgba(239,68,68,0.25); color: #991b1b; border-left: 3px solid #ef4444; }
.m4u-auth-success { background: #f0fdf4; border: 1px solid rgba(34,197,94,0.25); color: #166534; border-left: 3px solid #22c55e; }
.m4u-auth-error a   { color: #991b1b; text-decoration: underline; }
.m4u-auth-success a { color: #166534; text-decoration: underline; }

@keyframes m4u-auth-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .m4u-auth-error, .m4u-auth-success { animation: none; }
}

/* Form */
.m4u-auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Field wrapper */
.m4u-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m4u-auth-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--m4u-dark);
    text-transform: uppercase;
    font-family: var(--m4u-font-body);
}

/* Inputs */
.m4u-auth-input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #DDDDD8;
    border-radius: 2px;
    font-size: 15px;
    font-family: var(--m4u-font-body);
    color: var(--m4u-dark);
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.m4u-auth-input:focus {
    border-color: var(--m4u-accent);
    box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.14);
}

.m4u-auth-input::placeholder {
    color: #C2C2BC;
    font-size: 14px;
}

.m4u-auth-input.m4u-input-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}

.m4u-auth-input.m4u-input-success {
    border-color: #22c55e;
}

/* Password field with toggle */
.m4u-pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.m4u-pwd-wrap .m4u-auth-input {
    padding-right: 46px;
}

.m4u-pwd-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #AAAAAA;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
    font-size: 15px;
    border-radius: 2px;
}

.m4u-pwd-toggle:hover,
.m4u-pwd-toggle:focus {
    color: var(--m4u-accent);
    outline: 2px solid rgba(197,168,128,0.3);
}

.m4u-pwd-toggle svg {
    display: block;
    width: 17px;
    height: 17px;
    pointer-events: none;
}

/* Password strength meter */
.m4u-pwd-strength { margin-top: 6px; }

.m4u-pwd-strength-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}

.m4u-pwd-strength-bar span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #E8E8E0;
    transition: background 0.3s ease;
}

.m4u-pwd-strength-bar span.active-weak   { background: #ef4444; }
.m4u-pwd-strength-bar span.active-fair   { background: #f97316; }
.m4u-pwd-strength-bar span.active-good   { background: #eab308; }
.m4u-pwd-strength-bar span.active-strong { background: #22c55e; }

.m4u-pwd-strength-label { font-size: 11px; color: var(--m4u-text-muted); letter-spacing: 0.04em; transition: color 0.3s; }
.m4u-pwd-strength-label.weak   { color: #ef4444; }
.m4u-pwd-strength-label.fair   { color: #f97316; }
.m4u-pwd-strength-label.good   { color: #eab308; }
.m4u-pwd-strength-label.strong { color: #22c55e; }

/* Inline field validation message */
.m4u-field-msg {
    font-size: 12px;
    margin-top: 3px;
    display: none;
}
.m4u-field-msg.m4u-msg-error   { display: block; color: #ef4444; }
.m4u-field-msg.m4u-msg-success { display: block; color: #22c55e; }

/* Two-column row (First Name / Last Name) */
.m4u-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Remember me + Forgot password row */
.m4u-auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    gap: 12px;
    flex-wrap: wrap;
}

.m4u-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--m4u-dark);
    font-size: 13px;
}

.m4u-auth-remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--m4u-accent);
    cursor: pointer;
}

.m4u-auth-forgot {
    font-size: 13px;
    color: var(--m4u-accent);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.m4u-auth-forgot:hover {
    color: var(--m4u-accent-hover);
    text-decoration: underline;
}

/* Terms checkbox */
.m4u-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--m4u-dark);
    line-height: 1.5;
}

.m4u-auth-terms input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--m4u-accent);
    cursor: pointer;
}

.m4u-auth-terms a {
    color: var(--m4u-accent);
    text-decoration: underline;
}

/* Primary CTA button */
.m4u-auth-btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: var(--m4u-dark);
    color: #FFFFFF;
    border: 1px solid var(--m4u-dark);
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--m4u-font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    text-align: center;
    text-decoration: none;
    outline: none;
    margin-top: 4px;
    -webkit-appearance: none;
    appearance: none;
}

.m4u-auth-btn:hover,
.m4u-auth-btn:focus {
    background: var(--m4u-accent);
    border-color: var(--m4u-accent);
    color: #FFFFFF;
}

.m4u-auth-btn:focus-visible {
    outline: 2px solid var(--m4u-accent);
    outline-offset: 3px;
}

.m4u-auth-btn:disabled,
.m4u-auth-btn.m4u-btn-loading {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* OR divider */
.m4u-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--m4u-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 4px 0;
}

.m4u-auth-divider::before,
.m4u-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--m4u-border);
}

/* Google button */
.m4u-auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    background: #FFFFFF;
    border: 1px solid #DADCE0;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--m4u-font-body);
    color: #3C4043;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
    letter-spacing: 0;
}

.m4u-auth-google-btn:hover,
.m4u-auth-google-btn:focus {
    background: #F8F8F8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    border-color: #C0C0C0;
    color: #3C4043;
    outline: none;
}

.m4u-auth-google-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Nextend Social Login provider button override — match our Google button */
.nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #DADCE0 !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: var(--m4u-font-body) !important;
    color: #3C4043 !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

.nsl-button:hover {
    background: #F8F8F8 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

.nsl-button-google {
    border-color: #DADCE0 !important;
}

/* Switch between Login/Register */
.m4u-auth-switch {
    text-align: center;
    font-size: 14px;
    color: var(--m4u-text-muted);
    padding-top: 6px;
    line-height: 1.6;
}

.m4u-auth-switch a {
    color: var(--m4u-dark);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.2s;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.m4u-auth-switch a:hover {
    color: var(--m4u-accent);
    border-color: var(--m4u-accent);
}

/* ── Trust strip ─────────────────────────────────────────── */
.m4u-auth-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #F0EFEB;
    flex-wrap: wrap;
}

.m4u-auth-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #AAAAAA;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.m4u-auth-trust-item svg {
    width: 14px;
    height: 14px;
    color: var(--m4u-accent);
    flex-shrink: 0;
}

/* ── WooCommerce Lost Password / Reset Password overrides ─── */

/* Auth body background for full-screen seamless luxury feel */
body.m4u-auth-body,
body.woocommerce-lost-password,
body.woocommerce-reset-password {
    background-color: #F6F2EE !important;
}

body.m4u-auth-body .ast-container,
body.m4u-auth-body #content,
body.m4u-auth-body .site-content,
body.woocommerce-lost-password .ast-container,
body.woocommerce-lost-password #content,
body.woocommerce-lost-password .site-content {
    background: transparent !important;
}

/* Hide theme page-header title and breadcrumbs on auth & lost password pages */
body.m4u-auth-body .entry-header,
body.m4u-auth-body .ast-breadcrumbs-wrapper,
body.woocommerce-lost-password .entry-header,
body.woocommerce-lost-password .ast-breadcrumbs-wrapper,
body.woocommerce-reset-password .entry-header {
    display: none !important;
}

/* Scoped to lost-password / reset-password only — never shrink main my-account */
.woocommerce-lost-password .woocommerce,
.woocommerce-reset-password .woocommerce {
    max-width: 480px;
    margin: 40px auto 60px;
    padding: 0 20px;
}

.woocommerce-ResetPassword.lost_reset_password,
.woocommerce form.lost_reset_password {
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.18) !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
    padding: 48px 40px 40px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.woocommerce-lost-password .woocommerce-notices-wrapper {
    margin-bottom: 20px;
}

.woocommerce-ResetPassword > p:first-of-type,
.woocommerce form.lost_reset_password > p:first-of-type {
    font-size: 14px !important;
    color: var(--m4u-text-muted) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce form.lost_reset_password .woocommerce-form-row {
    margin-bottom: 20px;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

.woocommerce-ResetPassword .woocommerce-form-row label,
.woocommerce form.lost_reset_password .woocommerce-form-row label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--m4u-dark) !important;
    text-transform: uppercase !important;
    font-family: var(--m4u-font-body) !important;
    margin-bottom: 7px !important;
    display: block !important;
}

.woocommerce-ResetPassword input.input-text,
.woocommerce form.lost_reset_password input.input-text,
.woocommerce form.lost_reset_password input[type="text"],
.woocommerce form.lost_reset_password input[type="email"],
.woocommerce form.lost_reset_password input[type="password"] {
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #DDDDD8 !important;
    border-radius: 2px !important;
    font-size: 15px !important;
    font-family: var(--m4u-font-body) !important;
    color: var(--m4u-dark) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-ResetPassword input.input-text:focus,
.woocommerce form.lost_reset_password input:focus {
    border-color: var(--m4u-accent) !important;
    box-shadow: 0 0 0 3px rgba(197,168,128,0.14) !important;
    outline: none !important;
}

.woocommerce .lost_reset_password .button,
.woocommerce-page .lost_reset_password .button {
    display: block !important;
    width: 100% !important;
    padding: 15px 20px !important;
    background: var(--m4u-dark) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--m4u-dark) !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: var(--m4u-font-body) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.25s, border-color 0.25s !important;
    margin-top: 12px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
}

.woocommerce .lost_reset_password .button:hover,
.woocommerce-page .lost_reset_password .button:hover {
    background: var(--m4u-accent) !important;
    border-color: var(--m4u-accent) !important;
    color: #FFFFFF !important;
}

/* WC notices (my-account pages) */
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
    padding: 13px 16px;
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 22px;
    list-style: none;
    border-left: 3px solid;
    line-height: 1.6;
}
.woocommerce-MyAccount-content .woocommerce-error   { background: #fef6f6; border-color: #ef4444; color: #991b1b; }
.woocommerce-MyAccount-content .woocommerce-message  { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.woocommerce-MyAccount-content .woocommerce-info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 600px) {
    .m4u-auth-card {
        padding: 36px 24px 32px;
    }

    .m4u-auth-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .m4u-auth-title {
        font-size: 24px;
    }

    .m4u-auth-trust {
        gap: 14px;
    }

    .m4u-auth-trust-item {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .m4u-auth-page {
        padding: 24px 12px;
        align-items: flex-start;
    }

    .m4u-auth-card {
        padding: 28px 18px 24px;
        box-shadow: none;
        border-color: transparent;
    }

    .m4u-auth-btn {
        font-size: 11px;
        padding: 14px 16px;
    }

    .m4u-auth-page::before {
        position: absolute;
    }
}

/* ================================================================
   MADE4U PHASE 1 ENHANCEMENTS
   - Secondary Product Image Hover Swap
   - Archive / Loop Sale Badge Position
   - AJAX Slide-Out Cart Drawer
   - Mobile Sticky Add to Bag Bar
   ================================================================ */

/* ── 1. Secondary Product Image Hover Swap ─────────────────────── */
.m4u-p-img-inner a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.m4u-primary-img,
.m4u-secondary-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0;
}

.m4u-secondary-img {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) and (min-width: 992px) {
    .m4u-p-card:hover .m4u-secondary-img {
        opacity: 1;
        transform: scale(1.06);
    }
}

@media (max-width: 991px), (hover: none) {
    .m4u-secondary-img {
        display: none !important;
    }
    .m4u-primary-img {
        position: relative;
    }
}

/* ── 2. WooCommerce Loop & Archive Sale Badge ─────────────────── */
ul.products li.product {
    position: relative;
}

ul.products li.product .m4u-sale-badge,
.woocommerce ul.products li.product .m4u-sale-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 9 !important;
    background: #ff4767 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    letter-spacing: 0.04em !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}

/* Suppress duplicate Astra modern and WooCommerce default sale badges */
.ast-onsale-card,
ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale,
.related.products .onsale,
.upsells.products .onsale {
    display: none !important;
}

/* ── 3. AJAX Slide-Out Cart Drawer ────────────────────────────── */
.m4u-cart-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.m4u-cart-drawer-overlay.m4u-overlay-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.m4u-drawer-is-open {
    overflow: hidden;
}

.m4u-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: #FFFFFF;
    z-index: 99999;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.m4u-cart-drawer.m4u-drawer-active {
    transform: translateX(0);
}

.m4u-cart-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.m4u-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #EBEBEB;
    flex-shrink: 0;
    background: #FFFFFF;
}

.m4u-drawer-title {
    font-family: var(--m4u-font-heading, 'Playfair Display', serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--m4u-dark, #121212);
}

.m4u-drawer-count {
    color: var(--m4u-accent, #C5A880);
    font-weight: 600;
}

.m4u-drawer-close {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #888888;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.m4u-drawer-close:hover {
    color: var(--m4u-dark, #121212);
    transform: rotate(90deg);
}

.m4u-drawer-shipping-wrap {
    padding: 12px 24px;
    background: #FAF8F5;
    border-bottom: 1px solid #EFEAE3;
    flex-shrink: 0;
}

.m4u-drawer-shipping-wrap .m4u-fsp-message {
    font-size: 12px;
    margin-bottom: 6px;
    color: #444444;
}

.m4u-drawer-shipping-wrap .m4u-fsp-bar {
    height: 5px;
    background: #E8E2D8;
    border-radius: 3px;
    overflow: hidden;
}

.m4u-drawer-shipping-wrap .m4u-fsp-fill {
    height: 100%;
    background: var(--m4u-accent, #C5A880);
    transition: width 0.4s ease;
}

.m4u-drawer-shipping-wrap .m4u-fsp-fill.m4u-fsp-full {
    background: #2E7D32;
}

.m4u-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px;
    -webkit-overflow-scrolling: touch;
}

.m4u-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 14px;
    color: #888888;
}

.m4u-drawer-empty i {
    font-size: 48px;
    color: #CCCCCC;
    margin-bottom: 4px;
}

.m4u-drawer-empty p {
    font-size: 14px;
    margin: 0;
    color: #666666;
}

.m4u-drawer-empty .m4u-btn {
    margin-top: 8px;
    font-size: 12px;
    padding: 10px 24px;
}

.m4u-drawer-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
    align-items: flex-start;
    transition: opacity 0.2s ease;
}

.m4u-drawer-item-img-wrap {
    width: 72px;
    height: 96px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F5F5F5;
    border-radius: 2px;
}

.m4u-drawer-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m4u-drawer-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 22px;
}

.m4u-drawer-item-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--m4u-dark, #121212);
    text-decoration: none;
    line-height: 1.35;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    transition: color 0.2s ease;
}

.m4u-drawer-item-name:hover {
    color: var(--m4u-accent, #C5A880);
}

.m4u-drawer-item-meta {
    font-size: 12px;
    color: #888888;
}

.m4u-drawer-item-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--m4u-dark, #121212);
}

.m4u-drawer-remove-item {
    position: absolute;
    top: 14px;
    right: 0;
    font-size: 22px;
    color: #AAAAAA;
    text-decoration: none;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.m4u-drawer-remove-item:hover {
    color: #D32F2F;
}

.m4u-drawer-footer {
    padding: 18px 24px;
    border-top: 1px solid #EBEBEB;
    background: #FAF9F7;
    flex-shrink: 0;
}

.m4u-drawer-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555555;
    margin-bottom: 14px;
}

.m4u-drawer-subtotal strong {
    font-size: 16px;
    color: var(--m4u-dark, #121212);
}

.m4u-drawer-checkout-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.m4u-drawer-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
}

.m4u-drawer-view-bag,
.m4u-drawer-continue {
    color: #666666;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.m4u-drawer-view-bag:hover,
.m4u-drawer-continue:hover {
    color: var(--m4u-dark, #121212);
}

.m4u-drawer-secondary-actions .m4u-sep {
    color: #CCCCCC;
}

/* ── 4. Mobile Sticky Add to Bag Bar ─────────────────────── */
.m4u-sticky-atc {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid #EBEBEB;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .m4u-sticky-atc {
        display: flex;
    }
    .m4u-sticky-atc.m4u-sticky-atc-visible {
        transform: translateY(0);
    }
}

.m4u-sticky-atc-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--m4u-dark, #121212);
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    flex-shrink: 0;
    line-height: 1.2;
}

.m4u-sticky-atc-price del {
    font-size: 12px;
    color: #999999;
    margin-right: 5px;
    font-weight: 400;
}

.m4u-sticky-atc-price ins {
    text-decoration: none;
    color: var(--m4u-dark, #121212);
}

.m4u-sticky-atc-btn {
    flex: 1;
    text-align: center;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .m4u-cart-drawer {
        width: 100vw;
    }
    .m4u-drawer-header,
    .m4u-drawer-shipping-wrap,
    .m4u-drawer-items,
    .m4u-drawer-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ========================================
   PHASE 2 — PDP GALLERY / LIGHTBOX
   Styles for WooCommerce native gallery,
   thumbnail strip, and PhotoSwipe overlay.
   WC zoom/lightbox/slider enabled via
   Astra add_theme_support declarations.
   ======================================== */

/* Main gallery image — clean container */
.single-product .woocommerce-product-gallery__image {
    overflow: hidden;
    background: #FAFAFA;
}

.single-product .woocommerce-product-gallery__image img {
    transition: transform 0.45s ease;
    display: block;
    width: 100%;
}

.single-product .woocommerce-product-gallery__image:hover img {
    transform: scale(1.03);
}

/* Zoom cursor hint */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: block;
    cursor: zoom-in;
}

/* PhotoSwipe controls */
.pswp__button--close,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.pswp__button--close:hover,
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
    opacity: 1;
}

/* ========================================
   PHASE 2 — PDP THUMBNAIL STRIP
   Targets WooCommerce Flexslider structure.
   ======================================== */

.single-product .flex-control-thumbs {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none !important;
}

.single-product .flex-control-thumbs li {
    margin: 0 !important;
    padding: 0 !important;
    width: calc(25% - 6px) !important;
    flex-shrink: 0;
}

.single-product .flex-control-thumbs li img {
    width: 100% !important;
    aspect-ratio: 3/4;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.65;
    display: block;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
    border-color: var(--m4u-dark, #121212) !important;
    opacity: 1;
}

@media (max-width: 480px) {
    .single-product .flex-control-thumbs li {
        width: calc(20% - 6.5px) !important;
    }
    .single-product .flex-control-thumbs li img {
        aspect-ratio: 1/1;
    }
}

/* ========================================
   PHASE 2 — PDP STOCK URGENCY
   Shows "Only X Left!" when stock <= 10.
   Animation respects prefers-reduced-motion.
   ======================================== */

.m4u-pdp-stock-urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px 0;
    padding: 7px 13px;
    background: #FFF8F0;
    border: 1px solid #F4A24E;
    border-radius: 3px;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 13px;
    color: #C55A00;
}

.m4u-stock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E65C00;
    flex-shrink: 0;
    animation: m4u-pulse-dot 1.8s ease-in-out infinite;
}

@keyframes m4u-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .m4u-stock-dot { animation: none; }
}

.m4u-stock-urgency-text strong {
    font-weight: 700;
    color: #C55A00;
}

/* ========================================
   PHASE 2 — PDP WHAT'S INCLUDED BLOCK
   Reads _m4u_whats_included meta.
   Renders nothing if meta is empty.
   ======================================== */

.m4u-pdp-includes {
    margin: 14px 0 12px 0;
    padding: 14px 16px;
    background: #F7F7F5;
    border-left: 3px solid var(--m4u-accent, #C5A880);
    border-radius: 0 3px 3px 0;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
}

.m4u-pdp-includes-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m4u-dark, #121212);
    margin-bottom: 10px;
}

.m4u-pdp-includes-header i {
    color: var(--m4u-accent, #C5A880);
    font-size: 14px;
}

.m4u-pdp-includes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.m4u-pdp-includes-list li {
    font-size: 13px;
    color: #444444;
    position: relative;
    padding-left: 14px;
    line-height: 1.5;
}

.m4u-pdp-includes-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--m4u-accent, #C5A880);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

/* ========================================
   PHASE 2 — PDP TABS
   Premium underline-style redesign.
   All existing tab content preserved.
   ======================================== */

.single-product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--m4u-border, #E8E8E8) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
}

.single-product .woocommerce-tabs ul.tabs li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    white-space: nowrap;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px !important;
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888888 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: color 0.2s ease;
    position: relative;
}

.single-product .woocommerce-tabs ul.tabs li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--m4u-dark, #121212);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--m4u-dark, #121212) !important;
}

.single-product .woocommerce-tabs ul.tabs li a:hover::after {
    transform: scaleX(0.6);
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li.active a:focus {
    color: var(--m4u-dark, #121212) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a::after {
    transform: scaleX(1);
    background: var(--m4u-dark, #121212);
}

.single-product .woocommerce-tabs .panel {
    border: 1px solid var(--m4u-border, #E8E8E8) !important;
    border-top: none !important;
    border-radius: 0 0 3px 3px !important;
    padding: 24px !important;
    background: #FFFFFF;
    margin: 0 !important;
}

.single-product .woocommerce-tabs .panel h2 {
    font-family: var(--m4u-font-heading, 'Playfair Display', serif);
    font-size: 18px;
    color: var(--m4u-dark, #121212);
    margin-bottom: 14px;
}

.single-product .woocommerce-tabs .panel p {
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: #555555;
}

@media (max-width: 767px) {
    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
    .single-product .woocommerce-tabs .panel {
        padding: 18px 16px !important;
    }
}

/* ========================================
   PHASE 2 — PDP SHARE BAR
   WhatsApp / Facebook / Copy Link.
   No external SDKs. FA icons reused.
   ======================================== */

.m4u-pdp-share-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 8px 0;
    flex-wrap: wrap;
}

.m4u-pdp-share-label {
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888888;
    margin-right: 2px;
}

.m4u-pdp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: none;
    line-height: 1;
}

.m4u-pdp-share-btn:focus-visible {
    outline: 2px solid var(--m4u-dark, #121212);
    outline-offset: 2px;
}

.m4u-pdp-share-btn i {
    font-size: 13px;
    line-height: 1;
}

.m4u-pdp-share-wa {
    color: #25D366;
    border-color: #D8F5E3;
    background: #F0FDF4;
}

.m4u-pdp-share-wa:hover {
    background: #25D366;
    color: #FFFFFF;
    border-color: #25D366;
}

.m4u-pdp-share-fb {
    color: #1877F2;
    border-color: #D5E5FF;
    background: #F0F6FF;
}

.m4u-pdp-share-fb:hover {
    background: #1877F2;
    color: #FFFFFF;
    border-color: #1877F2;
}

.m4u-pdp-share-copy {
    color: #555555;
    border-color: #E0E0E0;
    background: #F5F5F5;
}

.m4u-pdp-share-copy:hover {
    background: var(--m4u-dark, #121212);
    color: #FFFFFF;
    border-color: var(--m4u-dark, #121212);
}

/* Copy toast */
.m4u-copy-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--m4u-dark, #121212);
    color: #FFFFFF;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 24px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.m4u-copy-toast.m4u-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .m4u-copy-toast {
        bottom: 80px; /* raise above sticky ATC bar */
    }
}

/* ========================================
   PHASE 2 — PDP BREADCRUMBS
   Styles WooCommerce breadcrumb on PDP.
   ======================================== */

.single-product .woocommerce-breadcrumb,
.single-product nav.woocommerce-breadcrumb {
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 12px;
    color: #AAAAAA;
    margin-bottom: 12px !important;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.single-product .woocommerce-breadcrumb a {
    color: #AAAAAA;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-product .woocommerce-breadcrumb a:hover {
    color: var(--m4u-dark, #121212);
}

@media (max-width: 480px) {
    .single-product .woocommerce-breadcrumb {
        font-size: 11px;
    }
}

/* ========================================
   PHASE 2 — PDP WHATSAPP REFINEMENT
   Visual demotion to secondary action.
   Business logic unchanged (no msg/number changes).
   ======================================== */

.m4u-btn-whatsapp-single {
    background-color: transparent !important;
    color: #1EBE5D !important;
    border: 1.5px solid #25D366 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 11px 22px !important;
    font-weight: 500 !important;
}

.m4u-btn-whatsapp-single i {
    font-size: 16px !important;
    color: #25D366;
}

.m4u-btn-whatsapp-single:hover,
.m4u-btn-whatsapp-single:focus {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    border-color: #25D366 !important;
    box-shadow: 0 3px 10px rgba(37, 211, 102, 0.2) !important;
    transform: none !important;
    outline: 2px solid #25D366 !important;
    outline-offset: 2px !important;
}

.m4u-btn-whatsapp-single:hover i {
    color: #FFFFFF;
}

/* ================================================================
   PHASE 3 — LUXURY ARCHIVE UX
   Hover Action Toolbar, Quick View Modal, Wishlist State,
   WooCommerce Archive Full-Width Layout Override
   ================================================================ */

/* ── 1. WooCommerce Archive — Full-Width, 3-column Grid (Luxury) ─── */

/* Remove sidebar and enforce 100% full-width on WooCommerce pages */
.woocommerce-page #primary,
body.woocommerce #primary,
.woocommerce-shop #primary,
.tax-product_cat #primary,
.tax-product_tag #primary,
.woocommerce-search #primary,
.woocommerce-archive #primary,
.m4u-archive-fullwidth #primary,
.ast-separate-container.m4u-archive-fullwidth #primary {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

.woocommerce-page .site-main,
body.woocommerce .site-main,
.woocommerce-shop .site-main,
.tax-product_cat .site-main,
.tax-product_tag .site-main,
.woocommerce-search .site-main {
    max-width: 100% !important;
    width: 100% !important;
}

/* Hide any sidebar on WooCommerce archive pages */
.woocommerce-page #secondary,
body.woocommerce #secondary,
.woocommerce-shop #secondary,
.tax-product_cat #secondary,
.tax-product_tag #secondary,
.woocommerce-search #secondary,
.woocommerce-archive #secondary,
.m4u-archive-fullwidth #secondary,
.woocommerce-page .ast-right-sidebar,
.woocommerce-page .ast-left-sidebar,
body.woocommerce .widget-area,
.woocommerce-archive .widget-area {
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
}

/* WooCommerce native product grid — 3 columns (luxury / wide-card layout) */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 24px !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Flat card — no border box, image sits directly on page background */
.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent;
    border: none !important;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.3s ease;
    position: relative;
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

/* WC product image wrapper — enforce 3:4 ratio, overflow hidden for zoom */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0 !important;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.06);
}

/* Secondary image for WooCommerce loop cards — positioned over primary, smooth fade */
.woocommerce ul.products li.product .m4u-secondary-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1) !important;
    margin: 0 !important;
}

@media (hover: hover) and (min-width: 992px) {
    .woocommerce ul.products li.product:hover .m4u-secondary-img {
        opacity: 1 !important;
        transform: scale(1.06) !important;
    }
}

@media (max-width: 991px), (hover: none) {
    .woocommerce ul.products li.product .m4u-secondary-img {
        display: none !important;
    }
}

/* WC product info area — centered, Kaprang luxury style */
.astra-shop-summary-wrap {
    padding: 12px 0 16px !important;
    text-align: center !important;
}

.ast-woo-product-category {
    display: block !important;
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #777777 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-align: center !important;
    margin: 0 0 6px !important;
    padding: 0 4px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 0 4px !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 400 !important;
    margin-right: 0 !important;
    text-decoration: line-through !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: #e53935 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Hide native Astra/WC on-card and summary buttons (replaced by hover toolbar) */
.astra-shop-summary-wrap .button,
.astra-shop-summary-wrap a.button,
.astra-shop-summary-wrap .add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.astra-shop-thumbnail-wrap .ast-on-card-button,
.woocommerce ul.products li.product .ast-on-card-button,
.ast-select-options-trigger,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > a.add_to_cart_button {
    display: none !important;
}

/* WooCommerce Archive Top Bar (Count & Orderby) */
.woocommerce-result-count {
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 13px !important;
    color: #666666 !important;
    margin: 0 0 24px !important;
    letter-spacing: 0.02em !important;
    line-height: 38px !important;
    float: left !important;
}

.woocommerce-ordering {
    margin: 0 0 24px !important;
    float: right !important;
}

.woocommerce-ordering select.orderby {
    font-family: var(--m4u-font-body, 'Jost', sans-serif) !important;
    font-size: 13px !important;
    color: #222222 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 3px !important;
    padding: 8px 30px 8px 12px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
    border-color: #111111 !important;
}

.woocommerce-page .site-main::before,
.woocommerce-page .site-main::after,
body.woocommerce .site-main::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Ensure WooCommerce thumbnail wrap acts as the positioning anchor */
.astra-shop-thumbnail-wrap {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* ── 2. Hover Action Toolbar ─────────────────────────────────────── */

/* Toolbar container — slides up from bottom of the image wrapper.
   For homepage cards: inside m4u-p-img-wrap (overflow:visible), anchored to bottom.
   For archive (WC loop): inside astra-shop-thumbnail-wrap (overflow:hidden).
   The toolbar uses position:absolute + translateY(100%) → slides up on hover. */
.m4u-hover-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease, visibility 0.25s ease;
    z-index: 10;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Show toolbar on card hover or active */
.m4u-hover-actions.m4u-hover-active,
.m4u-p-card:hover .m4u-hover-actions,
.astra-shop-thumbnail-wrap:hover .m4u-hover-actions,
.woocommerce ul.products li.product:hover .m4u-hover-actions {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Individual action button */
.m4u-ha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 48px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--m4u-dark, #121212);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    outline: none;
    position: relative;
}

.m4u-ha-btn:last-child {
    border-right: none;
}

.m4u-ha-btn:hover {
    background: var(--m4u-dark, #121212);
    color: #FFFFFF !important;
}

/* Add to Bag — accent on hover */
.m4u-ha-atc:hover {
    background: var(--m4u-dark, #121212);
    color: #FFFFFF !important;
}

/* Wishlist button — heart becomes filled red when wishlisted */
.m4u-ha-wishlist.m4u-wishlisted i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* solid */
    color: #E53935;
}

.m4u-ha-wishlist.m4u-wishlisted:hover {
    background: #FDECEA;
    color: #E53935 !important;
}

/* WhatsApp — green on hover */
.m4u-ha-wa:hover {
    background: #25D366 !important;
    color: #FFFFFF !important;
}

/* Tooltip labels via title attribute handled by browser;
   we use ::before for a custom tooltip on desktop */
@media (hover: hover) and (min-width: 992px) {
    .m4u-ha-btn::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        background: var(--m4u-dark, #121212);
        color: #FFFFFF;
        font-family: var(--m4u-font-body, 'Jost', sans-serif);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 4px 8px;
        border-radius: 2px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 20;
    }

    .m4u-ha-btn:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Added to bag feedback state */
.m4u-ha-atc.m4u-atc-added {
    background: var(--m4u-accent, #C5A880) !important;
    color: #FFFFFF !important;
}

/* Hide any WooCommerce default injected .added_to_cart links inside hover actions */
.m4u-hover-actions .added_to_cart,
.m4u-hover-actions a.added_to_cart,
.m4u-ha-btn + .added_to_cart,
.m4u-ha-btn ~ .added_to_cart {
    display: none !important;
}

/* ── 3. WooCommerce loop card — fix positioning for toolbar ─────── */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    position: relative;
    overflow: hidden;
    display: block;
}

/* ── 4. Quick View Modal ─────────────────────────────────────────── */

.m4u-qv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 999990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.m4u-qv-overlay.m4u-qv-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.m4u-qv-is-open {
    overflow: hidden;
}

.m4u-qv-modal {
    position: relative;
    background: #FFFFFF;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.96) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m4u-qv-overlay.m4u-qv-open .m4u-qv-modal {
    transform: scale(1) translateY(0);
}

.m4u-qv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 5;
}

.m4u-qv-close:hover {
    background: var(--m4u-dark, #121212);
    color: #FFFFFF;
    border-color: var(--m4u-dark, #121212);
}

/* Loading state */
.m4u-qv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.m4u-qv-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #F0F0F0;
    border-top-color: var(--m4u-dark, #121212);
    border-radius: 50%;
    animation: m4u-spin 0.7s linear infinite;
}

@keyframes m4u-spin {
    to { transform: rotate(360deg); }
}

/* Quick View content layout */
.m4u-qv-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

.m4u-qv-gallery {
    background: #F8F8F8;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.m4u-qv-main-img {
    flex: 1;
    overflow: hidden;
    border-radius: 2px;
}

.m4u-qv-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.m4u-qv-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.m4u-qv-thumb {
    width: 56px;
    height: 72px;
    border: 2px solid transparent;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.m4u-qv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.m4u-qv-thumb:hover,
.m4u-qv-thumb.m4u-qv-thumb-active {
    border-color: var(--m4u-dark, #121212);
}

.m4u-qv-info {
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.m4u-qv-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--m4u-text-muted, #777777);
    font-weight: 500;
}

.m4u-qv-title {
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--m4u-dark, #121212);
    margin: 0;
    line-height: 1.3;
}

.m4u-qv-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.m4u-qv-title a:hover {
    color: var(--m4u-accent, #C5A880);
}

.m4u-qv-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--m4u-dark, #121212);
}

.m4u-qv-price del {
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    margin-right: 6px;
}

.m4u-qv-price ins {
    text-decoration: none;
}

.m4u-qv-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.7;
    border-top: 1px solid #F0F0F0;
    padding-top: 12px;
}

.m4u-qv-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m4u-qv-atc {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100%;
    padding: 13px 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

.m4u-qv-view-full {
    display: block;
    text-align: center;
    padding: 11px 20px;
    border: 1.5px solid var(--m4u-dark, #121212);
    color: var(--m4u-dark, #121212) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s ease, color 0.2s ease;
}

.m4u-qv-view-full:hover {
    background: var(--m4u-dark, #121212);
    color: #FFFFFF !important;
}

.m4u-qv-wa-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F0FDF4;
    color: #1EBE5D !important;
    border: 1px solid #D8F5E3;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.m4u-qv-wa-link i {
    font-size: 16px;
}

.m4u-qv-wa-link:hover {
    background: #25D366;
    color: #FFFFFF !important;
    border-color: #25D366;
}

/* ── 5. WooCommerce Archive — Collection Header ──────────────────── */

.woocommerce-products-header {
    margin-bottom: 30px;
}

.woocommerce-products-header__title.page-title {
    font-family: var(--m4u-font-heading, 'Playfair Display', serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--m4u-dark, #121212);
    letter-spacing: -0.01em;
}

/* Result count + ordering bar */
.woocommerce-result-count {
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 13px;
    color: var(--m4u-text-muted, #777777);
}

/* ── 6. Responsive ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .m4u-hover-actions {
        /* On touch devices show toolbar statically below image */
        position: static;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex;
    }

    .m4u-qv-inner {
        grid-template-columns: 1fr;
    }

    .m4u-qv-gallery {
        padding: 16px;
    }

    .m4u-qv-info {
        padding: 20px 18px;
    }

    .m4u-qv-modal {
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .m4u-ha-btn {
        width: 44px;
        height: 42px;
        font-size: 14px;
    }
}

/* ── 7. WooCommerce archive — suppress old whatsapp loop button ───── */

/* Remove old big loop WhatsApp button from WC native cards */
.woocommerce ul.products li.product .m4u-btn-whatsapp-loop {
    display: none !important;
}

/* ── 8. Suppress hover toolbar on single product page ───────────── */
.single-product .m4u-hover-actions {
    display: none !important;
}

/* ── 9. Wishlist Toast Notification ──────────────────────────────── */
.m4u-toast-popup {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #121212;
    color: #FFFFFF;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 10px 24px;
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 999999;
    pointer-events: none;
    white-space: nowrap;
}

.m4u-toast-popup.m4u-toast-show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
   10. PRODUCT COLOR SELECTION SWATCHES & BADGES
   ========================================================= */

.m4u-color-selection-wrap {
    margin: 0 0 20px 0;
    padding: 0 0 18px 0;
    border-bottom: 1px solid #ECECEC;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
}

.m4u-color-context-qv {
    margin: 0 0 16px 0;
    padding: 0 0 14px 0;
}

.m4u-color-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.m4u-color-title {
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.m4u-color-selected-text {
    color: #666666;
    font-weight: 400;
    transition: color 0.2s ease;
}

.m4u-color-selected-text strong {
    color: #111111;
    font-weight: 700;
}

.m4u-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.m4u-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 38px;
    border: 1.5px solid #DCDCDC;
    border-radius: 20px;
    background: #FFFFFF;
    color: #222222;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    outline: none;
    line-height: 1;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.m4u-color-swatch:hover {
    border-color: #111111;
    color: #111111;
    background: #F9F9F9;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.m4u-color-swatch.active {
    border-color: #111111;
    background: #111111;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.m4u-swatch-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.m4u-swatch-circle.m4u-swatch-light {
    border: 1px solid #CCCCCC;
}

.m4u-color-swatch.active .m4u-swatch-circle {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 1.5px #FFFFFF;
}

.m4u-color-error {
    margin-top: 10px;
    font-size: 12px;
    color: #D32F2F;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FFEBEE;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #D32F2F;
}

@keyframes m4uShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.m4u-color-error-shake .m4u-color-swatches {
    animation: m4uShake 0.45s ease-in-out;
}

.m4u-color-error-shake .m4u-color-swatch {
    border-color: #D32F2F;
}

/* Card color count badge */
.m4u-colors-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-family: var(--m4u-font-body, 'Jost', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 9px;
    border-radius: 12px;
    z-index: 4;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transition: opacity 0.2s ease;
    line-height: 1;
}

/* Cart drawer color display */
.m4u-drawer-item-color {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #444444;
    margin-bottom: 3px;
    line-height: 1.2;
}

.m4u-drawer-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* =========================================================
 * PHASE 4 — LUXURY HEADER UTILITY & CUSTOMER NAVIGATION
 * ========================================================= */

/* Suppress any default Astra header cart/account remnants */
.ast-header-account,
.ast-site-header-cart {
    display: none !important;
}

/* Header utility bar container */
.m4u-header-utility {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.site-header-primary-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Base utility buttons / icons */
.m4u-header-util-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #121212;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-appearance: none;
    box-sizing: border-box;
}

.m4u-header-util-btn i {
    pointer-events: none;
    line-height: 1;
}

.m4u-header-util-btn:hover,
.m4u-header-util-btn:focus-visible {
    color: #C5A880;
    background-color: rgba(197, 168, 128, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.m4u-header-util-btn:active {
    transform: translateY(0);
}

/* Utility Quantity Badges */
.m4u-header-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: #121212;
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.m4u-header-util-btn:hover .m4u-header-badge {
    background-color: #C5A880;
    color: #121212;
}

/* Active Heart / Wishlist state in header */
.m4u-header-wishlist-link:hover i {
    color: #C5A880;
}

/* Mobile Header Adaptations */
@media (max-width: 921px) {
    .m4u-header-utility {
        gap: 10px;
    }
    .m4u-header-util-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .m4u-header-badge {
        top: 1px;
        right: 1px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 9.5px;
    }
}

@media (max-width: 576px) {
    .ast-mobile-header-wrap .site-header-primary-section-right {
        gap: 4px;
    }
    .m4u-header-utility {
        gap: 6px;
    }
    .m4u-header-util-btn {
        width: 33px;
        height: 33px;
        font-size: 15px;
    }
    .m4u-header-badge {
        top: 0;
        right: 0;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        font-size: 9px;
        padding: 0 3px;
    }
    .ast-mobile-header-wrap .ast-builder-layout-element[data-section="section-header-mobile-trigger"] {
        margin-left: 2px;
    }
}

/* Ultra small devices (320px - 360px) */
@media (max-width: 360px) {
    .m4u-header-utility {
        gap: 3px;
    }
    .m4u-header-util-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

/* =========================================================
 * PHASE 4 — SEARCH OVERLAY & PANEL
 * ========================================================= */

body.m4u-search-is-open {
    overflow: hidden;
}

.m4u-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s ease;
}

.m4u-search-overlay.m4u-search-open {
    opacity: 1;
    visibility: visible;
}

.m4u-search-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
}

.m4u-search-panel {
    position: relative;
    z-index: 2;
    width: 92%;
    max-width: 680px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    border-top: 3px solid #C5A880;
    padding: 30px 36px 32px;
    transform: translateY(-20px);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.m4u-search-overlay.m4u-search-open .m4u-search-panel {
    transform: translateY(0);
}

.m4u-search-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.m4u-search-panel-title {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #121212;
    text-transform: uppercase;
}

.m4u-search-close {
    background: transparent;
    border: none;
    color: #666666;
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.2s ease;
}

.m4u-search-close:hover {
    color: #121212;
    transform: rotate(90deg);
}

.m4u-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #F9F9F9;
    border: 1.5px solid #E5E5E5;
    border-radius: 3px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.m4u-search-input-wrap:focus-within {
    background: #FFFFFF;
    border-color: #C5A880;
    box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
}

.m4u-search-input-icon {
    position: absolute;
    left: 16px;
    font-size: 16px;
    color: #888888;
    pointer-events: none;
}

.m4u-search-input {
    width: 100%;
    height: 50px;
    padding: 0 110px 0 46px !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    color: #121212 !important;
    outline: none !important;
    box-shadow: none !important;
}

.m4u-search-input::placeholder {
    color: #999999;
    font-style: normal;
}

.m4u-search-submit-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    height: auto !important;
    padding: 0 18px !important;
    background: #121212 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.m4u-search-submit-btn:hover {
    background: #C5A880 !important;
    color: #121212 !important;
}

/* Quick tags */
.m4u-search-quick-tags {
    margin-top: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.m4u-search-quick-label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #777777;
    margin-right: 4px;
}

.m4u-search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.m4u-search-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #F4F4F4;
    border-radius: 2px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #444444;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.m4u-search-tag:hover {
    background: #C5A880;
    color: #FFFFFF;
}

@media (max-width: 576px) {
    .m4u-search-overlay {
        padding-top: 20px;
    }
    .m4u-search-panel {
        width: 95%;
        padding: 20px 18px 24px;
    }
    .m4u-search-input {
        height: 44px;
        padding-right: 90px !important;
        font-size: 14px !important;
    }
    .m4u-search-submit-btn {
        padding: 0 12px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
 * PHASE 4 — WISHLIST PAGE & CARDS
 * ========================================================= */

.m4u-wishlist-page-container {
    max-width: 1360px;
    margin: 40px auto 70px;
    padding: 0 24px;
    box-sizing: border-box;
}

.m4u-wishlist-header {
    text-align: center;
    margin-bottom: 45px;
    position: relative;
    padding-bottom: 18px;
}

.m4u-wishlist-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #C5A880;
}

.m4u-wishlist-title {
    font-family: 'Jost', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #121212;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.m4u-wishlist-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #777777;
    margin: 0;
}

/* Loading State */
.m4u-wishlist-loading {
    text-align: center;
    padding: 70px 20px;
    color: #666666;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
}

.m4u-wishlist-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border: 3px solid rgba(197, 168, 128, 0.2);
    border-top-color: #C5A880;
    border-radius: 50%;
    animation: m4u-spin 0.8s linear infinite;
}

@keyframes m4u-spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.m4u-wishlist-empty {
    text-align: center;
    padding: 60px 24px 80px;
    max-width: 480px;
    margin: 0 auto;
}

.m4u-wishlist-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(197, 168, 128, 0.1);
    color: #C5A880;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m4u-wishlist-empty-title {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 10px;
    letter-spacing: 0.04em;
}

.m4u-wishlist-empty-desc {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #666666;
    margin: 0 0 28px;
    line-height: 1.6;
}

.m4u-wishlist-shop-btn {
    display: inline-block;
    background: #121212;
    color: #FFFFFF !important;
    padding: 14px 34px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.25s ease, transform 0.2s ease;
}

.m4u-wishlist-shop-btn:hover {
    background: #C5A880;
    color: #121212 !important;
    transform: translateY(-2px);
}

/* Wishlist Product Grid */
.m4u-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 1024px) {
    .m4u-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}

@media (max-width: 680px) {
    .m4u-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Wishlist Product Card */
.m4u-wishlist-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.m4u-wishlist-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
    border-color: #DCDCDC;
}

.m4u-wishlist-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F8F8F8;
}

.m4u-wishlist-card-link {
    display: block;
    width: 100%;
    height: 100%;
}

.m4u-wishlist-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.m4u-wishlist-card:hover .m4u-wishlist-card-media img {
    transform: scale(1.04);
}

/* Remove button on card */
.m4u-wishlist-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #444444;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 5;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.m4u-wishlist-card-remove:hover {
    background: #121212;
    color: #FFFFFF;
    transform: scale(1.1);
}

/* Card content */
.m4u-wishlist-card-content {
    padding: 16px 14px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.m4u-wishlist-card-title {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 39px;
}

.m4u-wishlist-card-title a {
    color: #121212;
    text-decoration: none;
    transition: color 0.2s ease;
}

.m4u-wishlist-card-title a:hover {
    color: #C5A880;
}

.m4u-wishlist-card-price {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 14px;
}

.m4u-wishlist-card-price del {
    color: #999999;
    font-size: 13px;
    font-weight: 400;
    margin-right: 6px;
}

.m4u-wishlist-card-price ins {
    color: #121212;
    text-decoration: none;
}

.m4u-wishlist-card-actions {
    margin-top: auto;
}

.m4u-wishlist-atc-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    padding: 11px 16px !important;
    background: #121212 !important;
    color: #FFFFFF !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border-radius: 2px !important;
    border: none !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.25s ease, transform 0.15s ease !important;
}

.m4u-wishlist-atc-btn:hover {
    background: #C5A880 !important;
    color: #121212 !important;
    transform: translateY(-1px);
}

.m4u-wishlist-out-of-stock {
    display: block;
    text-align: center;
    padding: 10px;
    background: #F4F4F4;
    color: #888888;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

/* Floating Toast Notification */
.m4u-wishlist-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #121212;
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 12px 26px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(197, 168, 128, 0.35);
    z-index: 9999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.m4u-wishlist-toast.m4u-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}




/* =========================================================
   WISHLIST MINI-PANEL (m4u-wmp) — Phase 4
   ========================================================= */

/* Panel wrapper — covers viewport, pointer-events none when hidden */
.m4u-wmp {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
}

.m4u-wmp.m4u-wmp-open {
    pointer-events: all;
}

/* Backdrop */
.m4u-wmp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.32s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.m4u-wmp-open .m4u-wmp-backdrop {
    opacity: 1;
}

/* Slide-in panel — comes from right */
.m4u-wmp-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 94vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.14);
}

.m4u-wmp-open .m4u-wmp-panel {
    transform: translateX(0);
}

/* --- Panel Header --- */
.m4u-wmp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid #f0ebe5;
    background: #fff;
    flex-shrink: 0;
}

.m4u-wmp-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m4u-wmp-header-left > i {
    color: #b5956a;
    font-size: 15px;
}

.m4u-wmp-title {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #1a1a1a;
    text-transform: uppercase;
}

.m4u-wmp-count-label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #888;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.m4u-wmp-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #444;
    font-size: 17px;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.m4u-wmp-close:hover {
    background: #f5f0ea;
    color: #1a1a1a;
}

/* --- Panel Body (scrollable) --- */
.m4u-wmp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    position: relative;
}

/* Scrollbar styling */
.m4u-wmp-body::-webkit-scrollbar { width: 4px; }
.m4u-wmp-body::-webkit-scrollbar-track { background: #f9f6f2; }
.m4u-wmp-body::-webkit-scrollbar-thumb { background: #d4b896; border-radius: 4px; }

/* --- Loading spinner --- */
.m4u-wmp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #888;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.m4u-wmp-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid #f0ebe5;
    border-top-color: #b5956a;
    border-radius: 50%;
    animation: m4u-spin 0.7s linear infinite;
}

@keyframes m4u-spin {
    to { transform: rotate(360deg); }
}

/* --- Empty State --- */
.m4u-wmp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 40px;
    text-align: center;
    gap: 10px;
}

.m4u-wmp-empty > i {
    font-size: 42px;
    color: #ddd;
    margin-bottom: 6px;
}

.m4u-wmp-empty > p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #888;
    margin: 0 0 4px;
    letter-spacing: 0.04em;
}

.m4u-wmp-shop-link {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 22px;
    background: #1a1a1a;
    color: #fff !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    transition: background 0.22s;
}

.m4u-wmp-shop-link:hover {
    background: #b5956a;
}

/* --- Item Cards in Mini Panel --- */
.m4u-wmp-items {
    padding: 8px 0;
}

.m4u-wmp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid #f5f0ea;
    position: relative;
    transition: background 0.18s;
}

.m4u-wmp-item:last-child {
    border-bottom: none;
}

.m4u-wmp-item:hover {
    background: #fdfaf7;
}

/* Product image */
.m4u-wmp-item-img {
    flex-shrink: 0;
    width: 76px;
    height: 88px;
    border-radius: 3px;
    overflow: hidden;
    background: #f5f0ea;
}

.m4u-wmp-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.28s ease;
}

.m4u-wmp-item:hover .m4u-wmp-item-img img {
    transform: scale(1.05);
}

/* Product info */
.m4u-wmp-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m4u-wmp-item-name {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.35;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.m4u-wmp-item-name:hover {
    color: #b5956a;
}

.m4u-wmp-item-price {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #b5956a;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.m4u-wmp-item-price del {
    color: #bbb;
    font-weight: 400;
    font-size: 12px;
    margin-right: 4px;
}

.m4u-wmp-item-atc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 6px 12px;
    background: #1a1a1a;
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: background 0.22s;
    align-self: flex-start;
}

.m4u-wmp-item-atc:hover {
    background: #b5956a;
    color: #fff;
}

.m4u-wmp-item-oos {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #999;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Remove button */
.m4u-wmp-item-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #bbb;
    font-size: 14px;
    transition: color 0.2s, background 0.2s;
    padding: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.m4u-wmp-item-remove:hover {
    color: #c0392b;
    background: #fdf2f0;
}

/* --- Panel Footer CTA --- */
.m4u-wmp-footer {
    flex-shrink: 0;
    padding: 14px 18px;
    border-top: 1px solid #f0ebe5;
    background: #fdfaf7;
}

.m4u-wmp-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: #1a1a1a;
    color: #fff !important;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    transition: background 0.25s, letter-spacing 0.25s;
}

.m4u-wmp-view-btn:hover {
    background: #b5956a;
    letter-spacing: 0.2em;
    color: #fff !important;
}

.m4u-wmp-view-btn i:first-child {
    font-size: 13px;
    opacity: 0.8;
}

.m4u-wmp-view-btn i:last-child {
    font-size: 11px;
    transition: transform 0.22s;
}

.m4u-wmp-view-btn:hover i:last-child {
    transform: translateX(4px);
}

/* Fade-in animation for items */
.m4u-wmp-item {
    animation: m4u-wmp-fadeSlide 0.25s ease forwards;
}

@keyframes m4u-wmp-fadeSlide {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Mobile */
@media (max-width: 640px) {
    .m4u-wmp-panel {
        width: 100%;
        max-width: 100%;
    }
}