.itop-hero-component{--yellow:#ffd400;--dark:#191c20;--panel:#25292e;--paper:#f5f4ef;--ink:#171b1e;--muted:#656c72;--line:#d9dcd7;--white:#fff;--radius:6px}















@media(max-width:1080px) and (min-width:781px){






}
@media(max-width:780px){





}
.itop-hero-component, .itop-hero-component *{box-sizing:border-box}
.itop-hero-component{scroll-behavior:smooth;scroll-padding-top:98px}
.itop-hero-component{margin:0;background:var(--dark);color:var(--ink);font:16px/1.5 Arial,"Segoe UI",sans-serif}
.itop-hero-component button,.itop-hero-component input,.itop-hero-component select{font:inherit}
.itop-hero-component button,.itop-hero-component a,.itop-hero-component input,.itop-hero-component select,.itop-hero-component summary{-webkit-tap-highlight-color:transparent}
.itop-hero-component button,.itop-hero-component a{touch-action:manipulation}
.itop-hero-component button{cursor:pointer}
.itop-hero-component a{color:inherit;text-decoration:none}
.itop-hero-component button{color:inherit}
.itop-hero-component img{max-width:100%;display:block}
.itop-hero-component button:focus-visible,.itop-hero-component a:focus-visible,.itop-hero-component input:focus-visible,.itop-hero-component select:focus-visible,.itop-hero-component summary:focus-visible{outline:3px solid #b18200;outline-offset:4px}
.itop-hero-component button:disabled{cursor:not-allowed;opacity:.55}
.itop-hero-component h1,.itop-hero-component h2,.itop-hero-component h3,.itop-hero-component p{margin:0}
.itop-hero-component h1,.itop-hero-component h2,.itop-hero-component h3{line-height:1.13;letter-spacing:-.035em}
.itop-hero-component h2{font-size:34px;font-weight:700}
.itop-hero-component h3{font-size:21px}
.itop-hero-component .container{width:min(1160px,calc(100% - 80px));margin-inline:auto}











.itop-hero-component .button{display:inline-flex;align-items:center;justify-content:center;gap:23px;min-height:48px;padding:13px 22px;border:1px solid transparent;font-size:14px;font-weight:700;line-height:1.25;border-radius:2px;transition:background .18s,transform .18s}
.itop-hero-component .button span{font-size:19px;font-weight:400}
.itop-hero-component .button:hover{transform:translateY(-1px)}
.itop-hero-component .button-yellow{background:var(--yellow);color:#161718}
.itop-hero-component .button-yellow:hover{background:#ffe34a}
.itop-hero-component .button-outline{color:#fff;border-color:#a8aaa7;background:rgba(16,20,21,.3)}
.itop-hero-component .button-outline:hover{background:#33393e}




.itop-hero-component .hero{position:relative;color:#fff;background:linear-gradient(90deg,rgba(7,12,13,.94) 0%,rgba(7,12,13,.84) 35%,rgba(7,12,13,.2) 80%),url("https://ueeshop.ly200-cdn.com/u_file/UPBD/UPBD225/2607/27/photo/ITOP-Cafe-PC-Homepage-Hero-1920x1080.png?x-oss-process=image/format,webp/quality,q_85/resize,m_lfit,h_0,w_1280") center 48%/cover no-repeat}
.itop-hero-component .hero-inner{position:relative;min-height:460px;display:flex;align-items:center;padding-block:48px}
.itop-hero-component .hero-copy{position:relative;z-index:1;max-width:710px}
.itop-hero-component .eyebrow{font-size:10px;line-height:1.5;letter-spacing:.16em;font-weight:700;color:var(--yellow);margin-bottom:16px}
.itop-hero-component .hero .eyebrow{display:flex;align-items:center;gap:9px;color:#e9e8dd}
.itop-hero-component .eyebrow>span{width:16px;height:2px;background:var(--yellow)}
.itop-hero-component h1{font-size:55px;letter-spacing:-.045em;line-height:1.04;font-weight:700}
.itop-hero-component .hero-description{color:#d8dcdb;max-width:530px;font-size:15px;line-height:1.65;margin-top:21px}
.itop-hero-component .hero-actions{display:flex;gap:12px;margin-top:27px}
.itop-hero-component .text-link{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:inherit}
.itop-hero-component .text-link:hover{text-decoration:underline;text-underline-offset:5px}
.itop-hero-component .hero-wholesale{font-size:12px;color:#e1e3df;margin-top:22px}











































.itop-hero-component summary{list-style:none;cursor:pointer}
.itop-hero-component summary::-webkit-details-marker{display:none}


.itop-hero-component details[open]>summary>span{transform:rotate(45deg)}














































































.itop-hero-component footer{color:#aab2ae;padding:38px 0 20px}





.itop-hero-component dialog{border:0;border-radius:7px;padding:32px;background:var(--paper);color:var(--ink);width:min(620px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;box-shadow:0 25px 90px #0006}
.itop-hero-component dialog::backdrop{background:#101719c9;backdrop-filter:blur(5px)}













@media(min-width:1450px){.itop-hero-component .container{width:min(1260px,calc(100% - 120px))}
.itop-hero-component .hero-inner{min-height:490px}



.itop-hero-component .hero h1{font-size:61px}}
@media(max-width:1080px){.itop-hero-component .container{width:calc(100% - 48px)}



.itop-hero-component .hero-inner{min-height:450px}
.itop-hero-component .hero h1{font-size:47px}
.itop-hero-component .hero-description{max-width:480px;font-size:14px}


















}
@media(max-width:780px){.itop-hero-component{scroll-padding-top:80px}
.itop-hero-component .container{width:calc(100% - 36px)}









.itop-hero-component .hero{background-position:61% center}
.itop-hero-component .hero-inner{min-height:405px;padding:37px 0 40px;align-items:flex-start}
.itop-hero-component .hero-copy{max-width:100%}
.itop-hero-component .hero .eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:20px}
.itop-hero-component .hero h1{font-size:41px;line-height:1.07;max-width:510px}
.itop-hero-component .hero-description{max-width:450px;font-size:13px;line-height:1.7;margin-top:18px}
.itop-hero-component .hero-actions{gap:9px;margin-top:24px;flex-wrap:wrap}
.itop-hero-component .hero-actions .button{min-height:44px;font-size:11px;padding:12px 14px;gap:15px}
.itop-hero-component .hero-wholesale{font-size:10px;margin-top:20px;text-align:left;max-width:320px}























































































.itop-hero-component footer{padding-top:30px}

.itop-hero-component dialog{padding:24px}




}
@media(max-width:370px){.itop-hero-component .container{width:calc(100% - 28px)}
.itop-hero-component .hero h1{font-size:36px}
.itop-hero-component .hero-actions .button{padding-inline:11px;gap:8px;font-size:10px}












}
@media(prefers-reduced-motion:reduce){.itop-hero-component{scroll-behavior:auto}
.itop-hero-component, .itop-hero-component *{transition:none!important}}
.itop-hero-component{display:block;width:100%;isolation:isolate;}

/* Extend the same image behind the existing transparent header and hero. */
.itop-hero-component{padding-top:120px;background:linear-gradient(90deg,rgba(7,12,13,.94) 0%,rgba(7,12,13,.84) 35%,rgba(7,12,13,.2) 80%),url("https://ueeshop.ly200-cdn.com/u_file/UPBD/UPBD225/2607/27/photo/ITOP-Cafe-PC-Homepage-Hero-1920x1080.png?x-oss-process=image/format,webp/quality,q_85/resize,m_lfit,h_0,w_1280") center 48%/cover no-repeat}
.itop-hero-component .hero{background:none}
@media(max-width:780px){.itop-hero-component{padding-top:96px}}