HTML button displays very differently on 2 pages with same CSS-CodePudding

I have two web pages - one is a Product Listings Page:

/*BUTTON STYLE*/

button {
  background-color: #132257;
  color: white;
  border: 0.25em solid white;
  cursor: pointer;
  width: 100%;
  height: 90%;
}


/*PRODUCT LISTINGS PAGE*/

.shoplayout {
  grid-area: MC;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "filters listing";
}

.filters {
  grid-area: filters;
}

.listing {
  grid-area: listing;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75em;
}

.product {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  border: 0.125em solid #1b2493;
}

.product>* {
  height: 8vh;
  line-height: 8vh;
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.product div:nth-child(even) {
  /*Every second div within a product has the same background*/
  background-color: lightsteelblue;
}

.productbuy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  border: none;
}

.productpic {
  grid-row: 1;
  padding: 0;
  border: none;
  display: flex;
  justify-items: center;
  height: 20vh;
}

.productpic>img {
  /*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
  max-width: 100%;
  max-height: 100%;
}


/*PRODUCT DETAILS PAGE*/

.productdetails {
  grid-area: MC;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 1em;
}

.productdetails>* {
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.picdetail {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-color: cornsilk;
  justify-items: center;
  border: none;
}

.picdetail img {
  max-width: 100%;
  max-height: 100%;
}

.productnumbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

<!-- CONTENT -->
<div  id="elemToSlide">
  <div >
    <div >
      <!--ALL PRODUCTS IN HERE-->
      <div >
        <div>Ch. BonPlonque, 2019</div>
        <div>Bordeaux, France</div>
        <div>Crisp fresh white</div>
        <div>3.21/5, 3 reviews</div>

        <!--DISPLAY AS A 4 COL INNER GRID-->
        <div >
          <div>&euro;15.95</div>
          <div>Stock: 5</div>
          <div><button>Buy</button></div>
          <div>Qty</div>
        </div>
      </div>

      <!--END LISTING COLUMNS-->
    </div>

    <!--END SHOP CONTENT-->
  </div>

One is a Products Details Page:

/*BUTTON STYLE*/

button {
  background-color: #132257;
  color: white;
  border: 0.25em solid white;
  cursor: pointer;
  width: 100%;
  height: 90%;
}


/*PRODUCT LISTINGS PAGE*/

.shoplayout {
  grid-area: MC;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "filters listing";
}

.filters {
  grid-area: filters;
}

.listing {
  grid-area: listing;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75em;
}

.product {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  border: 0.125em solid #1b2493;
}

.product>* {
  height: 8vh;
  line-height: 8vh;
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.product div:nth-child(even) {
  /*Every second div within a product has the same background*/
  background-color: lightsteelblue;
}

.productbuy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  border: none;
}

.productpic {
  grid-row: 1;
  padding: 0;
  border: none;
  display: flex;
  justify-items: center;
  height: 20vh;
}

.productpic>img {
  /*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
  max-width: 100%;
  max-height: 100%;
}


/*PRODUCT DETAILS PAGE*/

.productdetails {
  grid-area: MC;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 1em;
}

.productdetails>* {
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.picdetail {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-color: cornsilk;
  justify-items: center;
  border: none;
}

.picdetail img {
  max-width: 100%;
  max-height: 100%;
}

<!--,GRID CELL 5, 2 - DISPLAYS AS A 4 COL INNER GRID-->
<div >
  <div>&euro;15.95</div>
  <div>Stock: 5</div>
  <div><button>Buy</button></div>
  <div>Qty</div>
</div>

Pretty much everything displays as I want with the exception of the button captioned BUY:

The HTML for the .productbuy element is identical in both cases, the CSS is identical in both cases 9with the exception of the nth child background-color), the button style applies across the entire website, so I am puzzled as to why this is happening.

Any and all suggestions gratefully received.

CodePudding user response：

The problem is not your style, button is working good but on details page your button's styles is according to the div parent change div parent style