/* =====================================================================
   Servolink — site-wide "Our Products" section
   Fully self-scoped under .showcase so it can drop into ANY page
   (including the legacy Bootstrap pages) without touching their styles.
   ===================================================================== */

.showcase{
  --sc-red:var(--red,#FF2836);
  --sc-red-deep:var(--red-deep,#D01E2A);
  --sc-ink:#1B1C1F;
  --sc-grey:#5B5F66;
  --sc-line:#D7D9DC;
  --sc-soft:#F7F6F4;
  background:#fff;padding:58px 0;border-top:1px solid var(--sc-line);
  font-family:'Poppins',system-ui,sans-serif;color:var(--sc-ink);line-height:1.55
}
.showcase *{box-sizing:border-box}
.showcase a{text-decoration:none;color:inherit}
.showcase img{max-width:100%;display:block}
.sc-wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------------- heading ---------------- */
.sc-head{text-align:center;margin-bottom:30px}
.sc-eyebrow{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--sc-red);margin-bottom:4px
}
.showcase h2{
  font-family:'Poppins',sans-serif;font-size:29px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;margin:0;padding-bottom:14px;display:inline-block;position:relative;line-height:1.15
}
.showcase h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:62px;height:2px;background:var(--sc-red)
}
.sc-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.sc-cats a{
  border:1px solid var(--sc-line);border-radius:20px;padding:6px 15px;font-size:12.5px;
  font-weight:600;color:var(--sc-grey);transition:.2s;background:#fff
}
.sc-cats a:hover{border-color:var(--sc-red);color:var(--sc-red)}

/* ---------------- cards ----------------
   The same .pc card the home page uses, copied here so inner pages get the
   identical design without pulling in the whole 60 KB home-shop.css. */
.showcase .p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.showcase .pc{
  border:1px solid var(--sc-line);border-radius:6px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.28s;position:relative
}
.showcase .pc:hover{box-shadow:0 14px 32px rgba(0,0,0,.10);transform:translateY(-4px)}
.showcase .pc-img{position:relative;background:var(--sc-soft);aspect-ratio:1/1;overflow:hidden}
.showcase .pc-img img{width:100%;height:100%;object-fit:contain;padding:4px;transition:.5s}
.showcase .pc:hover .pc-img img{transform:scale(1.06)}
.showcase .pc-tag{
  position:absolute;top:0;left:0;background:var(--sc-red);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 22px;
  transform:rotate(-45deg) translate(-24px,-2px);transform-origin:center;width:110px;text-align:center
}
.showcase .pc-wish{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#fff;
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);transition:.2s;padding:0
}
.showcase .pc-wish svg{width:15px;height:15px;stroke:var(--sc-ink);fill:none;stroke-width:2}
.showcase .pc-wish:hover,.showcase .pc-wish.on{background:var(--sc-red)}
.showcase .pc-wish:hover svg,.showcase .pc-wish.on svg{stroke:#fff;fill:#fff}
.showcase .pc-rate{
  position:absolute;left:10px;bottom:10px;background:#fff;border-radius:3px;
  font-size:11px;font-weight:700;padding:2px 7px;display:flex;align-items:center;gap:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.12)
}
.showcase .pc-rate i{color:#F5A623;font-style:normal}
.showcase .pc-body{padding:12px 13px 0;flex:1}
.showcase .pc-body .brand{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:14px;font-weight:700;margin-bottom:3px;min-width:0
}
.showcase .pc-body .brand > a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.showcase .pc-body .brand > a:hover{color:var(--sc-red)}
.showcase .pc-swatch{display:flex;align-items:center;gap:3px;flex-shrink:0}
.showcase .pc-swatch em{font-style:normal;font-size:10.5px;color:var(--sc-grey)}
.showcase .pc-body .title{font-size:12.5px;color:var(--sc-grey);margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.showcase .pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:11px}
.showcase .pc-price .now{font-size:15px;font-weight:800}
.showcase .pc-price .was{font-size:12.5px;color:var(--sc-grey);text-decoration:line-through}
.showcase .pc-price .off{font-size:12px;color:var(--sc-red);font-weight:700}
.showcase .pc-offer{
  border-top:1px solid var(--sc-line);padding:8px 13px;font-size:11.5px;color:var(--sc-grey);
  display:flex;align-items:center;gap:6px
}
.showcase .pc-offer svg{width:13px;height:13px;stroke:var(--sc-red);fill:none;stroke-width:2;flex-shrink:0}
.showcase .pc-actions{display:flex;gap:6px;padding:0 13px 12px}
.showcase .pc-actions a{
  flex:1;text-align:center;font-size:12px;font-weight:600;padding:8px 4px;border-radius:4px;transition:.2s
}
.showcase .pc-actions .add{background:var(--sc-red);color:#fff}
.showcase .pc-actions .add:hover{background:var(--sc-red-deep);color:#fff}
.showcase .pc-actions .view{border:1px solid var(--sc-line);color:var(--sc-ink)}
.showcase .pc-actions .view:hover{border-color:var(--sc-ink)}

/* ---------------- footer CTA ---------------- */
.sc-cta{text-align:center;margin-top:32px}
.sc-cta a{
  display:inline-flex;align-items:center;gap:8px;background:var(--sc-red);color:#fff;
  font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  padding:12px 24px;border-radius:4px;transition:.25s
}
.sc-cta a:hover{background:var(--sc-red-deep);gap:12px;color:#fff}
.sc-cta svg{width:14px;height:14px}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){.showcase .p-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  .showcase{padding:42px 0}
  .showcase h2{font-size:23px}
}
@media (max-width:640px){
  .showcase .p-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .showcase .pc-body{padding:10px 10px 0}
  .showcase .pc-body .brand{font-size:13px}
  .showcase .pc-actions{padding:0 10px 10px;flex-direction:column}
  .showcase .pc-offer{padding:7px 10px;font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.showcase *{transition:none!important}}