/* Product cards use compact type at narrow and six-column widths. */
/* compact padding inside cards */
#productsGrid .product-card .p-4 {
  padding: 0.5rem;
}

#productsGrid .product-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.product-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.product-card-head .product-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 0.72rem;
  margin-bottom: 0.12rem;
}
.product-card-meta-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.meta-item {
  background: rgba(26,26,46,0.04);
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  font-weight: 600;
  color: #374151;
  font-size: 0.68rem;
}
.meta-item + .meta-item { margin-left: 0.35rem; }

/* Ensure meta row stays on single line and truncates gracefully */
.product-card-meta-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-meta-row > * { flex-shrink: 0; }

#productsGrid .product-card-title,
#productsGrid .product-card-description,
#productsGrid .product-card-meta,
#productsGrid .product-card-tag {
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}

#productsGrid .product-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

#productsGrid .product-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}

#productsGrid .product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  align-items: center;
  line-height: 1.2;
}

#productsGrid .product-card-footer {
  margin-top: 0;
  padding-top: 0.25rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* ---------------------------------------------------------------------
   Premium card treatment
   - Soft ambient shadow at rest instead of a flat border, so cards read
     as raised objects rather than boxes.
   - On hover: deeper shadow + a slight lift, plus the image very gently
     zooms for a bit of polish without being distracting.
   - A thin top accent line teases the gold brand color without being
     as literal as a full border.
--------------------------------------------------------------------- */
#productsGrid .product-card-premium {
  /* Keep the base .product-card overflow:hidden intact — it's what
     clips the folded-corner decoration and the product image to the
     rounded corners. drop-shadow (unlike box-shadow) is computed from
     the element's actual rendered alpha and is NOT clipped by
     overflow:hidden, so it's the right tool for an elevated shadow
     here instead of fighting the inherited overflow. */
  border: 1px solid rgba(26, 26, 46, 0.06);
  filter: drop-shadow(0 1px 2px rgba(26, 26, 46, 0.04)) drop-shadow(0 8px 16px rgba(26, 26, 46, 0.1));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
  will-change: transform;
}

#productsGrid .product-card-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #E09C27, #E5CD2F);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

#productsGrid .product-card-premium:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 156, 39, 0.25);
  filter: drop-shadow(0 1px 2px rgba(26, 26, 46, 0.05)) drop-shadow(0 20px 30px rgba(26, 26, 46, 0.16));
}

#productsGrid .product-card-premium:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

#productsGrid .product-card-media {
  overflow: hidden;
  aspect-ratio: 4 / 4;
  min-height: 0;
}

#productsGrid .product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#productsGrid .product-card-premium:hover .product-card-media img {
  transform: scale(1.06);
}

/* Quick View overlay fades and rises in, rather than snapping on. */
#productsGrid .product-card-premium .quick-view-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#productsGrid .product-card-premium:hover .quick-view-overlay {
  opacity: 1;
}

#productsGrid .product-card-premium .quick-view-btn {
  transform: translateY(10px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 8px 20px rgba(224, 156, 39, 0.35);
}

#productsGrid .product-card-premium:hover .quick-view-btn {
  transform: translateY(0);
}

/* Price/CTA row gets a touch more presence */
#productsGrid .product-card-premium .border-t {
  border-color: rgba(26, 26, 46, 0.08);
}

#productsGrid .product-card-premium button {
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

#productsGrid .product-card-premium button:hover {
  transform: translateY(-1px);
}

.premium-feature-card {
  border: 1px solid rgba(26, 26, 46, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.premium-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(26, 26, 46, 0.12);
}

.premium-chip {
  letter-spacing: 0.08em;
}

.premium-feature-title,
.premium-feature-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.premium-feature-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* compact featured card padding and text spacing */
.premium-feature-card .p-3 {
  padding: 0.5rem;
}
.premium-feature-title {
  font-size: 0.8125rem;
  margin: 0.1rem 0;
}
.premium-feature-meta {
  font-size: 0.65rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  #productsGrid .product-card-premium,
  #productsGrid .product-card-media img,
  #productsGrid .product-card-premium .quick-view-overlay,
  #productsGrid .product-card-premium .quick-view-btn {
    transition: none !important;
  }
  #productsGrid .product-card-premium:hover {
    transform: none;
  }
}

#productsGrid .product-card h3 {
  font-size: 0.72rem;
  line-height: 0.95rem;
}

#productsGrid .product-card p {
  font-size: 0.56rem;
  line-height: 0.9rem;
}

#productsGrid .product-card .text-xs,
#productsGrid .product-card .text-\[11px\] {
  font-size: 0.45rem;
}

#productsGrid .product-card .text-lg {
  font-size: 0.72rem;
}

#productsGrid .product-card button {
  font-size: 0.625rem;
}

/* make footer elements occupy left/right full width */
#productsGrid .product-card-footer > span,
#productsGrid .product-card-footer > button {
  flex: 1 1 0;
}
#productsGrid .product-card-footer > button {
  text-align: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #productsGrid .product-card .p-4 {
    padding: 0.75rem;
  }

  #productsGrid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0.5rem;
  }

  #productsGrid .product-card h3 {
    font-size: 0.85rem;
  }

  #productsGrid .product-card p {
    font-size: 0.72rem;
  }

  #productsGrid .product-card .text-xs,
  #productsGrid .product-card .text-\[11px\] {
    font-size: 0.6rem;
  }

  #productsGrid .product-card .text-lg {
    font-size: 0.9rem;
  }

  #productsGrid .product-card button {
    font-size: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .product-grid-shell {
    max-width: 1600px;
  }

  #productsGrid.grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.6rem;
  }
}

@media (max-width: 639px) {
  #productsGrid .product-card h3 {
    font-size: 0.75rem;
  }
  #productsGrid .product-card p {
    font-size: 0.56rem;
  }
  #productsGrid .product-card button {
    font-size: 0.6rem;
    padding: 0.4rem 0.5rem;
  }
  .premium-feature-title {
    font-size: 0.72rem;
  }
}

/* meta badges for pages/variants */
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: rgba(26,26,46,0.04);
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  font-weight: 600;
  color: #374151;
}
.meta-badge .meta-count {
  font-weight: 700;
  font-size: 0.78rem;
}
.meta-badge .meta-label {
  font-weight: 500;
  font-size: 0.72rem;
  color: #6b7280;
}

/* compact: on md and smaller show only the numeric count */
@media (max-width: 1023px) {
  .meta-badge {
    padding: 0.08rem 0.25rem;
    gap: 0.18rem;
  }
  .meta-badge .meta-count { font-size: 0.7rem; }
  .meta-badge .meta-label { display: none; }
}

/* Apply compact font sizing and tighter spacing on md (<=1023px) as well */
@media (max-width: 1023px) {
  #productsGrid .product-card h3 { font-size: 0.68rem; }
  #productsGrid .product-card p { font-size: 0.58rem; }
  #productsGrid .product-card .text-xs, #productsGrid .product-card .text-\[11px\] { font-size: 0.5rem; }
  .meta-item { font-size: 0.62rem; padding: 0.08rem 0.28rem; }
  .meta-badge .meta-count { font-size: 0.66rem; }
}

/* iPad Pro range (portrait and landscape) - apply same compact styling */
@media (min-width: 1024px) and (max-width: 1366px) {
  #productsGrid .product-card h3 { font-size: 0.68rem; }
  #productsGrid .product-card p { font-size: 0.58rem; }
  #productsGrid .product-card .text-xs, #productsGrid .product-card .text-\[11px\] { font-size: 0.5rem; }
  .meta-item { font-size: 0.62rem; padding: 0.08rem 0.28rem; }
  .meta-badge .meta-count { font-size: 0.66rem; }
  /* hide badge label on iPad Pro for compact view */
  .meta-badge .meta-label { display: none; }
  /* iPad Pro grid: 5 columns */
  #productsGrid.grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0.5rem;
  }
}