/** Shopify CDN: Minification failed

Line 391:0 Unexpected "}"

**/
/* ═══════════════════════════════════════════════════
   FISH APPAREL — Clean Streetwear Theme
   White + Electric Blue (#2563eb)
   ═══════════════════════════════════════════════════ */

/* === CSS VARIABLES === */
:root {
  --fish-blue: #2563eb;
  --fish-blue-dark: #1d4ed8;
  --fish-navy: #1a1a2e;
  --fish-white: #ffffff;
  --fish-black: #111111;
  --fish-gray: #666666;
  --fish-light-gray: #f8f9fa;
  --fish-border: #e5e7eb;
  --fish-red: #d62828;
  --fish-red-dark: #b51f1f;
}

/* === BASE === */
html, body { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
::selection { background: var(--fish-blue); color: #fff; }
body { background-color: var(--fish-white) !important; color: #333; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fish-blue); }

/* === TRANSITIONS === */
a { transition: color 0.2s ease, opacity 0.2s ease; }

/* === TOP BAR === */
.top-bar {
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-size: 11px !important;
  background-color: var(--fish-white) !important;
  border-bottom: 1px solid var(--fish-border) !important;
  color: var(--fish-blue) !important;
  max-width: 100vw !important;
  /* Do NOT set overflow here. The mobile menu dropdown (.mobile-menu-container)
     is absolutely positioned against #header but sits inside .top-bar, so any
     overflow value other than visible clips it away entirely — the hamburger
     animates to an X and no menu appears. Page-level horizontal scroll is
     already handled by the html, body rule at the top of this file. */
}
.top-bar a { color: var(--fish-blue) !important; }

/* The dismiss X sits absolutely at the bar's right edge, and the content div
   runs the full width underneath it — at 320px the last word rendered on top of
   the X. Symmetric padding keeps any copy clear of it and still centred. */
.promo-banner .promo-banner__content {
  padding-left: 40px;
  padding-right: 40px;
}

/* === HEADER === */
.header {
  background-color: var(--fish-white) !important;
  border-bottom: 1px solid var(--fish-border) !important;
}
.header .logo__text {
  color: var(--fish-black) !important;
  font-weight: 900 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
}
.header .icon-search,
.header .icon-cart,
.header .cart_count { color: var(--fish-black) !important; }
.header a.nav-link,
.header .navbar-link { color: var(--fish-black) !important; }
.header a.nav-link:hover,
.header .navbar-link:hover { color: var(--fish-blue) !important; }

/* --- Hide logo on desktop --- */
[data-desktop-header] .header__logo { display: none !important; }

/* --- Hide search bar --- */
[data-desktop-header] .search-container,
[data-desktop-header] .search-link { display: none !important; }
.mobile_nav ~ .top-bar--right .icon-search { display: none !important; }

/* --- Center nav text on desktop --- */
[data-desktop-header] .main-nav {
  justify-content: center !important;
}
[data-desktop-header] .nav--left,
[data-desktop-header] .nav--right {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* --- More space between nav links --- */
.nav-desktop__tier-1 {
  column-gap: 36px !important;
}

/* --- Disable duplicate sticky nav --- */
.sticky_nav {
  display: none !important;
}

/* --- Scroll-up header: fixed when visible, hidden when scrolling down --- */
.shopify-section--header.fish-header--hidden {
  transform: translateY(-100%);
}
.shopify-section--header.fish-header--fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: var(--fish-white) !important;
  transition: transform 0.3s ease !important;
}

/* --- Fix Products link vertical alignment --- */
.nav-desktop__tier-1 .nav-desktop__tier-1-item {
  vertical-align: middle !important;
}
.nav-desktop__tier-1-item > details[data-nav-desktop-details] {
  margin: 0;
}

/* === MEGA MENU === */
.mega-menu {
  background: var(--fish-white) !important;
  border-top: 2px solid var(--fish-blue) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
}
.mega-menu a { color: var(--fish-black) !important; }
.mega-menu a:hover { color: var(--fish-blue) !important; }
.mega-menu .image-element__wrap { border-radius: 0 !important; }

/* --- Mega Menu Product Grid --- */
.fish-mega-menu-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  width: 100%;
}
.fish-mega-menu-card {
  width: 180px;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}
.fish-mega-menu-card:hover {
  transform: translateY(-3px);
}
.fish-mega-menu-card:focus-visible {
  outline: 2px solid var(--fish-blue);
  outline-offset: 2px;
}
.fish-mega-menu-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--fish-light-gray);
}
.fish-mega-menu-card__image .image-element__wrap {
  height: 100% !important;
  width: 100% !important;
}
.fish-mega-menu-card__image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
.fish-mega-menu-card__title {
  margin: 8px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fish-black) !important;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fish-mega-menu-card:hover .fish-mega-menu-card__title {
  color: var(--fish-blue) !important;
}

/* Mega menu product grid scrollbar */
.fish-mega-menu-grid::-webkit-scrollbar { width: 4px; }
.fish-mega-menu-grid::-webkit-scrollbar-track { background: var(--fish-light-gray); }
.fish-mega-menu-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.fish-mega-menu-grid::-webkit-scrollbar-thumb:hover { background: var(--fish-blue); }

/* Make mega menu full-width for product grid */
.main-nav { position: static !important; }
.main-nav .nav { position: static !important; }
.main-nav .nav-desktop__tier-1 { position: static !important; }
.main-nav .nav-desktop__tier-1-item { position: static !important; }
.main-nav details[data-nav-desktop-details] { position: static !important; }
.mega-menu.dropdown_content {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
  margin-top: 0 !important;
}

/* Mobile mega menu product grid */
@media (max-width: 798px) {
  .fish-mega-menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    max-height: 60vh;
  }
  .fish-mega-menu-card__title {
    font-size: 11px;
  }
}
@media (min-width: 799px) and (max-width: 1024px) {
  .fish-mega-menu-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* === HERO === */
.fish-collage-hero {
  padding: 20px 20px 10px;
  background: var(--fish-white);
  max-width: 1200px;
  margin: 0 auto;
}
.fish-collage-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}
.fish-collage-center img.fish-logo {
  max-width: 400px;
  margin-bottom: 16px;
}
.fish-collage-center .fish-tagline {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 12px;
  color: var(--fish-gray);
  margin-bottom: 24px;
  font-family: 'Oswald', sans-serif;
}
.fish-collage-center .fish-cta {
  display: inline-block;
  background: var(--fish-blue);
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 14px 36px;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'Oswald', sans-serif;
}
.fish-collage-center .fish-cta:hover {
  background: var(--fish-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
@media (max-width: 767px) {
  .fish-collage-hero { padding: 10px 20px 5px; }
  .fish-collage-center img.fish-logo { max-width: 280px; }
}

/* === PHOTO STRIP (Horizontal Gallery) === */
.gallery-section {
  padding: 30px 0 !important;
}
.gallery-section .gallery-cell {
  transition: none;
}
.gallery-section .gallery-cell img {
  transition: none;
}
.gallery-section .gallery-cell:hover img {
  transform: none;
}
.gallery-section:hover .gallery-cell:not(:hover) {
  opacity: 1;
}
.gallery-section .section_title {
  letter-spacing: 6px !important;
  margin-bottom: 20px;
}
.shopify-section--gallery {
  overflow: hidden !important;
}

/* ====== GALLERY SHARED ====== */
.gallery-section.gallery-horizontal {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  padding: 0 !important;
  will-change: transform;
}
.gallery-section.gallery-horizontal i { display: none !important; }
.gallery-section.gallery-horizontal .gallery-cell,
.gallery-section.gallery-horizontal .gallery-cell > a,
.gallery-section.gallery-horizontal .image-element__wrap {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.gallery-section.gallery-horizontal img {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ====== DESKTOP GALLERY (>1024px) ====== */
@media only screen and (min-width: 1025px) {
  .gallery-section.gallery-horizontal .gallery-image-wrapper {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    height: 350px;
    margin: 0 4px 0 0 !important;
    overflow: hidden !important;
  }
}

/* ====== TABLET GALLERY (799px – 1024px) ====== */
@media only screen and (min-width: 799px) and (max-width: 1024px) {
  .gallery-section.gallery-horizontal .gallery-image-wrapper {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    height: 300px;
    margin: 0 4px 0 0 !important;
    overflow: hidden !important;
  }
}

/* ====== MOBILE GALLERY (<799px) ====== */
@media only screen and (max-width: 798px) {
  .gallery-section.gallery-horizontal .gallery-image-wrapper {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    height: 250px;
    margin: 0 4px 0 0 !important;
    overflow: hidden !important;
  }
}

/* Override theme last-child rule that breaks seamless loop */
.gallery-section.gallery-horizontal .gallery-image-wrapper:last-child {
  flex-basis: unset !important;
  flex-grow: 0 !important;
}

.gallery-section.gallery-horizontal img {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* === PRODUCT CARDS === */
.product-wrap {
  transition: transform 0.3s ease;
  background: transparent;
}
.product-wrap:hover { transform: translateY(-4px); }
.product-wrap .product-info { padding: 14px 0; }
.product-wrap .product-info .product__title,
.thumbnail .caption span.title {
  color: var(--fish-black) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
}
.thumbnail .caption span.price,
.product-wrap .price { color: var(--fish-blue) !important; }

/* === BUTTONS === */
.action_button,
.button,
input[type='submit'],
.shopify-payment-button__button {
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  transition: all 0.25s ease !important;
}
.action_button:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
}

/* === SECTION HEADINGS === */
.section .section_title,
.title_container .title,
.homepage_content .title {
  text-transform: uppercase !important;
  letter-spacing: 5px !important;
  color: var(--fish-black) !important;
}

/* === FEATURED COLLECTION (Latest Drops / Best Sellers) === */
.shopify-section--featured-collection {
  border-top: 1px solid var(--fish-border);
  padding-top: 40px !important;
}
.shopify-section--featured-collection .section_title {
  border-bottom: 2px solid var(--fish-blue) !important;
  display: inline-block;
  padding-bottom: 8px;
}


/* === IMAGE-TEXT (Our Story) === */
.image-with-text-container {
  background: var(--fish-white) !important;
}
.image-with-text-container .featured-link--half .heading {
  text-transform: uppercase;
  letter-spacing: 4px;
}

/* --- Mobile: Our Story section --- */
@media only screen and (max-width: 798px) {
  .image-with-text-container .featured-link--half .info {
    width: 100% !important;
    padding: 28px 20px !important;
    text-align: center !important;
  }
  .image-with-text-container .featured-link--half .info .collection_title {
    font-size: 20px;
    letter-spacing: 3px;
  }
  .image-with-text-container .featured-link--half .info .description {
    font-size: 15px !important;
    line-height: 1.6;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .image-with-text-container .featured-link--half .info .image-text__button {
    display: inline-block;
    margin-top: 4px;
  }
}

/* === NEWSLETTER === */
.newsletter-section {
  background-color: var(--fish-light-gray) !important;
  border-top: 1px solid var(--fish-border);
  border-bottom: 1px solid var(--fish-border);
}

/* === FAQ === */
.faq-accordion { background: transparent !important; }
.faq-accordion .faq--title {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-color: var(--fish-border) !important;
  color: var(--fish-black) !important;
  padding: 22px 0 !important;
  font-size: 14px;
}
.faq-accordion .faq--answer {
  color: var(--fish-gray) !important;
  border-color: var(--fish-border) !important;
}
.faq-accordion .faq--title:hover { color: var(--fish-blue) !important; }
.faq-section { border-top: 1px solid var(--fish-border); }

/* === FOOTER === */
.footer {
  border-top: 3px solid var(--fish-blue) !important;
  background-color: #16161d !important;
}
.footer .footer_content,
.footer p,
.footer .description { color: #ffffff !important; }
.footer .footer__heading {
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.footer a { color: #ffffff !important; }
.footer a:hover { color: var(--fish-blue) !important; }
.footer .footer-logo,
.footer .logo { filter: invert(1) brightness(2); max-width: 240px !important; margin-left: 25% !important; }
.footer .footer-menu-wrap {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.footer .footer-menu-wrap > div { vertical-align: middle; }
.footer .footer_credits {
  flex-basis: 100% !important;
  text-align: center !important;
  align-items: center !important;
}
.footer .footer_credits .credits,
.footer .footer-credits__bottom,
.footer .footer-credits__top { text-align: center !important; }
.footer .footer-text .toggle_content { display: block !important; }
.footer .footer-text h6 .icon-down-arrow { display: none !important; }

/* === PRODUCT PAGE === */
.product_section .share-btn.pinterest { display: none !important; }
.product_section { background: var(--fish-white) !important; }
.product_section .product_name {
  text-transform: uppercase;
  letter-spacing: 4px;
}
.product_section .current_price {
  color: var(--fish-blue) !important;
  font-size: 1.4em;
}
.product_section .was_price { color: var(--fish-gray) !important; }

/* --- Hide payment installment widgets --- */
.payment-terms-container,
shopify-payment-terms,
[data-payment-terms-reference] {
  display: none !important;
}

/* --- Hide store pickup info --- */
.surface-pick-up,
.surface-pick-up__modal {
  display: none !important;
}

/* === SIDE CART === */
.mini-cart {
  background: var(--fish-white) !important;
  border-left: 1px solid var(--fish-border) !important;
}
.mini-cart .mini-cart__header {
  border-color: var(--fish-border) !important;
  color: var(--fish-black) !important;
}
.mini-cart .mini-cart__item {
  border-color: var(--fish-border) !important;
}
.mini-cart .mini-cart__item-title {
  color: var(--fish-black) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mini-cart .mini-cart__item-price { color: var(--fish-blue) !important; }

/* ═══════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════ */

/* --- Cart title --- */
.shopify-section--cart-template h1 {
  font-family: 'Oswald', 'Dosis', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 6px !important;
  color: var(--fish-black) !important;
  text-align: center !important;
}
.shopify-section--cart-template .feature-divider {
  max-width: 60px;
  margin: 12px auto 0;
  border-color: var(--fish-blue) !important;
  border-width: 2px !important;
}

/* --- Cart items --- */
.shopify-section--cart-template .cart__item {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--fish-border) !important;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.shopify-section--cart-template .cart__item:last-child {
  border-bottom: none !important;
}

/* Product image in cart */
.shopify-section--cart-template .cart__item--image {
  flex: 0 0 140px;
  width: 140px !important;
  padding: 0 !important;
}
.shopify-section--cart-template .cart__item--image a {
  display: block;
  background: var(--fish-light-gray);
  padding: 8px;
}
.shopify-section--cart-template .cart__item--image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.shopify-section--cart-template .cart__item--image .image-element__wrap {
  max-width: 100% !important;
}

/* Product info */
.shopify-section--cart-template .cart__item--content {
  flex: 1;
  padding: 0 !important;
  min-width: 0;
}
.shopify-section--cart-template .cart__item--title {
  font-family: 'Oswald', 'Dosis', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 0 4px !important;
}
.shopify-section--cart-template .cart__item--title a {
  color: var(--fish-black) !important;
  text-decoration: none !important;
}
.shopify-section--cart-template .cart__item--title a:hover {
  color: var(--fish-blue) !important;
}

/* Variant options */
.shopify-section--cart-template .cart__product-options {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.shopify-section--cart-template .cart__product-option {
  font-size: 12px;
  color: var(--fish-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Price */
.shopify-section--cart-template .modal_price {
  margin: 8px 0 !important;
}
.shopify-section--cart-template .modal_price .money {
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  color: var(--fish-blue) !important;
  font-weight: 700;
}
.shopify-section--cart-template .modal_price .was_price {
  font-size: 13px !important;
  color: var(--fish-gray) !important;
  text-decoration: line-through;
  font-weight: 400;
}

/* Quantity controls — use same absolute approach as wholesale */
.shopify-section--cart-template .product-quantity-box {
  position: relative !important;
  width: 116px !important;
  height: 34px !important;
  border: 1px solid var(--fish-border) !important;
  background: var(--fish-white) !important;
  margin: 8px 0 !important;
  display: block !important;
  float: none !important;
}
.shopify-section--cart-template .product-quantity-box .ss-icon {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 34px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: var(--fish-light-gray) !important;
  color: var(--fish-black) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.shopify-section--cart-template .product-quantity-box .product-minus {
  left: 0 !important;
  border-right: 1px solid var(--fish-border) !important;
}
.shopify-section--cart-template .product-quantity-box .product-plus {
  right: 0 !important;
  border-left: 1px solid var(--fish-border) !important;
}
.shopify-section--cart-template .product-quantity-box .ss-icon:hover {
  background: var(--fish-blue) !important;
  color: var(--fish-white) !important;
}
.shopify-section--cart-template .product-quantity-box .quantity {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 34px !important;
  right: 34px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-align: center !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: var(--fish-white) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
}
.shopify-section--cart-template .product-quantity-box .quantity::-webkit-inner-spin-button,
.shopify-section--cart-template .product-quantity-box .quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Line total */
.shopify-section--cart-template .price_total {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  color: var(--fish-black) !important;
  margin: 8px 0 4px !important;
}
.shopify-section--cart-template .price_total .money {
  color: var(--fish-black) !important;
}

/* Remove button */
.shopify-section--cart-template .cart__remove-btn {
  font-family: 'Oswald', sans-serif !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--fish-gray) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.shopify-section--cart-template .cart__remove-btn:hover {
  color: #dc2626 !important;
}

/* --- Subtotal sidebar --- */
.shopify-section--cart-template .subtotal {
  background: var(--fish-light-gray) !important;
  padding: 28px !important;
  border: 1px solid var(--fish-border) !important;
  position: sticky;
  top: 120px;
}
.shopify-section--cart-template .cart_subtotal {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--fish-black) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--fish-border) !important;
}
.shopify-section--cart-template .cart_subtotal .money {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fish-blue) !important;
}

/* Tax/shipping note */
.shopify-section--cart-template .cart-message {
  font-size: 12px !important;
  color: var(--fish-gray) !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* Savings */
.shopify-section--cart-template .cart_savings {
  display: flex !important;
  justify-content: space-between !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #16a34a !important;
  margin-bottom: 16px !important;
}
.shopify-section--cart-template .cart_savings .money {
  color: #16a34a !important;
}

/* Currency note */
.shopify-section--cart-template .subtotal small {
  font-size: 11px !important;
  color: var(--fish-gray) !important;
}

/* Order note — hidden */
.shopify-section--cart-template .subtotal label[for="note"],
.shopify-section--cart-template .subtotal textarea[name="note"] {
  display: none !important;
}

/* Checkout button */
.shopify-section--cart-template .checkout_button {
  margin: 0 !important;
}
.shopify-section--cart-template .checkout_button .global-button {
  width: 100% !important;
  padding: 16px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
  background: var(--fish-blue) !important;
  color: var(--fish-white) !important;
  border: none !important;
  border-radius: 0 !important;
  transition: all 0.25s ease !important;
}
.shopify-section--cart-template .checkout_button .global-button:hover {
  background: var(--fish-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

/* Additional checkout buttons (Shop Pay, etc) */
.shopify-section--cart-template .additional-checkout-buttons {
  margin-top: 10px !important;
}

/* Continue shopping link */
.shopify-section--cart-template .continue-shopping {
  display: block !important;
  text-align: center !important;
  margin-top: 16px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--fish-gray) !important;
  text-decoration: none !important;
}
.shopify-section--cart-template .continue-shopping:hover {
  color: var(--fish-blue) !important;
}

/* Cart discounts */
.shopify-section--cart-template .cart_discounts {
  display: flex !important;
  justify-content: space-between !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
}

/* Item discount badge */
.shopify-section--cart-template .cart__item--discount {
  font-size: 12px !important;
  color: #16a34a !important;
}

/* Empty cart state */
.shopify-section--cart-template .quote {
  text-align: center !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--fish-gray) !important;
}
.shopify-section--cart-template .cart__continue-shopping {
  display: block !important;
  text-align: center !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* --- Cart mobile --- */
@media only screen and (max-width: 798px) {
  .shopify-section--cart-template h1 {
    font-size: 24px !important;
    letter-spacing: 4px !important;
  }
  .shopify-section--cart-template .cart__item {
    gap: 16px;
  }
  .shopify-section--cart-template .cart__item--image {
    flex: 0 0 100px;
    width: 100px !important;
  }
  .shopify-section--cart-template .subtotal {
    position: static;
    margin-top: 24px !important;
  }
}

/* === ZERO BORDER RADIUS === */
.banner_image,
img,
.product-image-container { border-radius: 0 !important; }
.swatch-element label {
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

/* === COLLECTION PAGE === */
.collection-template .collection_title {
  text-transform: uppercase;
  letter-spacing: 6px;
  display: none !important;
}
.section_select,
.sort_by {
  display: none !important;
}
.filter-and-sort-buttons {
  background: var(--fish-light-gray) !important;
  border-color: var(--fish-border) !important;
}
.filter-and-sort-buttons select {
  background: var(--fish-white) !important;
  color: var(--fish-black) !important;
  border-color: var(--fish-border) !important;
}

/* --- Collection page: "THE WALL" -----------------------------------------
   Ported from the approved mockup docs/mockups/collection-b-the-wall.html.
   Markup: sections/collection-template.liquid + snippets/product-thumbnail.liquid.

   ⛔ The bug this fixes first: settings.thumbnail_hover_enabled hides the
   below-image caption and shows the .thumbnail-overlay one instead, painted in
   settings.product_hover_text_color = #ffffff. On a white page that made every
   product name and price invisible in EVERY state, hovered or not. The theme
   also paints the price white via
   .thumbnail.quick-shop-style--popup .current_price span.money (0,4,1), so both
   halves of the label needed fixing, at that specificity or higher.

   ⚠️ Ancestor is .shopify-section--collection-template, NOT .collection-template.
   The latter matches nothing in the rendered DOM. */

/* --- masthead --- */
.shopify-section--collection-template h1 {
  margin: 0 0 4px;
  font-size: 104px;
  line-height: .82;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--fish-black);
}

/* The lede sits under the heavy rule, full width. The stored <h2> is demoted to
   a small blue kicker so it labels the block instead of competing with the h1. */
/* The rule is full-bleed across the masthead, so the measure is constrained on
   the paragraph rather than on this box -- a max-width here would cut the rule
   short at the text's width. */
.shopify-section--collection-template .collection_description {
  margin: 0;
  padding-top: 18px;
  border-top: 6px solid var(--fish-black);
}
.shopify-section--collection-template .collection_description h2 {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fish-blue);
}
.shopify-section--collection-template .collection_description p {
  margin: 0;
  max-width: 62ch;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--fish-black);
}
.shopify-section--collection-template .collection_description p + p { margin-top: 10px; }
.shopify-section--collection-template .collection_description ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 15px;
  color: var(--fish-gray);
}

.collection_stylecount {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 22px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fish-gray);
}

/* --- the wall ------------------------------------------------------------
   The theme lays the grid out with flex-wrap and percentage column widths plus
   a 10px gutter. THE WALL has no gutters, so the container is overridden to CSS
   Grid and the columns are freed from their own widths and margins. Doing it
   with the theme's margins instead does not work: widening or zeroing them
   re-sizes the percentage columns and drops the third card onto its own row. */
.shopify-section--collection-template .product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  row-gap: 30px;
  border-top: 1px solid var(--fish-black);
}
/* Rows are separated by white space so a bar reads as belonging to the photo
   ABOVE it. Welded to the bottom of its own tile, a bar otherwise sits directly
   against the next row's photo and looks like that photo's label. */
.shopify-section--collection-template .product-list .thumbnail {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The column edge runs the FULL height of a tile, through the bar as well as
   the photo. It cannot be one border on the tile: against a black bar a black
   line is invisible, so the segment beside the bar has to be light. Putting a
   light border on the bar and a dark one on the tile would offset them by 1px,
   because the bar sits inside the tile's border. So both segments live on the
   inner boxes instead and share the same right edge -- dark past the photo,
   light past the bar.

   ⛔ Hide the COLOUR on the last column, never the width. With border-box,
   dropping the 1px gives that column 1px more content width, and because the
   photo is aspect-ratio 6/5 that became 0.84px of extra height -- the last
   column's bar sat lower than the two beside it. */
.shopify-section--collection-template .product_image,
.shopify-section--collection-template .product-info__caption {
  box-sizing: border-box;
  border-right: 1px solid var(--fish-black);
}
.shopify-section--collection-template .product-list .thumbnail .product-info__caption,
.shopify-section--collection-template .product-info__caption {
  border-right-color: var(--fish-white);
}
/* ⛔ :nth-of-type, NOT :nth-child. snippets/product-thumbnail.liquid emits a
   {% style %} block per card, so the grid's children alternate STYLE, DIV,
   STYLE, DIV -- the cards sit at child 2, 4, 6 and :nth-child(3n) selected the
   wrong ones (on mobile it matched the FIRST card, which killed the only
   divider between the two columns). The <style> elements are display:none so
   they are not grid items; they only break the count. Every DIV child here is a
   card, verified, so counting by type counts cards. */
.shopify-section--collection-template .product-list .thumbnail:nth-of-type(3n) .product_image,
.shopify-section--collection-template .product-list .thumbnail:nth-of-type(3n) .product-info__caption {
  border-right-color: transparent;
}
/* Measured on the source PNGs: the hat is 88-91% of the frame wide but only
   73-74% TALL, i.e. roughly 13% of dead white above and below. The theme also
   pins the image to the top with object-position: 50% 0%, so the hat sat high
   with a white band under it and read as small.

   A 6:5 box with object-fit: cover crops 8.3% off the top and bottom -- inside
   that 13% white margin, with clearance -- and centres what is left, so the hat
   fills the tile. A squarer box crops closer to the hat than is safe. */
.shopify-section--collection-template .product_image {
  position: relative;
  background: var(--fish-white);
  overflow: hidden;
  aspect-ratio: 6 / 5;
}
.shopify-section--collection-template .product_image > a,
.shopify-section--collection-template .product_image .image__container,
.shopify-section--collection-template .product_image .image-element__wrap {
  height: 100%;
  max-width: none;
}
.shopify-section--collection-template .product_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Normalise photography that is framed tighter than the rest. The Beginning's
   hat occupies 99% of its frame width against 88-89% for every other product,
   so it rendered about 12% larger than its neighbours in the same tile.
   0.89 is 88/99 -- the ratio that brings it in line, measured not guessed.
   Set on snippets/product-thumbnail.liquid via a handle list. */
.shopify-section--collection-template .product_image.fish-media--tight img {
  transform: scale(0.89);
}

/* NEW / RESTOCK chip, driven by snippets/fish-campaign.liquid */
/* blue = new, red = restock, and the bars are black for everything else. */
.fish-chip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fish-white);
  background: var(--fish-blue);
}
.fish-chip--new { background: var(--fish-blue); }
.fish-chip--restock { background: var(--fish-red); }
.fish-chip--pre-order { background: var(--fish-gray); }

/* --- the plate -----------------------------------------------------------
   The label that was invisible, now a solid bar welded to the bottom of the
   tile: name left, price right, one line.

   ⚠️ Four class selectors on the display rule on purpose. styles.css carries
     @media (max-width:798px) .product-list .thumbnail .product-info__caption { display:block }
   at 0,3,0 -- a two-class rule lost to it and the plate stopped being a flex row
   on phones only. */
.shopify-section--collection-template .thumbnail-overlay .product-details { display: none; }

.shopify-section--collection-template .product-list .thumbnail .product-info__caption,
.shopify-section--collection-template .product-info__caption {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  /* A common height so a two-line name (GAMEDAY · SEMINOLE MAROON) does not
     leave its bar hanging lower than the one-line bar beside it. Centred rather
     than baseline-aligned so short names sit in the middle of that height. */
  min-height: 66px;
  padding: 14px 16px;
  background: var(--fish-black);
  text-align: left;
  text-decoration: none;
}
/* ⚠️ The modifier has to out-rank the base rule above, whose first grouped
   selector is 0,4,0. A plain .product-info__caption.fish-plate--restock is
   0,3,0 and loses, leaving the restock plate black like the rest. */
.shopify-section--collection-template .product-list .thumbnail .product-info__caption.fish-plate--restock,
.shopify-section--collection-template .product-info__caption.fish-plate--restock {
  background: var(--fish-red);
}
.shopify-section--collection-template .product-list .thumbnail .product-info__caption:hover,
.shopify-section--collection-template .product-info__caption:hover { background: #000; }
.shopify-section--collection-template .product-list .thumbnail .product-info__caption.fish-plate--restock:hover,
.shopify-section--collection-template .product-info__caption.fish-plate--restock:hover { background: var(--fish-red-dark); }

/* product-info emits the title and price as one block, so display:contents
   lifts them out as direct flex items of the plate. */
.shopify-section--collection-template .product-info__caption .product-details { display: contents; }
.shopify-section--collection-template .product-info__caption .title {
  order: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fish-white);
}
.shopify-section--collection-template .product-info__caption .price,
.shopify-section--collection-template .product-info__caption .current_price,
.shopify-section--collection-template .thumbnail .product-info__caption .current_price span.money,
.shopify-section--collection-template .product-info__caption .money {
  order: 2;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--fish-white);
}
/* THE WALL's plate carries name and price only. */
.shopify-section--collection-template .fish-card-meta { display: none; }

@media screen and (max-width: 798px) {
  .shopify-section--collection-template h1 { font-size: 44px; letter-spacing: -1px; }
  .shopify-section--collection-template .collection_description {
    padding-top: 14px;
    max-width: none;
    border-top-width: 5px;
  }
  .shopify-section--collection-template .collection_description p { font-size: 16px; }
  .collection_stylecount { margin: 14px 0 18px; letter-spacing: 2px; }
  .shopify-section--collection-template .product-list { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .shopify-section--collection-template .product-list .thumbnail:nth-of-type(3n) .product_image { border-right-color: var(--fish-black); }
  .shopify-section--collection-template .product-list .thumbnail:nth-of-type(3n) .product-info__caption { border-right-color: var(--fish-white); }
  .shopify-section--collection-template .product-list .thumbnail:nth-of-type(2n) .product_image,
  .shopify-section--collection-template .product-list .thumbnail:nth-of-type(2n) .product-info__caption { border-right-color: transparent; }
  .fish-chip { padding: 7px 12px; font-size: 11px; letter-spacing: 2px; }
  .shopify-section--collection-template .product-list .thumbnail .product-info__caption,
  /* 64px covers the longest name at this size (GAMEDAY · SEMINOLE MAROON runs
     to three lines in a ~175px tile), so every bar in a row matches. */
  .shopify-section--collection-template .product-info__caption { padding: 10px 12px; gap: 6px; min-height: 64px; }
  .shopify-section--collection-template .product-info__caption .title { font-size: 13px; letter-spacing: .5px; }
  .shopify-section--collection-template .product-info__caption .price,
  .shopify-section--collection-template .product-info__caption .current_price,
  .shopify-section--collection-template .thumbnail .product-info__caption .current_price span.money,
  .shopify-section--collection-template .product-info__caption .money { font-size: 13px; }
}

/* === BREADCRUMBS === */
.breadcrumb_container { background: transparent !important; }
.breadcrumb_text a,
.breadcrumb_text span {
  color: var(--fish-gray) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
}

/* === DIVIDERS === */
hr, .feature_divider { border-color: var(--fish-border) !important; }

/* === SEARCH === */
.search-form input {
  background: var(--fish-light-gray) !important;
  border-color: var(--fish-border) !important;
  color: var(--fish-black) !important;
  border-radius: 0 !important;
}

/* === VIEW ALL LINK === */
.view-all {
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: var(--fish-blue) !important;
  font-size: 12px !important;
}
.view-all:hover { color: var(--fish-black) !important; }

/* === NEWSLETTER POPUP === */
.newsletter-popup {
  background: var(--fish-white) !important;
  border: 1px solid var(--fish-border) !important;
  border-radius: 0 !important;
}
.newsletter-popup .popup-title {
  color: var(--fish-black) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.newsletter-popup .popup-text { color: var(--fish-gray) !important; }

/* --- Multi-drop popup ("the drop list") ---------------------------------
   Ported from the approved mockup docs/mockups/popup-b-drop-list.html.
   Markup: snippets/popup-newsletter.liquid, rows from snippets/fish-campaign.liquid.

   Applies only when .fish-drop is on the popup root, which happens only while
   fish-campaign emits rows -- so when every campaign ends the popup reverts to
   its stored newsletter copy with none of this in play.

   The theme puts 40px of padding on .newsletter-description; drop mode zeroes
   it so the header rule and the row separators run the full width of the
   lightbox, and each band pays for its own inset instead. */
.newsletter-popup.fish-drop { text-align: left; }

/* The theme keeps a narrower, offset content column even with
   .newsletter-image--false (measured: 501px inside a 740px lightbox, inset
   120px), because the image-align class still positions it. Drop mode takes
   the full width -- the row separators are meant to reach both edges. */
.newsletter-popup.fish-drop .newsletter-popup__content,
.newsletter-popup.fish-drop .newsletter-popup__info {
  width: 100%;
  max-width: none;
  right: auto;
  left: auto;
}

/* text-align comes from settings.newsletter_popup_text_align ("center") applied
   at .newsletter-popup__info, which outranks a rule on the popup root. The drop
   list is a left-aligned table; only the CTA and kicker are centred. */
.newsletter-popup.fish-drop .newsletter-popup__info,
.newsletter-popup.fish-drop .newsletter-description {
  text-align: left;
}

.newsletter-popup.fish-drop .newsletter-description {
  padding: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
}

/* header band */
.fish-drop__docket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  padding: 32px 26px 0;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.fish-drop__eyebrow { color: var(--fish-blue); }
.fish-drop__meta { color: var(--fish-gray); }

.newsletter-popup.fish-drop .newsletter-popup__heading {
  margin: 0;
  padding: 0 26px 18px;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fish-black);
  border-bottom: 2px solid var(--fish-black);
}

/* rows */
.fish-drop__rows { margin: 0; padding: 0; list-style: none; }
.fish-drop__item { margin: 0; list-style: none; }
.newsletter-popup.fish-drop .fish-drop__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--fish-border);
  text-decoration: none;
  color: var(--fish-black);
}
.newsletter-popup.fish-drop .fish-drop__row:hover { background: var(--fish-light-gray); }
.newsletter-popup.fish-drop .fish-drop__row:hover .fish-drop__name { color: var(--fish-blue); }
.fish-drop__no {
  flex: 0 0 auto;
  width: 18px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--fish-blue);
}
.fish-drop__img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--fish-white);
}
.fish-drop__body { flex: 1; min-width: 0; }
.fish-drop__tag {
  display: inline-block;
  margin: 0 0 3px;
  padding: 2px 7px;
  font-size: 9px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fish-white);
  background: var(--fish-blue);
}
.fish-drop__tag--back { background: var(--fish-black); }
.fish-drop__tag--pre { background: var(--fish-gray); }
/* Colour is set on the spans, not inherited from the row: the theme colours
   descendants of a link directly, so setting it on the anchor alone loses. */
.newsletter-popup.fish-drop .fish-drop__name {
  color: var(--fish-black);
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsletter-popup.fish-drop .fish-drop__sub {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--fish-gray);
}
.newsletter-popup.fish-drop .fish-drop__price {
  color: var(--fish-black);
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 1px;
}

/* footer */
.newsletter-popup.fish-drop .newsletter-buttons {
  margin: 0;
  padding: 20px 26px 0;
}
.newsletter-popup.fish-drop .newsletter-popup__button,
.newsletter-popup.fish-drop .newsletter-popup__button--highlighted {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--fish-blue);
  color: var(--fish-white);
  border: 0;
}
.newsletter-popup.fish-drop .newsletter-popup__button:hover,
.newsletter-popup.fish-drop .newsletter-popup__button--highlighted:hover {
  background: var(--fish-blue-dark);
  color: var(--fish-white);
}
.fish-drop__kicker {
  margin: 12px 0 0;
  padding: 0 26px 24px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--fish-gray);
}

/* ⛔ Every text element above declares an explicit line-height on purpose.
   assets/styles.css.liquid:8166-8168 sets `line-height: 0` on .newsletter-popup
   below 798px -- the theme's own popup children each re-declare theirs, so new
   markup inherits 0 and every row collapses to zero height with the tag, name
   and sub-line painted on top of each other. Nothing errors; it just renders
   as overlapping text. */
@media screen and (max-width: 798px) {
  .fish-drop__docket {
    padding: 26px 18px 0;
    font-size: 9px;
    letter-spacing: 2px;
    gap: 8px;
  }
  .fish-drop__meta { white-space: nowrap; }
  .newsletter-popup.fish-drop .newsletter-popup__heading {
    padding: 0 18px 16px;
    font-size: 26px;
  }
  .fish-drop__row { gap: 10px; padding: 12px 18px; }
  .fish-drop__img { width: 52px; height: 52px; }
  /* The name must wrap rather than ellipsis on a phone: truncating
     "GAMEDAY · GATOR WHITE" to "GAMEDAY · …" hides the colorway, which is the
     only thing distinguishing one row from the next. */
  .newsletter-popup.fish-drop .fish-drop__name {
    font-size: 13px;
    letter-spacing: 1px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .newsletter-popup.fish-drop .fish-drop__sub { font-size: 11px; }
  .fish-drop__price { font-size: 13px; }
  .newsletter-popup.fish-drop .newsletter-buttons { padding: 18px 18px 0; }
  .fish-drop__kicker { padding: 0 18px 20px; }
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════ */

/* --- Hero --- */
.fish-about-hero {
  text-align: center;
  padding: 80px 20px 60px;
  border-bottom: 1px solid var(--fish-border);
}
.fish-about-hero__title {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 10px;
  color: var(--fish-black);
  margin: 0 0 12px;
}
.fish-about-hero__subtitle {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--fish-gray);
  margin: 0;
}

/* --- Origin Story --- */
.fish-about-block {
  max-width: 680px;
  margin: 0 auto;
  padding: 60px 20px;
}
.fish-about-block__heading {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  margin: 0 0 28px;
  text-align: center;
}
.fish-about-block__text p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin: 0 0 16px;
}
.fish-about-block__text p:last-child {
  margin-bottom: 0;
}

/* --- Photo Break Gallery --- */
.fish-about-origin-section + .shopify-section--gallery {
  border-top: 1px solid var(--fish-border);
  border-bottom: 1px solid var(--fish-border);
}

/* --- Values Grid --- */
.fish-about-values {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.fish-about-values__heading {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  text-align: center;
  margin: 0 0 40px;
}
.fish-about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.fish-about-values__item h3 {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--fish-black);
  margin: 0 0 12px;
  position: relative;
  padding-bottom: 12px;
}
.fish-about-values__item h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--fish-blue);
}
.fish-about-values__item p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

/* --- CTA --- */
.fish-about-cta {
  text-align: center;
  padding: 60px 20px 80px;
  border-top: 1px solid var(--fish-border);
}
.fish-about-cta__text {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  margin: 0 0 24px;
}
.fish-about-cta__button {
  display: inline-block;
  background: var(--fish-blue);
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 14px 40px;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'Oswald', sans-serif;
}
.fish-about-cta__button:hover {
  background: var(--fish-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

/* --- About Page Mobile --- */
@media only screen and (max-width: 798px) {
  .fish-about-hero {
    padding: 50px 20px 40px;
  }
  .fish-about-hero__title {
    font-size: 32px;
    letter-spacing: 6px;
  }
  .fish-about-hero__subtitle {
    font-size: 11px;
    letter-spacing: 3px;
  }
  .fish-about-block {
    padding: 40px 20px;
  }
  .fish-about-block__heading {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .fish-about-block__text p {
    font-size: 15px;
  }
  .fish-about-values__heading {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .fish-about-values__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .fish-about-values__item h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .fish-about-cta {
    padding: 40px 20px 60px;
  }
  .fish-about-cta__text {
    font-size: 20px;
    letter-spacing: 3px;
  }
}

/* === COMMUNITY SECTION (Newsletter + Instagram side-by-side) === */
.fish-community {
  display: flex;
  align-items: stretch;
  background: var(--fish-light-gray);
  width: 100%;
  box-sizing: border-box;
}
/* Break out of every Turbo theme wrapper */
.fish-community,
.fish-community * { box-sizing: border-box; }
.shopify-section:has(.fish-community),
.shopify-section:has(.fish-community) > .section,
.shopify-section:has(.fish-community) > .section > .container,
.shopify-section:has(.fish-community) > .section > .container > .content,
.shopify-section:has(.fish-community) > .section > .container > .content > .one-whole {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fish-community__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 40px;
}
.fish-community__divider {
  width: 1px;
  background: var(--fish-border);
  align-self: stretch;
  margin: 40px 0;
}
.fish-community__title {
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  margin-bottom: 12px;
}
.fish-community__text {
  font-size: 15px;
  color: var(--fish-gray);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.fish-community__form {
  display: flex;
  gap: 0;
  max-width: 400px;
  width: 100%;
  align-items: stretch;
}
.fish-community__form * {
  box-sizing: border-box;
  vertical-align: middle;
}
.fish-community__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--fish-border);
  border-right: none;
  background: var(--fish-white);
  font-size: 13px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.2s ease;
}
.fish-community__input:focus {
  border-color: var(--fish-blue);
}
.fish-community .fish-community__newsletter .fish-community__form .fish-community__submit,
.fish-community .fish-community__newsletter .fish-community__form button.fish-community__submit,
.fish-community button[type="submit"].fish-community__submit {
  padding: 0 20px !important;
  background: var(--fish-black) !important;
  color: var(--fish-white) !important;
  border: none !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  line-height: 1 !important;
  min-height: unset !important;
  height: auto !important;
  min-width: unset !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fish-community button[type="submit"].fish-community__submit:hover {
  background: var(--fish-blue) !important;
}
.fish-community__input,
.fish-community .fish-community__form .fish-community__input {
  height: auto !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-top: 1px solid var(--fish-border) !important;
  border-bottom: 1px solid var(--fish-border) !important;
  border-left: 1px solid var(--fish-border) !important;
  border-right: none !important;
}
.fish-community__success {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #16a34a;
}
.fish-community__error {
  font-size: 13px;
  color: #dc2626;
  margin-top: 8px;
}
.fish-community__handle {
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--fish-blue);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.fish-community__handle:hover {
  color: var(--fish-blue-dark);
}
.fish-community__btn,
a.fish-community__btn {
  display: inline-block;
  padding: 14px 36px;
  background: var(--fish-black);
  color: var(--fish-white) !important;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.fish-community__btn:hover,
a.fish-community__btn:hover {
  background: var(--fish-blue);
  color: var(--fish-white) !important;
  transform: translateY(-2px);
}
@media only screen and (max-width: 798px) {
  .fish-community {
    flex-direction: column;
  }
  .fish-community__col {
    padding: 50px 24px;
  }
  .fish-community__divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
    align-self: center;
  }
  .fish-community__title { font-size: 26px; letter-spacing: 3px; }
  .fish-community__handle { font-size: 28px; letter-spacing: 2px; }
}

/* === CONTACT PAGE === */
.fish-contact-hero {
  text-align: center;
  padding: 60px 20px 40px;
}
.fish-contact-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  margin-bottom: 12px;
}
.fish-contact-hero__subtitle {
  font-size: 16px;
  color: var(--fish-gray);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}
.fish-contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 50px;
}
.fish-contact-card {
  text-align: center;
  padding: 40px 20px;
  border: 1px solid var(--fish-border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fish-contact-card:hover {
  border-color: var(--fish-blue);
  transform: translateY(-3px);
}
.fish-contact-card__icon {
  font-size: 32px;
  margin-bottom: 16px;
}
.fish-contact-card__title {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--fish-black);
  margin-bottom: 8px;
}
.fish-contact-card__detail {
  font-size: 15px;
  color: var(--fish-gray);
  line-height: 1.6;
}
.fish-contact-card__detail a {
  color: var(--fish-blue);
  text-decoration: none;
}
.fish-contact-card__detail a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 798px) {
  .fish-contact-channels {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fish-contact-hero__title { font-size: 28px; }
}

/* === SHIPPING PROGRESS BAR === */
.fish-shipping-bar__message--success + .fish-shipping-bar__track .fish-shipping-bar__fill {
  background: #16a34a;
}

/* ═══════════════════════════════════════════════════
   WHOLESALE CATALOG PAGE
   ═══════════════════════════════════════════════════ */

/* --- Password Gate --- */
.fish-wholesale__gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}
.fish-wholesale__gate-inner {
  text-align: center;
  max-width: 440px;
  width: 100%;
}
.fish-wholesale__gate-title {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: var(--fish-black);
  margin: 0 0 12px;
}
.fish-wholesale__gate-text {
  font-size: 15px;
  color: var(--fish-gray);
  line-height: 1.6;
  margin: 0 0 28px;
}
.fish-wholesale__pw-form {
  display: flex;
  gap: 0;
  max-width: 400px;
  margin: 0 auto;
}
.fish-wholesale__pw-input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--fish-border);
  border-right: none;
  background: var(--fish-white);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.2s ease;
}
.fish-wholesale__pw-input:focus {
  border-color: var(--fish-blue);
}
.fish-wholesale__pw-btn {
  padding: 14px 28px;
  background: var(--fish-black);
  color: var(--fish-white);
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fish-wholesale__pw-btn:hover {
  background: var(--fish-blue);
}
.fish-wholesale__pw-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 16px;
}

/* --- Catalog Header --- */
.fish-wholesale__header {
  text-align: center;
  padding: 60px 20px 40px;
  border-bottom: 1px solid var(--fish-border);
}
.fish-wholesale__title {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 42px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--fish-black);
  margin: 0 0 12px;
}
.fish-wholesale__subtitle {
  font-size: 15px;
  color: var(--fish-gray);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
.fish-wholesale__contact {
  font-size: 13px;
  color: var(--fish-gray);
  margin: 12px auto 0;
}
.fish-wholesale__contact a {
  color: var(--fish-blue);
  text-decoration: none;
}
.fish-wholesale__contact a:hover {
  text-decoration: underline;
}

/* --- Product Rows --- */
.fish-wholesale__products {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.fish-wholesale__row {
  display: flex;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--fish-border);
  align-items: flex-start;
}

/* --- Left: Image + Thumbs (sticky on desktop) --- */
.fish-wholesale__row-media {
  flex: 0 0 380px;
  position: sticky;
  top: 120px;
}
.fish-wholesale__main-image {
  background: var(--fish-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 340px;
}
.fish-wholesale__main-image img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}
.fish-wholesale__placeholder {
  color: var(--fish-gray);
  font-size: 13px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.fish-wholesale__thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.fish-wholesale__thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--fish-light-gray);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.fish-wholesale__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fish-wholesale__thumb:hover {
  border-color: var(--fish-gray);
}
.fish-wholesale__thumb.is-active {
  border-color: var(--fish-blue);
}

/* --- Right: Product details + order table --- */
.fish-wholesale__row-details {
  flex: 1;
  min-width: 0;
}
.fish-wholesale__row-header {
  margin-bottom: 24px;
}
.fish-wholesale__row-title {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--fish-black);
  margin: 0 0 8px;
}
.fish-wholesale__row-desc {
  font-size: 14px;
  color: var(--fish-gray);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 500px;
}
.fish-wholesale__row-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fish-wholesale__price-retail {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  color: var(--fish-gray);
  text-decoration: line-through;
}
.fish-wholesale__price-arrow {
  color: var(--fish-gray);
  font-size: 14px;
}
.fish-wholesale__price-wholesale {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fish-blue);
}
.fish-wholesale__price-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--fish-blue);
  color: var(--fish-white);
  padding: 3px 8px;
  vertical-align: middle;
}

/* --- Order Table --- */
.fish-wholesale__order-table {
  border: 1px solid var(--fish-border);
}
.fish-wholesale__table-head {
  display: flex;
  align-items: center;
  background: var(--fish-black);
  padding: 10px 16px;
  gap: 12px;
}
.fish-wholesale__th {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fish-white);
}
.fish-wholesale__th--variant { flex: 1; }
.fish-wholesale__th--price { flex: 0 0 80px; text-align: right; }
.fish-wholesale__th--qty { flex: 0 0 120px; text-align: center; }

.fish-wholesale__table-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  border-top: 1px solid var(--fish-border);
  transition: background-color 0.15s ease;
}
.fish-wholesale__table-row:first-child {
  border-top: none;
}
.fish-wholesale__table-row:hover {
  background: rgba(37, 99, 235, 0.03);
}
.fish-wholesale__table-row.has-qty {
  background: rgba(37, 99, 235, 0.06);
}

.fish-wholesale__td--variant {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fish-wholesale__td--price {
  flex: 0 0 80px;
  text-align: right;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fish-blue);
}
.fish-wholesale__td--qty {
  flex: 0 0 120px;
}

/* Inline variant thumb in table row */
.fish-wholesale__inline-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fish-border);
  background: var(--fish-light-gray);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.fish-wholesale__inline-thumb:hover {
  border-color: var(--fish-blue);
}
.fish-wholesale__inline-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fish-wholesale__variant-label {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fish-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Qty stepper — uses relative/absolute to guarantee matching heights */
.fish-wholesale__qty-wrap {
  position: relative;
  width: 116px;
  height: 34px;
  border: 1px solid var(--fish-border);
  background: var(--fish-white);
}
.fish-wholesale__qty-minus,
.fish-wholesale__qty-plus {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  background: var(--fish-light-gray);
  color: var(--fish-black);
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.fish-wholesale__qty-minus {
  left: 0;
  border-right: 1px solid var(--fish-border) !important;
}
.fish-wholesale__qty-plus {
  right: 0;
  border-left: 1px solid var(--fish-border) !important;
}
.fish-wholesale__qty-minus:hover,
.fish-wholesale__qty-plus:hover {
  background: var(--fish-blue);
  color: var(--fish-white);
}
.fish-wholesale__qty-input {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  right: 34px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-align: center;
  background: var(--fish-white);
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  font-family: 'Oswald', sans-serif;
  line-height: 1 !important;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  box-shadow: none !important;
}
.fish-wholesale__qty-input::-webkit-inner-spin-button,
.fish-wholesale__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Single-variant product: inline qty */
.fish-wholesale__single-qty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--fish-border);
}
.fish-wholesale__single-qty .fish-wholesale__qty-wrap {
  max-width: 140px;
}
.fish-wholesale__single-qty-label {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fish-black);
}

/* --- Order Section --- */
.fish-wholesale__order-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 50px 20px 80px;
  border-top: 1px solid var(--fish-border);
}
.fish-wholesale__order-title {
  font-family: 'Oswald', 'Dosis', sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--fish-black);
  text-align: center;
  margin: 0 0 30px;
}

/* --- Order Summary (cart-style) --- */
.fish-wholesale__summary {
  background: var(--fish-white);
  border: 1px solid var(--fish-border);
  margin-bottom: 30px;
}
.fish-wholesale__summary-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--fish-white);
  background: var(--fish-black);
  margin: 0;
  padding: 12px 20px;
}

/* Cart line items */
.fish-wholesale__cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fish-border);
}
.fish-wholesale__cart-item:last-child {
  border-bottom: none;
}
.fish-wholesale__cart-item-img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: var(--fish-light-gray);
  overflow: hidden;
}
.fish-wholesale__cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.fish-wholesale__cart-item-details {
  flex: 1;
  min-width: 0;
}
.fish-wholesale__cart-item-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fish-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fish-wholesale__cart-item-unit {
  font-size: 11px;
  color: var(--fish-gray);
  margin-top: 2px;
}
.fish-wholesale__cart-item-qty {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  color: var(--fish-gray);
  letter-spacing: 1px;
}
.fish-wholesale__cart-item-total {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fish-black);
  min-width: 70px;
  text-align: right;
}

/* Cart total */
.fish-wholesale__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 2px solid var(--fish-black);
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--fish-black);
}
.fish-wholesale__cart-total-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--fish-blue);
  letter-spacing: 0;
}

/* --- Contact Form --- */
/* --- Contact Form --- */
.fish-wholesale__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.fish-wholesale__form-field--full {
  grid-column: 1 / -1;
}
/* Address section: City / State / ZIP in a 5fr 2fr 2fr row */
.fish-wholesale__form-grid--address {
  grid-template-columns: 5fr 2fr 2fr;
}
.fish-wholesale__form-grid--address .fish-wholesale__form-field--full {
  grid-column: 1 / -1;
}
.fish-wholesale__form-field--city { grid-column: 1; }
.fish-wholesale__form-field--state { grid-column: 2; }
.fish-wholesale__form-field--zip { grid-column: 3; }
.fish-wholesale__form-field label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fish-black);
  margin-bottom: 6px;
}
.fish-wholesale__required {
  color: #dc2626;
}
.fish-wholesale__optional {
  color: var(--fish-gray);
  font-weight: 400;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
/* Street line 2 has no label — tighten gap above it */
.fish-wholesale__form-field--full > input:only-child {
  margin-top: -4px;
}
.fish-wholesale__form-field input,
.fish-wholesale__form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--fish-border);
  background: var(--fish-white);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.fish-wholesale__form-field input:focus,
.fish-wholesale__form-field textarea:focus {
  border-color: var(--fish-blue);
}
.fish-wholesale__form-field textarea {
  resize: vertical;
}

/* --- Submit Button --- */
.fish-wholesale__submit-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--fish-blue);
  color: var(--fish-white);
  border: none;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.fish-wholesale__submit-btn:hover:not(:disabled) {
  background: var(--fish-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}
.fish-wholesale__submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Success Message --- */
.fish-wholesale__success {
  text-align: center;
  padding: 40px 20px;
  max-width: 500px;
  margin: 0 auto;
}
.fish-wholesale__success h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #16a34a;
  margin: 0 0 12px;
}
.fish-wholesale__success p {
  font-size: 15px;
  color: var(--fish-gray);
  line-height: 1.6;
}

/* --- Wholesale Tablet --- */
@media only screen and (min-width: 799px) and (max-width: 1024px) {
  .fish-wholesale__row-media {
    flex: 0 0 280px;
  }
  .fish-wholesale__main-image {
    min-height: 260px;
  }
}

/* --- Wholesale Mobile --- */
@media only screen and (max-width: 798px) {
  .fish-wholesale__gate-title {
    font-size: 26px;
    letter-spacing: 4px;
  }
  .fish-wholesale__title {
    font-size: 28px;
    letter-spacing: 4px;
  }
  .fish-wholesale__header {
    padding: 40px 16px 28px;
  }
  .fish-wholesale__products {
    padding: 0 12px;
  }
  .fish-wholesale__row {
    flex-direction: column;
    gap: 20px;
    padding: 32px 0;
  }
  .fish-wholesale__row-media {
    flex: none;
    width: 100%;
    position: static;
  }
  .fish-wholesale__main-image {
    min-height: 260px;
    padding: 16px;
  }
  .fish-wholesale__main-image img {
    max-height: 300px;
  }
  .fish-wholesale__row-title {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .fish-wholesale__row-desc {
    max-width: none;
  }
  .fish-wholesale__row-pricing {
    justify-content: flex-start;
  }
  .fish-wholesale__table-head {
    padding: 8px 12px;
  }
  .fish-wholesale__table-row {
    padding: 8px 12px;
  }
  .fish-wholesale__th--price,
  .fish-wholesale__td--price {
    flex: 0 0 60px;
  }
  .fish-wholesale__th--qty,
  .fish-wholesale__td--qty {
    flex: 0 0 100px;
  }
  .fish-wholesale__variant-label {
    font-size: 11px;
  }
  .fish-wholesale__cart-item {
    gap: 10px;
    padding: 10px 14px;
  }
  .fish-wholesale__cart-item-img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .fish-wholesale__cart-item-title {
    font-size: 11px;
  }
  .fish-wholesale__cart-item-total {
    min-width: 55px;
  }
  .fish-wholesale__form-grid {
    grid-template-columns: 1fr;
  }
  .fish-wholesale__form-grid--address {
    grid-template-columns: 1fr 1fr;
  }
  .fish-wholesale__form-field--city {
    grid-column: 1 / -1;
  }
  .fish-wholesale__order-section {
    padding: 30px 12px 60px;
  }
}

/* ==========================================================================
   Pre-order note
   ========================================================================== */

.fish-preorder__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid #56bdec;
  border-radius: 4px;
  background: rgba(86, 189, 236, 0.08);
  color: #16161d;
  font-size: 13px;
  line-height: 1.45;
}

.fish-preorder__note--hidden {
  display: none;
}

.fish-preorder__bolt {
  flex: 0 0 auto;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .fish-preorder__note {
    padding: 9px 12px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════
   CAMPAIGN BANNER — homepage drop announcement
   Markup: sections/fish-campaign-banner.liquid
   Copy + on/off: snippets/fish-campaign.liquid
   ═══════════════════════════════════════════════════ */
.fish-campaign-banner {
  background: var(--fish-light-gray);
  border-top: 1px solid var(--fish-border);
  border-bottom: 1px solid var(--fish-border);
}
.fish-campaign-banner__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.fish-campaign-banner--right .fish-campaign-banner__media { order: 2; }

/* The product photo is square, so at half of a wide viewport it would drive the
   grid row to ~700px and leave the copy floating in dead space. Taking the image
   out of flow (absolute inside a min-height box) lets the band keep a banner-like
   height and crop the photo instead of being sized by it. */
.fish-campaign-banner__media {
  position: relative;
  display: block;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  background: var(--fish-white);
}
.fish-campaign-banner__media .image-element__wrap {
  position: absolute;
  inset: 0;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  padding-top: 0 !important;
}
/* contain, not cover: the product shots are square studio images on white, and
   cover crops a hat's brim off at banner proportions. Letterboxing onto the same
   white keeps the whole product visible and reads as intentional. */
.fish-campaign-banner__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 24px;
}

.fish-campaign-banner__content {
  padding: 48px 56px;
  text-align: left;
}
.fish-campaign-banner__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fish-blue);
}
.fish-campaign-banner__title {
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fish-black);
}
.fish-campaign-banner__text {
  margin: 0 0 20px;
  max-width: 46ch;
  color: var(--fish-gray);
  line-height: 1.6;
}
.fish-campaign-banner__text p { margin: 0; }
.fish-campaign-banner__price {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fish-black);
}
.fish-campaign-banner__cta {
  display: inline-block;
  padding: 18px 52px;
  background: var(--fish-blue);
  color: var(--fish-white) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.fish-campaign-banner__cta:hover {
  background: var(--fish-blue-dark);
  transform: translateY(-2px);
}

@media screen and (max-width: 798px) {
  .fish-campaign-banner__inner { grid-template-columns: 1fr; }
  /* Image always leads on mobile, whichever side it takes on desktop. */
  .fish-campaign-banner--right .fish-campaign-banner__media { order: 0; }
  .fish-campaign-banner__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .fish-campaign-banner__content {
    padding: 32px 24px 40px;
    text-align: center;
  }
  .fish-campaign-banner__text { margin-left: auto; margin-right: auto; }
  .fish-campaign-banner__title { font-size: 30px; }
  .fish-campaign-banner__cta { display: block; padding: 18px 24px; }
}

/* === SKELETON PLACEHOLDERS ==================================================
   Replaces the theme's "blur-up" loading style, which fetched a separate 50px
   copy of every lazy image to show blurred while the real one loaded -- 16
   extra round trips on the homepage, ~30 KB, for a 2016 effect. This costs
   zero requests and is cached with the stylesheet.

   image_loading_style is now 'appear', which makes image-element emit no
   placeholder src at all: the <img> carries only an inline SVG of the right
   aspect ratio, so it is transparent and the skeleton below shows through it.

   The selector keys off lazysizes' own class. While an image is pending it
   carries `lazyload`; the moment lazysizes swaps that for `lazyloaded` the
   rule stops matching and the skeleton disappears on its own. No JS, no state
   to keep in sync, and nothing left painted behind a transparent PNG.

   ⚠️ Requires :has(). Chrome 105+, Safari 15.4+, Firefox 121+. On anything
   older the skeleton simply never paints -- the image still loads normally.
   ========================================================================== */
@keyframes fish-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.image-element__wrap:has(> img.lazyload) {
  background-color: #edeef0;
  background-image: linear-gradient(
    90deg,
    #edeef0 0%,
    #f7f8f9 45%,
    #edeef0 90%
  );
  background-size: 200% 100%;
  animation: fish-skeleton 1.6s linear infinite;
}

/* The strip's wrapper is the sized box, and its tiles are fixed 300/250/200px
   -- so the skeleton is always the exact shape of the photo that will land. */
.gallery-section.gallery-horizontal .gallery-cell:has(img.lazyload) {
  background-color: #edeef0;
  background-image: linear-gradient(
    90deg,
    #edeef0 0%,
    #f7f8f9 45%,
    #edeef0 90%
  );
  background-size: 200% 100%;
  animation: fish-skeleton 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .image-element__wrap:has(> img.lazyload),
  .gallery-section.gallery-horizontal .gallery-cell:has(img.lazyload) {
    animation: none;
  }
}