/* A consistent photographic identity for the established shop illustrations. */
.shop-scene { margin: 0; min-width: 0; }
.shop-scene .shop-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: #283a2e; }
.shop-scene figcaption { margin-top: 8px; color: #5b604f; font-size: 11px; line-height: 1.5; text-align: right; }
.page-head-photo { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: 48px; }
.page-head-photo > * { min-width: 0; }
.page-head-copy > .eyebrow { color: #87662f; margin-bottom: 18px; }
.page-head-copy > h1 { font-size: clamp(44px,5vw,68px); max-width: 660px; overflow-wrap: break-word; }
.page-head-copy > p:last-child { font-size: 16px; line-height: 1.8; margin-bottom: 0; }
.has-shop-scene .breadcrumbs { margin-bottom: 30px; }
.article-main > .shop-scene { margin-bottom: 36px; }
.article-main .shop-detail { width: min(100%, 480px); margin: 24px 0 0; }
.article-main .shop-workflow { margin: 22px 0 0; }
.equipment-card .equipment-visual.has-shop-photo { overflow: hidden; border-radius: 8px; isolation: isolate; }
.equipment-card .equipment-visual.has-shop-photo .shop-photo { width: 100%; height: 100%; object-fit: cover; transform: none; }
.equipment-visual.has-shop-photo .guide-count { z-index: 1; color: #fff9e9; background: #203529e8; border-radius: 4px; padding: 4px 9px; line-height: 1.3; }
.equipment-visual.has-shop-photo .scene-label { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 3px 7px; border-radius: 3px; background: #203529ed; color: #fff9e9; font-size: 10px; line-height: 1.5; }
.owners-copy .owner-photo-link { display: block; width: min(100%, 300px); margin: 0 0 26px; border-radius: 8px; }
.owner-photo-link .shop-scene figcaption { text-align: left; }
.signup-page.signup-with-photo { max-width: 1240px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: 48px; }
.signup-with-photo > * { min-width: 0; }
.signup-with-photo .email-row { flex-wrap: wrap; }
.signup-with-photo .email-row input { flex: 1 1 180px; min-width: 0; }
.signup-with-photo .email-row button { flex: 0 1 auto; }
@media (max-width: 1000px) {
  .page-head-photo, .signup-page.signup-with-photo { gap: 30px; }
  .page-head-copy > h1 { font-size: 50px; }
}
@media (max-width: 760px) {
  .page-head-photo, .signup-page.signup-with-photo { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .page-head-copy > h1 { font-size: clamp(40px,10vw,60px); }
  .page-head-copy > p:last-child { font-size: 15px; }
  .page-head-photo > .shop-scene { width: min(100%,480px); }
  .scene-conversation .page-head-photo { gap: 18px; }
  .scene-conversation .page-head-photo > .shop-scene { width: 168px; }
  .scene-conversation .shop-scene figcaption { font-size: 10px; text-align: left; }
  .signup-with-photo > .shop-scene { width: min(100%,480px); }
  .owners-copy .owner-photo-link { width: min(100%,240px); margin-bottom: 22px; }
}
@media (prefers-reduced-motion: no-preference) and (hover:hover) {
  .equipment-card .equipment-visual.has-shop-photo .shop-photo { transition: transform .25s ease; }
  .equipment-card .equipment-visual.has-shop-photo:hover .shop-photo { transform: scale(1.025); }
}
@media print {
  .shop-scene, .owner-photo-link { display: none !important; }
  .page-head-photo, .signup-page.signup-with-photo { display: block; }
}

/* Two aligned photographs: the active state appears on hover or keyboard focus. */
.equipment-card .equipment-visual.equipment-hover .equipment-photo-swap { position: absolute; inset: 0; display: block; pointer-events: none; }
.equipment-card .equipment-visual.equipment-hover .equipment-photo-swap .shop-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; transition: none; }
.equipment-visual.equipment-hover .equipment-photo-swap .shop-photo:last-child { opacity: 0; }
.equipment-visual.equipment-hover:focus-visible .equipment-photo-swap .shop-photo:last-child { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .equipment-visual.equipment-hover:hover .equipment-photo-swap .shop-photo:last-child { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .equipment-card .equipment-visual.equipment-hover .equipment-photo-swap .shop-photo:last-child { transition: opacity .18s ease; }
}

/* Keep the distant ceiling corner visible while showing the shop below it. */
.equipment-card .equipment-visual.security.equipment-hover .equipment-photo-swap .shop-photo { object-position: center 35%; }
@media (prefers-reduced-motion: no-preference) {
  .equipment-card .equipment-visual.security.equipment-hover .equipment-photo-swap .shop-photo:last-child { transition: opacity .28s ease-in-out; }
}

/* Larger paired photos in the corresponding equipment guides. */
.equipment-guide-scene .guide-photo-swap { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #283a2e; cursor: pointer; }
.equipment-guide-scene .guide-photo-swap .shop-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.guide-photo-swap .shop-photo:last-child { opacity: 0; }
.guide-photo-swap[aria-pressed="true"] .shop-photo:last-child { opacity: 1; }
.guide-photo-swap:focus-visible { outline: 3px solid #87662f; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .guide-photo-swap:hover .shop-photo:last-child { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-photo-swap .shop-photo:last-child { transition: opacity .18s ease; }
  [data-equipment-guide-photo="security"] .guide-photo-swap .shop-photo:last-child { transition-duration: .28s; }
}