html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;
	}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;
	}
ol, ul {list-style: none;
	}
blockquote, q {quotes: none;
	}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;
	}
table {border-collapse: collapse;border-spacing: 0;
	}
/*@font-face {font-family:"calibri";src: url('../fonts/calibri.ttf');font-weight: normal;font-style: normal;
}*/
body { font-family:"calibri"; font-size:14px; color:#fff; font-weight:500; overflow-x:hidden;
	}
.no-padding { padding:0 !important;
	}
.no-margin { margin:0 !important; 
	}
.MainContainer { margin:auto; max-width:1366px; width:100%; position:relative;
	}
.NormalImg { float:left; width:100%; margin:0; padding:0;position:absolute; left:0; top:0; z-index:1;
	}
.Logo { width:10%; margin:0; padding:0; position:absolute; left:9%; top:13%; z-index:1;
	}
.LipsticMainBox { width:36%; margin:0; padding:0; position:absolute; left:12.2%; top:24%; z-index:1;
	}
.LipsticBox { float:left; width:100%; margin:0; padding:0; position:relative;
	}
.BlusherMainBox { width:36%; margin:0; padding:0; position:absolute; left:12.2%; top:40%; z-index:1;
	}
.BlusherBox { float:left; width:100%; margin:0; padding:0; position:relative;
	}
.MascaraMainBox { width:36%; margin:0; padding:0; position:absolute; left:12.2%; top:58%; z-index:1;
	}
.MascaraBox { float:left; width:100%; margin:0; padding:0; position:relative;
	}
.EyelinerMainBox { width:36%; margin:0; padding:0; position:absolute; left:12.2%; top:79%; z-index:1;
	}
.EyelinerBox { float:left; width:100%; margin:0; padding:0; position:relative;
	}
.EyeshadowMainBox { width:36%; margin:0; padding:0; position:absolute; left:12.2%; top:54%; z-index:1;
	}
.EyeshadowBox { float:left; width:100%; margin:0; padding:0; position:relative;
	}
.ProfilePic {width:25.5%; margin:0; padding:0; position:absolute; right:8%; top:26%; z-index:1;
	}
.Icon01 { width:2.1%; position:absolute; bottom:16%; right:19.5%; z-index:2;
	}
.Icon02 { width:1.2%; position:absolute; bottom:36%; right:9.5%; z-index:2;
	}
.Icon03 { width:1.2%; position:absolute; bottom:31.5%; right:9.5%; z-index:2;
	}
.Icon04 { width:1.2%; position:absolute; bottom:27.5%; right:9.5%; z-index:2;
	}
.Icon05 { width:1.6%; position:absolute; bottom:23%; right:9.3%; z-index:2;
	}
.Icon06 { width:1.1%; position:absolute; bottom:18%; right:9.5%; z-index:2;
	}
.Icon07 { width:1%; position:absolute; top:28.5%; right:31%; z-index:2;
	}
.Icon08 { width:1.2%; position:absolute; top:28.5%; right:9.5%; z-index:2;
	}
.CamEnter {width:25.5%; margin:0; padding:0; position:absolute; right:8%; top:26%; z-index:2; background:#000; opacity:0.8;
	}
.Logo1 {width:13%; margin:0; padding:0; position:absolute; right:14.5%; top:50%; z-index:2;
	}
.EnterImg {width:7.5%; margin:0; padding:0; position:absolute; right:17%; bottom:25%; z-index:2; 
	}
/* Legacy AR module overrides — the PointAI skin positions the iframe via JS at runtime,
   so we only keep the SDK-related hides here. */
.vm-tabs,
.vm-tabs__tab-active { display:none !important;
	}
#TNB-video-input { display:none !important;
	}

/* ============================================================
   PointAI Skin — new tablet UI overlay
   ============================================================ */
html, body { height:100%; margin:0; padding:0;
	}
body.PointAIBody { background:#fff; min-height:100vh; height:100vh; overflow:hidden;
	align-items:center; justify-content:center;
	}
body.PointAIBody > .WebView { max-width:none; width:100%; padding:0; margin:0;
	display:flex; align-items:center; justify-content:center; height:100vh;
	}
body.PointAIBody > .WebView > .row { width:100%; margin:0; height:100%;
	display:flex; align-items:center; justify-content:center;
	}
body.PointAIBody > .WebView > .row > [class*="col-"] { padding:0; height:100%;
	display:flex; align-items:center; justify-content:center;
	}

/* Hide legacy dev/debug controls — they were under the tablet */
body.PointAIBody > #downloadLink,
body.PointAIBody > #myvideo,
body.PointAIBody > .DevControls { display:none !important;
	}

.PointAISkin { position:relative; margin:auto;
	height: min(96vh, calc(96vw * 763 / 1024));
	width:  min(96vw, calc(96vh * 1024 / 763));
	max-width:96vw; max-height:96vh;
	background:#fff;
	container-type: size; container-name: tablet;
	}
.PointAISkin .SkinBg { display:block; width:100%; height:100%; object-fit:contain;
	}

/* Hide legacy decoration when new skin is active */
.PointAISkin > img.img-fluid:not(.SkinBg) { display:none !important; }
.PointAISkin .NormalImg,
.PointAISkin .Logo,
.PointAISkin .Logo1,
.PointAISkin .EnterImg,
.PointAISkin .CamEnter,
.PointAISkin .Icon01,
.PointAISkin .Icon02,
.PointAISkin .Icon03,
.PointAISkin .Icon04,
.PointAISkin .Icon05,
.PointAISkin .Icon06,
.PointAISkin .Icon07,
.PointAISkin .Icon08 { display:none !important;
	}

/* Top status bar — sized to the tablet container, not the viewport */
.PointAISkin .TopBar { position:absolute; top:3.2%; left:0; right:0; height:3%; padding:4% 10%;
	display:flex; align-items:center; justify-content:space-between; color:#dcd6c8;
	font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
	font-size: clamp(9px, 1.15cqw, 14px); font-weight:500; z-index:5; pointer-events:none;
	}
.PointAISkin .TopBar .StatusRight { display:flex; align-items:center; gap:0.6cqw; }
.PointAISkin .TopBar svg { width:1.4cqw; height:1.4cqw; min-width:11px; min-height:11px; fill:#dcd6c8; }
.PointAISkin .TopBar .BatteryPct { font-size: clamp(9px, 1.1cqw, 13px); }

/* Profile + bell buttons */
.PointAISkin .ProfileBtn,
.PointAISkin .BellBtn { position:absolute; z-index:6; display:flex; align-items:center; justify-content:center;
	color:#cfc6b0; transition:transform .15s ease, color .15s ease;
	}
.PointAISkin .ProfileBtn:hover,
.PointAISkin .BellBtn:hover { transform:scale(1.08); color:#f0e6cc; }
.PointAISkin .ProfileBtn { top:12%; left:10%; width:2.8%; aspect-ratio:1/1;
	}
.PointAISkin .BellBtn { top:6.5%; left:50%; transform:translateX(-50%); width:2.4%; aspect-ratio:1/1;
	}
.PointAISkin .ProfileBtn:hover { transform:scale(1.08); }
.PointAISkin .BellBtn:hover { transform:translateX(-50%) scale(1.08); }
.PointAISkin .ProfileBtn svg,
.PointAISkin .BellBtn svg { width:100%; height:100%;
	}

/* Mirror frame — sized to sit EXACTLY inside the gold frame painted on the tablet background */
.PointAISkin .ProfilePic { position:absolute; right:12.6%; top:19.7%;
	width:29.5%; height:58%; padding:0; margin:0; z-index:2;
	border-radius:14px; overflow:hidden;
	background:#000;
	display:flex; align-items:center; justify-content:center;
	}
.PointAISkin .ProfilePic img { width:100%; height:100%; object-fit:cover; display:block;
	}

/* Camera button shown inside the mirror frame until the user opens the camera */
.PointAISkin .CameraBtn { display:flex; align-items:center; justify-content:center;
	width:9.2cqh; height:9.2cqh; padding:0; margin:0;
	background:rgba(232,196,128,0.10);
	border:1.5px solid rgba(232,196,128,0.65);
	border-radius:50%;
	color:#e8c480;
	cursor:pointer; outline:none;
	transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
	box-shadow:0 0 18px rgba(232,196,128,0.18);
	}
.PointAISkin .CameraBtn svg { width:55%; height:55%; stroke:currentColor; fill:none;
	}
.PointAISkin .CameraBtn svg circle:last-child { fill:currentColor;
	}
.PointAISkin .CameraBtn:hover { background:rgba(232,196,128,0.22);
	border-color:rgba(232,196,128,0.95); color:#f5e8c8;
	transform:scale(1.06);
	box-shadow:0 0 26px rgba(232,196,128,0.45);
	}
.PointAISkin .CameraBtn:active { transform:scale(1.02);
	}
.PointAISkin .CameraFrame.CameraOpen .CameraBtn { display:none;
	}

/* Product rows — repositioned over the left green area, items bottom-aligned to shelves */
.PointAISkin .LipsticMainBox { left:18%; top:32%; width:34%; z-index:3;
	}
.PointAISkin .BlusherMainBox { left:18%; top:43.5%; width:34%; z-index:3;
	}
.PointAISkin .EyeshadowMainBox { left:18%; top:55%; width:34%; z-index:3;
	}
.PointAISkin .MascaraMainBox { left:18%; top:66.5%; width:34%; z-index:3;
	}
.PointAISkin .EyelinerMainBox { display:none !important;
	}

/* Each row reserves a fixed height; items sit at the BOTTOM of that box (resting on the shelf line) */
.PointAISkin .owl-carousel .owl-item { display:flex; align-items:flex-end; justify-content:center;
	}
.PointAISkin .owl-carousel .item { width:100%; height:10cqh;
	display:flex; align-items:flex-end; justify-content:center;
	cursor:pointer; transition:transform .18s ease, filter .18s ease;
	margin:0;
	}
.PointAISkin .owl-carousel .item a { display:flex; align-items:flex-end; justify-content:center;
	width:100%; height:100%; line-height:0;
	}
.PointAISkin .owl-carousel .item img { max-height:100%; max-width:100%;
	width:auto !important; height:auto; display:block; margin:0 auto;
	filter:drop-shadow(0 4px 6px rgba(0,0,0,0.55));
	}
.PointAISkin .owl-carousel .item:hover { transform:translateY(-3px);
	}
.PointAISkin .owl-carousel .item:hover img { filter:drop-shadow(0 4px 10px rgba(218,180,110,0.55));
	}

/* Glowing gold shelf lines — sit RIGHT AT the base of each row of items */
.PointAISkin .ShelfLine { position:absolute; height:1px; left:17%; width:36%;
	background:linear-gradient(90deg, transparent 0%, rgba(208,170,100,0.45) 10%, rgba(232,196,128,0.95) 50%, rgba(208,170,100,0.45) 90%, transparent 100%);
	box-shadow:0 0 6px rgba(232,196,128,0.6), 0 0 14px rgba(232,196,128,0.3);
	z-index:2; pointer-events:none;
	}
.PointAISkin .ShelfLine.S1 { top:42%;
	}
.PointAISkin .ShelfLine.S2 { top:53.5%;
	}
.PointAISkin .ShelfLine.S3 { top:65%;
	}
.PointAISkin .ShelfLine.S4 { top:76.5%;
	}

/* Marble shelf under the mirror */
.PointAISkin .MarbleShelf { position:absolute; right:5%; bottom:9%; width:34%; height:4%;
	background:linear-gradient(180deg, #f3ece0 0%, #ddd0b9 55%, #bba98a 100%);
	border-radius:2px; z-index:2;
	box-shadow:0 6px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.7);
	}
.PointAISkin .MarbleShelf::before { content:""; position:absolute; inset:0;
	background:
		radial-gradient(ellipse at 20% 40%, rgba(255,255,255,0.45) 0%, transparent 35%),
		radial-gradient(ellipse at 70% 60%, rgba(170,155,125,0.5) 0%, transparent 40%),
		radial-gradient(ellipse at 45% 30%, rgba(255,255,255,0.3) 0%, transparent 30%);
	border-radius:inherit;
	}

/* Diffuser ornament on the shelf */
.PointAISkin .Diffuser { position:absolute; right:7%; bottom:11%; width:5%; aspect-ratio:1/1.4;
	z-index:3; pointer-events:none;
	}
.PointAISkin .Diffuser .Sticks { position:absolute; left:50%; bottom:42%; transform:translateX(-50%);
	width:75%; height:62%; display:flex; align-items:flex-end; justify-content:space-between;
	}
.PointAISkin .Diffuser .Sticks span { display:block; width:5%; height:100%;
	background:linear-gradient(180deg, #e6d5a8 0%, #9c8654 100%);
	transform-origin:bottom center; border-radius:1px;
	box-shadow:0 0 2px rgba(0,0,0,0.5);
	}
.PointAISkin .Diffuser .Sticks span:nth-child(1) { transform:rotate(-18deg); height:88%; }
.PointAISkin .Diffuser .Sticks span:nth-child(2) { transform:rotate(-8deg); height:94%; }
.PointAISkin .Diffuser .Sticks span:nth-child(3) { transform:rotate(3deg); height:100%; }
.PointAISkin .Diffuser .Sticks span:nth-child(4) { transform:rotate(12deg); height:90%; }
.PointAISkin .Diffuser .Sticks span:nth-child(5) { transform:rotate(22deg); height:85%; }
.PointAISkin .Diffuser .Vase { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
	width:100%; height:42%;
	background:radial-gradient(ellipse at 30% 30%, #e8d4a2 0%, #b8995c 45%, #5e4a23 100%);
	border-radius:50% 50% 45% 45% / 35% 35% 60% 60%;
	box-shadow:0 6px 12px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,255,255,0.5);
	}

/* Selected highlight (gold square) — wraps the actual image */
.PointAISkin .owl-carousel .item.selected img {
	outline:1.5px solid rgba(218,180,110,0.9);
	outline-offset:3px;
	filter:drop-shadow(0 0 8px rgba(232,196,128,0.65)) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
	border-radius:2px;
	}

@media only screen and (max-device-width: 1280px){
	.PointAISkin .TopBar { font-size:1vw; }
	.PointAISkin .TopBar .BatteryPct { font-size:0.95vw; }
	.PointAISkin .TopBar svg { width:1.3vw; height:1.3vw; }
	}