/* PINOVA responsive safeguards (revision: proportional, not oversized).
 * The theme's configured content width remains the baseline at 1440 CSS px.
 * Added width increases gently, capped to avoid oversized layouts on TV/4K.
 */
:root{--pin-wide-gutter:clamp(18px,3vw,60px)}
.pin-nav-inner,.pin-footer-grid,.pin-footer-grid>div,
.pin-footer-lead,.pin-footer-lead>div,.pin-final-cta,.pin-final-cta>div,
.pin-hero-layout,.pin-hero-copy,.pin-hero-media,
.pin-v2-layout,.pin-v2-sidebar,.pin-v2-products,
.pin-detail-spec-grid,.pin-detail-spec,.pin-detail-technical,
.pin-detail-table-group,.pin-page .entry-content{min-width:0}
.pin-footer-contact>span,.pin-footer-contact>a,
.pin-social a,.pin-detail-spec strong,.pin-detail-meta,
.pin-footer-grid p{overflow-wrap:anywhere;word-break:normal}
.pin-footer-grid{align-items:start}
.pin-footer-contact{margin-top:14px;gap:11px}
.pin-footer-contact>span,.pin-footer-contact>a{width:100%;align-items:flex-start;line-height:1.7}
.pin-footer-contact>span .pin-icon,.pin-footer-contact>a .pin-icon{margin-top:.24em}
.pin-social{align-items:center;gap:9px}
.pin-social>a{justify-content:center;white-space:normal;text-align:center;min-height:36px}
.pin-social>a .pin-icon{flex:0 0 18px}
.pin-detail-spec small{display:flex;align-items:center;gap:7px}
.pin-detail-spec small .pin-icon{flex:0 0 16px}
.pin-detail-table-group h3{display:flex;align-items:center;gap:8px}
.pin-detail-table-group h3 .pin-icon{flex:0 0 18px}
.pin-hero-media img,.pin-page .entry-content img,
.pin-single-product-page .product img,.pin-footer .pin-logo-img{
 max-width:100%;height:auto
}
.pin-page .entry-content iframe,.pin-detail-prose iframe{
 max-width:100%;aspect-ratio:16/9
}
.pin-detail-table-scroll,.pin-v2-results,.pin-v2-products{max-width:100%}
.pn-menu-root>.pn-menu-item>.pn-menu-line>.pn-menu-link{
 display:inline-flex!important;align-items:center;justify-content:flex-start;gap:7px
}
.pn-menu-root>.pn-menu-item>.pn-menu-line>.pn-menu-link .pin-icon{
 margin:0;flex-shrink:0
}
/* At 1101-1370 px, prioritise usable navigation labels without squeezing buttons. */
@media(min-width:1101px) and (max-width:1370px){
 .pn-menu-root{gap:1px}
 .pn-menu-root>.pn-menu-item>.pn-menu-line>.pn-menu-link{gap:0;padding-inline:4px}
 .pn-menu-root>.pn-menu-item>.pn-menu-line>.pn-menu-link .pin-icon{display:none}
 .pn-menu-toggle{min-width:20px}
 .pin-nav-inner{gap:9px!important}
 .pin-nav-actions{gap:6px}
}
/* Avoid the previous abrupt 1200px -> 1680px jump at 1920px.
 * Default admin content width = 1200px.
 * 1920px viewport => 1296px content, 2560 => 1424, 3840 => 1520.
 * Honours administrator changes to --pinova-content-width, with upper cap.
 */
@media(min-width:1440px){
 .pin-container{
  width:calc(100% - var(--pin-wide-gutter) - var(--pin-wide-gutter))!important;
  max-width:min(1600px,calc(var(--pinova-content-width,1200px) + clamp(0px,calc(20vw - 288px),320px)))!important;
  margin-left:auto!important;margin-right:auto!important
 }
}
/* Add a column ONLY after each catalog card still has a sensible width. */
@media(min-width:2100px){
 .pin-v2-products ul.products{
  grid-template-columns:repeat(4,minmax(0,1fr))!important
 }
 .pin-single-product-page .related.products ul.products{
  grid-template-columns:repeat(4,minmax(0,1fr))!important
 }
}
@media(min-width:1101px) and (max-height:760px){
 .pin-nav-inner{min-height:64px}
 .pin-hero-v2{min-height:0}
}
@media(max-width:1100px){
 .pin-container{max-width:100%}
 .pn-menu-root>.pn-menu-item>.pn-menu-line>.pn-menu-link{
  min-width:0;white-space:normal!important
 }
 .pin-footer-contact>span,.pin-footer-contact>a{font-size:inherit}
}
@media(max-width:760px){
 .pin-footer-grid{gap:20px}
 .pin-footer-contact{gap:9px}
 .pin-social>a{min-height:38px}
 .pin-detail-spec small{flex-wrap:wrap}
 .pin-detail-table-group h3{overflow-wrap:anywhere}
}
@media(max-width:390px){
 .pin-footer-grid{grid-template-columns:minmax(0,1fr)}
 .pin-social{gap:7px}
 .pin-social>a{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
 .pin-social>a,.pn-menu-link{transition:none!important}
}