/* Products page (list + detail) */
.page-head{background:var(--teal); color:#fff; padding:72px 0 64px;}
.page-head h1{color:#fff; font-size:clamp(32px,4.2vw,52px); max-width:20ch;}
.page-head p{margin-top:16px; max-width:56ch; color:rgba(255,255,255,0.8); font-size:18px;}
.crumbs{margin-bottom:22px; font-size:14px;}
.crumbs a{color:var(--lime); text-decoration:none; font-weight:600;}
.crumbs a:hover{text-decoration:underline;}

/* ----- list view: icon + name only ----- */
.list-section{padding:72px 0 96px;}
.product-list{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.product-row{display:flex; align-items:center; gap:18px; padding:26px 26px; text-decoration:none; color:inherit; background:var(--white); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background-color .15s;}
.product-row:hover{background:#EEF3EA;}
.row-icon{width:56px; height:56px; flex-shrink:0; border:2px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.row-icon img{width:100%; height:100%; object-fit:cover;}
.row-icon svg{width:28px; height:28px; stroke:var(--teal);}
.row-name{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.2; flex:1;}
.row-arrow{color:var(--link); font-weight:700; font-size:20px;}
.product-row:hover .row-arrow{transform:translateX(3px);}
.empty-note{color:var(--muted);}

/* ----- detail view ----- */
.detail{padding:64px 0 88px;}
.detail-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;}
.detail-media{position:relative; margin:0 0 24px 0;}
.detail-media .shot{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); background:#E9EDE7;}
.detail-media .shot-empty{width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--muted); border:1px dashed #AAB3B0; background:#EEF1EC;}
.detail-media::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; background:var(--lime);}
.detail-icon{position:absolute; left:16px; top:16px; width:60px; height:60px; background:var(--white); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:1;}
.detail-icon img{width:100%; height:100%; object-fit:cover;}
.detail-icon svg{width:30px; height:30px; stroke:var(--teal);}
.detail-text h2{font-size:clamp(26px,3vw,38px);}
.detail-text .desc{margin-top:18px; color:var(--ink-soft); font-size:18px; line-height:1.65; white-space:pre-line;}
.detail-text h3{margin-top:34px; font-size:18px;}
.feature-list{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;}
.feature-list li{position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--ink-soft);}
.feature-list li::before{content:""; position:absolute; left:0; top:0.55em; width:10px; height:3px; background:var(--lime-text);}
.detail-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}

/* ----- other products ----- */
.others{background:var(--white); border-top:1px solid var(--line); padding:64px 0;}
.others h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:28px;}

/* ----- enquiry ----- */
.enquiry{background:var(--paper); border-top:1px solid var(--line);}
.enquiry-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px;}
.enquiry h2{font-size:clamp(26px,3vw,38px);}
.enquiry .intro{margin:14px 0 30px; color:var(--muted);}
.contact-card{background:var(--white); border:1px solid var(--line); padding:32px; align-self:start;}
.contact-card .item{padding:16px 0; border-bottom:1px solid var(--line);}
.contact-card .item:first-child{padding-top:0;}
.contact-card .item:last-child{border-bottom:none; padding-bottom:0;}
.contact-card b{display:block; font-family:var(--font-display); font-size:15px; margin-bottom:4px;}
.contact-card span, .contact-card a{color:var(--ink-soft); text-decoration:none;}

@media (max-width: 1000px){
  .product-list{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 900px){
  .page-head{padding:48px 0;}
  .detail-grid, .enquiry-grid{grid-template-columns:1fr; gap:44px;}
  .feature-list{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .product-list{grid-template-columns:1fr;}
}

/* keep long product names (e.g. in the dropdown) from stretching the layout on small screens */
.detail-grid > *, .enquiry-grid > *{min-width:0;}
.field select{max-width:100%; text-overflow:ellipsis;}

/* long product names must wrap inside the row instead of widening it */
.product-row{min-width:0;}
.row-name{min-width:0; overflow-wrap:anywhere;}