* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.page-link {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  background: #f8f8f8;
}

.page-link.active {
  background-color: #333;
  color: #fff;
  font-weight: bold;
}

.ellipsis {
  padding: 6px 8px;
  color: #999;
}

/* ===== Filters (desktop/full-screen) — Modern (flat) ===== */
.filters.modern {
  /* design tokens */
  --accent: #1f2937;        /* slate-800 */
  --surface: #fff;
  --border: #e5e7eb;        /* gray-200 */
  --muted: #6b7280;         /* gray-500 */

  width: 270px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* section cards (lighter chrome) */
.filters.modern .filter-box {
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 18px;
}

.filters.modern .filter-header {
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f2f5;
  color: #111;
}

/* search input with icon + focus ring */
.filters.modern .filter-search {
  width: 100%;
  height: 36px;
  padding-left: 34px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  outline: none;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='5'/><line x1='11.5' y1='11.5' x2='15' y2='15'/></svg>")
    no-repeat 10px 50%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filters.modern .filter-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,41,55,.12);
}

/* list layout + comfy rows */
.filters.modern .filter-list {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: grid;
  row-gap: 2px;
}
.filters.modern .filter-list li { margin: 0; }

.filters.modern .filter-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #111;                 /* kills “blue link” look */
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.filters.modern .filter-list label:hover { background: #f8fafc; }

/* modern checked highlight */
.filters.modern .filter-list label:has(input:checked) {
  background: #eef2ff;         /* indigo-50 */
  border: 1px solid #dbeafe;    /* indigo-100 */
}

/* nicer checkboxes */
.filters.modern .filter-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* category count aligned to the right */
.filters.modern #category-list .cat-count {
  color: var(--muted);
  font-weight: 400;
  margin-left: auto;            /* right-align count */
}

/* show more/less button */
.filters.modern .toggle-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  font-size: 14px;
}
.filters.modern .toggle-btn:hover { text-decoration: underline; }

/* Optional: make the sidebar sticky on tall pages
.filters.modern { position: sticky; top: 72px; }
*/

.hidden {
  display: none;
}

/* Main content layout */
.main-content {
  flex: 1;
}

.page-grid {
  display: flex;
  gap: 30px;

  /* wider cap + centered */
  max-width: 1600px;   /* try 1500–1680 if you want more/less */
  margin: 0 auto;

  /* simple, consistent gutters */
  padding: 20px 2rem;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;        /* a hair more space between cards */

  /* let the grid use the full page-grid width */
  max-width: none;
  margin: 0 0 4rem;
  padding: 0;          /* drop inner padding so cards get the width */
}


/* Product Card */
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* Product Image */
.product-image {
  display: block;
  width: 100%;
  height: auto;          /* let the browser compute height */
  aspect-ratio: 4 / 3;   /* desktop-ish shape */
  object-fit: cover;
}

/* Product Info */
.product-info {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
  padding: 1rem;
}

/* Product Name + Link */
.product-name-link {
  text-decoration: none;
  color: inherit;
}

/* Title: 2 lines max + ellipsis, keeps actions aligned */
.product-name{
  font-size:1.05rem;
  font-weight:600;
  color:#222;
  margin:0;
  text-align:left;
  line-height:1.3;

  /* keep all cards consistent even if name is short */
  min-height: calc(2 * 1.3em);

  /* multi-line clamp + ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Chrome/Edge/Safari */
  line-clamp: 2;         /* future spec */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word; /* avoids overflow on long tokens */
}

@media (max-width:768px){
  .product-name{
    font-size:1rem;
    line-height:1.3;
    min-height: calc(2 * 1.3em);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}



/* Price */
.product-price {
  font-size: 0.95rem;
  color: #444;
  margin: 0;
  text-align: left;
}

/* Actions (Qty + Button) */
.product-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.product-qty {
  width: 48px;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
}

.add-to-cart-btn {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
  background-color: #555;
}
	.qty-gift-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.giftlist-btn {
  background: none;
  border: none;
  color: #95999e;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.giftlist-btn:hover {
  color: #dc3545; /* red highlight on hover */
}



@media (max-width: 1000px) {
  .filters {
    display: none;
  }
}
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .page-grid {
	padding: 0;
	gap: 0 !important;
	}
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1rem;
  }

  .product-image {
    height: 220px;
  }

  .product-name {
    font-size: 1rem;
    min-height: auto;
  }

  .product-price {
    font-size: 0.9rem;
  }

  .add-to-cart-btn {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
  }

  .product-qty {
    width: 44px;
    font-size: 0.95rem;
  }
}