/* MARAMAU 360° Frontend CSS v1.1 */
.mm360-fe-wrap{width:100%;font-family:Georgia,'Times New Roman',serif;position:relative}
.mm360-fe-viewer-box{position:relative;width:100%;border-radius:10px;overflow:hidden;background:#111}
.mm360-fe-panorama{width:100%;height:520px}
@media(max-width:768px){.mm360-fe-panorama{height:320px}}
.mm360-fe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;color:#888;font-size:.9rem;font-family:system-ui,sans-serif;pointer-events:none;transition:opacity .5s;border-radius:10px}
.mm360-fe-loading.hidden{opacity:0}
.mm360-fe-room-nav{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;flex-wrap:wrap;justify-content:center}
.mm360-fe-room-btn{background:rgba(255,255,255,.92);color:#1a1a1a;border:none;border-radius:20px;padding:6px 16px;font-size:.78rem;cursor:pointer;font-family:system-ui,sans-serif;transition:background .15s,color .15s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mm360-fe-room-btn:hover,.mm360-fe-room-btn.active{background:#c9a96e;color:#fff}

/* HOTSPOT – dynamisch mit Icon */
.mm360-fe-hotspot{width:38px;height:38px;background:#c9a96e;border:2.5px solid #fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:mm360fe-pulse 2.2s infinite;transition:transform .15s;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mm360-fe-hotspot:hover{transform:scale(1.2);animation:none;box-shadow:0 0 0 6px rgba(201,169,110,.3)}
.mm360-fe-hotspot.mm360-transparent{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.mm360-fe-hotspot.mm360-transparent:hover{box-shadow:none!important}
.mm360-fe-hotspot.mm360-transparent svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.mm360-fe-hotspot.mm360-transparent .hs-emoji{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.mm360-fe-hotspot svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
.mm360-fe-hotspot .hs-emoji{font-size:17px;line-height:1}
.mm360-fe-hotspot img{width:22px;height:22px;object-fit:contain;border-radius:3px}
@keyframes mm360fe-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,.55)}50%{box-shadow:0 0 0 10px rgba(201,169,110,0)}}

/* OVERLAY */
.mm360-fe-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px}
.mm360-fe-modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;position:relative;display:flex;flex-direction:column}
.mm360-fe-close{position:sticky;top:12px;left:calc(100% - 48px);float:right;margin:12px 12px 0 0;width:34px;height:34px;border-radius:50%;background:#f4f1ec;border:none;cursor:pointer;font-size:16px;color:#1a1a1a;display:flex;align-items:center;justify-content:center;z-index:10}
.mm360-fe-close:hover{background:#e8e3db}
.mm360-fe-modal-img-wrap{background:#f9f6f1;padding:24px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.mm360-fe-modal-img{max-height:220px;max-width:100%;object-fit:contain;border-radius:6px}
.mm360-fe-gallery{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mm360-fe-gallery img{width:52px;height:52px;object-fit:cover;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.mm360-fe-gallery img:hover,.mm360-fe-gallery img.active{border-color:#c9a96e}
.mm360-fe-modal-body{padding:20px 24px 28px;display:flex;flex-direction:column;gap:10px}
.mm360-fe-modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mm360-fe-sku{font-size:.72rem;color:#aaa;font-family:system-ui,sans-serif;margin:0}
.mm360-fe-name{font-size:1.2rem;font-weight:bold;color:#1a1a1a;margin:4px 0 6px;line-height:1.3}
.mm360-fe-price{font-size:1.3rem;color:#c9a96e;font-weight:bold;white-space:nowrap;padding-top:18px}
.mm360-fe-price del{color:#bbb;font-size:.85rem;font-weight:normal;margin-right:4px}
.mm360-fe-rating{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#888;font-family:system-ui,sans-serif}
.mm360-fe-stars{color:#c9a96e;letter-spacing:1px}
.mm360-fe-desc{font-size:.88rem;color:#555;line-height:1.7;margin:0}
.mm360-fe-stock{font-size:.78rem;font-family:system-ui,sans-serif;padding:4px 10px;border-radius:20px;display:inline-block;width:fit-content}
.mm360-fe-stock.instock{background:#eaf3de;color:#3b6d11}
.mm360-fe-stock.outofstock{background:#fcebeb;color:#a32d2d}
.mm360-fe-stock.onbackorder{background:#faeeda;color:#854f0b}
.mm360-fe-variants{display:flex;flex-direction:column;gap:10px}
.mm360-fe-variant-group label{display:block;font-size:.75rem;color:#888;font-family:system-ui,sans-serif;margin-bottom:5px}
.mm360-fe-variant-opts{display:flex;gap:6px;flex-wrap:wrap}
.mm360-fe-var-btn{padding:5px 14px;border:1px solid #e0dbd3;border-radius:20px;background:#fff;font-size:.8rem;cursor:pointer;font-family:system-ui,sans-serif;transition:all .12s}
.mm360-fe-var-btn:hover{border-color:#c9a96e;color:#c9a96e}
.mm360-fe-var-btn.active{background:#c9a96e;border-color:#c9a96e;color:#fff}
.mm360-fe-actions{display:flex;gap:10px;margin-top:4px}
.mm360-fe-btn-cart{flex:1;padding:12px;background:#1a1a1a;color:#fff;border:none;border-radius:7px;font-size:.9rem;cursor:pointer;font-family:system-ui,sans-serif;transition:background .15s}
.mm360-fe-btn-cart:hover{background:#333}
.mm360-fe-btn-cart:disabled{background:#888;cursor:not-allowed}
.mm360-fe-btn-detail{flex:1;padding:12px;border:2px solid #c9a96e;border-radius:7px;text-align:center;color:#c9a96e;text-decoration:none;font-size:.9rem;font-family:system-ui,sans-serif;transition:all .15s}
.mm360-fe-btn-detail:hover{background:#c9a96e;color:#fff}
.mm360-fe-cart-msg{text-align:center;font-size:.82rem;font-family:system-ui,sans-serif;padding:6px 12px;border-radius:6px;margin:0}
.mm360-fe-cart-msg.success{background:#eaf3de;color:#3b6d11}
.mm360-fe-cart-msg.error{background:#fcebeb;color:#a32d2d}

/* Pannellum Gyro-Button ausblenden (nur auf Desktop sinnvoll) */
.pnlm-orientation-button { display: none !important; }

/* ── PRODUKT-LISTE UNTER DEM VIEWER ─────────────────── */
.mm360-fe-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  border: 0.5px solid #e0dbd3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.mm360-fe-list-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 0.5px solid #e0dbd3;
  transition: background 0.12s;
}
.mm360-fe-list-card:last-child { border-bottom: none; }
.mm360-fe-list-card:hover { background: #fdf8f2; }

.mm360-fe-list-badge {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.mm360-fe-list-badge svg { width: 14px; height: 14px; fill: #fff; }
.mm360-fe-list-badge .hs-emoji { font-size: 15px; line-height: 1; }
.mm360-fe-list-badge img { width: 18px; height: 18px; object-fit: contain; }

.mm360-fe-list-body {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mm360-fe-list-name {
  font-size: 0.88rem; font-weight: bold; color: #1a1a1a;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 120px;
}
.mm360-fe-list-price {
  font-size: 0.9rem; color: #c9a96e; font-weight: bold;
  font-family: system-ui, sans-serif; white-space: nowrap;
}
.mm360-fe-list-price del {
  color: #bbb; font-weight: normal; font-size: 0.78rem; margin-right: 3px;
}
.mm360-fe-list-stock {
  font-size: 0.7rem; font-family: system-ui, sans-serif;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.mm360-fe-list-stock.instock    { background: #eaf3de; color: #3b6d11; }
.mm360-fe-list-stock.outofstock { background: #fcebeb; color: #a32d2d; }
.mm360-fe-list-stock.onbackorder{ background: #faeeda; color: #854f0b; }

.mm360-fe-list-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.mm360-fe-list-btn-locate {
  padding: 6px 10px;
  background: transparent; border: 1px solid #c9a96e;
  border-radius: 6px; color: #c9a96e; font-size: 0.72rem;
  cursor: pointer; font-family: system-ui, sans-serif;
  transition: all 0.12s; white-space: nowrap;
}
.mm360-fe-list-btn-locate:hover { background: #c9a96e; color: #fff; }
.mm360-fe-list-btn-detail {
  padding: 6px 10px;
  background: #1a1a1a; border: 1px solid #1a1a1a;
  border-radius: 6px; color: #fff; font-size: 0.72rem;
  font-family: system-ui, sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: background 0.12s;
}
.mm360-fe-list-btn-detail:hover { background: #333; }

/* Mobile: Buttons unter den Infos */
@media (max-width: 520px) {
  .mm360-fe-list-card { flex-wrap: wrap; }
  .mm360-fe-list-body { min-width: 0; width: calc(100% - 48px); }
  .mm360-fe-list-actions { width: 100%; padding-left: 44px; }
  .mm360-fe-list-btn-locate,
  .mm360-fe-list-btn-detail { flex: 1; text-align: center; }
}

.mm360-fe-list-loading {
  text-align: center; color: #aaa;
  font-size: 0.85rem; font-family: system-ui, sans-serif;
  padding: 20px;
}