/* Mobile Product List View */
/* Unified view for 769px and below to match 767px mobile layout */

/* 1. Global rules for 769px and below */
@media (max-width: 769px) {
  .product-list-view .tvproduct-wrapper {
    display: flex;
    flex-direction: row;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
  }

  .product-list-view .tvproduct-image {
    width: 120px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .product-list-view .tvproduct-info-box-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .product-list-view .tvproduct-hover-btn {
    position: relative;
    transform: none;
    opacity: 1;
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .product-list-view .tvproduct-hover-btn > * {
    position: relative;
    transform: none;
    opacity: 1;
  }

  .product-list-view .tvproduct-cart-btn {
    margin-right: 10px;
  }

  .product-list-view .tvproduct-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
  }

  .product-list-view .tvproduct-name h6 {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .product-list-view .tv-product-price {
    margin-bottom: 8px;
  }

  .product-list-view .tvproduct-name-price-wrapper {
    display: flex;
    flex-direction: column;
  }

  .product-list-view .tv-price-cart-inline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
  }

  .product-list-view .tvproduct-cart-btn-info {
    flex-shrink: 0;
    margin-left: 10px;
  }

  .product-list-view .tvproduct-cart-btn-info button {
    padding: 6px 8px;
  }

  .tv-grid-list-all-wrapper {
    display: none !important;
  }

  /* FORCED SWITCH FROM GRID TO CATELOG VIEW AT 768px and below */
  /* This ensures that when Grid is selected, we hide the grid layout and show the catelog layout */

  #products.grid .tvproduct-wrapper.grid {
    display: none !important;
  }

  #products.grid .tvproduct-wrapper.catelog {
    display: block !important;
  }

  /* Force Catalog View wrapper to be block (stacked) at 768px to match mobile layout */
  #products.catelog .tvproduct-catalog-wrapper,
  #products.grid .tvproduct-catalog-wrapper {
    display: block !important;
    overflow: hidden;
    margin-bottom: 15px;
    border-bottom: 1px #e2e2e2 solid;
  }

  /* Make product images fill the container width */
  .tvproduct-image,
  .tvproduct-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* Specific fixes for 768px-769px to match 767px (theme.css overrides) */
  .tv-grid-list-all-wrapper {
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .tv-left-search-totle-product {
    margin-bottom: 15px !important;
  }

  .tvcatlog-button-wrapper {
    display: flex !important;
    justify-content: center !important;
  }

  .tv-product-cart-quentity-inner {
    text-align: center !important;
  }

  /* Layout fix for 768-769px: Quantity + Cart inline, actions below */
  .tv-product-catalog-btn .tvproduct-catalog-main-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .tv-product-catalog-btn .tvproduct-right-column-actions {
    display: contents !important; /* "Dissolve" wrapper to bring children to parent flex level */
  }

  .tv-product-catalog-btn .tv-product-cart-quentity-inner {
    width: auto !important;
    margin: 0 !important;
  }

  .tv-product-catalog-btn .tvproduct-cart-btn {
    width: auto !important;
    flex: 0 1 auto !important;
  }

  .tv-product-catalog-btn .tvproduct-add-to-cart {
    min-width: 140px !important;
    width: auto !important;
  }

  .tv-product-catalog-btn .tvcatlog-button-wrapper {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 5px !important;
    order: 3; /* Ensure it stays below quantity and cart */
  }

  /* Force Catalog View components to stack at 768-769px (Override Bootstrap col-md-3) */
  .tvproduct-catalog-wrapper > .col-md-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center;
  }

  .tvproduct-catalog-wrapper .tvproduct-name.product-title a h6 {
    min-height: auto !important;
  }

  .tvproduct-catalog-wrapper .tv-product-desc {
    display: none; /* Hide long desc on tablet/mobile to match compact view */
  }
}

/* 2. Narrow mobile view (below 450px) */
@media (max-width: 449px) {
  #products.catelog .tv-grid-list-wrapper-info-box,
  #products.grid .tv-grid-list-wrapper-info-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .tvproduct-image img.tvproduct-defult-img.tv-img-responsive {
    max-width: 52% !important;
    display: block;
    margin: 0 auto;
  }
}

/* 3. Wider mobile/tablet view (450px to 769px) - TWO IN A ROW */
@media (min-width: 450px) and (max-width: 769px) {
  #products.catelog .tv-grid-list-wrapper-info-box,
  #products.grid .tv-grid-list-wrapper-info-box {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* 4. Home page specific override (#index) - ALWAYS ONE IN A ROW to show large images */
@media (max-width: 769px) {
  #index article.product-miniature.tvall-product-wrapper-info-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 15px !important;
  }
}