challenge-vtex-io-sabrina-miranda/react/components/Html/styles.css

[class*="html--pdp-breadcrumb"] {
  background-color: #FFFFFF;
}

[class*="html--product-main"],
[class*="html--product-availability"] {
  width: 94.4444%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 48.8% 51.2%;
  padding-bottom: 16px;
}
@media screen and (min-width: 1920px) {
  [class*="html--product-main"],
  [class*="html--product-availability"] {
    width: 71.2%;
    grid-template-columns: 50.5% 49.5%;
  }
}
@media screen and (max-width: 1024px) {
  [class*="html--product-main"],
  [class*="html--product-availability"] {
    display: flex;
    flex-direction: column;
    width: 92.1875%;
  }
}
@media screen and (max-width: 768px) {
  [class*="html--product-main"],
  [class*="html--product-availability"] {
    width: 79%;
  }
}

[class*="html--stack"] {
  grid-area: 1/1;
}

[class*="html--right-col"],
[class*="html--info-availability"] {
  grid-area: 1/2;
  margin-left: 32px;
}
@media screen and (max-width: 1024px) {
  [class*="html--right-col"] {
    margin-left: 0;
  }
}

[class*="html--buy-button"] {
  width: 100%;
}

[class*="html--add-to-cart-button"] button {
  background-color: #000000 !important;
  border-radius: 0;
  border: none;
  width: 100%;
  height: 49px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: block !important;
}

@media screen and (max-width: 768px) {
  [class*="html--add-to-cart-button"] button {
    height: 74px !important;
  }
}

[class*="html--product-quantity-cart-button"] {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
  gap: 10px;

  width: 100%;
  height: 49px;
}

@media screen and (max-width: 768px){
  [class*="html--product-quantity-cart-button"] {
    flex-direction: column;
  }
}

[class*="html--product-quantity-cart-button"] input{
  height: 49px;
  width: 32px;

  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #929292;
}

[class*="html--product-quantity-cart-button"] button{
  height: 49px;
  background-color: #FFFFFF;

  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  border-radius: 0;

  display: block !important;
}

@media screen and (max-width: 768px) {
  [class*="html--shipping-simulator"] {
    padding-top: 81px;
  }
}

[class*="html--shipping-simulator"] button {
  background-color: #000000;
  border-radius: 0;
  border: none;
  width: 49px;
  height: 49px !important;

  position: absolute;
  display: block !important;
}

@media screen and (min-width: 769px) {
  [class*="html--shipping-simulator"] button {
    left: 228px;
  }
}

@media screen and (max-width: 768px) {
  [class*="html--shipping-simulator"] button {
    right: 0;
  }
}

[class*="html--shipping-simulator"] a {
  color: #000000;
}

[class*="html--shipping-simulator"] svg {
  display: none;
}

[class*="html--message-availability"] form {
  margin: 0;
}

[class*="html--info-availability"] .html--sku-selector-m3 {
  margin-top: 80px;
}

/* Para ocultar o botão embalar para presente */
[class*="html--right-col"] button {
  display: none;
}

[class*="html--pix"] {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

[class*="html--description"] {
  position: relative;
  top: 9px;
}