:root {
  --primary:#00b8ff;
  --gray:#333; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

body {
  padding: 0;
  margin: 0;
  font-family: "Courier New", monospace; }

* {
  box-sizing: border-box; }

::selection {
  color: white;
  background: #00b8ff; }

a {
  color: #f77c09; }

a:visited {
  color: #f77c09; }

a:hover, a:active {
  color: #c76306; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; }

.highlighted {
  position: relative;
  display: inline-block;
  z-index: 0; }

.highlighted::after {
  position: absolute;
  width: 100%;
  height: 40%;
  z-index: -1;
  content: "";
  background-color: #00b8ff;
  bottom: -5%;
  left: 5%; }

button, input[type=submit] {
  color: #333;
  font-family: "Courier New", Courier, monospace;
  background: #fff;
  border: 1px solid #333;
  position: relative;
  cursor: pointer;
  text-align: center;
  padding: 15px 20px; }

button:hover, input[type=submit]:hover {
  background: none; }

button:hover:after, input[type=submit]:hover:after {
  position: absolute;
  content: "";
  z-index: -1;
  height: 100%;
  width: 100%;
  background: #00b8ff;
  left: 5px;
  top: 5px; }

button:disabled, input[type=submit]:disabled {
  background: lightgray;
  color: var(--gray);
  cursor: not-allowed; }

button.square {
  aspect-ratio: 1/1;
  width: 25px;
  padding: 0; }

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column; }

.container {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  padding: 0 10px; }

.checkbox-wrapper {
  padding: 10px 0; }

.checkbox-wrapper input[type=checkbox] {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0; }

.checkbox-wrapper input[type=checkbox] + label {
  position: relative;
  padding-left: 30px; }

.checkbox-wrapper input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  height: 16px;
  top: 0;
  width: 16px;
  background: transparent;
  border: 1px solid #00b8ff;
  z-index: 1;
  left: 0; }

.checkbox-wrapper input[type=checkbox]:checked + label:after {
  background: #00b8ff; }

.checkbox-wrapper input[type=checkbox]:checked + label:before {
  content: "";
  height: 11px;
  position: absolute;
  width: 4px;
  top: 0;
  background: none;
  z-index: 6;
  transform: rotate(45deg);
  left: 6px;
  top: 1px;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff; }

body[data-theme=dark] .app {
  background-color: #666;
  color: white; }

body[data-theme=dark] input[type=text] {
  background: #666;
  color: white; }

body[data-theme=dark] button, body[data-theme=dark] input[type=submit] {
  border-color: white; }

body[data-theme=dark] button:hover, body[data-theme=dark] input[type=submit]:hover {
  color: white; }

body[data-theme=dark] button:disabled, body[data-theme=dark] input[type=submit]:disabled {
  background: #333;
  color: white; }

:global :root {
  --primary: #00b8ff;
  --gray: #333; }

:global body {
  padding: 0;
  margin: 0;
  font-family: 'Courier New', monospace; }

:global * {
  box-sizing: border-box; }

:global ::selection {
  color: white;
  background: #00b8ff; }

:global a {
  color: #f77c09; }
  :global a:visited {
    color: #f77c09; }
  :global a:hover, :global a:active {
    color: #c76306; }

:global h1, :global h2, :global h3, :global h4, :global h5, :global h6 {
  font-weight: 700; }

:global .highlighted {
  position: relative;
  display: inline-block;
  z-index: 0; }
  :global .highlighted::after {
    position: absolute;
    width: 100%;
    height: 40%;
    z-index: -1;
    content: '';
    background-color: #00b8ff;
    bottom: -5%;
    left: 5%; }

:global button,
:global input[type="submit"] {
  color: #333;
  font-family: 'Courier New', Courier, monospace;
  background: #fff;
  border: 1px solid #333;
  position: relative;
  cursor: pointer;
  text-align: center;
  padding: 15px 20px; }
  :global button:hover,
  :global input[type="submit"]:hover {
    background: none; }
    :global button:hover:after,
    :global input[type="submit"]:hover:after {
      position: absolute;
      content: '';
      z-index: -1;
      height: 100%;
      width: 100%;
      background: #00b8ff;
      left: 5px;
      top: 5px; }
  :global button:disabled,
  :global input[type="submit"]:disabled {
    background: lightgray;
    color: var(--gray);
    cursor: not-allowed; }

:global button.square {
  aspect-ratio: 1 / 1;
  width: 25px;
  padding: 0; }

:global .app {
  min-height: 100vh;
  display: flex;
  flex-direction: column; }

:global .container {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  padding: 0 10px; }

:global .checkbox-wrapper {
  padding: 10px 0; }
  :global .checkbox-wrapper input[type=checkbox] {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0; }
    :global .checkbox-wrapper input[type=checkbox] + label {
      position: relative;
      padding-left: 30px; }
      :global .checkbox-wrapper input[type=checkbox] + label:after {
        content: '';
        position: absolute;
        height: 16px;
        top: 0;
        width: 16px;
        background: transparent;
        border: 1px solid #00b8ff;
        z-index: 1;
        left: 0; }
    :global .checkbox-wrapper input[type=checkbox]:checked + label:after {
      background: #00b8ff; }
    :global .checkbox-wrapper input[type=checkbox]:checked + label:before {
      content: '';
      height: 11px;
      position: absolute;
      width: 4px;
      top: 0;
      background: none;
      z-index: 6;
      transform: rotate(45deg);
      left: 6px;
      top: 1px;
      border-bottom: 2px solid #ffffff;
      border-right: 2px solid #ffffff; }

:global body[data-theme="dark"] .app {
  background-color: #666;
  color: white; }

:global body[data-theme="dark"] input[type="text"] {
  background: #666;
  color: white; }

:global body[data-theme="dark"] button,
:global body[data-theme="dark"] input[type="submit"] {
  border-color: white; }
  :global body[data-theme="dark"] button:hover,
  :global body[data-theme="dark"] input[type="submit"]:hover {
    color: white; }
  :global body[data-theme="dark"] button:disabled,
  :global body[data-theme="dark"] input[type="submit"]:disabled {
    background: #333;
    color: white; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

footer.svelte-13qh0a {
  text-align: center;
  color: #ccc;
  margin-top: auto;
  padding: 10px 0; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.header.svelte-1td3o2z {
  height: 50px;
  background: #333; }

.container.svelte-1td3o2z {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%; }

.product-list.svelte-1piv6w1 {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  padding-left: 0; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.basket-actions.svelte-966t1y {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0; }

button.svelte-966t1y {
  padding: 10px;
  width: 100%;
  max-width: 320px; }

button.svelte-966t1y:hover:after {
  left: 5px;
  bottom: -5px; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.container.svelte-1pcpbmh.svelte-1pcpbmh {
  display: flex;
  flex-direction: column;
  padding: 0; }

@media only screen and (min-width: 767px) {
  .container.svelte-1pcpbmh.svelte-1pcpbmh {
    flex-direction: row; } }

.container.svelte-1pcpbmh .col-1.svelte-1pcpbmh, .container.svelte-1pcpbmh .col-2.svelte-1pcpbmh {
  width: 100%; }

.container.svelte-1pcpbmh .col-2.svelte-1pcpbmh {
  padding: 0 10px; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.totals.svelte-189u4v8.svelte-189u4v8 {
  padding: 20px;
  border: 1px solid #333; }

@media only screen and (min-width: 767px) {
  .totals.svelte-189u4v8.svelte-189u4v8 {
    margin: 20px 0; } }

.totals-grid.svelte-189u4v8.svelte-189u4v8 {
  display: flex;
  flex-direction: column; }

@media only screen and (min-width: 767px) {
  .totals-grid.svelte-189u4v8.svelte-189u4v8 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); } }

.totals-grid.svelte-189u4v8 div.svelte-189u4v8 {
  padding: 10px; }

.totals-grid.svelte-189u4v8 span.svelte-189u4v8 {
  display: block;
  font-weight: 700; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.delivery-label.svelte-4v7l0w.svelte-4v7l0w {
  background-color: var(--primary);
  color: white;
  padding: 5px; }

.delivery-method.svelte-4v7l0w.svelte-4v7l0w {
  margin: 10px 0; }

.delivery-method__price.svelte-4v7l0w.svelte-4v7l0w {
  color: #aaa; }

input[type=radio].svelte-4v7l0w.svelte-4v7l0w {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

input[type=radio].svelte-4v7l0w:checked ~ .radio-label.svelte-4v7l0w:after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  left: 4px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  background-color: var(--primary); }

.radio-label.svelte-4v7l0w.svelte-4v7l0w {
  position: relative;
  padding-left: 40px;
  cursor: pointer; }

.radio-label.svelte-4v7l0w.svelte-4v7l0w:before {
  position: absolute;
  width: 18px;
  content: "";
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

input[type=checkbox].svelte-rbi9rx.svelte-rbi9rx {
  width: 0;
  height: 0;
  visibility: hidden; }

input[type=checkbox].svelte-rbi9rx:checked ~ label.svelte-rbi9rx {
  background: #666666; }

input[type=checkbox].svelte-rbi9rx:checked ~ label.svelte-rbi9rx:before {
  transform: translateX(25px);
  background: white; }

label.svelte-rbi9rx.svelte-rbi9rx {
  background: white;
  height: 25px;
  width: 50px;
  border-radius: 15px;
  display: block;
  position: relative;
  transition: background-color 0.25s ease-in-out; }

label.svelte-rbi9rx.svelte-rbi9rx:before {
  position: absolute;
  content: "";
  width: 21px;
  height: 21px;
  top: 2px;
  background: #333;
  border-radius: 50%;
  left: 2px;
  transition: transform 0.25s ease-in-out, background-color 0.25s ease-in-out; }

.lds-ring.svelte-cxw5sh.svelte-cxw5sh {
  display: block;
  margin: 10px auto;
  position: relative;
  width: 80px;
  height: 80px; }

.lds-ring.svelte-cxw5sh div.svelte-cxw5sh {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--primary);
  border-radius: 50%;
  animation: svelte-cxw5sh-lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--primary) transparent transparent transparent; }

.lds-ring.svelte-cxw5sh div.svelte-cxw5sh:nth-child(1) {
  animation-delay: -0.45s; }

.lds-ring.svelte-cxw5sh div.svelte-cxw5sh:nth-child(2) {
  animation-delay: -0.3s; }

.lds-ring.svelte-cxw5sh div.svelte-cxw5sh:nth-child(3) {
  animation-delay: -0.15s; }

@keyframes svelte-cxw5sh-lds-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

input.svelte-1k1rrua {
  display: block;
  border-radius: 0;
  padding: 10px;
  margin: 5px 0 15px 0;
  width: 100%;
  max-width: 320px;
  border: 1px solid black; }

label.svelte-1k1rrua {
  display: block; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.product.svelte-1cebfrg.svelte-1cebfrg {
  display: grid;
  align-items: center;
  padding: 25px 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 2fr;
  grid-gap: 5px;
  grid-template-areas: "image name name" "qty price action"; }

@media only screen and (min-width: 767px) {
  .product.svelte-1cebfrg.svelte-1cebfrg {
    grid-template-columns: 1fr 3fr repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "image name qty price action";
    grid-gap: 10px; } }

.product.svelte-1cebfrg.svelte-1cebfrg:not(.product:last-of-type) {
  border-bottom: 1px solid #333; }

.product__qty.svelte-1cebfrg.svelte-1cebfrg, .product__price.svelte-1cebfrg.svelte-1cebfrg, .product__action.svelte-1cebfrg.svelte-1cebfrg {
  text-align: center; }

.product__qty.svelte-1cebfrg.svelte-1cebfrg {
  grid-area: qty;
  min-width: 100px; }

.product__price.svelte-1cebfrg.svelte-1cebfrg {
  grid-area: price;
  display: flex;
  flex-direction: column; }

.product__price--tax-inc.svelte-1cebfrg.svelte-1cebfrg {
  font-size: 0.75em;
  width: 120px; }

.product__action.svelte-1cebfrg.svelte-1cebfrg {
  grid-area: action; }

.product__name.svelte-1cebfrg.svelte-1cebfrg {
  font-weight: 600;
  padding: 0 10px;
  grid-area: name; }

.product__image.svelte-1cebfrg.svelte-1cebfrg {
  grid-area: image;
  max-width: 90px;
  justify-self: center; }

@media only screen and (min-width: 767px) {
  .product__image.svelte-1cebfrg.svelte-1cebfrg {
    max-width: none; } }

.product__image.svelte-1cebfrg img.svelte-1cebfrg {
  max-width: 100%;
  margin: 0 auto;
  display: block; }

button.remove.svelte-1cebfrg.svelte-1cebfrg {
  background-color: #f77c09; }

button.remove.svelte-1cebfrg.svelte-1cebfrg:hover:after {
  background-color: #f77c09; }

:root {
  --primary:#00b8ff;
  --gray:#333; }

.product-quanity__value.svelte-1ytkkta {
  width: 1.5em;
  display: inline-block; }