@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url("/assets/css/ws-var.css?l9818414ss8313");

@import url("/assets/css/ws-structure.css?l9818ss4141833");

@import url("/assets/css/ws-cols.css?l9818414ss8133");

@import url("/assets/css/ws-elements.css?l9818ss4141833");



.header-container {
width: 100%;
display: grid;
grid-template-columns: 39% 22% 39%;
padding-top: 1em;
color: #ffffff;
}

.header-container a {
color: #ffffff;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px dotted #ffffff;
}

.header-container a:hover {
color: #000000;
border-color: #000000;
}

.header-container-left {
padding-left: 0.5em;
}

.header-container-right {
text-align: right;
padding-right: 0.5em;
}

.header-container-right div {
display: inline-block;
padding-left: 10px;
cursor: pointer;
}

.header-container-right a {
text-decoration: none;
padding-bottom: 0px;
border-bottom: none;
}

.header-container-right a span.basket-text {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px dotted #ffffff;
}

.header-container-right a:hover span.basket-text {
color: #000000;
border-color: #000000;
}

.header-container ul {
list-style: none;
}

.header-container li {
display: inline;
}

.header-container li.phone-number {
font-weight: 600;
color: #000000;
}

.header-container-left li {
display: inline;
padding-right: 1em;
}

.header-container-right li {
display: inline;
padding-left: 1em;
}

.header-container i.separator-icon {
font-size: 4px;
opacity: 0.3;
color: var(--colour-principal-green);
vertical-align: 3px;
}

.header-container i.fa-phone-alt {
color: #000000;
}

.freebies-link {
background: #000000;
padding: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.7em;
border-radius: 4px;
line-height: 1.2em;
color: #eab53e!important;
border-color: #eab53e!important;
font-weight: 500;
font-size: 15px;
text-transform: uppercase;
}

.freebies-link:hover {
background: #eab53e;
color: #000000!important;
}

.top-mast-basket-circle {
display: inline-block;
background: #fec665;
color: #000000;
border-radius: 50%;
padding: 3px;
padding-top: 4px;
height: 26px;
width: 26px;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 16px;

font-family: Roboto, sans-serif;
font-weight: 700;
font-size: 15px;
/*line-height: 1.2em;*/
}


.header-container-right a:hover span.top-mast-basket-circle {
background: #000000;
color: #fec665;
}


.navigation-container {
/*position: fixed;*/
}

.navigation {
width: 100%;
display: grid;
grid-template-columns: 39% 22% 39%;
padding-top: 0em;
}

.navigation img {
max-width: 100%;
}

.navigation-left {
padding-top: 5em;
text-align: left;
}

.navigation-right {
padding-top: 5em;
text-align: right;
}

#navLinks3 {
display: none;
}

#navLinks4 {
display: none;
}

.navigation-logo {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 18px;
text-align: center;
color: #c6dde0;
}

.navigation-logo a {
display: block;
margin-top: 1em;
}

.navigation ul {
list-style: none;
padding: 0em;
margin: 0em;
}

.navigation li {
display: inline-block;
background: #ffffff;
border-radius: 4px;
padding: 0.2em;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 20px;
}

.navigation a {
display: inline-block;
text-decoration: none;
background: var(--colour-green);
color: #ffffff;
border-radius: 4px;
padding: 0.5em;
padding-bottom: 0.4em;
padding-left: 1em;
padding-right: 1em;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
line-height: 1;
box-shadow: -3px 3px #000000;
}

.navigation a.plain, .navigation a.plain:hover {
display: block;
background: none;
box-shadow: none;
border-radius: none;
}

.navigation a.hig {
background: #ffffff;
color: #000000;
}

.navigation a.perm-hig {
background: #fec665;
color: #000000;
}

.navigation a:hover {
background: #ffffff;
color: var(--colour-green);
}

.navigation-left a {
margin-right: 2em;
}

.navigation-left a:last-child {
margin-right: 0em;
}

.navigation-right a {
margin-left: 2em;
}

.navigation-right a:first-child {
margin-left: 0em;
}



.content-container {
padding-top: 4em;
}

.ordering-container {
display: grid;
grid-template-columns: 65% 30%;
grid-column-gap: 5%;
padding-top: 0em;
}

.menu-container {
padding-bottom: 5em;
}



.menu-tabs {
width: 40%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 5px;
padding: 0.5em;
background: #fec665;
border-radius: 10px;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #000000;
margin-bottom: 4em;
}

.menu-tabs div {
text-align: center;
padding: 0.5em;
}

.menu-tabs div:hover {
color: #ffffff;
}

.menu-tabs a {
text-decoration: none;
}

.menu-tabs div.selected {
background: #fde1b2;
border-radius: 6px;
}

.menu-tabs div.selected:hover {
cursor: default;
color: #000000;
}



.menu-container h2 {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 36px;
color: #000000;
/*padding-left: 0.5em;*/
margin-bottom: 0.3em;
}

.menu-category-container {
margin-bottom: 5em;
}

.menu-category-container-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 40px;
grid-row-gap: 40px;
}

.menu-intro-container {
padding: 1em;
background: rgba(255, 255, 255, 0.5);
border-radius: 6px;
}

.menu-category-intro {
margin-bottom: 1em;
color: #ffffff;
font-size: 18px;
font-weight: 400;
}

.menu-category-instruction {
margin-bottom: 3em;
color: #ffffff;
font-size: 16px;
font-weight: 300;
}

.menu-category-instruction img {
width: 60px;
vertical-align: middle;
}


.menu-item {
/*border: 1px solid #89b9bd;
border-radius: 6px;*/
}

.menu-item-inner {
padding: 1em;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
cursor: pointer;
}

.menu-item-inner:hover {
background: rgba(255, 255, 255, 0.2);
}

.menu-item-selected {
background: rgba(255, 255, 255, 0.4);
border-radius: 6px;
}

.menu-item-selected .menu-item-title {
color: #000000;
}


.menu-item-icon {
padding-bottom: 1em;
}

.menu-item-icon-img {
display: inline-block;
}

.menu-item-select-link {
vertical-align: top;
display: inline-block;
margin-left: 1em;
margin-top: 0.5em;
font-size: 12px;
background: #ffffff;
padding: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;
border-radius: 4px;
}

.menu-item-select-link i {
font-size: 16px;
}

.menu-item-icon img {
width: 60px;
}

.menu-item-title {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 30px;
color: #ffffff;
}

.menu-item-description {
padding-bottom: 0.5em;
}

.menu-item-price {
display: inline-block;
background: #fec665;
color: #000000;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 12px;
padding: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;
border-radius: 4px;
}

.menu-item-more-info-link {
padding-left: 1em;
}

.menu-item-more-info-link a {
font-size: 14px;
color: #549da4;
}

.menu-item-more-info-link span {
font-size: 14px;
color: #2a6469;
padding-bottom: 1px;
border-bottom: 1px dotted #2a6469;
cursor: pointer;
}

.menu-item-more-info-link span:hover {
color: #ffffff;
border-color: #ffffff;
}



.page-title {
color: #ffffff;
/*font-family: Roboto, sans-serif;
font-weight: 900;*/
font-family: "Lobster", sans-serif;
font-weight: 400;
font-size: 36px;
text-shadow:
-3px 2px 0 #729ea3;

margin-bottom: 1em;

/*
background: #495B69;

padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
border-radius: 6px;
box-shadow:
inset 2px 2px 4px rgba(0,0,0,0.18),
inset -1px -1px 2px rgba(119,144,164,0.5);*/
}



.basket-page-items-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}

.basket-page-items-container .basket-item {
margin-bottom: 0em;
}


.basket-summary-container {
padding-bottom: 4em;
}

.basket-summary-outer {
/*position: sticky;
top: 20px;*/
}

.basket-summary {
padding-right: 5px;
/*max-height: 50vh;*/
overflow-y: auto;

-webkit-overflow-scrolling: touch;

/* Firefox */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.7) transparent;
}


/* Chrome, Edge, Safari */
.basket-summary::-webkit-scrollbar {
    width: 6px;
}

.basket-summary::-webkit-scrollbar-track {
    background: transparent;
}

.basket-summary::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.7);
    border-radius: 999px;
}

/* Hover */
.basket-summary::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,1);
}

/* While clicking/dragging */
.basket-summary::-webkit-scrollbar-thumb:active {
    background: rgba(255,255,255,0.5);
}


.basket-date-message {
display: block;
padding: 0.5em;
padding-top: 0.3em;
padding-bottom: 0.3em;
background: #000000;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 0.7em;
color: #f83148;
line-height: 1em;
text-align: center;
}

.out-of-stock-message span {
font-size: 24px;
color: #fec665;
}


input.basket-date {
width: 100%;
background: #ffffff;
border: none;
padding: 0.5em;
font-family: Roboto, sans-serif;
font-weight: 300;
font-size: 16px;
color: #000000;
}

select.basket-time {
width: 100%;
font-family: Roboto, sans-serif;
font-weight: 300;
font-size: 16px;
color: #000000!important;
line-height: 1.3;
padding: 0.5em;
background: #ffffff;
border: none;
border-radius: none!important;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}


.basket-title {
display: grid;
grid-template-columns: 65% 35%;
grid-column-gap: 0%;
padding: 0.5em;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
margin-bottom: 4em;
}

.basket-title-inner {
display: inline-block;
background: #495B69;
color: #ffffff;
padding: 0.5em;
border-radius: 6px;
}

.basket-link {
display: inline-block;
padding-left: 0.5em;
}

.basket-link a {
font-weight: 400;
color: #ffffff;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px dotted #ffffff;
}

.basket-link a:hover {
color: #000000;
border: none;
}

.basket-title-checkout {
text-align: right;
}

.basket-title-checkout a {
display: inline-block;
text-decoration: none;
/*background: var(--colour-bright-green);*/
background: #000000;
background: var(--colour-grey-blue);
color: #ffffff;
border-radius: 4px;
padding: 0.5em;
padding-bottom: 0.4em;
padding-left: 1em;
padding-right: 1em;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
line-height: 1;
box-shadow: -3px 3px #000000;
}

.basket-title-checkout a:hover {
background: #ffffff;
color: #000000;
}


.empty-basket {
padding: 1.5em;
border-radius: 6px;
background: #fec665;
color: #000000;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.5;
}


.basket-item {
padding-bottom: 1em;
display: grid;
grid-template-columns: 24% 72%;
grid-column-gap: 4%;
border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
margin-bottom: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 14px;
}

.basket-item-main-details {
padding: 1em;
padding-right: 0em;
}

.basket-item-image {
text-align: center;
margin-bottom: 1em;
}

.basket-item img {
max-width: 70%;
}

.basket-item-topping-details {

}

.basket-item-remove-outer {
display: grid;
grid-template-columns: 70% 30%;
}

.basket-item-remove {
padding: 0.6em;
text-align: right;
font-size: 18px;
color: var(--colour-red);
cursor: pointer;
}

.basket-item-remove:hover {
color: #ffffff;
}

.basket-item-details {
padding: 1em;
padding-left: 0em;
padding-top: 0em;
}

.basket-item-base-name {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1em;
color: #ffffff;
text-align: center;
margin-bottom: 0.5em;
}

.basket-item-qty {
width: 85%;
margin: 0 auto;
display: grid;
grid-template-columns: 30% 40% 30%;
}

.basket-item-qty-change {
padding-top: 0.2em;
text-align: center;
font-size: 14px;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
}

.basket-item-qty-change:hover {
background: #ffffff;
}

.basket-item-qty input.txt {
width: 100%;
text-align: center;
padding: 0em;
border: none;
background: none;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 18px;
}

.basket-item-price-outer {
/*width: 85%;*/
padding-top: 1em;
text-align: center;
}

.basket-item-price {
display: inline-block;
background: #fec665;
color: #000000;
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 12px;
padding: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;
border-radius: 4px;
}

.basket-item-row {
display: grid;
grid-template-columns: 40% 58%;
grid-column-gap: 3%;
padding-bottom: 0.8em;
border-bottom: 1px solid #ffffff;
margin-bottom: 0.8em;
}

.basket-item-category-title {
font-weight: 600;
padding-top: 0.2em;
}

.basket-item-toppings {
line-height: 1.5em;
}

.basket-item .basket-item-row:last-child {
padding-bottom: 0em;
margin-bottom: 0em;
border: none;
}




.basket-checkout-summary {
background: #fec665;
padding: 2em;
border-radius: 10px;
}

.basket-checkout-summary-promo-code-box {
padding-left: 1em;
}






.reverse-strikethrough {
display: flex;
align-items: center;
width: 100%;
}

.reverse-strikethrough::before,
.reverse-strikethrough::after {
content: "";
flex: 1;
height: 1px;
background: #c6dde0;
opacity: 0.5;
}

.reverse-strikethrough::before {
margin-right: 10px;
}

.reverse-strikethrough::after {
margin-left: 10px;
}



.out-of-stock-outer {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fec665;
}

.more-info-outer {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fec665;
padding-top: 1em;
}

.out-of-stock {
text-align: center;
}

.out-of-stock i {
display: block;
margin-bottom: 0.5em;
font-size: 40px;
}

.out-of-stock-header {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 30px;
margin-bottom: 0.5em;
}

.out-of-stock-message {
display: inline-block;
padding: 0.5em;
padding-top: 0.3em;
padding-bottom: 0.3em;
background: #000000;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 30px;
margin-bottom: 0.7em;
color: #f83148;
line-height: 1em;
}

.out-of-stock-message span {
font-size: 24px;
color: #fec665;
}

.out-of-stock-good-news {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 26px;
color: #0e914c;
margin-bottom: 0.5em;
}

.out-of-stock-good-news .inline-i {
display: inline;
font-size: 26px;
}

.out-of-stock-choose-something-else {
padding: 1em;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}

.out-of-stock-choose-something-else i {
font-size: 30px;
margin-bottom: 0.2em;
}

.more-info-icon {
text-align: center;
}

.more-info-icon img {
width: 120px!important;
}

.more-info-intro {
display: inline-block;
padding: 0.5em;
background: #000000;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 24px;
color: #fec665;
margin-bottom: 0.7em;
line-height: 1em;
}

.more-info-item-description {
display: block;
margin: 0 auto;
width: 62%;
padding: 0.5em;
padding-top: 0em;
padding-bottom: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
color: #000000;
line-height: 1.5em;
}

.allergens-list {
color: #f83148;
font-weight: 600;
}

.allergens-list-title {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 26px;
}


.allergens-list table {
margin: 0 auto;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid #f83148;
}

.allergens-list td {
font-size: 20px;
text-align: left;
}

.allergens-list td.allergen-icon {
padding-right: 0.5em;
}

.allergens-list i {
display: inline;
font-size: 18px;
}








.coming-soon-container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center; /* horizontal */
align-items: center;     /* vertical */
}

.coming-soon-container-inner {
padding-top: 1em;
display: flex;
flex-direction: column; /* stack vertically */
align-items: center;    /* optional horizontal centering */
text-align: center;
}

.coming-soon-container img {
margin: 0 auto;
max-width: 100%;
}

.coming-soon-header {
padding-bottom: 1em;
}

.coming-soon-header h1 {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 30px;
color: #000000;
}

.coming-soon-header h1 span {
color: #ffffff;
}

.coming-soon-logo {
margin-bottom: 2.5em;
}

.coming-soon-intro {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 26px;
color: #ffffff;
}

.coming-soon-intro p {
line-height: 1.2em;
}

.coming-soon-intro .larger {
font-size: 34px;
}

.coming-soon-intro p.black {
color: #000000;
}

.coming-soon-launch-date {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
padding-bottom: 2em;
}

.coming-soon-launch-date i {
color: #fad278;
}


.coming-soon-VIP {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 22px;
color: #ffffff;
padding-bottom: 1em;
}

.coming-soon-VIP-heading {
padding-bottom: 0.5em;
font-size: 28px;
}

.coming-soon-VIP .black {
color: #286369;
}

.coming-soon-VIP i {
color: #d52046;
}

.coming-soon-input {
width: 90%;
margin: 0 auto;
padding-bottom: 2em;
}

.coming-soon-input-title {
padding-bottom: 0.4em;
color: #ffffff;
}

.coming-soon-input input.txt {
width: 100%;
padding: 0.8em;
padding-top: 1em;
padding-bottom: 1em;
background: #ffffff;
color: #000000;
border: none;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
margin-bottom: 1em;
}



.thin-content-container-outer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.thin-content-container-inner {
display: flex;
flex-direction: column; /* stack vertically */
align-items: center;    /* optional horizontal centering */
text-align: center;
transform: translateY(-6em);
}

.content {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-size: 26px;
color: #ffffff;
}

.content h1 {
text-transform: none;
display: inline-block;
line-height: 1em;
margin-bottom: 1em;
color: #ffffff;
font-family: "Lobster", sans-serif;
font-weight: 400;
font-size: 36px;
text-shadow:
-3px 2px 0 #729ea3;
}

.content h1 span {
color: #ffffff;
}


.content p {
line-height: 1.2em;
}

.content p.small-gap {
margin-bottom: 0.5em;
}

.content .larger {
font-size: 34px;
}

.content p.larger {
font-size: 34px;
}

.content p.black {
color: #000000;
}

.content p.black span {
color: #ffffff;
}

.heart-icon {
color: #d51e48;
}

.spaced-word {
padding-left: 0.5em;
padding-right: 0.5em;
}

.content .normal-copy {
font-family: Roboto, sans-serif;
font-size: 17px;
font-weight: 400;
}

.content .highlighted-copy {
display: inline-block;
padding: 0.4em;
padding-left: 1em;
padding-right: 1em;
background: #000000;
color: #ffffff;
}

.delivery-postcode-check {
width: 55%;
margin: 0 auto;
padding: 1em;
background: #497271;
margin-bottom: 1em;
}

.delivery-postcode-check div {
/*display: flex;
align-items: center;*/
}

.delivery-postcode-check div.sb {
margin-top: -9px;
}

.delivery-postcode-check input.txt {
padding: 0.7em;
background: #ffffff;
border: none;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
}




.delivery-postcode-check input.btn-submit {
padding: 0.7em;
background: #ffffff;
border: none;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
}

.delivery-avail {
display: inline-block;
background: #00ad8a;
color: #ffffff;
padding: 0.3em;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
}

.delivery-not-avail {
background: var(--colour-red)!important;
padding: 0.5em;
margin-bottom: 1em;
}



/*for my account*/

.content_container {
font-size: 20px;
}

.content_container h2 {
font-size: 28px;
}

.content_container a {
color: #a7d8dc;
}

