/* Master Aussteller – Frontend (light card style like example) */

.ma-wrap{
  width:100%;
  max-width:var(--ma-wrap-max);
  margin:22px auto;
  padding:10px;
  box-sizing:border-box;
  color:var(--ma-text);
  background: linear-gradient(180deg, var(--ma-bg-top), var(--ma-bg-bottom));
  border-radius: var(--ma-radius2);
}

.ma-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:6px 4px 16px;
}

.ma-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.15;
}


.ma-title.is-hidden{ display:none; }

.ma-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:700;
  color:var(--ma-accent);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--ma-border);
  background:var(--ma-card);
}
.ma-back:hover{ border-color: rgba(37,99,235,.35); }

.ma-grid{
  display:grid;
  gap:var(--ma-gap);
  align-items:stretch;
}

.ma-grid-cats{
  grid-template-columns:repeat(auto-fit, minmax(var(--ma-cat-min), 1fr));
}

.ma-grid-plugins{
  grid-template-columns:repeat(auto-fit, minmax(var(--ma-plugin-min), 1fr));
}

/* Shared card */
.ma-tile,
.ma-plugin{
  background:var(--ma-card);
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius2);
  padding:18px 18px;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color:var(--ma-text);
}

.ma-tile:hover,
.ma-plugin:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  border-color: rgba(37,99,235,.35);
}

/* Category tile */
.ma-tile{
  background: var(--ma-cat-bg, var(--ma-card));
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:92px;
  position: relative;
  padding-right: 86px; /* room for right icon */
}

.ma-tile-title{
  font-size:16px;
  font-weight:800;
}

.ma-tile-sub{
  font-size:13px;
  color:var(--ma-muted);
  line-height:1.4;
}

/* Category icon (right side) */
.ma-tile-icon{
  position:absolute;
  top:16px;
  right:16px;
  width:48px;
  height:48px;
  border-radius:14px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(17,24,39,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
}
.ma-tile-icon img{
  width: 72%;
  height: 72%;
  object-fit: contain;
  display:block;
}

/* Plugin tile like screenshot */
.ma-plugin{
  appearance:none;
  font: inherit;
  display:flex;
  align-items:flex-start;
  gap:16px;
  text-align:left;
  cursor:pointer;
  width:100%;
}

.ma-plugin:focus,
.ma-tile:focus{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.ma-plugin-img{
  flex:0 0 var(--ma-plugin-img-w);
  width:var(--ma-plugin-img-w);
  height:72px;
  border-radius:16px;
  background: rgba(17,24,39,.04);
  border:1px solid rgba(17,24,39,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  box-sizing:border-box;
}

.ma-plugin-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.ma-plugin-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.ma-plugin-title{
  font-size:15px;
  font-weight:850;
  line-height:1.25;
}

.ma-plugin-excerpt{
  font-size:13px;
  color:var(--ma-muted);
  line-height:1.45;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.ma-empty{
  padding:18px;
  border:1px dashed var(--ma-border);
  border-radius:var(--ma-radius2);
  color:var(--ma-muted);
  background: rgba(17,24,39,.02);
}

/* Buttons */
.ma-btn{
  appearance:none;
  border:1px solid var(--ma-border);
  background: var(--ma-card);
  color: var(--ma-text);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.ma-btn:hover{ border-color: rgba(37,99,235,.35); }

.ma-btn-primary{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.10);
  color: var(--ma-accent2);
}

/* Modal */
.ma-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.ma-modal.is-open{ display:block; }

.ma-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

.ma-modal-dialog{
  position:relative;
  width:min(1400px, calc(100% - 80px));
  margin: 40px auto;
  max-height: calc(100% - 80px);
  border-radius: 22px;
  background: var(--ma-card);
  border: 1px solid var(--ma-border);
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ma-modal-body{
  padding: 18px 18px 22px;
  overflow:auto;
  flex:1 1 auto;
}



.ma-modal-icon{
  position:absolute;
  top:12px;
  right:58px; /* left of close button */
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--ma-border);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:2;
}
.ma-modal-icon-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ma-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--ma-border);
  background: var(--ma-card);
  cursor:pointer;
  font-size:22px;
  line-height:36px;
}

.ma-modal-loading{ padding: 18px; color: var(--ma-muted); }

.ma-h2{ font-size:18px; font-weight:900; margin: 10px 0 14px; }


/* Details layout (Title top, 2 columns 40/60) */
.ma-details{ display:block; }
.ma-details-columns{
  display:flex;
  gap:14px;
  align-items:stretch;
  margin-top: 10px;
}

.ma-details-left{ flex:0 0 40%; min-width:260px; display:flex; flex-direction:column; }
.ma-details-right{
  flex:1 1 60%;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.ma-gallery-box{
  flex:1 1 auto;
  height:100%;
  border:1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  padding: 10px;
  background: rgba(17,24,39,.02);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* Slider */
.ma-slider{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background: rgba(17,24,39,.02);
  height: clamp(360px, 55vh, 740px);
}

.ma-slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition: transform .26s ease;
  will-change: transform;
}

.ma-slide{ min-width:100%; height:100%; }

.ma-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.08);
  background:#fff;
}

.ma-slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--ma-border);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:24px;
  line-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.ma-slider-btn:hover{ border-color: rgba(37,99,235,.35); }

.ma-slider-btn.ma-prev{ left:10px; }
.ma-slider-btn.ma-next{ right:10px; }

.ma-slider-dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.08);
}

.ma-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background: rgba(17,24,39,.25);
  cursor:pointer;
  padding:0;
}

.ma-dot.is-active{ background: var(--ma-accent); }

.ma-slider-empty{
  padding:16px;
  color: var(--ma-muted);
  text-align:center;
  border:1px dashed var(--ma-border);
  border-radius:14px;
  background: rgba(17,24,39,.02);
}

/* Info boxes stacked on right */
.ma-info-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Price bar bottom right */
.ma-price-bar{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  padding:12px;
  background: rgba(17,24,39,.02);
}

.ma-price-label{
  font-size:12px;
  color: var(--ma-muted);
  font-weight: 800;
}


@media (max-width: 720px){
  .ma-modal-dialog{
    width: calc(100% - 32px);
    margin: 16px auto;
    max-height: calc(100% - 32px);
    border-radius: 18px;
  }
}
@media (max-width: 860px){
  .ma-details-columns{ flex-direction:column; }
  .ma-details-left{ flex-basis:auto; min-width:0; }
  .ma-slider{ height:260px; }
}

.ma-gallery{ width:100%; }


.ma-info-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ma-info-box{
  border:1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(17,24,39,.02);
}

.ma-info-label{
  font-size: 12px;
  color: var(--ma-muted);
  font-weight: 800;
  margin-bottom: 6px;
}

.ma-info-value{
  font-size: 13px;
  line-height: 1.55;
  color: var(--ma-text);
}

.ma-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 16px;
}

/* Inquiry form */
.ma-form{ margin-top: 10px; }

.ma-form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ma-form-row label{ font-size: 12px; font-weight: 800; color: var(--ma-muted); }

.ma-form input[type="text"],
.ma-form input[type="email"],
.ma-form textarea{
  width:100%;
  border:1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ma-text);
  box-sizing:border-box;
}

.ma-form-check label{ flex-direction:row; align-items:flex-start; gap:10px; }
.ma-form-check input{ margin-top: 4px; }

.ma-form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }

.ma-form-status{ margin-top: 10px; font-size: 13px; color: var(--ma-muted); }

@media (max-width: 640px){
  .ma-title{ font-size:19px; }
  .ma-plugin{ flex-direction:column; }
  .ma-plugin-img{ width: 96px; flex-basis:auto; }
  .ma-modal-dialog{ margin: 18px auto; }
}


/* ===== Fullscreen Lightbox ===== */

.ma-slider .ma-slide img{ cursor: zoom-in; }

.ma-lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
}
.ma-lightbox.is-open{ display:block; }

.ma-lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78);
}

.ma-lightbox-inner{
  position:absolute;
  inset:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

body.ma-lightbox-open{
  overflow:hidden;
}

.ma-lightbox-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.ma-lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.ma-lightbox-close:hover{ background: rgba(255,255,255,.18); }

.ma-lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:56px;
  height:56px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.ma-lightbox-nav:hover{ background: rgba(255,255,255,.18); }
.ma-lb-prev{ left:10px; }
.ma-lb-next{ right:10px; }

.ma-lightbox-count{
  position:absolute;
  bottom:10px;
  left:50%;
  transform: translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  backdrop-filter: blur(6px);
}

@media (max-width: 680px){
  .ma-lightbox-inner{ inset:14px; }
  .ma-lightbox-nav{ width:48px; height:48px; font-size:30px; }
}