/* Force Desktop Layout on Mobile - Make mobile look exactly like desktop */

@media screen and (max-width: 768px) {
    /* Force vertical layout for quantity options on mobile */
    .wcc-quantity-option,
    .wcc-customization-container .wcc-quantity-option,
    .wcc-quantity-price-field .wcc-quantity-option,
    body .wcc-quantity-option,
    html body .wcc-quantity-option {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 15px !important;
        gap: 10px !important;
    }
    
    /* Top container - Image, Title, Price */
    .wcc-quantity-option > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        padding: 10px 0 !important;
    }
    
    /* Text container - More space for title and price */
    .wcc-quantity-option > div:first-child > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        flex: 1 !important;
        max-width: 60% !important;
        padding: 0 10px !important;
    }
    
    /* Product image */
    .wcc-option-image {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .wcc-option-image img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }
    
    /* Title - Centered */
    .wcc-quantity-option h4 {
        font-size: 18px !important;
        margin: 0 0 5px 0 !important;
        text-align: center !important;
        color: #333 !important;
        font-weight: 600 !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        line-height: 1.3 !important;
    }
    
    /* Ensure h4 container doesn't clip text */
    .wcc-quantity-option h4:before,
    .wcc-quantity-option h4:after {
        display: none !important;
    }
    
    /* Price display - Centered */
    .wcc-option-price,
    .wcc-quantity-option .wcc-option-price {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #fdb917 !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Bottom - Quantity controls container */
    .wcc-quantity-option > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Quantity controls row */
    .wcc-quantity-option > div:last-child > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        flex-wrap: nowrap !important;
    }
    
    /* Quantity buttons */
    .wcc-qty-up,
    .wcc-qty-down,
    button.wcc-qty-up,
    button.wcc-qty-down {
        width: 45px !important;
        height: 45px !important;
        background: #007cba !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        position: relative !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Hide spans to prevent double symbols */
    .wcc-qty-up span,
    .wcc-qty-down span {
        display: none !important;
    }
    
    /* Show minus symbol */
    .wcc-qty-down::after {
        content: "−" !important;
        color: white !important;
        font-size: 18px !important;
        font-weight: bold !important;
        display: block !important;
        line-height: 1 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Show plus symbol */
    .wcc-qty-up::after {
        content: "+" !important;
        color: white !important;
        font-size: 18px !important;
        font-weight: bold !important;
        display: block !important;
        line-height: 1 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Quantity input */
    .wcc-quantity-input {
        width: 60px !important;
        height: 45px !important;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: bold !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        padding: 5px !important;
    }
    
    /* Total price row */
    .wcc-option-total-price {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #28a745 !important;
        background: #d4edda !important;
        padding: 8px 15px !important;
        border-radius: 5px !important;
        text-align: center !important;
        width: auto !important;
        display: inline-block !important;
        margin: 0 auto !important;
    }
    
    /* Center the calculation line */
    .wcc-quantity-option > div:last-child > div:last-child {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Force vertical layout - override any inline styles */
    .wcc-quantity-options[style*="flex-direction: column"] .wcc-quantity-option,
    .wcc-quantity-option[style*="flex-direction: row"] {
        flex-direction: column !important;
    }
    
    /* Override any transform or rotation - Fix vertical text */
    .wcc-quantity-option *,
    .wcc-quantity-option h4,
    .wcc-quantity-option h4 *,
    .wcc-quantity-option .wcc-option-title {
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        text-rendering: auto !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }
    
    /* Force all text elements to display horizontally */
    .wcc-quantity-option span,
    .wcc-quantity-option div,
    .wcc-quantity-option p,
    .wcc-quantity-option h1,
    .wcc-quantity-option h2,
    .wcc-quantity-option h3,
    .wcc-quantity-option h4,
    .wcc-quantity-option h5,
    .wcc-quantity-option h6 {
        writing-mode: initial !important;
        writing-mode: horizontal-tb !important;
        text-orientation: initial !important;
        text-orientation: mixed !important;
    }
    
    /* Ensure no wrapping */
    .wcc-quantity-option {
        flex-wrap: nowrap !important;
    }
    
    /* Additional fixes for title display */
    .wcc-option-title,
    .wcc-quantity-option .wcc-option-title,
    .wcc-quantity-option h4.wcc-option-title {
        display: inline-block !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        width: auto !important;
        min-width: fit-content !important;
        max-width: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix for potential CSS that might truncate text */
    .wcc-quantity-option h4::first-letter,
    .wcc-option-title::first-letter {
        display: inline !important;
        float: none !important;
        font-size: inherit !important;
        line-height: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure text is not clipped */
    .wcc-quantity-option,
    .wcc-quantity-option > div,
    .wcc-quantity-option h4 {
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Additional overrides for stubborn themes */
@media only screen and (max-width: 768px) {
    body .wcc-quantity-option {
        flex-direction: column !important;
    }
}

@media screen and (max-device-width: 768px) {
    .wcc-quantity-option {
        flex-direction: column !important;
    }
}

/* ========================================
   PRODUCT TITLE VISIBILITY ENHANCEMENT
   Ensures full title display on mobile
   ======================================== */
@media screen and (max-width: 768px) {
    /* Force title container to accommodate full text - Centered layout */
    .wcc-quantity-option > div:first-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
    
    /* Text container - Centered with more space */
    .wcc-quantity-option > div:first-child > div {
        min-width: 0 !important;
        max-width: 60% !important;
        width: auto !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 0 10px !important;
    }
    
    /* Product title - Consistent with main rule */
    .wcc-quantity-option h4,
    .wcc-option-title,
    .wcc-quantity-option .wcc-option-title,
    .wcc-quantity-option h4.wcc-option-title {
        /* Text display properties */
        white-space: normal !important;
        overflow: visible !important;
        
        /* Width properties */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
        
        /* Display properties */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Font properties */
        font-size: 16px !important; /* Consistent with main rule */
        font-weight: 600 !important;
        color: #333 !important;
        line-height: 1.3 !important;
        margin: 0 0 5px 0 !important;
        
        /* Remove any clipping */
        clip: auto !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
    
    /* Force the entire option container to use full width */
    .wcc-quantity-option {
        min-width: 100% !important;
        padding: 15px 8px !important; /* Optimized padding */
    }
    
    /* Controls container - Full width for vertical layout */
    .wcc-quantity-option > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Ensure parent containers don't clip content */
    .wcc-quantity-options,
    .wcc-customization-container,
    .wcc-quantity-price-field {
        overflow: visible !important;
        width: 100% !important;
    }
}