.paint-template-grid-collection {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* Vista de lista panorámica del inventario de pinturas. */
@media (min-width: 851px) {
  .paint-catalog-layout.list-mode {
    grid-template-columns: 205px minmax(760px, 1fr);
  }

  .paint-catalog-layout.list-mode .paint-results {
    grid-column: 2;
  }
}

.paint-template-list-collection {
  gap: 3px;
  padding: 5px;
  border: 1px solid #263239;
  background: #091014;
  box-shadow: inset 0 0 0 1px #ffffff05;
}

.paint-list-header,
.paint-list-row {
  display: grid;
  grid-template-columns: 82px minmax(220px, 2fr) minmax(145px, 1.05fr) minmax(145px, 1fr) minmax(110px, .75fr) minmax(150px, .95fr) 54px;
  align-items: center;
}

.paint-list-header {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #263239;
  border-bottom: 0;
  background: #0b1216;
  color: #899397;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.paint-list-row {
  position: relative;
  min-height: 82px;
  padding: 6px 12px;
  border: 1px solid #263238;
  background: linear-gradient(90deg, #111a1e, #091014 78%);
  color: #e9e6df;
  cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s;
}

.paint-list-row:hover,
.paint-list-row.selected {
  z-index: 1;
  border-color: #b8873f;
  background: linear-gradient(90deg, #172126, #0b1216 78%);
  box-shadow: inset 0 0 0 1px #b8873f55, 0 0 16px #0008;
}

.paint-list-row > *:not(:first-child) {
  min-width: 0;
}

.paint-list-color {
  display: grid;
  place-items: center;
}

.paint-list-color span {
  display: block;
  width: 58px;
  height: 58px;
  border: 3px solid #0c1114;
  border-radius: 50%;
  background: var(--paint);
  box-shadow: 0 0 0 2px #c59748;
}

.paint-list-name,
.paint-list-brand,
.paint-list-type,
.paint-list-reference,
.paint-list-status {
  border-left: 1px solid #28333a;
}

.paint-list-name {
  padding: 0 18px;
}

.paint-list-name h3 {
  overflow: hidden;
  margin: 0;
  color: #f0ede6;
  font: 700 18px/1.05 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paint-list-name p {
  overflow: hidden;
  margin: 6px 0 0;
  color: #9aa4a7;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paint-list-brand {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 18px;
}

.paint-list-brand img {
  display: block;
  width: 118px;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.paint-list-row.brand-vallejo .paint-list-brand img {
  width: 96px;
  filter: grayscale(1) invert(1) brightness(1.9);
}

.paint-list-row.brand-citadel .paint-list-brand img {
  width: 122px;
}

.paint-list-row.brand-ak .paint-list-brand img {
  width: 82px;
}

.paint-list-type {
  display: grid;
  gap: 4px;
  padding: 0 18px;
  font-size: 13px;
}

.paint-list-type strong {
  color: #d8ddde;
  font-weight: 600;
}

.paint-list-type span {
  color: #9da7aa;
}

.paint-list-reference {
  padding: 0 18px;
  color: #d9dde0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.paint-list-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-width: 124px;
  margin-left: 16px;
  padding: 9px 14px;
  border: 1px solid #46545b;
  border-radius: 999px;
  background: #111a1f;
  color: #aab3b6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.paint-list-status.owned {
  border-color: #3a9855;
  background: #123622;
  color: #71e18b;
  box-shadow: inset 0 0 0 2px #1b5d363d;
}

.paint-list-status svg,
.paint-list-add svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.paint-list-add {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #46545b;
  border-radius: 4px;
  background: #10181c;
  color: #c4ccce;
  cursor: pointer;
}

.paint-list-add:hover,
.paint-list-add.owned {
  border-color: #b78840;
  color: #e0b45e;
}

@media (max-width: 1500px) {
  .paint-list-header,
  .paint-list-row {
    grid-template-columns: 66px minmax(150px, 2fr) minmax(90px, .9fr) 100px 80px 108px 42px;
  }

  .paint-list-name,
  .paint-list-brand,
  .paint-list-type,
  .paint-list-reference {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 850px) {
  .paint-list-header {
    display: none;
  }

  .paint-list-row {
    grid-template-columns: 72px minmax(145px, 1fr) 100px 42px;
    min-height: 78px;
  }

  .paint-list-brand,
  .paint-list-type,
  .paint-list-reference {
    display: none;
  }

  .paint-list-status {
    min-width: 0;
    margin-left: 8px;
    padding: 8px 10px;
  }

  .paint-list-status span {
    display: none;
  }
}

.paint-detail-panel {
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #8e6939 #0a1013;
}

@media (min-width: 1451px) {
  .paint-catalog-layout {
    grid-template-columns: 205px minmax(500px, 1fr) clamp(420px, 23vw, 560px);
  }
}

.paint-detail-frame.paint-detail-scene {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 1784 / 1330;
  margin: -5px -5px 18px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #080d10;
}

.paint-detail-frame.paint-detail-scene::before,
.paint-detail-frame.paint-detail-scene::after {
  display: none;
}

.paint-detail-scene-base,
.paint-detail-scene-overlay,
.paint-detail-scene-color {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.paint-detail-scene-base,
.paint-detail-scene-overlay {
  object-fit: fill;
  pointer-events: none;
}

.paint-detail-scene-base { z-index: 0; }

.paint-detail-scene-color,
.paint-detail-frame .paint-detail-scene-color {
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: var(--paint);
  box-shadow: none;
  -webkit-mask: url("assets/paint-detail/color-mask.png") center / 100% 100% no-repeat;
  mask: url("assets/paint-detail/color-mask.png") center / 100% 100% no-repeat;
}

.paint-detail-scene-overlay { z-index: 2; }

.paint-detail-scene .paint-detail-bottle {
  z-index: 3;
  left: 2%;
  bottom: 4%;
  width: 37%;
  height: 80%;
  filter: drop-shadow(0 5px 3px #000c) drop-shadow(0 12px 10px #0009);
}

.paint-detail-scene.brand-citadel .paint-detail-bottle {
  left: -1%;
  bottom: 4%;
  width: 43%;
  height: 76%;
}

.paint-detail-scene.brand-vallejo .paint-detail-bottle {
  left: 8%;
  bottom: 3%;
  width: 35%;
  height: 82%;
}

.paint-detail-scene.brand-ak .paint-detail-bottle {
  left: 7%;
  bottom: 4%;
  width: 37%;
  height: 80%;
}

.paint-detail-scene .paint-detail-status {
  z-index: 4;
  top: 5%;
  right: 4%;
  width: 38px;
  height: 38px;
}

.paint-product-card-grid,
.paint-product-card-grid.brand-citadel,
.paint-product-card-grid.brand-vallejo,
.paint-product-card-grid.brand-ak {
  position: relative;
  display: grid;
  grid-template-columns: 43% minmax(0, 57%);
  grid-template-rows: minmax(196px, 1fr) 48px;
  width: 100%;
  min-height: 252px;
  padding: 10px 10px 0;
  overflow: hidden;
  border: 1px solid #3b474c;
  background: radial-gradient(circle at 22% 38%, color-mix(in srgb, var(--paint), transparent 91%), transparent 34%), linear-gradient(145deg, #11191c, #080d10 72%);
  clip-path: none;
}

.paint-product-card-grid::before {
  display: block;
  inset: 5px;
  border: 1px solid #a67e3e2f;
}

.paint-product-card-grid::after {
  display: block;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d2a04a55, transparent);
}

.paint-product-card-grid .paint-card-bottle {
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: 112px;
  height: 178px;
  margin: 2px 0 0;
  overflow: visible;
}

.paint-product-card-grid.brand-citadel .paint-card-bottle,
.paint-product-card-grid.brand-vallejo .paint-card-bottle,
.paint-product-card-grid.brand-ak .paint-card-bottle {
  width: 118px;
  height: 184px;
}

.paint-product-card-grid .paint-card-bottle .paint-bottle-neutral {
  opacity: 1;
  filter: contrast(1.04) brightness(1.06);
  mix-blend-mode: luminosity;
}

.paint-product-card-grid .paint-bottle-brand {
  display: none;
}

.paint-product-card-grid .paint-card-info {
  z-index: 3;
  align-self: stretch;
  min-width: 0;
  padding: 20px 5px 8px 8px;
  background: transparent;
}

.paint-product-card-grid .paint-card-title {
  position: relative;
  display: block;
  min-height: 105px;
  padding-right: 48px;
}

.paint-product-card-grid .paint-card-title h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #f0ede6;
  font: 700 17px/1.06 Georgia, serif;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.paint-product-card-grid .paint-card-reference {
  margin: 7px 0 0;
}

.paint-product-card-grid .paint-pure-swatch {
  position: absolute;
  top: -1px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 2px solid #c99b4d;
  background: var(--paint);
  box-shadow: none;
}

.paint-product-card-grid .paint-card-tags {
  gap: 6px;
  margin-top: 10px;
}

.paint-product-card-grid .paint-card-tags span {
  padding: 5px 9px;
  font-size: 10px;
}

.paint-product-card-grid .paint-card-actions {
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  width: auto;
  margin: 0 -10px;
  padding: 7px 10px;
  border-top: 1px solid #303b40;
  background: #080d10e8;
}

.paint-product-card-grid .paint-owned,
.paint-product-card-grid .paint-open {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.paint-product-card-list {
  grid-template-columns: 78px minmax(0, 1fr) 194px;
}

.paint-product-card-list .paint-card-bottle {
  width: 67px;
  height: 92px;
  overflow: visible;
  background: transparent;
}

.paint-product-card-list .paint-card-info {
  padding: 6px 14px;
}

.paint-product-card-list .paint-card-title {
  min-height: 49px;
}

.paint-product-card-list .paint-card-reference {
  margin: 4px 0 0;
}

.paint-product-card-list .paint-card-colorbar {
  display: none;
}

@media (max-width: 600px) {
  .paint-template-grid-collection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .paint-product-card-grid,
  .paint-product-card-grid.brand-citadel,
  .paint-product-card-grid.brand-vallejo,
  .paint-product-card-grid.brand-ak {
    grid-template-columns: 45% minmax(0, 55%);
    grid-template-rows: minmax(170px, 1fr) 43px;
    min-height: 220px;
    padding: 7px 7px 0;
  }

  .paint-product-card-grid .paint-card-bottle,
  .paint-product-card-grid.brand-citadel .paint-card-bottle,
  .paint-product-card-grid.brand-vallejo .paint-card-bottle,
  .paint-product-card-grid.brand-ak .paint-card-bottle {
    width: 82px;
    height: 142px;
  }

  .paint-product-card-grid .paint-card-info {
    padding: 16px 2px 5px 3px;
  }

  .paint-product-card-grid .paint-card-title {
    min-height: 75px;
    padding-right: 0;
  }

  .paint-product-card-grid .paint-card-title h3 {
    font-size: 13px;
  }

  .paint-product-card-grid .paint-pure-swatch {
    position: static;
    width: 24px;
    height: 24px;
    margin-top: 6px;
  }

  .paint-product-card-grid .paint-card-tags span:nth-child(2),
  .paint-product-card-grid .paint-open {
    display: none;
  }

  .paint-product-card-grid .paint-card-actions {
    grid-template-columns: 1fr;
    margin: 0 -7px;
    padding: 6px 7px;
  }
}