/* =====================================================================
   InSci Food Solution — Page-specific styles (Products / Insight / Contact)
   ===================================================================== */

/* ---------- Shared: page hero ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 56px;
  background: var(--blue-700);
  position: relative;
  overflow: hidden;
}
.page-hero .dots {
  position:absolute; inset:0; opacity:.45;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.4px);
  background-size:26px 26px; pointer-events:none;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero .eyebrow { color: var(--green-300); }
.page-hero .eyebrow::before { background: var(--green-300); }
.page-hero h1 { color:#fff; font-size: clamp(36px,5vw,62px); margin-top:18px; }
.page-hero p { color: rgba(255,255,255,.72); font-size:19px; margin-top:16px; max-width:56ch; }
.page-hero .breadcrumb { display:flex; gap:8px; align-items:center; font-size:13.5px; color: rgba(255,255,255,.5); margin-bottom:20px; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.5); transition:color .2s; }
.page-hero .breadcrumb a:hover { color:#fff; }
.page-hero .breadcrumb svg { width:13px; height:13px; }

/* ---------- Sticky category tabs ---------- */
.cat-tabs-wrap {
  position:sticky; top: var(--header-h); z-index:50;
  background: rgba(251,252,249,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.cat-dropdown-row { display:flex; align-items:center; gap:16px; padding:16px 0; }
.cat-dropdown-label { font-size:13px; font-weight:700; color:#374151; white-space:nowrap; }
.cat-select {
  flex:1; max-width:420px; appearance:none; -webkit-appearance:none;
  padding:10px 40px 10px 16px; border:1.5px solid var(--line); border-radius:10px;
  font-size:14px; font-weight:600; color:var(--blue-700); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A2057' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor:pointer; font-family:var(--font-display);
}
.cat-select:focus { outline:none; border-color:var(--blue-700); }
.cat-prod-count { font-size:13px; color:var(--ink-400); margin-left:auto; }

/* ---------- Product grid & cards ---------- */
.prod-section { padding-block: clamp(64px,8vw,100px); border-bottom:1px solid var(--line); }
.prod-section:last-of-type { border-bottom:none; }
.prod-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:42px; }
.prod-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color:transparent; }
.prod-card image-slot { width:100%; height:180px; }
.prod-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.prod-cat { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.prod-body h3 { font-size:21px; margin-bottom:4px; }
.prod-inci { font-size:13px; color: var(--ink-400); font-style:italic; margin-bottom:12px; font-family:var(--font-mono); }
.prod-body > p { color: var(--ink-500); font-size:14.5px; line-height:1.6; margin-bottom:16px; flex:1; }
.prod-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.prod-tags span { font-size:12px; font-weight:500; padding:4px 11px; border-radius:var(--r-pill); background:var(--bg-sunken); color:var(--ink-700); }
@media(max-width:900px){ .prod-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .prod-grid { grid-template-columns: 1fr; } }

/* ---------- Insight / Blog ---------- */
.filter-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:48px; }
.filter-chip {
  padding:9px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:500;
  border:1.5px solid var(--line); color:var(--ink-500); cursor:pointer;
  background:#fff; transition:all .2s var(--ease);
}
.filter-chip:hover { border-color:var(--blue-700); color:var(--blue-700); }
.filter-chip.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }
.art-featured {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; margin-bottom:56px;
  transition: box-shadow .3s var(--ease);
}
.art-featured:hover { box-shadow: var(--sh-lg); }
.art-featured { align-items:stretch; }
.art-featured image-slot { width:100%; height:100%; min-height:380px; align-self:stretch; }
.art-featured-body { padding: 52px 52px 52px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.art-featured-body .art-tag { margin-bottom:16px; }
.art-featured-body h2 { font-size: clamp(24px,2.8vw,36px); line-height:1.18; margin-bottom:16px; }
.art-featured-body p { color:var(--ink-500); font-size:16px; line-height:1.65; margin-bottom:24px; flex:1; }
.art-meta-row { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.art-author { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-500); }
.art-author-av { width:32px; height:32px; border-radius:50%; background:var(--blue-100); color:var(--blue-700); display:grid; place-items:center; font-weight:700; font-family:var(--font-display); font-size:14px; }
.ins-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ins-grid-2 { grid-template-columns:repeat(2,1fr); }
.pagi { display:flex; gap:8px; justify-content:center; margin-top:60px; }
.pagi-btn {
  min-width:40px; height:40px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:14.5px; font-weight:600; cursor:pointer;
  background:#fff; color:var(--ink-700); transition:all .2s var(--ease);
}
.pagi-btn:hover, .pagi-btn.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }
@media(max-width:900px){ .art-featured { grid-template-columns:1fr; } .art-featured image-slot{height:260px;min-height:260px;} .ins-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .ins-grid{grid-template-columns:1fr;} }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:minmax(0,760px); justify-content:center; gap:64px; align-items:start; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.form-group label { font-size:14px; font-weight:600; color:var(--ink-700); }
.form-group .sub-label { font-size:12.5px; color:var(--ink-400); margin-top:-4px; }
.form-input {
  width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font-body); font-size:15.5px; color:var(--ink-900); background:#fff;
  outline:none; transition:border-color .2s; appearance:none;
}
.form-input:focus { border-color:var(--blue-700); box-shadow:0 0 0 3px rgba(44,54,145,.08); }
.form-input::placeholder { color:var(--ink-400); }
textarea.form-input { resize:vertical; min-height:140px; }
select.form-input { background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' stroke='%238B90A4' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.check-group { display:flex; flex-direction:column; gap:12px; }
.check-item { display:flex; align-items:center; gap:12px; cursor:pointer; }
.check-item input[type=checkbox] { width:18px; height:18px; accent-color:var(--blue-700); cursor:pointer; flex-shrink:0; }
.check-item span { font-size:15px; color:var(--ink-700); }
.contact-info { background: var(--blue-700); border-radius: var(--r-xl); padding:40px 36px; position:sticky; top:calc(var(--header-h) + 24px); }
.contact-info h3 { color:#fff; font-size:22px; margin-bottom:26px; }
.ci-row { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.ci-row svg { width:20px; height:20px; color: var(--green-300); flex-shrink:0; margin-top:2px; }
.ci-row .ci-label, .contact-info .ci-label { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--green-300); margin-bottom:5px; }
.ci-row p { color: rgba(255,255,255,.8); font-size:15px; line-height:1.55; }
.ci-row a { color: rgba(255,255,255,.8); transition:color .2s; }
.ci-row a:hover { color:#fff; }
.ci-divider { width:100%; height:1px; background:rgba(255,255,255,.1); margin-bottom:24px; }
.social-row { display:flex; gap:10px; margin-top:28px; }
.social-btn { width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:grid; place-items:center; color:rgba(255,255,255,.7); transition:all .2s; }
.social-btn:hover { background:var(--green-600); border-color:var(--green-600); color:#fff; }
.social-btn svg { width:18px; height:18px; }
.map-wrap { margin-top:32px; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.map-wrap image-slot { display:block; width:100%; height:240px; }
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} .contact-info{position:static;} .form-row{grid-template-columns:1fr;} }

/* ---------- Dairy Composition Table ---------- */
.comp-wrap { margin: 36px 0 32px; }
.comp-head { display:flex; align-items:baseline; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.comp-head h3 { font-size:20px; font-family:var(--font-display); font-weight:600; }
.comp-note { font-size:13px; color:var(--ink-400); }
.comp-table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; min-width:560px; }
.comp-table thead { background:var(--blue-700); color:#fff; }
.comp-table th { padding:10px 14px; text-align:left; font-weight:600; font-size:13px; letter-spacing:.04em; white-space:nowrap; }
.comp-table td { padding:10px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-700); }
.comp-table tbody tr:last-child td { border-bottom:none; }
.comp-table tbody tr:hover td { background:var(--green-50); }
.comp-table td:not(:first-child) { text-align:center; font-family:var(--font-mono); font-size:13px; color:var(--ink-900); }

/* ---------- Brands grid ---------- */
.brands-wrap { margin-bottom:40px; }
.brands-wrap h3 { font-size:20px; font-family:var(--font-display); font-weight:600; margin-bottom:16px; }
.brands-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.brand-item { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 16px; display:flex; flex-direction:column; gap:4px; }
.brand-prod { font-weight:600; font-size:14px; color:var(--ink-900); }
.brand-names { font-size:13px; color:var(--ink-500); line-height:1.5; }
@media(max-width:760px){ .brands-grid{ grid-template-columns:1fr; } }

/* ---------- Application tags on product detail ---------- */
.app-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.app-tag { font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--r-pill); background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-100); }
.map-full { position:relative; }
.map-full iframe { width:100%; height:480px; border:0; display:block; filter:saturate(.95); }
.map-card {
  position:absolute; top:50%; left:max(24px,calc((100vw - var(--container))/2 + 24px));
  transform:translateY(-50%);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:30px 32px; width:340px; max-width:calc(100vw - 48px);
}
.map-card .mc-eyebrow { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-700); margin-bottom:12px; }
.map-card h3 { font-size:21px; margin-bottom:10px; line-height:1.2; }
.map-card > p { color:var(--ink-500); font-size:15px; line-height:1.5; margin-bottom:18px; }
.map-card .mc-row { display:flex; gap:12px; align-items:center; font-size:14.5px; color:var(--ink-700); margin-bottom:10px; }
.map-card .mc-row svg { width:18px; height:18px; color:var(--green-600); flex-shrink:0; }
@media(max-width:760px){
  .map-full iframe { height:380px; }
  .map-card { position:static; transform:none; width:auto; margin:-60px 24px 0; }
}