:root{--primary-color:#0767e8;--header-height:84px;--piko-ink:#101827;--piko-blue:#086bed;--piko-pale:#eaf6ff}body{background:#fff;color:var(--piko-ink);padding-top:84px}a{color:inherit}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header.piko-site-header{height:84px;background:#fff;box-shadow:0 1px 14px rgba(18,71,132,.1);padding:0 max(22px,calc((100vw - 1480px)/2));gap:26px;justify-content:space-between}.piko-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;color:#121826}.piko-brand img{width:48px;height:48px;object-fit:contain}.piko-brand strong{font-size:24px;letter-spacing:-1.2px;font-weight:950;line-height:1;display:block}.piko-brand strong span,.piko-footer strong span{color:#1465e7}.piko-brand small{font-size:8.5px;font-weight:800;letter-spacing:.2px;display:block;margin-top:3px}.piko-main-nav{display:flex;gap:6px;align-items:center;white-space:nowrap}.piko-main-nav a{font-size:14px;font-weight:700;text-decoration:none;padding:12px 15px;border-radius:16px}.piko-main-nav a:hover,.piko-main-nav a:first-child{background:#16191f;color:#fff}.piko-header-search.search-form{margin:0;min-width:230px;max-width:360px;width:27vw;height:46px;border-radius:27px;border:1px solid #bad5ff;box-shadow:0 2px 10px #b5d7ff8c;display:flex;align-items:center}.piko-header-search .search-input{width:100%;background:none;font-size:13px}.piko-header-search .search-btn{background:none;color:#0f1b2c;border:none}.piko-site-header .mobile-menu-btn{display:none}.mobile-menu{top:84px}
.piko-home{max-width:none;padding:0}.piko-hero{min-height:510px;background:#91d7ff url('/template/pc/skin/images/piko-hero.png') center center/cover no-repeat;display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden}.piko-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,119,222,.25) 0%,rgba(151,215,255,.06) 51%,transparent 70%);z-index:-1}.piko-hero-content{width:min(1450px,100%);padding:30px 3.5vw;margin:0 auto}.piko-kicker{font-size:18px;color:#091e3b;letter-spacing:3px;font-weight:950;text-shadow:0 2px 4px #fff}.piko-hero h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(58px,6.6vw,110px);font-style:italic;letter-spacing:-2px;line-height:.85;margin:28px 0 17px;width:max-content;max-width:60%;transform:rotate(-2deg);color:#fff;-webkit-text-stroke:2px #071d41;text-shadow:4px 5px 0 #1164d3,7px 9px 0 #073263,9px 12px 9px #064faca8}.piko-hero h1 span{display:block}.piko-tagline{font-size:21px;font-weight:900;max-width:540px;color:#112548;text-shadow:0 1px 2px #fff}.piko-hero-search{margin-top:26px;width:min(690px,58%);height:59px;display:flex;align-items:center;background:#fff;border:2px solid #348bff;box-shadow:0 4px 15px #3676c97d;border-radius:32px;overflow:hidden;padding:5px}.piko-hero-search input{border:0!important;box-shadow:none!important;outline:0;font-size:16px;flex:1;min-width:0;padding:0 17px;background:transparent}.piko-hero-search button{height:100%;min-width:135px;border:0;background:#1b2029;color:#fff;border-radius:30px;font-size:16px;font-weight:800;cursor:pointer}.piko-trending{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;font-size:13px;font-weight:700}.piko-trending a{background:#e3f2ffbd;text-decoration:none;border-radius:16px;padding:6px 12px}.piko-trending a:hover{background:#fff}
.piko-categories,.piko-products,.piko-promos,.piko-benefits{max-width:1480px;margin-left:auto;margin-right:auto}.piko-categories{padding:23px 18px}.piko-section-heading{display:flex;align-items:baseline;gap:18px;margin:0 5px 15px}.piko-section-heading h2,.piko-products-heading h2{font-size:28px;color:#0d1b2a}.piko-section-heading p,.piko-products-heading p{font-size:14px;color:#52647d}.piko-category-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}.piko-category-card{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px;text-align:center;border:1px solid #d9eaff;border-radius:18px;text-decoration:none;background:linear-gradient(145deg,#e7f7ff,#f9fdff);box-shadow:0 5px 15px #1f71d513;transition:transform .2s,box-shadow .2s}.piko-category-card:nth-child(2n){background:linear-gradient(145deg,#fff6ec,#f8fbff)}.piko-category-card:nth-child(3n){background:linear-gradient(145deg,#fff0f3,#f7fbff)}.piko-category-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px #1f71d531}.piko-category-card img{width:100%;height:112px;object-fit:contain;mix-blend-mode:multiply}.piko-category-card span:last-child{font-size:13px;font-weight:850;line-height:1.15}.piko-category-card small{font-size:10px}.piko-category-symbol{display:grid;place-items:center;height:112px;font-size:65px}.piko-benefits{display:grid;grid-template-columns:repeat(4,1fr);padding:10px 18px 22px}.piko-benefits div{display:flex;align-items:center;gap:11px;border-right:1px solid #c8dafa;padding:8px 20px}.piko-benefits div:last-child{border:0}.piko-benefits strong{font-size:26px;color:#1268e8}.piko-benefits span{font-size:15px;font-weight:750}.piko-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 18px}.piko-promo{height:170px;padding:20px;border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;position:relative;overflow:hidden}.piko-promo span{font-size:12px;font-weight:900;letter-spacing:2px}.piko-promo strong{font-family:Impact,'Arial Black',sans-serif;font-size:32px;line-height:1;margin-top:10px}.piko-promo em{background:#171e2c;color:#fff;padding:10px 16px;border-radius:20px;font-style:normal;font-weight:800;font-size:13px;margin-top:auto}.piko-promo-new{background:linear-gradient(110deg,#fff0d9,#d3edff)}.piko-promo-sheet{background:linear-gradient(110deg,#c1e8ff,#8acbff)}.piko-promo-guides{background:linear-gradient(110deg,#eee0ff,#cad3ff)}.piko-products{padding:28px 18px 60px}.piko-products-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.piko-products-heading>a{border:1px solid #1968eb;border-radius:24px;padding:11px 20px;color:#075bd7;text-decoration:none;font-weight:800;font-size:14px}.piko-products .products-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.piko-products .product-card{min-width:0}.piko-products .product-image img{width:100%;height:180px;object-fit:cover}
.piko-footer{background:#101b2c;color:#eaf2ff;padding:40px 30px 15px;font-size:14px}.piko-footer-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:2fr 1fr 2fr;gap:48px}.piko-footer strong{font-size:24px}.piko-footer p{color:#c1cfe0;max-width:450px;line-height:1.6;margin-top:10px}.piko-footer h2{font-size:17px;margin-bottom:12px}.piko-footer a{color:#eaf2ff;display:block;margin-bottom:9px}.piko-footer-bottom{max-width:1400px;margin:30px auto 0;border-top:1px solid #3a4b61;padding-top:14px}.piko-footer-bottom a{display:inline}
@media(max-width:1150px){.piko-main-nav a{padding:10px 8px;font-size:13px}.piko-category-grid{grid-template-columns:repeat(5,1fr)}.piko-header-search{max-width:250px}.piko-products .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){body{padding-top:66px}header.piko-site-header{height:66px;padding:0 15px;gap:8px}.piko-brand img{width:41px;height:41px}.piko-brand strong{font-size:20px}.piko-brand small{font-size:7px}.piko-main-nav,.piko-header-search{display:none!important}.piko-site-header .mobile-menu-btn{display:flex;margin-left:auto}.mobile-menu{top:66px}.mobile-nav{display:flex;flex-direction:column}.mobile-nav a{padding:10px 20px;text-decoration:none}.piko-hero{min-height:510px;align-items:flex-start;background-position:64% center}.piko-hero:before{background:linear-gradient(180deg,rgba(220,246,255,.88) 0%,rgba(217,243,255,.85) 47%,rgba(217,243,255,0) 83%)}.piko-hero-content{padding:26px 18px}.piko-kicker{font-size:11px;letter-spacing:1.5px}.piko-hero h1{font-size:clamp(48px,13vw,68px);max-width:100%;margin:18px 0 15px;text-shadow:3px 4px 0 #1164d3,5px 6px 0 #073263;-webkit-text-stroke:1.3px #071d41}.piko-tagline{font-size:15px;max-width:330px}.piko-hero-search{margin-top:18px;width:100%;height:50px}.piko-hero-search input{font-size:13px;padding:0 10px}.piko-hero-search button{min-width:84px;font-size:13px}.piko-trending{font-size:11px}.piko-trending a{padding:5px 8px}.piko-categories{padding:18px 12px}.piko-section-heading{display:block}.piko-section-heading h2{font-size:23px}.piko-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.piko-category-card{height:145px}.piko-benefits{grid-template-columns:repeat(2,1fr);padding:6px 10px}.piko-benefits div{padding:8px 5px;gap:5px}.piko-benefits strong{font-size:18px}.piko-benefits span{font-size:11px}.piko-promos{grid-template-columns:1fr;padding:10px 12px}.piko-promo{height:145px}.piko-products{padding:24px 12px 40px}.piko-products-heading h2{font-size:23px}.piko-products-heading>a{font-size:11px;padding:9px}.piko-products .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.piko-products .product-image img{height:150px}.piko-footer-grid{grid-template-columns:1fr;gap:20px}.piko-footer{padding:30px 18px 14px}}
.piko-empty-category{max-width:740px;margin:32px auto;padding:28px;border:1px solid #bad9fc;border-radius:18px;background:#f3f9ff;text-align:center;font-size:18px;line-height:1.55}.piko-empty-category a{color:#0962df;font-weight:800}

.products-grid:has(.product-card) + .piko-empty-category{display:none}

/* Phase 7: sitewide front-end contact control. */
.piko-whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:900;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 18px;border-radius:999px;background:#188b59;color:#fff!important;text-decoration:none;font-size:15px;font-weight:800;box-shadow:0 9px 26px rgba(18,75,62,.25);border:2px solid #fff;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}
.piko-whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(18,75,62,.32)}
.piko-whatsapp-float:focus-visible{outline:3px solid #0767e8;outline-offset:3px}
.piko-whatsapp-float i{font-size:22px;line-height:1}
body:has(.platform-modal[style*="display: flex"]) .piko-whatsapp-float{opacity:0;pointer-events:none}
@media(max-width:760px){.piko-whatsapp-float{right:14px;bottom:max(16px,env(safe-area-inset-bottom));min-height:48px;padding:0 15px;font-size:14px}.piko-whatsapp-float i{font-size:21px}}

/* Phase 7 mobile overflow fix for Eyou category and search chrome. */
@media(max-width:760px){header.piko-site-header .mobile-menu-btn{width:42px;min-width:42px;height:42px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}header.piko-site-header .mobile-menu-btn span{display:block;width:22px;height:2px;margin:0;flex:none}.pagination{flex-wrap:wrap;padding:0 12px;box-sizing:border-box}.pagination .prev,.pagination .next{min-width:74px}}

/* Stage 9 shared header controls and persistent dark palette. */
.piko-home-tools{display:flex;align-items:center;gap:14px;white-space:nowrap;color:#101827}.piko-locale{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:default}.piko-locale .fa-globe{font-size:20px}.piko-home-tools .piko-moon{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;cursor:pointer}.piko-home-tools .piko-moon:hover,.piko-home-tools .piko-moon:focus-visible{background:#e5f1ff;outline:2px solid #2077ef;outline-offset:2px}.piko-mobile-locale{display:none}
@media(max-width:760px){.piko-site-header .piko-home-tools{display:flex!important;margin-left:auto;gap:0}.piko-site-header .piko-home-tools .piko-locale{display:none}.piko-site-header .piko-home-tools .piko-moon{width:38px;height:38px}.piko-site-header .mobile-menu-btn{margin-left:0!important}.piko-mobile-locale{display:block;padding:12px 20px;font-size:13px;font-weight:700;color:#52647d;border-bottom:1px solid #d9eaff}}
html[data-piko-theme="dark"]{color-scheme:dark;--piko-ink:#edf4ff;--piko-pale:#172941}html[data-piko-theme="dark"] body{background:#0d1727;color:#edf4ff}html[data-piko-theme="dark"] .piko-site-header,html[data-piko-theme="dark"] .mobile-menu,html[data-piko-theme="dark"] .piko-footer{background:#13243a;color:#edf4ff}html[data-piko-theme="dark"] .piko-brand,html[data-piko-theme="dark"] .piko-main-nav a,html[data-piko-theme="dark"] .piko-home-tools,html[data-piko-theme="dark"] .mobile-nav a{color:#edf4ff}html[data-piko-theme="dark"] .piko-header-search,html[data-piko-theme="dark"] .search-form,html[data-piko-theme="dark"] input,html[data-piko-theme="dark"] select,html[data-piko-theme="dark"] textarea{background:#1a304a!important;color:#f4f8ff!important;border-color:#48617e!important}html[data-piko-theme="dark"] input::placeholder{color:#b5c7dd}html[data-piko-theme="dark"] .piko-header-search .search-btn{color:#f4f8ff}html[data-piko-theme="dark"] .piko-section-heading h2,html[data-piko-theme="dark"] .piko-products-heading h2,html[data-piko-theme="dark"] h1,html[data-piko-theme="dark"] h2,html[data-piko-theme="dark"] h3,html[data-piko-theme="dark"] .product-title{color:#f4f8ff}html[data-piko-theme="dark"] .piko-section-heading p,html[data-piko-theme="dark"] .piko-products-heading p,html[data-piko-theme="dark"] .piko-mobile-locale{color:#bdcfe4}html[data-piko-theme="dark"] .product-card,html[data-piko-theme="dark"] .product-info,html[data-piko-theme="dark"] .product-detail,html[data-piko-theme="dark"] .product-content,html[data-piko-theme="dark"] .platform-modal-content,html[data-piko-theme="dark"] .modal-content,html[data-piko-theme="dark"] article,html[data-piko-theme="dark"] .piko-guide-card,html[data-piko-theme="dark"] .piko-category-card{background-color:#1b3049!important;color:#f4f8ff!important;border-color:#3d5876!important}html[data-piko-theme="dark"] .piko-benefits,html[data-piko-theme="dark"] .piko-products,html[data-piko-theme="dark"] .piko-categories{color:#edf4ff}html[data-piko-theme="dark"] .piko-benefits span,html[data-piko-theme="dark"] .product-stats,html[data-piko-theme="dark"] .product-detail p{color:#c8d9ea}html[data-piko-theme="dark"] .piko-home-tools .piko-moon:hover{background:#294765}html[data-piko-theme="dark"] .piko-main-nav a:hover{background:#2c5181}html[data-piko-theme="dark"] .piko-category-card img{mix-blend-mode:normal}
html[data-piko-theme="dark"] body .piko-site-header{background:#13243a;color:#edf4ff}
html[data-piko-theme="dark"] body .piko-benefits div,html[data-piko-theme="dark"] body .piko-benefits span,html[data-piko-theme="dark"] body .piko-benefits strong{color:#edf4ff}
html[data-piko-theme="dark"] body .piko-home-tools button{color:#edf4ff}
html[data-piko-theme="dark"] body .piko-header-search .search-btn{color:#edf4ff}
/* Product detail and platform modal keep their existing light surfaces. */
html[data-piko-theme="dark"] .product-title[itemprop="name"]{color:#172338!important}
html[data-piko-theme="dark"] .platform-content,html[data-piko-theme="dark"] .platform-header,html[data-piko-theme="dark"] .platform-list{background:#fff;color:#172338}
html[data-piko-theme="dark"] .platform-header h3,html[data-piko-theme="dark"] .platform-content h3{color:#172338!important}
html[data-piko-theme="dark"] .breadcrumb,html[data-piko-theme="dark"] .breadcrumb a{color:#bdcfe4}
html[data-piko-theme="dark"] .related-products h2,html[data-piko-theme="dark"] .popular-products h2{color:#edf4ff!important}
html[data-piko-theme="dark"] .piko-site-header .mobile-menu-btn span{background:#edf4ff!important}
html[data-piko-theme="dark"] [class*="breadcrumb"],html[data-piko-theme="dark"] [class*="breadcrumb"] a,html[data-piko-theme="dark"] [class*="crumb"] a{color:#c5d8ed!important}

/* Category and search results share the direct main product list. Keep their
   cards in two columns on phones without changing detail-page recommendations. */
@media (max-width:760px){
  main > .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:10px;
  }
  main > .products-grid > .product-card{min-width:0}
  main > .products-grid .product-info{min-width:0;padding:10px}
  main > .products-grid .product-title{overflow-wrap:anywhere}
  main > .products-grid .product-stats .price{overflow-wrap:anywhere}
}