/**
 * Product Grid Layout
 * Responsive grid/list/masonry layout for product display
 * @package SHPGL\Product\Categories\Assets
 * @since 1.0.0
 */

.shpgl-product-grid-container {
      width: 100%;
      box-sizing: border-box;
      padding: 0;
      margin: 0 auto;
}

// Common layout wrapper styles
.shpgl-layout-grid,
.shpgl-layout-list,
.shpgl-layout-masonry {
      width: 100%;
      box-sizing: border-box;
      list-style: none;
      margin: 0;
      padding: 0;
}

// Grid layout
.shpgl-layout-grid {
      display: grid;
      grid-template-columns: repeat(var(--shpgl-cols-mobile, 1), 1fr);
      gap: var(--shpgl-grid-gap, $grid-gap);

      @media (min-width: $breakpoint-mobile + 1) and (max-width: $breakpoint-tablet) {
            grid-template-columns: repeat(var(--shpgl-cols-tablet, 2), 1fr);
      }

      @media (min-width: $breakpoint-desktop) {
            grid-template-columns: repeat(var(--shpgl-cols-desktop, 4), 1fr);
      }
}

// List layout (image on left, content on right + height matching + compact)
.shpgl-layout-list {
      display: flex;
      flex-direction: column;
      gap: $spacing-md;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 $spacing-sm;

      .shpgl-product-list {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: $spacing-sm;
            padding: $spacing-sm;
            background: #fff;
            max-width: 100%;

            box-sizing: border-box;
            height: auto;
            min-height: auto;
            flex-wrap: nowrap;

            // Mobile responsive layout
            @media (max-width: 768px) {
                  flex-direction: column;
                  align-items: stretch;
                  padding: $spacing-xs $spacing-sm;
                  height: auto !important;
                  min-height: 360px;
            }
      }

      .shpgl-product-image {
            flex: 0 0 200px;
            height: auto;
            border-radius: 4px;
            overflow: hidden;
            img {
                  width: 100%;
                  object-fit: cover;
                  object-position: center;
                  border-radius: 4px;
                  flex-shrink: 0;
            }

            // Mobile image styling
            @media (max-width: 768px) {
                  flex: 0 0 auto;
                  height: 160px;
                  margin-bottom: $spacing-xs;
                  width: 100%;
                  aspect-ratio: 1/1;
                  flex-shrink: 0;
            }
      }

      .shpgl-product-content {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            font-size: 0.95rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .shpgl-product-title {
                  font-size: 1rem;
                  margin: 0 0 $spacing-xxs 0;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
            }

            .shpgl-product-short-description {
                  margin: $spacing-xxs 0 $spacing-xs 0;
                  line-height: 1.5;
                  max-height: 4.5em;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                  font-size: 0.9rem;
            }

            .shpgl-product-price,
            .shpgl-product-category {
                  margin-bottom: $spacing-xxs;
                  font-size: 0.95rem;
            }

            .shpgl-product-add-to-cart {
                  margin-top: auto;
                  a {
                        display: inline-block !important;
                        padding: 4px 12px;
                        font-size: 1rem;
                        line-height: 1.8;
                        white-space: nowrap;
                        width: 200px !important;
                        border-radius: 3px;
                        color: #fff;
                        text-align: center;
                        &:hover {
                              opacity: 0.9;
                        }
                  }
            }
      }
}

// Masonry layout - Fixed overflow & mobile performance optimization
.shpgl-layout-masonry {
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 auto !important;
      column-count: var(--shpgl-cols-mobile, 1);
      column-gap: var(--shpgl-masonry-gutter, $spacing-sm);

      @media (min-width: $breakpoint-mobile + 1) and (max-width: $breakpoint-tablet) {
            column-count: var(--shpgl-cols-tablet, 2);
      }

      @media (min-width: $breakpoint-desktop) {
            column-count: var(--shpgl-cols-desktop, 4);
      }

      .shpgl-product-card {
            aspect-ratio: 1 / 1.5;
            width: 100% !important;
            box-sizing: border-box !important;
            break-inside: avoid !important;
            margin-bottom: var(--shpgl-masonry-gutter, $spacing-sm);
      }

      // Mobile masonry optimization
      @media (max-width:767px) {
            column-count: 1 !important;
            column-gap: $spacing-xs !important;
            .shpgl-product-card { margin-bottom: $spacing-xs !important; }
      }
}

// Product card with mobile performance optimization
.shpgl-product-card {
      display: flex;
      flex-direction: column;
      background: $color-bg;
      border: 1px solid $color-border;
      border-radius: $border-radius;
      overflow: hidden;
      transition: $transition-default;
      box-sizing: border-box;

      &:hover {
            box-shadow: $shadow-md;
            transform: translateY(-2px);
      }

      @media (max-width:767px) {
            &:hover { transform: translateY(0); box-shadow: $shadow-md; }
      }
}

// Product image container with LCP & FCP optimization
.shpgl-product-image {
      position: relative;
      width: 100%;
      overflow: hidden;

      img {
            top: 0;
            left: 0;
            width: 100%;
            object-fit: cover;
            transition: $transition-default;

            &:hover {
                  transform: scale(1.05);
            }
      }

      @media (max-width:767px) {
            img {
                  height: 100% !important;
                  transition: none !important;
            }
      }

      // Quick view button
      .shpgl-quickview-trigger {
            position: absolute;
            top: $spacing-sm;
            right: $spacing-sm;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: $transition-default;
            z-index: 2;
            text-decoration: none;

            &:before {
                  content: "\f06e";
                  font-family: "Font Awesome 5 Free";
                  font-weight: 900;
                  color: $color-primary;
                  font-size: 16px;
            }

            &:hover {
                  background: $color-primary;
                  &:before { color: white; }
            }
      }
      &:hover .shpgl-quickview-trigger { opacity: 1; }
}

// Product content area
.shpgl-product-content {
      padding: $card-padding;
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .shpgl-product-category {
            font-size: 13px;
            color: $color-text-light;
            margin-bottom: $spacing-xs;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            a { color: inherit; text-decoration: none; &:hover { color: $color-primary; } }
      }
      .shpgl-product-title {
            margin: 0 0 $spacing-xs;
            font-size: 16px;
            color: $color-text;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            a { color: $color-text; text-decoration: none; &:hover { color: $color-primary; } }
      }
      .shpgl-product-rating {
            color: #ffc107;
            margin-bottom: $spacing-xs;
            font-size: 14px;
            .star-empty { color: #e0e0e0; }
      }
      .shpgl-product-price {
            margin: $spacing-xs 0;
            font-weight: 600;
            color: $color-secondary;
            font-size: 16px;
      }
      .shpgl-product-short-description {
            font-size: 14px;
            color: $color-text-light;
            line-height: 1.5;
            margin-bottom: $spacing-sm;
            text-overflow: ellipsis !important;
            white-space: normal !important;
      }
      .shpgl-product-short-description br {
            display: block;
            content: "";
      }

      .shpgl-product-add-to-cart {
            margin-top: auto;
            .button {
                  display: block;
                  width: 100%;
                  padding: $spacing-xs $spacing-sm;
                  background: $color-primary;
                  color: white;
                  border: none;
                  border-radius: $border-radius-sm;
                  font-size: 14px;
                  cursor: pointer;
                  transition: $transition-default;
                  text-align: center;
                  text-decoration: none;
                  box-sizing: border-box;
                  &:hover { background: $color-primary-dark; }
                  &:disabled { background: $color-text-light; cursor: not-allowed; transform: none; }
            }
      }
}

// Loading & empty product state
.shpgl-loading-container {
      width: 100%;
      padding: $spacing-lg 0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
}
.shpgl-no-products {
      grid-column: 1 / -1;
      padding: $spacing-xl 0;
      color: $color-text-light;
      text-align: center;
}

// Pagination styles with mobile CLS optimization
.shpgl-pagination-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      padding: 10px 20px;
      position: relative;
      width: 100%;
      min-height: 60px;

      box-sizing: border-box;
      .shpgl-pagination-pages { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
      .shpgl-pagination-item .shpgl-pagination-link { display: inline-block; padding: 8px 14px; border: 1px solid #e1e1e1; border-radius: 4px; color: #333; text-decoration: none; transition: all 0.2s ease-in-out; font-size: 14px; cursor: pointer; &:hover { background-color: #f5f5f5; border-color: #d0d0d0; } }
      .shpgl-pagination-active .shpgl-pagination-link { background-color: #c7c7c7; color: #ffffff; border-color: #c7c7c7; font-weight: 500; &:hover { background-color: #b3bfc4; border-color:  #b3bfc4; } }
      .shpgl-pagination-disabled .shpgl-pagination-link { opacity: 0.5; cursor: not-allowed; pointer-events: none; &:hover { background-color: transparent; border-color: #e1e1e1; } }
      .shpgl-pagination-ellipsis {cursor: default; padding: 0 8px; color:#999;}
      .shpgl-pagination-stats { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size:13px; color:#666; box-sizing: border-box; }

      @media (max-width: 767px) {
            flex-direction: column;
            gap: 15px;
            .shpgl-pagination-stats { position: static; transform: none; margin-top: 10px; right: auto; }
            .shpgl-pagination-pages { flex-wrap: wrap !important; }
      }
}

// Global mobile performance optimization (LCP + CLS + FCP)
@media (max-width:767px) {
      img:not([src*="data:image"]) { loading: lazy; }
      body { overflow-x: hidden; }
      * { transition-property: opacity, background-color !important; }
}