section#post .view {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  padding: 20px;
}
section#post .view .lt .data {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  font-size: 15px;
  margin: 0 0 20px 0;
}
section#post .view .lt .data p {
  margin: 0;
}
section#post .view .lt .data p a {
  color: black;
  margin: 0 10px;
}
section#post .view .lt .data p a:first-child {
  margin: 0 10px 0 0;
}
section#post .view .lt .data p a:last-child {
  margin: 0 0 0 10px;
}
section#post .view .lt .data span {
  color: gray;
}
section#post .view .lt .data span i {
  width: auto;
  height: auto;
  display: inline;
  font-style: italic;
}
section#post .view .lt .pics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
section#post .view .lt .pics li {
  position: relative;
  overflow: hidden;
}
section#post .view .lt .pics li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  cursor: crosshair;
  border-radius: 5px;
  aspect-ratio: 1/1;
}
section#post .view .rt {
  position: sticky;
  top: 20px;
  height: max-content;
}
section#post .view .rt .info {
  padding: 0 0 30px 0;
  border-bottom: 1px solid #eee;
}
section#post .view .rt .info p {
  margin: 0;
}
section#post .view .rt .info p a {
  color: royalblue;
  font-weight: 500;
}
section#post .view .rt .info h2 {
  margin: 10px 0;
  font-size: 34px;
  color: black;
}
section#post .view .rt .info h4 {
  margin: 10px 0 8px 0;
  font-size: 24px;
  color: black;
}
section#post .view .rt .info h4 del {
  color: gray;
  font-weight: 400;
}
section#post .view .rt .info span {
  color: gray;
  font-size: 13px;
}
section#post .view .rt .info p.promo {
  color: orangered;
  font-weight: 500;
  margin: 10px 0 0 0;
}
section#post .view .rt .colors,
section#post .view .rt .sizes {
  padding: 20px 0 0 0;
}
section#post .view .rt .colors h5,
section#post .view .rt .sizes h5 {
  margin: 10px 0;
}
section#post .view .rt .colors h5 span,
section#post .view .rt .sizes h5 span {
  font-weight: 400;
}
section#post .view .rt .colors ul,
section#post .view .rt .sizes ul {
  display: flex;
  gap: 10px;
}
section#post .view .rt .colors ul li span,
section#post .view .rt .sizes ul li span {
  color: white;
}
section#post .view .rt .colors ul li img,
section#post .view .rt .sizes ul li img {
  width: 65px;
  border-radius: 50px;
  border: 1px solid #eee;
  cursor: pointer;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1/1;
}
section#post .view .rt .sizes {
  padding: 20px 0;
}
section#post .view .rt .sizes ul li p {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  background: #eee;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin: 0;
}
section#post .view .rt .colors ul li.active img {
  border-color: #333;
}
section#post .view .rt .sizes ul li.active p {
  background: #101010;
  color: white;
}
section#post .view .rt .payments,
section#post .view .rt .shippings {
  margin: 20px 0;
}
section#post .view .rt .payments h5,
section#post .view .rt .shippings h5 {
  margin: 0;
}
section#post .view .rt .payments li.pay,
section#post .view .rt .payments li.shipp,
section#post .view .rt .shippings li.pay,
section#post .view .rt .shippings li.shipp {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 1px 1px 3px;
  border-radius: 8px;
  background: white;
  padding: 20px;
  margin: 10px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "pay-name pay-price" "pay-description pay-price";
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  display: none;
}
section#post .view .rt .payments li.pay h4,
section#post .view .rt .payments li.shipp h4,
section#post .view .rt .shippings li.pay h4,
section#post .view .rt .shippings li.shipp h4 {
  margin: 0;
  grid-area: pay-name;
}
section#post .view .rt .payments li.pay h4 span,
section#post .view .rt .payments li.shipp h4 span,
section#post .view .rt .shippings li.pay h4 span,
section#post .view .rt .shippings li.shipp h4 span {
  background: royalblue;
  color: white;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 400;
  width: max-content;
}
section#post .view .rt .payments li.pay p,
section#post .view .rt .payments li.shipp p,
section#post .view .rt .shippings li.pay p,
section#post .view .rt .shippings li.shipp p {
  margin: 5px 0 0 0;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-area: pay-description;
  font-size: 14px;
}
section#post .view .rt .payments li.pay .price,
section#post .view .rt .payments li.shipp .price,
section#post .view .rt .shippings li.pay .price,
section#post .view .rt .shippings li.shipp .price {
  grid-area: pay-price;
}
section#post .view .rt .payments li.pay .price del,
section#post .view .rt .payments li.shipp .price del,
section#post .view .rt .shippings li.pay .price del,
section#post .view .rt .shippings li.shipp .price del {
  margin: 0 0 8px 0;
  display: block;
}
section#post .view .rt .payments li.pay .price h5,
section#post .view .rt .payments li.shipp .price h5,
section#post .view .rt .shippings li.pay .price h5,
section#post .view .rt .shippings li.shipp .price h5 {
  margin: 0;
}
section#post .view .rt .payments li.pay .price h5 span,
section#post .view .rt .payments li.shipp .price h5 span,
section#post .view .rt .shippings li.pay .price h5 span,
section#post .view .rt .shippings li.shipp .price h5 span {
  color: royalblue;
}
section#post .view .rt .payments li.shipp h4 span,
section#post .view .rt .payments li.shipp .price h5 span,
section#post .view .rt .shippings li.shipp h4 span,
section#post .view .rt .shippings li.shipp .price h5 span {
  color: green;
}
section#post .view .rt .payments li.pay:first-child,
section#post .view .rt .payments li.shipp:first-child,
section#post .view .rt .shippings li.pay:first-child,
section#post .view .rt .shippings li.shipp:first-child {
  margin: 0 0 8px 0;
}
section#post .view .rt .payments li.pay:last-child,
section#post .view .rt .payments li.shipp:last-child,
section#post .view .rt .shippings li.pay:last-child,
section#post .view .rt .shippings li.shipp:last-child {
  margin: 8px 0 0 0;
}
section#post .view .rt .payments li.pay.active,
section#post .view .rt .shippings li.pay.active {
  background: aliceblue;
  border-color: royalblue;
  display: grid;
}
section#post .view .rt .payments li.shipp.active,
section#post .view .rt .shippings li.shipp.active {
  background: rgba(42, 163, 107, 0.035);
  border-color: green;
  display: grid;
}
section#post .view .rt .payments a.more,
section#post .view .rt .shippings a.more {
  display: block;
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 500;
}
section#post .view .rt .payments a.more::after,
section#post .view .rt .shippings a.more::after {
  content: "Ver mas opciones";
}
section#post .view .rt .payments.active li.pay,
section#post .view .rt .payments.active li.shipp,
section#post .view .rt .shippings.active li.pay,
section#post .view .rt .shippings.active li.shipp {
  display: grid;
}
section#post .view .rt .payments.active a.more::after,
section#post .view .rt .payments.active a.more::after,
section#post .view .rt .shippings.active a.more::after,
section#post .view .rt .shippings.active a.more::after {
  content: "Ocultar opciones";
}
section#post .view .rt .buttons {
  display: grid;
  grid-template-columns: auto 1fr 24px;
  gap: 10px;
  align-items: center;
  padding: 20px 0;
}
section#post .view .rt .buttons .quantity {
  display: flex;
}
section#post .view .rt .buttons .quantity button {
  background: white;
  border-radius: 50px 0 0 50px;
  padding: 12px 14px;
  font-size: 15px;
  border-style: solid;
  border-width: 1px 0 1px 1px;
  border-color: #ddd;
  outline: none;
  text-align: center;
}
section#post .view .rt .buttons .quantity button:last-child {
  border-radius: 0 50px 50px 0;
  border-width: 1px 1px 1px 0;
}
section#post .view .rt .buttons .quantity input {
  outline: none;
  padding: 12px 5px;
  border-color: #ddd;
  border-width: 1px 0;
  border-style: solid;
  font-size: 15px;
  background: #fff;
  text-align: center;
  width: 45px;
}
section#post .view .rt .buttons .btn {
  border-radius: 50px;
}
section#post .view .rt .buttons a i {
  width: 24px;
  height: 24px;
}
section#post .view .rt .buttons a.btn-favorite.active i {
  background-image: url("/assets/icons/favorite-active.png");
}
section#post .related,
section#post .others {
  padding: 20px;
}
section#post .related .items .item .variants,
section#post .related .items .item .data .price p,
section#post .others .items .item .variants,
section#post .others .items .item .data .price p {
  display: none;
}

@media (max-width: 768px) {
  section#post .view .lt .pics {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=ItemComponent.css.map */