/* ==========================================================================
   AZANSYS — Products catalogue (listing) + product detail.
   Built on the shared branded design system (agriculture.css +
   solution-pages.css) and the .agr-brand palette swap. Loaded last, so the
   .prd-* rules below refine that system without touching any global styles.
   ========================================================================== */

/* ---------- shared section heading accent ---------- */
.products-page .agr-section-head h2 span{color:var(--agr-green)}

/* ==========================================================================
   Listing — toolbar
   ========================================================================== */
.prd-catalogue{padding-top:58px}
.prd-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:2px 0 30px;padding:14px 16px;border:1px solid var(--agr-line);border-radius:14px;background:#f6faff}
.prd-toolbar form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1 1 auto}
.prd-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--agr-line);border-radius:10px;padding:0 13px;transition:border-color .2s,box-shadow .2s}
.prd-search:focus-within{border-color:#9ccaff;box-shadow:0 0 0 3px rgba(8,120,249,.12)}
.prd-search span{color:var(--agr-muted);font-size:14px}
.prd-search input{border:0;outline:0;background:transparent;padding:11px 0;font-size:13px;color:var(--agr-ink);min-width:180px}
.prd-select{padding:11px 13px;border:1px solid var(--agr-line);border-radius:10px;background:#fff;font-size:13px;color:var(--agr-ink)}
.prd-select:focus{outline:2px solid #9bc8ff;outline-offset:1px}
.prd-clear{font-size:12px;font-weight:700;color:var(--agr-green-dark);text-decoration:none}
.prd-clear:hover{text-decoration:underline}
.prd-count{font-size:12px;font-weight:750;letter-spacing:.02em;color:var(--agr-muted);white-space:nowrap}

/* ==========================================================================
   Listing — grid + cards
   ========================================================================== */
.prd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
.prd-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--agr-line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(23,87,149,.07);transition:transform .25s,box-shadow .25s,border-color .25s}
.prd-card:hover{transform:translateY(-5px);border-color:#9ccaff;box-shadow:0 18px 40px rgba(23,87,149,.15)}
.prd-card-media{position:relative;display:block;aspect-ratio:16/11;background:linear-gradient(135deg,#eef5ff,#e0ecfb);overflow:hidden}
.prd-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.prd-card:hover .prd-card-media img{transform:scale(1.06)}
.prd-card-noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;opacity:.5}
.prd-card-cat{position:absolute;top:12px;left:12px;background:#ffffffe8;color:var(--agr-green-dark);border-radius:20px;padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 10px rgba(9,37,74,.12)}
.prd-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;flex:1}
.prd-card-body h3{margin:0;font-size:16.5px;line-height:1.25;letter-spacing:-.2px}
.prd-card-body h3 a{color:inherit;text-decoration:none}
.prd-card-body h3 a:hover{color:var(--agr-green-dark)}
.prd-card-desc{margin:0;font-size:12.5px;line-height:1.6;color:var(--agr-muted)}
.prd-card-specs{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.prd-card-specs li{background:#eef6ff;color:#0f3f77;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:650}
.prd-card-tags{display:flex;gap:7px;flex-wrap:wrap}
.prd-tag{background:#e6f4ea;color:#166534;border-radius:20px;padding:4px 11px;font-size:10.5px;font-weight:750}
.prd-card-foot{margin-top:auto;padding-top:4px}
.prd-card-foot .agr-button{width:100%}

/* ==========================================================================
   Listing — empty state + pagination
   ========================================================================== */
.prd-empty{padding:56px 30px;text-align:center;border:1px dashed var(--agr-line);border-radius:16px;background:#f7fbff;display:grid;gap:12px;justify-items:center}
.prd-empty h3{margin:0;font-size:20px;font-weight:850}
.prd-empty p{margin:0;max-width:480px;font-size:13px;line-height:1.65;color:var(--agr-muted)}
.prd-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.prd-pager a,.prd-pager span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 15px;border-radius:11px;border:1px solid var(--agr-line);background:#fff;color:var(--agr-ink);text-decoration:none;font-size:13px;font-weight:650;transition:border-color .2s,background .2s,color .2s}
.prd-pager a:hover{border-color:#9ccaff;background:#f2f8ff}
.prd-pager .active{background:var(--agr-green);border-color:var(--agr-green);color:#fff}
.prd-pager .is-disabled{opacity:.42;pointer-events:none}

/* ==========================================================================
   Detail — head
   ========================================================================== */
.prd-detail-head{max-width:var(--agr-max);margin-inline:auto;padding:46px 5.5% 4px}
.prd-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--agr-muted);margin:0 0 16px}
.prd-breadcrumb a{color:var(--agr-green-dark);text-decoration:none;font-weight:650}
.prd-breadcrumb a:hover{text-decoration:underline}
.prd-detail-head h1{font-size:clamp(30px,3.6vw,46px);line-height:1.04;letter-spacing:-1.4px;font-weight:900;margin:0}
.prd-detail-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}
.prd-chip{border:1px solid var(--agr-line);background:#f2f8ff;color:#0f3f77;border-radius:20px;padding:5px 13px;font-size:11.5px;font-weight:700}

/* ==========================================================================
   Detail — gallery + summary
   ========================================================================== */
.prd-detail-grid{max-width:var(--agr-max);margin-inline:auto;padding:30px 5.5% 8px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.prd-gallery{border:1px solid var(--agr-line);border-radius:18px;overflow:hidden;background:#f4f9ff;box-shadow:0 10px 26px rgba(23,87,149,.08)}
.prd-gallery img{width:100%;height:auto;display:block}
.prd-gallery-empty{padding:70px 20px;text-align:center;color:var(--agr-muted);font-size:13px}
.prd-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.prd-thumb{width:88px;height:68px;border-radius:10px;border:1px solid var(--agr-line);overflow:hidden;padding:0;background:#fff;cursor:pointer;transition:border-color .2s,transform .2s}
.prd-thumb:hover{border-color:#9ccaff;transform:translateY(-2px)}
.prd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prd-summary .lead{margin:0;font-size:14px;line-height:1.72;color:var(--agr-muted)}
.prd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:12px;margin:22px 0}
.prd-tile{background:#f2f8ff;border:1px solid var(--agr-line);border-radius:12px;padding:12px 14px}
.prd-tile small{display:block;text-transform:uppercase;letter-spacing:.06em;color:var(--agr-muted);font-size:10.5px;font-weight:700;margin-bottom:4px}
.prd-tile b{font-size:15px;color:var(--agr-ink)}
.prd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.prd-video-link{margin:16px 0 0;font-size:13px}
.prd-video-link a{color:var(--agr-green-dark);font-weight:700;text-decoration:none}
.prd-video-link a:hover{text-decoration:underline}

/* ==========================================================================
   Detail — overview, applications, related
   ========================================================================== */
.prd-specblock{margin-top:22px;border:1px solid var(--agr-line);border-radius:14px;background:#fff;padding:22px 24px;box-shadow:0 5px 16px rgba(23,87,149,.05)}
.prd-specblock h3{margin:0 0 12px;font-size:14px;font-weight:850;padding-bottom:12px;border-bottom:1px solid #eaf2fb}
.prd-overview .sol-prose p{white-space:pre-line}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .prd-detail-grid{grid-template-columns:1fr;gap:26px}
  .prd-detail-head{padding-top:34px}
}
@media(max-width:620px){
  .prd-grid{grid-template-columns:1fr}
  .prd-toolbar form{width:100%}
  .prd-search{width:100%}
  .prd-search input{min-width:0;width:100%}
  .prd-select{flex:1 1 auto}
}