/* Cards CSS */

.cards-scroller {
	width: 100%;
	box-sizing: border-box;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    gap: 16px;
	scrollbar-width: none;
	overflow-x: scroll;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
    padding: 30px 14px;
    margin: -30px 0;
}
.cards-scroller .product-card {
	scroll-snap-align: start;
  	scroll-margin-inline-start: 14px;
}
.cards-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.cards-grid-2 > .product-card {
	justify-self: center;
}
.orientationlandscape {
  	width: 350px;
    box-shadow: var(--shadow-md);
    border-radius: 12px;
    color: var(--Colors-Semantics-Text-On_Brand);
}
.orientationlandscape .content-wrapper {
	padding: 10px 12px;
}

@media (max-width: 378px) {
    .orientationlandscape {
        max-width: calc(100vw - 28px);
    }    
}
.orientationlandscape[data-size="lg"] {
    height: 260px;
    align-items: flex-end;
    justify-content: center;
}
.orientationlandscape[data-size="sm"] {
    height: 130px;
  	align-items: flex-start;
}
.orientationportrait[data-size="sm"] {
    width: 168px;
  	height: 180px;
  	border-radius: 12px;
    outline: 2px solid var(--Colors-Semantics-Action-Secondary_Accent);
    outline-offset: -2px;
    box-shadow: var(--shadow-md);
  	color: var(--Colors-Semantics-Text-On_Brand);
}
.orientationportrait[data-size="sm"] .content-wrapper {
  	padding: 10px 12px;
}
.product-card {
	scroll-snap-align: start;
	cursor: pointer;
    position: relative;
	overflow: hidden;
  	box-sizing: border-box;
  	display: flex;
  	flex-shrink: 0;
  	align-items: flex-start;
  	text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:focus, .product-card:hover {
    box-shadow: 0px 21px 24px -10px rgb(0 0 0 / 66%);
    transform: scale(1.02);
    z-index: 10;
}
.product-card .content-wrapper {
  	align-self: stretch;
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-end;
  	gap: 8px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%);
}
.product-card .content {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
}
.product-card .header {
    width: 100%;
  	align-self: stretch;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: 20px;
}
.product-card .footer {
    width: 100%;
    background-color: rgba(16, 16, 21, 0.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    gap: 20px;
    flex-shrink: 0;
}
.product-card .badge {
    position: absolute;
    top: 12px;
    right: 12px;
}
.product-card .info {
  	display: flex;
    align-items: center;
}
.product-card .info[aria-orientation="horizontal"] {
  	justify-content: start;
    gap: 10px;
}
.product-card .info[aria-orientation="vertical"] {
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: center;
}
.product-card .title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}
.product-card .title {
    display: -webkit-box;
    align-items: center;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    height: 21px;
}
.product-card .offer {
  	display: flex;
  	align-items: center;
  	gap: 4px;
}
.product-card .price-crossed {
	text-decoration: line-through;
	line-height: 8px;
	color: var(--Colors-Semantics-Border-Default);
  	font-size: 10px;
  	font-family: var(--font-secondary);
}
.product-card .description[card-type="no-padding"] {
	padding: 0 12px;
}
.product-card .product-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.orientationportrait .product-description, .orientationlandscape[data-size="lg"] .product-description {
    -webkit-line-clamp: 2;
    height: 28px;
}
.orientationlandscape[data-size="sm"] .product-description {
    -webkit-line-clamp: 1;
    height: 22px;
}
.orientationlandscape .description {
	line-height: 22px;
}
.product-card .brand-partner-logo {
  	background-color: transparent;
  	overflow: hidden;
  	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.product-card .brand-partner-logo[data-size="sm"] {
  	width: 24px;
  	height: 24px;
  	border-radius: 4px;
}
.product-card .brand-partner-logo[data-size="md"] {
  	width: 40px;
  	height: 40px;
  	border-radius: 8px;
}
.product-card .brand-partner-logo[data-size="lg"] {
  	width: 56px;
  	height: 56px;
  	border-radius: 8px;
}
.cards-grid-categories {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
    padding: 30px 10px;
    margin: -30px 0;
}

@media (max-width: 950px) {
    .cards-grid-categories .product-card.orientationportrait {
        width: unset;
        height: unset;
        aspect-ratio: 0.933333334578;
    }
}
@media (min-width: 950px) {
	.cards-grid-categories .orientationportrait[data-size="sm"] {
		width: 282px;
		height: 360px;
	}
	.cards-grid-categories .orientationportrait[data-size="sm"] .content-wrapper {
		padding: 20px;
	}
	.cards-grid-categories .orientationportrait[data-size="sm"] .content {
		gap: 8px;
	}
	.cards-grid-categories .orientationportrait[data-size="sm"] .brand-partner-logo[data-size="sm"] {
		width: 40px;
		height: 40px;
		border-radius: 8px;
	}
    .cards-grid-categories .orientationportrait .product-description {
        height: 36px;
    }
}

@media (min-width: 600px) {
    /* Esto es un poco ñapa pero es para que no se corte la sombra del hover */
	.cards-scroller {
        padding: 80px 20px;
        margin: -80px 0;
	}
    .cards-scroller .product-card {
      	scroll-margin-inline-start: 20px;
    }
    .cards-grid-categories {
    	grid-template-columns: repeat(3, 1fr);
        padding: 0 20px;
        padding: 30px 20px;
        margin: -30px 0;
    }
}

@media (min-width: 1100px) {
	.cards-scroller {
		gap: 12px;
	}
	.orientationportrait[data-size="sm"] {
		width: 282px;
		height: 360px;
	}
	.orientationportrait[data-size="sm"] .content-wrapper {
		padding: 20px;
	}
	.orientationportrait[data-size="sm"] .content {
		gap: 8px;
	}
	.orientationportrait[data-size="sm"] .brand-partner-logo[data-size="sm"] {
		width: 40px;
		height: 40px;
		border-radius: 8px;
	}
    .orientationportrait .title {
        height: 24px;
    }
    .orientationportrait .product-description {
        height: 36px;
    }
}
@media (min-width: 1200px) {	
	.cards-scroller {
		max-width: 1200px;
		gap: 24px;
		overflow-x: visible;
		scroll-snap-type: none;
        display: grid;
    	grid-template-columns: repeat(4, 1fr);
        padding: 0;
        margin: 0;
	}
    .cards-grid-categories {
    	grid-template-columns: repeat(4, auto);
    }
	.cards-scroller .product-card {
		scroll-snap-align: none;
		scroll-margin-inline-start: unset;
	}
	.cards-scroller::before {
		display: none;
	}
	.cards-scroller::after {
		display: none;
	}
}