/* Minifutky PDP – PINK (girls)
   Usage in HTML wrapper: <div class="mf-pdp mf-theme-pink"> ... </div>
   Upload this file to: /user/documents/mf-pdp-pink.css
*/

.mf-pdp.mf-theme-pink{
  --mf-accent:#ec4899;
  --mf-sky-50:#fdf2f8;
  --mf-sky-100:#fce7f3;
  --mf-sky-200:#fbcfe8;

  --mf-ink:#0f172a;
  --mf-muted:rgba(15,23,42,.68);

  /* Borders / lines / shadows */
  --mf-border:rgba(236,72,153,.18);
  --mf-shadow:0 10px 26px rgba(236,72,153,.16);
  --mf-hr:rgba(236,72,153,.16);

  /* Chips */
  --mf-chip-border:rgba(236,72,153,.22);
  --mf-chip-text:#9d174d;

  /* Theme-dependent element borders */
  --mf-section-border:rgba(236,72,153,.12);
  --mf-highlight-border:rgba(236,72,153,.18);
  --mf-img-border:rgba(236,72,153,.16);
  --mf-details-border:rgba(236,72,153,.18);
  --mf-table-border:rgba(236,72,153,.14);
  --mf-sizebox-border:rgba(236,72,153,.22);
}

/* BASE LAYOUT (theme-agnostic, uses variables above) */
.mf-pdp{
  max-width:none;
  width:100%;
  margin:0;
  color:var(--mf-ink);
  line-height:1.65;
}

.mf-row{display:flex;gap:22px;align-items:center}
.mf-col{flex:1;min-width:0}

.mf-card{
  border:1px solid var(--mf-border);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg,#ffffff 0%, var(--mf-sky-50) 100%);
}

.mf-muted{color:var(--mf-muted)}
.mf-shadow{box-shadow:var(--mf-shadow)}
.mf-hr{height:1px;background:var(--mf-hr);margin:26px 0}

.mf-badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.mf-badge{
  border:1px solid var(--mf-chip-border);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  background:linear-gradient(180deg,#ffffff 0%, var(--mf-sky-100) 100%);
  color:var(--mf-chip-text);
  white-space:nowrap;
}

.mf-section{
  background:linear-gradient(180deg,var(--mf-sky-50) 0%, #ffffff 70%);
  border:1px solid var(--mf-section-border);
  border-radius:20px;
  padding:14px;
}

.mf-highlight{
  margin-top:14px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--mf-sky-100) 0%, #ffffff 100%);
  border:1px solid var(--mf-highlight-border);
  padding:12px 14px;
  color:var(--mf-chip-text);
}

.mf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mf-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.mf-img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
  border:1px solid var(--mf-img-border);
  background:#fff;
}

.mf-imggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mf-imgcap{font-size:12px;color:var(--mf-muted);margin:8px 0 0}

.mf-pdp h2{font-size:22px;margin:0 0 10px;color:var(--mf-ink)}
.mf-pdp h3{font-size:16px;margin:0 0 6px;color:var(--mf-ink)}

.mf-pdp details{
  border:1px solid var(--mf-details-border);
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(180deg,#ffffff 0%, var(--mf-sky-50) 100%);
}
.mf-pdp summary{cursor:pointer;font-weight:700;color:var(--mf-chip-text)}

.mf-pdp table{width:100%;border-collapse:collapse}
.mf-pdp td{padding:10px 12px;border-top:1px solid var(--mf-table-border);vertical-align:top}
.mf-pdp td:first-child{width:38%;color:var(--mf-muted)}

.mf-mini{font-size:12px;color:var(--mf-muted)}
.mf-emoji{display:inline-block;margin-right:8px}

/* SIZE CHART BOX (auto-fit, no forced upscale) */
.mf-sizebox{
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--mf-sizebox-border);
  background:#ffffff;
  overflow:auto;
  max-width:380px;
  max-height:250px;
}
.mf-sizebox img{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
}

@media (max-width:740px){
  .mf-row{flex-direction:column;align-items:stretch}
  .mf-grid3,.mf-grid2,.mf-imggrid{grid-template-columns:1fr}
  .mf-pdp td:first-child{width:auto}
  .mf-sizebox{max-width:100%}
}