/* Mobile Responsive Fixes — Product Page */

@media (max-width: 768px) {
    .product-container { max-width: 100vw; overflow-x: hidden; }

    #product-root, #product-root>*, #product-root .space-y-6, #product-root .glass-card {
        max-width: 100%; overflow-x: hidden; box-sizing: border-box;
    }

    input, select, textarea { font-size: 16px !important; transform-origin: top left; }

    .presale-highlight { padding: 0.75rem !important; word-wrap: break-word; overflow-wrap: break-word; }
    .presale-highlight p { font-size: 0.8rem !important; line-height: 1.4 !important; word-break: break-word; white-space: normal; }
    .presale-highlight .text-xs { font-size: 0.65rem !important; letter-spacing: 0.15em !important; }

    [data-price] { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; word-break: break-all; }
    .lg\:grid-cols-2>div:last-child { padding: 0 !important; }

    h1, h2, h3, h4, h5, h6, p, span, div, button { max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; }

    .grid.lg\:grid-cols-2 { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; width: 100% !important; }
    .space-y-6>* { max-width: 100% !important; }

    [data-option-grid] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; }
    .cyber-option { font-size: clamp(10px, 2.5vw, 12px) !important; padding: clamp(0.4rem, 2vw, 0.6rem) !important; min-height: auto !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
    .cyber-option__header { flex-direction: column !important; align-items: flex-start !important; gap: 0.2rem !important; width: 100%; }
    .cyber-option__label { font-size: clamp(0.7rem, 3vw, 0.8rem) !important; line-height: 1.2 !important; word-break: break-word; }
    .cyber-option__pricing { margin-left: 0 !important; margin-top: 0.3rem !important; flex-wrap: wrap; gap: 0.25rem !important; width: 100%; }
    .cyber-option__price { font-size: clamp(0.75rem, 3.5vw, 0.85rem) !important; }
    .cyber-option__price-old { font-size: clamp(0.65rem, 2.5vw, 0.75rem) !important; }
    .cyber-option__badge { font-size: clamp(0.55rem, 2vw, 0.65rem) !important; padding: 0.1rem 0.25rem !important; }
    .cyber-option__badge svg { width: clamp(0.6rem, 2.5vw, 0.7rem) !important; height: clamp(0.6rem, 2.5vw, 0.7rem) !important; }
}