/* ============================================
   Mobile Responsive Styles for Lithos Website
   Desktop styles remain unchanged
   ============================================ */

/* Mobile First Approach - All styles below apply to mobile devices */
/* Desktop styles remain as-is in existing CSS files */

/* ============================================
   GENERAL MOBILE STYLES
   ============================================ */

/* Base mobile adjustments */
@media screen and (max-width: 1024px) {
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .wp-site-blocks {
        overflow-x: hidden !important;
    }
}

/* ============================================
   HEADER & NAVIGATION - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Header container adjustments */
    .largeheader {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Header flex container */
    .wp-block-group.headerleft,
    .wp-block-group.logoblock,
    .wp-block-group.headerright {
        width: auto !important;
        float: none !important;
        flex: 1 1 auto !important;
    }
    
    /* Logo block mobile */
    .logoblock {
        order: 2;
        width: 100% !important;
        text-align: center;
        margin: 10px 0 !important;
    }
    
    /* Logo image mobile */
    .wp-block-site-logo img {
        max-width: 40px !important;
        height: auto !important;
    }
    
    /* Site title mobile */
    .wp-block-site-title {
        font-size: 18px !important;
        margin-top: 5px !important;
    }
    
    /* Header left (navigation) */
    .headerleft {
        order: 1;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    
    /* Header right (search, cart, account) */
    .headerright {
        order: 3;
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }
    
    /* Search icon mobile */
    .search-main {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Cart button mobile */
    .wc-block-mini-cart__button {
        padding: 5px !important;
    }
    
    .wc-block-mini-cart__icon {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Mobile navigation menu */
@media screen and (max-width: 768px) {
    /* Navigation button */
    .wp-block-navigation__responsive-container-open {
        display: block !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Navigation menu container */
    .wp-block-navigation__responsive-container {
        width: 100% !important;
    }
    
    .wp-block-navigation__responsive-container-content {
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    /* Navigation items */
    .wp-block-navigation__container li {
        margin-bottom: 15px !important;
    }
    
    .wp-block-navigation__container li a {
        font-size: 18px !important;
        padding: 10px 0 !important;
    }
}

/* ============================================
   HERO SECTION - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Hero cover section */
    .wp-block-cover.alignfull {
        min-height: 70vh !important;
        padding: 20px !important;
    }
    
    /* Hero heading */
    .largeheader .wp-block-heading {
        font-size: 48px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    
    /* Hero paragraph */
    .largeheader p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }
    
    /* Hero button */
    .largeheader .wp-block-button__link {
        padding: 12px 30px !important;
        font-size: 14px !important;
    }
    
    /* Hero columns */
    .largeheader .wp-block-columns {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .largeheader .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    
    /* Two-column layouts - stack on mobile */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Alignwide container mobile */
    .alignwide {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Shop by Category section */
    .wp-block-group {
        padding: 20px 15px !important;
    }
}

@media screen and (max-width: 480px) {
    .largeheader .wp-block-heading {
        font-size: 36px !important;
    }
    
    .largeheader p {
        font-size: 14px !important;
    }
}

/* ============================================
   PRODUCT GRIDS - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Product grid container */
    .wc-block-grid__products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
    
    /* Product items */
    .wc-block-grid__product {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Product images - dynamic sizing */
    .wc-block-grid__product-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 200px !important;
        max-height: 300px !important;
    }
    
    .wc-block-grid__product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Sale badge mobile */
    .sale-badge-bright {
        font-size: 11px !important;
        padding: 6px 12px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    /* Quantity text mobile */
    .quantity-text {
        font-size: 11px !important;
        padding: 6px 10px !important;
        top: 10px !important;
        left: 10px !important;
    }
    
    /* Product code and price wrapper */
    .product-code-price-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 5px !important;
    }
    
    .product-code {
        font-size: 12px !important;
    }
    
    .wc-block-grid__product-price {
        font-size: 14px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media screen and (max-width: 640px) {
    /* Single column on very small screens */
    .wc-block-grid__products {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .wc-block-grid__product-image {
        min-height: 250px !important;
        max-height: 350px !important;
    }
    
    .wc-block-grid__product-image img {
        min-height: 250px !important;
        max-height: 350px !important;
    }
}

/* Product carousel titles */
@media screen and (max-width: 768px) {
    .carouseltitle {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important;
    }
}

/* ============================================
   PARTNERS/BRANDS SECTION - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .partners .wp-block-group {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .partners .wp-block-image {
        margin: 10px !important;
    }
    
    .partners img {
        max-width: 120px !important;
        height: auto !important;
    }
}

/* ============================================
   FEATURES SECTION - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    .productfeatures {
        padding: 60px 20px !important;
        min-height: auto !important;
    }
    
    .productfeatures .wp-block-columns {
        flex-direction: column !important;
    }
    
    .productfeatures .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 30px !important;
    }
    
    .productfeatures h2 {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }
    
    .productfeatures p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   PROCESS BLOCK - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    .processblock .wp-block-columns {
        flex-direction: column !important;
    }
    
    .processblock .wp-block-column {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    .processblock .wp-block-group {
        margin: 20px !important;
        max-width: 100% !important;
    }
    
    .processblock .wp-block-cover {
        min-height: 300px !important;
    }
}

/* ============================================
   CATEGORIES SECTION - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .wp-block-woocommerce-featured-category {
        min-height: 250px !important;
        margin-bottom: 20px !important;
    }
    
    .featuredcat .wp-block-woocommerce-featured-category {
        min-height: 250px !important;
        height: 250px !important;
    }
}

/* ============================================
   FOOTER - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    footer .wp-block-group {
        padding: 60px 20px !important;
    }
    
    .footercontent .wp-block-columns {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    .footercontent .wp-block-column {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    footer h2 {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }
    
    footer .wp-block-navigation__container li {
        margin-bottom: 10px !important;
    }
    
    footer .copyinfo {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    footer .copyinfo p {
        text-align: center !important;
    }
    
    footer .wp-block-image img {
        max-width: 250px !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   SHOP PAGE - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Shop layout container */
    .shop-layout {
        flex-direction: column !important;
        padding: 0 15px !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }
    
    /* Shop sidebar */
    .shop-sidebar {
        width: 100% !important;
        position: relative !important;
        padding: 15px !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        margin-bottom: 20px !important;
    }
    
    .wc-block-components-sidebar-layout {
        flex-direction: column !important;
    }
    
    .wc-block-components-sidebar {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    /* Shop content area */
    .shop-content {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Product grid - ul.products */
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Product images - dynamic sizing */
    .product-media {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .product-media img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Product info */
    .product-info {
        padding: 10px 0 0 !important;
    }
    
    .product-code-price-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    
    .product-code {
        font-size: 12px !important;
    }
    
    .price {
        font-size: 13px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    /* Quantity badge mobile */
    .quantity-text {
        font-size: 10px !important;
        padding: 6px 10px !important;
        top: 8px !important;
        left: 8px !important;
    }
    
    /* Sale badge mobile */
    .onsale {
        font-size: 10px !important;
        padding: 4px 8px !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Breadcrumbs mobile */
    .woocommerce-breadcrumb {
        margin-left: 0 !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }
    
    /* Page title mobile */
    .woocommerce-products-header {
        margin-left: 0 !important;
        padding: 0 10px !important;
    }
    
    .woocommerce-products-header__title {
        font-size: 24px !important;
    }
    
    /* Sorting dropdown mobile */
    .custom-sorting-wrapper {
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    
    .custom-select-box {
        width: 100% !important;
        min-width: auto !important;
        font-size: 14px !important;
    }
    
    /* Product filters */
    .wc-block-components-filter-wrapper {
        margin-bottom: 20px !important;
    }
    
    /* Sort dropdown */
    .wc-block-sort-select {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Very small screens - single column */
@media screen and (max-width: 640px) {
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .product-media img {
        aspect-ratio: 1 / 1 !important;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    .shop-layout {
        padding: 0 10px !important;
    }
    
    ul.products {
        gap: 15px !important;
    }
    
    .product-code {
        font-size: 11px !important;
    }
    
    .price {
        font-size: 12px !important;
    }
    
    .woocommerce-products-header__title {
        font-size: 20px !important;
    }
}

/* ============================================
   PRODUCT DETAIL PAGE - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
    }
    
    .woocommerce-product-gallery .flex-viewport {
        width: 100% !important;
        float: none !important;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs {
        width: 100% !important;
        float: none !important;
        margin-top: 15px !important;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20% !important;
        margin-right: 5px !important;
    }
    
    .woocommerce div.product form.cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .woocommerce div.product form.cart .quantity {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    .woocommerce div.product form.cart .button {
        width: 100% !important;
    }
}

/* ============================================
   CART PAGE - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .woocommerce table.cart {
        font-size: 14px !important;
    }
    
    .woocommerce table.cart td {
        padding: 10px 5px !important;
    }
    
    .woocommerce table.cart .product-thumbnail {
        width: 60px !important;
    }
    
    .woocommerce table.cart .product-thumbnail img {
        width: 60px !important;
        height: auto !important;
    }
    
    .woocommerce table.cart .product-name {
        font-size: 14px !important;
    }
    
    .woocommerce .cart_totals {
        width: 100% !important;
        margin-top: 30px !important;
    }
    
    .woocommerce .cart_totals table {
        width: 100% !important;
    }
    
    .woocommerce .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .woocommerce .coupon input {
        width: 100% !important;
    }
    
    .woocommerce .coupon .button {
        width: 100% !important;
    }
}

/* ============================================
   CHECKOUT PAGE - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-shipping-fields {
        width: 100% !important;
    }
    
    .woocommerce-checkout .col2-set {
        flex-direction: column !important;
    }
    
    .woocommerce-checkout .col-1,
    .woocommerce-checkout .col-2 {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    .woocommerce-checkout .woocommerce-checkout-review-order {
        width: 100% !important;
        margin-top: 30px !important;
    }
    
    .woocommerce form .form-row {
        margin-bottom: 15px !important;
    }
    
    .woocommerce form .form-row input,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ============================================
   FORMS - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .wpcf7 input,
    .wpcf7 textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    .wpcf7 input.wpcf7-submit {
        width: 100% !important;
        padding: 15px !important;
    }
}

/* ============================================
   SEARCH PANEL - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    #search-panel {
        padding: 40px 20px !important;
        max-width: 100% !important;
    }
    
    #search-panel input.search-field {
        font-size: 16px !important;
        padding: 12px !important;
    }
}

/* ============================================
   MINI CART DRAWER - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .wc-block-mini-cart__drawer {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .wc-block-mini-cart-items .wc-block-cart-item__image {
        height: 100px !important;
    }
    
    .wc-block-mini-cart-items .wc-block-components-product-name {
        font-size: 14px !important;
    }
    
    .wc-block-mini-cart__footer {
        padding: 20px !important;
    }
}

/* ============================================
   BUTTONS - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .wp-block-button__link {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .woocommerce a.button,
    .woocommerce button.button {
        padding: 14px 24px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}

/* ============================================
   SPACING & PADDING - MOBILE
   ============================================ */

@media screen and (max-width: 1024px) {
    .alignwide {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .wp-block-group {
        padding: 30px 15px !important;
    }
    
    .wp-block-spacer {
        height: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .alignwide {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .wp-block-group {
        padding: 20px 10px !important;
    }
    
    /* Ensure all columns stack on mobile */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix any float-based layouts */
    .wp-block-image,
    .wp-block-group {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   TYPOGRAPHY - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   UTILITY CLASSES - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    /* Hide on mobile if needed */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show on mobile only */
    .show-mobile {
        display: block !important;
    }
    
    /* Full width on mobile */
    .mobile-full-width {
        width: 100% !important;
    }
    
    /* Center align on mobile */
    .mobile-center {
        text-align: center !important;
    }
}

/* ============================================
   VERY SMALL SCREENS (320px - 480px)
   ============================================ */

@media screen and (max-width: 480px) {
    /* Extra small adjustments */
    .largeheader .wp-block-heading {
        font-size: 32px !important;
    }
    
    .wp-block-button__link {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
    
    .wc-block-grid__product-image {
        height: 280px !important;
    }
    
    footer {
        padding: 40px 15px !important;
    }
    
    footer h2 {
        font-size: 18px !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE ORIENTATION
   ============================================ */

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .largeheader {
        min-height: auto !important;
    }
    
    .wp-block-cover.alignfull {
        min-height: 60vh !important;
    }
}

/* ============================================
   TABLET SPECIFIC (768px - 1024px)
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .footercontent .wp-block-columns {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .footercontent .wp-block-column {
        flex: 1 1 50% !important;
    }
}

/* ============================================
   ACCESSIBILITY - MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    /* Ensure touch targets are at least 44x44px */
    a, button, input, select, textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Improve readability */
    body {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ============================================
   END OF MOBILE RESPONSIVE STYLES
   ============================================ */