/* Photo guide pop-up (_includes/photo-guide.html), shared by the checkout and the upsell.
   Uses Jolly's tokens and the .pm-sample / .pm-x / .oc-btn classes from css/jolly/components.css. */
/* ---------- photo guide: native dialog above the personaliser ---------- */
html.pg-lock,html.pg-lock body{overflow:hidden}
.pg-link{display:block;margin:-4px 0 12px}
.pg-link[hidden]{display:none}
.pm-sample:focus-visible,.pg-help a:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.pm-foot .pm-sample{align-self:center;white-space:nowrap}
.pg{width:calc(100% - 32px);max-width:520px;max-height:85vh;overflow:auto;border:0;border-radius:16px;padding:0;background:var(--color-background-white);font-family:var(--font-body);color:var(--color-text-primary);box-shadow:0 24px 64px rgba(0,0,0,.3)}
.pg::backdrop{background:rgba(29,25,22,.62)}
.pg-box{padding:20px}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pg-head h2{margin:0;font:400 24px/1.2 var(--font-heading)}
.pg-steps{list-style:none;margin:0 0 20px;padding:0;counter-reset:pg;display:flex;flex-direction:column;gap:12px}
.pg-steps li{position:relative;padding-left:40px;min-height:28px;font:400 15px/1.45 var(--font-body);counter-increment:pg}
.pg-steps li::before{content:counter(pg);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--color-brand-primary);color:var(--color-text-white,#fff);font:600 14px/28px var(--font-body);text-align:center}
.pg-examples{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pg-ex{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pg-thumb{display:block;width:100%;max-width:96px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--color-ui-red,#B70101);background:var(--color-background-brand-tint)}
.pg-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pg-ex--ok .pg-thumb{border-color:var(--color-text-success,#11734F)}
.pg-ex--blur img{filter:blur(3px)}
.pg-ex--dark img{filter:brightness(.28)}
.pg-ex--cut img{transform:scale(1.9) translate(34%,22%)}
.pg-cap{font:400 13px/1.3 var(--font-body);color:var(--color-text-secondary)}
.pg-cap b{display:block;font-weight:600;color:var(--color-ui-red,#B70101)}
.pg-ex--ok .pg-cap b{color:var(--color-text-success,#11734F)}
.pg-help{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--color-background-brand-tint,#f8efea);font:400 14px/1.45 var(--font-body)}
.pg-help a{color:var(--color-brand-primary);font-weight:600}
.pg-foot{display:flex;justify-content:flex-end}
@media (max-width:480px){
  .pg-examples{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-head h2{font-size:20px}
}