/* ==========================================================================
   General
   ========================================================================== */
   
/* Vars
========================================================================== */

:root {
	--color-dark:#000000;
	--color-dark-dimmed:rgba(0,0,0,0.9);
	--color-dark-dimmed-light:rgba(0,0,0,0.7);
	--color-dark-dimmed-lighter:rgba(0,0,0,0.3);
	--color-dark-dimmed-lightest:rgba(0,0,0,0.03);
	--color-light:#ffffff;
	--color-light-light:rgba(255,255,255,0.3);
	--transition-regular:cubic-bezier(0.090, 0.950, 0.320, 1.000);
	--transition-switch:cubic-bezier(0.645, 0.045, 0.355, 1.000);
	--transition-time-slow:1000ms;
	--transition-time:600ms;
	--transition-time-fast:300ms;
	--margin-small:0.8rem;
	--margin:2rem;
	--margin-big:5rem;
	--opacity-light:0.3;
	--opacity-lighter:0.1;
	--sidebar-width:50vw;
	--button-height:3.5rem;
	--border-radius:0.5rem;
	--order-shift:15rem;
	--detail-shift:10vw;
	--detail-shift-y:10svh;
	--orders-width:100vw;
}

/* Resets
========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

ol, ul {
	list-style:none;
	list-style-type:none;
}

ul li {
	display:inline;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

input:not([type="checkbox"]), select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline:none;
	background:none;
	font-family: 'Regular', Arial, sans-serif;
	border:none;
}

a, img, div, span, button {
	-webkit-tap-highlight-color:transparent;
}

/* Common settings
========================================================================== */

body, html {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	scroll-behavior: smooth;
	overflow:hidden;
} 

html {
	font-size:10px;
	margin:0;
	padding:0;
}

body {
    font-style: normal;
	letter-spacing:normal;
	line-height:1;
	color:var(--color-dark);
	position:relative;
	font-family: 'Regular', Arial, sans-serif;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
	background-color:var(--color-light);
}

body.ns {
	overflow:hidden;
}

body.light {
	background-color:var(--color-light);
}

strong {
	font-family: 'Bold', Arial, sans-serif;
}

a {
	text-decoration:none;
	color:var(--color-dark);
}

button {
	border:none;
	background-color:transparent;
}

a img {
	width:100%;
}

div {
	user-select:none;
}

textarea {
	border:0.1rem solid var(--color-dark-dimmed-lighter);
	padding:1.5rem;
	box-sizing:border-box;
	width:100%;
	height:10rem;
	border-radius:var(--border-radius);
}

::-webkit-scrollbar { 
	display: none; 
}

.button {
	padding:var(--margin);
	box-sizing:border-box;
}

.button.margin {
	padding:var(--margin-big);
}

.button .inner {
	height:var(--button-height);
	padding:0.2rem var(--margin) 0 var(--margin);
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--color-light);
	box-sizing:border-box;
	text-align:center;
	border-radius:var(--border-radius);
	position:relative;
	color:var(--color-dark);
}

.button.with-icon .inner {
	padding:0.2rem calc(var(--margin) + 0.5rem) 0 var(--margin);
}

.button.dark .inner {
	background-color:var(--color-dark);
	color:var(--color-light);
}

.button.small-border .inner {
	border-radius:var(--margin-small);
}

.button .inner .icon {
	position:absolute;
	right:1rem;
	top:50%;
	transform:translateY(-50%);
	height:2rem;
	width:2rem;
	z-index:2;
}

.button .inner .icon.arrow span, .button .inner .icon.plus span {
	width:0.4rem;
	height:0.05rem;
	background-color:var(--color-dark);
	position:absolute;
	left:50%;
	top:50%;
}

.button .inner .icon.arrow span:first-child {
	transform:translate(calc(0% - (50% - 0.12rem)),-50%) rotate(-45deg);
}

.button .inner .icon.arrow span:last-child {
	transform:translate(calc(0% - (50% + 0.12rem)),-50%) rotate(45deg);
}

.button .inner .icon.plus span:first-child {
	transform:rotate(90deg);
}

.close {
	box-sizing:border-box;
}

.close span {
	position:absolute;
	top:50%;
	left:50%;
	background-color:var(--color-dark);
	width:1.2rem;
	height:0.1rem;
	border-radius:var(--margin);
}

.close.light-color span {
	background-color:var(--color-light);
}

.close span:first-child {
	transform:translate(-50%,-50%) rotate(45deg);
}

.close span:last-child {
	transform:translate(-50%,-50%) rotate(-45deg);
}

.loader {
    width: 1rem;
    height: 1rem;
    border: 0.2rem solid rgba(255,255,255,0.5);
    border-top: 0.2rem solid var(--color-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform-origin: top left;
}

/* ==========================================================================
   Elements
   ========================================================================== */

.items { 
	display:flex;
	position:absolute;
	right:0;
	flex-direction:column;
	width:100vw;
	height:100svh;
	overflow-y:auto;
	transition:transform var(--transition-time-slow) var(--transition-switch);
}

.items.shifted { 
	transform:translateX(calc((-1) * var(--detail-shift)));
}

.items.moved { 
	transform:translateY(calc((-1) * var(--detail-shift-y)));
}


.items .category { 
	display:flex;
	position:relative;
	flex-direction:column;
	width:100%;
}

.items .category .item {
	width:100%;
	height:100svh;
	flex:none;
	position:relative;
	clip-path: inset(0 0 0 0);
	transition:filter var(--transition-time-slow) var(--transition-switch);
}

.items.shifted .category .item, .items.moved .category .item {
	filter:brightness(0.5);
}

.items .category .item .img {
	width:100%;
	position:relative;
	z-index:0;
	height:100%;
}

.name, .cats {
	position:fixed;
	z-index:1;
	top:50%;
	color:var(--color-light);
	pointer-events:none;
}

.name {
	left:0;
	transform:translateY(-50%);
	padding:calc(var(--margin) / 2) 0;
	box-sizing:border-box;
	transition:transform var(--transition-time-slow) var(--transition-switch)
}

.name.moved:not(.shifted) {
	transform:translateY(calc(((-1) * 50%) - var(--detail-shift-y)));
}

.name span {
	display:inline-block;
	transition:transform var(--transition-time-slow) var(--transition-switch), opacity var(--transition-time-slow) var(--transition-switch);
	overflow:hidden;
}

.name span {
	padding-left:var(--margin);
	box-sizing:border-box;
}

.name span:first-child.shifted {
	transform:translateX(-100%);
	opacity:0;
}

.name span:last-child.shifted {
	transform:translateX(calc((-1) * var(--number-width)));
}

.info {
	position:fixed;
	z-index:1;
	width:33.3vw;
	top:calc(50% + (var(--margin) - 0.4rem));
	left:0;
	color:var(--color-light);
	pointer-events:none;
	transition:opacity var(--transition-time-slow) var(--transition-switch);
	padding-left:calc(var(--margin) + 0.4rem);
	opacity:0;
	
}

.info.shifted {
	transition:opacity var(--transition-time-slow) var(--transition-switch) calc(var(--transition-time-slow) / 1.5);
	opacity:1;
}

.cats {
	right:0;
	display:flex;
	flex-direction:column;
	transform:translateY(var(--cats-translate));
	transition:transform var(--transition-time-slow) var(--transition-switch), opacity var(--transition-time-slow) var(--transition-switch);
}

.cats.shifted {
	transform:translateY(var(--cats-translate)) translateX(100%);
	opacity:0;
}

.cats.moved {
	transform:translateY(calc(var(--cats-translate) - var(--detail-shift-y)));
}

.cats a {
	display:block;
	color:var(--color-light-light);
	text-align:right;
	pointer-events:auto;
	padding:calc(var(--margin) / 2) var(--margin);
	box-sizing:border-box;
}

.cats a.active, .cats a.option {
	color:var(--color-light);
}

.cats a.margin {
	margin-top:var(--margin);
}

.detail {
	width:50vw;
	position:fixed;
	top:0;
	right:0;
	transform:translateX(100%);
	transition:transform var(--transition-time-slow) var(--transition-switch);
	pointer-events:none;
	background:var(--color-light);
	height:100svh;
	overflow-y:auto;
	z-index:3;
	padding:var(--margin);
	box-sizing:border-box;

}

.detail.shifted {
	transform:translateX(0);
	pointer-events:auto;
}

.detail .block {
	width:100%;
	transition:opacity var(--transition-time-slow) var(--transition-switch);
	opacity:0;
}

.detail .block.hidden {
	display:none;
}

.detail.loading {
	filter:brightness(0.5);
	pointer-events:none;
}

.detail.shifted .block {
	opacity:1;
}

.detail .block .heading {
	display:flex;
	flex-direction:column;
	gap:var(--margin-small);
	margin:calc(var(--margin-big) - var(--margin)) 0 var(--margin) 0;
}

.detail .block .elements, .detail .block .options {
	display:flex;
	flex-direction:column;
}

.detail .block .elements .element, .detail .block .options .option {
	padding:var(--margin) 0;
	box-sizing:border-box;
}

.detail .block .options .option.hidden {
	display:none;
}

.detail .block .elements .element:not(:last-child), .detail .block .options .option:not(:last-child) {
	border-bottom:0.1rem solid var(--color-dark-dimmed-lightest);
}

.detail .block .elements .element input, .detail .block .options .option input {
	display:none;
}

.detail .block .elements .element .top, .detail .block .options .option .top {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.detail .block .elements .element .top .left, .detail .block .options .option .top .left {
	display:flex;
	flex-direction:column;
	gap:var(--margin-small);
}

.detail .block .elements .element .top .right .checkbox {
	width:3rem;
	height:3rem;
	border:0.1rem solid var(--color-dark-dimmed-lighter);
	border-radius:var(--border-radius);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	transition:width var(--transition-time) var(--transition-switch);
}

.detail .block .elements .element .top .right .checkbox .radio {
	flex:0.5;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-dark);
	opacity:0;
	text-align:center;
	white-space:nowrap;
	pointer-events:none;
	transition:opacity var(--transition-time) var(--transition-switch), color var(--transition-time) var(--transition-switch), background-color var(--transition-time) var(--transition-switch);
}

.detail .block .elements .element .top .right .checkbox .radio.active {
	background-color:var(--color-dark);
	color:var(--color-light);
}

.detail .block .elements .element .main-check:checked ~ .top .right .checkbox {
	width:16rem;
}

.detail .block .elements .element .main-check:checked ~ .top .right .checkbox .radio {
	opacity:1;
	pointer-events:auto;
}

.detail .block .options .option .top .right .checkbox {
	width:3rem;
	height:3rem;
	border:0.1rem solid var(--color-dark-dimmed-lighter);
	border-radius:0.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:border var(--transition-time) var(--transition-switch), background-color var(--transition-time) var(--transition-switch)
}

.detail .block .options .option .top .right .checkbox .check {
	width:1rem;
	height:0.5rem;
	border-left:2px solid var(--color-light);
	border-bottom:2px solid var(--color-light); 
	transform:rotate(-45deg);
	box-sizing:border-box;
	margin-bottom:0.3rem;
}

.detail .block .options .option .main-check:checked ~ .top .right .checkbox {
	border:0.1rem solid var(--color-dark);
	background-color:var(--color-dark);
}

.detail .block .options .option .extra-check:checked ~ .checkbox .check {
	opacity:1;
}

.detail .block .elements .element .included {
	display:none;
}

.detail .block .elements .element[data-included="1"] .included {
	display:inline;
}

.detail .block .elements .element.topping[data-included="1"] .not-included {
	display:none;
}

.detail .block .elements .element.main .selected, .detail .block .elements .element.main .selected-single {
	display:none;
}

.detail .block .elements .element.main .selected.visible, .detail .block .elements .element.main .selected-single.visible {
	display:inline;
}

.detail .block .notes {
	width:100%;
	margin-bottom:10rem;
}

#buy {
	position:fixed;
	width:50vw;
	background-color:var(--color-light);
	bottom:0;
	right:0;
	z-index:3;
	opacity:0;
	pointer-events:none;
	transform:translateX(100%);
	box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.05);
	transition:transform var(--transition-time-slow) var(--transition-switch), opacity var(--transition-time-slow) var(--transition-switch), filter var(--transition-time-slow) var(--transition-switch);
}

#buy.visible {
	transition:transform var(--transition-time-slow) var(--transition-switch), opacity var(--transition-time-slow) var(--transition-switch) calc(var(--transition-time-slow) / 1.5), filter var(--transition-time-slow) var(--transition-switch);
	opacity:1;
	pointer-events:auto;
	transform:translate(0,0);
}

#buy.loading {
	filter:brightness(0.5);
	pointer-events:none;
}

#buy .inner {
	display:flex;
	justify-content:center;
	align-items:center;
	
}

#buy .inner .qty {
	padding:var(--margin);
	box-sizing:border-box;
	padding-right:0;
}

#buy .inner .qty .cont {
	background-color:var(--color-dark-dimmed-lightest);
	height:var(--button-height);
	border-radius:var(--border-radius);
	position:relative;
}

#buy .inner .qty .cont .arrow {
	width:0.5rem;
	height:0.5rem;
	border-left:1px solid var(--color-dark);
	border-bottom:1px solid var(--color-dark); 
	box-sizing:border-box;
	position:absolute;
	right:var(--margin);
	top:calc(50% - 0.2rem);
	transform:translateY(-50%) rotate(-45deg);
}

#buy .inner .qty .cont select {
	width:100%;
	height:100%;
	padding:0.1rem calc(var(--margin) + 2rem) 0 var(--margin);
	box-sizing:border-box;
	text-align:center;
}

#buy .inner .button {
	flex:1;
	text-align:center;	
}

#buy .inner .button .inner {	
	position:relative;
}

#buy .inner .button .loader {	
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transition:opacity var(--transition-time-slow) var(--transition-switch);
	opacity:0;
}

#buy.loading .inner .button .loader {	
	opacity:1;
}

#buy .inner .button #detail-price {	
	transition:opacity var(--transition-time-slow) var(--transition-switch);
}

#buy.loading .inner .button #detail-price {	
	opacity:0;
}

.bg {
	position:fixed;
	inset:0;
	z-index:2;
	display:none;
}

.bg.visible {
	display:block;
}

#open-orders-button {
	position:fixed;
	z-index:2;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	color:var(--color-light);
	transition:transform var(--transition-time-slow) var(--transition-switch), opacity var(--transition-time-slow) var(--transition-switch);
}

#open-orders-button span {
	padding:var(--margin-big) var(--margin);
	box-sizing:border-box;
	display:block;
}

#open-orders-button.shifted {
	transform:translate(100%,-50%);
	opacity:0;
}

#open-orders-button.moved {
	transform:translate(-50%,calc(((-1) * 50%) - var(--detail-shift-y)));
}

.orders {
	position:fixed;
	z-index:2;
	width:var(--orders-width);
	top:0;
	left:0;
	transform:translateY(100%);
	transition:transform var(--transition-time-slow) var(--transition-switch);
	pointer-events:none;
	background:var(--color-light);
	height:100svh;
	overflow-y:auto;
	z-index:3;
	padding:var(--margin);
	box-sizing:border-box;
}

.orders.moved {
	transform:translateY(0);
	pointer-events:auto;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.bg-container {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

.margin-small-top {
	margin-top:var(--margin-small);
}
 
/* Texts
========================================================================== */

.text-1 {
	font-size:1.5rem;
}

.text-2 {
	font-size:1.3rem;
}

.text-3 {
	font-size:1rem;
}

.text-4 {
	font-size:1.8rem;
}

.upper {
	text-transform:uppercase;
}

.lower {
	text-transform:lowercase;
}

.spacing {
	letter-spacing:0.3rem;
}
	
.bold {
	font-family: 'Bold', Arial, sans-serif;
}

.light {
	opacity:var(--opacity-light);
}

.line {
	line-height:1.5;
}

.text-block {
	display:flex;
	flex-direction:column;
	gap:1rem;
}


/* Graphics
========================================================================== */


/* General
========================================================================== */


/* ==========================================================================
   Animations
   ========================================================================== */
  
.opacity-hover {
	transition: opacity var(--transition-time-fast) var(--transition-regular); 
}

.opacity-hover:active, .color-hover:active {
	 opacity:var(--opacity-light)!important;
}

.color-hover {
	transition: opacity var(--transition-time-fast) var(--transition-regular), color var(--transition-time-slow) var(--transition-switch); 
}

.only-color-hover {
	transition: color var(--transition-time-fast) var(--transition-switch);
}

.only-color-hover:active {
	color:var(--color-dark-dimmed-lighter);
}

.loading-icon {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--color-dark);
    animation: spin 1s infinite linear;
}

/* Keyframes
========================================================================== */

@keyframes spin {
  0% { transform: rotate(0deg) translate(-50%,-50%); }
  100% { transform: rotate(360deg) translate(-50%,-50%); }
}