.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-image { background: #e9ddec; }
.product-gallery { position: relative; aspect-ratio: 3 / 2; height: auto; overflow: hidden; background: #e9ddec; }
.gallery-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gallery-button { position: absolute; z-index: 2; bottom: 13px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: rgba(252, 249, 253, .92); color: #4c3b61; font-size: 17px; }
.gallery-prev { right: 52px; }.gallery-next { right: 13px; }
.product-image img { object-position: center bottom; }
.product-image.lip-balm img { object-position: right bottom; }
.product-image.deo-balm img { object-position: left bottom; }
.flavor-picker { display: grid; gap: 6px; margin: 2px 0 11px; }
.flavor-picker label { color: #706977; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.flavor-picker select { width: 100%; appearance: none; border: 1px solid rgba(76, 59, 97, .2); border-radius: 0; background: #fbf8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%234c3b61' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: #392d49; cursor: pointer; padding: 10px 34px 10px 11px; font-size: 12px; }
.product-add { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: #4c3b61; color: white; padding: 12px 13px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.product-add span { font-size: 16px; line-height: 0; }

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