/* ── Products & services: cards (product.php, "other services" on detail pages) + detail page layout ── */
.pc-sec{padding:56px 0 72px;background:#fff;}
.pc-head{text-align:center;margin-bottom:40px;}
.pc-head h1,.pc-head h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:#1a2a3a;margin-bottom:10px;}
.pc-head p{color:#64748b;font-size:.98rem;margin:0;}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.pc-grid.n3{grid-template-columns:repeat(3,1fr);}
.pc-card{display:flex;flex-direction:column;background:#fff;border:2px solid #dbe4ef;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s;}
.pc-card:hover,.pc-card:focus-visible{transform:translateY(-6px);box-shadow:0 20px 44px rgba(26,95,200,.14);border-color:rgba(26,95,200,.35);outline:none;color:inherit;}
.pc-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#eef3f9;}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.pc-card:hover .pc-img img{transform:scale(1.05);}
.pc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,9,26,.45),rgba(4,9,26,0) 45%);opacity:0;transition:opacity .3s;}
.pc-card:hover .pc-img::after{opacity:1;}
.pc-more{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);z-index:2;background:#fff;color:#1a5fc8;font-weight:700;font-size:.82rem;padding:8px 18px;border-radius:30px;box-shadow:0 6px 18px rgba(4,9,26,.18);opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;}
.pc-card:hover .pc-more{opacity:1;transform:translate(-50%,0);}
.pc-body{padding:18px 20px 22px;}
.pc-body h2,.pc-body h3{font-size:1.08rem;font-weight:800;color:#1a2a3a;margin:0 0 6px;line-height:1.35;}
.pc-body p{font-size:.86rem;color:#64748b;line-height:1.6;margin:0;}
@media(max-width:991.98px){ .pc-grid,.pc-grid.n3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:575.98px){ .pc-grid,.pc-grid.n3{grid-template-columns:1fr;gap:18px;} .pc-sec{padding:40px 0 56px;} .pc-more{opacity:1;transform:translate(-50%,0);} }

/* detail page */
.pd-sec{padding:40px 0 64px;background:#fff;}
.pd-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}
.pd-main{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#eef3f9;border:2px solid #dbe4ef;}
.pd-main img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
.pd-thumbs button{aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:2px solid #dbe4ef;padding:0;background:#eef3f9;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s;}
.pd-thumbs button.active,.pd-thumbs button:hover{opacity:1;border-color:#1a5fc8;}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-info{position:sticky;top:96px;}
.pd-info h1{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;color:#1a2a3a;margin:0 0 10px;line-height:1.25;}
.pd-info h2{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:700;color:#1a5fc8;line-height:1.5;margin:0 0 16px;}
.pd-info p{font-size:.98rem;color:#64748b;line-height:1.9;margin:0 0 22px;}
.pd-feats{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:12px;}
.pd-feats li{display:flex;align-items:center;gap:12px;font-size:.98rem;font-weight:600;color:#1a2a3a;}
.pd-feats li .fas{color:#00b4d8;font-size:1.05rem;}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;}
.pd-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:30px;font-weight:700;font-size:.92rem;text-decoration:none;transition:all .2s;}
.pd-btn.primary{background:#1a5fc8;color:#fff;}
.pd-btn.primary:hover{background:#154ea6;color:#fff;}
.pd-btn.ghost{border:1.5px solid #1a5fc8;color:#1a5fc8;}
.pd-btn.ghost:hover{background:#1a5fc8;color:#fff;}
.pd-other{padding:56px 0 64px;background:#f8fafc;}
@media(max-width:991.98px){ .pd-wrap{grid-template-columns:1fr;gap:28px;} .pd-info{position:static;} }
@media(max-width:575.98px){ .pd-sec{padding:24px 0 44px;} .pd-thumbs{gap:8px;} .pd-main{border-radius:14px;} }