.paint-results-head small {
  display: none;
}

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

.paint-product-card {
  border: 1px solid #3d474b;
  background:
    radial-gradient(circle at 26% 36%, color-mix(in srgb, var(--paint), transparent 88%), transparent 31%),
    linear-gradient(145deg, #12191d, #080d10 78%);
  box-shadow: inset 0 0 0 1px #ffffff05, 0 8px 18px #0007;
}

.paint-product-card:hover,
.paint-product-card.selected {
  border-color: #c6984e;
  box-shadow: inset 0 0 0 1px #d5a34d33, 0 12px 26px #000a;
}

.paint-product-card-grid,
.paint-product-card-grid.brand-citadel,
.paint-product-card-grid.brand-vallejo,
.paint-product-card-grid.brand-ak {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: minmax(170px, 1fr) 45px;
  width: 100%;
  min-height: 225px;
  aspect-ratio: auto;
  padding: 10px 10px 0;
  border: 1px solid #3d474b;
  background-image: none;
  clip-path: none;
}

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

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

.paint-card-bottle {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 104px;
  height: 158px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #30373a 0, #111719 50%, #050809 76%);
  isolation: isolate;
}

.brand-citadel .paint-card-bottle,
.brand-vallejo .paint-card-bottle,
.brand-ak .paint-card-bottle {
  background: transparent;
}

.paint-card-reference,
.paint-detail-reference {
  color: #d4a955 !important;
  font: 800 13px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace !important;
  letter-spacing: .08em;
}

.paint-card-reference span {
  color: #8f989c;
  font-size: 9px;
}

.paint-card-bottle .paint-bottle-neutral {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .78;
  filter: contrast(1.04) brightness(1.12);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.paint-bottle-color {
  position: absolute;
  z-index: 1;
  display: block;
  background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--paint), white 22%), var(--paint) 52%, color-mix(in srgb, var(--paint), black 35%));
  box-shadow: inset 7px 0 12px #fff2, inset -7px -8px 14px #0005;
}

.brand-citadel .paint-bottle-color,
.brand-vallejo .paint-bottle-color,
.brand-ak .paint-bottle-color {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--paint);
}

.brand-citadel .paint-bottle-color {-webkit-mask: url("assets/paint-bottles/citadel-layers/body-mask.png") center / contain no-repeat;mask: url("assets/paint-bottles/citadel-layers/body-mask.png") center / contain no-repeat}
.brand-vallejo .paint-bottle-color {-webkit-mask: url("assets/paint-bottles/vallejo-layers/body-mask.png") center / contain no-repeat;mask: url("assets/paint-bottles/vallejo-layers/body-mask.png") center / contain no-repeat}
.brand-ak .paint-bottle-color {-webkit-mask: url("assets/paint-bottles/ak-layers/body-mask.png") center / contain no-repeat;mask: url("assets/paint-bottles/ak-layers/body-mask.png") center / contain no-repeat}

.paint-bottle-relief,
.paint-bottle-details {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.paint-bottle-relief {
  z-index: 2;
  opacity: .92;
  mix-blend-mode: soft-light;
}

.paint-bottle-details {
  z-index: 3;
}

.paint-bottle-brand {
  position: absolute;
  z-index: 4;
  left: 8%;
  right: 8%;
  top: 62%;
  color: #fff;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: -.02em;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.brand-citadel .paint-bottle-brand {
  top: 63%;
  font-family: Georgia, serif;
  font-size: 9px;
}

.brand-ak .paint-bottle-brand {
  top: 64%;
  font-size: 11px;
}

.paint-card-info {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 17px 3px 8px 7px;
}

.paint-card-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: start;
}

.paint-card-title h3 {
  margin: 0;
  color: #f1eee7;
  font: 700 16px/1.08 Georgia, serif;
  overflow-wrap: anywhere;
}

.paint-card-title p {
  margin: 6px 0 0;
  color: #9fa7aa;
  font-size: 10px;
}

.paint-pure-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border: 4px solid #151b1e;
  border-radius: 50%;
  background: var(--paint);
  box-shadow: 0 0 0 1px #b88b45, inset 0 2px 4px #fff3, 0 4px 10px #0008;
}

.paint-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.paint-card-tags span {
  padding: 4px 7px;
  border: 1px solid #465158;
  border-radius: 99px;
  background: #182126;
  color: #c3c9ca;
  font-size: 8px;
}

.paint-card-colorbar {
  display: block;
  width: 88%;
  height: 10px;
  margin-top: 15px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--paint) 12% 88%, transparent);
  filter: saturate(1.08);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--paint), transparent 60%);
  transform: rotate(-2deg);
}

.paint-card-actions {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 86px;
  align-items: center;
  gap: 7px;
  margin: 0 -10px;
  padding: 7px 10px;
  border-top: 1px solid #344046;
  background: #0a1013e8;
}

.paint-product-card .paint-owned,
.paint-product-card .paint-open {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid #39454b;
  background: #11191d;
  color: #adb5b7;
  font-size: 9px;
  cursor: pointer;
}

.paint-product-card .paint-owned.owned {
  border-color: #2e6a38;
  background: #102018;
  color: #74de7e;
}

.paint-product-card .paint-owned svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.paint-product-card .paint-open {
  border-color: #806236;
  color: #e3bd72;
}

.paint-product-card-list {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 190px;
  align-items: center;
  min-height: 104px;
  padding: 7px 10px;
}

.paint-product-card-list .paint-card-bottle {
  width: 64px;
  height: 88px;
}

.paint-product-card-list .paint-bottle-brand {
  font-size: 6px;
}

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

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

.paint-product-card-list .paint-pure-swatch {
  width: 28px;
  height: 28px;
}

.paint-product-card-list .paint-card-tags {
  margin-top: 8px;
}

.paint-product-card-list .paint-card-colorbar {
  width: 55%;
  margin-top: 9px;
}

.paint-product-card-list .paint-card-actions {
  grid-column: 3;
  grid-row: 1;
  grid-template-columns: 1fr 82px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.paint-product-card-list .paint-owned,
.paint-product-card-list .paint-open {
  grid-column: auto;
  grid-row: auto;
  align-self: stretch;
}

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

  .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: 82px minmax(0, 1fr);
    grid-template-rows: minmax(145px, 1fr) 42px;
    min-height: 195px;
    padding: 7px 7px 0;
  }

  .paint-card-bottle {
    width: 76px;
    height: 132px;
  }

  .paint-card-info {
    padding: 14px 0 6px 4px;
  }

  .paint-card-title {
    grid-template-columns: 1fr;
  }

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

  .paint-pure-swatch {
    width: 27px;
    height: 27px;
    margin-top: 7px;
  }

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

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