/* ==========================================================================
   MAADANOL — Brand Product Catalog (any brand with catalog data)
   Loaded only when viewing a brand page that has a matching
   inc/brand-catalog-{slug}.php file (see maadanol_enqueue_assets
   in functions.php). Depends on brands.css (dlc-toolbar, lf-* helpers,
   section-cta) as its dependency — declared in wp_enqueue_style().
   ========================================================================== */

.brand-catalog__sort{
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  font-size: 12.5px; font-weight: 600; color: var(--gray); font-family: inherit; cursor: pointer;
}

.brand-catalog__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px){ .brand-catalog__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .brand-catalog__grid{ grid-template-columns: 1fr; } }

.catalog-card__media{
  aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px;
}
.catalog-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.catalog-card{
  display:flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.catalog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.catalog-card__head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.catalog-card__type-badge{
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: var(--primary); padding: 4px 10px; border-radius: 999px;
}
.catalog-card__grade{ font-size: 11.5px; font-weight: 700; color: var(--accent-text); background: rgba(30,136,229,0.08); padding: 4px 10px; border-radius: 999px; }
.catalog-card h3{ font-size: 16px; margin: 0 0 4px; }
.catalog-card__line{ font-size: 11.5px; color: var(--gray-light); margin: 0 0 10px; }
.catalog-card__desc{ font-size: 13px; color: var(--gray); line-height: 1.7; margin: 0 0 16px; flex: 1; }

.catalog-card__actions{ display:flex; flex-direction: column; gap: 8px; margin-top: auto; }
.catalog-card__actions .btn{ width: 100%; text-align: center; }
.catalog-card__details-btn{
  width:100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--bg);
  font-size: 12.5px; font-weight: 700; color: var(--primary); transition: background .2s;
}
.catalog-card__details-btn:hover{ background: var(--line); }
.catalog-card__equiv-btn, .catalog-card__quote-btn{
  display:block; width:100%; text-align:center; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; transition: all .2s;
}
.catalog-card__equiv-btn.is-available{ background: rgba(30,145,99,0.1); color: #1E9163; }
.catalog-card__equiv-btn.is-available:hover{ background: rgba(30,145,99,0.2); }
.catalog-card__equiv-btn.is-unavailable{ background: rgba(107,114,128,0.08); color: var(--gray); }
.catalog-card__equiv-btn.is-unavailable:hover{ background: rgba(107,114,128,0.16); }
.catalog-card__quote-btn{ background: var(--secondary-text); color: #fff; }
.catalog-card__quote-btn:hover{ background: #9A4E0F; }

/* ---------- Detail modals ---------- */
.catalog-detail-modal{
  position: fixed; inset: 0; z-index: 1300; display:flex; align-items:center; justify-content:center;
  padding: 20px; background: rgba(15,39,68,0.65); opacity:0; pointer-events:none; transition: opacity .25s var(--ease);
}
.catalog-detail-modal.is-open{ opacity:1; pointer-events:auto; }
.catalog-detail-modal__inner{
  position: relative; background: var(--white); border-radius: var(--radius-lg); padding: 36px; max-width: 560px;
  width:100%; max-height: 85vh; overflow-y:auto; transform: translateY(16px); transition: transform .25s var(--ease);
  box-shadow: var(--shadow-lg);
}
.catalog-detail-modal.is-open .catalog-detail-modal__inner{ transform: translateY(0); }
.catalog-detail-modal__media{
  aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
}
.catalog-detail-modal__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.catalog-gallery__item{ aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; }
.catalog-gallery__item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.catalog-gallery__item:hover img{ transform: scale(1.05); }
@media (max-width: 640px){ .catalog-gallery{ grid-template-columns: repeat(2, 1fr); } }
.catalog-detail-modal__close{
  position:absolute; top: 16px; inset-inline-end: 16px; width: 32px; height:32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--gray); display:flex; align-items:center; justify-content:center;
  transition: background .2s, color .2s;
}
.catalog-detail-modal__close:hover{ background: var(--bg); color: var(--primary); }
.catalog-detail-modal h3{ margin: 14px 0 10px; font-size: 19px; }