/* ==========================================================================
   SS & MS FABRICATOR — PRODUCTS MODULE STYLES
   Loaded only on products.index / products.show via @push('styles').
   Extends the design system in style.css — does NOT override existing rules.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* PAGE HEADER (compact variant for detail page)                          */
/* ---------------------------------------------------------------------- */
.page-header-sm{ padding-block: calc(var(--navbar-height) + var(--space-4)) var(--space-4); }

/* ---------------------------------------------------------------------- */
/* FILTER SIDEBAR                                                         */
/* ---------------------------------------------------------------------- */
.filter-sidebar{
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-4));
}

.filter-sidebar-header h6{ font-family: var(--font-heading); }
.btn-reset-filters{
  border: none;
  background: none;
  color: var(--color-secondary-dark);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.btn-reset-filters:hover{ text-decoration: underline; }

.filter-group{
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.filter-group:last-of-type{ border-bottom: none; }
.filter-group-title{
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.filter-scroll{ max-height: 220px; overflow-y: auto; padding-right: 4px; }

.filter-checkbox{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding-block: 0.35rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  user-select: none;
}
.filter-checkbox input{
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-checkbox input:checked{
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.filter-checkbox input:checked::after{
  content: '\F633';
  font-family: 'bootstrap-icons';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--color-primary);
}
.filter-label{ flex-grow: 1; }
.filter-checkbox:hover .filter-label{ color: var(--color-primary); }
.filter-count{ font-size: 0.75rem; color: var(--color-text-muted); opacity: 0.7; }

.filter-cta-box{
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(212,175,55,0.08), transparent);
  border: 1px dashed rgba(var(--color-secondary-rgb), 0.4);
  text-align: center;
}
.filter-cta-box i{ font-size: 1.6rem; color: var(--color-secondary); margin-bottom: var(--space-2); display: block; }

@media (max-width: 991.98px){
  .filter-sidebar{ position: static; margin-bottom: var(--space-5); }
  .filter-scroll{ max-height: none; }
}

/* ---------------------------------------------------------------------- */
/* TOOLBAR: SEARCH / SORT / VIEW TOGGLE                                   */
/* ---------------------------------------------------------------------- */
.products-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.toolbar-search{
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
}
.toolbar-search i{
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.toolbar-search input{
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.toolbar-search input:focus{
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.15);
}

.toolbar-controls{ display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.sort-select{
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 2rem 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  background-color: var(--color-white);
  cursor: pointer;
}
.sort-select:focus{ outline: none; border-color: var(--color-secondary); }

.view-toggle{
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.view-toggle-btn{
  border: none;
  background: var(--color-white);
  color: var(--color-text-muted);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.view-toggle-btn.active{ background-color: var(--color-primary); color: var(--color-secondary); }

.products-count{ font-size: 0.88rem; color: var(--color-text-muted); }
.products-count span{ font-weight: 700; color: var(--color-primary); }

/* ---------------------------------------------------------------------- */
/* PRODUCT GRID                                                           */
/* ---------------------------------------------------------------------- */
.products-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1199.98px){ .products-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .products-grid{ grid-template-columns: 1fr; } }

/* List view: single column, horizontal card layout */
.products-grid[data-view="list"]{ grid-template-columns: 1fr; }
.products-grid[data-view="list"] .shop-product-card{ display: grid; grid-template-columns: 220px 1fr; }
.products-grid[data-view="list"] .shop-product-image{ aspect-ratio: auto; height: 100%; }
@media (max-width: 575.98px){
  .products-grid[data-view="list"] .shop-product-card{ grid-template-columns: 1fr; }
}

.product-grid-item.is-hidden{ display: none !important; }

/* ---------------------------------------------------------------------- */
/* SHOP PRODUCT CARD                                                      */
/* ---------------------------------------------------------------------- */
.shop-product-card{
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shop-product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.shop-product-image{
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--color-silver), #f1f3f6);
  overflow: hidden;
}
.shop-product-image-link{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.shop-product-image-link i{
  font-size: 3.2rem;
  color: var(--color-primary);
  opacity: 0.32;
  transition: transform var(--transition-slow);
}
.shop-product-card:hover .shop-product-image-link i{ transform: scale(1.2); }

.shop-product-badge{
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.wishlist-btn{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,0.9);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.wishlist-btn:hover{ background-color: var(--color-secondary); color: var(--color-primary); transform: scale(1.08); }
.wishlist-btn.active i::before{ content: '\F415'; } /* bi-heart-fill */
.wishlist-btn.active{ color: #d63384; }

.shop-product-body{ padding: var(--space-4); display: flex; flex-direction: column; flex-grow: 1; }
.shop-product-category{
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
}
.shop-product-name{ margin: 0.35rem 0 0.4rem; font-size: 1rem; }
.shop-product-name a{ color: var(--color-primary); }
.shop-product-name a:hover{ color: var(--color-secondary-dark); }
.shop-product-desc{ font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }

.shop-product-meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.shop-product-meta i{ color: var(--color-secondary); margin-right: 4px; }

.shop-product-footer{ margin-top: auto; }
.shop-product-price{ font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary-dark); font-size: 1rem; margin-bottom: var(--space-3); }

/* ---------------------------------------------------------------------- */
/* NO RESULTS STATE                                                       */
/* ---------------------------------------------------------------------- */
.no-results-state{
  text-align: center;
  padding: var(--space-9) var(--space-5);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.no-results-state i{ font-size: 2.6rem; color: var(--color-secondary); margin-bottom: var(--space-3); display: block; }

/* ---------------------------------------------------------------------- */
/* PRODUCT DETAIL — GALLERY                                               */
/* ---------------------------------------------------------------------- */
.product-gallery-main{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-silver), #f1f3f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: var(--space-3);
  cursor: zoom-in;
}
.product-gallery-main .shop-product-badge{ top: 16px; left: 16px; }
.gallery-zoom-icon{
  font-size: 6rem;
  color: var(--color-primary);
  opacity: 0.3;
  transition: transform 0.4s ease;
}
.product-gallery-main:hover .gallery-zoom-icon{ transform: scale(1.15); }

.product-gallery-thumbs{ display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gallery-thumb{
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: linear-gradient(150deg, var(--color-silver), #f1f3f6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.gallery-thumb i{ font-size: 1.4rem; color: var(--color-primary); opacity: 0.45; }
.gallery-thumb.active,
.gallery-thumb:hover{ border-color: var(--color-secondary); }
.gallery-thumb.active i{ opacity: 0.9; color: var(--color-secondary-dark); }

.gallery-thumb-video{
  background: var(--color-primary);
  flex-direction: column;
  gap: 2px;
}
.gallery-thumb-video i{ color: var(--color-secondary); opacity: 1; font-size: 1.2rem; }
.gallery-thumb-video span{ font-size: 0.55rem; color: var(--color-silver); font-weight: 600; }

.video-placeholder-panel{
  margin-top: var(--space-3);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background-color: var(--color-primary);
  color: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.video-placeholder-panel i{ font-size: 3rem; }

/* ---------------------------------------------------------------------- */
/* PRODUCT DETAIL — INFO PANEL                                            */
/* ---------------------------------------------------------------------- */
.product-facts-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.product-fact{
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.product-fact .label{ display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 2px; }
.product-fact .value{ display: block; font-weight: 600; color: var(--color-primary); font-size: 0.92rem; }

.product-price-box{
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.03));
  border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.product-price-box .price-label{ font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.product-price-box .price-value{ font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; color: var(--color-secondary-dark); }

.btn-outline-gold-light{
  background-color: transparent;
  color: var(--color-secondary-dark);
  border-color: var(--color-secondary);
}
.btn-outline-gold-light:hover{
  background-color: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.secondary-actions{ padding-top: var(--space-2); }
.secondary-action-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}
.secondary-action-btn:hover:not(:disabled){ color: var(--color-secondary-dark); }
.secondary-action-btn:disabled{ cursor: not-allowed; opacity: 0.55; }

/* ---------------------------------------------------------------------- */
/* PRODUCT TABS                                                           */
/* ---------------------------------------------------------------------- */
.product-tabs-nav{
  display: flex;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.product-tabs-nav button{
  border: none;
  background: none;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  top: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.product-tabs-nav button:hover{ color: var(--color-primary); }
.product-tabs-nav button.active{ color: var(--color-secondary-dark); border-color: var(--color-secondary); }

.feature-list{ list-style: none; padding: 0; margin: 0; }
.feature-list li{ display: flex; align-items: flex-start; gap: 10px; padding-block: 0.4rem; color: var(--color-text); }
.feature-list li i{ color: var(--color-secondary); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

.specs-table{ width: 100%; border-collapse: collapse; }
.specs-table tr{ border-bottom: 1px solid var(--color-border); }
.specs-table tr:last-child{ border-bottom: none; }
.specs-table th{
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  width: 40%;
  font-size: 0.9rem;
}
.specs-table td{ padding: var(--space-3) 0; color: var(--color-text-muted); font-size: 0.9rem; }

.application-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background-color: rgba(212,175,55,0.1);
  color: var(--color-secondary-dark);
  font-weight: 600;
  font-size: 0.85rem;
}
.application-chip i{ color: var(--color-secondary-dark); }

.coming-soon-box-sm{ padding: var(--space-6) var(--space-4); }
.coming-soon-box-sm i{ font-size: 2rem; }

/* ---------------------------------------------------------------------- */
/* PRODUCT SIDEBAR (detail page)                                          */
/* ---------------------------------------------------------------------- */
.sidebar-card{
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.sidebar-card-title{
  font-size: 0.95rem;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.sidebar-icon-lg{ font-size: 2.2rem; color: var(--color-secondary); margin-bottom: var(--space-2); display: block; }

.business-hours-list{ list-style: none; padding: 0; margin: 0; }
.business-hours-list li{
  display: flex;
  justify-content: space-between;
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.88rem;
}
.business-hours-list li:last-child{ border-bottom: none; }
.business-hours-list span{ color: var(--color-text-muted); }
.business-hours-list strong{ color: var(--color-primary); }

.sidebar-card-dark{
  background-color: var(--color-primary);
  border: none;
}
.sidebar-card-dark .sidebar-icon-lg{ margin-inline: auto; }

/* ---------------------------------------------------------------------- */
/* GENERIC LAZY IMAGE FADE-IN (for future real <img loading="lazy">)      */
/* ---------------------------------------------------------------------- */
img[loading="lazy"]{ transition: opacity 0.4s ease; }

/* Real (uploaded) product images in the detail gallery and shop cards */
.gallery-main-image{ width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb-image{ padding: 0; overflow: hidden; }
.gallery-thumb-image img{ width: 100%; height: 100%; object-fit: cover; }
.shop-product-img{ width: 100%; height: 100%; object-fit: cover; }