/*
 * Parts diagram (page-parts.php). Hotspot positions are in the diagram
 * image's natural pixels (LB7 image 944px wide, LLY image 897px wide); the
 * template sets #pgwrapper and the image to that natural width, so they are
 * never scaled. LB7 positions are from the old theme's pgstyle.css; LLY
 * positions were re-measured on the image's printed numbers (v1.0.3).
 */
.parts-hint { color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.parts-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px 0 40px; }
.parts-scroller:focus-visible { outline: 3px solid rgba(15, 117, 188, .55); }
#pgwrapper { margin: 0 auto; width: 944px; position: relative; }
#pgwrapper > p:empty { display: none; }
#pgwrapper .parts-diagram-img { display: block; max-width: none; height: auto; border-radius: 0; }
.bubbleInfo { position: absolute; width: 33px; height: 32px; z-index: 2; }
.bubbleInfo p { margin: 0; }
.bubbleInfo .trigger { display: block; width: 32px; height: 32px; border-radius: 50%; text-indent: -2000px; overflow: hidden; text-decoration: none !important; }
.bubbleInfo .trigger:hover, .bubbleInfo .trigger:focus-visible, .bubbleInfo.is-open .trigger { box-shadow: 0 0 0 3px var(--blue); background: rgba(15, 117, 188, .12); outline: none; }
/* Closed popups are display:none so they add no scrollable overflow to the diagram card.
   The popup starts right at the hotspot's bottom edge (no hover gap). */
.bubbleInfo .popup { position: absolute; left: calc(-33px + var(--pop-shift, 0px)); top: 32px; z-index: 50; padding-top: 14px; display: none; }
.bubbleInfo .popup::before { content: ""; position: absolute; top: 6px; left: calc(44px - var(--pop-shift, 0px)); border: 8px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
/* Open on tap (.is-open) and keyboard focus (.is-focus, kept while Tab moves to the popup's button; both set by theme.js); on hover only where a real
   hover exists, so a touch "sticky hover" does not keep a popup over the next hotspot. */
.bubbleInfo.is-focus .popup, .bubbleInfo.is-open .popup { display: block; animation: wi-pop-in .15s ease-out; }
.bubbleInfo.is-focus, .bubbleInfo.is-open { z-index: 60; }
@media (hover: hover) {
	/* .is-hover (theme.js) keeps the popup open ~1/4 s after the pointer leaves, so it can
	   cross to the popup's button without it closing. */
	.bubbleInfo:hover .popup, .bubbleInfo.is-hover .popup { display: block; animation: wi-pop-in .15s ease-out; }
	.bubbleInfo.is-hover { z-index: 60; }
	.bubbleInfo:hover { z-index: 61; }
}
/* Popups that would run past the bottom of the diagram card open upward (class set by theme.js). */
.bubbleInfo.pop-up .popup { top: auto; bottom: 32px; padding-top: 0; padding-bottom: 14px; animation-name: wi-pop-in-up; }
.bubbleInfo.pop-up .popup::before { top: auto; bottom: 6px; border-top: 8px solid var(--ink); border-bottom: 0; }
@keyframes wi-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wi-pop-in-up { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bubbleInfo .popup { animation: none !important; } }
.bubbleInfo .desc { width: 280px; padding: 12px 14px; background: var(--ink); color: #fff; border-radius: 10px; box-shadow: var(--shadow); font-size: .9rem; line-height: 1.4; }
.bubbleInfo .desc strong { color: #ffb3ba; }
.bubbleInfo .cart-btn { display: block; margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--red); color: #fff !important; text-align: center; font-weight: 700; text-decoration: none !important; }
.bubbleInfo .cart-btn:hover { background: var(--red-dk); }

/* Hotspot positions (from pgstyle.css) */
#pgwrapper .part1{top: 4px; left: 69px;}
#pgwrapper .part2{top: 23px; left: 133px;}
#pgwrapper .part3{top: 35px; left: 175px;}
#pgwrapper .part4{top: 50px; left: 215px;}
#pgwrapper .part5{top: 61px; left: 255px;}
#pgwrapper .part6{top: 88px; left: 333px;}
#pgwrapper .part7{top: 100px; left: 378px;}
#pgwrapper .part8{top: 113px; left: 415px;}
#pgwrapper .part9{top: 123px; left: 455px;}
#pgwrapper .part10{top: 135px; left: 485px;}
#pgwrapper .part11{top: 145px; left: 520px;}
#pgwrapper .part12{top: 160px; left: 560px;}
#pgwrapper .part13{top: 170px; left: 590px;}
#pgwrapper .part14{top: 180px; left: 630px;}
#pgwrapper .part15{top: 192px; left: 662px;}
#pgwrapper .part16{top: 204px; left: 697px;}
#pgwrapper .part17{top: 218px; left: 742px;}
#pgwrapper .part18{top: 229px; left: 780px;}
#pgwrapper .part19{top: 238px; left: 820px;}
#pgwrapper .part20{top: 255px; left: 865px;}
#pgwrapper .part21{top: 400px; left: 820px;}
#pgwrapper .part22{top: 426px; left: 865px;}
#pgwrapper .part23{top: 243px; left: 180px;}
#pgwrapper .part24{top: 206px; left: 245px;}
#pgwrapper .part25{top: 485px; left: 95px;}
#pgwrapper .part26{top: 485px; left: 154px;}
#pgwrapper .part27{top: 485px; left: 210px;}
#pgwrapper .part28{top: 485px; left: 255px;}
#pgwrapper .part29{top: 458px; left: 366px;}
#pgwrapper .part30{top: 475px; left: 421px;}
#pgwrapper .part31{top: 487px; left: 461px;}
#pgwrapper .part32{top: 504px; left: 508px;}
#pgwrapper .part33{top: 514px; left: 542px;}
#pgwrapper .part34{top: 530px; left: 595px;}
#pgwrapper .part35{top: 552px; left: 662px;}
#pgwrapper .part36{top: 568px; left: 720px;}
#pgwrapper .part37{top: 584px; left: 770px;}

/* LLY page (part2-N): centres measured on lly-engine.jpg (897x586), top/left = centre - 16px. */
#pgwrapper .part2-1{top: 27px; left: 80px;}
#pgwrapper .part2-2{top: 145px; left: 43px;}
#pgwrapper .part2-3{top: 19px; left: 181px;}
#pgwrapper .part2-4{top: 24px; left: 223px;}
#pgwrapper .part2-5{top: 31px; left: 264px;}
#pgwrapper .part2-6{top: 40px; left: 310px;}
#pgwrapper .part2-7{top: 48px; left: 352px;}
#pgwrapper .part2-8{top: 56px; left: 407px;}
#pgwrapper .part2-9{top: 59px; left: 448px;}
#pgwrapper .part2-10{top: 79px; left: 486px;}
#pgwrapper .part2-11{top: 96px; left: 534px;}
#pgwrapper .part2-12{top: 109px; left: 572px;}
#pgwrapper .part2-13{top: 113px; left: 617px;}
#pgwrapper .part2-14{top: 126px; left: 660px;}
#pgwrapper .part2-15{top: 142px; left: 704px;}
#pgwrapper .part2-16{top: 161px; left: 751px;}
#pgwrapper .part2-17{top: 179px; left: 796px;}
#pgwrapper .part2-18{top: 434px; left: 821px;}
#pgwrapper .part2-19{top: 206px; left: 62px;}
#pgwrapper .part2-20{top: 450px; left: 62px;}
#pgwrapper .part2-21{top: 437px; left: 112px;}
#pgwrapper .part2-22{top: 423px; left: 166px;}
#pgwrapper .part2-23{top: 433px; left: 320px;}
#pgwrapper .part2-24{top: 459px; left: 360px;}
#pgwrapper .part2-25{top: 480px; left: 405px;}
#pgwrapper .part2-26{top: 489px; left: 457px;}
#pgwrapper .part2-27{top: 505px; left: 500px;}
#pgwrapper .part2-28{top: 517px; left: 553px;}
#pgwrapper .part2-29{top: 527px; left: 601px;}
#pgwrapper .part2-30{top: 534px; left: 643px;}
#pgwrapper .part2-31{top: 545px; left: 692px;}
#pgwrapper .part2-32{top: 551px; left: 739px;}