/* SECTION: Base */
.mm2{
  --r:20px;
  --gap:18px;
  --pad:22px;
  --border:rgba(0,0,0,.08);
  --text:#0f0f10;
  --muted:rgba(15,15,16,.68);
  max-width:1120px;
  padding:var(--pad);
  border:1px solid var(--border);
  border-radius:var(--r);
  background:linear-gradient(180deg,#fff,#fafafa);
}

/* SECTION: Grid */
@media (min-width:860px){
  .mm2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--gap);
    align-items:stretch;
  }
  .mm2 .mm2-card{margin:0}
}

/* SECTION: Card (flatten + center + no hover/interact) */
.mm2 .mm2-card{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;
  min-height:0;

  border:0;
  box-shadow:none;
  background:transparent;

  transform:none;
  transition:none;

  pointer-events:none;
}

/* SECTION: Allow interaction only on controls */
.mm2 .mm2-card a,
.mm2 .mm2-card select,
.mm2 .mm2-card button{
  pointer-events:auto;
}

/* SECTION: Media (full height, no frame) */
.mm2 .mm2-img,
.mm2 .mm2-ph{
  width:240px;
  height:100%;
  align-self:stretch;
  flex:0 0 auto;

  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;

  display:block;
}

.mm2 .mm2-img{
  height:100%;
  object-fit:contain;
  padding:0;
  box-sizing:border-box;
}

.mm2 .mm2-ph{
  display:none;
}

/* SECTION: Meta (center) */
.mm2 .mm2-meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mm2 .mm2-title{
  margin:0 0 6px;
  font-weight:900;
  letter-spacing:-.02em;
  font-size:22px;
  color:var(--text);
  text-align:center;
}

.mm2 .mm2-title a{
  color:inherit;
  text-decoration:none;
}

.mm2 .mm2-title a:hover{
  text-decoration:underline;
}

.mm2 .mm2-sub{
  margin:0 0 18px;
  font-size:15px;
  color:var(--muted);
  text-align:center;
}

/* SECTION: Controls (center) */
.mm2 .mm2-controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:6px;
}

/* SECTION: Select (premium) */
.mm2 .mm2-controls select{
  -webkit-appearance:none;
  appearance:none;

  width:100%;
  max-width:460px;
  padding:14px 46px 14px 16px;

  border-radius:16px;
  border:1px solid rgba(0,0,0,.14);
  background-color:#fff;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23333333' d='M7 10l5 5 5-5'/%3E%3C/svg%3E"),
    linear-gradient(180deg,%23ffffff,%23fbfbfb);
  background-repeat:no-repeat, no-repeat;
  background-position:right 16px center, 0 0;
  background-size:14px 14px, 100% 100%;

  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);

  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.mm2 .mm2-controls select:hover{
  transform:translateY(-1px);
  border-color:rgba(0,0,0,.20);
}

.mm2 .mm2-controls select:focus{
  outline:none;
  border-color:rgba(15,15,16,.40);
  box-shadow:0 0 0 5px rgba(15,15,16,.10);
}

/* SECTION: Button */
.mm2 .mm2-btn{
  padding:14px 22px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(180deg,#141416,#0b0b0c);
  color:#fff;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .12s ease, filter .12s ease, opacity .12s ease;
  white-space:nowrap;
}

.mm2 .mm2-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.mm2 .mm2-btn:active{
  transform:translateY(0);
}

.mm2 .mm2-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  background:linear-gradient(180deg,#2a2a2a,#1d1d1d);
}

/* SECTION: Message */
.mm2 .mm2-msg{
  margin-top:10px;
  font-size:14px;
  color:rgba(15,15,16,.60);
  text-align:center;
}

/* SECTION: Mobile */
@media (max-width:859px){
  .mm2{padding:16px}
  .mm2 .mm2-card{
    align-items:flex-start;
    justify-content:flex-start;
    gap:14px;
  }
  .mm2 .mm2-img{
    width:130px;
    height:auto;
    align-self:flex-start;
  }
  .mm2 .mm2-img{height:auto}
  .mm2 .mm2-controls{
    justify-content:flex-start;
  }
  .mm2 .mm2-title,
  .mm2 .mm2-sub,
  .mm2 .mm2-msg{
    text-align:left;
  }
  .mm2 .mm2-controls select{max-width:100%}
  .mm2 .mm2-btn{width:100%}
}