/* Shared vector icons preserve the approved line artwork on desktop and mobile. */
.pf-ui-icon{display:inline-block;vertical-align:-.12em;width:1em;height:1em;flex:0 0 auto;overflow:visible;pointer-events:none}
.pf-ui-icon--dot path{fill:currentColor;stroke:none}
.pf-hero-wild .pf-ui-icon{vertical-align:0}
.pf-cross{flex:0 0 auto}.pf-cross .pf-ui-icon{vertical-align:top}
/* Keep the desktop aspect ratio; only the mobile layout uses a fixed height. */
.pf-project[data-app-preview] .pf-project-visual{width:100%;min-width:0}
.pf-work-grid,.pf-work-grid>.pf-project,.pf-project-meta,.pf-app-controls{min-width:0;max-width:100%}
.pf-work-grid>.pf-project{width:100%}
.pf-project-meta p,.pf-app-controls>p{overflow-wrap:anywhere}
.pf-shop-notice{padding:22px 24px;margin-bottom:28px;border:1px solid #e9ba4055;background:#e9ba400c;border-radius:8px}
.pf-shop-notice strong{display:flex;align-items:center;gap:10px;color:var(--pf-yellow);font:600 15px/1.5 Arial,sans-serif}
.pf-shop-notice p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--pf-ink)}
@media(max-width:760px){
  .pf-products .pf-work-grid,.pf-portfolio .pf-work-grid{grid-template-columns:minmax(0,1fr)}
  .pf-work-grid{width:100%;gap:42px}
  .pf-project-visual{width:100%;min-width:0}
  .pf-project[data-app-preview] .pf-project-visual{height:415px;aspect-ratio:auto}
  .pf-project[data-app-preview] .pf-phone-group{inset:52px 8% 38px;gap:12px;min-width:0}
  .pf-project[data-app-preview] .pf-phone{width:42%;max-width:calc((100% - 12px)/2);min-width:0;transform:rotate(-6deg) translateY(20px)}
  .pf-project[data-app-preview] .pf-phone:nth-child(2){transform:rotate(6deg)}
  .pf-project[data-app-preview] .pf-project-visual:hover .pf-phone-group{transform:none}
  .pf-project-meta h3 a{min-width:0;overflow-wrap:anywhere}
  .pf-app-controls>p{max-width:100%}
}