/* Product page extras: photo cards for related products, technical resources, PU sleeve gallery and customisation. */

/* Related products ("Complete the system") with real photos */
.compat-card{display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;background:var(--white);transition:border-color .2s,box-shadow .2s;}
.compat-card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(6,38,63,.08);}
.compat-card .compat-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:12px;background:#fff;border-bottom:1px solid var(--line-soft);}
.compat-card h5{font-size:15px;padding:14px 16px 0;color:var(--navy);}
.compat-card p{font-size:12.5px;color:#4B6066;padding:4px 16px 16px;margin:0;}
.connection-links.has-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.connection-links.has-photos a{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--white);font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;}
.connection-links.has-photos a:hover{border-color:var(--teal);}
.connection-links.has-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:12px;background:#fff;border-bottom:1px solid var(--line-soft);}
.connection-links.has-photos .link-name{padding:12px 14px;}
@media (max-width:900px){.connection-links.has-photos{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.compat-grid{grid-template-columns:1fr 1fr;}.connection-links.has-photos{grid-template-columns:1fr 1fr;}.compat-card h5{font-size:13.5px;padding:10px 12px 0;}.compat-card p{padding:4px 12px 12px;}}

/* Technical resources block */
.tech-resources{margin:0 0 28px;}
.tech-resources h3.tech-resources-title{font-size:18px;margin:0 0 14px;color:var(--navy);}
.tech-resources .document-card{display:flex;flex-direction:column;}
.tech-resources .document-actions{margin-top:auto;padding-top:16px;}
@media (max-width:700px){.tech-resources .document-grid{grid-template-columns:1fr;}}

/* PU sleeve gallery */
.pu-gallery-main{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--grey-bg);}
.pu-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px;}
.pu-thumbs button{display:block;aspect-ratio:1/1;min-width:0;padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;overflow:hidden;}
.pu-thumbs button[aria-pressed="true"]{border-color:var(--teal);}
.pu-thumbs img{display:block;width:100%;height:100%;object-fit:cover;}
.pu-caption{font-size:12px;color:#4B6066;margin-top:8px;}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.photo-grid figure{margin:0;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;}
.photo-grid img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
.photo-grid figcaption{font-size:13px;color:var(--ink);padding:12px 14px;}
.photo-grid figcaption strong{display:block;color:var(--navy);font-size:14px;margin-bottom:2px;}
@media (max-width:900px){.photo-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.photo-grid{grid-template-columns:1fr;}}

/* Customisation callout */
.custom-panel{border:1px solid var(--line);border-left:4px solid var(--teal);background:var(--teal-tint);border-radius:6px;padding:26px;}
.custom-panel h2{margin:6px 0 8px;}
.custom-panel > p{color:#2E434B;max-width:720px;}
.custom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0;}
.custom-grid div{background:var(--white);border:1px solid var(--line-soft);border-radius:4px;padding:16px;}
.custom-grid strong{display:block;color:var(--navy);font-size:15px;margin-bottom:4px;}
.custom-grid span{font-size:13px;color:#4B6066;}
.quote-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:qs;}
.quote-steps li{counter-increment:qs;background:var(--white);border:1px solid var(--line-soft);border-radius:4px;padding:16px 16px 16px 52px;position:relative;font-size:13.5px;color:var(--ink);}
.quote-steps li::before{content:counter(qs);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font:600 13px/26px var(--f-mono);text-align:center;}
.quote-steps strong{display:block;color:var(--navy);margin-bottom:2px;}
.at-a-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:16px 0 4px;padding:0;list-style:none;}
.at-a-glance li{font-size:14px;color:var(--ink);padding-left:22px;position:relative;}
.at-a-glance li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);}
@media (max-width:760px){.custom-grid,.quote-steps,.at-a-glance{grid-template-columns:1fr;}.pu-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));}}
.pu-gallery{min-width:0;}