/* AGAFORT Universal Product Card density / spacing / automatic media sizing V1-R1
   Canonical owner: .ag-pc-density
   Formula: cardWidth = ((sectionWidth - 16px) / columns) - 8px
   Do not add grid/flex gap on top of 4px card margins. */

.ag-pc-density {
  --ag-pc-pad-inline: 8px;
  --ag-pc-pad-block: 4px;
  --ag-pc-card-margin: 4px;
  --ag-pc-max-card: 221.5px;
  --ag-pc-min-card: 116px;
  --ag-pc-slot-target: 229.5px;
  --ag-pc-columns: var(--ag-pc-columns-mobile, 2);
  --ag-pc-rows: var(--ag-pc-rows-mobile, 3);
  box-sizing: border-box;
  justify-content: start;
}

@media (min-width: 768px) {
  .ag-pc-density {
    --ag-pc-columns: var(--ag-pc-columns-tablet, 4);
    --ag-pc-rows: var(--ag-pc-rows-tablet, 2);
  }
}

@media (min-width: 1024px) {
  .ag-pc-density {
    --ag-pc-columns: var(--ag-pc-columns-desktop, 6);
    --ag-pc-rows: var(--ag-pc-rows-desktop, 2);
  }
}

.ag-pc-density[data-ag-pc-mode="auto"] {
  container-type: inline-size;
  container-name: ag-pc;
  --ag-pc-columns: clamp(1, round(100cqw / 229.5), 8);
}

/* —— Grid —— */
.ag-pc-density[data-ag-pc-presentation="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--ag-pc-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ag-pc-rows), auto);
  grid-auto-rows: 0;
  overflow: hidden;
  gap: 0;
  justify-content: start;
  justify-items: stretch;
  padding-inline: var(--ag-pc-pad-inline);
  padding-block: var(--ag-pc-pad-block);
  list-style: none;
  margin: 0;
}

.ag-pc-density[data-ag-pc-presentation="grid"] > * {
  margin: var(--ag-pc-card-margin);
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.ag-pc-density[data-ag-pc-presentation="grid"][data-ag-pc-short="1"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 0;
}

.ag-pc-density[data-ag-pc-presentation="grid"][data-ag-pc-short="1"] > * {
  flex: 0 0 auto;
  inline-size: min(calc(100% / var(--ag-pc-columns) - 8px), var(--ag-pc-max-card));
  max-inline-size: var(--ag-pc-max-card);
}

/* —— Rail host (viewport is the container) —— */
.ag-pc-density[data-ag-pc-presentation="rail"]:not(.ag-fs-track):not(.ag-rp-track):not(.ag-dh-product-rail) {
  container-type: inline-size;
  container-name: ag-pc;
  padding-inline: var(--ag-pc-pad-inline);
  padding-block: var(--ag-pc-pad-block);
  overflow: hidden;
  position: relative;
}

.ag-pc-density[data-ag-pc-presentation="rail"] .ag-pc-density__track,
.ag-pc-density[data-ag-pc-presentation="rail"][data-ag-cl-deals-track] {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: start;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  box-sizing: border-box;
}

.ag-pc-density[data-ag-pc-presentation="rail"] .ag-pc-density__track > *,
.ag-pc-density[data-ag-pc-presentation="rail"][data-ag-cl-deals-track] > * {
  flex: 0 0 auto;
  inline-size: calc((100cqw / var(--ag-pc-columns)) - 8px);
  width: calc((100cqw / var(--ag-pc-columns)) - 8px);
  max-inline-size: none;
  margin: var(--ag-pc-card-margin);
  min-inline-size: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.ag-pc-density[data-ag-pc-presentation="rail"][data-ag-pc-short="1"] .ag-pc-density__track > *,
.ag-pc-density[data-ag-pc-presentation="rail"][data-ag-pc-short="1"][data-ag-cl-deals-track] > * {
  inline-size: min(calc((100cqw / var(--ag-pc-columns)) - 8px), var(--ag-pc-max-card));
  width: min(calc((100cqw / var(--ag-pc-columns)) - 8px), var(--ag-pc-max-card));
  max-inline-size: var(--ag-pc-max-card);
}

/* Homepage / shared rails: density class lives on the overflowing track.
   Container is the parent carousel/viewport. */
.ag-fs-carousel:has(> .ag-pc-density),
.ag-rp-carousel:has(> .ag-pc-density),
.ag-os-rail:has(.ag-pc-density),
.ag-hp2-product-rail:has(.ag-pc-density),
.ag-dh-product-module:has(> .ag-pc-density),
.ag-products-slider-widget:has(.ag-pc-density) {
  container-type: inline-size;
  container-name: ag-pc;
}

.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density) {
  padding-inline: var(--ag-pc-pad-inline, 8px);
  padding-block: var(--ag-pc-pad-block, 4px);
  overflow: hidden;
}

.ag-rp-carousel:has(> .ag-pc-density) {
  padding-inline: var(--ag-pc-pad-inline, 8px);
  padding-block-start: var(--ag-pc-pad-block, 4px);
}

.ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density,
.ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density,
.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail,
.ag-hp2-rail-scroll.ag-pc-density,
.ag-sf-product-rail.ag-pc-density,
.ag-pdp-rail.ag-pc-density,
.ag-home-product-rail.ag-pc-density,
.ag-cl-rail__track.ag-pc-density,
.ag-os-rail__track.ag-pc-density,
.ag-dh-seasonal-products.ag-pc-density,
.ag-product-strip.ag-pc-density {
  display: flex !important;
  flex-wrap: nowrap;
  grid-auto-columns: unset !important;
  grid-auto-flow: unset;
  gap: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: start !important;
  max-width: 100%;
  box-sizing: border-box;
}

.ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density > *,
.ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density > *,
.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail > *,
.ag-hp2-rail-scroll.ag-pc-density > *,
.ag-sf-product-rail.ag-pc-density > *,
.ag-pdp-rail.ag-pc-density > *,
.ag-home-product-rail.ag-pc-density > *,
.ag-cl-rail__track.ag-pc-density > *,
.ag-os-rail__track.ag-pc-density > *,
.ag-dh-seasonal-products.ag-pc-density > *,
.ag-product-strip.ag-pc-density > * {
  flex: 0 0 auto;
  inline-size: calc((100cqw / var(--ag-pc-columns, 6)) - 8px);
  width: calc((100cqw / var(--ag-pc-columns, 6)) - 8px);
  max-width: none;
  min-width: 0 !important;
  margin: var(--ag-pc-card-margin, 4px);
  box-sizing: border-box;
}

.ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density[data-ag-pc-short="1"] > *,
.ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density[data-ag-pc-short="1"] > *,
.ag-dh-product-module > .ag-pc-density[data-ag-pc-short="1"] > *,
.ag-hp2-rail-scroll.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-sf-product-rail.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-pdp-rail.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-home-product-rail.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-cl-rail__track.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-os-rail__track.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-dh-seasonal-products.ag-pc-density[data-ag-pc-short="1"] > *,
.ag-product-strip.ag-pc-density[data-ag-pc-short="1"] > * {
  inline-size: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px));
  width: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px));
  max-inline-size: var(--ag-pc-max-card, 221.5px);
}

.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail-grid,
.ag-pc-density.ag-dh-product-rail-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--ag-pc-columns), minmax(0, 1fr));
  grid-auto-flow: unset;
  grid-auto-columns: unset !important;
  gap: 0 !important;
  flex-wrap: unset;
  overflow: visible;
  padding-inline: var(--ag-pc-pad-inline);
  padding-block: var(--ag-pc-pad-block);
}

.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail-grid > *,
.ag-pc-density.ag-dh-product-rail-grid > * {
  flex: unset;
  inline-size: auto;
  width: auto;
  max-width: 100%;
  margin: var(--ag-pc-card-margin);
}

.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail-grid[data-ag-pc-short="1"],
.ag-pc-density.ag-dh-product-rail-grid[data-ag-pc-short="1"] {
  display: flex !important;
  flex-wrap: wrap;
}

.ag-dh-product-module > .ag-pc-density.ag-dh-product-rail-grid[data-ag-pc-short="1"] > *,
.ag-pc-density.ag-dh-product-rail-grid[data-ag-pc-short="1"] > * {
  flex: 0 0 auto;
  inline-size: min(calc(100% / var(--ag-pc-columns) - 8px), var(--ag-pc-max-card));
}

/* —— Canonical media: follow card width, 1/1 contain —— */
.ag-pc-density .ag-dh-product-card,
.ag-pc-density .ag-dh-product-card--fixed {
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.ag-pc-density .ag-dh-product-media-wrap,
.ag-pc-density .ag-dh-product-media,
.ag-pc-density .ag-dh-product-media picture {
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  block-size: auto;
  height: auto !important;
  max-block-size: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
}

.ag-pc-density .ag-dh-product-media img,
.ag-pc-density .ag-dh-product-media .ag-img {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
}

/* Neutralize legacy fixed rail/grid widths when density is adopted */
.ag-cl-product-grid.ag-pc-density,
.ag-os-grid.ag-pc-density,
.ag-os-grid--dense.ag-pc-density,
.ag-catalog-grid.ag-pc-density,
.ag-cl-products.ag-pc-density {
  gap: 0;
}

.ag-cl-deals-grid.ag-pc-density__track > [role="listitem"],
.ag-cl-deals__viewport.ag-pc-density .ag-cl-deals-grid > [role="listitem"] {
  width: auto;
}

.ag-pc-density[data-ag-pc-hidden-item="1"] {
  display: none !important;
}

/* Overlay nav must not reserve row space or change card width */
.ag-fs-carousel:has(> .ag-pc-density) .ag-fs-nav,
.ag-rp-carousel:has(> .ag-pc-density) .ag-rp-nav,
.ag-pc-density ~ .ag-cl-carousel__nav,
.ag-cl-deals__viewport.ag-pc-density .ag-cl-carousel__nav {
  position: absolute;
}

/*
 * Beat frozen homepage-rail !important track sizing (grid-auto-columns / 24px gap)
 * without editing those token strings. Density remains the width owner.
 */
.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density),
.ag-rp-section .ag-rp-carousel:has(> .ag-pc-density),
[data-ag-recommended-products] .ag-rp-carousel:has(> .ag-pc-density) {
  padding-inline: var(--ag-pc-pad-inline, 8px) !important;
  padding-block: var(--ag-pc-pad-block, 4px) !important;
  overflow: hidden;
  container-type: inline-size;
  container-name: ag-pc;
}

.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-fs-track,
.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-fs-track.ag-dh-product-rail-carousel,
.ag-rp-section .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-rp-track,
.ag-rp-section .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-rp-track.ag-dh-product-rail-carousel,
[data-ag-recommended-products] .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-rp-track,
[data-ag-recommended-products] .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density.ag-rp-track.ag-dh-product-rail-carousel {
  display: flex !important;
  flex-wrap: nowrap;
  grid-auto-flow: unset !important;
  grid-auto-columns: unset !important;
  gap: 0 !important;
  padding-inline: 0 !important;
  justify-content: start !important;
}

.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density > *,
.ag-rp-section .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density > *,
[data-ag-recommended-products] .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density > * {
  flex: 0 0 auto;
  margin: var(--ag-pc-card-margin, 4px);
  inline-size: calc((100cqw / var(--ag-pc-columns, 6)) - 8px) !important;
  width: calc((100cqw / var(--ag-pc-columns, 6)) - 8px) !important;
  max-width: none !important;
  min-width: 0 !important;
}

.ag-fs-section[data-ag-flash-compact] .ag-fs-carousel:has(> .ag-pc-density) > .ag-pc-density[data-ag-pc-short="1"] > *,
.ag-rp-section .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density[data-ag-pc-short="1"] > *,
[data-ag-recommended-products] .ag-rp-carousel:has(> .ag-pc-density) > .ag-pc-density[data-ag-pc-short="1"] > * {
  inline-size: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px)) !important;
  width: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px)) !important;
  max-inline-size: var(--ag-pc-max-card, 221.5px);
}

.ag-product-strip.ag-pc-density,
.ag-widget-product-grid.ag-pc-density,
.recommendation-grid.ag-pc-density,
.pd-product-grid.ag-pc-density {
  gap: 0 !important;
  grid-auto-columns: unset !important;
}

.ag-product-strip.ag-pc-density {
  container-type: inline-size;
  container-name: ag-pc;
  padding-inline: var(--ag-pc-pad-inline, 8px) !important;
  padding-block: var(--ag-pc-pad-block, 4px) !important;
}

/* PDP rails: host + track. Do not treat the density root as the overflowing track
   or product cards inherit width:100% of the section and become full-page tiles. */
.ag-pc-density.ag-pdp-rail {
  display: block !important;
  overflow: hidden !important;
  container-type: inline-size;
  container-name: ag-pc;
  max-width: 100%;
  padding-inline: var(--ag-pc-pad-inline, 8px);
  padding-block: var(--ag-pc-pad-block, 4px);
}

.ag-pc-density.ag-pdp-rail > .ag-pc-density__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: start;
  max-width: 100%;
  width: 100%;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  flex: none;
  box-sizing: border-box;
}

.ag-pc-density.ag-pdp-rail > .ag-pc-density__track > .ag-dh-product-card,
.ag-pc-density.ag-pdp-rail > .ag-pc-density__track > * {
  flex: 0 0 auto;
  inline-size: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px));
  width: min(calc((100cqw / var(--ag-pc-columns, 6)) - 8px), var(--ag-pc-max-card, 221.5px));
  max-inline-size: var(--ag-pc-max-card, 221.5px);
  max-width: var(--ag-pc-max-card, 221.5px);
}