:root{--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--brand-color: #FF395C;--bg-color: #F7F7F7}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family)}.header{border-bottom:1px solid #ddd;padding:40px}.header .logo{font-size:30px;font-weight:800;color:#000;line-height:1}.container{padding:20px}@media (min-width: 1024px){.container{padding:40px;display:flex;justify-content:space-between}}.form .row{margin-bottom:20px}.form .label{font-size:14px;font-weight:600;text-transform:uppercase;display:block;margin-bottom:10px}.form .color{width:60px;height:60px;border:1px solid #ddd;border-radius:6px;cursor:pointer}.form .color:hover{opacity:.6}.form .color:focus{opacity:.4}.form .field{background-color:#fbfaf8;border:1px solid #ddd;border-radius:6px;padding:10px;outline:none;font-size:14px;width:100%}.add-product-row{display:flex;gap:10px;justify-content:space-between;margin-bottom:10px;flex-direction:column}@media (min-width: 1024px){.add-product-row{flex-direction:row}}.add-product-row .button{border:none;border-radius:6px;font-size:14px;line-height:1;font-weight:500;background:#3a3f56;color:#fff;padding:13px 20px;cursor:pointer;width:80px;height:39px}.add-product-row .button.emoji{background-color:#fbfaf8;border:1px solid #ddd;line-height:1}.add-product-row .button.remove{background:#f4f4f4;padding:0}.add-product-row .button.remove svg{height:20px}.add-product-row .button:hover{opacity:.9}.add-product-row .button:active{opacity:.8}.add-product-row .icon{width:100%;position:relative}@media (min-width: 1024px){.add-product-row .icon{width:20%}}.add-product-row .name{width:100%}@media (min-width: 1024px){.add-product-row .name{width:60%}}.add-product-row .price{width:100%;display:flex;align-items:flex-end}@media (min-width: 1024px){.add-product-row .price{width:20%}}.iphone{width:400px;min-width:400px;height:774px;position:fixed;top:0;right:0;background-size:100%;position:relative;zoom:.5}@media (min-width: 1024px){.iphone{zoom:1}}.iphone .screen{position:absolute;top:38px;left:41px;right:40px;bottom:80px}.iphone .screen .products{list-style:none;margin:30px 0 0;display:flex;gap:10px;justify-content:center;padding:0 10px;flex-wrap:wrap;height:360px;overflow-y:auto}.iphone .screen .products .product{display:flex;align-items:center;flex-direction:column;width:30%;text-align:center}.iphone .screen .products .product .name{font-size:10px;font-weight:700}.iphone .screen .products .product .price{font-size:10px;margin-top:5px}.iphone .screen .products .product .icon{font-size:40px}.iphone .screen .cart{list-style:none;margin:30px 0 0;display:flex;gap:10px;justify-content:center;flex-direction:column;padding:0 20px}.iphone .screen .cart .item{display:flex;align-items:center;flex-direction:row;justify-content:space-between}.iphone .screen .cart .item .left{display:flex;align-items:center;gap:10px}.iphone .screen .cart .item .name,.iphone .screen .cart .item .price{font-size:14px;font-weight:700}.iphone .screen .cart .item .icon{font-size:40px}.iphone .screen .buy{border:none;border-radius:8px;font-size:20px;font-weight:500;padding:20px;position:absolute;left:0;bottom:0;right:0;background:#3a3f56;color:#fff;margin:0 20px}.iphone .screen .top{height:100px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:20px;font-weight:700;border-top-left-radius:43px;border-top-right-radius:43px}.tooltip{position:absolute;top:50px;left:0;z-index:999999}.tooltip:not(.shown){display:none}.icon-container{position:relative}.icon-field{cursor:pointer}.icon-field:hover{opacity:.7}.icon-field:active{opacity:.5}.price-field,.price-label{text-align:right}.form .columns{display:flex;margin-bottom:20px;gap:20px}.form .columns .column{text-align:left;background:#f4f4f4;padding:10px;border-radius:10px}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#3a3f56}input:focus+.slider{box-shadow:0 0 1px #3a3f56}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.switch-container{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px}.iphone .screen .tip{position:absolute;bottom:100px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.iphone .screen .tip input{border:1px solid #ddd;width:40%;border-radius:10px;padding:10px;outline:none;text-align:right;font-size:14px}.iphone .screen .tip .input-container{width:60%;display:flex;align-items:center;justify-content:flex-end;gap:10px}.submit-button{border:none;border-radius:6px;font-size:20px;line-height:1;font-weight:600;background:#3a3f56;color:#fff;padding:20px 40px;cursor:pointer;text-decoration:none;display:block;text-align:center}.submit-button:hover{opacity:.9}.submit-button:active{opacity:.8}.link{background:#fff;margin-bottom:20px;border-radius:10px}.link p{margin:0 0 10px;display:flex;align-items:center;gap:5px;font-size:20px}.link svg{height:60px;color:green}.link-field{font-size:20px;padding:15px 20px;border:none;background:#f4f4f4;width:100%;border-bottom:2px solid #ddd}.shop .inside{padding:0 20px 20px}.shop .top{width:100%;height:100px;font-size:20px;display:flex;align-items:center;justify-content:center;font-weight:700}.shop .products{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.shop .products .product{display:flex;align-items:center;flex-direction:column;width:30%;position:relative;outline:none}.shop .products .product:hover{opacity:.8}.shop .products .product:active{opacity:.5}.shop .products .product .dot{width:20px;height:20px;font-size:12px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:20px}.shop .products .product .name{font-size:10px;font-weight:700;text-align:center}.shop .products .product .price{font-size:10px;margin-top:5px}.shop .products .product .icon{font-size:40px}.shop .cart{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:10px;justify-content:center;flex-direction:column}.shop .cart .item{display:flex;align-items:center;flex-direction:row;justify-content:space-between}.shop .cart .item.total{background:#f4f4f4;font-weight:700;padding:20px;margin-top:10px;font-size:20px}.shop .cart .item.total .price{font-weight:700;font-size:20px}.shop .cart .item .left{display:flex;align-items:center;gap:10px}.shop .cart .item .name,.shop .cart .item .price{font-size:14px;font-weight:700}.shop .cart .item .icon{font-size:40px}.shop .buy{margin-top:20px;width:100%;border:none;border-radius:8px;font-size:20px;font-weight:500;padding:20px;background:#3a3f56;color:#fff}.shop .tip{display:flex;align-items:center;justify-content:space-between;margin-top:30px}.shop .tip input{border:1px solid #ddd;width:40%;border-radius:10px;padding:10px;outline:none;text-align:right;font-size:14px}.shop .tip .input-container{width:60%;display:flex;align-items:center;justify-content:flex-end;gap:10px}.shop .link{margin-top:30px}.cancel{font-size:20px;background:#ddd;border:none;padding:10px;width:100%;margin-top:20px;border-radius:8px;color:#000}
