.video-service-card,.video-quote-panel,.video-admin-panel{background:#f3e6de;border:1px solid #dfc7b6;border-radius:18px;padding:clamp(22px,4vw,46px);margin:24px 0;color:#4f433d}
.video-service-grid{display:grid;grid-template-columns:minmax(200px,.65fr) 1fr;gap:36px;align-items:center}
.video-service-grid video,.video-admin-panel video{display:block;width:100%;max-width:320px;max-height:530px;border-radius:14px;object-fit:contain;background:#e8ded3}
.video-service-card strong,.video-quote-panel strong{color:#8c4f3b}
.video-service-price{font-size:clamp(30px,4vw,48px);font-weight:700;margin:16px 0}
.video-quote-panel input{width:100px;padding:12px;border:1px solid #bb9c87;border-radius:8px;background:#fffcf8}
.video-quote-panel output{display:block;font-size:22px;font-weight:700;margin-top:18px;color:#8c4f3b}
.video-monthly-perk{padding:18px;background:#f3e1d7;border-radius:12px;margin-top:20px}.video-monthly-perk a{display:block;text-decoration:underline;margin-top:8px}
.product-media .product-demo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.product-media.show-flat .product-demo-video,.product-media:hover .product-demo-video{opacity:0;pointer-events:none}
.product-video-toggle{position:absolute;left:12px;bottom:54px;z-index:5;background:#fcf9f5ee;border-radius:20px;padding:8px 14px;min-height:44px;font-size:12px}
.brand-pair{display:flex!important;align-items:center!important;gap:16px!important}
.brand-pair img{height:48px!important;width:auto!important;max-width:150px;object-fit:contain!important}
.brand-pair .tangyi-logo{height:48px!important;width:auto!important;max-width:150px}
@media(max-width:760px){.video-service-grid{grid-template-columns:1fr}.brand-pair img,.brand-pair .tangyi-logo{height:36px!important;max-width:120px}.video-quote-panel output{font-size:18px}}
@media print{.video-service-card video,.product-video-toggle{display:none}}
.ambient{overflow:hidden!important;max-width:100vw}.video-service-card{min-width:0}.video-service-price small{font-size:16px}
.lesson-cover .owner-teaching-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lesson-hero .owner-teaching-video{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;background:#e8ded3}
.owner-admin-demo video{width:100%;max-width:320px}
/* Video owns the cover. Only an explicit flat-lay toggle reveals the alternate. */
.product-media:has(video):not(.show-flat) .product-demo-video{opacity:1!important;pointer-events:auto}
.product-media:has(video):not(.show-flat) .altshot{clip-path:inset(100% 0 0 0)!important;opacity:0!important}
.product-media:has(video).show-flat .altshot{clip-path:inset(0)!important;opacity:1!important;display:block!important;z-index:3}
.product-media:has(video) .shot:not(.altshot){transform:none!important}
.product-media:has(video).show-flat .shot:not(.altshot){visibility:hidden}
/* Desktop hover reveals only the flat lay; the removed old cover cannot reappear. */
@media(hover:hover) and (pointer:fine){
 .product-media:has(video):hover:not(.show-flat) .product-demo-video{opacity:0!important;pointer-events:none}
 .product-media:has(video):hover:not(.show-flat) .altshot{display:block!important;clip-path:inset(0)!important;opacity:1!important;z-index:3}
 .product-media:has(.custom-product-video):hover .shot:not(.altshot){visibility:hidden}
}
/* Absolute-positioned video needs an explicit mobile media box after cover removal. */
@media(max-width:760px){
 .product-media:has(video)>a{position:relative;display:block;width:100%;aspect-ratio:3/4;min-width:0;overflow:hidden}
 .product-media:has(video)>a>.altshot{height:100%!important;aspect-ratio:auto!important}
}