* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
}

input,
button,
textarea,
select {
    font: inherit;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.prose p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Better mobile compare UX */
@media (max-width: 767px) {
    h1 {
        word-break: normal;
        overflow-wrap: anywhere;
    }

    h2,
    h3 {
        overflow-wrap: anywhere;
    }

    .prose {
        font-size: 1rem;
    }

    .prose p {
        line-height: 1.75;
    }

    section {
        max-width: 100%;
    }

    table {
        font-size: 0.875rem;
    }

    #compare-selected-list {
        display: flex !important;
        overflow-x: auto;
        gap: 12px !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
        margin-top: 24px !important;
    }

    #compare-selected-list > * {
        min-width: 168px !important;
        max-width: 168px !important;
        min-height: 128px !important;
        padding: 16px !important;
        scroll-snap-align: start;
        border-radius: 22px !important;
    }

    #compare-selected-list .text-5xl {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }

    #compare-selected-list .font-black,
    #compare-selected-list .font-semibold {
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
    }

    #compare-selected-list .text-sm {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }

    #compare-selected-list img,
    #compare-selected-list .w-14,
    #compare-selected-list .w-16,
    #compare-selected-list .md\:w-16 {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    #compare-selected-list .flex.items-center.gap-4 {
        gap: 10px !important;
        align-items: flex-start !important;
    }

    #compare-selected-list .flex.gap-3 {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    #compare-selected-list button.bg-red-500,
    #compare-selected-list button.border {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 14px !important;
    }

    #sticky-compare-bar {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        border-radius: 22px !important;
        padding: 12px !important;
    }

    #sticky-compare-bar .max-w-7xl {
        gap: 10px !important;
    }

    #sticky-compare-items {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #sticky-compare-bar button {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        border-radius: 16px !important;
    }

    #compare-picker-modal {
        padding: 12px !important;
    }

    #compare-picker-modal .max-w-3xl {
        border-radius: 24px !important;
    }

    #compare-picker-results {
        max-height: 60vh !important;
    }
}