/**
 * Perfecto Sidebar System (Desktop Fixed + Mobile 85% Logic)
 * * 1. Desktop: Sidebar is 420px. Overlay is visible (dark background).
 * 2. Mobile: Sidebar is 85% width. Overlay covers 100% (visible in the 15% gap).
 * 3. Auth Panel: Hidden on Desktop.
 */

/* ================================================================
   1. GLOBAL SIDEBAR OVERLAY (The Dark Background)
   ================================================================ */
/* Base State (Hidden) */
.pf-sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0) !important; /* Transparent start */
    z-index: 999998 !important; /* Behind sidebar */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, background-color 0.3s ease !important;
    display: block !important; /* Ensure it exists in DOM */
}

/* Active State (Visible) */
.pf-sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.6) !important; /* Darken */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Enable clicks */
}

/* ================================================================
   2. AUTH OVERLAY (Mobile Only)
   ================================================================ */
.pf-auth-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0) !important;
    z-index: 999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.pf-auth-overlay.active {
    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ================================================================
   3. SIDEBAR BASE STYLES (Desktop Default)
   ================================================================ */
.pf-sidebar,
.pf-cart-sidebar,
.pf-wishlist-sidebar,
.pf-menu-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    background: #ffffff !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    
    /* DESKTOP: Fixed Width */
    width: 100% !important;
    max-width: 420px !important;
    
    /* Animation */
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform !important;
    
    /* Performance */
    contain: layout style paint !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Active State: Slide In */
.pf-sidebar.active,
.pf-cart-sidebar.active,
.pf-wishlist-sidebar.active,
.pf-menu-sidebar.active {
    transform: translate3d(0, 0, 0) !important;
}

/* ================================================================
   4. MOBILE OVERRIDE (Force 85% Width)
   ================================================================ */
@media screen and (max-width: 767px) {
    
    .pf-sidebar,
    .pf-cart-sidebar,
    .pf-wishlist-sidebar,
    .pf-menu-sidebar {
        /* FORCE 85% WIDTH */
        width: 85% !important;
        max-width: 85% !important;
        min-width: auto !important;
        
        /* Ensure it sticks to the RIGHT side */
        right: 0 !important;
        left: auto !important;
        
        /* Optional: Add curve to the left edge */
        border-top-left-radius: 16px !important;
        border-bottom-left-radius: 16px !important;
    }

    /* Padding adjustments for mobile */
    .pf-sidebar-header,
    .pf-cart-items-wrapper,
    .pf-sidebar-footer,
    .pf-wishlist-items {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}




/* ================================================================
   🔥 MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
    .pf-sidebar,
    .pf-cart-sidebar,
    .pf-wishlist-sidebar {
        /* ✅ Even faster on mobile */
        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        
        /* ✅ Lighter shadow for mobile performance */
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    .pf-sidebar-overlay {
        /* ✅ Instant fade on mobile */
        transition: opacity 0.2s ease, background-color 0.2s ease !important;
    }
}


/* ===============================
   GLOBAL OVERLAY
================================ */
.pf-sidebar-overlay,
.pf-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
  
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-sidebar-overlay.active,
.pf-auth-overlay.active {
    background: rgba(0, 0, 0, 0.5);
  
    opacity: 1;
    visibility: visible;
}


/* ========================================
   SIDEBAR - ULTRA SMOOTH PROFESSIONAL
======================================== */

.pf-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* 🚀 ULTIMATE PERFORMANCE */
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    
    /* Hardware acceleration */
    -webkit-transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Smooth rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pf-sidebar.active {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Overlay - Ultra Smooth Fade */
.pf-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 999998;
    pointer-events: none;
    
    /* 🚀 SMOOTH FADE */
    transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: background-color;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.pf-sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
   
}




/* ========================================
   CART ITEMS - SCOPED TO SIDEBAR ONLY
======================================== */

/* Cart Items Wrapper - SIDEBAR ONLY */
.pf-cart-sidebar .pf-cart-items-wrapper {
    padding: 16px 20px;
}

.pf-cart-sidebar .pf-cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cart Item - SIDEBAR ONLY */
.pf-cart-sidebar .pf-cart-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.pf-cart-sidebar .pf-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Product Image - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-image {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

.pf-cart-sidebar .pf-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-cart-sidebar .pf-item-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hide badges on cart images */
.pf-cart-sidebar .pf-item-image .pf-sale-badge,
.pf-cart-sidebar .pf-item-image .sale-badge,
.pf-cart-sidebar .pf-item-image .onsale,
.pf-cart-sidebar .pf-item-image .badge,
.pf-cart-sidebar .pf-item-image .product-badge {
    display: none !important;
}

/* Product Details - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Product Name - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 6px 0;
    line-height: 1.4;
    color: #111827;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-cart-sidebar .pf-item-name a {
    color: #111827;
    text-decoration: none;
}

.pf-cart-sidebar .pf-item-name a:hover {
    color: #3b82f6;
}

/* Variation Attributes - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px 0;
}

.pf-cart-sidebar .pf-attr {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
}

.pf-cart-sidebar .pf-attr strong {
    color: #374151;
    font-weight: 500;
}

/* Price Row - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
}

.pf-cart-sidebar .pf-price-sale {
    font-size: 15px;
    font-weight: 600;
    color: #ef4444;
}

.pf-cart-sidebar .pf-price-regular {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}

.pf-cart-sidebar .pf-item-price-row .pf-price-regular:only-child {
    color: #111827;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

/* Actions Row - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: auto;
}

/* Quantity Selector - SIDEBAR ONLY */
.pf-cart-sidebar .pf-quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.pf-cart-sidebar .pf-cart-qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.pf-cart-sidebar .pf-cart-qty-btn:hover {
    background: #f9fafb;
    color: #111827;
}

.pf-cart-sidebar .pf-cart-qty-btn:active {
    background: #f3f4f6;
}

.pf-cart-sidebar .pf-cart-qty-btn svg {
    width: 14px;
    height: 14px;
}

.pf-cart-sidebar .pf-cart-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    background: #ffffff;
    padding: 0;
}

.pf-cart-sidebar .pf-cart-qty-input:focus {
    outline: none;
}

/* Remove Button - SIDEBAR ONLY */
.pf-cart-sidebar .pf-item-actions-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-cart-sidebar .pf-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    padding: 0;
}

.pf-cart-sidebar .pf-item-remove:hover {
    background: #fee2e2;
    color: #ef4444;
}

.pf-cart-sidebar .pf-item-remove svg {
    width: 16px;
    height: 16px;
}

/* Savings Badge - SIDEBAR ONLY */
.pf-cart-sidebar .pf-savings-badge {
    display: none;
}

/* Mobile Adjustments - SIDEBAR ONLY */
@media (max-width: 640px) {
    .pf-cart-sidebar .pf-cart-items {
        gap: 16px;
    }
    
    .pf-cart-sidebar .pf-cart-item {
        gap: 12px;
        padding-bottom: 16px;
    }
    
    .pf-cart-sidebar .pf-item-image {
        width: 80px;
        height: 80px;
        border-radius: 10px;
    }
    
    .pf-cart-sidebar .pf-item-name {
        font-size: 13px;
    }
    
    .pf-cart-sidebar .pf-price-sale {
        font-size: 14px;
    }
    
    .pf-cart-sidebar .pf-cart-qty-btn {
        width: 30px;
        height: 30px;
    }
    
    .pf-cart-sidebar .pf-cart-qty-input {
        width: 36px;
        height: 30px;
        font-size: 13px;
    }
}

/* ===============================
   EMPTY STATES
================================ */
.pf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.pf-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    margin-bottom: 24px;
}

.pf-empty-icon svg {
    width: 40px;
    height: 40px;
    stroke: #999;
}

.pf-empty-state h4 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.pf-empty-state p {
    font-size: 14px;
    color: #666;
    margin: 0 0 24px;
}


/* ===============================
   CART TOTALS
================================ */
.pf-cart-totals {
    margin-bottom: 20px;
}

.pf-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
}

.pf-total-row strong {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.pf-shipping-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 13px;
    color: #2563eb;
}

.pf-shipping-notice svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}




/* ===============================
   BUTTONS (Envato Standard)
================================ */
.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pf-btn-primary {
    background: #000;
    color: #fff;
}

.pf-btn-primary:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pf-btn-primary:active {
    transform: translateY(0);
}

.pf-btn-secondary {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
}

.pf-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.12);
}

.pf-btn-block {
    width: 100%;
}

.pf-btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}


/* ===============================
   MENU SIDEBAR
================================ */
.pf-menu-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pf-user-avatar {
    flex-shrink: 0;
}

.pf-user-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.pf-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-user-info strong {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.pf-user-info span {
    font-size: 13px;
    color: #666;
}

.pf-menu-auth {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Navigation Menu */
.pf-menu-nav {
    padding: 0;
}

.pf-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-nav-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pf-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pf-nav-list a:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #000;
    padding-left: 32px;
}

.pf-nav-list .current-menu-item > a,
.pf-nav-list .current_page_item > a {
    color: #000;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
}

/* Submenu */
.pf-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.02);
}

.pf-nav-list .sub-menu a {
    padding-left: 48px;
    font-size: 14px;
}


/* Quick Links */
.pf-menu-links {
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pf-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pf-menu-link svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.pf-menu-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #000;
}

.pf-menu-link.pf-logout {
    color: #ef4444;
}

.pf-menu-link.pf-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}


/* ===============================
   LOADING STATE
================================ */
.pf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.pf-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    border-radius: 50%;
    animation: pfSpin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes pfSpin {
    to { transform: rotate(360deg); }
}

.pf-loading p {
    font-size: 14px;
    color: #666;
    margin: 0;
}




/* ================================================================
   PERFECTO AUTH PANEL - COMPLETE CSS (ALL FIXES INCLUDED)
   
   ✅ Desktop: Centered modal popup
   ✅ Mobile: Bottom slider
   ✅ Keyboard fix
   ✅ Social buttons 50-50
   ✅ Social buttons at bottom
   
   REPLACE THE OLD AUTH PANEL SECTION IN YOUR SIDEBARS.CSS WITH THIS
================================================================ */

/* ====================================
   1. AUTH OVERLAY
==================================== */
.pf-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-auth-overlay.active {
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ====================================
   2. AUTH PANEL - MOBILE FIRST (Bottom Slider)
==================================== */
.pf-auth-panel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 90vh;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}

.pf-auth-panel.active {
    transform: translateY(0);
}

/* Keyboard open state on mobile */
.pf-auth-panel.keyboard-open {
    max-height: 50vh;
}

/* ====================================
   3. DESKTOP OVERRIDE - CENTERED MODAL POPUP
==================================== */
@media (min-width: 769px) {
    .pf-auth-panel {
        top: 50%;
        left: 50%;
        bottom: auto;
        width: 480px;
        max-width: 90%;
        max-height: 85vh;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .pf-auth-panel.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    
    /* No keyboard fix needed on desktop */
    .pf-auth-panel.keyboard-open {
        max-height: 85vh;
    }
}

/* ====================================
   4. MOBILE DRAG HANDLE (Hidden on Desktop)
==================================== */
.pf-auth-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
    flex-shrink: 0;
}

.pf-auth-handle span {
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

@media (min-width: 769px) {
    .pf-auth-handle {
        display: none;
    }
}

/* ====================================
   5. HEADER (Close Button)
==================================== */
.pf-auth-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 12px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .pf-auth-header {
        padding: 16px 24px 0;
    }
}

.pf-auth-close {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-auth-close:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
}

.pf-auth-close svg {
    width: 16px;
    height: 16px;
    color: #666;
}

/* ====================================
   6. CONTENT AREA (Scrollable)
==================================== */
.pf-auth-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px 32px;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

@media (min-width: 769px) {
    .pf-auth-content {
        padding: 0 32px 32px;
    }
    
    .pf-auth-content::-webkit-scrollbar {
        width: 6px;
    }
    
    .pf-auth-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .pf-auth-content::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }
}

/* ====================================
   7. TAB BUTTONS (Login / Register)
==================================== */
.pf-auth-tabs {
    position: relative;
    display: flex;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
}

.pf-auth-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.3s;
    position: relative;
    z-index: 2;
}

.pf-auth-tab.active {
    color: #000;
}

/* Tab Indicator (Sliding Background) */
.pf-tab-indicator {
    position: absolute;
    bottom: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* ====================================
   8. WELCOME TEXT
==================================== */
.pf-auth-welcome {
    order: 1;
    text-align: center;
    margin-bottom: 24px;
}

.pf-auth-welcome h2 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.pf-auth-welcome p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

@media (max-width: 768px) {
    .pf-auth-welcome h2 {
        font-size: 20px;
    }
    
    .pf-auth-welcome p {
        font-size: 13px;
    }
}

/* ====================================
   9. FORM WRAPPER (Tab Content)
==================================== */
.pf-auth-form-wrapper {
    display: none;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.pf-auth-form-wrapper.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====================================
   10. FORM STYLES
==================================== */
.pf-auth-form {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.pf-form-group label .required {
    color: #ef4444;
}

.pf-form-control {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    color: #333;
    transition: all 0.2s;
    box-sizing: border-box;
}

.pf-form-control:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .pf-form-control {
        min-height: 48px;
        padding: 12px 16px;
    }
}

/* ====================================
   11. CHECKBOX & FORGOT LINK ROW
==================================== */
.pf-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
}

.pf-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.pf-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.pf-forgot-link {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pf-forgot-link:hover {
    opacity: 0.7;
}

/* ====================================
   12. SUBMIT BUTTON
==================================== */
.pf-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.pf-btn-primary {
    background: #000;
    color: #fff;
}

.pf-btn-primary:hover {
    background: #222;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pf-btn-primary:active {
    transform: translateY(0);
}

.pf-btn-block {
    width: 100%;
}

.pf-btn-lg {
    padding: 16px 24px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .pf-btn-lg {
        min-height: 48px;
        padding: 14px 24px;
    }
}

/* ====================================
   13. SOCIAL LOGIN (50-50 LAYOUT AT BOTTOM)
==================================== */
.pf-social-login-wrapper {
    order: 3;
    margin-top: 20px;
}

.pf-social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.pf-social-btn:hover {
    background: #f8f8f8;
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pf-social-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 50-50 Layout when both Google and Facebook are present */
.pf-social-login:has(.pf-google-login):has(.pf-facebook-login) {
    flex-direction: row;
    gap: 10px;
}

.pf-social-login:has(.pf-google-login):has(.pf-facebook-login) .pf-social-btn {
    flex: 1;
    min-width: 0;
}

/* Hide text on very small screens, show icons only */
@media (max-width: 400px) {
    .pf-social-login:has(.pf-google-login):has(.pf-facebook-login) .pf-social-btn {
        padding: 12px 8px;
    }
    
    .pf-social-login:has(.pf-google-login):has(.pf-facebook-login) .pf-social-btn span {
        display: none;
    }
}

/* Show text on larger screens */
@media (min-width: 401px) {
    .pf-social-login:has(.pf-google-login):has(.pf-facebook-login) .pf-social-btn span {
        display: inline;
    }
}

/* Desktop: full text */
@media (min-width: 769px) {
    .pf-social-login:has(.pf-google-login):has(.pf-facebook-login) .pf-social-btn {
        font-size: 14px;
        padding: 14px 16px;
    }
}

/* ====================================
   14. DIVIDER
==================================== */
.pf-login-divider {
    position: relative;
    text-align: center;
    margin: 25px 0 32px; /* More spacing */
    display: flex;
    align-items: center;
    gap: 16px;
}

.pf-login-divider::before,
.pf-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.pf-login-divider span {
    flex-shrink: 0;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* ====================================
   15. PRIVACY TEXT & INFO
==================================== */
.pf-privacy-text,
.pf-info-text {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-top: 8px;
}

.pf-privacy-text a {
    color: #000;
    text-decoration: underline;
}

/* ====================================
   16. BODY SCROLL LOCK
==================================== */
body.auth-panel-open {
    overflow: hidden !important;
}

/* Reduce padding when keyboard is open */
body.keyboard-open .pf-auth-content {
    padding-bottom: 16px;
}

/* ====================================
   17. ACCESSIBILITY
==================================== */
.pf-auth-close:focus,
.pf-auth-tab:focus,
.pf-form-control:focus,
.pf-btn:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* ========================================
   PREMIUM CART SIDEBAR - ENVATO STANDARD
======================================== */

/* Cart Sidebar Base */
.pf-cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.pf-cart-sidebar.active {
    transform: translate3d(0, 0, 0);
}

/* Header */
.pf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
}

.pf-sidebar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #111827;
}

.pf-cart-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.pf-sidebar-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pf-sidebar-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.pf-sidebar-close svg {
    width: 20px;
    height: 20px;
}

/* Content */
.pf-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.pf-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.pf-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.pf-sidebar-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.pf-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Free Shipping Progress Bar */
.pf-shipping-progress {
    padding: 20px 24px;
    background: #f0f9ff;
    border-bottom: 1px solid #e0f2fe;
}

.pf-progress-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #e0f2fe;
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 12px;
}

.pf-progress-fill {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-progress-icon {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) scaleX(-1); /* 🔥 FLIP IT! */
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    animation: truck-bounce 2s ease-in-out infinite;
}

@keyframes truck-bounce {
    0%, 100% { 
        transform: translateY(-50%) translateX(0) scaleX(-1); 
    }
    50% { 
        transform: translateY(-50%) translateX(4px) scaleX(-1); 
    }
}

.pf-progress-text {
    margin: 0;
    font-size: 14px;
    color: #0c4a6e;
    text-align: center;
}

.pf-progress-text strong {
    color: #0369a1;
    font-weight: 600;
}

/* Shipping Unlocked */
.pf-shipping-unlocked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: #f0fdf4;
    border-bottom: 1px solid #dcfce7;
}

.pf-unlock-icon {
    font-size: 20px;
}

.pf-shipping-unlocked p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

/* Cart Items */
.pf-cart-items-wrapper {
    padding: 20px 24px;
}

.pf-cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-cart-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.pf-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Product Image */
.pf-item-image {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f9fafb;
}

.pf-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-item-image a {
    display: block;
}

.pf-sale-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 4px 8px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Product Details */
.pf-item-details {
    flex: 1;
    min-width: 0;
}

.pf-item-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.pf-item-name a {
    color: #111827;
    text-decoration: none;
}

.pf-item-name a:hover {
    color: #3b82f6;
}

/* Variation Attributes */
.pf-item-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.pf-attr {
    font-size: 12px;
    color: #6b7280;
}

.pf-attr strong {
    color: #374151;
}

/* Price Row */
.pf-item-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pf-price-sale {
    font-size: 16px;
    font-weight: 600;
    color: #ef4444;
}

.pf-price-regular {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

.pf-item-price-row .pf-price-regular:only-child {
    color: #111827;
    text-decoration: none;
    font-weight: 600;
}

/* Item Actions (Quantity + Remove) */
.pf-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* ========================================
   CART SIDEBAR ONLY - SCOPED STYLES
======================================== */

/* Quantity Selector - CART SIDEBAR ONLY */
.pf-cart-sidebar .pf-quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.pf-cart-sidebar .pf-cart-qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.pf-cart-sidebar .pf-cart-qty-btn:hover {
    background: #f9fafb;
    color: #111827;
}

.pf-cart-sidebar .pf-cart-qty-btn:active {
    background: #f3f4f6;
}

.pf-cart-sidebar .pf-cart-qty-btn svg {
    width: 14px;
    height: 14px;
}

.pf-cart-sidebar .pf-qty-input,
.pf-cart-sidebar .pf-cart-qty-input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    background: #ffffff;
    padding: 0;
}

.pf-cart-sidebar .pf-qty-input:focus,
.pf-cart-sidebar .pf-cart-qty-input:focus {
    outline: none;
}

/* Remove Button */
.pf-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pf-item-remove:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #ef4444;
}

.pf-item-remove svg {
    width: 16px;
    height: 16px;
}

/* Savings Badge */
.pf-savings-badge {
    padding: 6px 10px;
    background: #88E788;
    border: 1px solid #114F11;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
    display: inline-block;
}

.pf-savings-badge strong {
    font-weight: 600;
    color: #78350f;
}

/* Empty State */
.pf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.pf-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 50%;
    margin-bottom: 20px;
}

.pf-empty-icon svg {
    width: 40px;
    height: 40px;
    color: #9ca3af;
}

.pf-empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.pf-empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

/* Loading State */
.pf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.pf-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.pf-loading p {
    margin-top: 16px;
    color: #6b7280;
    font-size: 14px;
}

/* Footer */
.pf-sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
}

/* Cart Totals */
.pf-cart-totals {
    margin-bottom: 20px;
}

.pf-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 8px;
}

.pf-total-row span {
    color: #6b7280;
}

.pf-total-row strong {
    color: #111827;
    font-size: 18px;
    font-weight: 600;
}

.pf-total-savings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-top: 12px;
}

.pf-total-savings span {
    font-size: 14px;
    color: #000000;
}

.pf-savings-amount {
    font-size: 16px;
    font-weight: 700;
    color: #78350f;
}



.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.pf-btn svg {
    width: 18px;
    height: 18px;
}

.pf-btn-block {
    width: 100%;
}

.pf-btn-primary {
    background: #111827;
    color: #ffffff;
}

.pf-btn-primary:hover {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pf-btn-secondary {
    background: #ffffff;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.pf-btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .pf-cart-sidebar {
        max-width: 100%;
    }
    
    .pf-sidebar-header,
    .pf-cart-items-wrapper,
    .pf-sidebar-footer {
        padding: 16px 20px;
    }
    
    .pf-cart-item {
        gap: 12px;
    }
    
    .pf-item-image {
        width: 80px;
        height: 80px;
    }
    
    .pf-shipping-progress {
        padding: 16px 20px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .pf-cart-sidebar {
        max-width: 480px;
    }
}



/* ===============================
   MOBILE ADJUSTMENTS (10% Gap Fix)
=============================== */
@media (max-width: 640px) {
    
    /* 1. Force Sidebar to be 90% width (Leaves 10% gap on left) */
    .pf-sidebar,
    .pf-cart-sidebar {
        max-width: 90% !important; 
        width: 90% !important;
        
        /* Optional: Add rounded corners on the left for a modern "Sheet" look */
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }

    /* 2. Adjust internal padding so content fits the slightly smaller space */
    .pf-sidebar-header,
    .pf-cart-items-wrapper,
    .pf-sidebar-footer,
    .pf-wishlist-items {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 3. Ensure images don't get squished */
    .pf-item-image, 
    .pf-wishlist-image {
        width: 70px;
        height: 70px;
    }
}


/* ===============================
   PREMIUM WISHLIST - APP STYLE (FIXED)
=============================== */

/* 1. CONTAINER & GRID */
.pf-wishlist-grid {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%; /* ✅ FIX */
    max-width: 100%; /* ✅ FIX */
}

/* 2. THE CARD (Magic Layout) */
.pf-w-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.03);
    
    width: 100%; /* ✅ FIX */
    max-width: 100%; /* ✅ FIX */
    box-sizing: border-box; /* ✅ FIX */
}

.pf-w-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* 3. IMAGE (Left) */
.pf-w-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f3f3;
}

.pf-w-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. INFO (Middle - Expands) */
.pf-w-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-w-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-w-price {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.pf-w-price del {
    color: #999;
    font-size: 11px;
    margin-right: 4px;
}

.pf-w-price ins {
    text-decoration: none;
    color: #000;
}

/* 5. ACTION (Right - Fixed) */
.pf-w-action {
    flex-shrink: 0;
}

/* The "SELECT" Style Pill Button */
.pf-w-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 80px !important;
    padding: 0 20px !important;
    height: 32px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important; /* ✅ FIX */
}

.pf-w-btn:hover {
    background: #333 !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

.pf-w-sold {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
}

/* 6. REMOVE BUTTON */
.pf-w-remove {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s;
    opacity: 0;
}

.pf-w-card:hover .pf-w-remove {
    opacity: 1;
}

.pf-w-remove:hover {
    background: #ff4d4d;
    color: #fff;
    border-color: #ff4d4d;
}

/* Mobile: Always show remove button */
@media (max-width: 640px) {
    .pf-w-remove {
        opacity: 1;
        top: -8px;
        left: -8px;
    }
}

/* 7. FOOTER (Glass) */
.pf-glass-footer {
    padding: 20px;
    background: rgba(255,255,255,0.9);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.pf-footer-row {
    display: flex;
    gap: 12px;
}

.pf-btn-black {
    flex: 2;
    background: #000;
    color: #fff;
    border: none;
    height: 48px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.pf-btn-black:hover {
    background: #222;
}

.pf-btn-clean {
    flex: 1;
    background: transparent;
    border: 1px solid #eee;
    color: #666;
    height: 48px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.pf-btn-clean:hover {
    background: #f9f9f9;
    color: #000;
    border-color: #000;
}

/* Empty State */
.pf-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.pf-empty-text {
    color: #999;
    font-size: 16px;
    margin-bottom: 16px;
}

.pf-btn-underline {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}



/* ====================================================================
   PRO COMMERCE CART UI
   ==================================================================== */

.pf-pro-ui {
    background: #ffffff !important;
    display: flex;
    flex-direction: column;
}

/* 1. Header & Badges */
.pf-pro-ui .pf-sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.pf-count-pill {
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    vertical-align: middle;
    margin-left: 8px;
}

/* 2. Pro Shipping Bar */
.pf-pro-shipping-wrapper {
    padding: 20px 24px 0;
}
.pf-shipping-msg { font-size: 13px; color: #666; margin-bottom: 8px; }
.pf-shipping-msg strong { color: #000; }
.pf-shipping-msg.success { color: #059669; }
.pf-shipping-bar { height: 4px; background: #eee; border-radius: 4px; overflow: hidden; }
.pf-shipping-fill { height: 100%; background: #000; transition: width 0.5s ease; }

/* 3. Delivery Notice Widget */
.pf-delivery-notice {
    margin: 16px 24px;
    background: #F9FAFB;
    border: 1px dashed #E5E7EB;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pf-notice-icon { font-size: 18px; }
.pf-notice-text { display: flex; flex-direction: column; font-size: 12px; color: #6b7280; }
.pf-notice-text strong { color: #111827; font-size: 13px; }

/* 4. Upgraded Product Cards */
.pf-cart-items-wrapper { padding: 0 24px 20px; }
.pf-pro-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pf-item-img {
    width: 80px; height: 100px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.pf-item-img img { width: 100%; height: 100%; object-fit: cover; }

.pf-item-info { flex: 1; display: flex; flex-direction: column; }
.pf-item-header { display: flex; justify-content: space-between; align-items: flex-start; }
.pf-item-title a { font-size: 14px; font-weight: 600; color: #111; text-decoration: none; }

.pf-item-remove { background: transparent; border: none; color: #999; cursor: pointer; padding: 4px; }
.pf-item-remove:hover { color: #ef4444; }

.pf-item-meta { font-size: 12px; color: #888; margin-top: 4px; }

.pf-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.pf-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}
.pf-qty-control button { width: 28px; height: 28px; background: transparent; border: none; cursor: pointer; font-size: 16px;}
.pf-qty-input { width: 30px; border: none; text-align: center; font-size: 13px; pointer-events: none;}

.pf-item-price { font-weight: 600; color: #111; font-size: 14px; }

/* 5. Advanced Footer */
.pf-pro-footer {
    background: #fff;
    border-top: 1px solid #f0f0f0;
    padding: 20px 24px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}

.pf-shipping-address {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin-bottom: 16px;
    background: #f8f8f8;
    padding: 8px 12px;
    border-radius: 6px;
}
.pf-ship-change { margin-left: auto; font-weight: 600; color: #000; text-decoration: underline; }

.pf-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 20px;
}
.pf-total-value { font-weight: 700; color: #000; }

.pf-footer-actions { display: flex; gap: 10px; }
.pf-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
}
.pf-btn-outline { border: 1px solid #ddd; color: #111; }
.pf-btn-outline:hover { background: #f5f5f5; }

.pf-btn-black { background: #000; color: #fff; justify-content: space-between; padding: 14px 20px; }
.pf-btn-black:hover { background: #222; }

.pf-trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #999;
    margin-top: 16px;
}