/*
 * V-board mockup styles
 *
 * Drop-in CSS for the V-shape product gallery rendered by
 * WooCommerce/ProductDisplay.php for raamborden. These rules are also in
 * assets/css/main.css (compiled from src/scss/_woocommerce.scss); this file
 * exists so production can pick up the v-board mockup without re-deploying
 * the entire main.css.
 *
 * Include via:
 *   <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/css/vboard-mockup.css">
 * or wp_enqueue_style( 'gbk-vboard-mockup', get_template_directory_uri() . '/assets/css/vboard-mockup.css' );
 */

.gbk-vboard-vshape{position:relative;display:flex;align-items:stretch;justify-content:center;max-width:min(520px,75vh);margin:0 auto;perspective:1600px;perspective-origin:50% 50%}
.gbk-vboard-vshape__panel{flex:0 1 50%;max-width:50%;backface-visibility:hidden}
.gbk-vboard-vshape__panel img{display:block;width:100%;height:auto;max-height:calc(100vh - 260px)}
.gbk-vboard-vshape__panel--left{transform-origin:right center;transform:rotateY(-25deg);filter:drop-shadow(-6px 6px 14px rgba(0, 0, 0, 0.12)) drop-shadow(-14px 18px 36px rgba(0, 0, 0, 0.1))}
.gbk-vboard-vshape__panel--left img{filter:brightness(1.02)}
.gbk-vboard-vshape__panel--right{transform-origin:left center;transform:rotateY(25deg);filter:drop-shadow(6px 6px 14px rgba(0, 0, 0, 0.12)) drop-shadow(14px 18px 36px rgba(0, 0, 0, 0.1))}
.gbk-vboard-vshape__panel--right img{filter:brightness(0.97)}
.gbk-vboard-vshape__shadow{position:absolute;left:8%;right:8%;bottom:-22px;height:28px;background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28), transparent 70%);filter:blur(6px);pointer-events:none;z-index:-1}