:root{--sm:640px;--md:768px;--lg:1024px;--xl:1280px;--2xl:1536px;--primary-blue:#15333d;--midnight-green:#1a3c47;--maximum-blue:#66b8d9;--blush-pink:#ea5178;--dark-grey:#ababab;--light-grey:#f7f7f7;--off-white:#f7f7f7;--rich-black:#00191e}*{font-family:Inter,sans-serif}h1,h2{color:var(--primary-blue);font-size:16px;font-weight:700}a{color:var(--secondary-blue)}button{all:unset;text-align:center}.primary-button{cursor:pointer;width:272px;height:48px;color:var(--off-white);font-weight:500;transition-property:opacity;transition-duration:.3s}.primary-button:hover{opacity:.8}*{box-sizing:border-box;margin:0;padding:0}html{height:100%;font-size:16px}body{flex-direction:column;height:100%;max-height:100vh;display:flex}.guest{flex-direction:column;justify-content:center;align-items:center;gap:64px;width:100%;height:100%;max-height:100vh;display:flex;position:relative}.guest__title{text-transform:uppercase;text-align:center;font-size:16px}.guest__main{flex-direction:column;gap:16px;width:30%;min-width:320px;display:flex}.login{flex-direction:column;justify-content:center;align-items:stretch;gap:16px;display:flex}.login__email,.login__password{flex-direction:column;gap:4px;display:flex}.login__email-label,.login__password-label{font-size:14px}.login__email-input,.login__password-input{height:32px;padding:4px}.login__options{justify-content:space-between;align-items:center;display:flex}.login__options-left{cursor:pointer;align-items:center;gap:4px;display:flex}.login__options-left input{pointer-events:none}.login__options-left span,.login__options-right{font-size:14px}.login__button{background-color:var(--primary-blue);color:var(--off-white);align-self:center;margin-top:32px}.login__register{text-align:center;margin-top:16px}.forgot-password__form{flex-direction:column;gap:16px;display:flex}.forgot-password__email{flex-direction:column;gap:4px;display:flex}.forgot-password__email-label{font-size:14px}.forgot-password__email-input{height:32px;padding:4px}.forgot-password__button{background-color:var(--primary-blue);align-self:center;margin-top:32px}.register{flex-direction:column;justify-content:center;align-items:stretch;gap:16px;display:flex}.register__name,.register__email,.register__password,.register__confirmation{flex-direction:column;gap:4px;display:flex}.register__name-label,.register__email-label,.register__password-label,.register__confirmation-label{font-size:14px}.register__name-input,.register__email-input,.register__password-input,.register__confirmation-input{height:32px;padding:4px}.register__login{text-align:center;margin-top:16px}.register__button{background-color:var(--primary-blue);color:var(--off-white);align-self:center;margin-top:16px}.dashboard{flex-direction:column;gap:32px;width:100%;height:100%;min-height:0;padding:16px 32px;display:flex}.dashboard__main{flex-direction:column;gap:16px;height:100%;padding-block:32px;display:flex}.dashboard .company{flex-direction:column;gap:16px;width:30%;min-width:320px;display:flex}.dashboard .company__name,.dashboard .company__email{flex-direction:column;gap:4px;display:flex}.dashboard .company__name-label,.dashboard .company__email-label{font-size:14px}.dashboard .company__name-input,.dashboard .company__email-input{height:32px;padding:4px}.dashboard .logout{margin-top:auto;margin-left:auto}.dashboard .logout__button{cursor:pointer;text-align:center;margin-top:16px;text-decoration:underline}.main{gap:32px;width:100%;height:100%;min-height:0;padding:16px 32px;display:flex}.header{justify-content:space-between;align-items:center;padding:16px 16px 0;display:flex}.header__left{align-items:flex-end;gap:16px;display:flex}.header__right{align-items:flex-start;gap:16px;display:flex}.header__title{text-transform:uppercase;line-height:normal}.header__logo-wrapper{display:flex}.header__logo{height:40px}.header__dashboard,.header__index{color:var(--primary-blue);font-size:16px;text-decoration:none}.header__dashboard{text-transform:capitalize}.header__index{text-transform:initial;gap:4px;display:flex}.header__divider{border:0;border-left:1px solid var(--dark-grey);height:-webkit-fill-available;height:-moz-available;height:stretch}.tabs{gap:16px;width:fit-content;display:flex;position:relative}.tabs:after{content:"";height:1px;width:var(--underline-width,0px);background:var(--rich-black);transform:translateX(var(--underline-x,0px));transition:transform .3s,width .3s;position:absolute;bottom:-4px;left:0}.tabs button{cursor:pointer;background:0 0;border:none;padding:0;font-size:16px}.tabs button.active{font-weight:700}.types{background:var(--light-grey);border-radius:8px;flex-direction:column;padding-top:16px;display:flex;position:relative;overflow:hidden}.types__header{padding-top:16px;align-items:center;width:100%;padding-inline:16px;display:flex}.types__step{color:#fff;background:var(--dark-grey);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.types__title{text-align:center;justify-self:center;position:absolute;left:50%;transform:translate(-50%)}.types__main-wrapper{height:100%;min-height:0;position:relative;overflow:hidden}.types__scroll-wrapper{height:100%;overflow-y:auto}.types__scroll-wrapper::-webkit-scrollbar{width:6px}.types__scroll-wrapper::-webkit-scrollbar-track{background:0 0;margin-block:32px;position:absolute;right:6px}.types__scroll-wrapper::-webkit-scrollbar-thumb{background:var(--dark-grey);border-radius:999px}.types__main{flex-direction:column;gap:32px;padding:32px 16px;display:flex}.types__gradient{z-index:10;pointer-events:none;height:32px;position:absolute;left:0;right:6px}.types__gradient-top{background-image:linear-gradient(to top, transparent, var(--light-grey) 50%);top:0}.types__gradient-bottom{background-image:linear-gradient(to bottom, transparent, var(--light-grey) 50%);bottom:0}.content{background:var(--light-grey);border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:16px;width:100%;height:100%;padding:16px 32px 32px;display:flex}.content__header{align-items:center;width:100%;padding-top:16px;display:flex;position:relative}.content__step{color:#fff;background:var(--dark-grey);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex}.content__title{text-align:center;justify-self:center;position:absolute;left:50%;transform:translate(-50%)}.content__main{flex-direction:column;align-items:center;gap:32px;width:100%;height:100%;min-height:0;display:flex}.content__canvas-wrapper{flex:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.content__canvas{background-color:rgb(from var(--maximum-blue) r g b/10%);border:1px solid rgb(from var(--maximum-blue) r g b/50%);width:100%;height:100%}.content__canvas.active{background-color:#fff}.content__canvas-controls{pointer-events:none;display:none;position:absolute;inset:0}.content__canvas-controls.active{display:flex}.content__logo-button{pointer-events:auto;border:1px dashed var(--maximum-blue);cursor:pointer;background:#fff;padding:12px 20px;position:absolute}.content__logo-input{display:none}.content__canvas-text{color:var(--maximum-blue);text-align:center;width:100%;font-size:14px;font-style:italic;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content__canvas-text.active{display:block}.content__add-button{background-color:var(--maximum-blue)}.basket{border-left:1px solid var(--dark-grey);box-sizing:content-box;flex-direction:column;gap:16px;width:272px;padding:16px 0 32px 32px;display:flex}.basket__title{padding-block:16px}.basket__main{flex-direction:column;gap:32px;height:100%;min-height:0;display:flex}.basket__list{scrollbar-gutter:stable;flex-direction:column;flex:1;gap:16px;height:auto;max-height:fit-content;padding-right:6px;display:none;overflow:auto}.basket__list::-webkit-scrollbar{width:6px}.basket__list::-webkit-scrollbar-track{background:0 0;position:absolute;right:6px}.basket__list::-webkit-scrollbar-thumb{background:var(--dark-grey);border-radius:999px}.basket__list-item{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.basket__list-item-right{align-items:center;gap:8px;display:flex}.basket__list-item-remove{cursor:pointer;display:flex}.basket__list-item-remove-icon{height:14px}.basket__notes{border-block:1px solid #ababab;flex-direction:column;width:100%;display:flex}.basket__notes:has(.active){padding-bottom:16px}.basket__notes-button{cursor:pointer;padding-block:16px;justify-content:space-between;align-items:center;padding-right:12px;transition-property:opacity;transition-duration:.3s;display:flex}.basket__notes-button:hover .basket__notes-label{opacity:.8}.basket__notes-label{pointer-events:none;font-size:12px}.basket__notes-chevron{transition:transform .3s}.basket__notes-button:has(+.active) .basket__notes-chevron{transform:scaleY(-1)}.basket__notes-textarea-wrapper{max-height:0;transition:max-height .3s ease-out;display:flex;overflow:hidden}.basket__notes-textarea-wrapper.active{max-height:100px;transition:max-height .3s ease-out}.basket__notes-textarea{border:1px solid var(--dark-grey);width:100%;height:100px;padding:4px}.basket__notes-textarea:focus{outline:none}.basket__total{justify-content:space-between;width:100%;display:flex}.basket__total-left{flex-direction:column;font-weight:700;display:flex}.basket__total-left span:nth-of-type(2){font-size:12px;line-height:1}.basket__order-button{background-color:var(--blush-pink)}.type{aspect-ratio:3/2;background:var(--off-white);cursor:pointer;border-radius:8px;outline:1px solid #0000;flex-direction:column;width:100%;height:160px;transition-property:transform;transition-duration:.2s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 8px #0000001a,0 6px 20px #0000001a}.type.active{outline:1px solid var(--primary-blue);transform:scale(1.02);box-shadow:0 4px 8px #0003,0 6px 20px #0003}.type:not(.active):hover .type__text-wrapper{opacity:.8}.type__image-wrapper{background:#fff;justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.type__image{max-height:100%}.type__text-wrapper{background-color:var(--midnight-green);border-bottom-right-radius:8px;border-bottom-left-radius:8px;width:100%;padding-block:4px;transition-property:opacity;transition-duration:.3s}.type__text{color:var(--off-white);text-align:center;text-wrap:balance;font-size:14px}