:root {
  --page-bg: #10141d;
  --surface: #191f2b;
  --surface-raised: #202938;
  --text-main: #edf3fc;
  --text-muted: #a6b2c5;
  --accent: #4da3ff;
  --accent-bright: #74b7ff;
  --border: #2c384a;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--page-bg);
  color: var(--text-main);
  min-height: 100vh;
}

a {
  color: var(--accent-bright);
}

a:hover {
  color: #a7d2ff;
}

.site-header {
  background: rgba(16, 20, 29, .94);
  border-bottom: 1px solid var(--border);
}

.topbar {
  border-bottom: 1px solid var(--border);
}

.topbar-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.topbar-icon-link:hover,
.topbar-icon-link:focus {
  color: var(--text-main);
  background: #2a3749;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: .15rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .15rem;
  margin-right: .25rem;
}

.lang-switch-btn {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .2rem .5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.lang-switch-btn:hover {
  color: var(--text-main);
}

.lang-switch-btn.active {
  background: var(--accent);
  color: #10233e;
}

.badge-count {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #10233e;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}

.dropdown-menu {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .35);
}

.dropdown-item {
  color: var(--text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: #2a3749;
  color: var(--text-main);
}

.dropdown-menu form {
  margin: 0;
}

.brand-mark {
  color: var(--text-main);
  font-weight: 750;
  letter-spacing: .04em;
  text-decoration: none;
}

.brand-mark span {
  color: var(--accent);
}

.brand-logo {
  display: block;
  width: auto;
  height: 44px;
}

.nav-link-custom {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
}

.nav-link-custom:hover,
.nav-link-custom:focus {
  color: var(--text-main);
}

.navbar-toggler {
  border-color: var(--border);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(77, 163, 255, .35);
}

.navbar-collapse {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: .75rem;
}

@media (min-width: 992px) {
  .navbar-collapse {
    background: none;
    border: 0;
  }
}

.navbar-nav .nav-link {
  padding: .7rem .8rem;
  border-radius: .45rem;
}

.navbar-nav .nav-link:hover {
  background: #2a3749;
}

@media (min-width: 992px) {
  .navbar-nav .nav-link:hover {
    background: none;
  }
}

.hero {
  padding: 4.25rem 0 3rem;
}

/* Looping background video behind the whole page (see _base.html). It stays
   fixed while the content scrolls over it. */
.page-bg-video,
.page-bg-poster {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The poster is only for visitors who asked for less motion: they get the
   still image instead of the moving video. */
.page-bg-poster {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-bg-video {
    display: none;
  }

  .page-bg-poster {
    display: block;
  }
}

.eyebrow {
  color: var(--accent-bright);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 48rem;
  font-weight: 750;
  letter-spacing: -.035em;
}

.hero p {
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Product video next to the hero text (below it on smaller screens). */
.hero-video {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  height: auto;
  border-radius: 1rem;
}

.section-heading {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.product-card {
  overflow: hidden;
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: #42638b;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .22);
}

.product-image-wrap {
  aspect-ratio: 4 / 3;
  background: #222c3b;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-wrap--square {
  aspect-ratio: 1 / 1;
}

.product-image-wrap--square .product-image {
  object-fit: contain;
}

/* Side-by-side layout: the square photo is as wide as its column, so on a wide but
   low screen (a small laptop) it would be taller than the window. Limit it to the
   window height minus the header (and minus the thumbnail strip, when there is
   one), so the photo and thumbnails fit. The thumbnails follow the same width, so
   they stay centred under the photo. */
@media (min-width: 992px) {
  .product-gallery > * {
    max-width: max(20rem, calc(100vh - 13rem));
    margin-inline: auto;
  }

  .product-gallery:has(.product-thumbnail-bar) > * {
    max-width: max(20rem, calc(100vh - 19.5rem));
  }
}

.product-thumbnail-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.product-thumbnails {
  display: flex;
  /* Lets the strip shrink and scroll when there are more thumbnails than fit. */
  min-width: 0;
  gap: .5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;  /* the arrow buttons scroll instead */
  padding: .25rem;
}

.product-thumbnails::-webkit-scrollbar {
  display: none;
}

.product-thumbnail-btn {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: .5rem;
  overflow: hidden;
  background: #222c3b;
  cursor: pointer;
  transition: border-color .15s ease;
}

.product-thumbnail-btn:hover {
  border-color: #42638b;
}

.product-thumbnail-btn.active {
  border-color: var(--accent, #42638b);
}

.product-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb-scroll-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.thumb-scroll-btn:hover {
  border-color: #42638b;
}

.image-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #8292aa;
  font-size: .9rem;
}

.product-description {
  color: var(--text-muted);
  min-height: 3.2rem;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.info-table th,
.info-table td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.info-table thead th {
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.info-table tbody tr:hover {
  background: var(--surface-raised);
}

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--text-muted);
}

.highlight-list img {
  flex-shrink: 0;
}

.highlight-list--check li::before {
  content: "\2713";
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.4;
}

.highlight-link {
  color: var(--accent-bright);
  text-decoration: none;
  font-weight: 600;
}

.highlight-link:hover {
  text-decoration: underline;
}

.variant-list {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: .5rem;
}

.variant-row {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(44, 56, 74, .65);
}

.variant-row:last-child {
  border-bottom: 0;
}

.variant-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Product page: size buttons (radio buttons styled as selectable chips) */
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--surface-raised);
  cursor: pointer;
  line-height: 1.25;
  transition: border-color .15s ease, background .15s ease;
}

.size-option:hover {
  border-color: var(--accent);
}

.size-option-name {
  font-weight: 700;
  color: var(--text-main);
}

.size-option-price,
.size-option-stock {
  font-size: .85rem;
  color: var(--text-muted);
}

.btn-check:checked + .size-option {
  border-color: var(--accent-bright);
  background: rgba(77, 163, 255, .15);
  box-shadow: 0 0 0 1px var(--accent-bright);
}

.btn-check:focus-visible + .size-option {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.btn-check:disabled + .size-option {
  opacity: .5;
  cursor: not-allowed;
}

.variant-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: .5rem;
  overflow: hidden;
}

.qty-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--surface-raised);
  color: var(--text-main);
  border: 0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.qty-btn:hover:not(:disabled) {
  background: #2c384a;
}

.qty-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.qty-input {
  width: 2.75rem;
  height: 2.25rem;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  text-align: center;
  font-size: .95rem;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  outline: none;
}

.btn-add-to-cart {
  background: var(--accent-bright);
  color: #10233e;
  border: 0;
  border-radius: .5rem;
  padding: .55rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}

.btn-add-to-cart:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-add-to-cart:disabled {
  background: #45506b;
  color: #8292aa;
  cursor: not-allowed;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-bright);
  border-radius: .5rem;
  padding: .55rem 1.25rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.btn-outline:hover {
  background: var(--accent);
  color: #10233e;
}

.cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cart-item-divider {
  border-bottom: 1px solid rgba(44, 56, 74, .65);
}

.cart-item-media {
  width: 5.5rem;
  flex: 0 0 auto;
}

.cart-item-info {
  flex: 1 1 12rem;
  min-width: 0;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.cart-item-line-total {
  min-width: 4.5rem;
  text-align: right;
  font-weight: 700;
  color: var(--accent-bright);
}

.btn-remove {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}

.btn-remove:hover {
  color: #ffb1b1;
}

.variant-name {
  color: #dce7f7;
}

.variant-price {
  color: var(--accent-bright);
  font-weight: 700;
  white-space: nowrap;
}

.stock-note {
  color: var(--text-muted);
  font-size: .82rem;
}

.stock-note.out-of-stock {
  color: #ffb1b1;
}

.order-status-badge {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.order-status-paid,
.order-status-completed {
  color: #8fe3b0;
  border-color: #2f5c43;
}

.order-status-shipped {
  color: var(--accent-bright);
  border-color: var(--accent);
}

.order-status-cancelled {
  color: #ffb1b1;
  border-color: #6b3636;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed #526176;
  border-radius: 1rem;
  color: var(--text-muted);
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

@media (max-width: 991.98px) {
  .hero {
    padding-top: 3.25rem;
  }
}

@media (max-width: 575.98px) {
  /* Bootstrap's default container gutter (12px/side) reads as cramped on
     phones, with the navbar brand and hero content sitting right at the
     edge of the screen. */
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Forms */

.form-label {
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 600;
}

.form-control,
.form-select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-main);
}

.form-control:focus,
.form-select:focus {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--text-main);
  box-shadow: 0 0 0 .2rem rgba(77, 163, 255, .25);
}

.form-control::placeholder {
  color: #6b7a90;
}

.form-select {
  --bs-form-select-bg-img: none;
}

.form-check-input {
  background-color: var(--surface-raised);
  border-color: var(--border);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-label {
  color: var(--text-muted);
}

.form-error {
  color: #ffb1b1;
  font-size: .82rem;
  margin-top: .3rem;
}

.shipping-method-option {
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface-raised);
  margin-left: 0;
}

.shipping-method-option .form-check-label {
  cursor: pointer;
}

.shipping-method-option--disabled {
  opacity: .55;
}

.shipping-method-option--disabled .form-check-label {
  cursor: not-allowed;
}

/* Checkout step 1 for visitors who aren't signed in: account or guest, side by side
   (stacked on small screens), separated by "or". */
.checkout-choice {
  display: grid;
  gap: 1rem;
}

.checkout-choice-option {
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface-raised);
  padding: 1.25rem;
}

.checkout-choice-option .mb-3:last-child {
  margin-bottom: 0 !important;
}

.checkout-choice-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.checkout-choice-or::before,
.checkout-choice-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .checkout-choice {
    grid-template-columns: 1fr auto 1fr;
  }

  .checkout-choice-or {
    flex-direction: column;
  }

  .checkout-choice-or::before,
  .checkout-choice-or::after {
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

/* Mollie's payment logos are drawn for light backgrounds. */
.payment-method-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  margin-left: 1rem;
  padding: 3px 5px;
  border-radius: .35rem;
  background: #fff;
}

.form-optional-hint {
  color: var(--text-muted);
  font-weight: 400;
}

.form-hint {
  color: var(--text-muted);
  font-size: .8rem;
  margin-top: .3rem;
}

.form-hint ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Checkout */

.checkout-steps {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: .5rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 auto;
  color: var(--text-muted);
}

.checkout-step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
  margin: 0 .5rem;
}

.checkout-step-dot {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .85rem;
  font-weight: 700;
}

.checkout-step-label {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.checkout-step.active .checkout-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #10233e;
}

.checkout-step.active .checkout-step-label,
.checkout-step.done .checkout-step-label {
  color: var(--text-main);
}

.checkout-step.done .checkout-step-dot {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent-bright);
}

/* Completed steps are links back to that step. */
.checkout-step-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
}

.checkout-step-link:hover .checkout-step-dot,
.checkout-step-link:focus-visible .checkout-step-dot {
  background: var(--accent);
  color: #10233e;
}

.checkout-step-link:hover .checkout-step-label,
.checkout-step-link:focus-visible .checkout-step-label {
  text-decoration: underline;
}

/* Phones: four labels don't fit side by side, so only the current step keeps its
   label; the others show just their number. The hidden labels stay readable for
   screen readers (same technique as Bootstrap's .visually-hidden). */
@media (max-width: 575.98px) {
  .checkout-step:not(.active) .checkout-step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .checkout-steps {
    gap: .25rem;
  }

  .checkout-step-dot {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8rem;
  }

  .checkout-step-label {
    font-size: .8rem;
  }

  /* The lines between the numbers take up the free space; the current step keeps
     its natural width, and on the narrowest phones its label wraps to two lines. */
  .checkout-step {
    flex: 1 1 0;
    gap: .4rem;
  }

  .checkout-step.active {
    flex: 0 1 auto;
  }

  .checkout-step:last-child {
    flex: 0 0 auto;
  }

  .checkout-step.active .checkout-step-label {
    white-space: normal;
    line-height: 1.2;
  }

  .checkout-step:not(:last-child)::after {
    min-width: .5rem;
    margin: 0 .35rem;
  }
}

.address-block {
  color: var(--text-main);
  font-style: normal;
  line-height: 1.6;
}

.order-total-row {
  border-top: 1px solid var(--border);
}

/* Terms and conditions */
.terms-list {
  padding-left: 1.5rem;
  max-width: 50rem;
}

.terms-list li {
  margin-bottom: 1rem;
  padding-left: 0.25rem;
}

/* Bioluminescence page */
.bioluminescence-section {
  max-width: 50rem;
}

.bioluminescence-figure {
  margin: 1.5rem 0;
}

.bioluminescence-figure img,
.bioluminescence-figure iframe,
.bioluminescence-figure video {
  border-radius: .75rem;
}

.bioluminescence-figure img {
  max-width: 100%;
  height: auto;
}

.bioluminescence-figure figcaption {
  margin-top: .5rem;
  color: var(--text-muted);
  font-size: .9rem;
}

.media-placeholder {
  border: 1px dashed var(--border);
  border-radius: .75rem;
  background: var(--surface-raised);
}

.media-placeholder > div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.bioluminescence-figure video {
  height: auto;
  background: #000;
}

/* Square videos would fill the whole screen height at full column width. */
.bioluminescence-figure--square {
  max-width: 28rem;
}

.organism-card {
  overflow: hidden;
}

.organism-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
}

.organism-card-credit {
  color: var(--text-muted);
  font-size: .8rem;
}

/* Algae care page */
.care-intro {
  max-width: 50rem;
}

.care-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 50rem;
}

.care-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.care-item:last-child {
  border-bottom: 0;
}

.care-item .care-icon {
  flex-shrink: 0;
}

.care-item h3 {
  font-weight: 700;
}

.faq-list {
  max-width: 50rem;
}

.faq-list h3 {
  margin-top: 2rem;
}

/* Algae care: the icons are transparent PNGs, so give them a white square behind them */
.care-icon {
  background: #fff;
  padding: 6px;
  border-radius: 10px;
}

/* Smaller icons on the home page: same look, scaled down */
.highlight-list .care-icon {
  padding: 4px;
  border-radius: 6px;
}

/* Error pages (404, 403; see _error_page.html). 500.html has its own inline copy. */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 4rem 0;
}

.error-page-inner {
  max-width: 36rem;
}

.error-code {
  margin: 0 0 1.5rem;
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent-bright);
  text-shadow: 0 0 1.5rem rgba(77, 163, 255, .55), 0 0 4rem rgba(77, 163, 255, .3);
}

.error-text,
.error-help {
  color: var(--text-muted);
}