/* The details: collection tools, saved finds, and an accessible photo room. */
.collection-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0; margin-bottom: 20px; border-block: 1px solid #d5d6bd26; }
.collection-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.collection-tabs button { padding: 10px 14px; min-height: 42px; border: 1px solid #bac5a738; color: #b5c0a8; border-radius: 30px; background: transparent; font-size: 11px; }
.collection-tabs button[aria-pressed="true"] { background: #d5dfc5; color: #1c2818; border-color: #d5dfc5; }
.collection-fields { display: flex; gap: 9px; min-width: 0; }
.collection-fields label { min-width: 0; }
.collection-fields input, .collection-fields select { min-height: 42px; padding: 10px 12px; background: #192216; border: 1px solid #b4c19e42; border-radius: 4px; color: #dce4d0; font: 11px 'Space Grotesk',sans-serif; max-width: 100%; }
.collection-fields input { width: 205px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.drop-entry { position: relative; min-width: 0; }
.drop-entry .drop-card { width: 100%; }
.drop-save { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid #e1e8d450; background: #142010da; color: #e7eedc; border-radius: 50%; font-size: 21px; line-height: 1; backdrop-filter: blur(8px); }
.drop-save[aria-pressed="true"] { color: #1b2714; background: #d3dfbd; border-color: #d3dfbd; }
.drop-photo { transition: box-shadow .3s ease,border-color .3s ease; }
.drop-entry:focus-within .drop-photo, .drop-entry:hover .drop-photo { border-color: #c2d0a97a; box-shadow: 0 15px 30px #0003; }
.collection-empty { grid-column: 1 / -1; padding: 40px 24px; text-align: center; background: #1b2517; border: 1px dashed #b7c69b44; border-radius: 7px; }
.collection-empty h3 { font: 400 27px Georgia,serif; margin-bottom: 12px; color: #dfe7d2; }
.collection-empty p { color: #aab99b; font-size: 12px; line-height: 1.7; }
.collection-empty button { margin-top: 18px; padding: 11px 18px; min-height: 44px; color: #dbe5cc; background: none; border: 1px solid #b5c59a77; border-radius: 4px; }
.listing-photo-actions { display: flex; gap: 10px; margin: 14px 0 20px; flex-wrap: wrap; }
.listing-photo-actions button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; background: #24351d; border: 1px solid #b5c59a50; border-radius: 4px; color: #dce7cf; font-size: 12px; }
.listing-photo-actions button[aria-pressed="true"] { background: #d3dfbd; color: #1b2714; }
#selectedMainPhoto[role="button"] { cursor: zoom-in; position: relative; }
#selectedMainPhoto[role="button"]::after { content: '↗  Look closer'; position: absolute; right: 10px; bottom: 10px; color: #e6ecd9; font: 10px 'Space Grotesk',sans-serif; background: #101c10de; border: 1px solid #d5dfc444; border-radius: 4px; padding: 8px 11px; pointer-events: none; }
#selectedMainPhoto:focus-visible { outline: 2px solid #d4e3bf; outline-offset: 4px; }
.photo-room { position: fixed; inset: 0; width: min(1280px,calc(100vw - 48px)); height: min(940px,calc(100dvh - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid #a8b69655; border-radius: 10px; color: #e8ecdE; background: #11180f; box-shadow: 0 35px 100px #0009; }
.photo-room::backdrop { background: #060b06eb; backdrop-filter: blur(12px); }
.photo-room[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.photo-room-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #c3cdaa26; }
.photo-room-head h2 { font: 400 24px/1.15 Georgia,serif; letter-spacing: -.025em; }
.photo-room-head p { font-size: 10px; color: #9fac8e; margin-top: 7px; letter-spacing: .06em; }
.photo-room button { min-width: 44px; min-height: 44px; color: #dfe8ce; background: #25321e; border: 1px solid #c3cdaa38; border-radius: 4px; }
.photo-room-close { font-size: 25px; flex: 0 0 44px; }
.photo-room-stage { display: grid; place-items: center; overflow: auto; min-height: 0; background: radial-gradient(ellipse at center,#2b3423,#151d11); position: relative; padding: 20px; }
.photo-room-stage img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; display: block; }
.photo-room-stage img[hidden], .photo-room-error[hidden] { display: none; }
.photo-room-stage.is-zoomed { display: block; text-align: center; }
.photo-room-stage.is-zoomed img { position: static; width: auto; height: auto; max-width: none; max-height: none; margin: 0 auto; }
.photo-room-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 24px; border-top: 1px solid #c3cdaa26; }
.photo-room-controls { display: flex; align-items: center; gap: 10px; }
.photo-room-controls button { padding: 9px 15px; font-size: 13px; }
.photo-room-controls button:disabled { opacity: .3; cursor: default; }
.photo-room-counter { min-width: 58px; text-align: center; color: #c8d7b6; font-size: 12px; }
.photo-room-hint { font-size: 10px; color: #95a486; }
.photo-room-error { color: #d5ddc7; font-size: 14px; text-align: center; padding: 30px; }
.atelier-toast { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translate(-50%,12px); opacity: 0; pointer-events: none; background: #d9e2cb; color: #1c2815; border: 1px solid #e5ebdd; border-radius: 6px; padding: 13px 20px; box-shadow: 0 8px 30px #0005; font-size: 12px; transition: opacity .18s ease,transform .18s ease; max-width: calc(100% - 36px); }
.atelier-toast.visible { opacity: 1; transform: translate(-50%,0); }
.room-quick-nav { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.room-quick-nav button { min-width: 38px; min-height: 38px; background: #26311f; border: 1px solid #c3d1ab38; color: #d7e1c8; border-radius: 4px; font-size: 16px; }
.room-quick-nav span { font-size: 10px; color: #9fb18b; min-width: 50px; text-align: center; }
.room-quick-nav button:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) {
  .collection-tools { align-items: stretch; }
  .collection-tabs { width: 100%; }
  .collection-fields { width: 100%; }
  .collection-fields label:first-child { flex: 1; }
  .collection-fields input { width: 100%; }
}
@media (max-width: 700px) {
  .collection-tabs { gap: 5px; }
  .collection-tabs button { padding: 10px 12px; font-size: 10px; min-height: 44px; }
  .collection-fields input, .collection-fields select { min-height: 44px; font-size: 11px; }
  .drop-save { width: 36px; height: 36px; top: 7px; right: 7px; }
  .drop-badge { max-width: calc(100% - 53px); font-size: 7px; }
  .photo-room { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .photo-room-head { padding: 18px 16px; }
  .photo-room-head h2 { font-size: 21px; }
  .photo-room-stage { padding: 12px; }
  .photo-room-bottom { padding: 12px 14px max(12px,env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .photo-room-hint { display: none; }
  .photo-room-controls { gap: 6px; }
  .photo-room-controls button { padding: 8px 12px; }
  .room-quick-nav { margin-left: auto; }
  .room-quick-nav button { min-height: 44px; min-width: 44px; }
  .atelier-toast { bottom: max(18px,env(safe-area-inset-bottom)); font-size: 11px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .drop-photo, .atelier-toast { transition: none; }
}
.drop-entry { transform: perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg)); transition: transform .25s ease; }
.drop-entry .drop-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,30%),#fff6,transparent 55%); opacity: 0; transition: opacity .3s ease; mix-blend-mode: soft-light; }
.drop-entry.depth-hover .drop-photo::after { opacity: .6; }
.entrance-motion { border: 1px solid #bdcca34d; color: #c7d3b4; background: transparent; border-radius: 99px; padding: 11px 15px; min-height: 44px; font: inherit; font-size: 11px; cursor: pointer; }
.entrance-motion:focus-visible { outline: 2px solid #e2eacb; outline-offset: 4px; }
@keyframes atelier-arrive { from { opacity: .65; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes atelier-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (prefers-reduced-motion: no-preference) {
  .arrive-in-view { animation: atelier-arrive .7s ease-out both; }
  .hero-stamp { animation: atelier-float 6s ease-in-out infinite; }
}
body.motion-paused .hero-stamp, body.motion-paused .arrive-in-view { animation: none !important; }
body.motion-paused .drop-entry { transform: none !important; transition: none !important; }
body.motion-paused .drop-photo::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .drop-entry { transform: none !important; transition: none !important; } .drop-photo::after { display: none; } }
/* Warm boutique staging: original photos stay intact; prepared cutouts float freely. */
.shopper-mode .loft-rack, body:not(.seller-mode) .loft-rack { border: 1px solid #ab875250; border-radius: 12px; background: #171e16; box-shadow: 0 24px 70px #0006, inset 0 1px #e7c88b24; }
body:not(.seller-mode) .loft-rack-head { padding: 30px 32px; background: radial-gradient(ellipse at top left,#76613b25,transparent 65%); }
body:not(.seller-mode) .loft-studio { padding-top: 35px; background: radial-gradient(ellipse at 25% 0,#f8d49a42,transparent 48%),radial-gradient(ellipse at 80% 0,#f8d49a30,transparent 43%),linear-gradient(90deg,#262b21,#4b4934 50%,#242b20); border-block: 1px solid #c5ad742b; }
body:not(.seller-mode) .loft-studio::before { background: repeating-linear-gradient(90deg,transparent 0 138px,#e2cf9320 139px 141px, #0002 142px 145px),linear-gradient(0deg,#1c261b99,#38372355),url('/assets/rooms/clothing-loft.png') center/cover; opacity: .7; }
body:not(.seller-mode) .loft-studio::after { height: 70px; background: repeating-linear-gradient(0deg,transparent 0 16px,#0002 17px 18px),linear-gradient(105deg,#73563a,#aa8050 50%,#503c2b); box-shadow: 0 -12px 30px #0004,inset 0 2px #f3d5a04d; }
body:not(.seller-mode) .loft-rail { top: 54px; left: 28px; right: 28px; height: 10px; background: linear-gradient(#ffe5b5,#9d7a43 35%,#4c3924 70%,#c59a60); box-shadow: 0 9px 12px #0009,0 -1px 0 #ffe8bb99; }
body:not(.seller-mode) .loft-track { padding: 8px 25px 34px; gap: 32px; min-height: 455px; }
body:not(.seller-mode) .loft-piece { flex-basis: 225px; }
body:not(.seller-mode) .loft-swing { height: 326px; filter: drop-shadow(12px 17px 9px #0007); }
body:not(.seller-mode) .uses-original-photo .wood-hanger { width: 88%; margin: 0 auto; filter: drop-shadow(0 2px 1px #0005); }
body:not(.seller-mode) .uses-original-photo .loft-photo { height: 252px; margin: -7px 6px 0; border: 5px solid #d4bc94; border-bottom-width: 13px; border-radius: 2px; background: #dfd0b7; box-shadow: inset 0 0 0 1px #fff8,0 1px 0 #604d31; }
body:not(.seller-mode) .has-room-cutout .loft-photo { height: 326px; padding-top: 4px; }
body:not(.seller-mode) .loft-ticket { position: relative; margin: 13px 9px 0; padding: 14px 13px 12px; background: #e1d3b5; color: #30291f; border-radius: 2px; box-shadow: 3px 5px 9px #0004; border-top: 1px solid #fff7; }
body:not(.seller-mode) .loft-ticket::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #66553c; top: 5px; left: 50%; }
body:not(.seller-mode) .loft-ticket strong { color: #3a4328; font-size: 15px; }
body:not(.seller-mode) .loft-ticket small { color: #655e48; font-size: 8px; }
body:not(.seller-mode) .loft-piece[aria-pressed="true"] .loft-ticket { background: #f4e3bc; box-shadow: 0 0 0 2px #ae8b4e,3px 5px 9px #0004; }
body:not(.seller-mode) .loft-decor { flex-basis: 120px; }
body:not(.seller-mode) .loft-decor .loft-swing { height: 74px; }
body:not(.seller-mode) .loft-rack-footer { padding: 18px 25px; }
body:not(.seller-mode) .room-shell { border: 1px solid #b5955659; box-shadow: 0 28px 70px #0007,0 0 0 5px #302b2044; }
body:not(.seller-mode) .cinema-backdrop { filter: saturate(1.12) brightness(1.1); }
body:not(.seller-mode) .cinema-pendant::after { box-shadow: 0 8px 20px #ffce7777,0 35px 65px #e8b56833; }
body:not(.seller-mode) .room-stage-hud { background: #172016dc; border: 1px solid #d3b57c40; box-shadow: 0 10px 25px #0003; }
@media(max-width:700px) {
  body:not(.seller-mode) .loft-rack-head { padding: 23px 17px; }
  body:not(.seller-mode) .loft-track { gap: 20px; padding-inline: 12px; min-height: 430px; }
  body:not(.seller-mode) .loft-piece { flex-basis: 190px; }
  body:not(.seller-mode) .loft-swing { height: 302px; }
  body:not(.seller-mode) .uses-original-photo .loft-photo { height: 228px; }
  body:not(.seller-mode) .has-room-cutout .loft-photo { height: 302px; }
  body:not(.seller-mode) .loft-decor { flex-basis: 100px; }
}