/*
 * Focused visual treatment for the recommended-product rail.
 * This file intentionally loads after home-slider.min.css so legacy rail
 * overrides cannot make the cards tall or turn the CTA into a large block.
 */
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card.home-product-rail-card {
  display: grid !important;
  flex: 0 0 clamp(15.75rem, 18vw, 18rem) !important;
  grid-template-rows: 10.25rem minmax(0, 1fr) !important;
  height: 27rem !important;
  min-width: 0 !important;
  min-height: 27rem !important;
  max-height: 27rem !important;
  max-width: 18rem !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--home-border, var(--line-color)) 88%, transparent) !important;
  border-radius: 0.82rem !important;
  background: var(--home-surface, var(--panel-bg)) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card.home-product-rail-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--home-brand, var(--brand-500)) 48%, var(--home-border, var(--line-color))) !important;
  background: color-mix(in srgb, var(--home-brand, var(--brand-500)) 3%, var(--home-surface, var(--panel-bg))) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-media {
  position: relative !important;
  min-height: 10.25rem !important;
  overflow: hidden !important;
  border-block-end: 1px solid color-mix(in srgb, var(--home-border, var(--line-color)) 80%, transparent) !important;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 97%, var(--home-brand, var(--brand-500)) 3%) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-media::before,
html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-media::after {
  content: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  padding: 0.34rem 0.52rem !important;
  filter: none !important;
  transform: none !important;
}

.home-product-rail-image-fallback {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--home-brand, var(--brand-500)) 28%, var(--home-border, var(--line-color)));
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-brand, var(--brand-500)) 7%, var(--home-surface, var(--panel-bg)));
  color: var(--home-brand, var(--brand-500));
  font-size: 1.15rem;
  font-weight: 950;
}

.home-product-rail-image-fallback[hidden] {
  display: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.48rem !important;
  min-height: 0 !important;
  padding: 0.82rem 0.78rem 0.78rem !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-meta {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
}

.home-product-rail-category,
.home-product-rail-assurance {
  display: inline-flex;
  min-width: 0;
  min-height: 1.5rem;
  align-items: center;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-product-rail-category {
  max-width: 58%;
  padding: 0.17rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--home-brand, var(--brand-500)) 22%, var(--home-border, var(--line-color)));
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--home-brand, var(--brand-500)) 6%, var(--home-surface, var(--panel-bg)));
  color: color-mix(in srgb, var(--home-brand, var(--brand-500)) 76%, var(--home-text, var(--text-primary)));
}

.home-product-rail-assurance {
  max-width: 42%;
  color: var(--home-muted, var(--text-muted));
}

.home-product-rail-assurance::before {
  content: "";
  flex: 0 0 0.38rem;
  width: 0.38rem;
  height: 0.38rem;
  margin-inline-end: 0.3rem;
  border-radius: 50%;
  background: var(--home-success, var(--success));
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-title {
  display: block !important;
  min-width: 0 !important;
  padding-block: 0.08rem 0.12rem !important;
  color: var(--home-text, var(--text-primary)) !important;
  text-decoration: none !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-title h3 {
  display: -webkit-box !important;
  min-height: 2.72rem !important;
  max-height: 2.72rem !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 0.83rem !important;
  font-weight: 900 !important;
  line-height: 1.64 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.home-product-rail-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.2rem;
  color: var(--home-muted, var(--text-muted));
  font-size: 0.68rem;
  font-weight: 720;
}

.home-product-rail-identity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-product-rail-identity span + span {
  padding-inline-start: 0.35rem;
  border-inline-start: 1px solid var(--home-border, var(--line-color));
}

.home-product-rail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
  min-width: 0;
  margin: 0;
}

.home-product-rail-facts > div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.34rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--home-border, var(--line-color)) 82%, transparent);
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--home-surface-strong, var(--panel-bg-strong)) 96%, var(--home-brand, var(--brand-500)) 4%);
}

.home-product-rail-facts > div:only-child {
  grid-column: 1 / -1;
}

.home-product-rail-facts dt,
.home-product-rail-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-product-rail-facts dt {
  color: var(--home-muted, var(--text-muted));
  font-size: 0.6rem;
  font-weight: 720;
  line-height: 1.35;
}

.home-product-rail-facts dd {
  color: var(--home-text, var(--text-primary));
  font-size: 0.67rem;
  font-weight: 820;
  line-height: 1.4;
}

.home-product-rail-commerce {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 0.42rem;
  margin-top: 0.05rem;
  padding-top: 0.48rem;
  border-block-start: 1px solid color-mix(in srgb, var(--home-border, var(--line-color)) 78%, transparent);
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-price,
.home-product-rail-supply {
  display: grid !important;
  align-content: start;
  gap: 0.1rem !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.home-product-rail-supply {
  padding-inline-start: 0.42rem !important;
  border-inline-start: 1px solid color-mix(in srgb, var(--home-border, var(--line-color)) 78%, transparent) !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-price .storefront-price-label,
.home-product-rail-supply > span {
  color: var(--home-muted, var(--text-muted)) !important;
  font-size: 0.62rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-price > strong,
.home-product-rail-supply > strong {
  display: -webkit-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--home-text, var(--text-primary)) !important;
  font-size: 0.7rem !important;
  font-weight: 880 !important;
  line-height: 1.48 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-card-action.home-product-rail-action {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  margin-top: auto !important;
  padding: 0.48rem 0.75rem !important;
  border: 1px solid color-mix(in srgb, var(--home-brand, var(--brand-500)) 42%, var(--home-border, var(--line-color))) !important;
  border-radius: 0.58rem !important;
  background: color-mix(in srgb, var(--home-brand, var(--brand-500)) 9%, var(--home-surface, var(--panel-bg))) !important;
  color: color-mix(in srgb, var(--home-brand, var(--brand-500)) 84%, var(--home-text, var(--text-primary))) !important;
  box-shadow: none !important;
  font-size: 0.73rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  transform: none !important;
}

.home-product-rail-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-product-rail-action svg {
  flex: 0 0 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

html[dir="ltr"] .home-product-rail-action svg {
  transform: scaleX(-1);
}

html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-body .storefront-card-action.home-product-rail-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--home-brand, var(--brand-500)) 66%, var(--home-border, var(--line-color))) !important;
  background: color-mix(in srgb, var(--home-brand, var(--brand-500)) 14%, var(--home-surface, var(--panel-bg))) !important;
  color: var(--home-brand, var(--brand-500)) !important;
  box-shadow: none !important;
  outline: 2px solid color-mix(in srgb, var(--home-brand, var(--brand-500)) 20%, transparent) !important;
  outline-offset: 2px !important;
  transform: none !important;
}

@media (max-width: 48rem) {
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-card.home-product-rail-card,
  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-recommend-rail:not(:has(.storefront-recommend-card:nth-child(3))) .storefront-recommend-card.home-product-rail-card {
    flex: 0 0 min(82vw, 18rem) !important;
    grid-template-rows: 9.5rem minmax(0, 1fr) !important;
    height: 26.5rem !important;
    min-height: 26.5rem !important;
    max-height: 26.5rem !important;
    max-width: 18rem !important;
    border-radius: 0.82rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-media {
    min-height: 9.5rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-rail-section .home-product-rail-card .storefront-recommend-media img {
    padding: 0.3rem 0.46rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .home-product-rail-card .storefront-recommend-body {
    gap: 0.5rem !important;
    padding: 0.72rem !important;
  }

  html[data-theme][data-theme] body .home-storefront[data-home-storefront] .storefront-product-rail-section .storefront-recommend-body .storefront-card-action.home-product-rail-action {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-product-rail-card,
  .home-product-rail-action {
    transition: none !important;
  }
}