/**
 * Modern Mobile Design - Clean & Beautiful
 * Completely redesigned for mobile devices
 */

/* ===========================================
   MOBILE ONLY STYLES (≤768px)
   =========================================== */

@media screen and (max-width: 768px) {
    
    /* === FOUNDATION === */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        overflow-x: hidden;
        width: 100vw;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }
    
    body {
        overflow-x: hidden;
        width: 100vw;
        background: #f5f7fa;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
    }
    
    #content {
        overflow-x: hidden;
        width: 100vw;
        background: #f5f7fa;
    }
    
    /* === RESET CONTAINERS === */
    .w960,
    .w980,
    .wrapper,
    .center,
    .clearfix {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }
    
    /* === HEADER === */
    .header {
        width: 100vw !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        padding: 20px 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .logo {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        float: none !important;
    }
    
    .logo img {
        max-width: 140px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        filter: brightness(0) invert(1) !important;
    }
    
    /* === SEARCH BAR - Modern Design === */
    .topright {
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        float: none !important;
    }
    
    .search_block_top {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    
    .search-form {
        display: flex !important;
        gap: 8px !important;
        background: white !important;
        border-radius: 25px !important;
        padding: 5px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }
    
    .search-form label {
        flex: 1 !important;
        margin: 0 !important;
    }
    
    .search-form .screen-reader-text {
        display: none !important;
    }
    
    .search-field {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border: none !important;
        border-radius: 20px !important;
        background: transparent !important;
        outline: none !important;
    }
    
    .search-field::placeholder {
        color: #a0aec0 !important;
    }
    
    .search-submit {
        padding: 12px 24px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: transform 0.2s !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
    }
    
    .search-submit:active {
        transform: scale(0.95) !important;
    }
    
    /* === NAVIGATION - Hidden on Mobile === */
    .bottom,
    .NavBottom {
        display: none !important;
    }
    
    /* === LAYOUT === */
    .left_column,
    .content,
    .fLeft,
    .fRight {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }
    
    /* Wrapper for slider to prevent overflow */
    .clearfix:has(#HS_container) {
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* === SLIDER - Modern Card Style === */
    #HS_container,
    .tp-banner,
    .fullwidthbanner-container {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        height: 180px !important;
        margin: 15px 15px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    }
    
    .slotholder,
    .tp-bgimg {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 15px !important;
    }
    
    /* Force slider container to not overflow */
    .tp-banner * {
        max-width: 100% !important;
    }
    
    .tp-caption {
        font-size: 14px !important;
        padding: 10px !important;
        display: none !important;
    }
    
    .tp-bullets,
    .tp-leftarrow,
    .tp-rightarrow {
        display: none !important;
    }
    
    /* === CATEGORIES - Modern Accordion === */
    .left_column {
        width: calc(100% - 30px) !important;
        padding: 0 !important;
        margin: 15px 15px !important;
    }
    
    #categories_block_left {
        background: white !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    #categories_block_left h3 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        padding: 18px 20px !important;
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        user-select: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #categories_block_left h3 span {
        display: none !important;
    }
    
    #categories_block_left h3:after {
        content: '▼' !important;
        font-size: 12px !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
    }
    
    #categories_block_left h3:active {
        opacity: 0.9 !important;
    }
    
    #categories_block_left .tree {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        width: 100% !important;
    }
    
    #categories_block_left .tree li {
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
    }
    
    #categories_block_left .tree li:last-child {
        border-bottom: none !important;
    }
    
    #categories_block_left .tree a {
        display: block !important;
        padding: 15px 20px !important;
        color: #2d3748 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        transition: background 0.2s, padding-left 0.2s !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #categories_block_left .tree a:active {
        background: #f7fafc !important;
        padding-left: 25px !important;
    }
    
    /* Hide contact box */
    .box.left-c {
        display: none !important;
    }
    
    /* === CONTENT AREA === */
    .content {
        padding: 0 15px !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    .center_column,
    .fRight {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Hide About Us section completely on mobile */
    .editorial_block,
    .about-i,
    .about-c {
        display: none !important;
    }
    
    /* Hide any standalone images in content */
    .center_column > img,
    .fRight > img {
        display: none !important;
    }
    
    /* Hide specific headings but keep product titles */
    .right-title {
        display: none !important;
    }
    
    .productsi.products-top {
        display: none !important;
    }
    
    /* Only show products list */
    .products,
    ul.products {
        display: grid !important;
        margin-top: 15px !important;
    }
    
    /* === PRODUCTS GRID - Card Layout === */
    .products,
    ul.products {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .products li,
    ul.products li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .products li:active,
    ul.products li:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    }
    
    .products li a,
    ul.products li a {
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none !important;
        height: 100% !important;
        padding: 12px !important;
    }
    
    .products li img,
    ul.products li img {
        width: 100% !important;
        height: 140px !important;
        object-fit: contain !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
    }
    
    .products li h2,
    ul.products li h2 {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        color: #2d3748 !important;
        font-weight: 600 !important;
        min-height: 36px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .products li .price,
    ul.products li .price {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #667eea !important;
        margin-top: auto !important;
    }
    
    /* === SECTION HEADINGS === */
    h1, h2.title, .page-heading {
        color: #2d3748 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        margin: 20px 15px 15px !important;
        padding: 0 !important;
    }
    
    /* === FOOTER === */
    .footer {
        width: 100vw !important;
        background: #2d3748 !important;
        color: white !important;
        padding: 30px 15px !important;
        margin-top: 30px !important;
    }
    
    .foot-l {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .foot-l > li {
        width: 100% !important;
        margin: 15px 0 !important;
        text-align: center !important;
    }
    
    .foot-l > li > div {
        width: 100% !important;
        padding: 10px !important;
    }
    
    .footer a {
        color: #a0aec0 !important;
        text-decoration: none !important;
    }
    
    .footer a:active {
        color: white !important;
    }
    
    /* Hide chat widgets and popups */
    #tidio-chat,
    #tawk-chat,
    #crisp-chatbox,
    [id*="chat"],
    [class*="chat-widget"],
    [class*="messenger"],
    iframe[src*="chat"],
    iframe[src*="messenger"] {
        display: none !important;
    }
    
    /* === FORMS === */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        outline: none !important;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    }
    
    button,
    .button,
    input[type="submit"] {
        padding: 12px 24px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: transform 0.2s !important;
    }
    
    button:active,
    .button:active {
        transform: scale(0.97) !important;
    }
    
    /* === IMAGES === */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* === TABLES === */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        background: white !important;
        border-radius: 8px !important;
    }
    
    /* === UTILITY === */
    .hide-mobile {
        display: none !important;
    }
    
    /* Ensure everything stays in viewport */
    * {
        max-width: 100vw !important;
    }
}

/* ===========================================
   SMALL MOBILE (≤480px)
   =========================================== */

@media screen and (max-width: 480px) {
    
    .logo img {
        max-width: 120px !important;
    }
    
    .search-submit {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    #HS_container,
    .tp-banner {
        height: 150px !important;
    }
    
    .slotholder,
    .tp-bgimg {
        height: 150px !important;
    }
    
    /* Single column for small screens */
    .products,
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .products li img,
    ul.products li img {
        height: 180px !important;
    }
    
    h1, h2.title {
        font-size: 18px !important;
    }
}

/* ===========================================
   TABLET (481px - 768px)
   =========================================== */

@media screen and (min-width: 481px) and (max-width: 768px) {
    
    /* Keep 2 columns for tablet */
    .products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===========================================
   LANDSCAPE
   =========================================== */

@media screen and (max-width: 768px) and (orientation: landscape) {
    
    .header {
        padding: 15px 0 !important;
    }
    
    .logo img {
        max-width: 100px !important;
    }
    
    .logo {
        margin: 0 0 10px 0 !important;
    }
    
    #HS_container,
    .tp-banner {
        height: 140px !important;
    }
    
    .slotholder,
    .tp-bgimg {
        height: 140px !important;
    }
}

/* ===========================================
   ANIMATIONS
   =========================================== */

@media screen and (max-width: 768px) {
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .products li,
    #categories_block_left {
        animation: fadeIn 0.3s ease-out;
    }
}