.shop-page {
  background: #f7faf9;
}

.shop-page .site-header {
  box-shadow: 0 1px 0 rgba(8, 27, 34, 0.04);
}

.shop-page .nav-inner .nav-current {
  color: var(--water);
}

.shop-page .nav-inner .nav-current::after {
  transform: scaleX(1);
}

.product-return-bar {
  background: #f3f8f6;
  border-top: 1px solid #e3ece9;
  border-bottom: 1px solid #dce7e3;
}

.product-return-bar .container {
  min-height: 38px;
  display: flex;
  align-items: center;
}

.product-return-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--water);
}

.product-return-bar a:hover {
  color: var(--ink);
}

.product-return-bar svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.product-return-bar span,
.product-return-bar strong,
.product-return-bar small {
  display: block;
}

.product-return-bar strong {
  font-size: 12px;
  font-weight: 850;
}

.product-return-bar small {
  color: var(--muted);
  font-size: 11px;
}

.catalog-page .fish-card {
  scroll-margin-top: 220px;
}

.cart-action {
  position: relative;
}

.cart-count {
  position: absolute;
  top: 2px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  color: var(--paper);
  background: var(--coral);
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}

.catalog-hero {
  padding-top: 38px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumbs a:hover {
  color: var(--water);
}

.breadcrumbs svg {
  width: 14px;
  height: 14px;
}

.catalog-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.catalog-title-row > div:first-child {
  max-width: 820px;
}

.catalog-title-row h1 {
  margin-bottom: 16px;
  font-size: 48px;
}

.catalog-title-row p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

.matrix-key {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.matrix-key-check {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--leaf);
  background: #e4f2ed;
  border: 1px solid #9dc7bc;
  border-radius: 3px;
}

.matrix-key-check svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}

.catalog-shortcuts {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}

.catalog-shortcuts::-webkit-scrollbar {
  display: none;
}

.catalog-shortcuts a {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 0 17px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.catalog-shortcuts a:hover,
.catalog-shortcuts .is-active {
  color: var(--ink);
}

.catalog-shortcuts .is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--water);
}

.catalog-food-card {
  width: min(560px, 100%);
  min-height: 108px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr) 28px;
  align-items: center;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 7px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.catalog-food-card:hover {
  border-color: #adc4be;
  box-shadow: 0 12px 30px rgba(5, 31, 38, 0.08);
}

.catalog-food-card > img {
  width: 154px;
  height: 108px;
  object-fit: cover;
}

.catalog-food-card > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  line-height: 1.35;
}

.catalog-food-card small {
  color: var(--water);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.catalog-food-card strong {
  margin-block: 3px;
  font-size: 20px;
}

.catalog-food-card > span > span {
  color: var(--muted);
  font-size: 13px;
}

.catalog-food-card > svg {
  width: 19px;
  height: 19px;
  color: var(--water);
}

.catalog-section {
  padding: 40px 0 92px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
  gap: 34px;
}

.catalog-filters {
  position: sticky;
  top: 166px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.filter-heading {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  color: var(--paper);
  background: var(--ink-soft);
}

.filter-heading span,
.filter-heading small {
  display: block;
}

.filter-heading span {
  font-size: 15px;
  font-weight: 800;
}

.filter-heading small {
  margin-top: 1px;
  color: #b9cfcc;
  font-size: 11px;
}

.filter-close {
  width: 38px;
  height: 38px;
  display: none;
  place-items: center;
  color: var(--paper);
  background: transparent;
}

.filter-search,
.filter-group {
  padding: 18px 17px;
  border-bottom: 1px solid #e7ecea;
}

.filter-search > label,
.filter-group legend {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.filter-search > div {
  height: 42px;
  display: grid;
  grid-template-columns: 35px 1fr;
  align-items: center;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.filter-search svg {
  width: 16px;
  height: 16px;
  justify-self: end;
  color: var(--muted);
}

.filter-search input {
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  color: var(--ink);
  background: transparent;
  outline: 0;
  font-size: 14px;
}

.filter-search > div:focus-within {
  border-color: var(--water);
  box-shadow: 0 0 0 3px rgba(0, 116, 123, 0.12);
}

.filter-group {
  min-width: 0;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.check-control {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}

.check-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check-control > span {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--paper);
  border: 1px solid #aebdb9;
  border-radius: 3px;
}

.check-control svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

.check-control input:checked + span {
  color: var(--paper);
  background: var(--water);
  border-color: var(--water);
}

.check-control input:focus-visible + span {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

.clear-filters {
  width: 100%;
  min-height: 46px;
  color: var(--water);
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
}

.clear-filters:hover {
  background: var(--spring);
}

.filter-backdrop {
  display: none;
}

.catalog-results {
  min-width: 0;
}

.catalog-toolbar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.toolbar-leading,
.toolbar-controls,
.view-switcher,
.sort-control {
  display: flex;
  align-items: center;
}

.toolbar-leading {
  gap: 14px;
}

.toolbar-leading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.filter-open {
  min-height: 42px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
}

.filter-open svg {
  width: 17px;
  height: 17px;
}

.toolbar-controls {
  gap: 10px;
}

.sort-control {
  position: relative;
  height: 42px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.sort-control > span {
  padding-left: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sort-control select {
  height: 100%;
  padding: 0 34px 0 8px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sort-control > svg {
  position: absolute;
  right: 9px;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.view-switcher {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.view-switcher button {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--paper);
}

.view-switcher button + button {
  border-left: 1px solid var(--line);
}

.view-switcher button.is-active {
  color: var(--paper);
  background: var(--water);
}

.view-switcher svg {
  width: 18px;
  height: 18px;
}

.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 20px;
}

.active-filters button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: var(--ink-soft);
  background: var(--spring);
  border: 1px solid #bfd8d0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.active-filters svg {
  width: 13px;
  height: 13px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fish-card {
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.fish-card:hover {
  border-color: #acc5bf;
  box-shadow: 0 16px 34px rgba(8, 27, 34, 0.1);
  transform: translateY(-2px);
}

.fish-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9efed;
}

.fish-image-wrap > a {
  width: 100%;
  height: 100%;
  display: block;
}

.fish-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.fish-card:hover .fish-image-wrap img {
  transform: scale(1.025);
}

.fish-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.fish-badge {
  padding: 4px 7px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.badge-new {
  background: var(--water);
}

.badge-special {
  background: #b84a2d;
}

.badge-recommended {
  color: var(--ink);
  background: var(--sun);
}

.wishlist-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 27, 34, 0.13);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(8, 27, 34, 0.12);
}

.wishlist-button:hover,
.wishlist-button.is-saved {
  color: #b53d2b;
}

.wishlist-button.is-saved svg {
  fill: currentColor;
}

.wishlist-button svg {
  width: 18px;
  height: 18px;
}

.fish-card-content {
  padding: 18px;
}

.fish-category {
  min-height: 28px;
  margin-bottom: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

.fish-name-row {
  min-height: 62px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fish-name-row > div {
  min-width: 0;
}

.fish-name-row h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 19px;
  line-height: 1.22;
}

.fish-name-row h2 a:hover {
  color: var(--water);
}

.scientific-name {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.fish-price {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
}

.stock-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 12px;
  color: var(--leaf);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.stock-line > span {
  width: 7px;
  height: 7px;
  background: #3a9b66;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e2f0e7;
}

.stock-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--muted);
  font-size: 11px;
}

.stock-matrix th,
.stock-matrix td {
  height: 34px;
  padding: 2px;
  border-bottom: 1px solid #e3e9e7;
  text-align: center;
}

.stock-matrix thead th {
  height: 30px;
  color: #536b70;
  border-top: 1px solid var(--line);
  border-bottom-color: #a8bab6;
  font-size: 10px;
  font-weight: 800;
}

.stock-matrix th:first-child {
  width: 35%;
  text-align: left;
}

.stock-matrix tbody th {
  color: var(--ink-soft);
  font-weight: 650;
}

.stock-check,
.stock-empty {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 3px;
}

.stock-check {
  color: var(--leaf);
  background: #e4f2ed;
  border: 1px solid #9dc7bc;
}

.stock-check:hover {
  color: var(--paper);
  background: var(--water);
  border-color: var(--water);
}

.stock-check svg,
.stock-empty svg {
  width: 14px;
  height: 14px;
}

.stock-check svg {
  stroke-width: 2.8;
}

.stock-empty {
  color: #c5d0cd;
}

.fish-card-actions {
  margin-top: 16px;
}

.choose-fish {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
}

.choose-fish:hover {
  background: var(--water);
}

.choose-fish svg {
  width: 16px;
  height: 16px;
}

.product-grid.is-list {
  grid-template-columns: 1fr;
}

.product-grid.is-list .fish-card {
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr;
}

.product-grid.is-list .fish-image-wrap {
  height: 100%;
  min-height: 345px;
  aspect-ratio: auto;
}

.product-grid.is-list .fish-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
  align-content: center;
  gap: 0 30px;
  padding: 28px 32px;
}

.product-grid.is-list .fish-category,
.product-grid.is-list .fish-name-row,
.product-grid.is-list .stock-line {
  grid-column: 1;
}

.product-grid.is-list .fish-name-row {
  min-height: 78px;
}

.product-grid.is-list .fish-name-row h2 {
  font-size: 25px;
}

.product-grid.is-list .stock-matrix {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
}

.product-grid.is-list .fish-card-actions {
  grid-column: 1;
  max-width: 210px;
}

.empty-results {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 50px 24px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.empty-results[hidden] {
  display: none;
}

.empty-results > svg {
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  color: var(--water);
}

.empty-results h2 {
  margin-bottom: 10px;
  font-size: 28px;
}

.empty-results p {
  margin-bottom: 24px;
  color: var(--muted);
}

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
}

.catalog-pagination a,
.catalog-pagination span,
.catalog-pagination button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
}

.catalog-pagination span {
  color: var(--paper);
  background: var(--water);
  border-color: var(--water);
}

.catalog-pagination button:disabled {
  color: #a9b7b4;
  background: #edf1f0;
  cursor: default;
}

.catalog-pagination a:hover {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.catalog-pagination svg {
  width: 17px;
  height: 17px;
}

.shop-assurances {
  color: var(--paper);
  background: var(--leaf);
}

.shop-assurance-grid {
  min-height: 132px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.shop-assurance-grid a {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 28px 36px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.shop-assurance-grid a:first-child {
  padding-left: 0;
}

.shop-assurance-grid a:last-child {
  padding-right: 0;
  border-right: 0;
}

.shop-assurance-grid a > svg {
  width: 30px;
  height: 30px;
  color: var(--sun);
}

.shop-assurance-grid strong,
.shop-assurance-grid small {
  display: block;
}

.shop-assurance-grid strong {
  margin-bottom: 3px;
  font-size: 15px;
}

.shop-assurance-grid small {
  color: #cde0da;
  font-size: 12px;
}

.shop-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  box-shadow: 0 18px 40px rgba(8, 27, 34, 0.24);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.shop-toast[hidden] {
  display: none;
}

.shop-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.shop-toast svg {
  width: 20px;
  height: 20px;
  color: var(--sun);
}

/* Product detail */

.product-page .catalog-hero {
  padding: 24px 0;
}

.product-page .breadcrumbs {
  margin-bottom: 0;
}

.product-detail-section {
  padding: 46px 0 82px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(480px, 0.96fr);
  align-items: start;
  gap: 50px;
}

.product-gallery {
  position: sticky;
  top: 168px;
}

.product-main-image {
  position: relative;
  overflow: hidden;
  background: #e9efed;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.product-main-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(8, 27, 34, 0.14);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(8, 27, 34, 0.15);
}

.gallery-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.product-kicker {
  margin-bottom: 12px;
  color: var(--water);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.product-summary h1 {
  margin-bottom: 7px;
  font-size: 48px;
}

.product-scientific {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 18px;
}

.product-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.product-price-block,
.product-stock-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-price-block small,
.product-stock-block small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.product-stock-block {
  align-items: flex-end;
  text-align: right;
}

.detail-price {
  font-size: 30px;
  line-height: 1;
}

.detail-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--leaf);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #3a9b66;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e2f0e7;
}

.product-intro {
  margin: 16px 0 12px;
  color: var(--ink-soft);
  font-size: 15px;
}

.product-fact-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.product-fact-line span {
  display: inline-flex;
  align-items: center;
}

.product-fact-line span:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 10px;
  background: var(--water);
  border-radius: 50%;
}

.variant-selector {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.variant-selector legend {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.variant-selector legend small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.variant-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.variant-choice {
  display: block;
  cursor: pointer;
}

.variant-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.variant-option-inner {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name price stepper"
    "size size stepper";
  align-items: center;
  gap: 3px 10px;
  padding: 10px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.variant-choice.is-selected .variant-option-inner {
  background: #eef7f4;
  border-color: var(--water);
  box-shadow: inset 4px 0 0 var(--water);
}

.variant-name strong,
.variant-name small,
.variant-size strong,
.variant-size small {
  display: block;
}

.variant-name {
  min-width: 0;
  grid-area: name;
}

.variant-name strong {
  font-size: 14px;
}

.variant-name small,
.variant-size small {
  color: var(--muted);
  font-size: 11px;
}

.variant-size strong {
  font-size: 13px;
}

.variant-size {
  grid-area: size;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.variant-option-price {
  grid-area: price;
  font-size: 15px;
  text-align: right;
}

.variant-stepper {
  grid-area: stepper;
  height: 34px;
  display: grid;
  grid-template-columns: 28px 26px 28px;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  background: #edf2f0;
  border: 1px solid #c9d7d3;
  border-radius: 4px;
}

.variant-stepper button,
.sticky-quantity-control button {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--ink);
  background: transparent;
}

.variant-stepper button:hover:not(:disabled),
.sticky-quantity-control button:hover:not(:disabled) {
  color: var(--paper);
  background: var(--water);
}

.variant-stepper button:disabled,
.sticky-quantity-control button:disabled {
  color: #9aaba7;
  cursor: not-allowed;
}

.variant-stepper output,
.sticky-quantity-control output {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.variant-stepper svg,
.sticky-quantity-control svg {
  width: 14px;
  height: 14px;
}

.selection-summary {
  min-height: 70px;
  margin-top: 10px;
  padding: 10px 12px;
  color: var(--muted);
  background: #edf3f1;
  border-left: 3px solid var(--water);
  border-radius: 4px;
  font-size: 12px;
}

.selection-summary strong {
  color: var(--ink-soft);
}

.selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selection-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.selection-summary a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--water);
  font-size: 11px;
  font-weight: 800;
}

.selection-summary a[hidden] {
  display: none;
}

.selection-summary a svg {
  width: 13px;
  height: 13px;
}

.purchase-row {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.quantity-control {
  height: 52px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.quantity-control button {
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #edf2f0;
}

.quantity-control button:hover {
  color: var(--paper);
  background: var(--water);
}

.quantity-control input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  outline: 0;
  text-align: center;
  appearance: textfield;
}

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

.quantity-control svg {
  width: 16px;
  height: 16px;
}

.add-cart-button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--ink);
  background: var(--sun);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 850;
}

.add-cart-button:hover {
  color: var(--paper);
  background: var(--water);
}

.add-cart-button svg {
  width: 19px;
  height: 19px;
}

.discount-message {
  min-height: 24px;
  margin: 8px 0 0;
  color: var(--leaf);
  font-size: 12px;
  font-weight: 700;
}

.variant-order-note {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--leaf);
  font-size: 12px;
  font-weight: 700;
}

.quantity-breaks {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  margin-top: 10px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.quantity-breaks > strong,
.quantity-breaks > span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
}

.quantity-breaks > strong {
  color: var(--ink);
  background: #edf3f1;
  font-size: 11px;
}

.quantity-breaks > span {
  justify-content: center;
  flex-direction: column;
  color: var(--muted);
  border-left: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.quantity-breaks b {
  color: var(--leaf);
  font-size: 11px;
}

.purchase-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.purchase-context span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.purchase-context svg {
  width: 15px;
  height: 15px;
  color: var(--water);
}

.bulk-pricing {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.bulk-pricing summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.bulk-pricing summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 500;
}

.bulk-pricing[open] summary::after {
  content: "-";
}

.bulk-pricing table {
  width: 100%;
  border-collapse: collapse;
  background: #f7faf9;
  font-size: 12px;
}

.bulk-pricing th,
.bulk-pricing td {
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.bulk-pricing th:last-child,
.bulk-pricing td:last-child {
  text-align: right;
}

.product-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-promises a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
}

.product-promises a:first-child {
  padding-left: 0;
}

.product-promises a:last-child {
  padding-right: 0;
  border-right: 0;
}

.product-promises svg {
  width: 21px;
  height: 21px;
  color: var(--water);
}

.product-promises span {
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
}

.product-information {
  padding: 82px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.product-tabs {
  display: flex;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--line);
}

.product-tabs button {
  position: relative;
  padding: 0 0 14px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}

.product-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--water);
  transform: scaleX(0);
}

.product-tabs button.is-active {
  color: var(--ink);
}

.product-tabs button.is-active::after {
  transform: scaleX(1);
}

.tab-panel {
  max-width: 1040px;
  padding-top: 38px;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel h2 {
  margin-bottom: 18px;
  font-size: 32px;
}

.tab-panel > p,
.tab-copy p {
  color: var(--ink-soft);
  font-size: 17px;
}

.tab-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 60px;
}

.care-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  border-top: 1px solid var(--line);
}

.care-facts div {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.care-facts div:nth-child(odd) {
  padding-right: 20px;
}

.care-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.care-facts dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.shipping-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.shipping-steps article {
  padding: 24px 0;
  border-top: 3px solid var(--water);
}

.shipping-steps span {
  display: block;
  margin-bottom: 14px;
  color: var(--water);
  font-size: 12px;
  font-weight: 850;
}

.shipping-steps h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.shipping-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.related-section {
  padding: 82px 0 92px;
}

.related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.related-heading h2 {
  margin-bottom: 0;
  font-size: 36px;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.related-fish {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.related-image {
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  background: #e9efed;
}

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

.related-fish > div {
  padding: 17px;
}

.related-fish h3 {
  min-height: 45px;
  margin-bottom: 8px;
  font-size: 17px;
}

.related-fish h3 a:hover {
  color: var(--water);
}

.related-fish span {
  display: block;
  margin-bottom: 13px;
  font-weight: 800;
}

.related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--water);
  font-size: 12px;
  font-weight: 800;
}

.related-link svg {
  width: 14px;
  height: 14px;
}

.gallery-dialog {
  width: min(1120px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
  background: #07171d;
  border: 0;
  border-radius: 6px;
}

.gallery-dialog::backdrop {
  background: rgba(3, 14, 18, 0.88);
}

.gallery-dialog img {
  width: 100%;
  max-height: calc(100vh - 48px);
  object-fit: contain;
}

.gallery-dialog button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border-radius: 4px;
}

.mobile-buy-bar {
  display: none;
}

@media (max-width: 1180px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid.is-list .fish-card-content {
    grid-template-columns: 1fr;
  }

  .product-grid.is-list .stock-matrix,
  .product-grid.is-list .fish-category,
  .product-grid.is-list .fish-name-row,
  .product-grid.is-list .stock-line,
  .product-grid.is-list .fish-card-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .product-detail-grid {
    gap: 42px;
  }

  .related-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .related-fish:last-child {
    display: none;
  }
}

.product-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.product-help svg {
  width: 17px;
  height: 17px;
  color: var(--water);
}

.product-help a {
  color: var(--water);
  font-weight: 800;
}

@media (max-width: 900px) {
  .product-return-bar .container {
    min-height: 32px;
  }

  .product-return-bar a {
    min-height: 32px;
    gap: 7px;
  }

  .product-return-bar strong {
    font-size: 11px;
  }

  .product-return-bar small {
    display: none;
  }

  .catalog-page .fish-card {
    scroll-margin-top: 152px;
  }

  .catalog-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .matrix-key {
    padding-bottom: 0;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-filters {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 410;
    width: min(360px, calc(100% - 42px));
    overflow-y: auto;
    border-width: 0 1px 0 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }

  .filters-open {
    overflow: hidden;
  }

  .filters-open .catalog-filters {
    transform: translateX(0);
  }

  .filter-heading {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .filter-close {
    display: grid;
  }

  .filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: block;
    visibility: hidden;
    background: rgba(3, 17, 25, 0.62);
    opacity: 0;
    transition: opacity 220ms ease, visibility 220ms ease;
  }

  .filters-open .filter-backdrop {
    visibility: visible;
    opacity: 1;
  }

  .filter-open {
    display: inline-flex;
  }

  .product-grid.is-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid.is-list .fish-card {
    display: block;
  }

  .product-grid.is-list .fish-image-wrap {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .product-grid.is-list .fish-card-content {
    display: block;
    padding: 18px;
  }

  .product-grid.is-list .fish-name-row {
    min-height: 62px;
  }

  .product-grid.is-list .fish-name-row h2 {
    font-size: 19px;
  }

  .product-grid.is-list .fish-card-actions {
    max-width: none;
  }

  .shop-assurance-grid {
    grid-template-columns: 1fr;
  }

  .shop-assurance-grid a,
  .shop-assurance-grid a:first-child,
  .shop-assurance-grid a:last-child {
    min-height: 94px;
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .shop-assurance-grid a:last-child {
    border-bottom: 0;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    position: static;
  }

  .product-main-image img {
    max-height: 620px;
  }

  .product-promises {
    max-width: 620px;
  }

  .tab-copy {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .related-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .related-fish:last-child {
    display: block;
  }
}

@media (max-width: 680px) {
  .catalog-hero {
    padding-top: 26px;
  }

  .breadcrumbs {
    margin-bottom: 22px;
    overflow: hidden;
    white-space: nowrap;
  }

  .breadcrumbs span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .catalog-title-row h1 {
    font-size: 36px;
  }

  .catalog-title-row p:last-child {
    font-size: 15px;
  }

  .catalog-shortcuts {
    margin-top: 28px;
    gap: 24px;
  }

  .catalog-food-card {
    min-height: 92px;
    grid-template-columns: 104px minmax(0, 1fr) 24px;
    margin-top: 20px;
  }

  .catalog-food-card > img {
    width: 104px;
    height: 92px;
  }

  .catalog-food-card > span {
    padding: 10px 12px;
  }

  .catalog-food-card strong {
    font-size: 17px;
  }

  .catalog-food-card > span > span {
    display: none;
  }

  .catalog-section {
    padding-top: 24px;
  }

  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .toolbar-leading,
  .toolbar-controls {
    justify-content: space-between;
  }

  .sort-control {
    flex: 1;
  }

  .sort-control select {
    min-width: 0;
    flex: 1;
  }

  .view-switcher {
    display: none;
  }

  .product-grid,
  .product-grid.is-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .fish-image-wrap,
  .product-grid.is-list .fish-image-wrap {
    aspect-ratio: 16 / 10;
  }

  .fish-card-content,
  .product-grid.is-list .fish-card-content {
    padding: 18px 17px 20px;
  }

  .fish-category {
    min-height: 0;
  }

  .fish-name-row,
  .product-grid.is-list .fish-name-row {
    min-height: 58px;
  }

  .fish-name-row h2,
  .product-grid.is-list .fish-name-row h2 {
    font-size: 21px;
  }

  .stock-matrix {
    font-size: 12px;
  }

  .stock-matrix th:first-child {
    width: 37%;
  }

  .stock-matrix th,
  .stock-matrix td {
    height: 38px;
  }

  .stock-check,
  .stock-empty {
    width: 28px;
    height: 28px;
  }

  .catalog-pagination {
    margin-top: 34px;
  }

  .shop-toast {
    right: 14px;
    bottom: 78px;
    left: 14px;
  }

  .product-page .catalog-hero {
    padding: 18px 0;
  }

  .product-page .breadcrumbs {
    margin: 0;
  }

  .product-detail-section {
    padding: 24px 0 72px;
  }

  .product-detail-grid {
    gap: 32px;
  }

  .product-main-image img {
    aspect-ratio: auto;
    max-height: none;
  }

  .product-summary h1 {
    font-size: 38px;
  }

  .product-scientific {
    font-size: 16px;
  }

  .detail-price {
    font-size: 26px;
  }

  .variant-selector legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .variant-options {
    grid-template-columns: 1fr;
  }

  .variant-option-inner {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .variant-size {
    display: flex;
  }

  .selection-summary {
    min-height: 0;
  }

  .purchase-row {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .add-cart-button {
    padding-inline: 10px;
    font-size: 13px;
  }

  .quantity-breaks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quantity-breaks > strong {
    min-height: 38px;
    grid-column: 1 / -1;
    justify-content: center;
  }

  .quantity-breaks > span {
    border-top: 1px solid var(--line);
  }

  .quantity-breaks > span:nth-child(2) {
    border-left: 0;
  }

  .purchase-context {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-promises {
    grid-template-columns: 1fr;
  }

  .product-promises a,
  .product-promises a:first-child,
  .product-promises a:last-child {
    min-height: 50px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-promises a:last-child {
    border-bottom: 0;
  }

  .product-information {
    padding: 58px 0;
  }

  .product-tabs {
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .product-tabs button {
    flex: 0 0 auto;
  }

  .tab-panel {
    padding-top: 30px;
  }

  .tab-panel h2 {
    font-size: 28px;
  }

  .tab-panel > p,
  .tab-copy p {
    font-size: 15px;
  }

  .care-facts {
    grid-template-columns: 1fr;
  }

  .care-facts div:nth-child(odd) {
    padding-right: 0;
  }

  .shipping-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .related-section {
    padding: 60px 0 80px;
  }

  .related-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .related-heading h2 {
    font-size: 30px;
  }

  .related-products {
    grid-template-columns: 1fr;
  }

  .related-fish {
    display: grid;
    grid-template-columns: 128px 1fr;
  }

  .related-fish:last-child {
    display: grid;
  }

  .related-image {
    height: 100%;
    aspect-ratio: auto;
  }

  .related-fish h3 {
    min-height: 0;
  }

  .mobile-buy-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(116px, 0.84fr);
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(8, 27, 34, 0.1);
  }

  .mobile-buy-bar .add-cart-button {
    min-height: 48px;
  }

  .sticky-variant-select {
    position: relative;
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    background: #edf2f0;
    border: 1px solid var(--line);
    border-radius: 5px;
  }

  .sticky-variant-select select {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 34px 0 11px;
    color: var(--ink);
    background: transparent;
    border: 0;
    appearance: none;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
  }

  .sticky-variant-select svg {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .sticky-purchase-action {
    min-width: 0;
  }

  .sticky-purchase-action > [hidden] {
    display: none;
  }

  .sticky-quantity-control {
    height: 48px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    overflow: hidden;
    background: var(--sun);
    border-radius: 5px;
  }

  .sticky-quantity-control output {
    display: grid;
    place-items: center;
    font-size: 16px;
  }

  .sticky-quantity-control button:hover:not(:disabled) {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.42);
  }

  .product-page .site-footer {
    padding-bottom: 68px;
  }

  .gallery-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 420px) {
  .catalog-title-row h1 {
    font-size: 32px;
  }

  .matrix-key {
    font-size: 12px;
  }

  .toolbar-leading p {
    font-size: 12px;
  }

  .sort-control > span {
    display: none;
  }

  .sort-control select {
    padding-left: 12px;
  }

  .product-summary h1 {
    font-size: 34px;
  }

  .purchase-row {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .mobile-buy-bar {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.82fr);
    gap: 8px;
    padding-inline: 10px;
  }

  .mobile-buy-bar .add-cart-button svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-filters,
  .filter-backdrop,
  .fish-card,
  .fish-image-wrap img,
  .shop-toast {
    transition: none;
  }
}

/* Dense category catalog */

.catalog-page .catalog-section {
  padding: 16px 0 76px;
}

.catalog-page .catalog-layout {
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 18px;
}

.catalog-page .catalog-filters {
  top: 150px;
  border-radius: 4px;
}

.catalog-page .filter-heading {
  min-height: 48px;
  padding: 9px 13px;
}

.catalog-page .filter-heading span {
  font-size: 14px;
}

.catalog-page .filter-search,
.catalog-page .filter-group {
  padding: 12px 13px;
}

.catalog-page .filter-search > label,
.catalog-page .filter-group legend {
  margin-bottom: 7px;
  font-size: 11px;
}

.catalog-page .filter-search > div {
  height: 36px;
}

.catalog-page .check-control {
  min-height: 28px;
  gap: 8px;
  font-size: 13px;
}

.catalog-page .check-control > span {
  width: 17px;
  height: 17px;
}

.catalog-page .clear-filters {
  min-height: 40px;
}

.catalog-page .catalog-toolbar {
  min-height: 46px;
  margin-bottom: 10px;
}

.catalog-page .catalog-context h1,
.catalog-page .catalog-context p {
  margin: 0;
}

.catalog-page .catalog-context h1 {
  font-size: 20px;
  line-height: 1.08;
}

.catalog-page .catalog-context p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.catalog-page .filter-open,
.catalog-page .sort-control {
  min-height: 36px;
  height: 36px;
}

.catalog-page .active-filters {
  margin: 0 0 10px;
}

.catalog-page .product-grid,
.catalog-page .product-grid.is-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.catalog-page .fish-card,
.catalog-page .product-grid.is-list .fish-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
}

.catalog-page .fish-card:hover {
  box-shadow: 0 10px 24px rgba(8, 27, 34, 0.08);
  transform: translateY(-1px);
}

.catalog-page .fish-card-summary {
  display: block;
}

.catalog-page .fish-image-wrap,
.catalog-page .product-grid.is-list .fish-image-wrap {
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #eef3f1;
}

.catalog-page .fish-image-wrap img {
  object-fit: contain;
  padding: 4px;
}

.catalog-page .fish-card:hover .fish-image-wrap img {
  transform: none;
}

.catalog-page .fish-card-heading {
  min-height: 68px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 10px 11px 8px;
  border-top: 1px solid #edf1ef;
}

.catalog-page .fish-card-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.22;
}

.catalog-page .fish-card-heading h2 a:hover,
.catalog-page .fish-card-link:hover {
  color: var(--water);
}

.catalog-page .scientific-name {
  width: 100%;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-page .fish-card-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
  padding: 5px 2px 0;
  border-top: 1px solid #edf1ef;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.catalog-page .fish-card-link svg {
  width: 13px;
  height: 13px;
}

.catalog-page .fish-card-availability {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 10px 8px;
  border-top: 1px solid #edf1ef;
}

.catalog-page .availability-label {
  margin: 0 -10px;
  padding: 6px 10px 5px;
  color: var(--water);
  background: #f3f8f6;
  border-bottom: 1px solid #dfe9e6;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.catalog-page .offer-summary {
  display: grid;
}

.catalog-page .offer-row {
  min-height: 51px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 7px 1px;
  border-bottom: 1px solid #edf1ef;
}

.catalog-page .offer-row:hover .offer-class strong,
.catalog-page .offer-row:hover .offer-price strong {
  color: var(--water);
}

.catalog-page .offer-row-main,
.catalog-page .offer-row-meta,
.catalog-page .offer-class,
.catalog-page .offer-sexes {
  display: flex;
  align-items: center;
}

.catalog-page .offer-row-main,
.catalog-page .offer-row-meta {
  justify-content: space-between;
  gap: 7px;
}

.catalog-page .offer-class {
  min-width: 0;
  gap: 5px;
}

.catalog-page .offer-class strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-page .offer-class small {
  padding: 2px 4px;
  color: #536b70;
  background: #e7efed;
  border-radius: 2px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.catalog-page .offer-price {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.catalog-page .offer-price strong {
  color: var(--ink);
  font-size: 12px;
}

.catalog-page .offer-size {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
}

.catalog-page .offer-sexes {
  gap: 3px;
}

.catalog-page .offer-sexes::before {
  margin-right: 1px;
  color: var(--muted);
  content: "Sex";
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.catalog-page .offer-sexes abbr {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: var(--water);
  background: #eef6f4;
  border: 1px solid #c9dfda;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
}

.catalog-page .stock-matrix {
  font-size: 9px;
}

.catalog-page .stock-matrix th,
.catalog-page .stock-matrix td {
  height: 25px;
  padding: 1px;
}

.catalog-page .stock-matrix thead th {
  height: 23px;
  font-size: 8px;
}

.catalog-page .stock-matrix th:first-child {
  width: 38%;
}

.catalog-page .stock-check,
.catalog-page .stock-empty {
  width: 19px;
  height: 19px;
}

.catalog-page .stock-check svg,
.catalog-page .stock-empty svg {
  width: 11px;
  height: 11px;
}

@media (max-width: 1280px) {
  .catalog-page .product-grid,
  .catalog-page .product-grid.is-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .catalog-page .product-grid,
  .catalog-page .product-grid.is-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .catalog-page .catalog-section {
    padding-top: 10px;
  }

  .catalog-page .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-page .catalog-filters {
    top: 0;
  }
}

@media (max-width: 680px) {
  .catalog-page .catalog-section {
    padding: 8px 0 54px;
  }

  .catalog-page .catalog-toolbar {
    min-height: 43px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
  }

  .catalog-page .toolbar-leading,
  .catalog-page .toolbar-controls {
    justify-content: flex-start;
    gap: 8px;
  }

  .catalog-page .catalog-context {
    min-width: 0;
    margin-right: auto;
  }

  .catalog-page .catalog-context h1 {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-page .catalog-context p {
    font-size: 10px;
  }

  .catalog-page .toolbar-leading p {
    font-size: 12px;
    white-space: nowrap;
  }

  .catalog-page .filter-open,
  .catalog-page .sort-control {
    min-height: 34px;
    height: 34px;
  }

  .catalog-page .filter-open {
    padding-inline: 10px;
  }

  .catalog-page .sort-control > span {
    display: none;
  }

  .catalog-page .sort-control select {
    max-width: 132px;
    padding-left: 10px;
    font-size: 12px;
  }

  .catalog-page .product-grid,
  .catalog-page .product-grid.is-list {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .catalog-page .fish-card-summary {
    display: grid;
    grid-template-columns: clamp(150px, 32vw, 210px) minmax(0, 1fr);
    min-height: clamp(116px, 24vw, 158px);
  }

  .catalog-page .fish-image-wrap,
  .catalog-page .product-grid.is-list .fish-image-wrap {
    height: 100%;
    min-height: clamp(116px, 24vw, 158px);
    aspect-ratio: auto;
  }

  .catalog-page .fish-card-heading {
    min-height: clamp(116px, 24vw, 158px);
    padding: 9px 10px 8px;
    border-top: 0;
    border-left: 1px solid #edf1ef;
  }

  .catalog-page .offer-row {
    min-height: 48px;
  }

  .catalog-page .fish-card-heading h2 {
    font-size: 15px;
  }

  .catalog-page .fish-card-availability {
    padding: 0 8px 7px;
  }

  .catalog-page .stock-matrix th,
  .catalog-page .stock-matrix td {
    height: 24px;
  }

  .catalog-page .stock-matrix thead th {
    height: 22px;
  }

  .catalog-page .shop-assurance-grid a,
  .catalog-page .shop-assurance-grid a:first-child,
  .catalog-page .shop-assurance-grid a:last-child {
    min-height: 74px;
    padding: 14px 0;
  }
}

@media (max-width: 420px) {
  .catalog-page .catalog-toolbar {
    gap: 5px;
  }

  .catalog-page .toolbar-leading {
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
  }

  .catalog-page .toolbar-controls {
    flex: 0 1 96px;
  }

  .catalog-page .catalog-context h1 {
    max-width: 150px;
    font-size: 15px;
  }

  .catalog-page .filter-open {
    width: 32px;
    min-width: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }

  .catalog-page .filter-open svg {
    width: 16px;
    height: 16px;
  }

  .catalog-page .toolbar-leading,
  .catalog-page .toolbar-controls {
    gap: 5px;
  }

  .catalog-page .filter-open {
    padding-inline: 8px;
  }

  .catalog-page .sort-control select {
    width: 94px;
    max-width: 94px;
    padding: 0 26px 0 8px;
    text-overflow: ellipsis;
  }

}

@media (max-width: 340px) {
  .catalog-page .catalog-context h1 {
    max-width: 132px;
    font-size: 13px;
  }

  .catalog-page .toolbar-controls {
    flex-basis: 110px;
  }

  .catalog-page .sort-control select {
    width: 108px;
    max-width: 108px;
    padding-right: 23px;
    font-size: 11px;
  }
}