/* DRG Product Overview: copy, feature lists, gallery and lightbox (moved from css-site-customizations.php) */

/* product_overview: category link, title, intro and key features beside the image gallery */
section.section--product_overview { padding: 3rem 0 5rem; }
.product-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.product-overview--copy { display: flex; flex-direction: column; gap: 3rem; }
.product-overview--intro, .product-overview--features { display: flex; flex-direction: column; align-items: flex-start; }
.product-overview--intro { gap: 1.5rem; }
.product-overview--features { gap: 1rem; }
.product-overview--intro h1, .product-overview--intro p, .product-overview--features h2, .product-overview--features ul { margin: 0; }
a.product-overview--category { font-size: 0.875rem; font-weight: 700; line-height: 1; color: var(--color-blue-medium); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; }
a.product-overview--category:hover { color: var(--color-blue-dark); }
.product-overview--features h2 { color: var(--color-blue-medium); text-transform: uppercase; }
.product-overview--features ul { padding-left: 1.5em; list-style: disc; }
.product-overview--features li { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
@media (width >= 64rem) { .product-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
@media (width < 51rem) { section.section--product_overview { padding: 2.5rem 0 2rem; } }

.product-gallery { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.product-gallery--stage { position: relative; aspect-ratio: 568 / 500; background-color: white; }
.product-gallery .product-gallery--image { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-gallery .product-gallery--image.active { display: block; }
.product-gallery button { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: 0; border-radius: 0; cursor: pointer; }
.product-gallery button img { display: block; }
.product-gallery--expand, .product-gallery--arrows button { width: 1.875rem; height: 1.875rem; background-color: rgba(0, 0, 0, 0.4); }
.product-gallery--expand:hover, .product-gallery--arrows button:hover { background-color: rgba(0, 0, 0, 0.6); }
.product-gallery--expand:focus-visible, .product-gallery--arrows button:focus-visible { outline: 0.0625rem solid white; outline-offset: -0.1875rem; }
.product-gallery--expand { position: absolute; top: 0.75rem; right: 0.75rem; }
.product-gallery--arrows { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.5rem; }
.product-gallery--thumbs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1rem) / 4); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product-gallery--thumbs::-webkit-scrollbar { display: none; }
.product-gallery button.product-gallery--thumb { aspect-ratio: 130 / 100; padding: 0; border: 0.0625rem solid transparent; background: none; scroll-snap-align: start; }
.product-gallery--thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery button.product-gallery--thumb[aria-current="true"] { border-color: var(--color-teal-bright); }
.product-gallery button.product-gallery--thumb:not([aria-current="true"]):hover { border-color: rgba(61, 209, 207, 0.5); }
.product-gallery--thumb:focus-visible { outline: var(--focus-outline); outline-offset: -0.125rem; }
@media (width < 51rem)
{
	.product-gallery--expand { display: none !important; }
	.product-gallery--thumbs { grid-auto-columns: calc((100% - 3 * 0.5rem) / 4); gap: 0.5rem; }
}

.product-lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.product-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.product-lightbox::backdrop { background-color: rgba(0, 0, 0, 0.85); }
.product-gallery .product-lightbox--image { display: block; width: auto; height: auto; max-width: calc(100vw - 8rem); max-height: calc(100vh - 8rem); object-fit: contain; background-color: white; }
.product-gallery .product-lightbox--close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; padding: 0; background-color: white; }
.product-gallery .product-lightbox--close:hover { background-color: var(--color-blue-dark); }
.product-gallery .product-lightbox--close:hover img { filter: brightness(0) invert(1); }
.product-lightbox--close:focus-visible { outline: 0.125rem solid white; outline-offset: 0.125rem; }
.product-lightbox .product-gallery--arrows { position: static; }