/* =========================================================
   MG LP Store (Theme background allowed)
   Scope: .mglp only
========================================================= */

:root{
  --mglp-text:#f5f5f7;
  --mglp-muted:#b8b8c7;
  --mglp-accent:#f57c00;

  --mglp-card-bg: rgba(26,26,36,0.88);
  --mglp-border: rgba(255,255,255,0.10);
  --mglp-panel-border: rgba(255,255,255,0.08);
}

/* =========================================================
   Wrapper (NO dark panel; theme background shows through)
========================================================= */
.mglp{
  color: var(--mglp-text);
  max-width: 1200px;
  margin: 18px auto 40px;
  padding: 0 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 980px){
  .mglp{ margin: 12px auto 32px; padding: 0 12px; }
}
.mglp a{ color: inherit; text-decoration: none; }

/* Empty */
.mglp .mglp-empty{
  padding: 18px;
  background: rgba(17,17,24,0.65);
  border: 1px solid var(--mglp-panel-border);
  border-radius: 16px;
  margin: 12px 0;
}

/* =========================================================
   Filters
========================================================= */
.mglp .mglp-filters{ margin: 0 0 16px; }

.mglp .mglp-filters-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.mglp .mglp-filters select,
.mglp .mglp-filters input{
  background: rgba(17,17,24,0.75);
  color: var(--mglp-text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}

.mglp .mglp-filter-btn{
  background: var(--mglp-accent);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
}

.mglp .mglp-filter-clear{
  color: var(--mglp-muted);
  font-size:13px;
  padding:8px 10px;
}

/* =========================================================
   Shelf / Row
========================================================= */
.mglp .mglp-shelf{ margin: 18px 0 24px; }

.mglp .mglp-shelf-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin: 0 0 10px;
}

.mglp .mglp-shelf-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.2px;
  margin:0;
}

.mglp .mglp-shelf-more{
  color: var(--mglp-muted);
  font-size: 12px;
}

.mglp .mglp-row-wrap{ position:relative; }

.mglp .mglp-row{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.mglp .mglp-row::-webkit-scrollbar{ height: 10px; }
.mglp .mglp-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 999px; }

.mglp .mglp-row-nav{
  position:absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 38px;
  height: 64px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,10,14,0.65);
  color:#fff;
  border-radius: 14px;
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 24px;
  user-select:none;
}
.mglp .mglp-row-nav.prev{ left: -6px; }
.mglp .mglp-row-nav.next{ right: -6px; }

@media (max-width: 768px){
  .mglp .mglp-row-nav{ display:none; }
}

/* =========================================================
   Card sizing (PCで4枚)
========================================================= */
.mglp .mglp-row > a.mglp-card{
  flex: 0 0 calc((100% - 36px) / 4);
  width: calc((100% - 36px) / 4);
  max-width: calc((100% - 36px) / 4);
}
@media (max-width: 980px){
  .mglp .mglp-row > a.mglp-card{
    flex-basis: calc((100% - 24px) / 3);
    width:      calc((100% - 24px) / 3);
    max-width:  calc((100% - 24px) / 3);
  }
}
@media (max-width: 768px){
  .mglp .mglp-row > a.mglp-card{
    flex-basis: calc((100% - 12px) / 2);
    width:      calc((100% - 12px) / 2);
    max-width:  calc((100% - 12px) / 2);
  }
}
@media (max-width: 420px){
  .mglp .mglp-row > a.mglp-card{
    flex-basis: 86%;
    width: 86%;
    max-width: 86%;
  }
}

/* =========================================================
   Card
========================================================= */
.mglp .mglp-card{
  background: var(--mglp-card-bg);
  border: 1px solid var(--mglp-border);
  border-radius: 16px;
  overflow:hidden;
  display:block;
  transition: transform .18s ease, border-color .18s ease;
}
.mglp .mglp-card:hover{
  transform: translateY(-2px);
  border-color: rgba(245,124,0,0.45);
}

.mglp .mglp-card-media{
  position:relative;
  aspect-ratio: 16/9;
  background: rgba(17,17,24,0.75);
}

.mglp .mglp-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mglp .mglp-card-media-ph{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(245,124,0,0.08));
}

/* badges */
.mglp .mglp-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,14,0.70);
}
.mglp .mglp-badge-secondary{
  top: 10px;
  left: auto;
  right: 10px;
  font-weight: 800;
  background: rgba(17,17,24,0.75);
  color: var(--mglp-text);
}
.mglp .mglp-badge-primary{
  background: rgba(245,124,0,0.18);
  border-color: rgba(245,124,0,0.35);
}

/* body layout */
.mglp .mglp-card-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.mglp .mglp-card-title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.35;
  margin:0;
}

/* Ratings (2 columns) */
.mglp .mglp-card-ratings{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.mglp .mglp-rating-label{
  font-size: 12px;
  font-weight: 800;
  opacity: .88;
  margin: 0 0 6px;
}

.mglp .mglp-stars{
  display:inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: .95;
}

/* 🔥ここが重複の元：擬似ラベルは完全に無効化 */
.mglp .mglp-stars::before,
.mglp .mglp-stars::after{
  content: none !important;
}

/* Price row */
.mglp .mglp-card-priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.mglp .mglp-price-label{ font-weight: 900; opacity:.92; }
.mglp .mglp-price-value{ font-weight: 900; }

/* =========================================================
   Single LP page (optional; if you want to use CSS not inline)
========================================================= */
.mglp .mglp-single-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 12px 40px;
}
.mglp .mglp-single-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
.mglp .mglp-single-back{
  display:inline-block;
  margin: 10px 0 6px;
  text-decoration: none;
}
.mglp .mglp-single-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-top: 10px;
}
.mglp .mglp-single-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
}
.mglp .mglp-single-ratings{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  min-width: 220px;
}
.mglp .mglp-single-desc{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.8;
}
.mglp .mglp-single-foot{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mglp .mglp-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--mglp-accent);
  color: #fff;
  font-weight: 900;
  text-decoration:none;
}
.mglp .mglp-cta-btn.is-disabled{ opacity: .5; cursor: not-allowed; }
.mglp .mglp-cta-note{ opacity: .85; font-size: 13px; }

@media (max-width: 800px){
  .mglp .mglp-single-head{ flex-direction: column; align-items: flex-start; }
  .mglp .mglp-single-title{ font-size: 28px; }
  .mglp .mglp-single-ratings{ width: 100%; }
}