/* ============================================================
   Riben Hopper Pte Ltd — Products page
   Loaded AFTER style.css + about.css (reuses tokens & .page-banner).
   ============================================================ */

/* standalone banner (no left grid) keeps bottom padding + rule */
.page-banner.solo{ padding-block:var(--page-header-offset) 0; }

/* ============================================================
   RELIABLE RUBBISH CHUTE PRODUCTS (intro, light bg continues banner)
   ============================================================ */
.prod-intro{ padding-block:var(--page-header-offset) clamp(36px,5vw,64px); }
.prod-intro .grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,80px);
  align-items:center; text-align:left; margin-top:clamp(24px,4vw,44px);
}
.prod-intro h2{ font-weight:700; line-height:1.1; letter-spacing:-.01em;
  font-size: clamp(2rem, 4.4vw, 3.4rem); max-width:14ch; }
.prod-intro p{ color:#263040; margin-top:1.3rem; line-height:1.5; }
.prod-intro p + p{ margin-top:1.1rem; }
.prod-intro .shots{ display:grid; align-items:center; }
.prod-intro .shots .ph{ aspect-ratio:1.5; border-radius:10px; }

/* ============================================================
   PRODUCT FEATURE BLOCK (HDB / Condo) — image + copy + chip row
   ============================================================ */
.pfeature .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px);
  align-items:center; }
.pfeature.alt .split{ }
.pfeature .media .ph{ width:100%; aspect-ratio:4/3; border-radius:12px; }
.pfeature h2{ font-weight:700; line-height:1.1; }
.pfeature p{ margin-top:1.3rem; line-height:1.5; }
.pfeature p + p{ margin-top:1.1rem; }

.chip-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(36px,4vw,56px); }
.chip{ display:flex; align-items:center; gap:20px; padding:20px 40px;
  border-radius:10px; font-weight:600; font-size:17px; line-height:1.3; }
.chip .c-ic{ width:40px; height:40px; flex:none; color:var(--red); }
.chip .c-ic .icon{ width:100%; height:100%; stroke-width:1.6; }
.chip .c-ic img,
.why-prod .wc-ic img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* light variant (HDB) */
.pfeature.light{ background:var(--cream); }
.pfeature.light .copy{ color:var(--ink); }
.pfeature.light p{ color:#263040; }
.pfeature.light .chip{ background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px -22px rgba(0,0,0,.5); }

/* dark variant (Condo) */
.pfeature.dark{ background:var(--navy-deep); color:#fff; }
.pfeature.dark h2{ color:#fff; }
.pfeature.dark p{ color:#fff; }
.pfeature.dark .chip{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; }
.pfeature.dark .chip .c-ic{ color:#fff; }

/* ============================================================
   RUBBER SEAL PROTECTION (red banner)
   ============================================================ */
.seal{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,var(--red-prod-a),var(--red-prod-b)); }
.seal .split{ position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.seal .media .ph{ width:100%; aspect-ratio:5/4; border-radius:12px;
  background-color:#8f211d; }
.seal .media .ph.dark span{ color:#f0c9c7; border-color:rgba(255,255,255,.3);
  background:rgba(0,0,0,.18); }
.seal h2{ color:#fff; font-weight:700; }
.seal p{ color:#f3dad8; margin-top:1.4rem; line-height:1.5; max-width:48ch; }

/* ============================================================
   USER MANUAL GUIDE — reuses .manual from style.css (no overrides)
   ============================================================ */

/* ============================================================
   WHY CHOOSE RIBEN PRODUCTS
   ============================================================ */
.why-prod{ background:var(--cream-2); text-align:center; }
.why-prod .grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px); margin-top:clamp(40px,5vw,64px); text-align:left; }
.why-prod .wc-ic{ width:42px; height:42px; color:var(--red); margin-bottom:1.1rem; }
.why-prod .wc-ic .icon{ width:100%; height:100%; stroke-width:1.5; }
.why-prod .wc-item h3{ font-size:24px; font-weight:700; line-height:1.25; min-height: 60px;}
.why-prod .wc-item p{ color:#56606e; margin-top:.7rem; font-size:17px; line-height:1.5; }

/* ============================================================
   FUNCTIONS & ADVANTAGES (video grid)
   ============================================================ */
.videos{ text-align:center; }
.videos h2{ max-width:18ch; margin-inline:auto; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,32px);
  margin-top:clamp(40px,5vw,64px); }
.video-card .ph{ width:100%; aspect-ratio:16/9; border-radius:10px; }
.video-card .ph .play{ position:absolute; inset:0; display:grid; place-items:center; }
.video-card .ph .play svg{ width:58px; height:58px; }

/* ============================================================
   ENQUIRE (reuses .contact from style.css)
   ============================================================ */
.products-contact{ display:block; background-color:#e9ecf0; }
.products-contact .inner{ max-width:760px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .prod-intro .grid, .pfeature .split, .seal .split, .manual .split{ grid-template-columns:1fr; }
  .prod-intro .grid > .copy{ max-width:620px; }
  .why-prod .grid{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .chip-row{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .manual .media, .seal .media, .pfeature.dark .media{ order:-1; }
  .pfeature.light .media{ order:-1; }
}
@media (max-width:640px){
  .why-prod .grid, .video-grid, .chip-row{ grid-template-columns:1fr; }
  .why-prod .wc-item h3{ min-height:0; }
}

/* ============================================================
   UPDATE 22/06 — new & updated sections
   ============================================================ */

/* ── CHIPS: layout update (5 → 8, grid 4-col → 2-col per row wrap) ── */
.chip-row{
  display:flex; flex-wrap:wrap;
  gap:clamp(10px,1.5vw,16px);
  margin-top:clamp(28px,3.5vw,48px);
}
.chip{
  flex:1 1 calc(25% - 12px); min-width:220px;
  display:flex; align-items:center; gap:16px;
  padding:16px 24px; border-radius:10px;
  font-weight:600; font-size:clamp(14px,1.2vw,17px); line-height:1.3;
}

/* WhatsApp chip — green, clickable */
.chip-whatsapp{
  background:#25d366 !important;
  border-color:#25d366 !important;
  color:#fff !important;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.chip-whatsapp:hover{
  background:#1ebe5a !important;
  transform:translateY(-2px);
}
.chip-whatsapp .c-ic{
  color:#25d366 !important;
}
.pfeature.dark .chip-whatsapp,
.pfeature.light .chip-whatsapp{
  background:#25d366 !important;
  border-color:#25d366 !important;
  color:#fff !important;
}

/* price label */
.product-price{
  display:inline-flex; align-items:baseline; gap:.4em;
  font-size:30px; font-weight:600;
  margin-top:.5rem; margin-bottom:.2rem;
}
.product-price span{
  font-size:40px; font-weight:800; color:var(--red);
}
.pfeature.dark .product-price{ color:rgba(255,255,255,.85); }
/*.pfeature.dark .product-price span{ color:#fff; }*/

/* ── FEATURES & SIZES ── */
.features-sizes{ background:#fff; }
.features-sizes .h-section{
  text-align:center;
  margin-bottom:clamp(36px,4vw,52px);
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.8vw,20px);
  align-items: start;
}
.feature-card{
  display:flex; flex-direction:column; align-items:center; background: #F4F3F0; border-radius: 10px;
  height: 100%;
}
.feature-card .ph{
  width:100%; aspect-ratio:1/1;
  overflow:hidden;
  background-color:#dedad2;
  background-image:repeating-linear-gradient(
    45deg, rgba(0,0,0,.04) 0 10px, transparent 10px 20px);
}
.feature-label{
  font-size:17px; font-weight:600; text-align:center;
  color:#212731; line-height:1.35; margin:0;
  padding: 10px;
  background: #F4F3F0;
  border-radius: 0 0 10px 10px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ── PRODUCT QUALIFICATIONS & CERTIFICATIONS ── */
.certifications{ background:var(--white); }
.certifications .h-section{
  text-align:center;
  margin-bottom:clamp(36px,4vw,52px);
}
.cert-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(12px,1.8vw,20px);
  align-items:start;
  overflow-x:auto;
}
.cert-card{
  flex:1 1 0;
  min-width:0;
}
.cert-card a{
  display:block;
  text-decoration:none;
}
.cert-ph{
  width:100%; aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:#ece9e1;
  background-image:repeating-linear-gradient(
    45deg, rgba(0,0,0,.05) 0 10px, transparent 10px 20px);
  box-shadow:0 8px 28px -16px rgba(0,0,0,.22);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cert-card a:hover .cert-ph{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.32);
}

/* ── WHEN DO YOU NEED TO CHANGE ── */
.when-change{ background:var(--navy-deep); color:#fff; }
.when-change .h-section{
  color:#fff; text-align:center;
  margin-bottom:clamp(36px,4vw,52px);
}
.when-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.8vw,20px);
}
.when-card{
  display:flex; flex-direction:column; align-items:center; gap:.8rem;background: #F4F3F0;
    padding: 15px; border-radius: 15px;
}
.when-card .ph{
  width:100%; aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  background-color:#2b3645;
  background-image:repeating-linear-gradient(
    45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
}
.when-label{
  font-size:.78rem; font-weight:600; text-align:center;
  color:rgba(255,255,255,.85); line-height:1.35; margin:0;
  font-size: 17px;
    color: #212731;
    text-transform: capitalize;
}

/* ── TESTIMONIALS (pulled from Home) ── */
/* ── TESTIMONIALS — reuses .testi classes from style.css (no overrides needed) ── */

/* ── OUR VIDEO: YouTube iframe embeds ── */
.yt-embed-wrap{
  position:relative; width:100%; padding-bottom:56.25%;
  border-radius:10px; overflow:hidden;
  background:#111;
  box-shadow:0 10px 32px -16px rgba(0,0,0,.35);
}
.yt-embed-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:none; display:block;
}
.yt-embed-placeholder{ background:#f0eee9; }
.yt-embed-placeholder span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:#999;
  padding:1rem; text-align:center; line-height:1.5;
}

/* ── RESPONSIVE (new sections) ── */
@media (max-width:1024px){
  .features-grid,
  .when-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .features-grid,
  .when-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-grid{ flex-wrap:wrap; }
  .cert-card{ flex:1 1 calc(50% - 10px); max-width:calc(50% - 10px); }
  .video-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .chip{ flex-basis:100%; min-width:0; font-size:17px;}
}