/* Existing detail anatomy, moved out of the page. */

		.bg-BowlingGarage {
	    background-image: url('assets/images/products/bg_dark.png'); /* Replace with your image path */
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
		}

		.table-detail {
			width: 100%;
			border-spacing: 0;
			border-collapse: separate;
			border-radius: 0.7rem;
			border: 1px solid #f67325;
			overflow: hidden;
		}
		.table-detail td 		{ vertical-align: middle; padding-left: 5px; padding-right: 5px; }
		.bt 								{ border-top: 1px solid #f67325; }
		.br 								{ border-right: 1px solid #f67325; }
		.bb 								{ border-bottom: 1px solid #f67325; }
		.bb-dotted 					{ border-bottom: 1px dotted #f67325; }
		.bb-double 					{ border-bottom: double; }

		.video-container {
	    position: relative;
	    width: 100%;
			border-top-left-radius: 0.7rem;
  		border-top-right-radius: 0.7rem;
			/* box-shadow: 0 4px 10px rgba(202, 202, 202, 0.2); */
	    padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625 or 56.25%) */
	    height: 0;
	    overflow: hidden;
		}

		.video-container iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
		}

		@keyframes spin-scale-once {
			from {
				transform: rotate(0deg) scale(0.5);
				opacity: 0;
			}
			to {
				transform: rotate(360deg) scale(1);
				opacity: 1;
			}
		}
		.img-spin-once { animation: spin-scale-once 1s ease-in-out; }


		.wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 55vh;
		}

		.pointer-group {
			position: relative;
			width: 90vw;
			max-width: 300px;
			aspect-ratio: 1 / 1;
		}

		.bowling-card {
			width: 100%;
			height: 100%;
			overflow: hidden; /* ยังใช้ได้ เพราะ pointer ไม่อยู่ในนี้แล้ว */
		}

		.ball-bg {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			border-radius: 12px;
		}

		/* ตัว pointer */
		.pointer {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: flex-start; /* เปลี่ยนจาก center */
			pointer-events: none;
			z-index: 2;
		}

		.pointer .line {
			width: 2px;
			background-color: rgb(53, 53, 53);
			margin-bottom: 0px;
			position: relative;
		}

		.pointer .line::after {
			content: '';
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 10px;
			height: 10px;
			background-color: rgb(255, 255, 255);
			border-radius: 50%;
			border: 2px solid rgb(53, 53, 53);
		}

		.pointer .label {
			background-color: rgba(53, 53, 53, 0.75);
			color: white;
			padding: 4px 10px;
			border-radius: 8px;
			font-size: 16px;
			white-space: nowrap;

			position: absolute;
			transform: translateX(-50%);
			text-align: center;
		}

		.pointer-top .line::after {
			bottom: 0; /* ตำแหน่งหัว Bullet */
		}
		.pointer-bottom .line::after {
			top: 0; /* ตำแหน่งหัว Bullet */
		}

		.pointer-top .label {
			bottom: 100%;
			top: auto;
			left: 50%;
		}
		.pointer-bottom .label {
			top: 100%;
  		left: 50%;
		}


/* Dark gold product detail. All overrides are scoped to this page. */
body.luxury-detail { --detail-gutter:20px; --primary:#dfc087; --title:#f0e6d5; --bg-white:#141513; --body-bg:#141513; --body-color:#dad5cc; --border-color:#dfc08733; --input-bg:#252620; --theme-text-color:#211c12; background:#0b0c0b; color:#dad5cc; }
.luxury-detail .page-wrapper { position:relative; max-width:600px; margin:auto; background:#141513; min-height:100vh; }
.luxury-detail .page-content { padding:0 0 calc(30px + env(safe-area-inset-bottom)) !important; }
.luxury-detail.has-store-navigation .page-content { padding-bottom:calc(100px + env(safe-area-inset-bottom)) !important; }
.luxury-detail .detail-header { --gold:#dfc087; position:relative; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:5px; padding:max(20px,env(safe-area-inset-top)) 22px 26px; background:transparent; }
.detail-back { position:fixed; top:max(20px,env(safe-area-inset-top)); left:max(22px,calc((100vw - 600px) / 2 + 22px),env(safe-area-inset-left)); z-index:50; display:grid; place-items:center; width:44px; height:44px; border:1px solid #dfc08744; background:#171915e6; border-radius:50%; color:#eed7a7; font-size:22px; box-shadow:0 4px 16px #0003; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.detail-wordmark { font-size:11px; font-weight:600; letter-spacing:2px; color:#eddbb8; }
.detail-header-note { margin-left:auto; max-width:72px; text-align:right; font-size:8px; line-height:1.8; letter-spacing:1.5px; color:#d0bf9e; }
.detail-intro { position:relative; z-index:3; margin:0; padding:22px 24px 20px; }
.detail-eyebrow { font-size:12px; letter-spacing:2.5px; color:#d8bb7e; margin:0 0 10px; text-transform:uppercase; }
.detail-title { font-size:clamp(24px,7vw,30px); line-height:1.25; font-weight:500; color:#f0e4ce; margin:0 0 14px; overflow-wrap:anywhere; }
.detail-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; }
.detail-price strong { font-size:28px; font-weight:500; color:#e5c68d; }
.detail-price del { color:#aaa69b; font-size:15px; }
.detail-caption { margin:12px 0 0; color:#ada99d; font-size:12px; }
.detail-load-status { padding:24px; position:relative; z-index:3; color:#dfc087; text-align:center; }
.detail-gallery-heading { display:flex; justify-content:space-between; gap:12px; padding:14px 24px 0; border-top:1px solid #dfc08722; color:#baa987; font-size:9px; letter-spacing:1.5px; }
.detail-gallery-heading span:last-child { letter-spacing:0; color:#aaa79e; }
.luxury-detail .dz-product-preview { margin:14px var(--detail-gutter) 22px; border:1px solid #dfc08733; border-radius:22px; background:linear-gradient(130deg,#ffffff09,#ffffff02); }
.luxury-detail .product-detail-swiper { padding-bottom:28px; }
.luxury-detail .dz-product-preview .product-detail-swiper .swiper-wrapper .swiper-slide { opacity:1 !important; }
.luxury-detail .product-detail-swiper .dz-media { margin:0 !important; padding:20px; }
.luxury-detail .product-detail-swiper img { width:100%; height:245px; object-fit:contain; transform:none !important; animation:none; transition:none; }
.luxury-detail .swiper-pagination-bullet { background:#dfc087; opacity:.3; }
.luxury-detail .swiper-pagination-bullet-active { opacity:1; }
.luxury-detail .dz-product-detail { margin:0; padding:0 var(--detail-gutter) 26px; border-radius:0; background:transparent; }
.luxury-detail .dz-handle { display:none; }
.luxury-detail .card { background:linear-gradient(135deg,#ffffff09,#ffffff03); border:1px solid #dfc0872e; border-radius:16px; box-shadow:none; margin-bottom:22px; }
.luxury-detail .card-body { padding:12px 8px; }
.luxury-detail .badge.light.badge-light { padding:9px 5px; background:transparent; color:#e4cca0; font-size:12px; font-weight:400; }
.luxury-detail .wrapper { height:auto; min-height:360px; padding:48px 0 78px; margin:0 0 20px; }
/*.luxury-detail .wrapper { border-bottom:1px solid #dfc08726; }*/

.store-logo { display: flex; align-items: center; min-height: 44px; }
.luxury-detail .detail-header .store-logo { margin-left: auto; }
.store-logo img { width: 38px; height: auto; }
.store-header-label { max-width: 80px; text-align: left; font-size: 10px; line-height: 1.5; letter-spacing: 2px; color: var(--gold); }

.luxury-detail .pointer-group { width:100%; max-width:240px; }
.luxury-detail .ball-bg { object-fit:contain; }
.luxury-detail .pointer .line { background:#bfa97588; }
.luxury-detail .pointer .line::after { width:7px; height:7px; background:#e6c994; border:1px solid #b69d65; }
.luxury-detail .pointer .label { max-width:260px; white-space:normal; width:max-content; font-size:12px; padding:6px 12px; background:#2a2b23; color:#e5d1ab; border:1px solid #dfc08733; }
.luxury-detail .pointer-bottom .line { height:100px !important; }
.luxury-detail .table-detail { border:1px solid #dfc08735; border-radius:16px; background:linear-gradient(130deg,#ffffff08,#ffffff02); font-size:13px; }
.luxury-detail .table-detail td { padding:12px 10px; overflow-wrap:anywhere; }
.luxury-detail .table-detail th { padding:4px 10px 12px; }
.luxury-detail .table-detail h5, .luxury-detail .table-detail h4 { color:#e7d0a4; font-weight:400; }
.luxury-detail .bt, .luxury-detail .br, .luxury-detail .bb, .luxury-detail .bb-dotted { border-color:#dfc08726; }
.luxury-detail .sku-available h4 { font-size:20px; color:#e6d3af; }
.luxury-detail .sku-available .btn-warning { border:1px solid #dfc08755; background:#dfc08716; color:#e5ca98 !important; min-width:44px; padding:10px; }
.luxury-detail .overlay-swiper2 { margin:20px -2px 0 !important; padding:0 2px 10px; }
.luxury-detail .overlay-swiper2 .swiper-slide { width:265px; max-width:100%; }
.luxury-detail .dz-card.list.style-4 { padding:18px 14px; border:1px solid #dfc0873d; border-radius:18px; background:linear-gradient(130deg,#ffffff0d,#ffffff04); color:#dfd8ca; }
.luxury-detail .dz-card.list.style-4 .dz-media { min-width:80px; max-width:80px; }
.luxury-detail .dz-card.list.style-4 img { object-fit:contain; }
.luxury-detail .dz-card.list.style-4 th { padding-bottom:10px; color:#e3c48a; }
.luxury-detail .modal-content { background:#1e201a; border:1px solid #dfc08744; color:#e9decb; }
.luxury-detail a:focus-visible, .luxury-detail button:focus-visible { outline:2px solid #dfc087; outline-offset:3px; }
@media(max-width:359px) { .detail-intro { padding-left:18px; padding-right:18px; } .detail-wordmark { font-size:9px; letter-spacing:1.4px; } .detail-header-note { display:none; } .luxury-detail .dz-product-detail { padding-left:16px; padding-right:16px; } .luxury-detail .badge.light.badge-light { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .luxury-detail *, .luxury-detail *::before, .luxury-detail *::after { animation:none !important; transition:none !important; } }

/* Video aligns with the gallery and specification cards. */
.detail-video-card { width:calc(100% - var(--detail-gutter) * 2); margin:8px var(--detail-gutter) 20px; overflow:hidden; border:1px solid #dfc08733; border-radius:18px; background:#0b0c0b; }
.detail-video-card[hidden] { display:none; }
.detail-video-frame { position:relative; width:100%; aspect-ratio:16 / 9; min-height:200px; }
.detail-video-frame iframe { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; }
.detail-video-link { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:10px 18px; background:#20211b; color:#dfc087; font-size:12px; }

/* Soft glass surfaces. */
.luxury-detail .detail-traits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 26px; }
.trait-card { position:relative; display:flex; flex-direction:column; align-items:center; padding:20px 6px 17px; text-align:center; border:1px solid #e8dab638; border-radius:18px; background:linear-gradient(145deg,#fff5d91c,#ffffff07 55%,#d9bb7b10); box-shadow:inset 0 1px 0 #fff8df24,0 8px 20px #00000020; }
.trait-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border:1px solid #e1c89440; border-radius:14px; background:linear-gradient(140deg,#e7cc9626,#ffffff03); color:#ead3a6; font-size:18px; box-shadow:inset 0 1px 0 #ffffff17; }
.trait-label { color:#bfb194; font-size:9px; letter-spacing:2px; margin-bottom:5px; }
.trait-value { color:#f2e6ce; font-weight:500; font-size:17px; line-height:1.5; max-width:100%; overflow-wrap:anywhere; }
.trait-caption { color:#b7b3a7; font-size:10px; margin-top:4px; }
.luxury-detail .table-detail,
.luxury-detail .dz-card.list.style-4,
.luxury-detail .dz-product-preview { background:linear-gradient(135deg,#ffefd31a,#ffffff06 50%,#dfc0870c); border-color:#ecdbb438; box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #dfc0870c,0 12px 28px #00000024; }
.luxury-detail .table-detail { border-radius:20px; }
.luxury-detail .table-detail th { background:linear-gradient(100deg,#e4c58710,transparent); }
.luxury-detail .table-detail td { padding:15px 12px; }
.luxury-detail .table-detail .bt { border-top:1px solid #ffffff0d; }
.luxury-detail .table-detail .br { border-right:0; color:#bfb59e; }
.luxury-detail .pointer .label { background:linear-gradient(135deg,#4a4638dc,#292b24e8); box-shadow:inset 0 1px 0 #ffffff16,0 5px 16px #0003; }
.luxury-detail .sku-available { padding:22px 12px 14px; border:1px solid #e5d1a42e; border-radius:20px; background:linear-gradient(135deg,#fff1d513,#ffffff04); box-shadow:inset 0 1px 0 #ffffff17; }
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
    .luxury-detail .trait-card, .luxury-detail .table-detail { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
}
@media(max-width:359px) {
    body.luxury-detail { --detail-gutter:16px; }
    .luxury-detail .detail-traits { gap:7px; }
    .trait-card { padding:16px 4px; border-radius:15px; }
    .trait-value { font-size:15px; }
    .trait-caption { font-size:9px; }
}

/* Related products: compact glass cards with contained product images. */
.luxury-detail .detail-related { position:relative; margin:28px var(--detail-gutter) 8px; }
.detail-related[hidden] { display:none; }
.detail-related h2 { font-size:22px; color:#f0e4ce; margin:0 0 8px; }
.related-caption { color:#ada99d; font-size:13px; margin-bottom:12px; }
.related-swiper { overflow:hidden; }
.related-swiper .swiper-slide { width:168px; height:auto; }
.related-card { display:flex; flex-direction:column; height:100%; padding:12px; border:1px solid #ddc79742; border-radius:18px; background:linear-gradient(145deg,#6f6c5c66,#292a25cc 50%,#48463888); box-shadow:inset 0 1px 0 #ffffff21; }
.related-image { aspect-ratio:1; display:grid; place-items:center; border-radius:12px; background:transparent; margin-bottom:12px; }
.related-image img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 8px #0005); }
.related-brand { align-self:flex-start; color:#e7c98d; border:1px solid #dfc08735; background:#dec38c16; padding:2px 6px; border-radius:5px; font-size:9px; }
.related-card h3 { font-size:13px; line-height:1.5; color:#eee6d6; margin:8px 0 12px; overflow-wrap:anywhere; }
.related-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-top:auto; color:#dfc087; }
.related-price strong { font-size:18px; font-weight:500; }
.related-price del { font-size:11px; color:#aaa69b; }
.related-traits { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.related-traits > span { display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1.5; padding:3px 6px; border:1px solid #dfc08722; border-radius:5px; color:#ccbfa5; background:#dfc08708; }
.related-traits i { font-size:10px; flex-shrink:0; }
/* Layout visualizer entry */
.detail-layout { margin:24px auto; padding:0 20px; max-width:960px; text-align:center; }
.detail-layout[hidden] { display:none; }
.detail-layout-button { display:flex; justify-content:center; align-items:center; gap:16px; padding:16px 24px; border:1px solid #c7a96e; border-radius:14px; background:linear-gradient(135deg,#dfc48b,#b89a5d); color:#171813; font-size:18px; font-weight:600; text-decoration:none; }
.detail-layout-button:hover { color:#171813; filter:brightness(1.08); }
.detail-layout p { margin:10px 0 0; color:#b8b4a8; font-size:13px; }
.layout-weight-dialog { background:#20211b; color:#f4eee3; border:1px solid #dfc08755; border-radius:20px; }
.layout-weight-dialog .modal-header { border-color:#dfc08722; }
.layout-weight-dialog .modal-title { color:#efd09a; }
.layout-weight-dialog .btn-close { filter:invert(1); }
#layoutWeightChoices { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.layout-weight-choice { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:14px 10px; border:1px solid #dfc08744; border-radius:12px; background:#dfc08712; color:#f0d9ab; }
.layout-weight-choice strong { flex:0 0 auto; font-size:15px; }
.layout-weight-choice small { font-size:11px; line-height:1.6; text-align:right; color:#aaa99e; }
#layoutWeightModal .modal-dialog { max-width:500px; padding-bottom:88px; }
.layout-weight-dialog { background:#171913; }
.layout-weight-dialog .modal-body { max-height:50vh; overflow-y:auto; }
.layout-weight-menu-open .store-navigation { z-index:1100; transform:translate(-50%,0); opacity:1; pointer-events:auto; }