/* Ten quiet, service-independent backgrounds. Logos and labels stay above them. */
:is(#product-grid, .product-detail) .product-art[data-pattern] { background: #e9e9e9; }
:is(#product-grid, .product-detail) .product-art[data-pattern]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  mask-image: linear-gradient(180deg, transparent 12%, #000 38%, #000 80%, transparent);
}
:is(#product-grid, .product-detail) .product-art[data-pattern] > .product-type,
:is(#product-grid, .product-detail) .product-art[data-pattern] > .product-number { z-index: 2; }
/* 1. The original tilted stripe ribbon. */
:is(#product-grid, .product-detail) .product-art[data-pattern="1"]::before {
  inset: auto -15%; height: 78px;
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, #cfd0d1 7px 8px);
  transform: rotate(-20deg);
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}
/* 2. Dot field. */
:is(#product-grid, .product-detail) .product-art[data-pattern="2"]::before {
  background-image: radial-gradient(circle, #c6c8ca 1px, transparent 1.5px);
  background-size: 14px 14px;
}
/* 3. Fine square grid. */
:is(#product-grid, .product-detail) .product-art[data-pattern="3"]::before {
  background-image: linear-gradient(#cfd1d2 1px, transparent 1px), linear-gradient(90deg, #cfd1d2 1px, transparent 1px);
  background-size: 22px 22px;
}
/* 4. Concentric circles, offset from the logo. */
:is(#product-grid, .product-detail) .product-art[data-pattern="4"]::before {
  background-image: repeating-radial-gradient(circle at 25% 75%, transparent 0 13px, #ccced0 13px 14px, transparent 14px 22px);
}
/* 5. Diagonal diamond lattice. */
:is(#product-grid, .product-detail) .product-art[data-pattern="5"]::before {
  background-image: repeating-linear-gradient(45deg, transparent 0 21px, #d0d1d2 21px 22px), repeating-linear-gradient(-45deg, transparent 0 21px, #d0d1d2 21px 22px);
}
/* 6. Soft parallel waves. */
:is(#product-grid, .product-detail) .product-art[data-pattern="6"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M-48 12Q-24-4 0 12T48 12T96 12T144 12' fill='none' stroke='%23ccced0'/%3E%3C/svg%3E");
  background-size: 96px 24px;
}
/* 7. Small plus signs. */
:is(#product-grid, .product-detail) .product-art[data-pattern="7"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M9 13h8M13 9v8' fill='none' stroke='%23c8cbcd'/%3E%3C/svg%3E");
  background-size: 26px 26px;
}
/* 8. Repeating arches. */
:is(#product-grid, .product-detail) .product-art[data-pattern="8"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M0 32V24a24 24 0 0 1 48 0v8M8 32v-8a16 16 0 0 1 32 0v8' fill='none' stroke='%23cfd1d2'/%3E%3C/svg%3E");
  background-size: 48px 32px;
}
/* 9. Staggered dashes. */
:is(#product-grid, .product-detail) .product-art[data-pattern="9"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32'%3E%3Cpath d='M5 8h10M25 24h10' fill='none' stroke='%23c8cbcd' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 40px 32px;
}
/* 10. Nested angular chevrons. */
:is(#product-grid, .product-detail) .product-art[data-pattern="10"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M-32 0L0 20 32 0 64 20 96 0' fill='none' stroke='%23cfd1d2'/%3E%3C/svg%3E");
  background-size: 64px 22px;
}