/* OfficeLineHub – shop.css (page-specific styles) */

.promo-banner {
  background: linear-gradient(90deg, #e4eeff 0%, #d5f3da 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  overflow: hidden;
  padding: var(--space-6) 0;
}
.promo-banner-content {
  align-items: center;
  gap: var(--space-8);
}
.promo-img {
  width: 200px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.promo-text {
  flex: 1;
}
.promo-label {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  font-weight: 600;
  letter-spacing: .5px;
}
.promo-cta {
  margin-top: var(--space-4);
}

@media (max-width: 700px) {
  .promo-banner-content { flex-direction: column; gap: var(--space-4); }
  .promo-img { width: 120px; }
}

.collections-grid {
  margin-top: var(--space-8);
  gap: var(--space-6);
}
.collection-card .collection-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
  margin-bottom: var(--space-2);
}
.collection-cta {
  margin-top: var(--space-2);
}

.category-nav {
  gap: var(--space-4);
  margin: var(--space-4) 0;
  list-style: none;
}
.category-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  height: 100%;
  box-shadow: none;
  border: 2px solid transparent;
  transition: box-shadow .16s, border-color .16s;
}
.category-link:hover, .category-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-base);
  text-decoration: none;
}
.category-icon {
  width: 64px; height: 64px; object-fit: cover;
  margin-bottom: var(--space-2);
}

@media (max-width: 900px){
  .category-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .category-nav { grid-template-columns: 1fr; }
}

.shop-main-grid {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  margin-top: var(--space-10);
  margin-bottom: var(--space-12);
}
.filters-sidebar {
  min-width: 240px;
  background: var(--gray-100);
  border-radius: var(--radius-base);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  position: sticky;
  top: 88px;
  height: max-content;
}
.filters-sidebar form fieldset {
  border: none;
  margin-bottom: var(--space-4);
  padding: 0;
}
.filters-sidebar legend {
  font-weight: 600; color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-size: 1em;
}
.filter-group {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--space-2);
}
.filter-range {
  gap: var(--space-2);
  align-items: center;
}
.filter-range .input {
  width: 70px;
}
.filter-range-sep {
  font-size: 1.2em;
  color: var(--gray-500);
  user-select: none;
  margin-bottom: 2px;
}
.filter-btn {
  margin-top: var(--space-3);
  width: 100%;
}
.reset-btn {
  width: 100%;
  margin-top: var(--space-2);
}
.filters-sidebar input[type="checkbox"] {
  margin-right: 7px;
}
.filters-sidebar select {
  margin-top: var(--space-2);
}

@media (max-width: 1100px) {
  .shop-main-grid { flex-direction: column; gap: var(--space-6); }
  .filters-sidebar { width: 100%; min-width: 0; position: static; }
}

.products-area {
  flex: 1;
  width: 100%;
}
.products-header {
  margin-bottom: var(--space-4);
  justify-content: space-between;
}
.products-count {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}
.products-grid {
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.product-card {
  position: relative;
  padding-bottom: var(--space-5);
  min-height: 340px;
  outline: none;
}
.product-label {
  position: absolute;
  top: 16px; left: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .9em;
  font-weight: 600;
  color: #fff;
  z-index: 2;
}
.product-label.promo { background: var(--color-danger); }
.product-label.new { background: var(--color-primary); }
.product-label.eco { background: var(--color-success); }
.product-label.seasonal { background: var(--color-warning); }
.old-price {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  text-decoration: line-through;
  margin-right: 5px;
}
.product-rating {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}
.stars { color: #f3b81a; font-size: 1.1em; letter-spacing: 0.08em; }
.add-to-cart {
  margin-top: auto;
}
.quick-view-btn {
  position: absolute; top: 16px; right: 16px;
  background: var(--gray-900);
  color: #fff;
  font-size: .95em;
  padding: 4px 12px;
  border-radius: var(--radius-base);
  border: none;
  opacity: 0.85;
  cursor: pointer;
  z-index: 10;
  transition: background .14s;
}
.quick-view-btn:hover, .quick-view-btn:focus {
  background: var(--color-primary);
}
.product-card:focus-within, .product-card:focus {
  box-shadow: 0 0 0 3px rgba(38,99,235,0.18);
}

.pagination {
  gap: var(--space-1);
}
.dots { color: var(--gray-500); margin: 0 3px; }
.pagination .button[aria-current="true"] {
  background: var(--color-primary);
  color: #fff;
  pointer-events: none;
}

/* QUICK VIEW MODAL */
.quick-view-modal {
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(16,21,46,0.08);
  align-items: center; justify-content: center;
}
.quick-view-modal[open], .quick-view-modal[style*="display: flex"], .quick-view-modal:not([hidden]) {
  display: flex !important;
}
.quick-view-content {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 95vw;
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8);
  position: relative;
  animation: qvIn .28s cubic-bezier(.5,0,.2,1);
}
@keyframes qvIn {
  from { transform: translateY(48px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.quick-view-gallery {
  flex-shrink: 0;
  width: 180px;
  text-align: center;
}
.quick-view-img {
  width: 100%;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.quick-view-thumbs {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.quick-view-thumbs img {
  width: 36px; height: 36px; object-fit: cover;
  border-radius: var(--radius-base);
  cursor: pointer;
  opacity: .85;
  border: 2px solid transparent;
}
.quick-view-thumbs img.active {
  opacity: 1;
  border-color: var(--color-primary);
}
.quick-view-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.quick-view-price {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.quick-view-labels .product-label {
  position: static;
  display: inline-block;
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
}
.quick-view-rating {
  margin-bottom: var(--space-2);
}
.quick-view-features {
  list-style: disc inside;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3) 0;
  padding: 0;
}
.quick-view-cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.quick-view-close {
  position: absolute; top: 12px; right: 12px;
  font-size: 1.7em;
  color: var(--gray-500);
  z-index: 10;
  background: none;
  border: none;
  padding: 0 8px;
  min-width: 32px;
  line-height: 1;
}
.quick-view-close:hover, .quick-view-close:focus {
  color: var(--color-danger);
}
.modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(34, 40, 49, 0.26);
  z-index: 1;
}
@media (max-width: 850px) {
  .quick-view-content { flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
  .quick-view-gallery, .quick-view-img { width: 100%; }
}
@media (max-width: 600px) {
  .collections-grid, .top-rated-row { grid-template-columns: 1fr !important; gap: var(--space-3); }
}

.top-rated-row {
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.top-rated-product {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.top-rated-img {
  width: 100px; margin: 0 auto var(--space-3);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
}
.top-rated-rating {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-base);
}
.review-snippet {
  font-style: italic;
  color: var(--gray-700);
  margin: var(--space-2) 0;
}
.top-rated-product .button {
  margin-top: var(--space-2);
  min-width: 120px;
}