/* ==========================================================================
   Concrete Pump Pipe & Parts section — styles for the new pages
   Inherits the look of the existing site (css/index.css); desktop-first,
   with a mobile block at the bottom (same 1000px breakpoint as mobile-fix.css)
   ========================================================================== */

/* sidebar group title long enough to wrap onto two lines (the site's .asc is
   fixed at 18px high, so a 2-line title would overlap the links below it).
   French labels are longer, so this applies to every group title. */
.amleft .asc{ width:auto; height:auto; min-height:18px; line-height:19px; padding-right:8px; }

/* language switcher — right-aligned line at the top of the content column
   (the logo image is 981px wide, so a floating header switcher overlapped it) */
.lang-switch{ text-align:right; font-size:12px; color:#666; padding:0 0 6px; line-height:18px; }
.lang-switch a{ color:#0a7bbd; text-decoration:none; font-weight:bold; }
.lang-switch a:hover{ color:#f43000; }
.lang-switch span{ color:#ccc; margin:0 6px; }
.lang-switch strong{ color:#333; font-weight:bold; }
@media (max-width:1000px){ .lang-switch{ font-size:13px; } }

/* sidebar PRODUCTS heading as a link to the products overview */
.atop a{ color:inherit; text-decoration:none; }
.atop a:hover{ color:#f43000; }

/* products overview page (product.html) */
.ov-intro{ font-size:13px; line-height:21px; color:#555; margin-bottom:18px; }
.ov-section{ margin-bottom:28px; }
.ov-section h2{ font-size:17px; color:#333; border-bottom:1px solid #ef6500; padding-bottom:6px; margin-bottom:14px; }
.ov-section h2 a{ color:#333; text-decoration:none; }
.ov-section h2 a:hover{ color:#f43000; }
.ov-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.ov-card{ width:174px; border:1px #e2e2e2 solid; background:#fff; padding:8px; box-sizing:border-box; }
.ov-card img{ display:block; width:100%; height:126px; object-fit:contain; background:#fff; }
.ov-card .t{ font-size:12px; line-height:17px; min-height:34px; padding-top:7px; }
.ov-card .t a{ color:#333; text-decoration:none; }
.ov-card .t a:hover{ color:#f43000; }
.ov-card .s{ font-size:11px; color:#8a8a8a; line-height:16px; min-height:32px; }
.ov-card .m{ font-size:12px; padding-top:4px; }
.ov-card .m a{ color:#f43000; text-decoration:none; }
.ov-card.wide{ width:270px; }
@media (max-width:1000px){
  .ov-card, .ov-card.wide{ width:calc(50% - 7px); }
  .ov-card img{ height:140px; }
}
@media (max-width:560px){
  .ov-card, .ov-card.wide{ width:100%; }
}

/* breadcrumbs */
.cpp-crumbs{ font-size:12px; color:#666; padding:8px 0 12px; border-bottom:1px #CCC solid; margin-bottom:16px; }
.cpp-crumbs a{ color:#000; text-decoration:none; }
.cpp-crumbs a:hover{ color:#f43000; }
.cpp-crumbs .here{ color:#666; }
.cpp-crumbs .sep{ color:#bbb; margin:0 4px; }

/* page head */
.cpp-head{ margin-bottom:18px; }
.cpp-head h1{ font-size:20px; color:#333; font-weight:bold; line-height:28px; padding-bottom:8px; }
.cpp-head p{ font-size:13px; line-height:22px; color:#555; }

/* groups */
.cpp-group{ margin-bottom:26px; }
.cpp-group h2{ font-size:17px; color:#333; border-bottom:1px solid #ef6500; padding-bottom:6px; margin-bottom:14px; }
.cpp-group h2 a{ color:#333; text-decoration:none; }
.cpp-group h2 a:hover{ color:#f43000; }
.cpp-sub{ font-size:14px; color:#333; margin:16px 0 10px; padding-left:8px; border-left:4px solid #ef6500; }
.cpp-sub a{ color:#333; text-decoration:none; }
.cpp-sub a:hover{ color:#f43000; }
.cpp-count{ color:#999; font-size:12px; font-weight:normal; }
.cpp-more{ margin-top:12px; font-size:13px; }
.cpp-more a{ color:#f43000; text-decoration:none; }

/* product grid + cards */
.cpp-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.cpp-card{ width:232px; border:1px #e2e2e2 solid; background:#fff; padding:8px; box-sizing:border-box; }
.cpp-card img{ display:block; width:100%; height:174px; object-fit:contain; background:#fff; }
.cpp-card-name{ font-size:12px; line-height:18px; min-height:54px; padding:8px 4px 0; }
.cpp-card-name a{ color:#333; text-decoration:none; }
.cpp-card-name a:hover{ color:#f43000; }
.cpp-card-more{ font-size:12px; padding:2px 4px 4px; }
.cpp-card-more a{ color:#f43000; text-decoration:none; }

/* detail page */
.cpp-detail h1{ font-size:20px; color:#333; line-height:28px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px #CCC solid; }
.cpp-gallery{ float:left; width:330px; margin:0 20px 16px 0; }
.cpp-main{ display:block; border:1px #e2e2e2 solid; padding:6px; background:#fff; }
.cpp-main img{ display:block; width:100%; height:300px; object-fit:contain; }
.cpp-thumbs{ margin-top:8px; }
.cpp-thumbs img{ width:58px; height:58px; object-fit:cover; border:1px #e2e2e2 solid; margin:0 6px 6px 0; cursor:pointer; }
.cpp-thumbs img:hover{ border-color:#ef6500; }
.cpp-thumbs img.on{ border-color:#ef6500; box-shadow:0 0 0 2px rgba(239,101,0,.25); }
.cpp-main{ cursor:zoom-in; }
.cpp-hint{ clear:both; font-size:11px; color:#888; margin:2px 0 0; }
.cpp-back{ margin:10px 0 0; font-size:12px; }
.cpp-back a{ color:#f43000; text-decoration:none; }
.cpp-back a:hover{ text-decoration:underline; }
.cpp-card.cpp-target{ border-color:#ef6500; box-shadow:0 0 0 2px rgba(239,101,0,.35); }

/* image lightbox */
.cpp-lightbox{ display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:9998; background:rgba(20,20,20,.88); }
.cpp-lightbox.open{ display:block; }
.cpp-lightbox img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:88vw; max-height:84vh; background:#fff; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.cpp-lb-close{ position:absolute; right:18px; top:14px; width:44px; height:44px; line-height:40px; text-align:center; font-size:30px; color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.5); cursor:pointer; }
.cpp-lb-close:hover{ background:#ef6500; border-color:#ef6500; }
.cpp-lb-prev,.cpp-lb-next{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:64px; font-size:40px; line-height:60px; text-align:center; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35); cursor:pointer; }
.cpp-lb-prev{ left:16px; }
.cpp-lb-next{ right:16px; }
.cpp-lb-prev:hover,.cpp-lb-next:hover{ background:#ef6500; border-color:#ef6500; }
.cpp-lb-count{ position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#eee; font-size:13px; }
.cpp-lightbox.single .cpp-lb-prev,.cpp-lightbox.single .cpp-lb-next{ display:none; }
.cpp-body{ float:left; width:400px; font-size:13px; line-height:21px; color:#444; }
.cpp-body h3{ font-size:14px; color:#333; margin:14px 0 6px; }
.cpp-body p{ margin-bottom:8px; }
.cpp-body ul{ margin:0 0 10px 18px; }
.cpp-body li{ list-style:disc; font-size:13px; line-height:20px; }
.cpp-body img{ max-width:100%; height:auto; }
.cpp-body table{ width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:12px; }
.cpp-body table td,.cpp-body table th{ border:1px solid #ddd; padding:5px 7px; vertical-align:middle; }
.cpp-body table tr:first-child td{ background:#f7f7f7; font-weight:bold; }

/* inquiry box */
.cpp-cta{ clear:both; margin-top:22px; padding:14px 16px; border:1px solid #e2e2e2; border-left:4px solid #ef6500; background:#fafafa; font-size:13px; line-height:22px; }
.cpp-cta p{ margin-bottom:4px; }
.cpp-cta a{ color:#f43000; text-decoration:none; }
.cpp-cta a:hover{ text-decoration:underline; }

/* ---------- mobile ---------- */
@media (max-width: 1000px){
  .cpp-grid{ gap:10px; }
  .cpp-card{ width:calc(50% - 5px); }
  .cpp-card img{ height:150px; }
  .cpp-card-name{ height:auto; min-height:44px; }
  .cpp-gallery{ float:none; width:100%; margin:0 0 14px; }
  .cpp-main img{ height:240px; }
  .cpp-body{ float:none; width:100%; }
  .cpp-head h1,.cpp-detail h1{ font-size:18px; line-height:26px; }
  .cpp-body table{ display:block; overflow-x:auto; }
}
@media (max-width: 560px){
  .cpp-card{ width:100%; }
}