/* === Defensive: remove pseudo-elements that some themes inject === */
#mmf-shop::before,
#mmf-shop .container::before,
#mmf-shop .container > *::before,
#mmf-shop .container > :not(.box)::before,
#mmf-shop .container > .wp-block::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === Defensive: hide any non-.box children inside the grid (stray WP blocks) === */
#mmf-shop .container > :not(.box) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === Full-width breakout === */
#mmf-shop,
#mmf-shop .container,
.wp-coder,
.wp-block,
.wp-block-wp-coder {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fff;
  font-family: "Varta" !important;
}

.placeholder {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;

  display: block;      /* makes auto margin work */
  margin: 0 auto;      /* centers horizontally */
}

/* === NAVBAR & TITLE: force-perfect centering === */
#mmf-shop .navbar {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  padding: 5px !important;
  margin: 0 auto 10px auto !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* ensures navbar itself is centered in breakout wrapper */
  box-sizing: border-box;
}

#mmf-shop .navbar,
#mmf-shop h1 {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 4vh auto 4vh auto !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 2.5vw !important;
  font-weight: 800 !important;
  color: #8b0a24 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.1vw !important;
  font-family: "Varta" !important;
}

/* === Product Grid (3 per row, matches accessories exactly) === */
#mmf-shop .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: start;

  column-gap: 1.2vw;
  row-gap: 3vw;

  width: 100vw;
  padding: 0 1.5vw 4vw 1.5vw;
  box-sizing: border-box;
}

/* === Product Box — EXACT SAME SIZE AS ACCESSORIES === */
#mmf-shop .box {
  background: #fff;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.15);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 28vw !important;
  max-width: 28vw !important;
  min-height: 60vh !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#mmf-shop .box:hover {
  transform: translateY(-0.5vw);
  box-shadow: 0 0.8vw 1.6vw rgba(0,0,0,0.2);
}

/* === Product Image (same viewport height as accessories) === */
#mmf-shop .box img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  border-bottom: 0.15vw solid #eee;
}

/* === Text === */
#mmf-shop .box h3 {
  margin: 1vh 0 0;
  font-size: 1.1vw;
  font-weight: 700;
  color: #000;
  font-family: "Varta";
}

/* === Buttons === */
#mmf-shop .box button {
  background-color: #8b0a24;
  color: white;
  border: none;
  border-radius: 2vw;

  padding: 1vh 2vw;
  margin: 2vh auto 3vh auto;

  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease;
  font-family: "Varta";
}

#mmf-shop .box button:hover {
  transform: scale(1.05);
  background-color: #a01030;
}

#mmf-shop .return {
  background-color: #8b0a24;
  color: white;
  border: none;
  border-radius: 2vw;
  padding: 1vh 2vw;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease;
  margin: 2vh 0 3vh 2vw;
  display: inline-block;
}

#mmf-shop .return:hover {
  transform: scale(1.05);
  background-color: #a01030;
}

/* === Responsive Adjustments — identical to accessories === */
@media (max-width: 1200px) {
  #mmf-shop .container {
    grid-template-columns: repeat(2, 1fr);
  }
  #mmf-shop .box {
    width: 40vw !important;
    max-width: 40vw !important;
  }
}

@media (max-width: 768px) {
  #mmf-shop .container {
    grid-template-columns: 1fr;
  }
  #mmf-shop .box {
    width: 90vw !important;
    max-width: 90vw !important;
  }
  #mmf-shop h1 {
    font-size: 8vw !important;
  }
}

/* === Final WP cleanup === */
#mmf-shop::before,
#mmf-shop .container::before {
  content: none !important;
  display: none !important;
}

html, body {
  overflow-x: hidden !important;
}