/* Shared customer presentation. No administrator or transaction behavior. */
body[data-ui-page]{--ui-ink:#172f43;--ui-muted:#586f82;--ui-blue:#176be8;--ui-border:#dce6ee;--ui-pink:#eb6285;--ui-shadow:0 8px 28px #153c6510;background:#f4f7fb;color:var(--ui-ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body[data-ui-page] *,body[data-ui-page] *:before,body[data-ui-page] *:after{box-sizing:border-box}
body[data-ui-page] main{max-width:860px;padding:22px 24px;margin:0 auto}
body[data-ui-page] h1,body[data-ui-page] h2,body[data-ui-page] h3{color:var(--ui-ink);letter-spacing:-.045em;word-break:keep-all;line-height:1.3}
body[data-ui-page] h1{font-size:30px}body[data-ui-page] h2{font-size:23px}body[data-ui-page] h3{font-size:19px}
body[data-ui-page] p{line-height:1.65}body[data-ui-page] .muted,body[data-ui-page] .meta{color:var(--ui-muted)}
body[data-ui-page] button,body[data-ui-page] input,body[data-ui-page] select,body[data-ui-page] textarea{font-family:inherit}
body[data-ui-page] button,body[data-ui-page] a{touch-action:manipulation}
body[data-ui-page] button{cursor:pointer}body[data-ui-page] button:disabled{cursor:default}
body[data-ui-page] :focus-visible{outline:3px solid #4b99f4;outline-offset:3px}
body[data-ui-page] .field,body[data-ui-page] .search input{font-size:16px;min-height:50px;background:#f9fbfe;border:1px solid #cedce8;border-radius:12px;padding:13px 14px;color:var(--ui-ink)}
body[data-ui-page] input::placeholder,body[data-ui-page] textarea::placeholder{color:#718395;opacity:1}
body[data-ui-page] .field:focus,body[data-ui-page] .search input:focus{background:#fff;border-color:#458df0;outline:3px solid #176be81c}
body[data-ui-page] header,body[data-ui-page] .top{min-height:55px;padding:0 0 18px;margin:0;align-items:center;gap:12px}
body[data-ui-page] .brand h1{font-size:26px;margin:0;line-height:1.15}body[data-ui-page] .brand small{font-size:9px;letter-spacing:.22em;font-weight:750;color:#637f98}
body[data-ui-page] .brand span,body[data-ui-page] .brand h1 span{color:var(--ui-pink)!important}
body[data-ui-page] .brand{font-size:23px;letter-spacing:-.04em}
body[data-ui-page] .menu,body[data-ui-page] .home{border:1px solid var(--ui-border);border-radius:12px;background:#fff;color:var(--ui-ink);padding:10px 14px;min-height:44px;font-size:14px;box-shadow:0 2px 6px #203b5010}
body[data-ui-page] .menu{font-size:20px;min-width:46px;padding:6px 12px}
body[data-ui-page] .card,body[data-ui-page] .panel,body[data-ui-page] .finder{border:1px solid var(--ui-border);border-radius:20px;background:#fff;box-shadow:var(--ui-shadow);padding:22px}
body[data-ui-page] .primary,body[data-ui-page] .formbtn,body[data-ui-page] .submit{background:var(--ui-blue);color:#fff;border:1px solid var(--ui-blue);border-radius:12px;min-height:49px;font-size:15px;font-weight:750;box-shadow:0 4px 12px #176be81c}
body[data-ui-page] .secondary{background:#fff;color:#245475;border:1px solid #d6e2ec;border-radius:12px;min-height:46px;font-size:14px}
body[data-ui-page] .status{border:1px solid #d7e8df;background:#edf7f2;color:#2c6750;border-radius:12px;font-size:13px;line-height:1.6;padding:12px 14px;margin:14px 0}
body[data-ui-page] .status.error,body[data-ui-page] .error{background:#fff1f3;border-color:#f0ccd4;color:#9d354d}
/* Home: search leads, small explanatory cards follow. */
body[data-ui-page=home] .hero{background:linear-gradient(125deg,#e3efff 0%,#f2f8ff 75%,#e8f7f4 100%);border:1px solid #d4e5f8;border-radius:24px;padding:26px!important;box-shadow:none}
body[data-ui-page=home] .hero:after{width:125px;height:125px;right:-45px;top:-45px;background:#c5e5ff66;border-radius:50%;opacity:1}
body[data-ui-page=home] .hero-eyebrow{position:relative;z-index:1;color:#526d89;font-size:12px;font-weight:750;letter-spacing:.015em;margin:0 0 8px}
body[data-ui-page=home] .hero h2{font-size:36px;line-height:1.22;margin:0 0 20px;position:relative;z-index:1}
body[data-ui-page=home] .hero .search{margin:0 0 18px;gap:8px;position:relative;z-index:2}
body[data-ui-page=home] .search input{background:#fff;box-shadow:0 3px 12px #153c6508;min-height:54px}
body[data-ui-page=home] .search button{background:var(--ui-blue);border-radius:12px;padding:0 19px;font-size:14px;min-height:54px}
body[data-ui-page=home] .hero-howto{gap:7px}
body[data-ui-page=home] .hero-guide{min-height:58px;padding:9px 12px!important;border-radius:14px;background:#ffffffd9!important;border-color:#d8e4ef!important;box-shadow:none}
body[data-ui-page=home] .hero-guide-icon{width:34px;height:34px;flex-basis:34px;font-size:21px}
body[data-ui-page=home] .hero-guide-text b{font-size:14px}body[data-ui-page=home] .hero-guide-text small{font-size:11px;line-height:1.45;color:#526a80}
body[data-ui-page=home] .hero-chevron{font-size:23px;color:#6886a1}
body[data-ui-page=home] .quick{gap:9px;margin:18px 0 12px}
body[data-ui-page=home] .quick button{border-radius:13px;padding:13px 8px;min-height:48px;color:#274e72;font-size:14px;font-weight:750;background:#fff;box-shadow:0 2px 6px #153c6505}
body[data-ui-page=home] .quick .global,body[data-ui-page=home] .catalogue-entry{background:#eaf2ff;border-color:#cddff5;color:#1760bb}
body[data-ui-page] .foot{font-size:11px;line-height:1.8;color:#617589;padding:28px 12px 35px;border-top:1px solid #dfe7ee;margin-top:26px}
/* Catalog: clear hierarchy, compact filters and aligned product actions. */
body[data-ui-page=products] .product-page-heading{margin:2px 0 20px}body[data-ui-page=products] .product-page-heading>a{font-size:12px;color:#52738d;display:inline-block;margin-bottom:8px}
body[data-ui-page=products] .product-page-heading h2{font-size:27px;margin:0}
body[data-ui-page=products] .finder{padding:20px;margin:16px 0 23px}body[data-ui-page=products] .finder h2{font-size:19px;margin-bottom:6px}
body[data-ui-page=products] .finder>p{font-size:13px;line-height:1.6;margin-bottom:16px}
body[data-ui-page] .tabs{gap:6px;background:#f0f4f9;padding:4px;border-radius:13px}
body[data-ui-page] .tabs button{border:1px solid transparent;border-radius:10px;background:transparent;color:#526d85;padding:11px 6px;font-size:13px;min-height:43px;font-weight:750}
body[data-ui-page] .tabs button.active{background:#fff;border-color:#d7e2ef;color:#175eb2;box-shadow:0 2px 5px #153c6510}
body[data-ui-page] .chips{gap:7px;padding:12px 0 3px;scroll-padding:10px}
body[data-ui-page] .chips button{border-radius:999px;border:1px solid #d9e3ed;min-height:38px;padding:8px 13px;background:#fff;color:#42617c;font-size:12px}
body[data-ui-page] .chips button.active{background:#eaf2ff;border-color:#a6c8ef;color:#185eac;box-shadow:none}
body[data-ui-page] .longterm{padding:14px;border-radius:14px;background:#edf7f3;margin-top:16px;gap:12px}
body[data-ui-page] .longterm b{font-size:14px;color:#235746}body[data-ui-page] .longterm small{display:block;font-size:11px;line-height:1.5;color:#497561;margin-top:3px}
body[data-ui-page] .longterm button{font-size:11px;padding:10px;min-width:86px;flex-shrink:0;border-radius:10px;background:#285c4d}
body[data-ui-page=products] .section-title{margin-top:22px}body[data-ui-page=products] .section-title h2{font-size:22px}
body[data-ui-page] .catalog-head{margin:14px 0 12px;align-items:center}body[data-ui-page] .catalog-head b{font-size:14px;color:#506b81}body[data-ui-page] .catalog-head span{background:#e8f5ee;color:#247955;font-size:12px;padding:5px 10px}
body[data-ui-page] .sorts{gap:6px;display:flex;flex-wrap:wrap;margin-bottom:16px}
body[data-ui-page] .sorts button{border-radius:10px;padding:9px 11px;min-height:39px;font-size:12px;color:#456580;background:#fff}
body[data-ui-page] .products{gap:14px}
body[data-ui-page] .product{border:1px solid #d9e4ee;border-radius:18px;padding:19px;background:#fff;box-shadow:0 4px 15px #17395408;display:flex;flex-direction:column}
body[data-ui-page] .product h3{font-size:19px;font-weight:800;line-height:1.4;margin:0 0 6px}
body[data-ui-page] .product .meta{font-size:12px;line-height:1.55;margin-bottom:11px;color:#5c7388}
body[data-ui-page] .product .price{font-size:25px;line-height:1.25;color:#153c64;font-weight:850;margin:2px 0 4px;letter-spacing:-.035em}
body[data-ui-page] .product .value-best{font-size:10px;padding:4px 8px;border-color:#f6d6df;color:#b93f60;background:#fff3f6;box-shadow:none;margin-bottom:9px}
body[data-ui-page] .product button{border-radius:11px;font-size:13px;min-height:46px;margin-top:12px;background:#1d456b;color:#fff;padding:12px;font-weight:750}
body[data-ui-page] .product .esim-compare-pick{min-height:42px;border:1px solid #d5e2ee!important;background:#f7faff!important;color:#305b7f!important;font-size:12px!important;margin-top:8px}
body[data-ui-page] .pager{margin:22px 0!important}body[data-ui-page] .pager span{font-size:12px}
body[data-ui-page] .cpd-sheet{border-radius:22px!important;padding:22px!important}body[data-ui-page] .cpd-sheet h2{font-size:25px}body[data-ui-page] #esimCompareOverlay section{border-radius:22px!important}
/* Account, group and help share the same form and card language. */
body[data-ui-page=account] main{max-width:660px}body[data-ui-page=account] #accountCard{padding:25px;margin-top:5px}
body[data-ui-page=account] #accountCard h1{font-size:27px;margin-bottom:10px}
body[data-ui-page=account] #accountCard>.muted{font-size:13px;line-height:1.75;margin:0 0 18px}
body[data-ui-page=account] .tabs{margin:16px 0 20px}body[data-ui-page=account] .field{margin:5px 0 13px}
body[data-ui-page=account] .field-label{display:block;font-size:12px;font-weight:750;color:#45627b;margin:0 0 1px}
body[data-ui-page=account] .card h2{font-size:21px}body[data-ui-page=account] .card>p{font-size:13px}
body[data-ui-page=account] #guestToggle{margin-top:12px;background:#f6f9fc}
body[data-ui-page] .order,body[data-ui-page] .esim-life{border-radius:15px;border-color:#dae5ef;box-shadow:none}
body[data-ui-page=group] .hero{background:linear-gradient(120deg,#e6f0ff,#f2f9ff);border-color:#d7e6f7;border-radius:22px;box-shadow:none}
body[data-ui-page=group] .hero h1{font-size:29px}body[data-ui-page=group] .hero p{font-size:14px}
body[data-ui-page=group] .field-label{font-size:13px;color:#45627b}
body[data-ui-page=group] .panel h2,body[data-ui-page=support] .card h2{font-size:21px}
body[data-ui-page=guide] .hero h1{font-size:33px}body[data-ui-page=guide] .guide-downloads{box-shadow:var(--ui-shadow);border-radius:18px}
/* Solid navigation prevents content showing through and reserves room below. */
body[data-ui-page]:has(.bottom-nav){padding-bottom:calc(105px + env(safe-area-inset-bottom))}
body[data-ui-page] .bottom-nav{max-width:810px;margin:0 auto;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));padding:5px 6px;background:#fff;border:1px solid #d9e4ee;border-radius:18px;box-shadow:0 6px 26px #1739541c;gap:3px;min-height:64px}
body[data-ui-page] .bottom-nav a{min-height:52px;border-radius:12px;font-size:10px;color:#4b657c;gap:4px;padding:6px 2px;background:#fff}
body[data-ui-page] .bottom-nav .nav-icon{font-size:20px;line-height:1}
body[data-ui-page] .bottom-nav a[aria-current=page]{background:#eaf2ff;color:#176be8;font-weight:800}
body[data-ui-page] .checkout{bottom:calc(84px + env(safe-area-inset-bottom));border:1px solid #dce5ee;border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #17395410}
body[data-ui-page] #esimCompareBar{bottom:calc(88px + env(safe-area-inset-bottom))!important;border-radius:14px!important}
@media(min-width:760px){body[data-ui-page=products] .products{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-ui-page=products] .product button:first-of-type{margin-top:auto}body[data-ui-page=home] .hero{padding:32px!important}body[data-ui-page=home] .hero h2{font-size:42px}body[data-ui-page=home] .hero-howto{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-ui-page=home] .hero-guide{height:100%;min-height:92px;align-items:flex-start;gap:8px}body[data-ui-page=home] .hero-guide-text small{font-size:11px}body[data-ui-page=home] .hero-chevron{display:none}}
@media(max-width:540px){body[data-ui-page] main{padding:18px 16px}body[data-ui-page] h1{font-size:27px}body[data-ui-page] header,body[data-ui-page] .top{padding-bottom:16px;min-height:52px}body[data-ui-page] .brand h1{font-size:25px}body[data-ui-page=home] .hero{padding:22px 18px!important;border-radius:21px}body[data-ui-page=home] .hero h2{font-size:31px}body[data-ui-page=products] .product-page-heading h2{font-size:25px}body[data-ui-page] .card,body[data-ui-page] .panel,body[data-ui-page] .finder{padding:18px;border-radius:18px}body[data-ui-page=products] .finder{padding:18px}body[data-ui-page] .product{padding:18px;border-radius:17px}body[data-ui-page] .product h3{font-size:18px}body[data-ui-page] .sorts{gap:5px}body[data-ui-page] .sorts button{font-size:11px;padding:8px 9px}body[data-ui-page=account] #accountCard{padding:21px 18px}body[data-ui-page=account] #accountCard h1{font-size:26px}body[data-ui-page=guide] .hero h1{font-size:29px}body[data-ui-page] .bottom-nav{left:10px;right:10px}body[data-ui-page] .sheet{max-height:88dvh;overflow-y:auto}body[data-ui-page] .cpd-sheet{width:94vw!important;padding:18px!important}}
@media(max-width:350px){body[data-ui-page] main{padding:14px 12px}body[data-ui-page=home] .hero h2{font-size:28px}body[data-ui-page] .sorts button{font-size:10px;padding:8px}body[data-ui-page] .longterm{padding:11px;gap:8px}body[data-ui-page] .longterm b{font-size:12px}}
@media(prefers-reduced-motion:reduce){body[data-ui-page] *,body[data-ui-page] *:before,body[data-ui-page] *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{body[data-ui-page]{background:#fff;padding-bottom:0}body[data-ui-page] .bottom-nav,body[data-ui-page] .checkout,body[data-ui-page] #esimCompareBar{display:none!important}body[data-ui-page] .card,body[data-ui-page] .product{box-shadow:none;break-inside:avoid}}

body[data-ui-page] .personal-esim-launch{background:#176be8;border-radius:14px;font-size:16px;padding:14px 15px;box-shadow:0 5px 15px #176be82b;line-height:1.4;margin-top:15px}body[data-ui-page] .personal-esim-sub{font-size:11px;font-weight:600;margin-top:4px}body[data-ui-page] .personal-esim-sheet{border-radius:23px 23px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}body[data-ui-page] .personal-esim-sheet h2{font-size:24px}body[data-ui-page] .personal-esim-sheet p{font-size:13px}body[data-ui-page] .personal-esim-go{background:#176be8;border-radius:12px;min-height:49px}body[data-ui-page] .personal-esim-field{border-radius:12px;background:#f9fbfe;font-size:16px;min-height:49px}body[data-ui-page] .personal-esim-field:focus{outline:3px solid #176be81c;border-color:#458df0}

body[data-ui-page] .product .value-best{align-self:flex-start;width:max-content;max-width:100%}

/* Shared reading scale: compact text with clear emphasis and 44px touch targets. */
body[data-ui-page]{font-size:14px;line-height:1.5;--ui-muted:#4d6478;--ui-shadow:0 3px 14px #153c6508}
body[data-ui-page] main{padding:16px 18px;max-width:860px}
body[data-ui-page] h1{font-size:26px;line-height:1.25;letter-spacing:-.03em}
body[data-ui-page] h2{font-size:20px;line-height:1.35;letter-spacing:-.025em}
body[data-ui-page] h3{font-size:17px;line-height:1.4;letter-spacing:-.015em}
body[data-ui-page] p{line-height:1.5}
body[data-ui-page] :is(.muted,.meta,.hint,.note,.field-label,.status,.foot,.faq-references,.esim-foot,.esim-note,.esim-wait){font-size:13px!important;line-height:1.5;color:#4d6478}
body[data-ui-page] :is(.card,.panel,.finder){padding:16px;border-radius:16px;box-shadow:none}
body[data-ui-page] :is(.product,.panel,.card,.finder,.hero-guide-text,.checkout-info,.row>*,.grid>*){min-width:0}
body[data-ui-page] :is(.primary,.secondary,.formbtn,.submit,.btn){font-size:14px!important;font-weight:700;line-height:1.4;min-height:44px;padding:11px 14px;border-radius:11px}
body[data-ui-page] :is(.sorts button,.chips button,.tabs button){font-size:13px!important;min-height:44px;padding:9px 11px;line-height:1.35}
body[data-ui-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:16px!important;max-width:100%;min-width:0}
body[data-ui-page] .field{min-height:46px;padding:10px 12px;border-radius:10px}
body[data-ui-page] :is(.meta,.hint,.status,.esim-service-detail,.foot){overflow-wrap:break-word}
body[data-ui-page] :is(.product-page-heading>a,.phone-note,.setting-example figcaption,footer,footer a){font-size:13px!important;line-height:1.5}
body[data-ui-page] :is(.status,.notice){padding:11px 12px;border-radius:11px;line-height:1.5}
body[data-ui-page] header,body[data-ui-page] .top{padding-bottom:12px;min-height:48px;gap:10px}
body[data-ui-page] .brand small{font-size:10px!important;line-height:1.3;letter-spacing:.17em}
body[data-ui-page] .customer-language-row{display:flex;justify-content:flex-end;min-height:44px;margin:0 0 10px}
body[data-ui-page] .customer-language-row .esimissu-lang-wrap{position:static;margin:0;z-index:auto}
body[data-ui-page] .guide-top{flex-wrap:wrap}
body[data-ui-page] .guide-top .esimissu-lang-wrap{margin-right:0;flex-shrink:0}
body[data-ui-page] .bottom-nav a{font-size:11px!important;min-height:52px;line-height:1.3;white-space:normal;overflow-wrap:break-word}
body[data-ui-page] .bottom-nav{align-items:stretch;min-height:62px;gap:3px;max-width:810px}
body[data-ui-page] .bottom-nav .nav-icon{font-size:20px}
body[data-ui-page] .bottom-nav a:active{background:#dbeaff}
body[data-ui-page] .longterm{flex-wrap:wrap;gap:9px;padding:12px;margin-top:12px}
body[data-ui-page] .longterm small{font-size:12px!important;line-height:1.4}
body[data-ui-page] .longterm button{font-size:13px!important;white-space:normal;min-height:44px}
body[data-ui-page] .checkout-info :is(b,span){white-space:normal;overflow-wrap:break-word}
body[data-ui-page]:has(.checkout:not(.hidden)){padding-bottom:calc(220px + env(safe-area-inset-bottom))}
/* Home: search and the next action fit together without oversized cards. */
body[data-ui-page=home] .hero{padding:22px!important;border-radius:20px}
body[data-ui-page=home] .hero h2{font-size:32px;line-height:1.22;margin-bottom:16px}
body[data-ui-page=home] .hero-guide{min-height:62px;padding:10px!important;align-items:center}
body[data-ui-page=home] .hero-guide-text b{font-size:14px;line-height:1.35}
body[data-ui-page=home] .hero-guide-text small{font-size:12px!important;line-height:1.4}
body[data-ui-page=home] .hero-howto{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-ui-page=home] .personal-esim-launch{font-size:15px;min-height:48px;padding:12px;margin-top:12px}
body[data-ui-page=home] .personal-esim-sub{font-size:12px;line-height:1.4}
body[data-ui-page=home] .quick{margin:12px 0;gap:8px}
body[data-ui-page=home] .quick button{min-height:44px;font-size:14px;padding:10px}
body[data-ui-page=home] .catalogue-entry{padding:13px;margin-top:12px;border-radius:12px}
/* Catalog: price and action remain prominent; metadata reads as supporting text. */
body[data-ui-page=products] .product-page-heading{margin:0 0 14px}
body[data-ui-page=products] .product-page-heading h2{font-size:23px}
body[data-ui-page=products] .finder{padding:16px;margin:12px 0 18px}
body[data-ui-page=products] .finder h2{font-size:18px}
body[data-ui-page=products] .finder>p{font-size:13px;margin-bottom:12px;line-height:1.5}
body[data-ui-page] .manual-finder{padding:12px;margin:12px 0;border-radius:12px}
body[data-ui-page] .manual-finder h3{font-size:15px;margin-bottom:9px}
body[data-ui-page] .sorts{gap:6px;flex-wrap:wrap;margin-bottom:12px}
body[data-ui-page] .products{gap:12px}
body[data-ui-page] .product{padding:16px;border-radius:15px;box-shadow:none}
body[data-ui-page] .product h3{font-size:17px;line-height:1.4;font-weight:750}
body[data-ui-page] .product .meta{font-size:13px!important;line-height:1.5;margin-bottom:8px}
body[data-ui-page] .product .price{font-size:23px!important;white-space:nowrap;overflow-wrap:normal;line-height:1.25;color:#166443}
body[data-ui-page] .product .value-best{font-size:11px!important;line-height:1.3;padding:4px 7px;margin-bottom:7px}
body[data-ui-page] .product button{font-size:14px!important;min-height:44px;padding:11px;margin-top:10px;background:#176be8}
body[data-ui-page] .product .esim-compare-pick{font-size:13px!important;min-height:44px;margin-top:7px}
body[data-ui-page] .catalog-head :is(b,span),body[data-ui-page] .pager span{font-size:13px!important}
body[data-ui-page] .product-top{flex-wrap:wrap}
/* Account and group: consistent forms, compact summaries and visible actions. */
body[data-ui-page=account] #accountCard{padding:18px}
body[data-ui-page=account] #accountCard h1{font-size:24px}
body[data-ui-page=account] #accountCard>.muted{line-height:1.5;margin-bottom:14px}
body[data-ui-page=account] .card h2{font-size:19px}
body[data-ui-page=account] .tabs{margin:12px 0 14px}
body[data-ui-page=account] :is(.order,.esim-life){padding:13px;border-radius:12px}
body[data-ui-page=account] .order-title{font-size:16px;font-weight:700}
body[data-ui-page=account] .amount{font-size:20px;color:#166443}
body[data-ui-page=account] .order-meta{margin:10px 0;gap:5px}
body[data-ui-page=account] :is(.quick button,.esim-actions button,.esim-actions a,.guide-call){font-size:13px;min-height:44px;padding:10px;border-radius:10px}
body[data-ui-page=group] .hero{padding:18px;border-radius:18px;margin:12px 0}
body[data-ui-page=group] .hero h1{font-size:25px;margin:0 0 8px}
body[data-ui-page=group] .hero p{font-size:14px;line-height:1.5;margin:0}
body[data-ui-page=group] .panel h2{font-size:20px;margin:0 0 12px}
body[data-ui-page=group] .grid{gap:10px}
body[data-ui-page=group] .field-wrap{gap:5px}
body[data-ui-page=group] .field-label{font-size:13px;font-weight:650}
body[data-ui-page=group] .price{font-size:21px;white-space:nowrap;color:#166443}
body[data-ui-page=group] .detail{padding:14px;border-radius:12px}
body[data-ui-page=group] .money-box{padding:10px;border-radius:10px}
body[data-ui-page=group] .detail-list{gap:6px;font-size:13px;line-height:1.5}
body[data-ui-page=group] .sticky{bottom:calc(82px + env(safe-area-inset-bottom));border:1px solid #dce6ee;box-shadow:0 3px 14px #153c6514}
body[data-ui-page=refund] .policy h2{font-size:17px;margin-top:20px}
body[data-ui-page=refund] .policy p{font-size:14px;line-height:1.55}
/* Guide: keep the start warning visible while making the examples easy to scan. */
body[data-ui-page=guide] .activation-start-warning{padding:15px;border-width:1px;border-left-width:4px;border-radius:12px;margin:12px 0 16px;line-height:1.5}
body[data-ui-page=guide] .activation-start-warning h2{font-size:18px;line-height:1.35;margin-bottom:10px}
body[data-ui-page=guide] .activation-start-warning :is(p,li){font-size:13px;line-height:1.5}
body[data-ui-page=guide] .activation-start-warning p{margin:8px 0}
body[data-ui-page=guide] .activation-start-warning h3{font-size:14px;margin:12px 0 8px}
body[data-ui-page=guide] .activation-country-examples>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;gap:7px;padding:0;margin:8px 0}
body[data-ui-page=guide] .activation-country-examples>ul>li{padding:9px 10px;border:1px solid #ead7b8;border-radius:9px;background:#fffaf2;min-width:0}
body[data-ui-page=guide] .hero{padding:22px;border-radius:18px}
body[data-ui-page=guide] .hero h1{font-size:29px;margin:8px 0 10px}
body[data-ui-page=guide] .hero p{font-size:14px}
body[data-ui-page=guide] .hero-tags{margin-top:14px;gap:6px}
body[data-ui-page=guide] .hero-tags span{font-size:12px;padding:5px 9px}
body[data-ui-page=guide] .guide-downloads{padding:16px;margin:16px 0;border-radius:14px;box-shadow:none}
body[data-ui-page=guide] .guide-downloads h2{font-size:18px}
body[data-ui-page=guide] .guide-downloads a{min-width:0;min-height:44px;font-size:13px;line-height:1.4;padding:12px}
body[data-ui-page=guide] .guide-controls{margin-top:20px}
body[data-ui-page=guide] .maker button{font-size:17px;min-height:48px;padding:10px;border-radius:12px}
body[data-ui-page=guide] .stage-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:13px;padding:8px 11px}
body[data-ui-page=guide] .stage-heading{padding:12px 14px;margin-bottom:12px}
body[data-ui-page=guide] .stage-heading h2{font-size:18px}
body[data-ui-page=guide] .guide-step{padding:18px;gap:18px;border-radius:15px;margin-bottom:12px}
body[data-ui-page=guide] .step-copy h3{font-size:17px;margin-bottom:9px}
body[data-ui-page=guide] .step-copy p{font-size:14px;line-height:1.5;margin-top:9px}
body[data-ui-page=guide] .step-copy .path{font-size:13px;line-height:1.5;padding:10px}
body[data-ui-page=guide] .stage-section{margin-bottom:22px}
@media(max-width:540px){
 body[data-ui-page] main{padding:12px 14px}
 body[data-ui-page] .brand h1{font-size:24px}
 body[data-ui-page=home] .hero{padding:18px!important}
 body[data-ui-page=home] .hero h2{font-size:27px}
 body[data-ui-page=home] .hero-howto{grid-template-columns:minmax(0,1fr)}
 body[data-ui-page=products] .product-page-heading h2{font-size:22px}
 body[data-ui-page] .checkout-inner{flex-wrap:wrap;gap:9px}
 body[data-ui-page] .bottom-nav{left:8px;right:8px}
 body[data-ui-page=guide] .hero h1{font-size:26px}
 body[data-ui-page=guide] .activation-country-examples>ul{grid-template-columns:minmax(0,1fr)}
 body[data-ui-page=guide] .guide-step{padding:16px;gap:16px}
}
@media(max-width:360px){
 body[data-ui-page] main{padding-left:12px;padding-right:12px}
 body[data-ui-page] .bottom-nav a{font-size:10px!important}
 body[data-ui-page=group] .grid{grid-template-columns:minmax(0,1fr)}
 body[data-ui-page=home] .hero h2{font-size:25px}
}

/* Detail and comparison styles are inserted after load; keep these rules scoped. */
body[data-ui-page] #customerProductDetail :is(.cpd-note,.cpd-specs small){font-size:14px!important;line-height:1.65;color:#465f73}
body[data-ui-page] #customerProductDetail :is(button,summary),body[data-ui-page] #esimCompareOverlay button{font-size:15px;min-height:44px;white-space:normal;overflow-wrap:anywhere}
body[data-ui-page] #customerProductDetail .cpd-close{min-width:44px;min-height:44px;flex:0 0 44px;font-size:24px}
body[data-ui-page] #customerProductDetail .cpd-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-ui-page] #customerProductDetail :is(.cpd-top,.cpd-nav){flex-wrap:wrap}
body[data-ui-page] #customerProductDetail :is(.cpd-specs>div,.cpd-top>div){min-width:0;overflow-wrap:anywhere}
body[data-ui-page] #customerProductDetail .cpd-price{white-space:normal;overflow-wrap:anywhere}
body[data-ui-page] #esimCompareOverlay :is(table,th,td){font-size:14px!important;line-height:1.65!important}
body[data-ui-page] #esimCompareOverlay section{overscroll-behavior:contain}
@media(max-width:430px){
 body[data-ui-page] #customerProductDetail{padding:12px}
 body[data-ui-page] #customerProductDetail .cpd-sheet{width:100%;max-width:100%;max-height:calc(100dvh - 24px);padding:18px!important}
 body[data-ui-page] #customerProductDetail .cpd-nav{top:-18px}
 body[data-ui-page] #customerProductDetail .cpd-top{display:block}
 body[data-ui-page] #customerProductDetail .cpd-top h2{line-height:1.4}
}
@media(max-width:340px){body[data-ui-page] #customerProductDetail .cpd-specs{grid-template-columns:minmax(0,1fr)}}
body[data-ui-page] #customerProductDetail .cpd-buy{font-size:17px}



/* Abstract connection artwork replaces the large marketing heading. */
body[data-ui-page=home] .hero:after{display:none}
body[data-ui-page=home] .hero .hero-eyebrow{margin-bottom:0}
body[data-ui-page=home] .hero-visual{position:relative;width:100%;height:150px;margin:0 0 10px;pointer-events:none}
body[data-ui-page=home] .hero-visual img{display:block;width:100%;height:100%;object-fit:contain}
body[data-ui-page=home] .hero .hero-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:540px){body[data-ui-page=home] .hero-visual{height:110px;margin-bottom:8px}body[data-ui-page=home] .hero-visual img{object-fit:cover;object-position:center}}


/* A small shared connection motif uses the empty side of section headings. */
body[data-ui-page] .brand-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 9px;min-width:0}
body[data-ui-page] .brand-section-heading :is(h1,h2){margin:0!important;min-width:0;flex:1}
body[data-ui-page] .section-connection-mark{display:block;flex:0 0 160px;width:160px;height:56px;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
body[data-ui-page=products] .product-page-heading .brand-section-heading{margin-bottom:0}
@media(max-width:540px){body[data-ui-page] .brand-section-heading{gap:10px}body[data-ui-page] .section-connection-mark{flex-basis:94px;width:94px;height:44px}}
@media(max-width:360px){body[data-ui-page] .section-connection-mark{flex-basis:76px;width:76px;height:40px}}

/* Mobile fixed-layer safety: keep the selected-product purchase actions above
   the five-item bottom navigation, including iOS safe-area insets. */
@media (max-width: 767px){
 body[data-ui-page]:has(.bottom-nav){--mobile-nav-reserved:calc(104px + env(safe-area-inset-bottom));}
 body[data-ui-page] .checkout:not(.hidden){
   bottom:var(--mobile-nav-reserved,calc(104px + env(safe-area-inset-bottom)))!important;
   max-height:calc(100dvh - 128px - env(safe-area-inset-bottom));
   overflow-y:auto;
   overscroll-behavior:contain;
   -webkit-overflow-scrolling:touch;
   z-index:54;
   padding-bottom:14px;
 }
 body[data-ui-page] .checkout-inner{min-width:0;align-items:stretch;}
 body[data-ui-page] .checkout-inner :is(button,a){min-height:44px;}
 body[data-ui-page]:has(.checkout:not(.hidden)){
   padding-bottom:calc(320px + env(safe-area-inset-bottom));
 }
 body[data-ui-page] :is(.sheet,.cpd-sheet,.personal-esim-sheet){
   max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));
   overflow-y:auto;
   -webkit-overflow-scrolling:touch;
 }
}

/* Shared responsive layout hardening: protect all customer pages from fixed
   controls and long untranslated text, without changing checkout behaviour. */
body[data-ui-page]{max-width:100%;overflow-x:clip}
body[data-ui-page] :is(main,.container,.card,.panel,.finder,.product,.grid,.row,section,article){min-width:0;max-width:100%}
body[data-ui-page] :is(img,svg,video){max-width:100%;height:auto}
body[data-ui-page] :is(h1,h2,h3,p,button,a,label,small){overflow-wrap:anywhere}
body[data-ui-page] :is(input,select,textarea){max-width:100%;min-width:0}
body[data-ui-page] .bottom-nav{box-sizing:border-box;z-index:55}
body[data-ui-page] :is(.modal-bg,#customerProductDetail,#esimCompareOverlay,.personal-esim-bg){z-index:100!important}
body[data-ui-page] :is(.sheet,.cpd-sheet,.personal-esim-sheet){overscroll-behavior:contain}
@media(max-width:767px){
 body[data-ui-page] .bottom-nav{width:auto;grid-template-columns:repeat(5,minmax(0,1fr));}
 body[data-ui-page] .bottom-nav a{min-width:0;max-width:100%;line-height:1.25;word-break:keep-all}
 body[data-ui-page] .bottom-nav .nav-icon{flex-shrink:0}
 body[data-ui-page] :is(.sorts,.tabs,.chips,.trip-actions){max-width:100%;}
 body[data-ui-page] :is(.sorts,.trip-actions){flex-wrap:wrap}
 body[data-ui-page] .checkout:not(.hidden){left:8px;right:8px;width:auto;border-radius:18px;}
 body[data-ui-page] .checkout:not(.hidden) :is(.checkout-info,.checkout-inner){min-width:0;max-width:100%}
 body[data-ui-page] .checkout:not(.hidden) button{max-width:100%;white-space:normal}
 body[data-ui-page] :is(.modal-bg,#customerProductDetail,#esimCompareOverlay,.personal-esim-bg){max-width:100vw;}
 body[data-ui-page] :is(.sheet,.cpd-sheet,.personal-esim-sheet){max-width:100%;}
 body[data-ui-page] :is(.product,.card,.panel){overflow-wrap:anywhere}
}

/* Never show an empty fixed purchase shell over catalogue action buttons. */
/* Visibility is owned by the storefront .hidden state; never infer it from
   an asynchronously populated text node. */
body[data-ui-page] #checkout.hidden{display:none!important}
body[data-ui-page] #checkout:not(.hidden){display:block!important}
body[data-ui-page] #esimCompareBar{bottom:calc(100px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 24px)!important;box-sizing:border-box}
@media(max-width:540px){
 body[data-ui-page] #esimCompareBar{flex-wrap:wrap;gap:8px}
 body[data-ui-page] #esimCompareBar button{min-height:44px;max-width:100%;white-space:normal}
}

/* A selected-product checkout has priority over the comparison floating bar.
   Both fixed controls otherwise compete for the same mobile viewport. */
body[data-ui-page]:has(#checkout:not(.hidden)) #esimCompareBar{display:none!important}
body[data-ui-page]:has(#flow:not(.hidden)) :is(#checkout,#esimCompareBar){visibility:hidden!important;pointer-events:none!important}
@media(max-width:767px){
 body[data-ui-page] #checkout:not(.hidden){max-width:calc(100vw - 16px)}
 body[data-ui-page] #checkout:not(.hidden) .checkout-inner{display:flex;flex-wrap:wrap}
 body[data-ui-page] #checkout:not(.hidden) #buy{min-height:48px;flex:1 1 150px}
 body[data-ui-page] #checkout:not(.hidden) #changeProduct{min-height:44px;flex:1 1 130px}
}

/* Purchase sheet must remain above the persistent five-tab navigation.
   The bottom-navigation remains usable after the sheet is dismissed. */
body[data-ui-page] #checkout:not(.hidden){z-index:56!important}
body[data-ui-page] #flow:not(.hidden){z-index:1000!important}
@media(max-width:767px){
 body[data-ui-page] #checkout:not(.hidden){bottom:calc(90px + env(safe-area-inset-bottom))!important}
 body[data-ui-page] #checkout:not(.hidden) .checkout-inner{max-height:calc(100dvh - 125px - env(safe-area-inset-bottom));overflow-y:auto}
 body[data-ui-page] #checkout:not(.hidden) #selectedName{display:block;line-height:1.35}
}
