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.875%;
    grid-template-columns: 50% 50%;
  }
}
@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;
}
[class*="html--add-to-cart-button"] button:hover {
  filter: opacity(88%);
}
[class*="html--add-to-cart-button"] button:active {
  filter: opacity(100%);
}

@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;
  cursor: pointer;
}
[class*="html--product-quantity-cart-button"] button:hover {
  color: #929292;
}
[class*="html--product-quantity-cart-button"] button:active {
  color: #000000;
}

@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;
  cursor: pointer;
}
[class*="html--shipping-simulator"] button:hover {
  filter: opacity(88%);
}
[class*="html--shipping-simulator"] button:active {
  filter: opacity(100%);
}

@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"] a:hover {
  color: #929292;
}
[class*="html--shipping-simulator"] a:active {
  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"] {
  width: 100%;
  margin-left: 32px;
}
@media screen and (max-width: 1024px) {
  [class*="html--description"] {
    margin-left: 0;
    margin-top: 16px;
  }
}

[class*="html--product-description"] {
  display: flex;
}
@media screen and ((min-width: 769) and (max-width: 1024px)) {
  [class*="html--product-description"] {
    margin-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  [class*="html--product-description"] {
    position: relative;
    top: 9px;
    margin-top: 16px;
  }
}

[class*="html--product-description"] .contentItem{
  display: flex;
  flex-direction: row;
}

[class*="html--product-description"] button {
  font-weight: 400;
  font-size: 18px;
  line-height: 38px;
  background-color: transparent;
  border: transparent;
  color: #BFBFBF;
  height: 38px;
}
@media screen and (min-width: 1920px) {
  [class*="html--product-description"] button {
    font-size: 24px;
  }
}
[class*="html--product-description"] button:hover {
  border: transparent;
  background-color: transparent;
  color: #929292;

  transform: translateY(1px);
}

[class*="html--description2"] h2::after {
  content: " 2";
}
[class*="html--description3"] h2::after {
  content: " 3";
}
[class*="html--description4"] h2::after {
  content: " 4";
}
[class*="html--description5"] h2::after {
  content: " 5";
}

[class*="html--newsletter"] {
  padding: 64px 0 0 0;
  margin-top: 17px;
}
@media screen and (max-width: 768px) {
  [class*="html--newsletter"] {
    padding-top: 32px;
  }
}

[class*="html--newsletter"] input {
  background-color: transparent;

  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #929292;
}
@media screen and (max-width: 1024px) {
  [class*="html--newsletter"] input {
    font-size: 12px;
    line-height: 16px;
  }
}

[class*="html--newsletter"] button {
  background-color: transparent;
  border: none;
  border-radius: 0;

  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  color: #FFFFFF;

  border-bottom: 2px solid #FFFFFF;
}
@media screen and ((min-width: 640px) and (max-width: 1024px)) {
  [class*="html--newsletter"] button {
    font-size: 14px;
    line-height: 19px;
  }
}
@media screen and (max-width: 639px) {
  [class*="html--newsletter"] button {
    font-size: 14px;
    line-height: 19px;
  }
}
[class*="html--newsletter"] button:hover {
  color: #929292;
  border-bottom: 2px solid #929292;
  border-top: none;
  background-color: transparent;
}
[class*="html--newsletter"] button:active {
  color: #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}

[class*="html--newsletter"] div {
  border: none;
  background-color: #000000;
}
@media screen and (max-width: 639px) {
  [class*="html--newsletter"] div {
    position: relative;
  }
}

[class*="html--product-summary-shelf"] {
  display: flex;
  flex-direction: column;
}