.packaging{border-top:1px solid var(--line)}
.packaging-entry{margin-top:14px}
.packaging-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.packaging-intro h2{font-size:clamp(38px,4.8vw,78px);line-height:1.23;letter-spacing:-.035em}
.packaging-intro>p{font-size:14px;line-height:2;color:var(--muted);padding-bottom:8px}
.packaging-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.packaging-toolbar label{display:flex;align-items:center;gap:24px;font-size:12px;color:var(--muted)}
.packaging-toolbar select{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 28px 12px 0;min-height:48px;max-width:100%;cursor:pointer}
.packaging-toolbar select:focus-visible{outline:2px solid #52643a;outline-offset:5px}
.packaging-angles{display:flex;gap:28px;justify-content:center;margin-bottom:16px}
.packaging-angles button,.detail-media-toggle button{font-size:13px;padding:10px 4px;color:var(--muted);border-bottom:1px solid transparent;min-height:44px}
.packaging-angles button[aria-pressed=true],.detail-media-toggle button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.packaging-angles button:hover,.detail-media-toggle button:hover{color:var(--ink)}
.packaging-frame{position:relative;overflow:hidden;aspect-ratio:var(--angle-ratio, .8);width:min(100%,480px);margin:auto;background:#f3f1eb}
.packaging-frame[data-angle=all]{aspect-ratio:var(--triptych-ratio,2.4);width:100%}
.packaging-frame img{display:block;width:300%;max-width:none;height:auto;mix-blend-mode:normal;transition:none}
.packaging-frame[data-angle=all] img{width:100%;transform:none!important}
.packaging-image-status{position:absolute;inset:42% 16px auto;text-align:center;font-size:14px;color:var(--muted);line-height:1.7}
.packaging-image-retry{position:absolute;top:60%;left:50%;transform:translateX(-50%);white-space:nowrap}
.packaging-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px}
.packaging-footer p{font-size:12px;color:var(--muted);line-height:1.8}
#packaging-load-error{font-size:14px;line-height:2;padding:24px 0}
#packaging-load-error button{margin-left:24px}
.detail-visual{min-width:0;background:#f3f1eb;padding-top:22px;display:flex;flex-direction:column;justify-content:center}
.detail-media-toggle{display:flex;justify-content:center;gap:32px;margin:0 22px 18px}
.detail-photo{flex:1;justify-content:center;min-height:0}
#detail-packaging{padding:0 20px 20px}
#detail-packaging .packaging-angles{gap:20px;margin-bottom:10px}
#detail-packaging .packaging-frame{max-width:340px}
#detail-packaging .packaging-frame[data-angle=all]{max-width:none}
.detail-photo img{max-height:560px;object-fit:contain}
@media(max-width:680px){
  .packaging-intro{display:block;margin-bottom:28px}
  .packaging-intro h2{font-size:38px}
  .packaging-intro>p{margin-top:22px;padding:0;font-size:13px}
  .packaging-toolbar{display:block;margin-bottom:20px}
  .packaging-toolbar label{display:block}
  .packaging-toolbar select{display:block;width:100%;margin-top:6px}
  .packaging-toolbar>a{margin-top:12px}
  .packaging-angles{gap:24px;margin-bottom:12px}
  .packaging-footer{align-items:flex-start;flex-direction:column;gap:12px}
  .detail-visual{padding-top:60px}
  .detail-photo{padding:0 24px 20px}
  .detail-photo img{max-height:340px}
  #detail-packaging .packaging-frame{max-width:320px}
  #detail-packaging{padding:0 16px 16px}
}
@media(max-width:360px){.packaging-intro h2{font-size:35px}.packaging-angles{gap:18px}}