/* Pee App shared storefront design, preview only. */
@font-face{font-family:'Noto Sans Thai';src:url('/peeapp/storefront-v2-20261020/design-v3/assets/thai-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('/peeapp/storefront-v2-20261020/design-v3/assets/thai-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{--movie-paper:#09090c;--movie-surface:#17171e;--movie-text:#f6f4f7;--movie-muted:#b0acb5;--movie-line:#ffffff20;--movie-accent:#ef3154}
html[data-peeapp-theme=light]{--movie-paper:#f7f7fb;--movie-surface:#fff;--movie-text:#24202d;--movie-muted:#625c6d;--movie-line:#dedbe5;--movie-accent:#d92349}
body{font-family:'Noto Sans Thai',Tahoma,sans-serif!important;background:var(--movie-paper)!important;color:var(--movie-text)!important}
.peeapp-services{max-width:1320px;margin:auto;min-height:94px;padding:20px 24px!important;display:flex!important;justify-content:space-between!important;gap:20px!important;background:var(--movie-paper)!important;border:0!important}
.peeapp-services .movie-wordmark{display:flex;align-items:center;gap:10px;font-size:25px!important;padding:0!important;margin:0!important;color:var(--movie-text)!important}.peeapp-services .movie-wordmark:before{display:none!important}.movie-wordmark img{width:54px;height:54px;object-fit:contain}.movie-wordmark small{display:block;font-size:9px;letter-spacing:2px;color:var(--movie-muted);font-weight:700}.movie-service-switch{display:flex;gap:4px;padding:5px;border:1px solid var(--movie-line);border-radius:30px;background:var(--movie-surface)}.peeapp-services .movie-service-switch a{font-size:13px;padding:12px 20px!important;margin:0!important;font-weight:500!important;color:var(--movie-text)!important}.peeapp-services .movie-service-switch a:first-child:before{display:none!important}.peeapp-services .movie-service-switch a[aria-current]{color:white!important;background:var(--movie-accent)!important}.movie-account-link{font-size:12px!important;white-space:nowrap}
body>header{position:relative!important;top:auto!important;max-width:1280px;margin:auto;height:auto!important;min-height:56px;padding:8px 24px 16px!important;gap:20px;background:var(--movie-paper)!important;border:0!important;backdrop-filter:none!important}body>header>.logo,body>header .avatar,body>header .vip-button{display:none!important}body>header nav{display:flex!important;gap:24px;background:transparent!important;font-size:13px;flex:1}body>header nav a,body>header nav .navlink{padding:10px 0!important;color:var(--movie-muted)!important;white-space:nowrap}body>header nav a.selected{color:var(--movie-accent)!important}body>header nav a.selected:after{bottom:0}.head-actions{gap:10px!important}.demo-banner{max-width:1280px;margin:0 auto 16px;padding:10px 24px!important;border:1px solid var(--movie-line);border-radius:12px;background:var(--movie-surface)!important;color:var(--movie-muted)!important;text-align:left;font-size:12px!important}
.hero{max-width:1280px;height:440px!important;min-height:0!important;margin:0 auto 48px!important;border-radius:28px;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,#66142b,#190a12 65%,#10090e)!important}.hero-art{display:none!important}.hero-image{inset:24px 5% 24px auto!important;width:35%!important;height:calc(100% - 48px)!important;object-fit:contain!important;opacity:1!important;filter:none!important;border-radius:18px;transform:none!important}.hero-shade{background:linear-gradient(90deg,#10090e 0%,#10090e88 48%,transparent 70%)!important}.hero-copy{left:48px!important;top:45px!important;width:49%!important}.hero-copy h1{font-size:clamp(28px,3.2vw,44px)!important;line-height:1.35!important;letter-spacing:-.7px!important;margin:14px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-copy>p:not(.hero-foot){font-size:14px!important;line-height:1.85!important;color:#d3c8ce!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-meta{margin-top:12px!important}.hero-buttons{margin-top:24px!important}.hero-foot{font-size:11px!important}.hero-switch{bottom:22px!important;left:48px!important}.hero-thumb{width:30px!important}.primary{background:var(--movie-accent)!important;color:#fff!important;border-color:transparent!important;border-radius:28px!important}.secondary{border-radius:24px!important}.provider-section,.browse,.plans{max-width:1280px;padding-left:24px!important;padding-right:24px!important}.provider-section{margin-top:0!important}.provider-label{font-size:13px;color:var(--movie-muted)!important;margin-bottom:12px}.providers{gap:10px}.brand{background:var(--movie-surface)!important;color:var(--movie-text)!important;border:1px solid var(--movie-line)!important;border-radius:16px!important;height:60px;font-size:17px}.brand.active{border-color:var(--movie-accent)!important}.browse{margin-top:36px!important}.browse-top{gap:20px;margin-bottom:14px!important}.tabs button{border:1px solid var(--movie-line)!important;background:var(--movie-surface)!important;color:var(--movie-text)!important;border-radius:22px!important;min-height:44px}.tabs button.active{background:var(--movie-accent)!important;color:white!important}.searchbox{border-radius:12px!important;background:var(--movie-surface)!important;border:1px solid var(--movie-line)!important;min-height:48px}.searchbox input{color:var(--movie-text)!important}.search-scope{color:var(--movie-muted)!important}.shelf{padding-top:24px;border-top:1px solid var(--movie-line);margin-bottom:36px!important}.section-head h2{font-size:23px!important;color:var(--movie-text)!important;letter-spacing:0}.section-head h2 small{font-size:11px!important;letter-spacing:0!important;color:var(--movie-muted)!important}.rail{gap:18px!important}.card{flex-basis:calc((100% - 90px)/6)!important}.poster{border-radius:16px!important;border:1px solid var(--movie-line)!important;box-shadow:0 8px 20px #00000012!important}.card h3{font-size:14px!important;line-height:1.55!important;color:var(--movie-text)!important;font-weight:700}.card p{color:var(--movie-muted)!important}.tag{background:#10090edb!important;color:white!important;border-radius:8px!important;font-size:10px!important}.poster-preview{display:none!important}.free-strip{max-width:1232px;margin:24px auto 48px!important;border:1px solid var(--movie-line);border-radius:20px;background:var(--movie-surface)!important;color:var(--movie-text)!important}.free-strip .free-number{color:var(--movie-accent)!important}.plans{padding-top:24px!important}.plan-heading h2{font-size:32px!important}.platform-plan,.all-platform{background:var(--movie-surface)!important;border:1px solid var(--movie-line)!important;border-radius:20px!important}.platform-title h3{color:var(--movie-text)!important}.plan-benefit,.platform-caption,.plan-heading p,.plan-note{color:var(--movie-muted)!important}.story-details{background:var(--movie-surface)!important;color:var(--movie-text)!important}.details-copy h2{color:var(--movie-text)!important}.story-synopsis,.details-meta,.details-access{color:var(--movie-muted)!important}.details-cover{border-radius:18px!important}footer{max-width:1280px;margin:auto;border-top:1px solid var(--movie-line);color:var(--movie-muted)!important}.mobile-nav{background:var(--movie-surface)!important;border-color:var(--movie-line)!important}
@media(max-width:1000px){.card{flex-basis:calc((100% - 54px)/4)!important}.hero-copy{left:32px!important}.hero-switch{left:32px!important}.peeapp-services{gap:12px!important}}
@media(max-width:760px){.peeapp-services{padding:14px 18px!important;flex-wrap:wrap;min-height:0;gap:12px!important}.peeapp-services .movie-wordmark{width:auto!important;font-size:22px!important}.movie-wordmark img{width:42px;height:42px}.movie-account-link{margin-left:auto!important}.movie-service-switch{order:3;width:100%;justify-content:center}.peeapp-services .movie-service-switch a{flex:1;text-align:center;padding:10px!important;width:auto!important;font-size:13px!important}body>header{padding:2px 18px 12px!important;min-height:44px;justify-content:flex-end}body>header nav{display:none!important}.head-actions{width:100%;justify-content:space-between}.search-toggle{display:block!important}.demo-banner{margin:0 16px 12px;padding:9px 12px!important;font-size:11px!important}.hero{margin:0 16px 28px!important;height:490px!important;border-radius:20px}.hero-image{top:18px!important;right:12px!important;width:44%!important;height:235px!important;opacity:.85!important}.hero-shade{background:linear-gradient(0deg,#10090e 28%,#10090e55 80%)!important}.hero-copy{top:210px!important;left:22px!important;width:calc(100% - 44px)!important}.hero-copy .eyebrow{display:none}.hero-copy h1{font-size:27px!important;margin:10px 0!important}.hero-meta{margin:0!important;font-size:11px}.hero-copy>p:not(.hero-foot){font-size:12px!important;-webkit-line-clamp:2}.hero-buttons{margin-top:16px!important}.hero-buttons button{font-size:12px;padding:12px 18px}.hero-foot{display:none}.hero-switch{left:22px!important;bottom:18px!important}.provider-section,.browse,.plans{padding-left:18px!important;padding-right:18px!important}.providers{gap:8px}.brand{font-size:12px!important;height:50px!important;gap:5px}.brand-logo{width:22px!important;height:22px!important}.browse{margin-top:26px!important}.browse-top{display:flex;flex-direction:column;align-items:stretch}.searchbox{order:-1;width:100%;box-sizing:border-box}.searchbox input{width:100%!important}.tabs{display:flex;overflow:auto;flex-wrap:nowrap;gap:8px;padding-bottom:5px}.tabs button{flex-shrink:0;padding:10px 14px}.section-head h2{font-size:20px!important}.rail{gap:12px!important}.card{flex-basis:calc((100% - 24px)/2.35)!important}.poster{border-radius:13px!important}.card h3{font-size:12px!important}.free-strip{margin:16px 18px 32px!important;padding:22px!important}.free-strip .free-number{display:none}.plan-heading h2{font-size:26px!important}.story-details{padding:24px 20px!important}.details-copy h2{font-size:24px!important}.public-footer-links{gap:12px}}
@media(prefers-reduced-motion:reduce){.hero-image,.card{animation:none!important;transition:none!important}}
/* Match all supporting labels to shared light/dark text tokens. */
.story-details .details-brand,.story-details .details-meta,.story-details .details-meta span,.story-details .details-copy h3{color:var(--movie-muted)!important}
html[data-peeapp-theme=light] .story-details .details-brand,html[data-peeapp-theme=light] .story-details .details-meta span,html[data-peeapp-theme=light] .story-details .details-copy h3{color:#625c6d!important}
.mood-filters button,[data-mood]{background:var(--movie-surface)!important;color:var(--movie-muted)!important;border:1px solid var(--movie-line)!important;border-radius:22px!important;min-height:42px}
[data-mood].active{border-color:var(--movie-accent)!important;color:var(--movie-accent)!important}
@media(max-width:760px){.hero-image{right:4%!important;width:65%!important;opacity:1!important}.hero-copy .hero-foot{display:none!important}.story-details .details-meta{margin-bottom:18px}.story-details .details-brand{font-size:13px}}
/* Let the artwork become part of the banner instead of a floating poster. */
.hero{background:#10090e!important;isolation:isolate}
.hero-image{inset:0 0 0 auto!important;width:58%!important;height:100%!important;object-fit:cover!important;object-position:center 30%!important;border-radius:0!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%);mask-image:linear-gradient(90deg,transparent 0%,#000 35%)}
.hero-shade{background:linear-gradient(90deg,#10090e 0%,#10090ef5 34%,#10090e85 53%,transparent 76%),linear-gradient(0deg,#10090eab,transparent 45%)!important}
@media(max-width:760px){
 .hero-image{inset:0 0 auto!important;width:100%!important;height:310px!important;object-position:center 27%!important;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
 .hero-shade{background:linear-gradient(0deg,#10090e 36%,#10090e30 70%,transparent 100%)!important}
}

/* Vector play marks never invoke the platform emoji font. */
.poster:after{content:''!important;background:none!important;inset:50% auto auto 50%!important;width:24px!important;height:28px!important;transform:translate(-40%,-50%);clip-path:polygon(0 0,100% 50%,0 100%);background-color:#fff!important;pointer-events:none}
.play-icon{display:block;width:22px;height:22px}.continue-overlay{color:#fff!important}
.continue-content h3{color:#fff!important}.continue-content p{color:#b9bdc8!important}
@media(hover:none){.poster:after{display:none!important}}

/* Stable monochrome play marks; never Unicode emoji presentation on iOS. */
#heroPlay:not(:disabled)::before,.details-actions>.primary::before{content:'';display:inline-block;width:11px;height:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:-1px;margin-right:9px}
.poster::after{content:''!important}
html[data-peeapp-theme="light"] .story-details .details-facts{color:#625c69!important}
html[data-peeapp-theme="light"] .continue-content h3{color:#fff!important}

/* Service switch: identical columns and optical alignment on both storefronts. */
.brand-header nav,.peeapp-services .movie-service-switch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important;padding:5px!important;box-sizing:border-box;}
.brand-header nav>a,.peeapp-services .movie-service-switch>a{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box;min-width:0;width:100%!important;margin:0!important;text-align:center!important;line-height:1.4!important;font-size:13px!important;font-weight:500!important;padding:12px 20px!important;border-radius:24px!important;white-space:nowrap;}
.brand-header nav>a:before,.peeapp-services .movie-service-switch>a:before{display:none!important;}
@media(max-width:760px){
 .brand-header{flex-wrap:wrap;}.brand-header,.peeapp-services{padding-left:16px!important;padding-right:16px!important;}
 .brand-header nav,.peeapp-services .movie-service-switch{order:3;width:100%!important;flex-basis:100%;}
 .brand-header nav>a,.peeapp-services .movie-service-switch>a{height:44px;min-height:44px;padding:10px!important;}
}