/* ============================================================
   DC Masala - Products Page Stylesheet
   products-page.css
   Font: Gotham (Bold 700, Medium 500, Book 400)
   ============================================================ */

/* === Products Page Hero === */
.page-hero {
  background: var(--gradient-hero);
  padding: 120px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(255,193,7,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(192,57,43,0.18) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: white; font-weight: 700; margin-bottom: 14px;
  font-family: 'Gotham', sans-serif;
}
.page-hero h1 span { color: var(--yellow); }
.page-hero p {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem; max-width: 540px;
  font-family: 'Gotham', sans-serif; font-weight: 400;
  line-height: 1.8;
}
.breadcrumb-custom {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
  font-size: 0.82rem; font-family: 'Gotham', sans-serif; font-weight: 400;
}
.breadcrumb-custom a { color: var(--yellow); }
.breadcrumb-custom span { color: rgba(255,255,255,0.5); }
.breadcrumb-custom .current { color: rgba(255,255,255,0.85); }

/* === Filter & Search Bar === */
.filter-bar {
  background: white;
  border-radius: var(--radius);
  padding: 20px 28px;
  box-shadow: 0 4px 24px var(--shadow-warm);
  border: 1px solid var(--border-light);
  margin-bottom: 40px;
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px;
}
.filter-search {
  flex: 1; min-width: 220px;
  position: relative;
}
.filter-search input {
  width: 100%; padding: 10px 16px 10px 42px;
  border: 1.5px solid var(--border-light);
  border-radius: 50px; font-family: 'Gotham', sans-serif; font-weight: 400;
  font-size: 0.88rem; color: var(--text-dark);
  transition: var(--transition); outline: none;
  background: var(--off-white);
}
.filter-search input:focus { border-color: var(--yellow); background: white; }
.filter-search .search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); font-size: 1rem;
}
.filter-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.filter-tab {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--border-light);
  background: var(--off-white);
  color: var(--text-muted);
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: var(--transition);
  font-family: 'Gotham', sans-serif;
  white-space: nowrap;
}
.filter-tab:hover {
  border-color: var(--yellow); color: var(--dark-brown); background: var(--yellow-light);
}
.filter-tab.active {
  background: var(--yellow); border-color: var(--yellow);
  color: var(--dark-brown); font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,193,7,0.35);
}
.results-count {
  font-size: 0.85rem; color: var(--text-muted);
  font-family: 'Gotham', sans-serif; font-weight: 400;
  white-space: nowrap; margin-left: auto;
}
.results-count strong { color: var(--dark-brown); font-weight: 700; }

/* === Product Grid Card (Enhanced) === */
.product-grid-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px var(--shadow-warm);
  border: 1px solid var(--border-light);
  transition: var(--transition);
  height: 100%;
  display: flex; flex-direction: column;
  position: relative;
}
.product-grid-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 65px var(--shadow-strong);
  border-color: rgba(255,193,7,0.3);
}
.product-grid-card .img-area {
  height: 240px; position: relative;
  overflow: hidden;
  background: linear-gradient(#cdcdcd);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
}
.product-grid-card .img-area .p-emoji {
  font-size: 5rem;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  display: block;
}
.product-grid-card:hover .img-area .p-emoji { transform: scale(1.15) rotate(-5deg); }
.product-grid-card .img-area .p-name-bg {
  font-size: 0.72rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted);
  font-family: 'Gotham', sans-serif; font-weight: 400;
}

/* Weight options */
.weight-options {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(255,255,255,0.97));
  padding: 30px 16px 14px;
  display: flex; gap: 6px; justify-content: center;
  transform: translateY(10px); opacity: 0;
  transition: var(--transition);
}
.product-grid-card:hover .weight-options { transform: translateY(0); opacity: 1; }
.w-pill {
  padding: 4px 12px; border-radius: 50px;
  border: 1.5px solid var(--border-light);
  font-size: 0.72rem; font-weight: 700;
  font-family: 'Gotham', sans-serif;
  cursor: pointer; transition: var(--transition);
  background: white; color: var(--text-muted);
}
.w-pill.active, .w-pill:hover {
  background: var(--yellow); border-color: var(--yellow); color: var(--dark-brown);
}

/* Tag pills */
.p-tag {
  position: absolute; top: 14px; left: 14px;
  border-radius: 50px; padding: 4px 13px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  font-family: 'Gotham', sans-serif;
}
.p-tag.bestseller { background: var(--chili-red); color: white; }
.p-tag.new        { background: var(--spice-orange); color: white; }
.p-tag.popular    { background: var(--deep-red); color: white; }
.p-tag.pure       { background: #28a745; color: white; }
.p-tag.classic    { background: var(--medium-brown); color: white; }
.p-tag.premium    { background: #6f42c1; color: white; }

/* Wishlist btn */
.wishlist-btn {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light);
  cursor: pointer; transition: var(--transition);
  color: var(--text-muted); font-size: 0.95rem;
  box-shadow: 0 2px 10px var(--shadow-warm);
}
.wishlist-btn:hover, .wishlist-btn.active {
  background: #fee; color: #e0415e; border-color: #fcc;
  transform: scale(1.1);
}

.product-grid-card .card-body {
  padding: 20px 22px; flex: 1; display: flex; flex-direction: column;
}
.product-grid-card h5 {
  font-size: 1.1rem; margin-bottom: 8px;
  color: var(--dark-brown);
  font-family: 'Gotham', sans-serif; font-weight: 700;
}
.product-grid-card .card-desc {
  font-size: 0.83rem; color: var(--text-muted);
  line-height: 1.65; flex: 1; margin-bottom: 14px;
  font-family: 'Gotham', sans-serif; font-weight: 400;
}
.ingredients-mini {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px;
}
.ing-tag {
  background: var(--cream); border: 1px solid var(--border-light);
  border-radius: 50px; padding: 2px 10px;
  font-size: 0.68rem; color: var(--text-muted);
  font-family: 'Gotham', sans-serif; font-weight: 400;
}
.card-footer-actions {
  padding: 0 22px 22px;
  display: flex; gap: 10px;
}
.btn-details {
  flex: 1; background: var(--dark-brown);
  color: var(--yellow) !important; border: none;
  border-radius: 50px; padding: 10px 0;
  font-size: 0.85rem; font-weight: 700;
  text-align: center; transition: var(--transition);
  font-family: 'Gotham', sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-details:hover {
  background: var(--yellow); color: var(--dark-brown) !important;
  transform: translateY(-2px);
}
.btn-recipe-link {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--yellow-light); border: 1.5px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark-brown); font-size: 0.95rem;
  transition: var(--transition); cursor: pointer; text-decoration: none;
  flex-shrink: 0;
}
.btn-recipe-link:hover { background: var(--yellow); transform: scale(1.1); }

/* === No Results === */
.no-results {
  text-align: center; padding: 80px 20px;
  display: none;
}
.no-results.show { display: block; }
.no-results .icon { font-size: 4rem; margin-bottom: 16px; display: block; }
.no-results h4 {
  color: var(--dark-brown); margin-bottom: 8px;
  font-family: 'Gotham', sans-serif; font-weight: 700;
}
.no-results p {
  color: var(--text-muted); font-size: 0.9rem;
  font-family: 'Gotham', sans-serif; font-weight: 400;
}

/* === Product Detail Preview Modal === */
.product-modal .modal-content {
  border-radius: 20px; border: none;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.product-modal .modal-header {
  background: var(--gradient-hero);
  border: none; padding: 24px 28px;
}
.product-modal .modal-title {
  color: var(--yellow);
  font-family: 'Gotham', sans-serif; font-weight: 700;
}
.product-modal .btn-close { filter: invert(1) sepia(1) saturate(5) hue-rotate(10deg); }
.modal-product-img {
  height: 200px; background: linear-gradient(135deg, var(--cream), var(--yellow-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 7rem; border-radius: 16px; margin-bottom: 20px;
}
.detail-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--yellow-light); border: 1px solid var(--yellow);
  border-radius: 50px; padding: 5px 14px;
  font-size: 0.78rem; font-weight: 700; color: var(--dark-brown);
  font-family: 'Gotham', sans-serif;
}

/* === CTA Strip === */
.products-cta-strip {
  background: linear-gradient(135deg, var(--chili-red), var(--deep-red));
  border-radius: 20px; padding: 48px 40px;
  text-align: center; position: relative; overflow: hidden;
  margin: 60px 0 0;
}
.products-cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,193,7,0.15), transparent 70%);
}

/* === Responsive === */
@media (max-width: 767px) {
  .filter-bar { padding: 16px 18px; flex-direction: column; gap: 12px; }
  .filter-tabs { justify-content: center; }
  .results-count { margin-left: 0; }
  .products-cta-strip { padding: 36px 24px; }
  .card-footer-actions { flex-direction: column; }
  .btn-recipe-link { width: 100%; border-radius: 50px; height: 40px; }
}
/* ============================================================
   PRODUCT IMAGE — FLIP EFFECT (front → back on hover)
   ============================================================ */

/* Give the img-area a 3-D stage */
.product-grid-card .img-area {
  perspective: 1000px;
}

/* The rotating wrapper — sits inside img-area */
.img-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flip on card hover */
.product-grid-card:hover .img-flip-inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
.img-flip-front,
.img-flip-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back face starts rotated */
.img-flip-back {
  transform: rotateY(180deg);
}

/* Images fill their face */
.img-flip-front img,
.img-flip-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback back-face info panel (when no back image supplied) */
.img-back-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--dark-brown), #3a1a08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 10px;
  text-align: center;
}
.img-back-fallback .back-emoji {
  font-size: 2.5rem;
}
.img-back-fallback .back-name {
  color: var(--yellow);
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.img-back-fallback .back-divider {
  width: 40px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
}
.img-back-fallback .back-highlight {
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
  line-height: 1.5;
}
.img-back-fallback .back-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 6px;
}
.img-back-fallback .back-tag {
  background: rgba(255,193,7,0.15);
  border: 1px solid rgba(255,193,7,0.35);
  color: var(--yellow);
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: 'Gotham', sans-serif;
  font-weight: 400;
}

/* Weight pills, tag badge & wishlist stay above the flip at all times */
.img-area > .weight-options,
.img-area > .p-tag,
.img-area > .wishlist-btn {
  position: absolute;
  z-index: 10;
}