/**
 * Responsive Fixes for xn--gdk3b0a8135f.com
 * Applied to all pages to ensure mobile compatibility
 */

/* ========================================
   CRITICAL MOBILE FOUNDATIONS
   ======================================== */

/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Make all images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure iframes are responsive */
iframe {
    max-width: 100%;
}

/* ========================================
   LAYOUT FIXES
   ======================================== */

/* Make main containers flexible */
.wrap,
#privacy,
#law {
    width: 95% !important;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ========================================
   PRODUCT GRID RESPONSIVE
   ======================================== */

/* Desktop: 3 columns */
@media screen and (min-width: 1025px) {
    .product_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .product_list .column {
        width: calc(33.333% - 20px);
        margin: 10px;
        display: block;
    }

    .product_list li {
        width: 100% !important;
    }
}

/* Tablet: 2 columns */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .product_list .column {
        width: calc(50% - 20px);
        margin: 10px;
        display: block;
    }

    .product_list li {
        width: 100% !important;
    }

    #header h1 {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    #header nav {
        width: 100%;
        text-align: center;
    }

    #header .menu {
        justify-content: center;
    }
}

/* Mobile: 1 column */
@media screen and (max-width: 767px) {
    .product_list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .product_list .column {
        width: 95%;
        max-width: 350px;
        margin: 10px auto;
        display: block;
    }

    .product_list li {
        width: 100% !important;
    }

    /* Header mobile adjustments */
    #header {
        padding: 10px;
        text-align: center;
    }

    #header h1 {
        width: 100%;
        margin-bottom: 15px;
    }

    #header .logoImage {
        max-width: 200px;
    }

    #header nav {
        width: 100%;
    }

    #header .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    #header .menu > li {
        width: 100%;
        margin: 5px 0;
    }

    #header .menu a,
    #header .menu span {
        display: block;
        padding: 10px;
        font-size: 16px;
    }

    /* Category menu mobile */
    #category-menu {
        width: 100%;
    }

    .category-list {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
    }

    #appsItemCategoryTag {
        padding: 0;
    }

    .appsItemCategoryTag_child {
        width: 100%;
    }

    .appsItemCategoryTag_lowerchild {
        position: static !important;
        width: 100% !important;
        padding-left: 20px;
    }

    /* Footer mobile */
    footer {
        text-align: center;
        padding: 20px 10px;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer ul li {
        width: 100%;
        margin: 5px 0;
    }
}

/* ========================================
   TOUCH TARGET SIZES
   ======================================== */

/* Ensure all clickable elements are at least 44x44px */
@media screen and (max-width: 767px) {
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .product_list li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    /* Prevent iOS auto-zoom on inputs */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   ITEM DETAIL PAGE FIXES
   ======================================== */

@media screen and (max-width: 767px) {
    /* Item images */
    .bx-wrapper {
        width: 100% !important;
        height: auto !important;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Item detail sections */
    #itemDetailSection,
    #itemDetailSecondSection {
        width: 95% !important;
        padding: 15px;
        box-sizing: border-box;
    }

    /* Quantity and cart controls */
    .quantityBox,
    .addCart {
        width: 100% !important;
        margin: 10px 0;
    }
}

/* ========================================
   TEXT READABILITY
   ======================================== */

/* Ensure text doesn't get too small on mobile */
@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    p,
    li,
    div {
        font-size: 16px;
    }
}

/* ========================================
   SEARCH FORM MOBILE
   ======================================== */

@media screen and (max-width: 767px) {
    .itemSearch {
        width: 95% !important;
        margin: 10px auto;
    }

    .itemSearch__form {
        display: flex;
        width: 100%;
    }

    .itemSearch__field {
        flex: 1;
        min-width: 0;
        font-size: 16px !important;
    }

    .itemSearch__btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   FIXES FOR SPECIFIC BREAKPOINTS
   ======================================== */

/* Small phones (320px - 374px) */
@media screen and (max-width: 374px) {
    .product_list .column {
        width: 98%;
    }

    #header .logoImage {
        max-width: 180px;
    }

    body {
        font-size: 14px;
    }
}

/* Large phones / phablets (375px - 767px) */
@media screen and (min-width: 375px) and (max-width: 767px) {
    .product_list .column {
        width: 90%;
        max-width: 400px;
    }
}