/* Cards CSS */

/* Layout containers */
.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;
}

.cards-grid-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Card base styles */
.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;
}

.orientationlandscape {
  width: 350px;
  border-radius: 12px;
  color: var(--semantic-text-on-action);
}

.orientationlandscape[data-size="lg"] {
  height: 260px;
  align-items: flex-end;
  justify-content: center;
}

.orientationlandscape[data-size="sm"] {
  height: 130px;
  align-items: flex-start;
}

.orientationlandscape[data-size="lg"][layout="button"] {
  border-radius: var(--primitives-radius-xs);
  outline: var(--primitives-border-width-thick) solid var(--semantic-border-section);
  outline-offset: -2px;
}

.orientationportrait {
  width: 168px;
  height: 180px;
  border-radius: var(--primitives-radius-sm);
  outline: var(--primitives-border-width-thick) solid var(--semantic-border-section);
  outline-offset: -2px;
  color: var(--semantic-text-on-action);
}

/* Product-specific modifiers */
.product-card[product="masmovil"] {
  background: var(--semantic-surface-neutral, #fff);
  color: var(--semantic-text-on-brand, #121212);
}

.orientationlandscape[data-size="sm"][product="masmovil"] {
  outline: var(--primitives-border-width-thick, 2px) dashed var(--semantic-border-high-contrast, #121212);
  outline-offset: -2px;
  border-radius: 0;
}

/* loading for search */
.product-card.orientationportrait[data-status="loading"],
.product-card.orientationportrait[data-status="loaded"] {
    transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card.orientationportrait[data-status="loading"] .content-wrapper > .background-image,
.product-card.orientationportrait[data-status="loaded"] .content-wrapper > .background-image,
.product-card.orientationportrait[data-status="loading"] .brand-partner-logo,
.product-card.orientationportrait[data-status="loaded"] .brand-partner-logo,
.product-card.orientationportrait[data-status="loading"] .brand-partner-logo img,
.product-card.orientationportrait[data-status="loaded"] .brand-partner-logo img,
.product-card.orientationportrait[data-status="loading"] .title,
.product-card.orientationportrait[data-status="loaded"] .title,
.product-card.orientationportrait[data-status="loading"] .product-description,
.product-card.orientationportrait[data-status="loaded"] .product-description {
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.product-card.orientationportrait[data-status="loading"] {
    background-color: var(--neutral-grey-50);
	pointer-events: none;
}
.product-card.orientationportrait[data-status="loading"] .content-wrapper {
    background: none;
}
.product-card.orientationportrait[data-status="loading"] .content-wrapper > .background-image,
.product-card.orientationportrait[data-status="loading"] .brand-partner-logo img {
    opacity: 0;
}
.product-card.orientationportrait[data-status="loading"] .badge {
    display: none;
}
.product-card.orientationportrait[data-status="loading"] .brand-partner-logo {
    background-color: var(--Colors-Semantics-Background-Surface_Depth);
}
.product-card.orientationportrait[data-status="loading"] .title,
.product-card.orientationportrait[data-status="loading"] .product-description {
    color: transparent;
    border-radius: 4px;
}
.product-card.orientationportrait[data-status="loading"] .title {
    width: 72%;
    background-color: var(--neutral-grey-100);
}
.product-card.orientationportrait[data-status="loading"] .product-description {
    width: 88%;
    background-color: var(--Colors-Primitives-Monochrome-Grey_300);
}
@media (prefers-reduced-motion: reduce) {
    .product-card.orientationportrait[data-status="loading"],
    .product-card.orientationportrait[data-status="loaded"],
    .product-card.orientationportrait[data-status="loading"] .content-wrapper > .background-image,
    .product-card.orientationportrait[data-status="loaded"] .content-wrapper > .background-image,
    .product-card.orientationportrait[data-status="loading"] .brand-partner-logo,
    .product-card.orientationportrait[data-status="loaded"] .brand-partner-logo,
    .product-card.orientationportrait[data-status="loading"] .brand-partner-logo img,
    .product-card.orientationportrait[data-status="loaded"] .brand-partner-logo img,
    .product-card.orientationportrait[data-status="loading"] .title,
    .product-card.orientationportrait[data-status="loaded"] .title,
    .product-card.orientationportrait[data-status="loading"] .product-description,
    .product-card.orientationportrait[data-status="loaded"] .product-description {
        transition: none;
    }
}

.product-card[product="masmovil"] .product-image {
  display: none;
}

.product-card[product="masmovil"] .content-wrapper {
  background: unset;
}

.product-card[product="masmovil"] .price-crossed {
  color: var(--semantic-surface-disabled);
}

/* Content structure */
.orientationportrait .content-wrapper {
  padding: 12px;
}
.orientationportrait[product="masmovil"] .content-wrapper {
  padding: 24px 12px 12px 12px;
}

.orientationlandscape .content-wrapper {
  padding: 10px 12px;
}

.orientationlandscape[data-size="sm"] .content-wrapper {
  gap: 6px;
}

.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%, var(--primitives-color-black) 100%);
}

.product-card .content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-card .badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

.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[layout="button"] .footer {
  background: var(--semantic-surface-neutral, #FFF);
}

.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: 28px;
}

.orientationportrait .title.mobile-only {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 28px;
}

.product-card[layout="button"] .title {
  color: var(--semantic-text-on-brand, #121212);
}

.product-card .offer {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-card .price-crossed {
  text-decoration: line-through;
  line-height: 8px;
  color: var(--semantic-border-med-contrast);
  font-size: 10px;
  font-family: var(--font-secondary);
}

.product-card .description[card-type="no-padding"] {
  padding: 0 12px;
}

/* Text and logo styling */
.orientationportrait .product-description,
.orientationlandscape[data-size="lg"] .product-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 40px;
}

.orientationlandscape[data-size="sm"] .product-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 20px;
}

.orientationlandscape .description {
  line-height: 22px;
}

.orientationlandscape[data-size="sm"][product="masmovil"] .description {
  color: var(--semantic-text-body);
}

.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;
}


@media (max-width: 378px) {
  .orientationlandscape {
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 950px) {
  .cards-grid-categories .product-card.orientationportrait {
    width: unset;
    height: unset;
    aspect-ratio: 0.933333334578;
  }
}

@media (min-width: 600px) {
  .cards-scroller {
    padding: 30px 20px;
    margin: -30px 0;
  }

  .cards-scroller .product-card {
    scroll-margin-inline-start: 20px;
  }

  .cards-grid-categories {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 20px;
  }
}

@media (min-width: 950px) {
  .cards-grid-categories .orientationportrait {
    width: 282px;
    height: 400px;
  }

  .cards-grid-categories .orientationportrait .content-wrapper {
    padding: 20px;
  }

  .cards-grid-categories .orientationportrait .content {
    gap: 8px;
  }

  .cards-grid-categories .orientationportrait .brand-partner-logo[data-size="sm"] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .cards-grid-categories .orientationportrait .product-description {
    height: 48px;
  }
}

@media (min-width: 1100px) {
  .cards-scroller {
    gap: 12px;
  }

  .orientationportrait {
    width: 282px;
    height: 400px;
  }

  .orientationportrait .content-wrapper, 
  .orientationportrait[product="masmovil"] .content-wrapper {
    padding: 20px;
  }

  .orientationportrait[product="masmovil"] .product-image {
    display: block;
    position: static;
    width: 100%;
    height: 200px;
    z-index: 0;
    object-fit: cover;
  }

  .orientationportrait .content {
    gap: 8px;
  }

  .orientationportrait[product="masmovil"] .content {
    gap: 0;
  }
  
    .orientationportrait .title {
        height: 24px;
    }

  .orientationportrait .brand-partner-logo[data-size="sm"] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .orientationportrait[product="generic"] .product-description {
    height: 48px;
  }
}

@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;
  }
}