/* ==========================================================================
   MOFAY GENERAL THEME COMPONENT STYLES
   ========================================================================== */

/* Globally hide and remove any injected YITH wishlist loop buttons and Quick View buttons inside product cards */
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-button,
.yith-wcwl-wishlistaddedback,
.yith-wcwl-wishlistexistsback,
.yith-wcqv-button,
.yith-quick-view,
.quick-view,
.quickview,
.mofay-quick-view-btn,
.overlay-eye-btn,
.card-image-overlay,
.card-wishlist-badge,
.yith-wcwl-icon,
.yith-wcwl-add-to-wishlist-button,
.yith-wcwl-add-to-wishlist * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Topbar */
.mofay-topbar {
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    font-size: 0.85rem;
    padding: 8px 0;
    border-bottom: 3px solid var(--mofay-accent);
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar-item a {
    color: var(--mofay-white);
}

.topbar-item a:hover {
    color: var(--mofay-accent);
}

.delivery-notice {
    font-weight: 600;
    color: var(--mofay-accent);
}

.topbar-socials a {
    color: var(--mofay-white);
    margin-left: 10px;
    font-size: 1rem;
}

.topbar-socials a:hover {
    color: var(--mofay-primary);
}

/* Header */
.mofay-header-main {
    background-color: var(--mofay-white);
    padding: 15px 0;
    box-shadow: var(--mofay-shadow);
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.site-branding img {
    max-height: 60px;
    width: auto;
}

/* Primary Navigation */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--mofay-secondary);
    font-family: var(--mofay-font-headings);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding: 8px 0;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--mofay-primary);
    transition: var(--mofay-transition);
    border-radius: 2px;
}

.main-navigation a:hover {
    color: var(--mofay-primary);
}

.main-navigation a:hover::after {
    width: 100%;
}

/* AJAX Search Form */
.mofay-search-form-wrap {
    flex-grow: 1;
    max-width: 400px;
    position: relative;
}

.mofay-search-form {
    width: 100%;
}

.search-input-wrap {
    display: flex;
    border: 2px solid var(--mofay-border);
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--mofay-bg);
    transition: var(--mofay-transition);
}

.search-input-wrap:focus-within {
    border-color: var(--mofay-primary);
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.15);
}

.search-field {
    border: none;
    background: none;
    padding: 10px 20px;
    flex-grow: 1;
    outline: none;
    color: var(--mofay-text);
    font-size: 0.9rem;
}

.search-submit {
    background: var(--mofay-btn-gradient);
    border: none;
    color: var(--mofay-white);
    padding: 0 20px;
    cursor: pointer;
    transition: var(--mofay-transition);
}

.search-submit:hover {
    filter: brightness(1.1);
}

/* AJAX Search Results Panel */
.mofay-ajax-search-results {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background-color: var(--mofay-white);
    border-radius: var(--mofay-border-radius);
    box-shadow: var(--mofay-shadow);
    z-index: 999;
    max-height: 350px;
    overflow-y: auto;
    display: none;
    border: 1px solid var(--mofay-border);
}

.mofay-ajax-search-results.active {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--mofay-border);
    transition: var(--mofay-transition);
}

.search-result-item:hover {
    background-color: var(--mofay-bg);
}

.search-result-item img {
    width: 40px;
    height: 40px;
    border-radius: var(--mofay-border-radius-sm);
    object-fit: cover;
}

.search-result-item .result-title {
    font-weight: 600;
    color: var(--mofay-secondary);
    font-size: 0.9rem;
}

.search-result-item .result-price {
    color: var(--mofay-primary);
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: auto;
}

/* Header Icons Action Panel */
.mofay-header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-wishlist-icon a, .header-cart-icon-wrap a {
    color: var(--mofay-secondary);
    font-size: 1.4rem;
    position: relative;
    transition: var(--mofay-transition);
}

.header-wishlist-icon a:hover, .header-cart-icon-wrap a:hover {
    color: var(--mofay-primary);
}

.wishlist-tooltip-count, .cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--mofay-primary);
    color: var(--mofay-white);
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid var(--mofay-white);
}

/* Mini Cart Dropdown Drawer */
.header-cart-icon-wrap {
    position: relative;
}

.mini-cart-dropdown {
    position: absolute;
    top: 150%;
    right: 0;
    width: 320px;
    background-color: var(--mofay-white);
    border-radius: var(--mofay-border-radius);
    box-shadow: var(--mofay-shadow);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--mofay-transition);
    z-index: 999;
    border: 1px solid var(--mofay-border);
}

.header-cart-icon-wrap:hover .mini-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Menu Drawer */
.mofay-mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background-color: var(--mofay-white);
    box-shadow: var(--mofay-shadow);
    z-index: 9999;
    transition: var(--mofay-transition);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.mofay-mobile-menu-drawer.open {
    left: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--mofay-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.drawer-title {
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--mofay-secondary);
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--mofay-secondary);
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    display: none;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-navigation li {
    margin-bottom: 15px;
}

.mobile-navigation a {
    color: var(--mofay-secondary);
    font-family: var(--mofay-font-headings);
    font-weight: 600;
    font-size: 1.1rem;
    display: block;
}

.mobile-navigation a:hover {
    color: var(--mofay-primary);
}

/* Buttons */
.btn-mofay-primary, .btn-mofay-secondary {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--mofay-shadow-sm);
}

.btn-mofay-primary {
    background: var(--mofay-btn-gradient);
    color: var(--mofay-white);
}

.btn-mofay-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    color: var(--mofay-white);
}

.btn-mofay-secondary {
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
}

.btn-mofay-secondary:hover {
    background-color: var(--mofay-primary);
    transform: translateY(-2px);
    color: var(--mofay-white);
}

/* ==========================================================================
   HOMEPAGE LAYOUT STYLES
   ========================================================================== */

/* Hero */
.mofay-hero-section {
    background: linear-gradient(135deg, #FAF7F2 0%, #FFF8F8 50%, #EDFCFB 100%) !important;
    padding: 100px 0 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
}

.hero-badge-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-badge {
    background-color: var(--mofay-accent);
    color: var(--mofay-secondary);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--mofay-font-headings);
}

.hero-badge-tag {
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--mofay-secondary);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--mofay-text-muted);
    margin-bottom: 35px;
    max-width: 600px;
}

.hero-ctas {
    display: flex;
    gap: 15px;
}

.hero-graphics-container {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Atomic Bubbles */
.floating-atomic-bubble {
    position: absolute;
    background-color: var(--mofay-white);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: var(--mofay-shadow);
    animation: floatBubble 6s ease-in-out infinite;
}

.bubble-1 { top: 10%; left: 10%; animation-delay: 0s; }
.bubble-2 { top: 60%; right: 10%; animation-delay: 1.5s; }
.bubble-3 { bottom: 10%; left: 20%; animation-delay: 3s; }
.bubble-4 { top: 40%; left: 50%; animation-delay: 4.5s; }

@keyframes floatBubble {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(8deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.hero-main-illustration {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--mofay-accent) 0%, transparent 70%);
    border-radius: 50%;
    position: relative;
}

.cartoon-costume-cloud {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.costume-cloud-tag {
    background-color: var(--mofay-white);
    border: 2px solid var(--mofay-primary);
    color: var(--mofay-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--mofay-shadow-sm);
}

/* Category Grid */
.mofay-home-categories, .mofay-home-featured-products, .mofay-why-parents-love-home, .mofay-trust-badges-home, .mofay-size-guide-home {
    padding: 60px 0;
}

.mofay-section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    position: relative;
}

.mofay-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    background-color: var(--mofay-accent);
    margin: 12px auto 0;
    border-radius: 5px;
}

.mofay-category-grid-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

.mofay-category-card {
    flex: 0 0 calc(16.666% - 17px) !important;
    max-width: calc(16.666% - 17px) !important;
    min-width: 130px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
}

.mofay-category-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

.category-card-inner {
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.category-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 30px;
    font-weight: 700;
}

.category-card-badge.badge-sale {
    background-color: var(--mofay-primary);
}

.category-image-wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #FAF7F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.category-icon-emoji {
    font-size: 2.2rem;
}

.category-card-title {
    font-size: 1.05rem;
    color: var(--mofay-secondary);
    font-weight: 700;
    margin-bottom: 10px;
}

.category-action-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mofay-primary);
}

/* Why Parents Love */
.parents-love-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.mofay-benefits-list {
    list-style: none;
    padding: 0;
    margin: 25px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefit-icon {
    width: 25px;
    height: 25px;
    background-color: var(--mofay-accent);
    color: var(--mofay-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.benefit-text {
    font-weight: 600;
    color: var(--mofay-secondary);
}

.parents-love-graphic {
    background-color: #FDFBF7;
    border-radius: var(--mofay-border-radius-lg);
    padding: 40px;
    box-shadow: var(--mofay-shadow-sm);
    border: 2px dashed var(--mofay-accent);
}

.checklist-badge-card {
    text-align: center;
}

.checklist-badge-card .card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* Trust Badges Grid */
.mofay-trust-badges-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.mofay-trust-badge-card {
    text-align: center;
    background-color: var(--mofay-white);
    padding: 20px 15px;
    border-radius: var(--mofay-border-radius);
    box-shadow: var(--mofay-shadow-sm);
    border: 1px solid var(--mofay-border);
}

.trust-badge-icon-wrap {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.trust-badge-title {
    font-size: 0.95rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.trust-badge-desc {
    font-size: 0.75rem;
    color: var(--mofay-text-muted);
    margin: 0;
}

/* Size Guide Chart */
.size-guide-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--mofay-text-muted);
    margin-bottom: 30px;
}

.size-guide-table-wrap {
    overflow-x: auto;
    background-color: var(--mofay-white);
    padding: 20px;
    border-radius: var(--mofay-border-radius);
    box-shadow: var(--mofay-shadow-sm);
    border: 1px solid var(--mofay-border);
    max-width: 800px;
    margin: 0 auto;
}

.mofay-size-chart-table {
    width: 100%;
    border-collapse: collapse;
}

.mofay-size-chart-table th, .mofay-size-chart-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid var(--mofay-border);
}

.mofay-size-chart-table th {
    background-color: var(--mofay-bg);
    color: var(--mofay-secondary);
    font-weight: 700;
}

.size-guide-footer-note {
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--mofay-primary);
    margin-top: 20px;
}

/* Global Newsletter Section (White Background) */
.mofay-newsletter-section-global {
    background-color: #ffffff !important;
    background-image: none !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1b365d !important;
    padding: 50px 0 !important;
}

.newsletter-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.newsletter-title {
    color: #1b365d !important;
    font-size: 2rem;
    font-weight: 800 !important;
    margin-bottom: 5px;
}

.newsletter-subtitle {
    font-size: 1.05rem;
    color: #475569 !important;
    margin-bottom: 10px;
    opacity: 1 !important;
}

.social-proof {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1b365d !important;
    background-color: #f1f5f9 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
}

.mofay-newsletter-form { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }

.newsletter-input {
    border: none;
    background: none;
    padding: 10px 20px;
    flex-grow: 1;
    outline: none;
    color: #1e293b !important;
}

.newsletter-submit-btn {
    background-color: #1b365d !important;
    color: #ffffff !important;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mofay-transition);
}

.newsletter-submit-btn:hover {
    background-color: #ff7900 !important;
}

.newsletter-submit-btn {
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mofay-transition);
}

.newsletter-submit-btn:hover {
    background-color: var(--mofay-primary);
}

/* Footer Main */
.mofay-footer-main {
    background-color: var(--mofay-secondary);
    color: #E2E8F0;
    padding: 60px 0 0;
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
}

.footer-widget-title {
    color: var(--mofay-white);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

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

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: #A0AEC0;
}

.footer-links-list a:hover {
    color: var(--mofay-accent);
    padding-left: 5px;
}

.footer-contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-details li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact-details a {
    color: #A0AEC0;
}

/* Copyright Bar */
.footer-copyright-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 0;
    font-size: 0.9rem;
}

.copyright-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mofay-payment-gateways {
    display: flex;
    gap: 15px;
    font-size: 1.8rem;
    color: #A0AEC0;
}

/* Floating WhatsApp button */
.mofay-whatsapp-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--mofay-whatsapp);
    color: var(--mofay-white);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    z-index: 999;
    transition: var(--mofay-transition);
}

.mofay-whatsapp-floating:hover {
    transform: scale(1.1);
    color: var(--mofay-white);
}

.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: var(--mofay-transition);
    box-shadow: var(--mofay-shadow);
}

.mofay-whatsapp-floating:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Back to Top */
.mofay-back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: var(--mofay-secondary);
    color: var(--mofay-white);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--mofay-shadow);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--mofay-transition);
}

.mofay-back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.mofay-back-to-top:hover {
    background-color: var(--mofay-primary);
    transform: translateY(-5px);
}

/* Mock product images fallback */
.mock-product-img {
    height: 250px;
    background-color: #EDF2F7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border-radius: var(--mofay-border-radius);
}

/* ==========================================================================
   MOFAY V2.1: DESKTOP HEADER BAR & SIDE DRAWER INTERACTIONS
   ========================================================================== */

/* Dedicated Navigation Header Bar */
.mofay-navigation-bar {
    background-color: var(--mofay-white);
    border-top: 1px solid var(--mofay-border);
    border-bottom: 1px solid var(--mofay-border);
    padding: 12px 0;
    margin-top: 15px;
    width: 100%;
}

.navigation-bar-inner {
    display: flex;
    justify-content: center;
}

.mofay-navigation-bar .main-navigation ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mofay-navigation-bar .main-navigation a {
    color: var(--mofay-secondary);
    font-family: var(--mofay-font-headings);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 0;
    transition: var(--mofay-transition);
}

.mofay-navigation-bar .main-navigation a:hover {
    color: var(--mofay-accent);
}

.mofay-navigation-bar .main-navigation a::after {
    background-color: var(--mofay-accent);
}

/* Slide-out Side Drawers (Cart and Wishlist) */
.mofay-side-drawer {
    position: fixed;
    top: 0;
    width: 350px;
    height: 100vh;
    background-color: var(--mofay-white);
    box-shadow: var(--mofay-shadow);
    z-index: 10000;
    transition: var(--mofay-transition);
    display: flex;
    flex-direction: column;
}

.mofay-side-drawer-right {
    right: -370px;
}

.mofay-side-drawer-right.open {
    right: 0;
}

.mofay-side-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--mofay-border);
    background-color: var(--mofay-bg);
}

.mofay-side-drawer .drawer-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.mofay-side-drawer .drawer-content::-webkit-scrollbar {
    width: 6px;
}

.mofay-side-drawer .drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.mofay-side-drawer .drawer-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

/* Drawer Overlay styling */
.mofay-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 30, 54, 0.65);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mofay-drawer-overlay.active {
    display: block;
    opacity: 1;
}

/* Mini Cart Drawer Layout fixes */
#cart-side-drawer .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#cart-side-drawer ul.cart_list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}

#cart-side-drawer ul.cart_list li {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid var(--mofay-border);
    gap: 15px;
    position: relative;
    align-items: center;
}

#cart-side-drawer ul.cart_list li img {
    width: 60px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--mofay-border-radius-sm);
    border: 1px solid var(--mofay-border);
    flex-shrink: 0;
}

#cart-side-drawer ul.cart_list li a {
    font-weight: 600;
    color: var(--mofay-secondary);
    font-size: 0.9rem;
    line-height: 1.3;
}

#cart-side-drawer ul.cart_list li a:hover {
    color: var(--mofay-accent);
}

#cart-side-drawer ul.cart_list li a.remove {
    position: absolute;
    top: 15px;
    right: 0;
    color: #E63946 !important;
    font-size: 1.2rem;
    background: none;
    border: none;
}

#cart-side-drawer ul.cart_list li .quantity {
    display: block;
    font-size: 0.8rem;
    color: var(--mofay-text-muted);
    border: none;
    padding: 0;
    background: none;
    margin-top: 5px;
}

#cart-side-drawer p.total {
    padding: 15px 0;
    border-top: 2px solid var(--mofay-border);
    margin: 15px 0 0;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mofay-secondary);
}

#cart-side-drawer p.buttons {
    display: flex;
    gap: 10px;
    margin: 15px 0 0;
    padding-bottom: 10px;
}

#cart-side-drawer p.buttons a {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
    transition: var(--mofay-transition);
}

#cart-side-drawer p.buttons a.view-cart {
    background-color: var(--mofay-bg);
    color: var(--mofay-secondary);
    border: 1px solid var(--mofay-border);
}

#cart-side-drawer p.buttons a.view-cart:hover {
    background-color: var(--mofay-border);
}

#cart-side-drawer p.buttons a.checkout {
    background: var(--mofay-btn-gradient);
    color: var(--mofay-white);
}

#cart-side-drawer p.buttons a.checkout:hover {
    filter: brightness(1.1);
}

/* Wishlist Drawer Table overrides */
#wishlist-side-drawer .wishlist_table {
    width: 100% !important;
    border-collapse: collapse;
}

#wishlist-side-drawer .wishlist_table thead {
    display: none !important;
}

#wishlist-side-drawer .wishlist_table tr {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid var(--mofay-border);
    position: relative;
}

#wishlist-side-drawer .wishlist_table td {
    padding: 4px 0;
    border: none;
    text-align: left;
    display: block;
}

#wishlist-side-drawer .wishlist_table td.product-thumbnail {
    width: auto;
}

#wishlist-side-drawer .wishlist_table td.product-thumbnail img {
    width: 70px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--mofay-border-radius-sm);
    border: 1px solid var(--mofay-border);
}

#wishlist-side-drawer .wishlist_table td.product-name a {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mofay-secondary);
}

#wishlist-side-drawer .wishlist_table td.product-price {
    font-weight: 700;
    color: var(--mofay-primary);
}

#wishlist-side-drawer .wishlist_table td.product-remove {
    position: absolute;
    top: 15px;
    right: 0;
    width: auto;
}

#wishlist-side-drawer .wishlist_table td.product-remove a.remove {
    color: #E63946 !important;
    font-size: 1.1rem;
    text-align: center;
}

#wishlist-side-drawer .wishlist_table td.product-add-to-cart a {
    display: inline-block;
    padding: 8px 16px;
    background: var(--mofay-btn-gradient);
    color: var(--mofay-white);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    margin-top: 5px;
    transition: var(--mofay-transition);
}

#wishlist-side-drawer .wishlist_table td.product-add-to-cart a:hover {
    filter: brightness(1.1);
}

/* Empty message */
.drawer-empty-msg {
    text-align: center;
    padding: 40px 10px;
    font-weight: 500;
    color: var(--mofay-text-muted);
}

/* ==========================================================================
   ELEVATED PREMIUM HEADER STYLES
   ========================================================================== */

.mofay-header-main {
    box-shadow: 0 4px 30px rgba(15, 30, 54, 0.03);
    border-bottom: 1px solid rgba(15, 30, 54, 0.05);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.search-input-wrap {
    border: 1px solid rgba(15, 30, 54, 0.1) !important;
    background-color: #F8F9FA !important;
    border-radius: 30px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.search-input-wrap:focus-within {
    border-color: var(--mofay-accent) !important;
    background-color: var(--mofay-white) !important;
    box-shadow: 0 4px 20px rgba(198, 161, 91, 0.15) !important;
}

.search-submit {
    background: var(--mofay-secondary) !important;
    border-radius: 0 30px 30px 0;
    font-size: 0.95rem;
    padding: 0 22px !important;
    color: var(--mofay-accent) !important;
    transition: all 0.3s ease;
}

.search-submit:hover {
    background: var(--mofay-accent) !important;
    color: var(--mofay-secondary) !important;
}

.mofay-header-actions {
    gap: 15px !important;
}

.header-wishlist-icon a, 
.header-cart-icon-wrap a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(15, 30, 54, 0.03);
    border: 1px solid rgba(15, 30, 54, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--mofay-secondary);
    font-size: 1.15rem !important;
}

.header-wishlist-icon a:hover, 
.header-cart-icon-wrap a:hover {
    background-color: var(--mofay-secondary);
    color: var(--mofay-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 30, 54, 0.15);
}

.wishlist-tooltip-count, 
.cart-count {
    top: -5px !important;
    right: -5px !important;
    background-color: var(--mofay-accent) !important;
    color: var(--mofay-secondary) !important;
    border: 2px solid var(--mofay-white) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 0.72rem !important;
    width: 20px !important;
    height: 20px !important;
}

.mofay-navigation-bar {
    background-color: var(--mofay-white);
    padding: 10px 0 !important;
    margin-top: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.mofay-navigation-bar .main-navigation a {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 6px 12px !important;
    border-radius: 20px;
    transition: all 0.3s ease !important;
}

.mofay-navigation-bar .main-navigation a:hover {
    color: var(--mofay-secondary) !important;
    background-color: rgba(198, 161, 91, 0.08) !important;
}

.mofay-navigation-bar .main-navigation a::after {
    display: none !important;
}

/* ==========================================================================
   CUSTOM ABOUT US TEMPLATE STYLES
   ========================================================================== */

.mofay-about-page-wrapper {
    font-family: var(--mofay-font-body);
    background-color: var(--mofay-bg);
}

.about-hero-section {
    background-color: var(--mofay-secondary);
    background-image: radial-gradient(circle at 10% 20%, rgba(198,161,91,0.12) 0%, transparent 45%);
    border-bottom: 4px solid var(--mofay-accent);
    padding: 90px 0;
    text-align: center;
    color: var(--mofay-white);
}

.about-hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--mofay-white);
    margin-bottom: 15px;
    font-family: var(--mofay-font-headings);
}

.about-hero-subtitle {
    font-size: 1.25rem;
    color: var(--mofay-accent);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
}

.about-story-section {
    padding: 80px 0;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.about-story-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mofay-text);
    margin-bottom: 20px;
}

.about-highlights-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.about-highlight-item .highlight-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(198, 161, 91, 0.12);
    color: var(--mofay-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.about-highlight-item .highlight-text {
    font-size: 0.95rem;
    color: var(--mofay-text);
}

.about-story-media {
    display: flex;
    justify-content: center;
}

.about-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(15, 30, 54, 0.05);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.about-glass-inner h3 {
    font-size: 1.35rem;
    color: var(--mofay-secondary);
    margin-bottom: 15px;
    font-weight: 700;
}

.about-glass-inner p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--mofay-text-muted);
}

.about-emoji-placeholder {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.about-values-section {
    background-color: var(--mofay-white);
    padding: 85px 0;
    border-top: 1px solid var(--mofay-border);
    border-bottom: 1px solid var(--mofay-border);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.about-value-card {
    background-color: var(--mofay-bg);
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid var(--mofay-border);
    transition: all 0.3s ease;
}

.about-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(15, 30, 54, 0.06);
    border-color: var(--mofay-accent);
}

.about-value-card .value-icon-wrap {
    font-size: 2.2rem;
    color: var(--mofay-accent);
    margin-bottom: 20px;
}

.about-value-card h3 {
    font-size: 1.25rem;
    color: var(--mofay-secondary);
    margin-bottom: 12px;
    font-weight: 700;
}

.about-value-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mofay-text-muted);
}

.about-cta-section {
    padding: 80px 0;
    text-align: center;
    background-color: #FDFBF7;
}

.about-cta-inner {
    max-width: 650px;
    margin: 0 auto;
}

.about-cta-inner h2 {
    font-size: 2.2rem;
    color: var(--mofay-secondary);
    margin-bottom: 15px;
    font-family: var(--mofay-font-headings);
    font-weight: 700;
}

.about-cta-inner p {
    font-size: 1.1rem;
    color: var(--mofay-text-muted);
    margin-bottom: 30px;
}

/* ==========================================================================
   MOFAY V2.2: OVERHAULED SHOP FILTERS & PRODUCT DETAILS LAYOUTS
   ========================================================================== */

/* Breadcrumbs */
.mofay-breadcrumbs {
    font-size: 14px !important;
    color: #6b7280 !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
}

.mofay-breadcrumbs ol.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mofay-breadcrumbs li.breadcrumb-item a {
    color: #6b7280 !important;
    font-weight: 500;
}

.mofay-breadcrumbs li.breadcrumb-item a:hover {
    color: var(--mofay-primary) !important;
}

.mofay-breadcrumbs li.breadcrumb-item {
    display: flex;
    align-items: center;
}

.mofay-breadcrumbs li.breadcrumb-item::after {
    content: "→";
    margin: 0 10px;
    color: #cbd5e1 !important;
    font-weight: 400;
}

.mofay-breadcrumbs li.breadcrumb-item:last-child::after {
    content: "";
}

/* Overhauled Shop Header */
.mofay-shop-header-overhaul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--mofay-border);
}

.shop-title-overhaul {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--mofay-primary) !important;
    margin: 0 0 5px 0 !important;
}

.shop-subtitle-overhaul {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

.mofay-custom-sorting-select {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--mofay-border);
    background-color: var(--mofay-white);
    color: var(--mofay-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: var(--mofay-transition);
}

.mofay-custom-sorting-select:focus {
    border-color: var(--mofay-primary);
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
}

/* Filter List Checklist Checkboxes */
.mofay-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--mofay-text);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.filter-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-custom {
    height: 18px;
    width: 18px;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

.filter-checkbox-label:hover input ~ .checkbox-custom {
    border-color: var(--mofay-secondary);
    background-color: #e2e8f0;
}

.filter-checkbox-label input:checked ~ .checkbox-custom {
    background-color: var(--mofay-primary);
    border-color: var(--mofay-primary);
}

.checkbox-custom::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-checkbox-label input:checked ~ .checkbox-custom::after {
    display: block;
}

.filter-count {
    color: #6b7280;
    font-size: 0.85rem;
    margin-left: auto;
}

.rating-stars-text {
    color: var(--mofay-accent) !important;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* Price range inputs and widget sliders */
.mofay-price-slider-wrap {
    padding: 10px 5px;
}

.price-slider-range-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mofay-secondary);
    margin: 15px 0;
}

.btn-mofay-apply-price {
    width: 100%;
    background-color: var(--mofay-white);
    border: 1px solid var(--mofay-border);
    color: var(--mofay-secondary) !important;
    border-radius: 30px;
    padding: 8px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mofay-transition);
}

.btn-mofay-apply-price:hover {
    background-color: var(--mofay-primary);
    color: var(--mofay-white) !important;
    border-color: var(--mofay-primary);
}

/* Sidebar Apply filter actions */
.mofay-sidebar-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    border-top: 1px solid var(--mofay-border);
    padding-top: 20px;
}

.btn-mofay-sidebar-apply {
    background-color: var(--mofay-primary) !important;
    color: var(--mofay-white) !important;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--mofay-transition);
    text-align: center;
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.15);
    width: 100% !important;
}

.btn-mofay-sidebar-apply:hover {
    background-color: var(--mofay-secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 92, 0.25);
}

.mofay-sidebar-reset-link {
    color: #6b7280 !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    transition: var(--mofay-transition);
}

.mofay-sidebar-reset-link:hover {
    color: var(--mofay-accent) !important;
    text-decoration: underline;
}

/* Sticky Filters on Desktop */
@media (min-width: 1200px) {
    .mofay-sticky-filters {
        position: sticky !important;
        top: 100px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
    }
    
    .mofay-sticky-filters::-webkit-scrollbar {
        width: 4px;
    }
    
    .mofay-sticky-filters::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .mofay-sticky-filters::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

/* Empty alert count warning */
.mofay-shop-no-results-alert {
    padding: 40px;
    background-color: var(--mofay-white);
    border: 1px solid var(--mofay-border);
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--mofay-shadow-sm);
    grid-column: 1 / -1;
    margin-top: 20px;
}

.mofay-shop-no-results-alert h3 {
    font-size: 1.4rem;
    color: var(--mofay-primary);
    margin-bottom: 10px;
}

.mofay-shop-no-results-alert p {
    color: #6b7280;
    margin: 0;
}

/* Single Product Overhauls */
.product-info-cat-badge {
    background-color: transparent !important;
    color: #2d6a9f !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 10px !important;
    text-transform: uppercase;
}

.single-product-title-overhaul {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--mofay-primary) !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

.mofay-single-product-price-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--mofay-border);
    padding-bottom: 20px;
}

.price-val-range {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--mofay-price) !important;
}

.vat-note {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.size-note {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
}

.mofay-sale-badge-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sale-badge-pulse {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
    color: var(--mofay-white);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    animation: badgePulse 2s infinite;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@keyframes badgePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.ships-note {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mofay-secondary);
}

.product-availability-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.availability-status.instock {
    color: #2ecc71;
    font-weight: 700;
}

.mofay-size-selector-section-overhaul {
    margin-bottom: 25px;
}

.size-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.size-selector-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mofay-primary);
}

.mofay-size-guide-trigger {
    font-size: 0.88rem;
    color: var(--mofay-secondary) !important;
    font-weight: 600;
}

.mofay-size-guide-trigger:hover {
    color: var(--mofay-accent) !important;
    text-decoration: underline;
}

.mofay-size-toggle-buttons {
    display: flex;
    gap: 15px;
}

.size-toggle-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background-color: var(--mofay-white);
    border: 2px solid var(--mofay-border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--mofay-transition);
}

.size-toggle-btn:hover {
    border-color: var(--mofay-secondary);
    background-color: #fafbfc;
}

.size-toggle-btn.active {
    border-color: var(--mofay-secondary) !important;
    background-color: rgba(45, 106, 159, 0.08) !important;
    box-shadow: 0 4px 15px rgba(45, 106, 159, 0.12) !important;
}

.size-toggle-btn .size-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mofay-primary);
}

.size-toggle-btn.active .size-name {
    color: var(--mofay-secondary) !important;
}

.size-toggle-btn .size-stock {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

.size-toggle-btn.active .size-stock {
    color: var(--mofay-secondary) !important;
    font-weight: 700 !important;
}

.mofay-quantity-cta-section-overhaul {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.quantity-picker-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--mofay-border);
    border-radius: 50px;
    padding: 3px;
    background-color: var(--mofay-white);
}

.qty-control-btn {
    border: none;
    background: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--mofay-transition);
}

.qty-control-btn:hover {
    background-color: rgba(15, 30, 54, 0.05);
}

.qty-picker-input {
    width: 45px;
    text-align: center;
    border: none;
    font-weight: 700;
    font-size: 1.05rem;
    outline: none;
    background: none;
}

.qty-picker-input::-webkit-outer-spin-button,
.qty-picker-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mofay-satisfaction-guarantee-badge {
    font-size: 0.88rem;
    color: #6b7280;
    font-weight: 500;
    border-top: 1px dashed var(--mofay-border);
    padding-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mofay-satisfaction-guarantee-badge i {
    color: #2ecc71;
}

/* Custom Overhauled Tabs navigation */
.mofay-product-tabs-wrapper-overhaul {
    margin-top: 50px;
    border: 1px solid var(--mofay-border);
    border-radius: 12px;
    background-color: var(--mofay-white);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.tabs-navigation {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--mofay-border);
}

.tab-nav-item {
    flex: 1;
    text-align: center;
}

.tab-nav-item a {
    display: block;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--mofay-secondary) !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-right: 1px solid var(--mofay-border);
    transition: all 0.25s ease;
}

.tab-nav-item:last-child a {
    border-right: none;
}

.tab-nav-item.active a {
    background-color: var(--mofay-white);
    color: var(--mofay-primary) !important;
    box-shadow: inset 0 -3px 0 var(--mofay-primary);
}

.tab-content-panels {
    padding: 30px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-bullet-list, .tab-features-checklist {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.tab-bullet-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

.tab-bullet-list li::before {
    content: '•';
    color: var(--mofay-accent);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

.tab-features-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 500;
}

.tab-features-checklist i {
    color: #2ecc71;
    font-size: 1.1rem;
}

.btn-mofay-download-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: var(--mofay-secondary) !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: var(--mofay-transition);
}

.btn-mofay-download-pdf:hover {
    background-color: var(--mofay-secondary);
    color: var(--mofay-white) !important;
    border-color: var(--mofay-secondary);
}

/* Why Parents Love Grid */
.mofay-why-parents-love-grid-section {
    margin-top: 60px;
}

.section-title-overhaul {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mofay-primary) !important;
    margin-bottom: 30px !important;
}

.parents-love-grid-overhaul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .parents-love-grid-overhaul {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .parents-love-grid-overhaul {
        grid-template-columns: 1fr !important;
    }
}

.love-grid-card {
    background-color: var(--mofay-white);
    border: 1px solid var(--mofay-border);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
    transition: var(--mofay-transition);
}

.love-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26,58,92,0.06);
    border-color: var(--mofay-secondary);
}

.love-grid-card .card-icon {
    font-size: 24px !important;
    margin-bottom: 15px;
    display: block;
    color: var(--mofay-accent);
}

.love-grid-card h4 {
    font-size: 14px !important;
    margin: 0 0 8px 0 !important;
    font-weight: 700;
    color: var(--mofay-secondary);
}

.love-grid-card .card-desc {
    font-size: 12px !important;
    color: var(--mofay-text-muted) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Trust Row row cards */
.mofay-horizontal-trust-badges-row-section {
    margin-top: 50px;
    background-color: #f8fafc;
    border-top: 1px solid var(--mofay-border);
    border-bottom: 1px solid var(--mofay-border);
    padding: 30px 0;
}

.trust-badges-inner-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 767px) {
    .trust-badges-inner-row {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
        padding-bottom: 10px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .badge-row-card {
        flex: 0 0 120px !important;
        scroll-snap-align: start !important;
    }
}

.badge-row-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.badge-row-card i {
    font-size: 1.8rem;
}

.badge-icon-green {
    color: #2ecc71;
}

.badge-row-card span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mofay-secondary);
    line-height: 1.3;
}

/* Links Block */
.mofay-single-product-links-info-block {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--mofay-white);
    border: 1px solid var(--mofay-border);
    border-radius: 8px;
}

.links-line {
    font-size: 0.92rem;
    margin-bottom: 10px;
}

.links-line:last-child {
    margin-bottom: 0;
}

.inner-link-url, .outer-link-url {
    font-weight: 700;
    color: var(--mofay-secondary) !important;
    text-decoration: none;
    border-bottom: 1px dashed rgba(45, 106, 159, 0.3);
    transition: var(--mofay-transition);
}

.inner-link-url:hover, .outer-link-url:hover {
    color: var(--mofay-primary) !important;
    text-decoration: underline !important;
    border-bottom-color: var(--mofay-primary);
}

/* Related Products Header */
.mofay-related-products-row-section {
    margin-top: 60px;
}

/* Mobile Sticky bottom CTA bar */
.mofay-mobile-sticky-cta-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: var(--mofay-white);
    border-top: 2px solid var(--mofay-border);
    padding: 12px 20px;
    box-shadow: 0 -8px 30px rgba(15, 30, 54, 0.1);
    z-index: 999;
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mofay-mobile-sticky-cta-bottom-bar.visible {
    transform: translateY(0);
}

.sticky-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.sticky-product-details {
    display: flex;
    flex-direction: column;
}

.sticky-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mofay-primary);
}

.sticky-price {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mofay-price);
}

.mofay-sticky-whatsapp-btn {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
}

/* Size Chart popup guide modal */
.mofay-size-guide-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 30, 54, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mofay-size-guide-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.size-modal-box {
    background-color: var(--mofay-white);
    border-radius: 16px;
    padding: 40px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.mofay-size-guide-modal-backdrop.active .size-modal-box {
    transform: translateY(0);
}

.size-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #9ca3af;
}

.size-modal-close:hover {
    color: var(--mofay-primary);
}

.size-modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--mofay-primary);
    margin-bottom: 8px;
}

.size-modal-desc {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.size-modal-footer {
    margin-top: 25px;
    text-align: right;
}

/* Mobile Sidebar Drawer & Toggle Button V2.2 */
.mofay-mobile-filter-trigger-wrap {
    display: none;
    margin-bottom: 25px;
    width: 100%;
}

.mofay-mobile-filter-trigger-wrap button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    padding: 14px 20px;
    border-radius: 30px;
}

.mofay-sidebar-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mofay-border);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.mobile-sidebar-title {
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mofay-secondary);
}

.sidebar-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
}

.sidebar-close-btn:hover {
    color: var(--mofay-primary);
}

@media (max-width: 1199px) {
    .mofay-mobile-filter-trigger-wrap {
        display: block !important;
    }
    
    .shop-sidebar-column {
        position: fixed !important;
        top: 0 !important;
        left: -340px !important;
        width: 320px !important;
        height: 100vh !important;
        background-color: var(--mofay-white) !important;
        box-shadow: 0 0 30px rgba(15, 30, 54, 0.15) !important;
        z-index: 10010 !important;
        transition: var(--mofay-transition) !important;
        overflow-y: auto !important;
        padding: 25px !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    .shop-sidebar-column.open {
        left: 0 !important;
    }
}

/* ==========================================================================
   MOFAY ADDITIONAL CARD LAYOUT & WISHLIST OVERRIDES
   ========================================================================= */

/* Remove any background from product category badges */
.product-card-category,
span.product-card-category,
.badge-category-career-costumes,
.badge-category-fantasy-superhero-costumes,
[class*="badge-category-"] {
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Force action buttons to be displayed below the image and not absolute-hovered */
.product-card-actions {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px 8px 16px !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

.mofay-product-card:hover .product-card-actions {
    bottom: auto !important;
    transform: none !important;
}

/* Bulletproof style to hide YITH wishlist text and force icon-only display inside the circle */
.action-btn.wishlist-btn-wrap {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.action-btn.wishlist-btn-wrap .yith-wcwl-add-to-wishlist,
.action-btn.wishlist-btn-wrap .yith-wcwl-add-button,
.action-btn.wishlist-btn-wrap .yith-wcwl-wishlistaddedback,
.action-btn.wishlist-btn-wrap .yith-wcwl-wishlistexistsback {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.action-btn.wishlist-btn-wrap a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important; /* Hides raw text node */
    color: transparent !important; /* Secondary text hiding */
    text-decoration: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.action-btn.wishlist-btn-wrap a span,
.action-btn.wishlist-btn-wrap a label,
.action-btn.wishlist-btn-wrap .feedback,
.action-btn.wishlist-btn-wrap .ajax-loading,
.action-btn.wishlist-btn-wrap .yith-wcwl-tooltip {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    font-size: 0 !important;
}

/* Ensure the wishlist icon is perfectly sized and visible */
.action-btn.wishlist-btn-wrap i,
.action-btn.wishlist-btn-wrap .yith-wcwl-icon,
.action-btn.wishlist-btn-wrap .fa,
.action-btn.wishlist-btn-wrap .fas,
.action-btn.wishlist-btn-wrap .far {
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--mofay-secondary) !important;
}

/* Hover effects for action buttons including wishlist */
.action-btn:hover {
    background-color: var(--mofay-secondary) !important;
    color: var(--mofay-white) !important;
    border-color: var(--mofay-secondary) !important;
}

.action-btn.wishlist-btn-wrap:hover a i,
.action-btn.wishlist-btn-wrap:hover .yith-wcwl-icon,
.action-btn.wishlist-btn-wrap:hover .fa,
.action-btn.wishlist-btn-wrap:hover .fas,
.action-btn.wishlist-btn-wrap:hover .far {
    color: var(--mofay-white) !important;
}

/* Clean main product image hover zoom (no overlays, dimming) */
.mofay-product-image-container::before {
    display: none !important;
    content: none !important;
}

.mofay-product-image-container {
    background: #f8fafc !important; /* light grey/white background */
    border-radius: 12px !important;
}

/* ==========================================================================
   MOFAY SINGLE PRODUCT EXCLUSIVE OFFERS & CTAS STYLING
   ========================================================================== */

/* Offers Box styling */
.mofay-exclusive-offers-box-overhaul {
    background-color: #fcfcfc !important;
    border: 1px dashed rgba(45, 106, 159, 0.25) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.offers-box-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--mofay-primary) !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.offers-box-title i {
    color: var(--mofay-accent) !important;
}

.mofay-exclusive-offers-box-overhaul ul.offers-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mofay-exclusive-offers-box-overhaul ul.offers-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.85rem !important;
    color: #4b5563 !important;
    line-height: 1.4 !important;
}

.promo-code-pill {
    background-color: rgba(45, 106, 159, 0.08) !important;
    color: var(--mofay-secondary) !important;
    border: 1px solid rgba(45, 106, 159, 0.15) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

/* CTA buttons row */
.mofay-cta-buttons-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
}

.mofay-quantity-cta-section-overhaul {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

/* Buy Now big button */
.btn-buy-now-big {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    background-color: var(--mofay-primary) !important;
    color: var(--mofay-white) !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 0 25px !important;
    transition: var(--mofay-transition) !important;
    flex-grow: 1 !important;
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.15) !important;
}

.btn-buy-now-big:hover {
    background-color: var(--mofay-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(26, 58, 92, 0.25) !important;
    color: var(--mofay-white) !important;
}

.btn-whatsapp-order-big {
    flex-grow: 1 !important;
}

/* Wishlist big button wrapper */
.mofay-single-wishlist-btn-wrap {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: rgba(45, 106, 159, 0.08) !important;
    border: 1px solid rgba(45, 106, 159, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.mofay-single-wishlist-btn-wrap:hover {
    background-color: var(--mofay-secondary) !important;
    border-color: var(--mofay-secondary) !important;
}

.mofay-single-wishlist-btn-wrap .yith-wcwl-add-to-wishlist,
.mofay-single-wishlist-btn-wrap .yith-wcwl-add-button,
.mofay-single-wishlist-btn-wrap .yith-wcwl-wishlistaddedback,
.mofay-single-wishlist-btn-wrap .yith-wcwl-wishlistexistsback {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.mofay-single-wishlist-btn-wrap a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important; /* Hides raw text */
    color: transparent !important;
    text-decoration: none !important;
    background: transparent !important;
}

.mofay-single-wishlist-btn-wrap a span,
.mofay-single-wishlist-btn-wrap a label,
.mofay-single-wishlist-btn-wrap .feedback,
.mofay-single-wishlist-btn-wrap .ajax-loading,
.mofay-single-wishlist-btn-wrap .yith-wcwl-tooltip {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.mofay-single-wishlist-btn-wrap a::before {
    content: "\f004" !important; /* fa-heart solid */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: var(--mofay-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.mofay-single-wishlist-btn-wrap:hover a::before {
    color: var(--mofay-white) !important;
}

.mofay-single-wishlist-btn-wrap i,
.mofay-single-wishlist-btn-wrap .yith-wcwl-icon {
    display: none !important;
}

/* Loop card wishlist heart fallback */
.action-btn.wishlist-btn-wrap a::before {
    content: "\f004" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: var(--mofay-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.action-btn.wishlist-btn-wrap:hover a::before {
    color: var(--mofay-white) !important;
}

.action-btn.wishlist-btn-wrap a i,
.action-btn.wishlist-btn-wrap a .yith-wcwl-icon {
    display: none !important;
}

/* Sticky CTA buttons layout */
.sticky-cta-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-whatsapp-order.mofay-sticky-whatsapp-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.btn-buy-now.mofay-sticky-buy-btn {
    background-color: var(--mofay-primary) !important;
    color: var(--mofay-white) !important;
    border-radius: 30px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 10px rgba(26, 58, 92, 0.1) !important;
}

.btn-buy-now.mofay-sticky-buy-btn:hover {
    background-color: var(--mofay-secondary) !important;
    color: var(--mofay-white) !important;
}


/* ==========================================================================
   MOFAY V2.2: COUNTDOWN, GDPR, RECENTLY VIEWED & FLOATING WHATSAPP
   ========================================================================== */

/* 1. Hero Countdown Timer */
.mofay-countdown-timer-wrap {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.countdown-title {
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mofay-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mofay-countdown-timer {
    display: flex;
    gap: 12px;
}
.countdown-item {
    background-color: var(--mofay-white);
    border: 2.5px solid var(--mofay-secondary);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    min-width: 70px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}
.countdown-item:hover {
    transform: translateY(-2px);
}
.countdown-number {
    display: block;
    font-family: var(--mofay-font-headings);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--mofay-primary);
    line-height: 1.2;
}
.countdown-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mofay-text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

/* 2. GDPR Cookie Consent Banner */
#mofay-gdpr-banner {
    position: fixed;
    bottom: -200px;
    left: 0;
    width: 100%;
    background-color: var(--mofay-white);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
    z-index: 10000;
    padding: 20px;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
#mofay-gdpr-banner.active {
    bottom: 0;
}
.gdpr-content {
    flex-grow: 1;
    margin-right: 25px;
    text-align: left;
}
.gdpr-title {
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--mofay-primary);
    margin: 0 0 5px 0;
}
.gdpr-text {
    font-size: 0.85rem;
    color: var(--mofay-text-muted);
    margin: 0;
    line-height: 1.5;
}
.gdpr-actions {
    display: flex;
    gap: 12px;
}
.btn-gdpr-accept {
    background-color: var(--mofay-primary);
    color: var(--mofay-white);
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--mofay-transition);
}
.btn-gdpr-accept:hover {
    background-color: var(--mofay-secondary);
    transform: translateY(-1.5px);
}

/* 3. Floating WhatsApp Chat Button */
.mofay-whatsapp-floating-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mofay-whatsapp-floating-btn {
    width: 60px;
    height: 60px;
    background-color: var(--mofay-whatsapp);
    color: var(--mofay-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
    transition: var(--mofay-transition);
    cursor: pointer;
    text-decoration: none !important;
}
.mofay-whatsapp-floating-btn:hover {
    transform: scale(1.1) rotate(5deg);
    background-color: #128c7e;
}
.whatsapp-tooltip-bubble {
    background-color: var(--mofay-white);
    color: var(--mofay-text);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    pointer-events: none;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    border-left: 4px solid var(--mofay-whatsapp);
}
.mofay-whatsapp-floating-wrap:hover .whatsapp-tooltip-bubble {
    opacity: 1;
    transform: translateX(0);
}

/* 4. Recently Viewed Section */
.mofay-recently-viewed-section {
    padding: 40px 0;
    background-color: var(--mofay-white);
    margin-top: 45px;
    border-top: 1px solid var(--mofay-border);
}
.mofay-recently-viewed-section .section-title {
    font-family: var(--mofay-font-headings);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--mofay-primary);
    text-align: center;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    #mofay-gdpr-banner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
        bottom: -250px;
    }
    .gdpr-content {
        margin-right: 0;
    }
    .gdpr-actions {
        width: 100%;
        justify-content: center;
    }
    .mofay-whatsapp-floating-wrap {
        bottom: 20px;
        right: 20px;
    }
    .mofay-whatsapp-floating-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .whatsapp-tooltip-bubble {
        display: none;
    }
}

/* ==========================================================================
   MOFAY HOMEPAGE REDESIGN: PROMOTIONAL BANNERS, HERO IMAGE & ADVERTISEMENTS
   ========================================================================== */

/* Hero Graphics & Image Frame overrides */
.hero-kids-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-main-illustration {
    width: 340px !important;
    height: 440px !important;
    background-color: var(--mofay-white) !important;
    border-radius: 30px !important;
    position: relative !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
    border: 8px solid var(--mofay-white) !important;
    transform: rotate(2deg) !important;
    transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}

.hero-main-illustration:hover {
    transform: rotate(0deg) scale(1.03) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.18) !important;
}

/* Promotional Banners Section */
.mofay-promo-banners-section {
    padding: 60px 0;
    background-color: var(--mofay-white);
}

.promo-banners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.mofay-promo-banner-card {
    position: relative;
    border-radius: 24px;
    height: 380px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    align-items: flex-end;
    color: var(--mofay-white) !important;
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mofay-promo-banner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}

.mofay-promo-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mofay-promo-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s ease;
}

.mofay-promo-banner-card:hover .mofay-promo-banner-bg img {
    transform: scale(1.05);
}

.mofay-promo-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 30, 54, 0.85) 0%, rgba(15, 30, 54, 0.4) 50%, rgba(15, 30, 54, 0.1) 100%);
    z-index: 2;
}

.mofay-promo-banner-content {
    position: relative;
    z-index: 3;
    padding: 40px;
    width: 100%;
}

.mofay-promo-banner-tag {
    background-color: var(--mofay-accent);
    color: var(--mofay-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 12px;
}

.mofay-promo-banner-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
    color: var(--mofay-white);
}

.mofay-promo-banner-btn {
    color: var(--mofay-white);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mofay-promo-banner-btn i {
    transition: transform 0.3s ease;
}

.mofay-promo-banner-card:hover .mofay-promo-banner-btn i {
    transform: translateX(5px);
}

/* Full-Width Advertisement */
.mofay-home-advertisement {
    padding: 60px 0;
    background-color: var(--mofay-bg);
}

.advertisement-card-inner {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.advertisement-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.advertisement-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.advertisement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 30, 54, 0.9) 0%, rgba(15, 30, 54, 0.6) 50%, transparent 100%);
    z-index: 2;
}

.advertisement-content {
    position: relative;
    z-index: 3;
    padding: 60px;
    max-width: 600px;
    color: var(--mofay-white);
}

.advertisement-badge {
    background-color: var(--mofay-accent);
    color: var(--mofay-secondary);
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

.advertisement-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.15;
    color: var(--mofay-white);
}

.advertisement-desc {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.btn-mofay-ad-cta {
    background-color: var(--mofay-primary);
    color: var(--mofay-white) !important;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}

.btn-mofay-ad-cta:hover {
    background-color: var(--mofay-secondary);
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(78, 205, 196, 0.4);
}

/* Fallback product catalog cards overrides */
.mofay-fallback-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    aspect-ratio: 3/4;
}

/* Homepage responsive layout overrides */
@media (max-width: 991px) {
    .promo-banners-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .mofay-promo-banner-card {
        height: 300px;
    }
    .advertisement-content {
        padding: 40px;
    }
    .advertisement-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .hero-main-illustration {
        width: 280px !important;
        height: 360px !important;
        margin: 0 auto !important;
    }
    .mofay-promo-banner-content {
        padding: 30px;
    }
    .mofay-promo-banner-title {
        font-size: 1.8rem;
    }
    .advertisement-card-inner {
        min-height: auto;
    }
    .advertisement-content {
        padding: 30px 20px;
        text-align: center;
    }
    .advertisement-overlay {
        background: rgba(15, 30, 54, 0.85);
    }
    .btn-mofay-ad-cta {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   MOFAY COLLAGE HERO BANNER, SPACING ENHANCEMENTS & DISCOUNT TAGS
   ========================================================================== */

/* Spacing & Gap Adjustments to tighten rating stars and price gap */
.product-price {
    margin-top: 2px !important;
}

.mofay-stars-display {
    margin-bottom: 2px !important;
}

.mofay-card-cta-grid {
    margin-top: auto !important;
}

/* Inline Price Discount Tag badge */
.mofay-price-discount-tag {
    background-color: var(--mofay-primary, #FF6B6B);
    color: var(--mofay-white) !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.2);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Hero Collage Poster Banner Styles */
.hero-collage-container {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.collage-bg-circle {
    position: absolute;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 230, 109, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

.collage-img {
    position: absolute;
    bottom: 0;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.12));
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
    will-change: transform;
}

/* Layer overlaps & sizes */
.collage-supergirl {
    left: 10%;
    height: 320px;
    z-index: 2;
    transform: rotate(-6deg);
}

.collage-pirate {
    left: 28%;
    height: 390px;
    z-index: 4;
    transform: scale(1.05);
}

.collage-police {
    right: 12%;
    height: 340px;
    z-index: 3;
    transform: rotate(6deg);
}

.collage-astronaut {
    right: 32%;
    height: 270px;
    z-index: 1;
    opacity: 0.9;
    transform: rotate(-8deg);
}

/* Collage Hover animations */
.collage-img:hover {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
    z-index: 10;
}

.collage-supergirl:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.04);
}

.collage-pirate:hover {
    transform: translateY(-10px) scale(1.08);
}

.collage-police:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.04);
}

.collage-astronaut:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.04);
    opacity: 1;
}

/* Collage responsiveness */
@media (max-width: 991px) {
    .hero-collage-container {
        height: 380px;
    }
    .collage-bg-circle {
        width: 300px;
        height: 300px;
    }
    .collage-supergirl {
        left: 5%;
        height: 250px;
    }
    .collage-pirate {
        left: 24%;
        height: 320px;
    }
    .collage-police {
        right: 5%;
        height: 270px;
    }
    .collage-astronaut {
        right: 28%;
        height: 210px;
    }
}

@media (max-width: 768px) {
    .hero-collage-container {
        height: 350px;
        align-items: flex-end;
    }
    .collage-supergirl,
    .collage-police,
    .collage-astronaut {
        display: none !important;
    }
    .collage-pirate {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        height: 330px !important;
        transform: none !important;
        display: block !important;
        z-index: 5 !important;
    }
    .collage-pirate:hover {
        transform: translateY(-5px) scale(1.03) !important;
    }
}

/* Mobile Landscape orientation layout checks */
@media (max-height: 520px) and (max-width: 900px) {
    .mofay-hero-section {
        padding: 40px 0 !important;
    }
    .hero-collage-container {
        height: 220px !important;
    }
    .collage-pirate {
        height: 200px !important;
    }
    .hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   MOFAY ADDITIONAL DESIGN POLISH & CARD CORRECTIONS
   ========================================================================== */

/* Tighten vertical gap between stars and price */
.product-rating {
    margin-bottom: 2px !important;
}

/* Redesign and tighten the price row: left-aligned, horizontal gaps tight, single-line alignment */
.product-price {
    margin-top: 2px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
}

.product-price del,
.product-price ins {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Strikethrough regular price: a little bit bold */
.product-price del {
    font-weight: 600 !important; /* little bit bold */
    color: var(--mofay-text-muted) !important;
    text-decoration: line-through !important;
    font-size: 0.85em !important;
    margin-right: 2px !important;
}

/* Active price layout */
.product-price ins {
    color: var(--mofay-primary, #FF6B6B) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Wishlist Badge absolute overlay - Reset backgrounds, borders and force outline heart */
.card-wishlist-badge,
.card-wishlist-badge *,
.card-wishlist-badge div,
.card-wishlist-badge span,
.card-wishlist-badge a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.card-wishlist-badge .yith-wcwl-add-to-wishlist,
.card-wishlist-badge .yith-wcwl-add-button,
.card-wishlist-badge .yith-wcwl-wishlistaddedback,
.card-wishlist-badge .yith-wcwl-wishlistexistsback {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.card-wishlist-badge .yith-wcwl-add-button a, 
.card-wishlist-badge .yith-wcwl-wishlistaddedback a, 
.card-wishlist-badge .yith-wcwl-wishlistexistsback a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important; /* Hide YITH texts */
    color: transparent !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Outline Heart state (Default when not in wishlist) - Injecting glyph via pseudo element for bulletproof rendering */
.card-wishlist-badge .yith-wcwl-add-button a i, 
.card-wishlist-badge .yith-wcwl-add-button a .yith-wcwl-icon {
    font-size: 22px !important;
    color: transparent !important; 
    display: inline-block !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}
.card-wishlist-badge .yith-wcwl-add-button a i::before, 
.card-wishlist-badge .yith-wcwl-add-button a .yith-wcwl-icon::before {
    content: "\f08a" !important; /* Outline Heart */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important; /* Outline weight */
    color: #ff3b30 !important;
    display: inline-block !important;
}

/* Solid Red Heart state (Hovered, Added, or Exists in wishlist) */
.card-wishlist-badge .yith-wcwl-wishlistaddedback a i, 
.card-wishlist-badge .yith-wcwl-wishlistexistsback a i,
.card-wishlist-badge .yith-wcwl-wishlistaddedback a .yith-wcwl-icon, 
.card-wishlist-badge .yith-wcwl-wishlistexistsback a .yith-wcwl-icon,
.card-wishlist-badge .yith-wcwl-add-button a:hover i,
.card-wishlist-badge .yith-wcwl-add-button a:hover .yith-wcwl-icon {
    font-size: 22px !important;
    color: transparent !important; 
    display: inline-block !important;
    text-shadow: none !important;
}
.card-wishlist-badge .yith-wcwl-wishlistaddedback a i::before, 
.card-wishlist-badge .yith-wcwl-wishlistexistsback a i::before,
.card-wishlist-badge .yith-wcwl-wishlistaddedback a .yith-wcwl-icon::before, 
.card-wishlist-badge .yith-wcwl-wishlistexistsback a .yith-wcwl-icon::before,
.card-wishlist-badge .yith-wcwl-add-button a:hover i::before,
.card-wishlist-badge .yith-wcwl-add-button a:hover .yith-wcwl-icon::before {
    content: "\f004" !important; /* Solid Heart */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important; /* Solid weight */
    color: #ff3b30 !important;
    display: inline-block !important;
}

/* Hide all text descriptions and labels inside the wishlist badge */
.card-wishlist-badge a span:not(.yith-wcwl-icon),
.card-wishlist-badge span.feedback,
.card-wishlist-badge .feedback,
.card-wishlist-badge .yith-wcwl-tooltip,
.card-wishlist-badge .ajax-loading {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Slick Carousel Arrow Indicators visibility fix */
.mofay-products-carousel-init .slick-prev,
.mofay-products-carousel-init .slick-next {
    font-size: 0 !important; /* Hide default "Next"/"Previous" text node */
}

.mofay-products-carousel-init .slick-prev::before {
    content: "←" !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    color: var(--mofay-secondary, #1a2b4c) !important;
    opacity: 1 !important;
    display: block !important;
    line-height: 1 !important;
}

.mofay-products-carousel-init .slick-next::before {
    content: "→" !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    color: var(--mofay-secondary, #1a2b4c) !important;
    opacity: 1 !important;
    display: block !important;
    line-height: 1 !important;
}

.mofay-products-carousel-init .slick-prev:hover::before,
.mofay-products-carousel-init .slick-next:hover::before {
    color: var(--mofay-white) !important;
}

/* ==========================================================================
   MOFAY CRITICAL MOBILE & LANDSCAPE RESPONSIVE CORRECTIONS
   ========================================================================== */

/* Hide WhatsApp floating widget completely on mobile devices */
@media screen and (max-width: 768px) {
    .mofay-whatsapp-floating-wrap,
    #mofay-whatsapp-floating,
    .mofay-whatsapp-floating-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Fix mobile menu drawer layout in landscape mode where viewport height is small */
.mofay-mobile-menu-drawer .drawer-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent global horizontal page overflow on small screens / browsers */
@media screen and (max-width: 768px) {
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .site {
        overflow: hidden !important;
    }
}

/* Align and center bottom layout elements to prevent layout offset on mobile */
@media screen and (max-width: 767px) {
    .copyright-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .mofay-payment-gateways {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 5px !important;
    }
}

/* ==========================================================================
   HOMEPAGE DUAL ADVERTISEMENT CARDS
   ========================================================================== */
.mofay-home-dual-ads {
    padding: 60px 0 !important;
    background-color: var(--mofay-bg) !important;
}

.promo-ads-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
}

.mofay-ad-card-half {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    background-color: var(--mofay-white) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(15, 30, 54, 0.05) !important;
    border: none !important;
    transition: var(--mofay-transition) !important;
}

.mofay-ad-card-half:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(15, 30, 54, 0.1) !important;
}

.mofay-ad-card-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Smooth blending transparent-to-white gradient overlay on the card images for blending with the content side */
.mofay-ad-card-image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 70%, rgba(255,255,255,0.9) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.mofay-ad-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: var(--mofay-transition) !important;
}

.mofay-ad-card-half:hover .mofay-ad-card-image img {
    transform: scale(1.03) !important;
}

.mofay-ad-card-content {
    padding: 35px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.mofay-ad-card-tag {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--mofay-primary) !important;
    background-color: rgba(255, 107, 107, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
}

.mofay-ad-card-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--mofay-secondary) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.mofay-ad-card-desc {
    font-size: 0.9rem !important;
    color: var(--mofay-text-muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.mofay-ad-card-btn {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--mofay-primary) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--mofay-transition) !important;
    margin-top: 5px !important;
}

.mofay-ad-card-btn:hover {
    color: var(--mofay-secondary) !important;
    transform: translateX(4px) !important;
}

@media screen and (max-width: 991px) {
    .promo-ads-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

@media screen and (max-width: 576px) {
    .mofay-ad-card-half {
        grid-template-columns: 1fr !important;
    }
    .mofay-ad-card-content {
        padding: 25px !important;
    }
    .mofay-ad-card-image {
        min-height: 200px !important;
        order: -1 !important; /* Always display image first on mobile! */
    }
}


/* ==========================================================================
   MOFAY V2.0.5 - BEAUTIFUL 3-LINE SIDE DRAWER & CATEGORY LIST STYLES
   ========================================================================== */

/* Universal Hamburger Trigger */
.mofay-hamburger-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    padding: 8px 14px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s ease;
}
.mofay-hamburger-trigger:hover {
    background: #FF6B6B;
    color: #FFFFFF;
    border-color: #FF6B6B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.25);
}

/* Category Launcher Button in Desktop Nav Bar */
.nav-category-trigger-wrap {
    margin-right: 20px;
}
.nav-category-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    color: #FFFFFF;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3);
}
.nav-category-btn:hover {
    background: linear-gradient(135deg, #FF4757 0%, #E84118 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.4);
}
.nav-category-btn .nav-cat-arrow {
    font-size: 11px;
    transition: transform 0.2s ease;
}

/* Side Drawer Box Overlay & Backdrop */
.mofay-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}
.mofay-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Main Side Drawer Panel */
.mofay-mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 390px;
    max-width: 90vw;
    background: #FFFFFF;
    z-index: 999999;
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mofay-mobile-menu-drawer.open {
    transform: translateX(0);
}

/* Drawer Header */
.mofay-mobile-menu-drawer .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer-brand-info {
    display: flex;
    flex-direction: column;
}
.drawer-brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #FF6B6B;
}
.drawer-brand-sub {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}
.mofay-mobile-menu-drawer .drawer-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}
.mofay-mobile-menu-drawer .drawer-close:hover {
    background: #FF6B6B;
    transform: rotate(90deg);
}

/* Drawer Content Scroll Container */
.mofay-mobile-menu-drawer .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    scroll-behavior: smooth;
}
.mofay-mobile-menu-drawer .drawer-content::-webkit-scrollbar {
    width: 5px;
}
.mofay-mobile-menu-drawer .drawer-content::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
}

/* Drawer Search Box */
.mofay-mobile-menu-drawer .mobile-search-wrap {
    margin-bottom: 22px;
}
.mofay-mobile-menu-drawer .mobile-search-wrap .search-input-wrap {
    display: flex;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.mofay-mobile-menu-drawer .mobile-search-wrap .search-input-wrap:focus-within {
    border-color: #4ECDC4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.15);
}
.mofay-mobile-menu-drawer .mobile-search-wrap .search-field {
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
    color: #1E293B;
    outline: none;
}
.mofay-mobile-menu-drawer .mobile-search-wrap .search-submit {
    background: transparent;
    border: none;
    padding: 0 16px;
    color: #64748B;
    cursor: pointer;
    font-size: 15px;
}
.mofay-mobile-menu-drawer .mobile-search-wrap .search-submit:hover {
    color: #FF6B6B;
}

/* Drawer Section Headings */
.drawer-section {
    margin-bottom: 24px;
}
.drawer-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1F5F9;
}
.drawer-section-header .section-icon {
    color: #4ECDC4;
    font-size: 15px;
}
.drawer-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    margin: 0;
}

/* Drawer Category List Items */
.drawer-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.drawer-cat-item {
    margin: 0;
}
.drawer-cat-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
    border-radius: 12px;
    text-decoration: none;
    color: #1E293B;
    transition: all 0.25s ease;
}
.drawer-cat-link:hover {
    background: #FFFFFF;
    border-color: #4ECDC4;
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.15);
    text-decoration: none;
}
.drawer-cat-icon {
    font-size: 22px;
    width: 38px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}
.drawer-cat-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.drawer-cat-title {
    font-weight: 700;
    font-size: 14px;
    color: #0F172A;
    line-height: 1.3;
}
.drawer-cat-desc {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}
.drawer-cat-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.badge-popular { background: #FFE4E6; color: #E11D48; }
.badge-hot { background: #FFEDD5; color: #C2410C; }
.badge-trending { background: #E0E7FF; color: #4338CA; }
.badge-stem { background: #CCFBF1; color: #0F766E; }

.drawer-cat-arrow {
    font-size: 12px;
    color: #94A3B8;
    transition: transform 0.2s ease, color 0.2s ease;
}
.drawer-cat-link:hover .drawer-cat-arrow {
    color: #FF6B6B;
    transform: translateX(3px);
}

/* Quick Nav Links */
.drawer-section .mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.drawer-section .mobile-navigation li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.drawer-section .mobile-navigation li a:hover {
    background: #FFF1F2;
    color: #FF6B6B;
}
.drawer-section .mobile-navigation li a i {
    width: 20px;
    text-align: center;
    color: #64748B;
}
.drawer-section .mobile-navigation li a:hover i {
    color: #FF6B6B;
}

/* Drawer Footer Info Box */
.drawer-footer-card {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-radius: 14px;
    padding: 16px;
    margin-top: 10px;
    border: 1px dashed #CBD5E1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drawer-delivery-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #0F172A;
}
.drawer-delivery-notice .flag {
    font-size: 18px;
}
.drawer-whatsapp-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
.drawer-whatsapp-action:hover {
    background: #1EBE5D;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
    text-decoration: none;
}

.drawer-logo-img {
    max-height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 2px;
}


/* Sticky 100% Visible White Main Header */
.site-header.mofay-header-main {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
.size-guide-link, #mofay-size-guide-btn {
    display: none !important;
}


/* High Contrast Professional Footer Styling */
.mofay-footer-main {
    background: #0F172A !important;
    color: #94A3B8 !important;
    padding-top: 50px !important;
    border-top: 4px solid #FF6B6B !important;
}
.mofay-footer-main .footer-widget-title {
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    padding-bottom: 10px !important;
}
.mofay-footer-main .footer-widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    background: #4ECDC4;
    border-radius: 2px;
}
.mofay-footer-main p.footer-about-text {
    color: #CBD5E1 !important;
    line-height: 1.6 !important;
    font-size: 0.92rem !important;
}
.footer-contact-highlight {
    margin: 16px 0 !important;
}
.footer-whatsapp-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #25D366 !important;
    color: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
    transition: all 0.25s ease !important;
}
.footer-whatsapp-pill:hover {
    background: #1EBE5D !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
.mofay-footer-main .footer-social-links a {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 8px !important;
    transition: all 0.25s ease !important;
}
.mofay-footer-main .footer-social-links a:hover {
    background: #FF6B6B !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}
.mofay-footer-main .footer-links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.mofay-footer-main .footer-links-list li a {
    color: #CBD5E1 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
}
.mofay-footer-main .footer-links-list li a:hover {
    color: #4ECDC4 !important;
    transform: translateX(4px) !important;
}
.mofay-footer-main .footer-contact-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.mofay-footer-main .footer-contact-details li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #CBD5E1 !important;
    font-size: 0.92rem !important;
}
.mofay-footer-main .footer-contact-details li i {
    color: #4ECDC4 !important;
    width: 18px !important;
    text-align: center !important;
}
.mofay-footer-main .footer-contact-details li a {
    color: #CBD5E1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.mofay-footer-main .footer-contact-details li a:hover {
    color: #FFFFFF !important;
}
.footer-copyright-bar {
    background: #020617 !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #64748B !important;
    font-size: 0.88rem !important;
}
.footer-copyright-bar p {
    margin: 0 !important;
    color: #94A3B8 !important;
}
.mofay-payment-gateways i {
    font-size: 1.5rem !important;
    color: #94A3B8 !important;
    margin-left: 12px !important;
    transition: color 0.2s ease !important;
}
.mofay-payment-gateways i:hover {
    color: #FFFFFF !important;
}


/* ==========================================================================
   MOFAY V2.0.9 - FULL-WIDTH DESKTOP & CONTAINER LAYOUT FIXES
   ========================================================================== */

html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #FFFFFF !important;
}

#page, .site {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: #FFFFFF !important;
}

.mofay-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.site-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   MOFAY V2.1.2 - CONTACT PAGE & FOOTER VISIBILITY STYLES
   ========================================================================== */

.mofay-contact-page-wrap {
    background: #F8FAFC;
    padding-bottom: 60px;
}

.contact-hero-banner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    padding: 60px 0 50px;
    text-align: center;
    border-bottom: 4px solid #FF6B6B;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #4ECDC4;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.contact-hero-sub {
    font-size: 16px;
    color: #94A3B8;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-main-section {
    padding-top: 50px;
}

.contact-grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .contact-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.contact-col-title {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-col-title i {
    color: #FF6B6B;
}

.contact-col-desc {
    color: #64748B;
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.contact-card:hover {
    border-color: #4ECDC4;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.12);
}

.card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.icon-location { background: #EEF2FF; color: #4F46E5; }
.icon-phone { background: #DCFCE7; color: #16A34A; }
.icon-email { background: #FEF3C7; color: #D97706; }
.icon-hours { background: #CCFBF1; color: #0D9488; }

.card-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 4px;
}

.card-text p {
    font-size: 14px;
    color: #334155;
    margin: 0 0 6px;
    font-weight: 600;
}

.card-text p a {
    color: #0F172A;
    text-decoration: none;
}

.card-tag {
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    background: #F1F5F9;
    padding: 3px 8px;
    border-radius: 20px;
}

.tag-whatsapp {
    background: #DCFCE7;
    color: #15803D;
}

.contact-form-card {
    background: #FFFFFF;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-title {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-title i { color: #4ECDC4; }

.form-subtitle {
    color: #64748B;
    font-size: 14px;
    margin-bottom: 24px;
}

.mofay-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 576px) {
    .mofay-contact-form .form-row {
        grid-template-columns: 1fr;
    }
}

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

.mofay-contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}

.mofay-contact-form input,
.mofay-contact-form select,
.mofay-contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 14px;
    color: #0F172A;
    outline: none;
    transition: all 0.2s ease;
}

.mofay-contact-form input:focus,
.mofay-contact-form select:focus,
.mofay-contact-form textarea:focus {
    border-color: #FF6B6B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

.contact-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    color: #FFFFFF;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

.contact-submit-btn:hover {
    background: linear-gradient(135deg, #FF4757 0%, #E84118 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* Ensure Footer Always Visible */
footer.mofay-footer-main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}


/* ==========================================================================
   MOFAY V2.1.4 - BRAND NEW CUSTOM FOOTER STYLES
   ========================================================================== */

.mofay-new-newsletter-section {
    background: #F8FAFC;
    padding: 30px 0;
}
.newsletter-card-inner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 20px;
    padding: 35px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 991px) {
    .newsletter-card-inner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
}
.newsletter-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
}
.newsletter-card-desc {
    font-size: 14px;
    color: #94A3B8;
    margin: 0;
}
.mofay-newsletter-form {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 480px;
}
@media (max-width: 576px) {
    .mofay-newsletter-form {
        flex-direction: column;
    }
}
.newsletter-input-field {
    flex: 1;
    padding: 12px 18px;
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    color: #0F172A;
    outline: none;
}
.newsletter-btn-submit {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    color: #FFFFFF;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.newsletter-btn-submit:hover {
    background: linear-gradient(135deg, #FF4757 0%, #E84118 100%);
    transform: translateY(-1px);
}

.mofay-new-footer-main {
    background: #0B132B !important;
    color: #94A3B8 !important;
    padding-top: 55px !important;
    border-top: 4px solid #FF6B6B !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mofay-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}
@media (max-width: 991px) {
    .mofay-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}
@media (max-width: 576px) {
    .mofay-footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #FF6B6B;
    letter-spacing: -0.5px;
}
.footer-brand-tagline {
    font-size: 12px;
    color: #4ECDC4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.footer-brand-desc {
    font-size: 13.5px;
    color: #CBD5E1;
    line-height: 1.6;
    margin-bottom: 16px;
}
.footer-wa-badge-wrap {
    margin-bottom: 16px;
}
.footer-wa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #FFFFFF !important;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: all 0.25s ease;
}
.footer-wa-badge:hover {
    background: #1EBE5D;
    transform: translateY(-2px);
}

.footer-social-icons {
    display: flex;
    gap: 10px;
}
.footer-social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none !important;
    transition: all 0.25s ease;
}
.footer-social-icons a:hover {
    background: #FF6B6B;
    transform: translateY(-2px);
}

.footer-heading {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0 0 20px;
    position: relative;
    padding-bottom: 10px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: #4ECDC4;
    border-radius: 2px;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-link-list li a {
    color: #CBD5E1 !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-link-list li a:hover {
    color: #4ECDC4 !important;
    transform: translateX(4px);
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #CBD5E1;
    font-size: 13.5px;
}
.footer-contact-list li a {
    color: #CBD5E1 !important;
    text-decoration: none !important;
}
.footer-contact-list li a:hover {
    color: #FFFFFF !important;
}
.icon-gold { color: #FFE66D; }
.icon-teal { color: #4ECDC4; }
.icon-red { color: #FF6B6B; }
.icon-green { color: #25D366; }

.mofay-footer-bottom-bar {
    background: #050C1E;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bottom-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 576px) {
    .bottom-bar-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
.bottom-left p {
    margin: 0;
    font-size: 13px;
    color: #64748B;
}
.payment-icons i {
    font-size: 24px;
    color: #64748B;
    margin-left: 12px;
    transition: color 0.2s ease;
}
.payment-icons i:hover {
    color: #FFFFFF;
}


/* MOFAY CATEGORIES GRID 3-COLUMN LAYOUT */
.mofay-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-top: 30px !important;
    margin-bottom: 50px !important;
}

@media (max-width: 991px) {
    .mofay-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .mofay-categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* MOFAY WHY PARENTS LOVE GRID 4-COLUMN LAYOUT */
.mofay-why-parents-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 30px !important;
    margin-bottom: 50px !important;
}

@media (max-width: 991px) {
    .mofay-why-parents-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .mofay-why-parents-grid {
        grid-template-columns: 1fr !important;
    }
}

/* CATEGORY CARD STYLING */
.mofay-category-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 30px 24px !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
}

.mofay-category-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

/* WHY CARD STYLING */
.why-card {
    background: #ffffff !important;
    padding: 24px !important;
    border-radius: 16px !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    text-align: left !important;
}


/* ==========================================================================
   MOFAY HERO SLIDER & CATEGORY CARDS FULL UI/UX STYLES
   ========================================================================== */

.mofay-hero-slider-section {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #1a1a2e !important;
}

.mofay-hero-slider-container {
    position: relative !important;
    width: 100% !important;
}

.hero-slider-track {
    display: flex !important;
    width: 100% !important;
}

.hero-slide {
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 100px 0 !important;
    min-height: 520px !important;
    display: flex !important;
    align-items: center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: #ffffff !important;
    position: relative !important;
}

.hero-slide.active-slide {
    display: flex !important;
}

.slide-content-wrap {
    max-width: 750px !important;
    position: relative !important;
    z-index: 2 !important;
}

.slide-badge {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.slide-title {
    font-size: 46px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.slide-subtitle {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 35px !important;
    max-width: 650px !important;
}

.slide-btn-group {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.btn-mofay-primary {
    background: #ff4757 !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-mofay-primary:hover {
    background: #e84118 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.btn-mofay-secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px) !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-mofay-secondary:hover {
    background: #ffffff !important;
    color: #1a1a2e !important;
    transform: translateY(-2px) !important;
}

/* CATEGORY CARDS SECTION */
.mofay-home-categories-grid-section {
    padding: 70px 0 !important;
    background: #f8fafc !important;
}

.mofay-section-header-center {
    text-align: center !important;
    margin-bottom: 45px !important;
}

.mofay-section-header-center .sub-heading {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

.mofay-section-header-center .mofay-section-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
}

/* CATEGORY GRID 3-COLUMN */
.mofay-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

/* CARD COLOR VARIANTS */
.mofay-category-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 35px 30px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.mofay-category-card.card-purple {
    background: linear-gradient(135deg, #ffffff 0%, #f3e8ff 100%) !important;
    border-top: 4px solid #a855f7 !important;
}

.mofay-category-card.card-pink {
    background: linear-gradient(135deg, #ffffff 0%, #ffe4e6 100%) !important;
    border-top: 4px solid #f43f5e !important;
}

.mofay-category-card.card-blue {
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%) !important;
    border-top: 4px solid #0284c7 !important;
}

.mofay-category-card.card-teal {
    background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%) !important;
    border-top: 4px solid #0d9488 !important;
}

.mofay-category-card.card-orange {
    background: linear-gradient(135deg, #ffffff 0%, #ffedd5 100%) !important;
    border-top: 4px solid #ea580c !important;
}

.mofay-category-card.card-indigo {
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%) !important;
    border-top: 4px solid #6366f1 !important;
}

.mofay-category-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.card-badge {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: #1a1a2e !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}

.card-icon-wrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    color: #1a1a2e !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.card-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 10px !important;
}

.card-desc {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

.card-btn-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* WHY PARENTS LOVE SECTION */
.mofay-why-parents-love-section {
    padding: 70px 0 !important;
    background: #ffffff !important;
}

.mofay-why-parents-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
}

.why-card {
    padding: 30px 24px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease !important;
}

.why-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

.why-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 20px !important;
}

.why-icon-wrap.icon-purple { background: #f3e8ff !important; color: #a855f7 !important; }
.why-icon-wrap.icon-pink { background: #ffe4e6 !important; color: #f43f5e !important; }
.why-icon-wrap.icon-blue { background: #e0f2fe !important; color: #0284c7 !important; }
.why-icon-wrap.icon-teal { background: #ccfbf1 !important; color: #0d9488 !important; }

.why-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin-bottom: 10px !important;
}

.why-desc {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 991px) {
    .mofay-categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .mofay-why-parents-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .slide-title { font-size: 34px !important; }
}

@media (max-width: 576px) {
    .mofay-categories-grid { grid-template-columns: 1fr !important; }
    .mofay-why-parents-grid { grid-template-columns: 1fr !important; }
    .slide-title { font-size: 26px !important; }
    .hero-slide { padding: 60px 0 !important; min-height: 400px !important; }
}


/* ==========================================================================
   ANTIGRAVITY COLLECTION PAGE STYLES
   ========================================================================== */

.mofay-antigravity-page-wrapper {
    width: 100% !important;
    overflow: hidden !important;
}

.antigravity-hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #31104b 100%) !important;
    padding: 100px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
}

.antigravity-badge span {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(5px) !important;
    color: #fde047 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.antigravity-hero-title {
    font-size: 48px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

.antigravity-hero-subtitle {
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 650px !important;
    margin: 0 auto 35px auto !important;
}

.antigravity-hero-btns {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

.btn-antigravity-primary {
    background: #ec4899 !important;
    color: #ffffff !important;
    padding: 14px 34px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4) !important;
}

.btn-antigravity-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    padding: 14px 34px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}

.antigravity-overview-section {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.overview-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 40px !important;
    align-items: center !important;
}

.perfect-for-box {
    background: #f8fafc !important;
    padding: 24px !important;
    border-radius: 16px !important;
    border-left: 4px solid #a855f7 !important;
    margin-top: 25px !important;
}

.perfect-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
}

.perfect-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

.floating-effect-card {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    padding: 40px 30px !important;
    border-radius: 24px !important;
    text-align: center !important;
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.3) !important;
}

.floating-icon {
    font-size: 40px !important;
    margin-bottom: 15px !important;
}

.antigravity-categories-section {
    padding: 80px 0 !important;
    background: #f8fafc !important;
}

.antigravity-cats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
}

.ag-cat-card {
    background: #ffffff !important;
    padding: 30px 24px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.3s ease !important;
}

.ag-cat-card:hover {
    transform: translateY(-8px) !important;
}

.ag-cat-icon {
    font-size: 32px !important;
    margin-bottom: 15px !important;
    color: #a855f7 !important;
}

.antigravity-features-section {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.antigravity-features-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

.ag-feature-card {
    background: #f8fafc !important;
    padding: 24px 18px !important;
    border-radius: 16px !important;
    text-align: center !important;
}

.ag-feat-icon {
    font-size: 28px !important;
    color: #ec4899 !important;
    margin-bottom: 12px !important;
}

.antigravity-testimonials-section {
    padding: 80px 0 !important;
    background: #faf5ff !important;
}

.antigravity-testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
}

.ag-testimonial-card {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
}

.stars-wrap {
    color: #f59e0b !important;
    margin-bottom: 15px !important;
}

.quote-text {
    font-size: 17px !important;
    font-style: italic !important;
    color: #334155 !important;
    margin-bottom: 15px !important;
}

.author-name {
    font-weight: 700 !important;
    color: #1e1b4b !important;
}

.antigravity-cta-banner-section {
    padding: 60px 0 !important;
    background: #ffffff !important;
}

.antigravity-cta-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%) !important;
    color: #ffffff !important;
    padding: 50px 30px !important;
    border-radius: 24px !important;
    text-align: center !important;
}

.antigravity-cta-card h2 {
    color: #ffffff !important;
    font-size: 32px !important;
    margin-bottom: 10px !important;
}

.btn-antigravity-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fde047 !important;
    color: #1e1b4b !important;
    padding: 16px 36px !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    margin-top: 20px !important;
}

@media (max-width: 991px) {
    .overview-grid { grid-template-columns: 1fr !important; }
    .antigravity-cats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .antigravity-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .antigravity-testimonials-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 576px) {
    .antigravity-cats-grid { grid-template-columns: 1fr !important; }
    .antigravity-features-grid { grid-template-columns: 1fr !important; }
    .antigravity-hero-title { font-size: 32px !important; }
}


/* ==========================================================================
   MOFAY SINGLE PRODUCT & SHOP ARCHIVE HIGH-CONVERTING STYLES
   ========================================================================== */

/* SINGLE PRODUCT PAGE */
.mofay-single-product-page-wrap {
    padding: 50px 0 80px 0 !important;
    background: #ffffff !important;
}

.mofay-single-product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: start !important;
    margin-bottom: 60px !important;
}

.single-product-gallery-col {
    position: relative !important;
}

.single-product-gallery-col img {
    width: 100% !important;
    border-radius: 20px !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

.product-category-badge {
    display: inline-block !important;
    background: #f1f5f9 !important;
    color: #ff4757 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.mofay-single-product-grid .product_title {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}

.single-rating-stock-row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.product-stars {
    color: #f59e0b !important;
    font-size: 15px !important;
}

.rating-count {
    color: #64748b !important;
    font-size: 13px !important;
    margin-left: 6px !important;
}

.stock-badge.in-stock {
    background: #dcfce7 !important;
    color: #166534 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.single-price-wrap {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ff4757 !important;
    margin-bottom: 20px !important;
}

.single-price-wrap del {
    color: #94a3b8 !important;
    font-size: 20px !important;
    margin-right: 10px !important;
}

.single-price-wrap ins {
    text-decoration: none !important;
}

.single-excerpt-box {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.btn-single-wa-order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    margin-top: 15px !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3) !important;
    transition: transform 0.3s ease !important;
}

.btn-single-wa-order:hover {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.single-trust-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 25px !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
}

.trust-feat-item {
    display: flex !items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* SHOP ARCHIVE PAGE */
.mofay-shop-archive-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    padding: 60px 0 !important;
    color: #ffffff !important;
    text-align: center !important;
}

.mofay-shop-archive-header h1 {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

.archive-breadcrumbs {
    color: rgba(255,255,255,0.8) !important;
    font-size: 14px !important;
}

.archive-breadcrumbs a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.mofay-shop-archive-body {
    padding: 60px 0 90px 0 !important;
    background: #f8fafc !important;
}

.mofay-shop-layout-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 40px !important;
}

.mofay-shop-sidebar-col .widget {
    background: #ffffff !important;
    padding: 24px !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 25px !important;
}

.mofay-shop-sidebar-col .widget-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #ff4757 !important;
}

ul.products.mofay-catalog-products-loop-grid,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mofay-product-card-item {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.mofay-product-card-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
}

.product-sale-badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    z-index: 2 !important;
}

.product-card-thumb-wrap img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
}

.product-card-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.card-cat-name {
    font-size: 12px !important;
    color: #ff4757 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.product-card-title a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    text-decoration: none !important;
}

.product-card-rating {
    color: #f59e0b !important;
    font-size: 12px !important;
    margin: 8px 0 !important;
}

.product-card-price {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 15px !important;
}

.product-card-action .button {
    width: 100% !important;
    background: #1a1a2e !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
}

@media (max-width: 991px) {
    .mofay-single-product-grid { grid-template-columns: 1fr !important; }
    .mofay-shop-layout-grid { grid-template-columns: 1fr !important; }
    ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
    ul.products { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   MOFAY ULTRA-LUXURY SINGLE PRODUCT PAGE STYLES (PRO 2026 UI/UX)
   ========================================================================== */

.mofay-single-product-page-main {
    padding: 30px 0 80px 0 !important;
    background: #ffffff !important;
}

.mofay-single-breadcrumbs {
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 30px !important;
}

.mofay-single-breadcrumbs a {
    color: #1a1a2e !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.mofay-single-product-top-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: start !important;
    margin-bottom: 70px !important;
}

/* GALLERY STYLING */
.single-product-gallery-wrapper .woocommerce-product-gallery {
    position: relative !important;
}

.single-product-gallery-wrapper img {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
}

.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    z-index: 5 !important;
}

.flex-control-thumbs {
    display: flex !important;
    gap: 12px !important;
    margin-top: 15px !important;
    list-style: none !important;
    padding: 0 !important;
}

.flex-control-thumbs li {
    width: 80px !important;
    cursor: pointer !important;
}

.flex-control-thumbs img {
    width: 100% !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.flex-control-thumbs img.flex-active {
    border-color: #ff4757 !important;
}

/* PRODUCT SUMMARY & BUY BOX */
.single-cat-badge {
    display: inline-block !important;
    background: #f3e8ff !important;
    color: #a855f7 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.single-product-info-wrapper .entry-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    line-height: 1.25 !important;
    margin-bottom: 15px !important;
}

.single-rating-stock-bar {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

.stars-wrap {
    color: #f59e0b !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.reviews-count {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}

.stock-badge-pill {
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.single-price-box {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #ff4757 !important;
    margin-bottom: 20px !important;

}

.single-price-box del {
    color: #94a3b8 !important;
    font-size: 22px !important;
    margin-right: 12px !important;

}

.single-price-box ins {
    text-decoration: none !important;

}

.single-short-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* VARIATION PILLS & ADD TO CART */
.single-cart-actions-box form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.single-cart-actions-box table.variations {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 15px !important;
}

.single-cart-actions-box table.variations td.label {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1a1a2e !important;
    padding-bottom: 10px !important;
    display: block !important;
}

.single-cart-actions-box table.variations select {
    width: 100% !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    background: #ffffff !important;
    outline: none !important;
}

.single-cart-actions-box .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.single-cart-actions-box .quantity input.qty {
    width: 60px !important;
    height: 48px !important;
    text-align: center !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

.single-cart-actions-box button.single_add_to_cart_button {
    background: linear-gradient(135deg, #ff4757 0%, #e84118 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 25px rgba(255, 71, 87, 0.35) !important;
    transition: transform 0.3s ease !important;
}

.single-cart-actions-box button.single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
}

/* DIRECT WHATSAPP ORDER BUTTON */
.single-wa-direct-order {
    margin-bottom: 25px !important;
}

.btn-wa-order-now {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3) !important;
    transition: transform 0.3s ease !important;
}

.btn-wa-order-now:hover {
    transform: translateY(-3px) !important;
    color: #ffffff !important;
}

.btn-wa-order-now i {
    font-size: 32px !important;
}

.wa-btn-text strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.wa-btn-text span {
    font-size: 13px !important;
    opacity: 0.9 !important;
}

/* TRUST BADGES CARD */
.single-trust-badges-card {
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 25px !important;
}

.trust-badge-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.tb-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.tb-icon.icon-teal { background: #ccfbf1 !important; color: #0d9488 !important; }
.tb-icon.icon-purple { background: #f3e8ff !important; color: #a855f7 !important; }
.tb-icon.icon-green { background: #dcfce7 !important; color: #166534 !important; }

.tb-text strong {
    display: block !important;
    font-size: 14px !important;
    color: #1a1a2e !important;
}

.tb-text span {
    font-size: 12px !important;
    color: #64748b !important;
}

/* META BOX */
.single-product-meta-box {
    display: flex !important;
    gap: 20px !important;
    font-size: 13px !important;
    color: #64748b !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.single-product-meta-box a {
    color: #a855f7 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* PRODUCT TABS STYLING */
.woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    list-style: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;

}

.woocommerce-tabs ul.tabs li.active a {
    color: #ff4757 !important;
    border-bottom-color: #ff4757 !important;
}

.woocommerce-Tabs-panel {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

/* RELATED PRODUCTS */
.related.products h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    text-align: center !important;
    margin-bottom: 35px !important;
}

@media (max-width: 991px) {
    .mofay-single-product-top-grid { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   INSCOLIO REFERENCE DESIGN SINGLE PRODUCT PAGE STYLES
   ========================================================================== */

.inscolio-single-product-page {
    padding: 30px 0 80px 0 !important;
    background: #f8fafc !important;
}

.inscolio-breadcrumbs {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-bottom: 25px !important;
}

.inscolio-breadcrumbs a {
    color: #64748b !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.inscolio-product-main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    background: #ffffff !important;
    padding: 35px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
    margin-bottom: 60px !important;
    position: relative !important;
}

/* GALLERY STYLING */
.inscolio-gallery-col {
    position: relative !important;
}

.inscolio-main-image-wrap {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    height: 540px !important;
}

.inscolio-featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gallery-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    z-index: 3 !important;
}

.gallery-nav-btn.prev-btn { left: 15px !important; }
.gallery-nav-btn.next-btn { right: 15px !important; }

.gallery-side-actions {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 4 !important;
}

.side-action-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #64748b !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
}

.side-action-btn:hover {
    color: #a855f7 !important;
    border-color: #a855f7 !important;
}

.inscolio-thumbs-row {
    display: flex !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

.inscolio-thumb-item {
    width: 75px !important;
    height: 75px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer !important;

}

.inscolio-thumb-item.active {
    border-color: #a855f7 !important;
}

.inscolio-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* RIGHT COLUMN SUMMARY */
.inscolio-subcat-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.inscolio-summary-col .entry-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}

.inscolio-price-rating-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

.inscolio-price-wrap {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.inscolio-price-wrap del {
    color: #94a3b8 !important;
    font-size: 20px !important;
    margin-right: 8px !important;
}

.inscolio-rating-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.inscolio-rating-wrap .stars {
    color: #f59e0b !important;
    font-size: 14px !important;
}

.inscolio-rating-wrap .reviews-count {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.inscolio-desc-box {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin-bottom: 25px !important;
}

.inscolio-desc-box strong {
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* BUTTON ACTIONS ROW */
.inscolio-cart-variations-wrap button.single_add_to_cart_button {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3) !important;

}

.btn-inscolio-buy-now {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-bottom: 20px !important;
}

.inscolio-delivery-link a {
    font-size: 13px !important;
    color: #64748b !important;
    text-decoration: underline !important;
    display: inline-block !important;
    margin-bottom: 25px !important;
}

.inscolio-secure-payment-box {
    margin-bottom: 25px !important;
}

.inscolio-secure-payment-box h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
}

.payment-badges-row {
    display: flex !important;
    gap: 10px !important;
}

.pay-badge {
    padding: 6px 14px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

.pay-badge.visa { color: #1a1a2e !important; }
.pay-badge.mastercard { color: #eb001b !important; }
.pay-badge.paypal { color: #003087 !important; }

.inscolio-return-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.return-header {
    font-size: 15px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    display: flex !items: center !important;
    gap: 8px !important;
}

.return-header i { color: #8b5cf6 !important; }

.inscolio-return-card ul {
    margin: 8px 0 0 18px !important;
    padding: 0 !important;
}

.inscolio-social-share-bar {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.share-icons {
    display: flex !important;
    gap: 12px !important;
}

.share-icons a {
    color: #ffffff !important;
    font-size: 14px !important;
}

/* RECOMMENDED SECTION */
.inscolio-recommended-section {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
}

.recommended-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 30px !important;
}

.recommended-header-row h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.btn-view-all-rec {
    border: 1px solid #8b5cf6 !important;
    color: #8b5cf6 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

@media (max-width: 991px) {
    .inscolio-product-main-grid { grid-template-columns: 1fr !important; }
}


/* SLICK SIZE PILLS & VARIATION SELECTOR STYLING */
.inscolio-cart-variations-wrap .variations_form label,
.inscolio-cart-variations-wrap label {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.inscolio-cart-variations-wrap select,
.inscolio-cart-variations-wrap .attached button,
.inscolio-cart-variations-wrap .value button {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
}

.inscolio-cart-variations-wrap select:focus,
.inscolio-cart-variations-wrap select:hover,
.inscolio-cart-variations-wrap .attached button:hover {
    border-color: #8b5cf6 !important;
    color: #8b5cf6 !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

/* QUANTITY BOX STYLING */
.inscolio-cart-variations-wrap .quantity {
    display: inline-flex !important;
    margin-bottom: 15px !important;
}

.inscolio-cart-variations-wrap .quantity input.qty {
    width: 70px !important;
    height: 48px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: #ffffff !important;
}

/* ADD TO CART BUTTON STYLING */
.inscolio-cart-variations-wrap button.single_add_to_cart_button {
    background: #8b5cf6 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 16px 36px !important;
    border-radius: 14px !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.35) !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
}

.inscolio-cart-variations-wrap button.single_add_to_cart_button:hover {
    background: #7c3aed !important;
    transform: translateY(-2px) !important;
}


/* ==========================================================================
   VERTICAL PORTRAIT TOY & GAME IMAGE OPTIMIZATIONS (3:4 ASPECT RATIO)
   ========================================================================== */

/* PRODUCT CARDS VERTICAL IMAGE CONTAINER */
.product-card-thumb-wrap {
    position: relative !important;
    width: 100% !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}

.product-card-thumb-wrap a {
    display: block !important;
    width: 100% !important;
}

.product-card-thumb-wrap img {
    width: 100% !important;
    height: 380px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.mofay-product-card-item:hover .product-card-thumb-wrap img {
    transform: scale(1.04) !important;
}

/* SINGLE PRODUCT PAGE MAIN GALLERY VERTICAL CONTAINER */
.inscolio-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

.inscolio-featured-img,
.single-product-gallery-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
}

/* CARD INNER SPACING & TYPOGRAPHY */
.mofay-product-card-item {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

.product-card-content {
    padding: 22px !important;
}

.product-card-title a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.product-card-price {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #ff4757 !important;
    margin: 10px 0 15px 0 !important;
}

.product-card-action .button {
    background: #1e1b4b !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    transition: background 0.3s ease !important;
}

.product-card-action .button:hover {
    background: #ff4757 !important;
}


/* DRAWER OVERLAY POINTER EVENTS UNBLOCK */
#mofay-drawer-overlay:not(.active),
.mofay-drawer-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -9999 !important;
}

#mofay-drawer-overlay.active,
.mofay-drawer-overlay.active {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9998 !important;
}


/* ==========================================================================
   CATEGORY SLIDESHOW CARDS - PROFESSIONAL RESPONSIVE
   ========================================================================== */

.mofay-category-slideshow-section {
    padding: 70px 0 60px;
    background: #f8fafc;
}

.category-slideshow-wrapper {
    position: relative;
    padding: 0 50px;
}

.category-slideshow-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 20px;
}

.category-slideshow-track::-webkit-scrollbar {
    display: none;
}

/* Individual Slide Card */
.cat-slide-card {
    flex: 0 0 calc(33.333% - 16px);
    scroll-snap-align: start;
    min-width: 280px;
}

.cat-slide-link {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    color: inherit;
}

.cat-slide-link:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Image Area */
.cat-slide-image-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.cat-slide-link:hover .cat-slide-img {
    transform: scale(1.08);
}

.cat-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

.cat-slide-emoji {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 2.2rem;
    z-index: 2;
    background: rgba(255,255,255,0.9);
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Info Area */
.cat-slide-info {
    padding: 22px 24px 20px;
}

.cat-slide-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.cat-slide-title {
    font-family: var(--mofay-font-headings, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.cat-slide-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-slide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.cat-slide-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cat-slide-btn {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6366f1;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
}

.cat-slide-link:hover .cat-slide-btn {
    gap: 10px;
    color: #4f46e5;
}

/* Arrow Buttons */
.cat-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cat-slider-arrow:hover {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(99,102,241,0.3);
}

.cat-slider-prev {
    left: 0;
}

.cat-slider-next {
    right: 0;
}

/* Slider Dots */
.cat-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.cat-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.cat-slider-dots .dot.active {
    background: #6366f1;
    width: 28px;
    border-radius: 5px;
}

/* RESPONSIVE: Tablet */
@media (max-width: 1024px) {
    .cat-slide-card {
        flex: 0 0 calc(50% - 12px);
        min-width: 260px;
    }

    .category-slideshow-wrapper {
        padding: 0 40px;
    }
}

/* RESPONSIVE: Mobile */
@media (max-width: 768px) {
    .mofay-category-slideshow-section {
        padding: 50px 0 40px;
    }

    .category-slideshow-wrapper {
        padding: 0;
    }

    .cat-slide-card {
        flex: 0 0 85%;
        min-width: 260px;
    }

    .cat-slider-arrow {
        display: none;
    }

    .cat-slide-image-wrap {
        height: 180px;
    }

    .category-slideshow-track {
        padding: 5px 16px 15px;
    }
}

/* RESPONSIVE: Small Mobile */
@media (max-width: 480px) {
    .cat-slide-card {
        flex: 0 0 90%;
    }

    .cat-slide-info {
        padding: 18px 18px 16px;
    }

    .cat-slide-title {
        font-size: 1.05rem;
    }
}


/* ==========================================================================
   SMALL CATEGORY SHOWCASE - BALANCED MODERN UI/UX
   ========================================================================== */

.mofay-small-category-section {
    padding: 35px 0 25px 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mofay-section-header-compact {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 22px !important;
}

.sub-heading-compact {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.section-title-compact {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.compact-view-all-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.compact-view-all-link:hover {
    color: #4338ca !important;
    transform: translateX(4px) !important;
}

/* 6-COLUMN BALANCED GRID */
.mofay-small-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
}

/* Individual Compact Category Card */
.small-cat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 12px 14px 12px !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.small-cat-card:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07) !important;
}

/* Avatar / Circle Icon Container */
.small-cat-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.small-cat-card:hover .small-cat-avatar {
    transform: scale(1.08) !important;
}

.small-cat-emoji {
    font-size: 26px !important;
    line-height: 1 !important;
}

.small-cat-icon {
    display: none !important;
}

/* Specific Gradient Colors for each Category */
.cat-color-purple .small-cat-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.cat-color-pink .small-cat-avatar {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
.cat-color-blue .small-cat-avatar {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
.cat-color-teal .small-cat-avatar {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}
.cat-color-orange .small-cat-avatar {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}
.cat-color-indigo .small-cat-avatar {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important;
}

/* Text elements */
.small-cat-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.small-cat-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.small-cat-sub {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.small-cat-arrow {
    display: none !important;
}

/* RESPONSIVE: Tablet & Laptop (1024px) */
@media (max-width: 1024px) {
    .mofay-small-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    .small-cat-card {
        padding: 14px 10px !important;
    }
}

/* RESPONSIVE: Mobile Devices (768px & below) */
@media (max-width: 768px) {
    .mofay-small-category-section {
        padding: 25px 0 15px 0 !important;
    }

    .section-title-compact {
        font-size: 20px !important;
    }

    .compact-view-all-link {
        font-size: 12px !important;
    }

    .mofay-small-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .small-cat-card {
        padding: 12px 6px !important;
        border-radius: 12px !important;
    }

    .small-cat-avatar {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 8px !important;
    }

    .small-cat-emoji {
        font-size: 22px !important;
    }

    .small-cat-name {
        font-size: 12px !important;
    }

    .small-cat-sub {
        display: none !important; /* Hide tiny subtext on mobile for ultra-clean balanced look */
    }
}

/* RESPONSIVE: Extra Small Mobile (420px & below) */
@media (max-width: 420px) {
    .mofay-small-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .small-cat-avatar {
        width: 46px !important;
        height: 46px !important;
    }

    .small-cat-emoji {
        font-size: 19px !important;
    }

    .small-cat-name {
        font-size: 11px !important;
    }
}




/* ==========================================================================
   FINAL UNIFIED PRODUCT SHOWCASE SLIDER & REFERENCE CARD STYLING
   ========================================================================== */

/* SHOWCASE SECTION CONTAINER */
.mofay-home-category-showcase {
    padding: 45px 0 30px 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.showcase-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 22px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

.showcase-header h2.mofay-section-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
    position: relative !important;
    display: inline-block !important;
}

.showcase-header h2.mofay-section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -14px !important;
    left: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #6366f1, #a855f7) !important;
    border-radius: 4px !important;
}

.showcase-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.showcase-view-all {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.showcase-view-all:hover {
    color: #e02438 !important;
    transform: translateX(4px) !important;
}

.showcase-slider-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.showcase-nav-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}

.showcase-nav-arrow:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    transform: scale(1.05) !important;
}

/* SLIDER WRAPPER & TRACK */
.mofay-showcase-slider-wrap {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

.mofay-showcase-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 2px 20px 2px !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.mofay-showcase-slider-track::-webkit-scrollbar {
    display: none !important;
}

/* DESKTOP & LAPTOP (1024px+): EXACT 5 CARDS IN 1 ROW */
@media (min-width: 1024px) {
    .mofay-showcase-slider-track > li.mofay-product-card-item {
        flex: 0 0 calc(20% - 12.8px) !important;
        min-width: calc(20% - 12.8px) !important;
        max-width: calc(20% - 12.8px) !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }
}

/* TABLET (768px - 1023px): 3 CARDS PER SLIDE */
@media (min-width: 768px) and (max-width: 1023px) {
    .mofay-showcase-slider-track > li.mofay-product-card-item {
        flex: 0 0 calc(33.333% - 11px) !important;
        min-width: calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
        scroll-snap-align: start !important;
    }
}

/* MOBILE (< 768px): CLEAN 2x1 GRID */
@media (max-width: 767px) {
    .mofay-showcase-slider-track {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        overflow-x: visible !important;
        padding: 4px 0 16px 0 !important;
    }
    .mofay-showcase-slider-track > li.mofay-product-card-item {
        flex: initial !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .showcase-slider-nav {
        display: none !important;
    }
}

/* PRODUCT CARD STYLING (AIRPODS REFERENCE MATCH) */
.mofay-product-card-item {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

.mofay-product-card-item:hover {
    transform: translateY(-5px) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09) !important;
}

.product-card-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 4:5 PORTRAIT ASPECT RATIO (OPTIMIZED FOR 1080x1350, 1080x1340, 1080x1360 PHOTOS) */
.product-card-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    background: #f4f5f7 !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
}

.product-card-thumb-wrap a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.product-card-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.mofay-product-card-item:hover .product-card-thumb-wrap img {
    transform: scale(1.06) !important;
}

/* SALE BADGE */
.product-sale-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    z-index: 3 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3) !important;
}

/* CARD CONTENT AREA */
.product-card-content {
    padding: 12px 12px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #ffffff !important;
}

/* TITLE: 2 LINES WITH CLEAN FONT */
.product-card-title {
    margin: 0 0 6px 0 !important;
}

.product-card-title a {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 36px !important;
    transition: color 0.2s ease !important;
}

.product-card-title a:hover {
    color: #6366f1 !important;
}

/* PRICE: BOLD BLACK/DARK PRICE */
.product-card-price {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 4px 0 6px 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.product-card-price .woocommerce-Price-currencySymbol {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-right: 2px !important;
}

.product-card-price del {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    margin-right: 3px !important;
}

.product-card-price del .woocommerce-Price-currencySymbol {
    color: #94a3b8 !important;
    font-size: 11px !important;
}

.product-card-price ins {
    text-decoration: none !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* RATING & SOLD COUNT ROW */
.product-card-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}

.product-card-rating-star {
    color: #0f172a !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.product-card-rating-star i {
    color: #f59e0b !important;
    font-size: 12px !important;
}

.meta-sep {
    color: #cbd5e1 !important;
    font-size: 11px !important;
}

.product-card-sold-count {
    color: #64748b !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* LOCATION / FAST DELIVERY ROW */
.product-card-location-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

.loc-badge-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: 9px !important;
}

.loc-badge-text {
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}


/* ==========================================================================
   SINGLE PRODUCT GALLERY - 4:5 PORTRAIT RATIO (1080x1350) & MODERN THUMBNAILS
   ========================================================================= */

.inscolio-gallery-col {
    position: relative !important;
    width: 100% !important;
}

/* MAIN IMAGE CONTAINER: EXACT 4:5 ASPECT RATIO (1080x1350) */
.inscolio-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 640px !important;
    background: #f4f5f7 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f1f5f9 !important;
}

.inscolio-featured-img,
.inscolio-main-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
    transition: opacity 0.25s ease, transform 0.3s ease !important;
}

/* ARROW NAVIGATION BUTTONS */
.gallery-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    z-index: 10 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.gallery-nav-btn:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.gallery-nav-btn.prev-btn {
    left: 14px !important;
}

.gallery-nav-btn.next-btn {
    right: 14px !important;
}

/* FLOATING SIDE ACTION ICONS (SHARE & WISHLIST) */
.gallery-side-actions {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.side-action-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.side-action-btn:hover {
    background: #ff4757 !important;
    color: #ffffff !important;
    border-color: #ff4757 !important;
    transform: scale(1.08) !important;
}

/* THUMBNAILS ROW: MODERN 4:5 MINIATURE CARDS */
.inscolio-thumbs-row {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 14px 2px 8px 2px !important;
    margin-top: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.inscolio-thumbs-row::-webkit-scrollbar {
    display: none !important;
}

.inscolio-thumb-item {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 95px !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2.5px solid #e2e8f0 !important;
    cursor: pointer !important;
    background: #f8fafc !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.inscolio-thumb-item:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) scale(1.03) !important;
}

.inscolio-thumb-item.active {
    border-color: #0f172a !important; /* Clean neutral dark border (no blue/purple) */
    box-shadow: none !important;
    outline: none !important;
    transform: scale(1.03) !important;
    opacity: 1 !important;
}

.inscolio-thumb-item:not(.active) {
    opacity: 0.65 !important;
    border-color: #e2e8f0 !important;
}

.inscolio-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
}

/* RESPONSIVE: Mobile Single Product Gallery */
@media (max-width: 768px) {
    .inscolio-main-image-wrap {
        border-radius: 16px !important;
        max-height: 480px !important;
    }
    .gallery-nav-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    .gallery-nav-btn.prev-btn { left: 10px !important; }
    .gallery-nav-btn.next-btn { right: 10px !important; }
    
    .inscolio-thumb-item {
        flex: 0 0 60px !important;
        width: 60px !important;
        height: 75px !important;
        border-radius: 10px !important;
        border-width: 2px !important;
    }
}


/* ==========================================================================
   CLEAN MODERN PREMIUM DARK FOOTER (COHESIVE ELEGANT PALETTE & ORIGINAL LOGO)
   ========================================================================== */

/* NEWSLETTER SECTION */
.mofay-new-newsletter-section {
    background: #f8fafc !important;
    padding: 40px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.newsletter-card-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
}

.newsletter-card-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
}

.newsletter-card-desc {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.mofay-newsletter-form {
    display: flex !important;
    gap: 10px !important;
    max-width: 450px !important;
    width: 100% !important;
}

.newsletter-input-field {
    flex-grow: 1 !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    outline: none !important;
}

.newsletter-input-field:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.newsletter-btn-submit {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: background 0.25s ease !important;
}

.newsletter-btn-submit:hover {
    background: #e02438 !important;
}

/* MAIN FOOTER: DEEP NAVY SLATE BACKGROUND */
.mofay-new-footer-main {
    background: #0f172a !important; /* Deep Slate Navy */
    color: #94a3b8 !important;
    padding: 55px 0 0 0 !important;
    border-top: none !important;
}

.mofay-footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr !important;
    gap: 40px !important;
    padding-bottom: 45px !important;
}

/* BRAND COLUMN & ORIGINAL LOGO */
.footer-logo-wrap {
    margin-bottom: 12px !important;
}

.footer-logo-wrap img,
.footer-logo-wrap .custom-logo {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.footer-brand-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
}

.footer-brand-tagline {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
}

.footer-brand-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #94a3b8 !important;
    margin-bottom: 20px !important;
}

/* WHATSAPP BADGE */
.footer-wa-badge-wrap {
    margin-bottom: 20px !important;
}

.footer-wa-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #10b981 !important; /* Clean Emerald Green */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
}

.footer-wa-badge:hover {
    background: #059669 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* SOCIAL ICONS: CLEAN MONOCHROME DARK CIRCLES */
.footer-social-icons {
    display: flex !important;
    gap: 10px !important;
}

.footer-social-icons a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.footer-social-icons a:hover {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
}

/* HEADINGS & SUBTLE DIVIDERS */
.footer-heading {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 6px 0 !important;
}

.footer-heading-bar {
    width: 32px !important;
    height: 2.5px !important;
    background: #ff4757 !important;
    border-radius: 2px !important;
    margin-bottom: 18px !important;
}

/* LINK LISTS: CLEAN UNIFIED SLATE GREY */
.footer-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
}

.footer-link-list li a {
    color: #94a3b8 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.footer-link-list li a i {
    font-size: 11px !important;
    color: #64748b !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.footer-link-list li a:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.footer-link-list li a:hover i {
    color: #ff4757 !important;
}

/* CONTACT LIST: CLEAN UNIFIED ICONS */
.footer-contact-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.footer-contact-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
}

.footer-contact-list li i {
    color: #cbd5e1 !important; /* Uniform soft silver icon color */
    font-size: 14px !important;
    margin-top: 3px !important;
    width: 16px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.footer-contact-list li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer-contact-list li a:hover {
    color: #ffffff !important;
}

/* BOTTOM COPYRIGHT BAR */
.mofay-footer-bottom-bar {
    background: #080d1a !important; /* Deeper slate bar */
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 18px 0 !important;
}

.bottom-bar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.bottom-left p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.payment-icons {
    display: flex !important;
    gap: 14px !important;
    font-size: 20px !important;
    color: #64748b !important;
}

.payment-icons i:hover {
    color: #94a3b8 !important;
}

/* RESPONSIVE FOOTER */
@media (max-width: 1024px) {
    .mofay-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 768px) {
    .newsletter-card-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 18px !important;
    }
    .mofay-newsletter-form {
        max-width: 100% !important;
    }
    .mofay-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .bottom-bar-inner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}


/* DENEB STUDIOS FOOTER CREDIT */
.deneb-credit-sep {
    color: #475569 !important;
    margin: 0 6px !important;
}

.deneb-credit {
    color: #64748b !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.credit-heart-icon {
    color: #ff4757 !important;
    font-size: 12px !important;
    display: inline-block !important;
    animation: heartBeat 1.5s ease-in-out infinite !important;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(1); }
    42% { transform: scale(1.25); }
    70% { transform: scale(1); }
}

.deneb-credit-link {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.deneb-credit-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}


/* REMOVE ALL FOOTER HEADING GREEN & RED BARS (CLEAN MINIMAL HEADINGS) */
.footer-heading::after,
.footer-heading:after,
.footer-heading-bar,
.footer-col .footer-heading::after,
.footer-col .footer-heading:after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
}

.footer-heading {
    margin: 0 0 16px 0 !important;
    padding-bottom: 0 !important;
}


/* ==========================================================================
   NEWSLETTER VIP BANNER - ULTRA PROFESSIONAL HIGH-CONVERTING DESIGN
   ========================================================================== */

.mofay-new-newsletter-section {
    background: #ffffff !important;
    padding: 35px 0 25px 0 !important;
    border: none !important;
}

.newsletter-card-inner {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important;
    border-radius: 20px !important;
    padding: 36px 44px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.newsletter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffd166 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 8px !important;
}

.newsletter-card-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important; /* CRISP WHITE TITLE */
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.newsletter-card-desc {
    font-size: 14px !important;
    color: #cbd5e1 !important; /* SOFT READABLE SLATE */
    margin: 0 !important;
    line-height: 1.5 !important;
}

.mofay-newsletter-form {
    width: 100% !important;
    max-width: 460px !important;
}

.newsletter-input-group {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 5px 5px 5px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.input-icon-wrap {
    color: #94a3b8 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
}

.newsletter-input-field {
    flex-grow: 1 !important;
    padding: 10px 0 !important;
    border: none !important;
    font-size: 14px !important;
    background: transparent !important;
    color: #0f172a !important;
    outline: none !important;
}

.newsletter-input-field::placeholder {
    color: #94a3b8 !important;
}

.newsletter-btn-submit {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35) !important;
}

.newsletter-btn-submit:hover {
    background: #e02438 !important;
    transform: translateY(-1px) !important;
}

.newsletter-privacy-note {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

@media (max-width: 900px) {
    .newsletter-card-inner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
        gap: 20px !important;
    }
    .newsletter-badge {
        margin: 0 auto 8px auto !important;
    }
    .newsletter-input-group {
        max-width: 100% !important;
    }
    .newsletter-privacy-note {
        justify-content: center !important;
    }
}

@media (max-width: 500px) {
    .newsletter-input-group {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .newsletter-input-field {
        width: 100% !important;
        text-align: center !important;
    }
    .newsletter-btn-submit {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* TIGHT COMPACT PRODUCT CARD PRICE (NO OVERFLOW / NO LENGTHY STRINGS) */
.product-card-price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 4px 0 6px 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 3.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-card-price .price-currency {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
    margin-right: 1px !important;
}

.product-card-price .price-val {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
}

.product-card-price del.price-regular,
.product-card-price del {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    margin-left: 4px !important;
    text-decoration: line-through !important;
    letter-spacing: -0.2px !important;
}


/* SINGLE SEAMLESS DARK FOOTER SECTION (ZERO WHITE BG GAPS) */
.mofay-new-newsletter-section {
    display: none !important;
}

.mofay-new-footer-main {
    background: #0f172a !important; /* Single Deep Navy Slate Container */
    color: #94a3b8 !important;
    padding: 0 !important;
    border-top: none !important;
}

.mofay-footer-newsletter-row {
    padding: 48px 0 36px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 45px !important;
}

.newsletter-card-inner {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 34px 44px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
}


/* REMOVE WHITE CURVED BACKGROUND FROM NEWSLETTER FORM */
.newsletter-input-group {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.mofay-newsletter-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 480px !important;
}

.newsletter-input-wrap {
    position: relative !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.newsletter-input-wrap .input-icon {
    position: absolute !important;
    left: 15px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.newsletter-input-field {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    padding: 13px 16px 13px 42px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}

.newsletter-input-field::placeholder {
    color: #94a3b8 !important;
}

.newsletter-input-field:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.25) !important;
}

.newsletter-btn-submit {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
}

.newsletter-btn-submit:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 71, 87, 0.45) !important;
}

@media (max-width: 600px) {
    .mofay-newsletter-form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .newsletter-input-wrap {
        width: 100% !important;
    }
    .newsletter-btn-submit {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   HOMEPAGE LUXURY HERO SLIDER (2-COLUMN MODERN E-COMMERCE LAYOUT)
   ========================================================================== */

.mofay-hero-slider-section {
    padding: 24px 0 16px 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.mofay-hero-slider-container {
    position: relative !important;
    width: 100% !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 50%, #e2e8f0 100%) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    min-height: 480px !important;
}

.hero-slider-track {
    position: relative !important;
    width: 100% !important;
    min-height: 480px !important;
}

.hero-slide { opacity: 1 !important; visibility: visible !important; }

.hero-slide.active-slide {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    z-index: 2 !important;
}

.hero-slide-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    align-items: center !important;
    width: 100% !important;
    gap: 30px !important;
    min-height: 460px !important;
}

/* LEFT COLUMN TEXT */
.hero-slide-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 30px 0 !important;
}

.hero-slide-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4f46e5 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.5px !important;
}

.hero-slide-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.18 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.6px !important;
}

.hero-slide-desc {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
}

.hero-slide-tags {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 24px !important;
}

.hero-slide-btn-group {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.btn-mofay-hero-primary {
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 13px 26px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.25s ease !important;
}

.btn-mofay-hero-primary:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(255, 71, 87, 0.45) !important;
    color: #ffffff !important;
}

.btn-mofay-hero-secondary {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 13px 22px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.btn-mofay-hero-secondary:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}

/* RIGHT COLUMN IMAGE */
.hero-slide-image-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    position: relative !important;
}

.hero-model-img {
    max-height: 440px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.15)) !important;
    transition: transform 0.5s ease !important;
}

.hero-slide.active-slide .hero-model-img {
    animation: heroFloat 4s ease-in-out infinite alternate !important;
}

@keyframes heroFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* FLOATING ARROWS */
.hero-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    z-index: 10 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.hero-slider-arrow:hover {
    background: #ff4757 !important;
    color: #ffffff !important;
    border-color: #ff4757 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.hero-slider-arrow.prev-arrow {
    left: 14px !important;
}

.hero-slider-arrow.next-arrow {
    right: 14px !important;
}

/* DOTS PAGINATION */
.hero-slider-dots {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
}

.hero-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.hero-dot.active {
    width: 26px !important;
    border-radius: 6px !important;
    background: #ff4757 !important;
}

/* RESPONSIVE HERO SLIDER */
@media (max-width: 991px) {
    .hero-slide-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    .hero-slide-title {
        font-size: 30px !important;
    }
    .hero-model-img {
        max-height: 360px !important;
    }
}

@media (max-width: 768px) {
    .hero-slide {
        padding: 24px 20px !important;
    }
    .hero-slide-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        min-height: auto !important;
    }
    .hero-slide-text {
        align-items: center !important;
        padding: 10px 0 !important;
    }
    .hero-slide-title {
        font-size: 26px !important;
    }
    .hero-slide-desc {
        font-size: 14px !important;
    }
    .hero-slide-btn-group {
        justify-content: center !important;
    }
    .hero-model-img {
        max-height: 280px !important;
    }
    .hero-slider-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
}


/* MOBILE HERO SLIDER: HIDE BUTTONS & ENLARGE MODEL IMAGE */
@media (max-width: 768px) {
    .hero-slide-btn-group {
        display: none !important;
    }
    .hero-model-img {
        max-height: 420px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
    .mofay-hero-slider-container {
        min-height: 600px !important;
        height: auto !important;
    }
}


/* ==========================================================================
   TOP HORIZONTAL SLIDING FILTER BAR (MOBILE & DESKTOP) & WORKING SIDEBAR
   ========================================================================== */

.mofay-top-sliding-filters-bar {
    background: #ffffff !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 15 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.top-filters-slider-track {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
}

.top-filters-slider-track::-webkit-scrollbar {
    display: none !important;
}

/* FILTER CHIP PILLS */
.filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.filter-chip:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.filter-chip.active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.35) !important;
}

.filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.chip-count {
    background: #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
}

.filter-chip-drawer-btn {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 700 !important;
}

.filter-chip-drawer-btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* SIDEBAR STYLING & WORKING FILTERS */
.mofay-shop-sidebar {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.mofay-filter-widget {
    margin-bottom: 26px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mofay-filter-widget:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.mofay-filter-widget .widget-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
    position: relative !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #ff4757 !important;
    display: inline-block !important;
}

.mofay-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.filter-cat-link,
.filter-size-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.filter-cat-link:hover,
.filter-size-link:hover {
    background: #f8fafc !important;
    color: #ff4757 !important;
    padding-left: 12px !important;
}

.filter-cat-link.active,
.filter-size-link.active {
    background: #fff1f2 !important;
    color: #ff4757 !important;
    font-weight: 700 !important;
}

.filter-count {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* PRICE FILTER FORM */
.mofay-price-filter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.price-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.price-field-wrap {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    flex: 1 !important;
}

.curr-prefix {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-right: 4px !important;
}

.price-num-input {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
}

.price-sep {
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

.btn-mofay-apply-price {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25) !important;
}

.btn-mofay-apply-price:hover {
    background: #e02438 !important;
}

/* RESET BUTTON */
.btn-reset-filters {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.btn-reset-filters:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.mofay-sidebar-mobile-header {
    display: none !important;
}

/* MOBILE DRAWER BEHAVIOR (< 1024px) */
@media (max-width: 1023px) {
    .mofay-shop-sidebar-col {
        display: none !important;
    }

    #secondary.mofay-shop-sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -340px !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        border-radius: 0 20px 20px 0 !important;
        padding: 24px 20px 40px 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
        transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    #secondary.mofay-shop-sidebar.open {
        left: 0 !important;
    }

    .mofay-sidebar-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 22px !important;
        padding-bottom: 14px !important;
        border-bottom: 2px solid #f1f5f9 !important;
    }

    .mobile-sidebar-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .sidebar-close-btn {
        background: #f1f5f9 !important;
        border: none !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    /* BACKDROP */
    .mofay-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .mofay-drawer-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ==========================================================================
   PROFESSIONAL FULL-LENGTH SHOP SIDEBAR & FILTERS (CLEAN E-COMMERCE STANDARD)
   ========================================================================== */

/* SHOP GRID CONTAINER (DESKTOP: SIDEBAR + MAIN PRODUCTS) */
.mofay-shop-layout-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
    padding: 30px 0 !important;
}

.mofay-shop-sidebar-col {
    position: sticky !important;
    top: 80px !important;
}

/* SIDEBAR CONTAINER: CLEAN & FLAT (NO OVER-DECORATION) */
.mofay-shop-sidebar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.mofay-filter-section {
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mofay-filter-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.filter-section-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 0 14px 0 !important;
}

/* CATEGORY FILTER ITEMS */
.clean-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.clean-filter-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.clean-filter-item:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.clean-filter-item.is-active {
    background: #fff1f2 !important;
    color: #ff4757 !important;
    font-weight: 700 !important;
}

.item-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.custom-radio-dot {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.clean-filter-item.is-active .custom-radio-dot {
    border-color: #ff4757 !important;
    background: #ff4757 !important;
    box-shadow: inset 0 0 0 3px #ffffff !important;
}

.item-count {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.clean-filter-item.is-active .item-count {
    color: #ff4757 !important;
}

/* PRICE FILTER GRID */
.clean-price-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.price-inputs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.price-input-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.price-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.price-input-inner {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
}

.currency-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-right: 4px !important;
}

.clean-num-input {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
}

.btn-clean-apply-price {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background 0.25s ease !important;
}

.btn-clean-apply-price:hover {
    background: #e02438 !important;
}

/* SIZE PILLS */
.clean-size-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.clean-size-pill {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.clean-size-pill:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.clean-size-pill.is-active {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
}

/* RESET BUTTON */
.btn-clean-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ef4444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    width: 100% !important;
    transition: opacity 0.2s ease !important;
}

.btn-clean-reset:hover {
    opacity: 0.8 !important;
}

/* DESKTOP VS MOBILE VISIBILITY */
@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .mofay-shop-layout-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   LUXURY MOFAY THEME STYLING: SORTING DROPDOWN & CATALOG PAGINATION
   ========================================================================== */

/* 1. SORTING & RESULT COUNT BAR */
.shop-sorting-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.woocommerce-result-count {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.woocommerce-ordering {
    position: relative !important;
    margin: 0 !important;
}

.woocommerce-ordering select,
.woocommerce-ordering select.orderby {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 13px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px 40px 10px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    outline: none !important;
    line-height: 1.4 !important;
}

.woocommerce-ordering select:hover {
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
}

.woocommerce-ordering select:focus {
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15) !important;
}

/* 2. LUXURY PAGINATION */
.shop-pagination-wrap {
    margin-top: 45px !important;
    padding-top: 25px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: center !important;
}

nav.woocommerce-pagination {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

nav.woocommerce-pagination ul li,
.woocommerce-pagination ul li {
    border: none !important;
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

nav.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li a:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #ff4757 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ACTIVE CURRENT PAGE PILL */
nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.38) !important;
}

/* PREV / NEXT ARROWS */
nav.woocommerce-pagination ul li a.prev,
nav.woocommerce-pagination ul li a.next,
.woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 16px !important;
}

nav.woocommerce-pagination ul li a.prev:hover,
nav.woocommerce-pagination ul li a.next:hover,
.woocommerce-pagination ul li a.prev:hover,
.woocommerce-pagination ul li a.next:hover {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
}


/* ==========================================================================
   MOBILE MENU DRAWER: CLEAN WHITE HEADER & BLACK TEXT
   ========================================================================== */
.mofay-mobile-menu-drawer .drawer-header,
.drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.drawer-brand-sub {
    font-size: 12px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin-top: 3px !important;
}

.mofay-mobile-menu-drawer .drawer-close,
.drawer-close {
    background: #f1f5f9 !important;
    border: none !important;
    color: #0f172a !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.mofay-mobile-menu-drawer .drawer-close:hover,
.drawer-close:hover {
    background: #fee2e2 !important;
    color: #ff4757 !important;
    transform: rotate(90deg) !important;
}

/* ==========================================================================
   MOBILE SHOP FILTER DRAWER GUARANTEED FIX (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    .mofay-shop-sidebar-col {
        display: contents !important;
    }

    #secondary.mofay-shop-sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -350px !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        border-radius: 0 20px 20px 0 !important;
        padding: 24px 20px 40px 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
        transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    #secondary.mofay-shop-sidebar.open {
        left: 0 !important;
    }

    .mofay-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 999998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .mofay-drawer-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* ==========================================================================
   PERFECT CLEAN MOBILE FILTER DRAWER (ZERO SHADOW LEAK / ZERO LEFT EDGE LINE)
   ========================================================================== */
@media (max-width: 1023px) {
    .mofay-shop-sidebar-col {
        display: contents !important;
    }

    #secondary.mofay-shop-sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        border-radius: 0 20px 20px 0 !important;
        padding: 24px 20px 40px 20px !important;
        border: none !important;
        
        /* 100% COMPLETELY HIDDEN WHEN CLOSED - ZERO SHADOW BLEED */
        transform: translateX(-115%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease, visibility 0.35s !important;
    }

    #secondary.mofay-shop-sidebar.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.35) !important;
        pointer-events: auto !important;
    }

    .mofay-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 999998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s !important;
    }

    .mofay-drawer-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}



/* ==========================================================================
   PERFECT LUXURY VIP CLUB NEWSLETTER (CLEAN DARK GLASS DESIGN FOR MOBILE & DESKTOP)
   ========================================================================== */
.mofay-footer-newsletter-row {
    padding: 40px 0 35px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 40px !important;
    background: transparent !important;
}

.newsletter-card-inner {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 32px 36px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.newsletter-text-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.newsletter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 10px !important;
}

.newsletter-card-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.3px !important;
}

.newsletter-card-desc {
    font-size: 14px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 480px !important;
}

.newsletter-form-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 460px !important;
}

.mofay-newsletter-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.newsletter-input-wrap {
    position: relative !important;
    flex: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border-radius: 12px !important;
}

.newsletter-input-wrap .input-icon {
    position: absolute !important;
    left: 16px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.newsletter-input-field {
    width: 100% !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    padding: 0 16px 0 44px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

.newsletter-input-field::placeholder {
    color: #94a3b8 !important;
}

.newsletter-input-field:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.25) !important;
}

.newsletter-btn-submit {
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
    flex-shrink: 0 !important;
}

.newsletter-btn-submit:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 71, 87, 0.45) !important;
}

.newsletter-privacy-note {
    font-size: 12px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* MOBILE NEWSLETTER LAYOUT (< 768px) */
@media (max-width: 768px) {
    .newsletter-card-inner {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        padding: 24px 18px !important;
        gap: 20px !important;
    }

    .newsletter-text-col {
        align-items: center !important;
        text-align: center !important;
    }

    .newsletter-card-title {
        font-size: 20px !important;
    }

    .newsletter-card-desc {
        font-size: 13px !important;
    }

    .newsletter-form-col {
        max-width: 100% !important;
    }

    .mofay-newsletter-form {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .newsletter-input-wrap {
        width: 100% !important;
    }

    .newsletter-btn-submit {
        width: 100% !important;
    }

    .newsletter-privacy-note {
        justify-content: center !important;
    }
}


/* ==========================================================================
   LUXURY HEADER CART ICON & BADGE (MOFAY RED THEME)
   ========================================================================== */
.header-cart-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-cart-icon-wrap a.cart-contents,
.cart-contents {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.header-cart-icon-wrap a.cart-contents:hover,
.cart-contents:hover {
    background: #ffffff !important;
    border-color: #ff4757 !important;
    color: #ff4757 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2) !important;
}

/* VIBRANT MOFAY RED CART COUNT BADGE (NO MORE PURPLE!) */
.cart-count,
.wishlist-tooltip-count,
.header-cart-icon-wrap .cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4) !important;
    z-index: 5 !important;
    line-height: 1 !important;
}

/* ==========================================================================
   LUXURY SLIDE-OUT CART DRAWER & MINI-CART UI/UX
   ========================================================================== */
#cart-side-drawer.mofay-side-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -420px !important;
    width: 380px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25) !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px 0 0 24px !important;
    transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#cart-side-drawer.mofay-side-drawer.open,
#cart-side-drawer.mofay-side-drawer-right.open {
    right: 0 !important;
}

/* DRAWER HEADER */
#cart-side-drawer .drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

#cart-side-drawer .drawer-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#cart-side-drawer .drawer-close {
    background: #f1f5f9 !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

#cart-side-drawer .drawer-close:hover {
    background: #fee2e2 !important;
    color: #ff4757 !important;
    transform: rotate(90deg) !important;
}

/* DRAWER CONTENT & PRODUCT LIST */
#cart-side-drawer .drawer-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

#cart-side-drawer .widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
}

#cart-side-drawer ul.woocommerce-mini-cart,
#cart-side-drawer ul.cart_list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#cart-side-drawer ul.woocommerce-mini-cart li,
#cart-side-drawer ul.cart_list li {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

#cart-side-drawer ul.woocommerce-mini-cart li:hover,
#cart-side-drawer ul.cart_list li:hover {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* PRODUCT THUMBNAIL */
#cart-side-drawer ul.woocommerce-mini-cart li img,
#cart-side-drawer ul.cart_list li img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
}

/* PRODUCT TITLE & INFO */
#cart-side-drawer ul.woocommerce-mini-cart li a:not(.remove),
#cart-side-drawer ul.cart_list li a:not(.remove) {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
}

#cart-side-drawer ul.woocommerce-mini-cart li a:not(.remove):hover,
#cart-side-drawer ul.cart_list li a:not(.remove):hover {
    color: #ff4757 !important;
}

/* QUANTITY & PRICE TAG */
#cart-side-drawer ul.woocommerce-mini-cart li .quantity,
#cart-side-drawer ul.cart_list li .quantity {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
    display: block !important;
}

/* REMOVE ITEM BUTTON */
#cart-side-drawer ul.woocommerce-mini-cart li a.remove,
#cart-side-drawer ul.cart_list li a.remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#cart-side-drawer ul.woocommerce-mini-cart li a.remove:hover,
#cart-side-drawer ul.cart_list li a.remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* SUBTOTAL BAR */
#cart-side-drawer p.woocommerce-mini-cart__total,
#cart-side-drawer p.total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    margin: 20px 0 14px 0 !important;
    border-top: 1.5px solid #f1f5f9 !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    font-size: 15px !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

#cart-side-drawer p.woocommerce-mini-cart__total strong,
#cart-side-drawer p.total strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

#cart-side-drawer p.woocommerce-mini-cart__total .amount,
#cart-side-drawer p.total .amount {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* ACTION BUTTONS (VIEW CART & CHECKOUT) */
#cart-side-drawer p.woocommerce-mini-cart__buttons,
#cart-side-drawer p.buttons {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* VIEW CART BUTTON */
#cart-side-drawer p.woocommerce-mini-cart__buttons a.button:first-child,
#cart-side-drawer p.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout),
#cart-side-drawer p.buttons a.view-cart,
#cart-side-drawer p.buttons a:first-child {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.25s ease !important;
}

#cart-side-drawer p.woocommerce-mini-cart__buttons a.button:first-child:hover,
#cart-side-drawer p.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover,
#cart-side-drawer p.buttons a.view-cart:hover,
#cart-side-drawer p.buttons a:first-child:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}

/* CHECKOUT BUTTON (PRIMARY RED) */
#cart-side-drawer p.woocommerce-mini-cart__buttons a.button.checkout,
#cart-side-drawer p.woocommerce-mini-cart__buttons a.checkout,
#cart-side-drawer p.buttons a.checkout {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.25s ease !important;
}

#cart-side-drawer p.woocommerce-mini-cart__buttons a.button.checkout:hover,
#cart-side-drawer p.woocommerce-mini-cart__buttons a.checkout:hover,
#cart-side-drawer p.buttons a.checkout:hover {
    background: #e02438 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 71, 87, 0.45) !important;
}

/* EMPTY CART STATE */
#cart-side-drawer p.woocommerce-mini-cart__empty-message {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-align: center !important;
    padding: 40px 10px !important;
}


/* ==========================================================================
   PERFECT LUXURY MINI-CART 3-COLUMN ITEM CARD (UNCLIPPED IMAGE & CLEAN ALIGNMENT)
   ========================================================================== */
.woocommerce-mini-cart-item.mini_cart_item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.woocommerce-mini-cart-item.mini_cart_item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

/* 1. THUMBNAIL (FULL UNCLIPPED PORTRAIT/SQUARE) */
.mofay-mini-cart-thumb {
    width: 66px !important;
    height: 76px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mofay-mini-cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
    border-radius: 9px !important;
    border: none !important;
}

/* 2. TITLE & PRICE INFO */
.mofay-mini-cart-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.mofay-mini-cart-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.mofay-mini-cart-title:hover {
    color: #ff4757 !important;
}

.mofay-mini-cart-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ff4757 !important;
}

.mofay-mini-cart-qty {
    color: #64748b !important;
    font-weight: 600 !important;
}

.mofay-mini-cart-price,
.mofay-mini-cart-price .woocommerce-Price-amount {
    color: #ff4757 !important;
    font-weight: 800 !important;
}

/* 3. REMOVE BUTTON */
.mofay-mini-cart-remove-wrap {
    flex-shrink: 0 !important;
}

.mofay-mini-cart-remove {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.mofay-mini-cart-remove:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* EMPTY MINI CART */
.mofay-empty-mini-cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 60px 20px !important;
    gap: 16px !important;
}

.mofay-empty-mini-cart .empty-cart-icon {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
}

.btn-mofay-start-shopping {
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.2s ease !important;
}

.btn-mofay-start-shopping:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
}


/* ==========================================================================
   LUXURY PROFESSIONAL CHECKOUT UI/UX (MOFAY RED BRANDING)
   ========================================================================== */

.mofay-checkout-page-wrapper {
    padding: 30px 15px 60px 15px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.mofay-checkout-page-wrapper .mofay-section-title {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin-bottom: 30px !important;
    position: relative !important;
    padding-bottom: 12px !important;
}

.mofay-checkout-page-wrapper .mofay-section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 3.5px !important;
    background: #ff4757 !important;
    border-radius: 4px !important;
}

/* 1. SINGLE-LAYER CLEAN COUPON BAR */
.mofay-checkout-coupon-wrapper,
.woocommerce-form-coupon-toggle {
    margin-bottom: 24px !important;
}

.mofay-coupon-toggle-bar,
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}

.coupon-toggle-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #334155 !important;
}

.coupon-toggle-text i {
    color: #ff4757 !important;
}

a.showcoupon {
    color: #ff4757 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

a.showcoupon:hover {
    color: #e02438 !important;
    text-decoration: underline !important;
}

/* COUPON FORM INLINE */
form.checkout_coupon,
form.mofay-clean-coupon-form {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 26px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    max-width: 500px !important;
}

.coupon-input-group {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

form.checkout_coupon .input-text,
.coupon-input-group input.coupon-field {
    flex: 1 !important;
    height: 46px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

form.checkout_coupon .input-text:focus,
.coupon-input-group input.coupon-field:focus {
    background: #ffffff !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15) !important;
}

form.checkout_coupon .button,
.btn-mofay-apply-coupon {
    background: #ff4757 !important;
    color: #ffffff !important;
    height: 46px !important;
    padding: 0 24px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
}

form.checkout_coupon .button:hover,
.btn-mofay-apply-coupon:hover {
    background: #e02438 !important;
    transform: translateY(-1px) !important;
}

/* 2. CHECKOUT 2-COLUMN GRID */
.mofay-checkout-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 36px !important;
    align-items: flex-start !important;
}

/* BILLING DETAILS CARD */
.checkout-billing-details-col {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
}

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.woocommerce-billing-fields .input-text,
.woocommerce-shipping-fields .input-text,
.woocommerce-additional-fields .input-text,
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select {
    width: 100% !important;
    height: 46px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.woocommerce-billing-fields .input-text:focus,
.woocommerce-shipping-fields .input-text:focus,
.woocommerce-billing-fields select:focus {
    background: #ffffff !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15) !important;
}

.woocommerce-additional-fields textarea {
    height: 90px !important;
    padding: 12px 14px !important;
}

/* 3. ORDER SUMMARY CARD */
.checkout-order-review-col {
    position: sticky !important;
    top: 80px !important;
}

.checkout-order-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 18px 0 !important;
}

.mofay-order-review-box,
#order_review {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

table.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #334155 !important;
}

table.woocommerce-checkout-review-order-table thead th {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #ff4757 !important;
    border-top: 2px solid #f1f5f9 !important;
    border-bottom: none !important;
    padding-top: 16px !important;
}

/* PAYMENT METHODS LIST */
#payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#payment ul.payment_methods li {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

#payment ul.payment_methods li:hover,
#payment ul.payment_methods li:has(input:checked) {
    border-color: #ff4757 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.08) !important;
}

#payment ul.payment_methods li label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}

#payment div.payment_box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 0 0 0 !important;
    margin-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

#payment div.payment_box::before,
#payment div.payment_box::after {
    display: none !important;
    content: none !important;
}

#payment fieldset,
#payment .payment_box fieldset,
#payment fieldset.wc-credit-card-form,
#payment #wc-stripe-cc-form,
#payment .wc-credit-card-form {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-privacy-policy-text {
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 18px !important;
    font-size: 13px !important;
    color: #334155 !important;
}

/* 4. VIBRANT MOFAY RED PLACE ORDER BUTTON */
button#place_order,
#place_order {
    width: 100% !important;
    height: 52px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 22px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.25s ease !important;
}

button#place_order:hover,
#place_order:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 26px rgba(255, 71, 87, 0.5) !important;
}

/* SECURITY ASSURANCES */
.checkout-security-assurances {
    margin-top: 20px !important;
    text-align: center !important;
}

.assurance-item {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.checkout-payment-methods-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 24px !important;
    color: #94a3b8 !important;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 900px) {
    .mofay-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .checkout-order-review-col {
        position: static !important;
    }
}


/* ==========================================================================
   SINGLE PRODUCT PERFECTION (EXACT REFERENCE UI/UX MATCH)
   ========================================================================== */

.mofay-single-product-master-card {
    max-width: 1280px !important;
    margin: 0 auto 50px auto !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 30px 32px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f5f9 !important;
}

/* BREADCRUMBS */
.mofay-product-breadcrumbs {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.mofay-product-breadcrumbs a {
    color: #475569 !important;
    text-decoration: none !important;
}

.mofay-product-breadcrumbs a:hover {
    color: #ff4757 !important;
}

.mofay-product-breadcrumbs span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* MAIN 2-COLUMN STAGE GRID */
.mofay-product-stage-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 48px !important;
    align-items: flex-start !important;
}

/* 1. GALLERY (4:5 VERTICAL ASPECT RATIO) */
.mofay-pdp-gallery-col {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
}

.mofay-pdp-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 600px !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
}

.mofay-pdp-main-image-wrap img.pdp-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
    transition: opacity 0.25s ease !important;
}

/* FLOATING SALE / DISCOUNT BADGES ON IMAGE */
.pdp-floating-badges {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 5 !important;
}

.pdp-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
}

.pdp-badge.badge-sale {
    background: #ff4757 !important;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4) !important;
}

.pdp-badge.badge-discount {
    background: #f59e0b !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

.pdp-badge.badge-new {
    background: #1e3a8a !important;
}

/* GALLERY NAV BUTTONS */
.pdp-gallery-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    z-index: 5 !important;
    transition: all 0.2s ease !important;
}

.pdp-gallery-nav:hover {
    background: #ff4757 !important;
    color: #ffffff !important;
    border-color: #ff4757 !important;
}

.pdp-gallery-nav.prev-nav { left: 12px !important; }
.pdp-gallery-nav.next-nav { right: 12px !important; }

.pdp-side-tools {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 5 !important;
}

.pdp-side-tools .tool-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
}

.pdp-side-tools .tool-btn:hover {
    color: #ff4757 !important;
    transform: scale(1.08) !important;
}

/* THUMBNAILS ROW */
.mofay-pdp-thumbs-row {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 14px 2px 4px 2px !important;
    scrollbar-width: none !important;
}

.mofay-pdp-thumbs-row::-webkit-scrollbar {
    display: none !important;
}

.pdp-thumb-card {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 88px !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
    opacity: 0.65 !important;
}

.pdp-thumb-card:hover {
    opacity: 0.9 !important;
    border-color: #cbd5e1 !important;
}

.pdp-thumb-card.active {
    opacity: 1 !important;
    border-color: #0f172a !important;
    transform: scale(1.04) !important;
}

.pdp-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
}

/* 2. SUMMARY COLUMN */
.mofay-pdp-summary-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.pdp-cat-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

.pdp-title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.4px !important;
}

/* RATINGS ROW */
.pdp-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pdp-stars {
    color: #f59e0b !important;
    font-size: 14px !important;
    display: flex !important;
    gap: 2px !important;
}

.pdp-rating-score {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.pdp-rating-count {
    font-size: 13.5px !important;
    color: #64748b !important;
}

/* PRICING */
.pdp-pricing-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.pdp-price-main-line {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.pdp-current-price {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #ff4757 !important;
    letter-spacing: -0.5px !important;
}

.pdp-discount-badge {
    background: #f59e0b !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

.pdp-vat-note {
    font-size: 12.5px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dot-sep {
    color: #cbd5e1 !important;
}

/* URGENCY BADGES */
.pdp-urgency-badges-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.urgency-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
}

.urgency-pill.pill-offer {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.urgency-pill.pill-stock {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.urgency-pill.pill-stock small {
    color: #475569 !important;
    font-weight: 500 !important;
    margin-left: 4px !important;
}

/* 3. ROUND SHAPE SIZE SWATCHES */
.pdp-attribute-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 0 !important;
}

.pdp-attribute-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pdp-attribute-label {
    font-size: 14px !important;
    color: #334155 !important;
}

.pdp-attribute-label strong {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.pdp-size-guide-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: underline !important;
}

.pdp-round-swatches-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* ROUND CIRCULAR SHAPE SWATCH */
.pdp-round-swatch-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    outline: none !important;
}

.pdp-round-swatch-btn:hover {
    border-color: #0f172a !important;
    transform: translateY(-2px) !important;
}

.pdp-round-swatch-btn.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3) !important;
}

/* 4. ACTIONS & BUTTONS */
.pdp-actions-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px 0 !important;
}

.pdp-stepper-and-buttons-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* QUANTITY STEPPER [- 1 +] */
.pdp-quantity-stepper {
    display: inline-flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    height: 48px !important;
    padding: 0 4px !important;
}

.qty-btn {
    background: transparent !important;
    border: none !important;
    width: 34px !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s !important;
}

.qty-btn:hover {
    color: #ff4757 !important;
}

.qty-input-field {
    width: 38px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

.qty-input-field::-webkit-inner-spin-button,
.qty-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* BUY NOW BUTTON (NAVY / DARK #0f172a) */
.btn-pdp-buy-now {
    flex: 1 !important;
    min-width: 140px !important;
    height: 48px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-pdp-buy-now:hover {
    background: #1e293b !important;
    transform: translateY(-2px) !important;
}

/* ADD TO CART BUTTON (GOLD/AMBER OR RED) */
.btn-pdp-add-to-cart {
    flex: 1 !important;
    min-width: 140px !important;
    height: 48px !important;
    background: #d97706 !important; /* Gold/Amber */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
    transition: all 0.2s ease !important;
}

.btn-pdp-add-to-cart:hover {
    background: #b45309 !important;
    transform: translateY(-2px) !important;
}

/* LARGE WHATSAPP ORDER BUTTON */
.btn-pdp-whatsapp-full {
    width: 100% !important;
    height: 48px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.2s ease !important;
}

.btn-pdp-whatsapp-full:hover {
    background: #16a34a !important;
    transform: translateY(-2px) !important;
}

/* 5. WHY PARENTS LOVE THIS (6 TRUST BADGES GRID) */
.pdp-why-love-section {
    margin-top: 14px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.why-love-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
}

.why-love-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.why-love-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    transition: all 0.2s ease !important;
}

.why-love-card:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.why-card-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.why-card-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.why-card-heading {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.why-card-sub {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}

/* RESPONSIVENESS */
@media (max-width: 900px) {
    .mofay-single-product-master-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
    .mofay-product-stage-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .why-love-cards-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   RELATED PRODUCTS & MOBILE STICKY BUY BAR FIX
   ========================================================================== */

/* RELATED PRODUCTS SECTION */
.mofay-pdp-related-wrapper {
    margin-top: 50px !important;
    padding-top: 35px !important;
    border-top: 1.5px solid #f1f5f9 !important;
}

.mofay-related-products-section {
    width: 100% !important;
}

.mofay-related-title {
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 auto 30px auto !important;
    position: relative !important;
    padding-bottom: 12px !important;
}

.mofay-related-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 3.5px !important;
    background: #ff4757 !important;
    border-radius: 4px !important;
}

/* DESKTOP: COMPLETELY HIDE MOBILE STICKY BUY BAR */
@media (min-width: 769px) {
    .mofay-mobile-sticky-buy-bar,
    #mofay-sticky-buy-bar,
    .hide-desktop {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* MOBILE: CLEAN STICKY FLOATING BUY BAR (< 769px) */
@media (max-width: 768px) {
    .mofay-mobile-sticky-buy-bar {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
        z-index: 99999 !important;
        padding: 8px 14px !important;
        border-top: 1px solid #f1f5f9 !important;
        box-sizing: border-box !important;
    }

    .sticky-bar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .sticky-bar-product-info {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .sticky-bar-thumb {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        border: 1px solid #e2e8f0 !important;
    }

    .sticky-bar-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .sticky-bar-details {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .sticky-bar-title {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sticky-bar-price {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #ff4757 !important;
    }

    .sticky-bar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .sticky-bar-btn-wa {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        background: #22c55e !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }

    .sticky-bar-btn-buy {
        height: 42px !important;
        padding: 0 16px !important;
        background: #ff4757 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3) !important;
    }
}


/* ==========================================================================
   ADDITIONAL INFORMATION TAB: LUXURY SPECIFICATIONS & ICON CARDS
   ========================================================================== */

.mofay-additional-info-wrapper {
    padding: 10px 0 25px 0 !important;
}

.mofay-addinfo-heading {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.3px !important;
}

/* 1. SPECIFICATIONS TABLE GRID */
.mofay-specs-table-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 26px !important;
}

.mofay-spec-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    transition: all 0.2s ease !important;
}

.mofay-spec-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.spec-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.spec-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}

.spec-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.spec-val {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    padding-left: 24px !important;
}

/* 2. HIGHLIGHTS SECTION */
.mofay-highlights-section {
    margin-top: 24px !important;
    padding-top: 22px !important;
    border-top: 1.5px solid #f1f5f9 !important;
}

.highlights-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.highlights-title i {
    color: #ff4757 !important;
}

.highlights-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.highlight-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.highlight-box:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

.highlight-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.highlight-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.highlight-heading {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.highlight-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .mofay-specs-table-grid,
    .highlights-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   LUXURY PRODUCT TABS & REVIEWS UI/UX (MOFAY RED BRANDING)
   ========================================================================== */

.woocommerce-tabs.mofay-product-tabs-container {
    margin-top: 40px !important;
    padding-top: 20px !important;
    border-top: 1.5px solid #f1f5f9 !important;
}

/* 1. TABS NAVIGATION LIST */
.woocommerce-tabs ul.tabs.mofay-tabs-list,
.woocommerce-tabs ul.tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    border-bottom: 2px solid #f1f5f9 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none !important;
}

.woocommerce-tabs ul.tabs li {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s ease !important;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: #ff4757 !important;
    background: rgba(255, 71, 87, 0.04) !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #ff4757 !important;
    font-weight: 800 !important;
    border-bottom-color: #ff4757 !important;
    background: transparent !important;
}

/* TAB PANEL CONTENT */
.mofay-tab-panel,
.woocommerce-Tabs-panel {
    animation: mofayFadeIn 0.3s ease !important;
}

@keyframes mofayFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* DESCRIPTION TAB */
.mofay-desc-heading {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
}

.mofay-desc-content {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}

/* 2. REVIEWS SECTION & FORM */
.mofay-reviews-wrapper {
    padding: 5px 0 !important;
}

.mofay-reviews-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.mofay-reviews-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.mofay-verified-badge {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    background: #dcfce7 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* NO REVIEWS CARD */
.mofay-no-reviews-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 26px !important;
}

.no-reviews-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    border: 1px solid #e2e8f0 !important;
}

.no-reviews-heading {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.no-reviews-text {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* WRITE A REVIEW FORM CARD */
.mofay-review-form-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 28px 26px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.mofay-reply-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 18px 0 !important;
}

/* FORM FIELDS LAYOUT */
#review_form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.mofay-rating-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.mofay-rating-row label,
.mofay-form-col label,
.mofay-form-full label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: block !important;
}

.mofay-select-control,
.mofay-input-control,
.mofay-textarea-control {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.mofay-select-control {
    height: 48px !important;
    cursor: pointer !important;
}

.mofay-input-control {
    height: 48px !important;
}

.mofay-textarea-control {
    height: 110px !important;
    padding: 14px 16px !important;
    resize: vertical !important;
}

.mofay-select-control:focus,
.mofay-input-control:focus,
.mofay-textarea-control:focus {
    background: #ffffff !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15) !important;
}

/* SUBMIT REVIEW BUTTON */
#review_form input#submit,
#review_form button#submit {
    align-self: flex-start !important;
    height: 48px !important;
    padding: 0 32px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.2s ease !important;
}

#review_form input#submit:hover,
#review_form button#submit:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 71, 87, 0.45) !important;
}

/* EXISTING COMMENT LIST */
ol.mofay-review-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

ol.mofay-review-list li.review {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
}

ol.mofay-review-list li.review .star-rating {
    float: right !important;
    color: #f59e0b !important;
}

ol.mofay-review-list li.review .meta {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

ol.mofay-review-list li.review .description {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   CLEAN HEADER ICONS (NO RED POPPING BUBBLES WHEN ZERO / UNBLOCKED ICONS)
   ========================================================================== */

.header-wishlist-icon,
.header-cart-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-wishlist-icon a,
.header-cart-icon-wrap a.cart-contents,
.cart-contents {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 17px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.header-wishlist-icon a:hover,
.header-cart-icon-wrap a.cart-contents:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #ff4757 !important;
    transform: translateY(-1px) !important;
}

.header-wishlist-icon a i,
.header-cart-icon-wrap a.cart-contents i {
    font-size: 17px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* HIDE RED BUBBLE ENTIRELY WHEN COUNT IS ZERO OR EMPTY */
.cart-count[data-count="0"],
.wishlist-tooltip-count[data-count="0"],
.cart-count:empty,
.wishlist-tooltip-count:empty {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* COMPACT OUTER-CORNER BADGE ONLY WHEN COUNT > 0 (100% UNBLOCKED ICONS) */
.cart-count,
.wishlist-tooltip-count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4) !important;
    z-index: 10 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}


/* ==========================================================================
   NATIVE MOBILE APP NAVIGATION & APP FORMAT UI/UX
   ========================================================================== */

/* DESKTOP: COMPLETELY HIDE MOBILE APP TABBAR */
@media (min-width: 769px) {
    .mofay-mobile-app-tabbar,
    #mofayAppTabbar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* MOBILE APP FORMAT (< 769px) */
@media (max-width: 768px) {
    body {
        padding-bottom: 64px !important;
        -webkit-tap-highlight-color: transparent !important;
        /* overscroll-behavior-y: auto */
    }

    .mofay-mobile-app-tabbar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #ffffff !important;
        box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08) !important;
        z-index: 99998 !important;
        border-top: 1px solid #f1f5f9 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 4px calc(env(safe-area-inset-bottom, 0px) / 2) 4px !important;
        box-sizing: border-box !important;
    }

    .app-tab-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        height: 100% !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }

    .app-tab-item i {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .app-tab-item.active {
        color: #ff4757 !important;
    }

    .app-tab-item.active i {
        transform: scale(1.1) !important;
    }

    .app-tab-item.app-tab-wa i {
        color: #22c55e !important;
    }

    .app-tab-icon-wrap {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .app-tab-icon-wrap .cart-count,
    .app-tab-icon-wrap .wishlist-tooltip-count {
        position: absolute !important;
        top: -6px !important;
        right: -8px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        font-size: 9.5px !important;
    }

    /* TIGHT PRODUCT GRID (APP FORMAT) */
    ul.products.columns-4,
    ul.products.columns-3,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 4px !important;
    }

    /* SMOOTH HORIZONTAL SWIPE FOR FILTER CHIPS */
    .top-filters-slider-track {
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* ==========================================================================
   LIVE SIZE METRICS CARD & SIZE GUIDE MODAL UI/UX
   ========================================================================== */

/* SIZE GUIDE BUTTON */
.pdp-size-guide-btn {
    background: transparent !important;
    border: none !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color 0.2s ease !important;
}

.pdp-size-guide-btn:hover {
    color: #ff4757 !important;
}

/* LIVE SIZE METRICS CARD (Age & Length Indicator) */
.pdp-size-metrics-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    margin-top: 4px !important;
    animation: mofayMetricsFade 0.25s ease !important;
}

@keyframes mofayMetricsFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.size-metric-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    color: #334155 !important;
}

.metric-icon-child {
    color: #3b82f6 !important;
    font-size: 15px !important;
}

.metric-icon-ruler {
    color: #10b981 !important;
    font-size: 15px !important;
}

.size-metric-item strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.size-metric-divider {
    width: 1px !important;
    height: 16px !important;
    background: #cbd5e1 !important;
}

/* FLASH HIGHLIGHT ON LIVE PRICE UPDATE */
.price-update-flash {
    animation: mofayPriceFlash 0.4s ease !important;
}

@keyframes mofayPriceFlash {
    0% { transform: scale(1); color: #ff4757; }
    50% { transform: scale(1.08); color: #e02438; }
    100% { transform: scale(1); color: #ff4757; }
}

/* POPUP SIZE GUIDE MODAL */
.mofay-size-guide-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.mofay-size-guide-modal.active {
    display: flex !important;
    pointer-events: auto !important;
}

.size-guide-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px) !important;
}

.size-guide-modal-dialog {
    position: relative !important;
    z-index: 2 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 480px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    animation: mofayModalPop 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@keyframes mofayModalPop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.size-guide-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 22px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    background: #f8fafc !important;
}

.modal-heading {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-heading i {
    color: #ff4757 !important;
}

.btn-close-size-guide {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-close-size-guide:hover {
    background: #fee2e2 !important;
    color: #ff4757 !important;
}

.size-guide-modal-body {
    padding: 22px !important;
}

.mofay-modal-size-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 16px !important;
}

.mofay-modal-size-table th {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 12px 14px !important;
    text-align: left !important;
}

.mofay-modal-size-table th:first-child {
    border-radius: 8px 0 0 0 !important;
}

.mofay-modal-size-table th:last-child {
    border-radius: 0 8px 0 0 !important;
}

.mofay-modal-size-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13.5px !important;
    color: #334155 !important;
}

.mofay-modal-size-table tr:hover td {
    background: #f8fafc !important;
}

.size-pill {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 22px !important;
    margin-right: 6px !important;
}

.size-guide-tip-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
}

.size-guide-tip-box i {
    color: #f59e0b !important;
    font-size: 16px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.size-guide-tip-box p {
    font-size: 12px !important;
    color: #92400e !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}


/* HIDE RAW WOOCOMMERCE ATTRIBUTES TABLE IN ADDITIONAL INFO TAB */
.mofay-additional-info-wrapper table.shop_attributes,
.mofay-additional-info-wrapper .shop_attributes {
    display: none !important;
}


/* ==========================================================================
   GUARANTEED MOBILE SCROLLING RESTORATION (100% SMOOTH TOUCH EVENTS)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 100% !important;
}

/* Ensure no invisible overlays capture touch when not active */
.mofay-size-guide-modal:not(.active),
.mofay-drawer-overlay:not(.active),
#mofay-drawer-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================================
   HIGH PERFORMANCE MOBILE RENDERING & SPEED OPTIMIZATIONS
   ========================================================================== */

/* GPU Hardware Acceleration for Fixed Mobile Bars */
.mofay-mobile-app-tabbar {
    transform: translateZ(0) !important;
    will-change: transform !important;
    contain: layout style !important;
}

.mofay-mobile-sticky-buy-bar {
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Optimize below-the-fold rendering */
.site-footer {
    content-visibility: auto !important;
    contain-intrinsic-size: 1px 400px !important;
}

.mofay-pdp-tabs-wrapper {
    content-visibility: auto !important;
    contain-intrinsic-size: 1px 300px !important;
}


/* ==========================================================================
   MOBILE SINGLE PRODUCT RESPONSIVE PERFECTION (ZERO HORIZONTAL OVERFLOW)
   ========================================================================== */

@media (max-width: 768px) {
    /* Container & Column Margins */
    .mofay-single-product-master-card {
        padding: 16px 12px !important;
        margin: 0 0 24px 0 !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mofay-pdp-gallery-col,
    .mofay-pdp-summary-col {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Product Title */
    .pdp-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    /* Urgency Badges */
    .pdp-urgency-badges-row {
        gap: 6px !important;
    }

    .urgency-pill {
        font-size: 11.5px !important;
        padding: 5px 10px !important;
    }

    /* Size Header & Guide Link */
    .pdp-attribute-header {
        font-size: 13px !important;
    }

    .pdp-round-swatches-row {
        gap: 8px !important;
    }

    .pdp-round-swatch-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
    }

    /* Size Metrics Pill Card (Age & Length) */
    .pdp-size-metrics-card {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 6px 12px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }

    .size-metric-item {
        font-size: 12px !important;
    }

    .size-metric-divider {
        display: none !important;
    }

    /* ACTION BUTTONS: APP FORMAT RESPONSIVE GRID (ZERO OVERFLOW) */
    .pdp-actions-container {
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    .mofay-pdp-cart-form {
        width: 100% !important;
    }

    .pdp-stepper-and-buttons-row {
        display: grid !important;
        grid-template-columns: 105px 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stepper: Column 1 */
    .pdp-quantity-stepper {
        width: 100% !important;
        height: 46px !important;
        box-sizing: border-box !important;
    }

    /* Add to Cart: Column 2 */
    .btn-pdp-add-to-cart {
        width: 100% !important;
        height: 46px !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Buy Now: Full Width Row Below */
    .btn-pdp-buy-now {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 46px !important;
        min-width: 0 !important;
        font-size: 14.5px !important;
        box-sizing: border-box !important;
    }

    /* WhatsApp Button: Full Width */
    .btn-pdp-whatsapp-full {
        width: 100% !important;
        height: 46px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* 6 Cards Why Parents Love This Grid */
    .why-love-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .why-love-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================================
   PERFECT MOBILE SINGLE PRODUCT LAYOUT (ZERO CUTOFF / ZERO OVERFLOW)
   ========================================================================== */

/* Universal Mobile Viewport Constraint */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ACTIONS STACK ON ALL SCREENS */
.pdp-actions-stack-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pdp-row-qty-and-cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pdp-row-qty-and-cart .pdp-quantity-stepper {
    width: 110px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.pdp-row-qty-and-cart .btn-pdp-add-to-cart {
    flex: 1 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.btn-pdp-buy-now {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.btn-pdp-whatsapp-full {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
}

/* MOBILE SPECIFIC OVERFLOW FIXES (< 768px) */
@media (max-width: 768px) {
    .inscolio-single-product-page {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .inscolio-single-product-page .mofay-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mofay-single-product-master-card {
        padding: 14px 10px !important;
        margin: 0 0 20px 0 !important;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border: 1px solid #f1f5f9 !important;
    }

    .mofay-product-breadcrumbs {
        font-size: 12px !important;
        margin-bottom: 14px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .mofay-product-stage-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .mofay-pdp-gallery-col,
    .mofay-pdp-summary-col {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .pdp-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .pdp-size-metrics-card {
        width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 6px 12px !important;
        padding: 8px 12px !important;
    }

    .size-metric-item {
        font-size: 12px !important;
    }

    .size-metric-divider {
        display: none !important;
    }

    /* Single Product Sticky Buy Bar on Mobile */
    .mofay-mobile-sticky-buy-bar {
        bottom: 0 !important;
        z-index: 99999 !important;
    }
}


/* ==========================================================================
   100% FULL PHOTO VISIBILITY (1080x1350 UNCLIPPED) & BOLD SIZE SWATCHES
   ========================================================================== */

/* 1. FULL UNCLIPPED 4:5 MAIN IMAGE CONTAINER */
.mofay-pdp-main-image-wrap {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: none !important; /* Full 100% height from hat/head to shoes/feet */
    height: auto !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
}

.mofay-pdp-main-image-wrap img.pdp-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    display: block !important;
}

/* 2. BOLDER & LARGER ROUND SIZE SWATCHES */
.pdp-round-swatch-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.pdp-round-swatch-btn:hover {
    border-color: #0f172a !important;
    transform: translateY(-2px) !important;
}

.pdp-round-swatch-btn.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35) !important;
    transform: scale(1.06) !important;
}

.pdp-attribute-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.pdp-attribute-label strong {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

@media (max-width: 768px) {
    .mofay-pdp-main-image-wrap {
        border-radius: 16px !important;
        max-height: none !important;
    }

    .pdp-round-swatch-btn {
        width: 46px !important;
        height: 46px !important;
        font-size: 15px !important;
    }
}


/* ==========================================================================
   RESTORED ORIGINAL SINGLE-ROW ACTION BUTTONS (DESKTOP & MOBILE RESPONSIVE)
   ========================================================================== */

.pdp-actions-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 0 !important;
}

.mofay-pdp-cart-form {
    width: 100% !important;
    margin: 0 !important;
}

/* SINGLE HORIZONTAL ROW: STEPPER + BUY NOW + ADD TO CART */
.pdp-stepper-and-buttons-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1. QUANTITY STEPPER */
.pdp-quantity-stepper {
    flex: 0 0 105px !important;
    width: 105px !important;
    height: 48px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.qty-btn {
    background: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 100% !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
}

.qty-btn:hover {
    color: #ff4757 !important;
}

.qty-input-field {
    width: 36px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}

.qty-input-field::-webkit-inner-spin-button,
.qty-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 2. BUY NOW BUTTON (DARK NAVY #0f172a) */
.btn-pdp-buy-now {
    flex: 1 !important;
    height: 48px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.btn-pdp-buy-now:hover {
    background: #1e293b !important;
    transform: translateY(-1px) !important;
}

/* 3. ADD TO CART BUTTON (GOLD / AMBER #d97706) */
.btn-pdp-add-to-cart {
    flex: 1 !important;
    height: 48px !important;
    background: #d97706 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.btn-pdp-add-to-cart:hover {
    background: #b45309 !important;
    transform: translateY(-1px) !important;
}

/* 4. WHATSAPP FULL-WIDTH BUTTON */
.btn-pdp-whatsapp-full {
    width: 100% !important;
    height: 48px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.btn-pdp-whatsapp-full:hover {
    background: #16a34a !important;
    transform: translateY(-1px) !important;
}

/* MOBILE SCREEN ADAPTATION (< 480px) */
@media (max-width: 480px) {
    .pdp-stepper-and-buttons-row {
        gap: 6px !important;
    }
    .pdp-quantity-stepper {
        flex: 0 0 85px !important;
        width: 85px !important;
        height: 44px !important;
    }
    .qty-btn {
        width: 26px !important;
        font-size: 16px !important;
    }
    .qty-input-field {
        width: 28px !important;
        font-size: 13px !important;
    }
    .btn-pdp-buy-now,
    .btn-pdp-add-to-cart {
        height: 44px !important;
        font-size: 12.5px !important;
        padding: 0 6px !important;
        gap: 4px !important;
    }
    .btn-pdp-whatsapp-full {
        height: 44px !important;
        font-size: 13.5px !important;
    }
}


/* ==========================================================================
   ULTRA-BOLD HIGH-VISIBILITY SIZE METRICS CARD (BIG & EASY TO SEE)
   ========================================================================== */

.pdp-size-metrics-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    margin-top: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.size-metric-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}

.metric-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.metric-icon-child {
    color: #2563eb !important;
    font-size: 19px !important;
}

.metric-icon-ruler {
    color: #059669 !important;
    font-size: 19px !important;
}

.metric-text-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.metric-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1 !important;
}

.metric-value,
#pdpMetricAge,
#pdpMetricLength {
    font-size: 16.5px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

.size-metric-divider {
    width: 1.5px !important;
    height: 38px !important;
    background: #e2e8f0 !important;
    margin: 0 14px !important;
}

@media (max-width: 480px) {
    .pdp-size-metrics-card {
        padding: 10px 12px !important;
        gap: 6px !important;
    }
    .size-metric-item {
        gap: 8px !important;
    }
    .metric-icon-wrap {
        width: 34px !important;
        height: 34px !important;
    }
    .metric-icon-child,
    .metric-icon-ruler {
        font-size: 16px !important;
    }
    .metric-label {
        font-size: 9.5px !important;
    }
    .metric-value,
    #pdpMetricAge,
    #pdpMetricLength {
        font-size: 14.5px !important;
    }
    .size-metric-divider {
        height: 32px !important;
        margin: 0 6px !important;
    }
}


/* ==========================================================================
   PERFECT ZERO-CROP PRODUCT PHOTO RENDERING (100% HEAD-TO-TOE VISIBLE)
   ========================================================================== */

.mofay-pdp-gallery-col {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
}

.mofay-pdp-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: none !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #e2e8f0 !important;
}

.mofay-pdp-main-image-wrap img.pdp-main-img,
#pdpMainImg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* 100% Full Photo - Zero cut on shoes/feet/hats */
    object-position: center center !important;
    display: block !important;
    background: #ffffff !important;
}

.pdp-thumb-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pdp-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
}

@media (max-width: 768px) {
    .mofay-pdp-main-image-wrap {
        border-radius: 16px !important;
        aspect-ratio: 4 / 5 !important;
    }
}


/* ==========================================================================
   PURE BRIGHT WHITE TEXT ON FLOATING BADGES (HIGH CONTRAST & VISIBILITY)
   ========================================================================== */

.pdp-floating-badges {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.pdp-badge,
.pdp-floating-badges .pdp-badge,
.pdp-floating-badges span,
.pdp-badge *,
.pdp-badge i {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.pdp-badge {
    font-size: 11px !important;
    padding: 6px 11px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
}

.pdp-badge.badge-sale {
    background: #ff4757 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(255, 71, 87, 0.45) !important;
}

.pdp-badge.badge-discount {
    background: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45) !important;
}

.pdp-badge.badge-new {
    background: #1e3a8a !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(30, 58, 138, 0.45) !important;
}


/* ==========================================================================
   PREMIUM LUXURY BOXED DESCRIPTION TAB (UNDERLINED BOX HEADINGS & EDITORIAL TYPO)
   ========================================================================== */

.mofay-pdp-description-wrapper {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px 36px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* MAIN TAB HEADING */
.mofay-desc-heading {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.mofay-desc-heading::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 65px !important;
    height: 3px !important;
    background: #ff4757 !important;
    border-radius: 3px !important;
}

/* EDITORIAL CONTENT PARAGRAPHS */
.mofay-desc-content p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    margin: 0 0 16px 0 !important;
}

.mofay-desc-content p:last-child {
    margin-bottom: 0 !important;
}

.mofay-desc-content strong,
.mofay-desc-content b {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* SUB-HEADINGS INSIDE CONTENT (UNDERLINED BOX WITH ACCENT BAR) */
.mofay-desc-content h2,
.mofay-desc-content h3,
.mofay-desc-content h4 {
    font-size: 17.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 28px 0 14px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mofay-desc-content h2::before,
.mofay-desc-content h3::before,
.mofay-desc-content h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 18px !important;
    background: #ff4757 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* STYLED LISTS */
.mofay-desc-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 16px 0 20px 0 !important;
}

.mofay-desc-content ul li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.65 !important;
}

.mofay-desc-content ul li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #ff4757 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .mofay-pdp-description-wrapper {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .mofay-desc-heading {
        font-size: 17px !important;
        margin-bottom: 18px !important;
    }

    .mofay-desc-content h2,
    .mofay-desc-content h3,
    .mofay-desc-content h4 {
        font-size: 15.5px !important;
        margin: 22px 0 12px 0 !important;
    }

    .mofay-desc-content p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .mofay-desc-content ul li {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   HIGH-CONTRAST SALE & STRIKETHROUGH REGULAR PRICE DISPLAY
   ========================================================================== */

.pdp-pricing-section {
    margin-bottom: 16px !important;
}

.pdp-price-main-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.pdp-current-price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.pdp-current-price .price-currency {
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.pdp-current-price .price-val.price-sale,
.pdp-current-price .price-val {
    color: #ff4757 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
}

/* Crossed out original price (Muted Grey with Strikethrough Line) */
.pdp-current-price del,
.pdp-current-price del.price-regular,
.pdp-current-price .price-regular,
.price-regular {
    color: #94a3b8 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-decoration: line-through !important;
    text-decoration-color: #94a3b8 !important;
    text-decoration-thickness: 2px !important;
    margin-left: 6px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    opacity: 0.85 !important;
}

.reg-currency {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}

.pdp-discount-badge {
    background: #f59e0b !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
}


/* ==========================================================================
   SEAMLESS EDGE-TO-EDGE PRODUCT PHOTO (ZERO WHITE CUT LINES / FULL BLEED)
   ========================================================================== */

.mofay-pdp-gallery-col {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
}

/* Main Image Box: Seamless Full Bleed Fill with Rounded Corners */
.mofay-pdp-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
}

.mofay-pdp-main-image-wrap img.pdp-main-img,
#pdpMainImg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Edge-to-Edge full bleed - No white side strips or cut lines */
    object-position: center center !important;
    display: block !important;
    border-radius: 20px !important;
    transition: opacity 0.25s ease !important;
}

/* Thumbnail Gallery Cards */
.pdp-thumb-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 5 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pdp-thumb-card.active {
    border-color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
    transform: scale(1.04) !important;
}

.pdp-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

@media (max-width: 768px) {
    .mofay-pdp-main-image-wrap {
        border-radius: 16px !important;
        aspect-ratio: 4 / 5 !important;
    }

    .mofay-pdp-main-image-wrap img.pdp-main-img,
    #pdpMainImg {
        border-radius: 16px !important;
    }
}


/* ==========================================================================
   DARKER REGULAR PRICE WITH VIVID RED STRIKETHROUGH LINE
   ========================================================================== */

.pdp-current-price del,
.pdp-current-price del.price-regular,
.pdp-current-price .price-regular,
.price-regular,
del.price-regular,
.mofay-card-price del,
.product-price del {
    color: #64748b !important; /* Darker, clear readable slate */
    font-size: 19px !important;
    font-weight: 700 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important; /* Vivid Red Strikethrough Line */
    text-decoration-thickness: 2.5px !important;
    -webkit-text-decoration-color: #ef4444 !important;
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    opacity: 1 !important;
}

.pdp-current-price del .reg-currency,
.pdp-current-price .reg-currency,
del .reg-currency {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

@media (max-width: 768px) {
    .pdp-current-price del,
    .pdp-current-price del.price-regular,
    .pdp-current-price .price-regular {
        font-size: 17px !important;
        text-decoration-thickness: 2px !important;
    }
}


/* ==========================================================================
   LUXURY ABOUT US & CONTACT US PAGE STYLING (HIGH CONTRAST & PREMIUM CARDS)
   ========================================================================== */

/* 1. ABOUT HERO BANNER (PURE CRISP WHITE ON LUXURY NAVY) */
.about-hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    padding: 85px 20px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.about-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffd166 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    margin-bottom: 16px !important;
}

.about-hero-title {
    color: #ffffff !important; /* PURE CRISP WHITE */
    font-size: 48px !important;
    font-weight: 900 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.8px !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.about-hero-subtitle {
    color: #93c5fd !important; /* SOFT PASTEL SKY BLUE */
    font-size: 18.5px !important;
    font-weight: 600 !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.55 !important;
}

/* 2. ABOUT STORY SECTION */
.about-story-section {
    padding: 70px 0 !important;
    background: #ffffff !important;
}

.about-story-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 50px !important;
    align-items: center !important;
}

.about-sub-tag {
    color: #ff4757 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.about-section-title {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.25 !important;
}

.about-story-content p {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    color: #475569 !important;
    margin-bottom: 18px !important;
}

.about-highlights-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

.about-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #f8fafc !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
}

.highlight-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.highlight-icon.icon-safe {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.highlight-icon.icon-fast {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

.highlight-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.highlight-text strong {
    color: #0f172a !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
}

.highlight-text span {
    color: #64748b !important;
    font-size: 13.5px !important;
}

/* STORY CARD */
.about-glass-card {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 40px 32px !important;
    text-align: center !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
}

.about-card-badge {
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
}

.about-emoji-placeholder {
    font-size: 32px !important;
    color: #ff4757 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

.about-glass-card h3 {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin-bottom: 12px !important;
}

.about-glass-card p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin-bottom: 24px !important;
}

.about-card-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.footer-chip {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    padding: 6px 14px !important;
}

/* 3. CORE VALUES SECTION */
.about-values-section {
    padding: 70px 0 !important;
    background: #f8fafc !important;
}

.section-header-center {
    text-align: center !important;
    margin-bottom: 48px !important;
}

.title-underline {
    width: 60px !important;
    height: 4px !important;
    background: #ff4757 !important;
    border-radius: 2px !important;
    margin: 12px auto 0 auto !important;
}

.about-values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.about-value-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 36px 28px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

.about-value-card:hover {
    transform: translateY(-6px) !important;
    border-color: #ff4757 !important;
    box-shadow: 0 12px 30px rgba(255, 71, 87, 0.12) !important;
}

.value-icon-wrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    margin: 0 auto 20px auto !important;
}

.icon-quality { background: #fee2e2 !important; color: #ef4444 !important; }
.icon-magic   { background: #fef3c7 !important; color: #f59e0b !important; }
.icon-service { background: #e0f2fe !important; color: #0284c7 !important; }

.about-value-card h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 12px !important;
}

.about-value-card p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* 4. ABOUT CTA BANNER */
.about-cta-section {
    padding: 70px 20px !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    text-align: center !important;
    color: #ffffff !important;
}

.about-cta-inner h2 {
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

.about-cta-inner p {
    font-size: 16.5px !important;
    color: #cbd5e1 !important;
    max-width: 600px !important;
    margin: 0 auto 28px auto !important;
}

.btn-mofay-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 18px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.2s ease !important;
}

.btn-mofay-cta:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.5) !important;
}

/* 5. CONTACT HERO BANNER (PURE CRISP WHITE) */
.contact-hero-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    padding: 85px 20px !important;
    text-align: center !important;
}

.contact-hero-title {
    color: #ffffff !important; /* PURE CRISP WHITE */
    font-size: 44px !important;
    font-weight: 900 !important;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.contact-hero-sub {
    color: #93c5fd !important;
    font-size: 17.5px !important;
    font-weight: 500 !important;
    max-width: 650px !important;
    margin: 0 auto !important;
}

/* MOBILE ADAPTATION FOR ABOUT & CONTACT */
@media (max-width: 768px) {
    .about-hero-title,
    .contact-hero-title {
        font-size: 32px !important;
    }

    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .about-values-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .about-section-title {
        font-size: 24px !important;
    }

    .about-cta-inner h2 {
        font-size: 24px !important;
    }
}


/* ==========================================================================
   HIGH-CONTRAST CONTACT CARD TAGS & BADGES (CRYSTAL CLEAR VISIBILITY)
   ========================================================================== */

.contact-info-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.contact-card:hover {
    transform: translateY(-3px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
}

.contact-card .card-text h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.contact-card .card-text p {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 0 8px 0 !important;
}

.contact-card .card-text p a {
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

.contact-card .card-text p a:hover {
    color: #22c55e !important;
}

/* HIGH-CONTRAST PILL BADGES */
.card-tag,
.contact-card .card-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #1e293b !important; /* Bold Dark Slate Text */
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    width: fit-content !important;
}

.card-tag.tag-whatsapp,
.contact-card .tag-whatsapp {
    background: #dcfce7 !important;
    color: #15803d !important; /* Dark Forest Green Text */
    border-color: #86efac !important;
}


/* ==========================================================================
   HOMEPAGE TRUST SECTION POLISH (ELIMINATE DUPLICATION)
   ========================================================================== */

.mofay-trust-badges-home {
    display: none !important;
}

.mofay-why-parents-love-section {
    padding: 65px 0 80px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

.mofay-why-parents-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin-top: 40px !important;
}

.why-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

.why-card:hover {
    transform: translateY(-5px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}

.why-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin: 0 auto 18px auto !important;
}

.why-icon-wrap.icon-purple { background: #ede9fe !important; color: #7c3aed !important; }
.why-icon-wrap.icon-pink   { background: #fee2e2 !important; color: #ef4444 !important; }
.why-icon-wrap.icon-blue   { background: #e0f2fe !important; color: #0284c7 !important; }
.why-icon-wrap.icon-teal   { background: #dcfce7 !important; color: #16a34a !important; }

.why-title {
    font-size: 17.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
}

.why-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 0 !important;
}

@media (max-width: 992px) {
    .mofay-why-parents-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 576px) {
    .mofay-why-parents-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .why-card {
        padding: 24px 18px !important;
    }
}


/* ==========================================================================
   LUXURY WISHLIST SIDE DRAWER STYLING (SOLID WHITE & TOP Z-INDEX)
   ========================================================================== */

#wishlist-side-drawer.mofay-side-drawer,
#wishlist-side-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -480px !important;
    width: 440px !important;
    max-width: 92vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 9999999 !important; /* Above all headers and navigation */
    box-shadow: -12px 0 50px rgba(0, 0, 0, 0.25) !important;
    transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#wishlist-side-drawer.open,
#wishlist-side-drawer.mofay-side-drawer-right.open {
    right: 0 !important;
}

#wishlist-side-drawer .drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 22px 24px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.drawer-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.drawer-title-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

#wishlist-side-drawer .drawer-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    font-family: inherit !important;
}

#wishlist-side-drawer .drawer-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#wishlist-side-drawer .drawer-close:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

#wishlist-side-drawer .drawer-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 30px 24px !important;
    background: #ffffff !important;
}

/* EMPTY WISHLIST STATE */
.mofay-empty-wishlist-card,
#wishlist-side-drawer .wishlist-empty,
#wishlist-side-drawer .no-products-added {
    text-align: center !important;
    padding: 40px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.empty-wishlist-icon-wrap {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    margin: 0 auto 20px auto !important;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2) !important;
    animation: heartFloat 2s ease-in-out infinite alternate !important;
}

@keyframes heartFloat {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.empty-wishlist-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
}

.empty-wishlist-desc {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    max-width: 300px !important;
    margin: 0 auto 26px auto !important;
}

.btn-wishlist-shop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 28px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.2s ease !important;
}

.btn-wishlist-shop:hover {
    background: #e02438 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(255, 71, 87, 0.45) !important;
}

/* YITH WISHLIST TABLE STYLING OVERRIDES */
#wishlist-side-drawer .wishlist_table {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
}

#wishlist-side-drawer .wishlist_table tr {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#wishlist-side-drawer .wishlist_table td {
    border: none !important;
    padding: 4px 0 !important;
}

#wishlist-side-drawer .wishlist_table td.product-thumbnail img {
    width: 60px !important;
    height: 75px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
}

#wishlist-side-drawer .wishlist_table td.product-name a {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

#wishlist-side-drawer .wishlist_table td.product-price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ff4757 !important;
}

#wishlist-side-drawer .wishlist_table td.product-add-to-cart a {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}


/* ==========================================================================
   PRODUCT CARD: FLOATING WISHLIST HEART & INLINE DISCOUNT BADGE
   ========================================================================== */

.product-card-thumb-wrap {
    position: relative !important;
}

/* 1. FLOATING WORKING WISHLIST HEART BUTTON (TOP-LEFT / TOP-RIGHT) */
.card-wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.card-wishlist-btn .heart-outline {
    color: #475569 !important;
    font-size: 15px !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

.card-wishlist-btn .heart-solid {
    color: #ef4444 !important;
    font-size: 16px !important;
    display: none !important;
    animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.card-wishlist-btn:hover {
    transform: scale(1.15) !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.card-wishlist-btn:hover .heart-outline {
    color: #ef4444 !important;
}

.card-wishlist-btn.active,
.card-wishlist-btn.in-wishlist {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

.card-wishlist-btn.active .heart-outline,
.card-wishlist-btn.in-wishlist .heart-outline {
    display: none !important;
}

.card-wishlist-btn.active .heart-solid,
.card-wishlist-btn.in-wishlist .heart-solid {
    display: block !important;
}

@keyframes heartPop {
    0% { transform: scale(0.6); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 2. PRICE ROW WITH BESIDE DISCOUNT PILL */
.product-card-price-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 4px 0 6px 0 !important;
}

.product-card-price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.product-card-price .price-currency {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.product-card-price .price-val {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1 !important;
}

.product-card-price .price-sale {
    color: #0f172a !important;
}

/* CROSSED-OUT REGULAR PRICE (CLEAN PRICE, VISIBLE BOLD 15PX NUMBER WITH RED STRIKE) */
.product-card-price del,
.product-card-price del.price-regular {
    color: #64748b !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: line-through !important;
    text-decoration-color: #ef4444 !important;
    text-decoration-thickness: 2px !important;
    -webkit-text-decoration-color: #ef4444 !important;
    margin-left: 4px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}

.product-card-price del .reg-currency,
.product-card-price del span.reg-currency {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

/* INLINE DISCOUNT PILL BESIDE PRICE */
.product-discount-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.25) !important;
}

/* Remove old top badge from photo */
.product-card-inner .product-sale-badge {
    display: none !important;
}


/* ==========================================================================
   WISHLIST HEART IN TOP-RIGHT CORNER & GUEST WISHLIST DRAWER ITEMS
   ========================================================================== */

/* 1. MOVE HEART ICON TO TOP-RIGHT CORNER */
.card-wishlist-btn {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

/* 2. GUEST WISHLIST DRAWER ITEM CARDS */
.mofay-wishlist-items-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.mofay-wishlist-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #f1f5f9 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

.mofay-wishlist-item:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

.mofay-wishlist-item-img {
    width: 65px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.mofay-wishlist-item-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.mofay-wishlist-item-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mofay-wishlist-item-title:hover {
    color: #ff4757 !important;
}

.mofay-wishlist-item-price {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.mofay-wishlist-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.mofay-wishlist-view-btn {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}

.mofay-wishlist-view-btn:hover {
    background: #ff4757 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.mofay-wishlist-remove-btn {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mofay-wishlist-remove-btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}


/* ==========================================================================
   SMOOTH ULTRA-MODERN STICKY HEADER
   ========================================================================== */

.site-header.mofay-header-main,
header#masthead.site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.mofay-navigation-bar {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 72px !important;
    z-index: 99998 !important;
}

@media (max-width: 768px) {
    .site-header.mofay-header-main,
    header#masthead.site-header {
        top: 0 !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06) !important;
    }
}


/* ==========================================================================
   SINGLE PRODUCT GALLERY: TRANSITIONS, ARROWS & MOBILE TOUCH SWIPING
   ========================================================================== */

.mofay-pdp-main-image-wrap {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #f8fafc !important;
    touch-action: pan-y !important;
    user-select: none !important;
}

#pdpMainImg,
.pdp-main-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    display: block !important;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* PREV / NEXT ARROWS */
.pdp-gallery-nav {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 15 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.pdp-gallery-nav.prev-nav { left: 12px !important; }
.pdp-gallery-nav.next-nav { right: 12px !important; }

.pdp-gallery-nav:hover {
    background: #0f172a !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* THUMBNAILS ROW */
.mofay-pdp-thumbs-row {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 12px 2px 4px 2px !important;
    margin: 0 !important;
}

.mofay-pdp-thumbs-row::-webkit-scrollbar {
    display: none !important;
}

.pdp-thumb-card {
    width: 72px !important;
    min-width: 72px !important;
    height: 90px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2.5px solid transparent !important;
    background: #f1f5f9 !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    flex-shrink: 0 !important;
}

.pdp-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.pdp-thumb-card.active {
    border-color: #ff4757 !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3) !important;
}

@media (max-width: 768px) {
    .pdp-thumb-card {
        width: 64px !important;
        min-width: 64px !important;
        height: 80px !important;
    }
    .pdp-gallery-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   LUXURY SHOPPING BASKET (DRAWER), CART PAGE & CHECKOUT PAGE UI/UX
   ========================================================================== */

/* 1. SHOPPING BASKET DRAWER */
#cart-side-drawer.mofay-side-drawer,
#cart-side-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -480px !important;
    width: 440px !important;
    max-width: 92vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 9999999 !important; /* Above all headers */
    box-shadow: -12px 0 50px rgba(0, 0, 0, 0.25) !important;
    transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
}

#cart-side-drawer.open,
#cart-side-drawer.mofay-side-drawer-right.open {
    right: 0 !important;
}

#cart-side-drawer .drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 22px 24px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.cart-badge-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fef3c7 !important;
    color: #d97706 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

#cart-side-drawer .drawer-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

#cart-side-drawer .drawer-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    background: #ffffff !important;
}

/* MINI-CART ITEMS LIST */
.woocommerce-mini-cart-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #f1f5f9 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 12px !important;
    position: relative !important;
}

.mofay-mini-cart-thumb img {
    width: 65px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

.mofay-mini-cart-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.mofay-mini-cart-price-row {
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.mofay-mini-cart-remove {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.mofay-mini-cart-remove:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

/* MINI-CART BOTTOM TOTAL & BUTTONS */
.mofay-mini-cart-bottom-bar {
    padding-top: 18px !important;
    border-top: 2px dashed #e2e8f0 !important;
    margin-top: auto !important;
}

.woocommerce-mini-cart__total.total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}

.woocommerce-mini-cart__buttons.buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-mini-cart__buttons a.button.checkout,
.woocommerce-mini-cart__buttons a.checkout {
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 20px !important;
    border-radius: 30px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 18px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.2s ease !important;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    border-radius: 30px !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* 2. CHECKOUT PAGE LUXURY STYLING */
.mofay-checkout-page-wrapper {
    padding: 40px 15px 70px 15px !important;
}

.mofay-checkout-grid {
    display: grid !important;
    grid-template-columns: 1.25fr 0.85fr !important;
    gap: 36px !important;
    align-items: flex-start !important;
    margin-top: 24px !important;
}

.checkout-billing-details-col {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.checkout-order-review-col {
    position: sticky !important;
    top: 90px !important;
}

.mofay-order-review-box {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04) !important;
}

.checkout-order-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 16px 0 !important;
}

/* CHECKOUT PLACE ORDER BUTTON */
#place_order {
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    padding: 16px 30px !important;
    border-radius: 30px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#place_order:hover {
    background: #e02438 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(255, 71, 87, 0.5) !important;
}

@media (max-width: 900px) {
    .mofay-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}


/* ==========================================================================
   BULLETPROOF CHECKOUT FORM INPUT BOXES & HIGH-CONTRAST PLACE ORDER CTA
   ========================================================================== */

/* 1. INPUT BOXES & DROPDOWNS - VISIBLE SLATE BORDER & SOFT BACKGROUND */
.woocommerce-checkout form.checkout input[type="text"],
.woocommerce-checkout form.checkout input[type="tel"],
.woocommerce-checkout form.checkout input[type="email"],
.woocommerce-checkout form.checkout input[type="password"],
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.checkout-billing-details-col input:not([type="checkbox"]):not([type="radio"]),
.checkout-billing-details-col select,
.checkout-billing-details-col textarea {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset !important;
    transition: all 0.2s ease !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
    padding-top: 10px !important;
    height: 48px !important;
}

.woocommerce-checkout form.checkout input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-checkout form.checkout select:focus,
.woocommerce-checkout form.checkout textarea:focus,
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.checkout-billing-details-col input:not([type="checkbox"]):not([type="radio"]):focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ff4757 !important;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15) !important;
}

/* CHECKOUT CHECKBOXES (SHIP TO DIFFERENT ADDRESS, TERMS, CREATE ACCOUNT) */
.woocommerce-checkout input[type="checkbox"],
.checkout-billing-details-col input[type="checkbox"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="checkbox"],
#ship-to-different-address-checkbox {
    display: inline-block !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    border-radius: 4px !important;
    border: 2px solid #94a3b8 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    accent-color: #ff4757 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

#ship-to-different-address {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border-bottom: none !important;
    margin: 20px 0 12px 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#ship-to-different-address label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .form-row.checkbox label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* 2. LABELS & HEADINGS */
.woocommerce-checkout .form-row label,
.checkout-billing-details-col label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.checkout-billing-details-col h3 {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
}

/* 3. ORDER REVIEW TABLE & DELIVERY CHARGE ROW */
.woocommerce-checkout-review-order-table tr.fee th,
.woocommerce-checkout-review-order-table tr.fee td {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 0 !important;
    border-top: 1px dashed #e2e8f0 !important;
}

.woocommerce-checkout-review-order-table tr.fee td {
    text-align: right !important;
    color: #ff4757 !important;
}

.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    padding: 18px 0 !important;
    border-top: 2px solid #0f172a !important;
}

.woocommerce-checkout-review-order-table tr.order-total td {
    color: #ff4757 !important;
    text-align: right !important;
}

/* 4. PLACE ORDER BUTTON (VIVID RED WITH CRISP WHITE TEXT) */
#place_order,
button#place_order,
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
    display: block !important;
    width: 100% !important;
    background: #ff4757 !important;
    background-color: #ff4757 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 16px 28px !important;
    border-radius: 30px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 22px rgba(255, 71, 87, 0.45) !important;
    transition: all 0.25s ease !important;
    margin-top: 20px !important;
    text-shadow: none !important;
}

#place_order:hover,
button#place_order:hover {
    background: #e02438 !important;
    background-color: #e02438 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(255, 71, 87, 0.55) !important;
}


/* ==========================================================================
   DELIVERY FEE HIGHLIGHT & RATES MENTION
   ========================================================================== */

.mofay-delivery-fee-row th {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 14px 0 !important;
}

.mofay-fee-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.mofay-fee-info-tag {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #6366f1 !important;
    background: #eef2ff !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px !important;
}

.mofay-fee-amount {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}


/* ==========================================================================
   LUXURY CART PAGE & SIZE PILL STYLING
   ========================================================================== */

.mofay-cart-page-wrapper {
    padding: 30px 15px 70px 15px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.mofay-cart-size-pill {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
}

/* CART PAGE PROCEED TO CHECKOUT BUTTON */
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.button.alt,
a.checkout-button {
    display: block !important;
    width: 100% !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 28px !important;
    border-radius: 30px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 6px 22px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.25s ease !important;
    margin-top: 16px !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
a.checkout-button:hover {
    background: #e02438 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(255, 71, 87, 0.55) !important;
}

/* CART TABLE POLISH */
.mofay-cart-table {
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.mofay-cart-table th {
    background: #f8fafc !important;
    padding: 16px 18px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
}

.mofay-cart-table td {
    padding: 18px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}


/* ==========================================================================
   CART PAGE THUMBNAIL & TABLE POLISH
   ========================================================================== */

.mofay-cart-table td.product-thumbnail {
    width: 90px !important;
    min-width: 90px !important;
    padding: 14px 10px !important;
}

.mofay-cart-table td.product-thumbnail img {
    width: 75px !important;
    height: 95px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    display: block !important;
    background: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.cart-product-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: block !important;
}

.cart-product-title:hover {
    color: #ff4757 !important;
}

.mofay-cart-table td.product-price,
.mofay-cart-table td.product-subtotal {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.mofay-cart-table td.product-quantity input.qty {
    width: 60px !important;
    height: 40px !important;
    text-align: center !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}


/* ==========================================================================
   RICH SIZE CARDS & SINGLE-LINE PROCEED TO CHECKOUT BUTTON
   ========================================================================== */

/* 1. RICH SIZE SELECTOR CARDS */
.pdp-rich-swatches-grid {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
}

.pdp-rich-size-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.pdp-rich-size-card:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    transform: translateY(-2px) !important;
}

.pdp-rich-size-card.active {
    border-color: #ff4757 !important;
    background: #fff5f5 !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.2) !important;
}

.rich-swatch-short {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.pdp-rich-size-card.active .rich-swatch-short {
    background: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
}

.rich-swatch-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.rich-swatch-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.rich-swatch-age {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.pdp-active-size-badge {
    color: #ff4757 !important;
    font-weight: 800 !important;
}

/* 2. PROCEED TO CHECKOUT BUTTON - FULL WIDTH SINGLE-LINE RED PILL */
.wc-proceed-to-checkout,
.cart-collaterals .wc-proceed-to-checkout {
    padding: 0 !important;
    margin-top: 18px !important;
    width: 100% !important;
}

.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.button.alt,
a.checkout-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ff4757 !important;
    background-color: #ff4757 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 16px 28px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 22px rgba(255, 71, 87, 0.4) !important;
    transition: all 0.25s ease !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
a.checkout-button:hover {
    background: #e02438 !important;
    background-color: #e02438 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(255, 71, 87, 0.55) !important;
}


/* ==========================================================================
   CLEAN SPACED SIZE PILLS (ZERO OVERLAP & FULL RESPONSIVE FLEX)
   ========================================================================== */

.mofay-size-picker-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 12px 0 16px 0 !important;
    width: 100% !important;
}

.mofay-size-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    min-height: 44px !important;
    width: auto !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.mofay-size-pill-btn:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
    transform: translateY(-2px) !important;
}

.mofay-size-pill-btn.active {
    border-color: #ff4757 !important;
    background: #fff5f5 !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.18) !important;
}

.size-pill-letter {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mofay-size-pill-btn.active .size-pill-letter {
    background: #ff4757 !important;
    color: #ffffff !important;
}

.size-pill-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.size-pill-age {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.mofay-size-pill-btn.active .size-pill-title {
    color: #0f172a !important;
}

.mofay-size-pill-btn.active .size-pill-age {
    color: #e02438 !important;
}


/* ==========================================================================
   PERFECT ROUND SIZE SWATCHES (S, M, L)
   ========================================================================== */

.pdp-round-swatches-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 12px 0 16px 0 !important;
    width: 100% !important;
}

.pdp-round-swatch-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.pdp-round-swatch-btn:hover {
    border-color: #ff4757 !important;
    color: #ff4757 !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.pdp-round-swatch-btn.active {
    background: #ff4757 !important;
    background-color: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.4) !important;
    transform: scale(1.08) !important;
}