/* Responsive font sizes for thin screens */
@media (max-width: 480px) {
    body, .font-sans {
        font-size: 15px !important;
    }
    h1, .text-2xl, .text-xl, .text-lg, .font-black, .font-extrabold {
        font-size: 1.1rem !important;
    }
    .text-base {
        font-size: 1rem !important;
    }
    .text-sm, .text-xs {
        font-size: 0.95rem !important;
    }
    .text-[10px] {
        font-size: 0.8rem !important;
    }
    .p-6 {
        padding: 1.25rem !important;
    }
    .p-4 {
        padding: 0.75rem !important;
    }
    .mb-6 {
        margin-bottom: 1.25rem !important;
    }
    .gap-2 {
        gap: 0.5rem !important;
    }
    /* Only shrink icons and inputs, not product images */
    .w-8, .h-8, .w-14 {
        width: 2.2rem !important;
        height: 2.2rem !important;
        min-width: 2.2rem !important;
        min-height: 2.2rem !important;
    }
    .rounded-3xl, .rounded-2xl, .rounded-xl, .rounded-lg {
        border-radius: 1rem !important;
    }
}
/* Responsive tweaks for thin screens */
@media (max-width: 480px) {
    .material-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .xs\:flex-row {
        flex-direction: row !important;
    }
    .xs\:items-center {
        align-items: center !important;
    }
    .xs\:mb-0 {
        margin-bottom: 0 !important;
    }
    .xs\:w-auto {
        width: auto !important;
    }
}
/* Custom styles migrated from index.html and inline styles */

.info-fields-hidden {
    display: none !important;
}

/* Icon color filter for white icons on dark backgrounds */
.icon-white {
    filter: brightness(0) invert(1);
}

/* Ensure all SVG icons use the same sizing and alignment */
.icon-svg {
    width: 1.5rem; /* 24px, matches w-6 */
    height: 1.5rem;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
}

/* Calculator icon in button (slightly smaller for button aesthetics) */
.icon-calc {
    width: 1.25rem; /* 20px, matches w-5 */
    height: 1.25rem;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
}

/* Page background color and SVG pattern */
body {
    background-color: #fcfbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ababab' fill-opacity='0.11'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Adjust width of quantity input boxes */
.qty-input {
    width: 3.5rem; /* Increase width to 56px */
    min-width: 3.5rem;
}

@media (max-width: 480px) {
    .qty-input {
        width: 4rem; /* Slightly wider for thin screens */
        min-width: 4rem;
    }
}