@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

/* Shared layout, catalog, forms and footer. */
:root {
  --blue: #009fff;
  --ink: #07162d;
  --muted: #536274;
  --line: #dce7ef;
}

/* Shared closing hero: story and subscription content sit over one readable image. */
.closing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  min-height: clamp(520px, 44.2vw, 840px);
  padding: clamp(42px, 6vw, 86px) clamp(5%, 8vw, 11%);
  color: #fff;
  background-color: #061a2d;
  background-image: linear-gradient(90deg, rgba(1, 12, 24, .58), rgba(1, 12, 24, .28)), url("hero-sunset-walleye.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.closing-hero .story,
.closing-hero .newsletter {
  min-height: 0;
  padding: 0;
  background: transparent !important;
  color: #fff;
}
.closing-hero .story { display: block; grid-column: 1; }
.closing-hero .story > div { width: auto; max-width: 560px; padding: 0; background: transparent !important; }
.closing-hero .story h2 { color: #fff; text-shadow: 0 3px 12px #00101d; }
.closing-hero .story em { color: #66d8ff; }
.closing-hero .story p,
.closing-hero .newsletter p,
.closing-hero .consent { color: #f4fbff; text-shadow: 0 2px 7px #00101d; }
.closing-hero .newsletter { display: block; grid-column: 2; text-align: left; }
.closing-hero .newsletter h2 { color: #fff; text-shadow: 0 3px 10px #00101d; }
.closing-hero .newsletter em { color: #66d8ff; }
.closing-hero .newsletter input[type="email"] { background: #fff; color: #071a2d; }

@media (max-width: 700px) {
  .closing-hero { grid-template-columns: 1fr; gap: 34px; min-height: 0; padding: 42px 6%; background-size: auto 100%; background-position: center top; }
  .closing-hero .story,
  .closing-hero .newsletter { grid-column: 1; }
  .closing-hero .newsletter { text-align: left; }
  .closing-hero .subscribe-row { flex-wrap: wrap; }
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration-line: none;
  text-decoration-thickness: initial;
  text-decoration-style: initial;
  text-decoration-color: initial;
}

button, .button {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 22px;
  column-gap: 22px;
  background-image: linear-gradient(120deg, rgb(0, 184, 237), rgb(0, 140, 255));
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: rgb(0, 27, 43);
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 18px;
  line-height: normal;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.6px;
  padding-top: 13px;
  padding-right: 28px;
  padding-bottom: 13px;
  padding-left: 28px;
  cursor: pointer;
  min-height: 44px;
}

button:hover, .button:hover {
  filter: brightness(0.94);
}

button:disabled {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(220, 235, 244);
  color: rgb(67, 85, 106);
  cursor: not-allowed;
}

input, textarea, select {
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-variant-caps: inherit;
  font-variant-numeric: inherit;
  font-variant-east-asian: inherit;
  font-variant-alternates: inherit;
  font-variant-position: inherit;
  font-variant-emoji: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(185, 202, 216);
  border-right-color: rgb(185, 202, 216);
  border-bottom-color: rgb(185, 202, 216);
  border-left-color: rgb(185, 202, 216);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
  color: var(--ink);
  min-width: 0px;
  max-width: 100%;
}

label {
  display: block;
}

label input:not([type="checkbox"]), label textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
}

h1 {
  font-size: 46px;
  line-height: 1.07;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 21px;
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 8px;
  margin-left: 0px;
}

p {
  line-height: 1.5;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-color: rgb(8, 104, 181);
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 4px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: 29px;
  column-gap: 29px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
}

nav a {
  font-size: 16px;
  padding-top: 12px;
  padding-right: 0px;
  padding-bottom: 12px;
  padding-left: 0px;
  position: relative;
}

nav a.current::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0px;
  right: 0px;
  height: 3px;
  background-image: ;
  background-position-x: ;
  background-position-y: ;
  background-size: ;
  background-repeat: ;
  background-attachment: ;
  background-origin: ;
  background-clip: ;
  background-color: ;
}

.search-toggle {
  font-size: 42px;
  line-height: 1;
}

.cart-link {
  font-size: 27px;
  position: relative;
}

.cart-link span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  background-color: #006cbb;
  border: 2px solid #f3faff;
  z-index: 1;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 600;
  font-stretch: normal;
  font-size: 13px;
  line-height: normal;
  font-family: Barlow, sans-serif;
  background-image: ;
  background-position-x: ;
  background-position-y: ;
  background-size: ;
  background-repeat: ;
  background-attachment: ;
  background-origin: ;
  background-clip: ;
  background-color: ;
  color: white;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  padding-top: 3px;
  padding-right: 6px;
  padding-bottom: 3px;
  padding-left: 6px;
  position: absolute;
  right: -12px;
  top: -5px;
}

.cart-link span:not(.cart-count) { display: none; }

.product-gallery { min-width: 0; align-self: start; }
.product-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.product-gallery-thumbs a { display: block; width: 72px; height: 72px; flex: 0 0 72px; padding: 3px; border: 2px solid #c7dbe8; border-radius: 6px; background: #fff; }
.product-gallery-thumbs a[aria-current="true"] { border-color: #006cbb; }
.product-gallery-thumbs a:focus-visible { outline: 3px solid #006cbb; outline-offset: 2px; }
.product-gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-extra-photos { min-width: 0; border: 1px solid #d7e3ec; border-radius: 6px; padding: 16px; }
.product-extra-photo-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin: 12px 0; }
.product-extra-photo img { display: block; width: 100%; height: 100px; object-fit: contain; background: #eef4f8; margin-bottom: 8px; }
.product-extra-photo span { display: flex; align-items: center; gap: 8px; }
.product-extra-photo input { width: 20px; height: 20px; flex: 0 0 20px; }

.menu-toggle {
  display: none;
}

.outline {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(2, 19, 31, 0.91);
  color: white;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 18px;
  padding-right: 2%;
  padding-bottom: 18px;
  padding-left: 2%;
  background-image: repeating-radial-gradient(at 0px 50%, transparent 0px, transparent 22px, rgb(220, 239, 252) 23px, transparent 24px, transparent 39px);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

.benefits > div {
  text-align: center;
  border-right-width: ;
  border-right-style: ;
  border-right-color: ;
}

.benefits > div:last-child {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

.benefits h2 {
  font-size: 20px;
  margin-top: 6px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.benefits p {
  font-size: 14px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.wrap {
  max-width: 1400px;
  padding-top: 0px;
  padding-right: 3.2%;
  padding-bottom: 0px;
  padding-left: 3.2%;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}

.catalog {
  padding-top: 8px;
  padding-bottom: 15px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 20px;
  column-gap: 20px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-size: 32px;
  display: flex;
  align-items: center;
  row-gap: 14px;
  column-gap: 14px;
}

.section-title h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-image: ;
  background-position-x: ;
  background-position-y: ;
  background-size: ;
  background-repeat: ;
  background-attachment: ;
  background-origin: ;
  background-clip: ;
  background-color: ;
}

.section-title a {
  color: rgb(0, 116, 200);
  font-family: "Barlow Condensed", sans-serif;
}

.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  row-gap: 18px;
  column-gap: 18px;
}

.product {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
  border-top-color: ;
  border-top-style: ;
  border-top-width: ;
  border-right-color: ;
  border-right-style: ;
  border-right-width: ;
  border-bottom-color: ;
  border-bottom-style: ;
  border-bottom-width: ;
  border-left-color: ;
  border-left-style: ;
  border-left-width: ;
  border-image-source: ;
  border-image-slice: ;
  border-image-width: ;
  border-image-outset: ;
  border-image-repeat: ;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: rgba(9, 56, 88, 0.03) 0px 2px 5px;
  display: flex;
  flex-direction: column;
}

.product-art {
  display: block;
  width: 100%;
  aspect-ratio: 312 / 178;
  object-fit: cover;
  background-color: rgb(23, 38, 46);
}

.reference-art {
  background-image: url("desktop-reference.png");
  background-size: 328.205% auto;
}

.art-0 {
  background-position-x: 4.635%;
  background-position-y: 52.872%;
}

.art-1 {
  background-position-x: 50.843%;
  background-position-y: 52.872%;
}

.art-2 {
  background-position-x: 96.35%;
  background-position-y: 52.872%;
}

.product-body {
  padding-top: 10px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

.price {
  font-size: 24px;
  color: rgb(0, 43, 146);
}

.product-body .price {
  margin-top: auto;
  margin-bottom: 7px;
}

.product button {
  width: 100%;
  color: white;
}

.product button:disabled {
  color: rgb(67, 85, 106);
}

.story {
  min-height: 245px;
  background-image: linear-gradient(90deg, rgba(0, 8, 20, .42), rgba(0, 8, 20, .18)), url("hero-sunset-walleye.png");
  background-position-x: left;
  background-position-y: 81.13%;
  background-size: 100% auto;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.story h2 {
  font-style: italic;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 800;
  font-stretch: normal;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1;
  font-family: Barlow, Arial;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.story em {
  color: var(--blue);
}

.story p {
  margin-top: 14px;
  margin-right: 0px;
  margin-bottom: 14px;
  margin-left: 0px;
  font-size: 16px;
}

.story .button {
  color: white;
  min-width: 180px;
}

.newsletter h2 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-size: 25px;
}

.newsletter p {
  font-size: 14px;
  margin-top: 6px;
  margin-right: 0px;
  margin-bottom: 6px;
  margin-left: 0px;
}

.newsletter form {
  max-width: 430px;
}

.subscribe-row {
  display: flex;
  row-gap: 5px;
  column-gap: 5px;
}

.subscribe-row input {
  width: 100%;
}

.consent {
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.5;
}

.consent input {
  vertical-align: middle;
}

.newsletter em {
  font-style: italic;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 25px;
  line-height: normal;
  font-family: "Barlow Condensed", sans-serif;
  color: rgb(0, 186, 255);
}

footer {
  background-image: repeating-linear-gradient(135deg, rgb(13, 20, 27) 0px, rgb(13, 20, 27) 4px, rgb(25, 33, 40) 4px, rgb(25, 33, 40) 8px);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  padding-top: 35px;
  padding-right: 3%;
  padding-bottom: 35px;
  padding-left: 3%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 25px;
  column-gap: 25px;
}

footer div {
  display: flex;
  row-gap: 14px;
  column-gap: 14px;
  font-size: 12px;
}

footer small {
  font-size: 11px;
}

footer b {
  color: rgb(0, 186, 255);
  font-size: 12px;
}

.footer-brand {
  font-weight: 800;
  font-size: 20px;
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
}

.footer-brand i {
  font-size: 16px;
}

.prose {
  padding-top: 45px;
  padding-bottom: 60px;
  max-width: 900px;
  min-height: 430px;
}

.prose p {
  font-size: 18px;
}

.eyebrow {
  font-weight: 700;
  letter-spacing: 2px;
  color: rgb(0, 116, 184);
  font-size: 13px !important;
}

.stack {
  display: grid;
  row-gap: 18px;
  column-gap: 18px;
}

.stack button {
  justify-self: start;
}

.detail {
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 40px;
  column-gap: 40px;
}

.detail h1 {
  margin-top: 12px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
}

.detail .product-art {
  margin-top: 20px;
}

.product-choice {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  font-weight: 700;
}

.product-choice select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink, #10283d);
  background: #fff;
  border: 1px solid #9aabba;
  border-radius: 4px;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.notice {
  padding-top: 16px;
  padding-right: 4%;
  padding-bottom: 16px;
  padding-left: 4%;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(222, 243, 255);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(144, 201, 233);
}

.cart-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 90px;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: ;
  border-bottom-style: ;
  border-bottom-color: ;
  padding-top: 18px;
  padding-right: 0px;
  padding-bottom: 18px;
  padding-left: 0px;
  row-gap: 20px;
  column-gap: 20px;
}

.cart-row input {
  width: 90px;
}

.cart-row small {
  display: block;
  margin-top: 5px;
}

.cart-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 1px solid #c7dbe8;
  border-radius: 8px;
  background: #fff;
}

.cart-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-photo-placeholder {
  padding: 8px;
  color: #455d70;
  font-size: 13px;
  text-align: center;
}

.cart-product-info { min-width: 0; overflow-wrap: anywhere; }
.cart-product-title { color: inherit; text-decoration: none; }
.cart-product-title:hover { text-decoration: underline; }
.cart-quantity { min-width: 0; }
.cart-item-controls { min-width: 0; }
.cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 6px 0;
  color: #43566b;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  text-transform: none;
}
.cart-remove span { font-size: 22px; line-height: 1; }
.cart-remove:hover { color: #9c2222; background: #fff; }
.cart-remove:focus-visible { outline: 2px solid #006cbb; outline-offset: 2px; }

@media (max-width: 480px) {
  .cart-row { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .cart-photo { width: 80px; height: 80px; }
  .cart-item-controls { grid-column: 2; }
}

.text-link {
  display: inline-block;
  color: rgb(0, 108, 187);
  margin-top: 18px;
  margin-right: 0px;
  margin-bottom: 18px;
  margin-left: 0px;
}

.search-label {
  margin-top: 15px;
  margin-right: 0px;
  margin-bottom: 25px;
  margin-left: 0px;
  max-width: 450px;
}

.secondary {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(229, 239, 246);
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

.sr-only, .honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow-x: hidden;
  overflow-y: hidden;
  clip: rect(0px, 0px, 0px, 0px);
}

.skip {
  position: absolute;
  top: -100px;
  z-index: 100;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: white;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
}

.skip:focus {
  top: 0px;
}

.benefits i {
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1;
  font-family: Barlow;
  color: var(--blue);
  display: block;
  width: 64px;
  height: 44px;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  font-size: 0px;
  background-image: url("desktop-reference.png");
  background-size: 1024px 1536px;
  background-repeat: no-repeat;
}

.benefits > div:nth-child(1) i {
  background-position-x: -112px;
  background-position-y: -568px;
}

.benefits > div:nth-child(2) i {
  background-position-x: -353px;
  background-position-y: -568px;
}

.benefits > div:nth-child(3) i {
  background-position-x: -596px;
  background-position-y: -568px;
}

.benefits > div:nth-child(4) i {
  background-position-x: -844px;
  background-position-y: -568px;
}

.product-body p {
  font-size: 15px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow-wrap: anywhere;
}

.story > div {
  width: 46%;
  padding-top: 22px;
  padding-right: 3.3%;
  padding-bottom: 24px;
  padding-left: 0px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(243, 249, 255);
}

.newsletter {
  color: white;
  display: flex;
  row-gap: 25px;
  column-gap: 25px;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-right: 3.2%;
  padding-bottom: 28px;
  padding-left: 3.2%;
  background-image: linear-gradient(115deg, rgb(6, 24, 40), rgb(18, 61, 82) 58%, rgb(6, 24, 40));
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: var(--ink);
  font-family: Barlow, Arial, sans-serif;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(245, 250, 255);
  position: relative;
}

footer .footer-brand img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: invert(1) hue-rotate(180deg);
}

footer .footer-brand {
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 280px;
  max-width: 100%;
  line-height: 0;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-image: none;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: none;
  position: relative;
}

footer .footer-brand::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: url("../assets/header-logo-degrees-refined-crackedice.png?v=20261016-32-blue");
  background-position-x: center;
  background-position-y: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  clip-path: inset(0px 63% 0px 0px);
  pointer-events: none;
}

.checkout {
  max-width: 860px;
  padding-top: 36px;
  padding-bottom: 48px;
}

.checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 18px;
  column-gap: 18px;
  margin-top: 25px;
  margin-right: 0px;
  margin-bottom: 25px;
  margin-left: 0px;
}

.checkout-fields label {
  font-weight: 600;
}

.checkout-fields input {
  width: 100%;
  margin-top: 6px;
}

.checkout fieldset {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  margin-top: 24px;
  margin-right: 0px;
  margin-bottom: 24px;
  margin-left: 0px;
}

.checkout fieldset label {
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(185, 216, 236);
  border-right-color: rgb(185, 216, 236);
  border-bottom-color: rgb(185, 216, 236);
  border-left-color: rgb(185, 216, 236);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

#paypal-buttons {
  max-width: 420px;
}

.checkout button[hidden] {
  display: none;
}

.breadcrumbs {
  padding-top: 24px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.breadcrumbs a {
  color: rgb(0, 104, 171);
}

.section-title h1 {
  font-size: clamp(24px, 3vw, 34px);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

nav.breadcrumbs {
  display: block;
  position: static;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  box-shadow: none;
  padding-top: 24px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

nav.breadcrumbs a {
  display: inline;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  font-style: inherit;
  font-variant-ligatures: inherit;
  font-variant-caps: inherit;
  font-variant-numeric: inherit;
  font-variant-east-asian: inherit;
  font-variant-alternates: inherit;
  font-variant-position: inherit;
  font-variant-emoji: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
}

.store-announcement {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(0, 143, 229);
  color: rgb(255, 255, 255);
  text-align: center;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 14px;
  line-height: 1.4;
  font-family: Arial, sans-serif;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.store-announcement[hidden] {
  display: none !important;
}

.header-socials, .footer-socials {
  display: flex;
  align-items: center;
  row-gap: 10px;
  column-gap: 10px;
}

.header-socials {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.header-socials a, .footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  transition-behavior: normal, normal;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease, ease;
  transition-delay: 0s, 0s;
  transition-property: transform, background-color;
}

.header-socials a {
  color: rgb(7, 22, 45);
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(255, 255, 255, 0.6);
}

.header-socials a:hover, .header-socials a:focus-visible {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(216, 239, 255);
  transform: translateY(-1px);
}

.header-socials svg, .footer-socials svg {
  width: 19px;
  height: 19px;
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.header-socials rect, .header-socials circle:not(.social-dot), .footer-socials rect, .footer-socials circle:not(.social-dot) {
  fill: none;
}

.social-dot {
  stroke: none;
}

.footer-socials {
  row-gap: 9px;
  column-gap: 9px;
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
}

.footer-socials span {
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-size-adjust: none;
  font-language-override: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;
  font-weight: 700;
  font-stretch: normal;
  font-size: 12px;
  line-height: normal;
  font-family: "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0.11em;
  color: rgb(0, 186, 255);
  margin-right: 2px;
}

.footer-socials a {
  color: rgb(255, 255, 255);
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(255, 255, 255, 0.08);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(255, 255, 255, 0.18);
  border-right-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  border-left-color: rgba(255, 255, 255, 0.18);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

.footer-socials a:hover, .footer-socials a:focus-visible {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(0, 169, 240);
  color: rgb(0, 21, 33);
  transform: translateY(-1px);
}

@media (min-width: 1250px) {
nav {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0%;
}
}

@media (min-width: 1250px) {
.product-body {
  padding-top: 16px;
  padding-right: 20px;
  padding-bottom: 16px;
  padding-left: 20px;
}
}

@media (min-width: 1250px) {
.product-body h3 {
  font-size: 25px;
}
}

@media (min-width: 1250px) {
.product-body p {
  font-size: 17px;
}
}

@media (min-width: 1250px) {
.catalog {
  padding-top: 20px;
  padding-bottom: 25px;
}
}

@media (min-width: 1250px) {
.benefits {
  padding-top: 23px;
  padding-right: 2%;
  padding-bottom: 23px;
  padding-left: 2%;
}
}

@media (min-width: 1250px) {
.story {
  min-height: 320px;
}
}

@media (max-width: 1000px) and (min-width: 701px) {
nav {
  row-gap: 17px;
  column-gap: 17px;
}
}

@media (max-width: 1000px) and (min-width: 701px) {
.newsletter em {
  display: none;
}
}

@media (max-width: 1000px) and (min-width: 701px) {
footer {
  flex-wrap: wrap;
}
}

@media (max-width: 700px) {
.menu-toggle {
  display: block;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-image: none;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  font-size: 30px;
  z-index: 5;
  color: rgb(7, 18, 29);
  min-width: 40px;
}
}

@media (max-width: 700px) {
.search-toggle {
  margin-left: auto;
  font-size: 36px;
}
}

@media (max-width: 700px) {
.cart-link {
  font-size: 25px;
  margin-right: 6px;
}
}

@media (max-width: 700px) {
nav {
  display: none;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 108px;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(245, 250, 255);
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  box-shadow: rgba(0, 0, 0, 0.133) 0px 8px 15px;
}
}

@media (max-width: 700px) {
nav.open {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  column-gap: 10px;
}
}

@media (max-width: 700px) {
.benefits {
  padding-top: 13px;
  padding-right: 2%;
  padding-bottom: 15px;
  padding-left: 2%;
}
}

@media (max-width: 700px) {
.benefits h2 {
  font-size: clamp(12px, 2.6vw, 18px);
  line-height: 1.03;
  max-width: 90px;
  margin-top: 4px;
  margin-right: auto;
  margin-bottom: 4px;
  margin-left: auto;
}
}

@media (max-width: 700px) {
.benefits p {
  font-size: clamp(10px, 1.8vw, 13px);
  line-height: 1.15;
  padding-top: 0px;
  padding-right: 5px;
  padding-bottom: 0px;
  padding-left: 5px;
}
}

@media (max-width: 700px) {
.catalog {
  padding-top: 10px;
  padding-right: 3%;
  padding-bottom: 12px;
  padding-left: 3%;
}
}

@media (max-width: 700px) {
.section-title {
  row-gap: 5px;
  column-gap: 5px;
  margin-bottom: 10px;
}
}

@media (max-width: 700px) {
.section-title h2 {
  font-size: clamp(21px, 3.5vw, 28px);
  row-gap: 8px;
  column-gap: 8px;
}
}

@media (max-width: 700px) {
.section-title h2::after {
  width: 35px;
}
}

@media (max-width: 700px) {
.section-title a {
  font-size: 11px;
}
}

@media (max-width: 700px) {
.products {
  row-gap: 8px;
  column-gap: 8px;
}
}

@media (max-width: 700px) {
.product-art {
  aspect-ratio: 1.38 / 1;
}
}

@media (max-width: 700px) {
.product-body {
  padding-top: 8px;
  padding-right: 7px;
  padding-bottom: 8px;
  padding-left: 7px;
}
}

@media (max-width: 700px) {
.product-body h3 {
  font-size: clamp(15px, 2.5vw, 21px);
  min-height: 2.1em;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
}

@media (max-width: 700px) {
.product-body p {
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.25;
  margin-bottom: 9px;
}
}

@media (max-width: 700px) {
.product-body .price {
  font-size: 22px;
}
}

@media (max-width: 700px) {
.product button {
  padding-top: 6px;
  padding-right: 2px;
  padding-bottom: 6px;
  padding-left: 2px;
  min-height: 34px;
  font-size: clamp(11px, 1.9vw, 15px);
  letter-spacing: 0px;
}
}

@media (max-width: 700px) {
.story h2, .story p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow-x: hidden;
  overflow-y: hidden;
  clip: rect(0px, 0px, 0px, 0px);
}
}

@media (max-width: 700px) {
.story .button {
  position: absolute;
  bottom: 9%;
  right: 8%;
  width: 87%;
  min-width: 0px;
  min-height: 30px;
  height: 6vw;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  font-size: clamp(12px, 2.5vw, 18px);
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(0, 24, 35);
  color: rgb(0, 186, 245);
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(0, 186, 245);
  border-right-color: rgb(0, 186, 245);
  border-bottom-color: rgb(0, 186, 245);
  border-left-color: rgb(0, 186, 245);
  border-image-source: none;
  border-image-slice: 100%;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
  row-gap: 12px;
  column-gap: 12px;
}
}

@media (max-width: 700px) {
.newsletter h2 {
  font-size: 23px;
}
}

@media (max-width: 700px) {
.newsletter p {
  font-size: 14px;
}
}

@media (max-width: 700px) {
.newsletter form {
  margin-top: 12px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
}

@media (max-width: 700px) {
.newsletter em {
  display: none;
}
}

@media (max-width: 700px) {
.newsletter button {
  font-size: 16px;
  padding-top: 10px;
  padding-right: 18px;
  padding-bottom: 10px;
  padding-left: 18px;
}
}

@media (max-width: 700px) {
.newsletter input[type="email"] {
  font-size: 14px;
}
}

@media (max-width: 700px) {
.consent {
  font-size: 11px;
  text-align: left;
}
}

@media (max-width: 700px) {
footer {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(234, 245, 252);
  color: var(--ink);
  padding-top: 25px;
  padding-right: 4%;
  padding-bottom: 25px;
  padding-left: 4%;
  flex-direction: column;
  row-gap: 16px;
  column-gap: 16px;
}
}

@media (max-width: 700px) {
footer small {
  font-size: 12px;
}
}

@media (max-width: 700px) {
footer div {
  font-size: 12px;
}
}

@media (max-width: 700px) {
footer > b {
  display: none;
}
}

@media (max-width: 700px) {
.detail {
  grid-template-columns: 1fr;
  row-gap: 20px;
  column-gap: 20px;
  padding-top: 25px;
}
}

@media (max-width: 700px) {
.detail .product-art {
  max-width: 450px;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  aspect-ratio: 312 / 178;
}
}

@media (max-width: 700px) {
.prose {
  padding-top: 30px;
}
}

@media (max-width: 700px) {
h1 {
  font-size: 36px;
}
}

@media (max-width: 700px) {
.benefits i {
  font-size: 30px;
  transform: scale(0.75);
  transform-origin: center center;
  height: 40px;
  margin-top: -6px;
  margin-bottom: -4px;
}
}

@media (max-width: 700px) {
.story {
  aspect-ratio: 748 / 213;
  background-image: linear-gradient(90deg, rgba(0, 8, 20, .42), rgba(0, 8, 20, .18)), url("hero-sunset-walleye.png");
  background-size: 110.027% auto;
  background-position-x: 49.33%;
  background-position-y: 80.45%;
  width: 100%;
  min-height: 0px;
}
}

@media (max-width: 700px) {
.reference-art {
  background-image: url("mobile-reference.png");
  background-size: 370.72% auto;
}
}

@media (max-width: 700px) {
.art-0 {
  background-position-x: 10.15%;
  background-position-y: 56.7676%;
}
}

@media (max-width: 700px) {
.art-1 {
  background-position-x: 49.91%;
  background-position-y: 56.7676%;
}
}

@media (max-width: 700px) {
.art-2 {
  background-position-x: 89.85%;
  background-position-y: 56.7676%;
}
}

@media (min-width: 701px) {
.story > div {
  padding-left: 20px;
}
}

@media (max-width: 1000px) and (min-width: 701px) {
nav a {
  font-size: 14px;
}
}

@media (max-width: 700px) {
.story > div {
  width: 46%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  position: relative;
  background-image: none;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}
}

@media (max-width: 700px) {
.newsletter {
  color: var(--ink);
  display: block;
  text-align: center;
  padding-top: 20px;
  padding-right: 5%;
  padding-bottom: 20px;
  padding-left: 5%;
  background-image: repeating-radial-gradient(at 10% 40%, rgb(245, 250, 255) 0px, rgb(245, 250, 255) 20px, rgb(227, 241, 250) 21px, rgb(245, 250, 255) 22px, rgb(245, 250, 255) 39px);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}
}

@media (max-width: 700px) {
footer .footer-brand {
  font-size: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 230px;
}
}

@media (max-width: 700px) {
footer .footer-brand img {
  filter: none;
}
}

@media (max-width: 700px) {
footer .footer-brand::after {
  display: none;
}
}

@media (max-width: 600px) {
.checkout-fields {
  grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
.checkout h1 {
  font-size: 34px;
}
}

@media (max-width: 1050px) {
.header-socials {
  display: none;
}
}

@media (max-width: 700px) {
.footer-socials {
  order: 2;
}
}

@media (max-width: 700px) {
.footer-socials a {
  color: rgb(7, 22, 45);
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
  border-top-color: rgb(183, 215, 233);
  border-right-color: rgb(183, 215, 233);
  border-bottom-color: rgb(183, 215, 233);
  border-left-color: rgb(183, 215, 233);
}
}

@media (max-width: 700px) {
.footer-socials span {
  color: rgb(0, 120, 189);
}
}

/* Header. */
.detail { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail > div { min-width:0; overflow-wrap:anywhere; }
header { height:112px; display:flex; align-items:center; gap:24px; padding:0 3%; position:relative; z-index:20; background:linear-gradient(110deg,#e8f3fb,#fbfdff); }
header .logo { position:relative; display:flex; align-items:center; flex:0 1 300px; width:300px; max-width:30%; height:92px; background:url(../assets/header-logo-degrees-refined-crackedice.png?v=20261016-32-blue) center/contain no-repeat; }
header .logo:has(img) { background:none; }
header .logo img { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
header nav { flex:1; margin:0; gap:clamp(13px,2vw,29px); }
header .search-toggle,header .cart-link { display:flex; align-items:center; justify-content:center; flex-shrink:0; min-width:32px; min-height:40px; }
header .cart-link svg,header .search-toggle svg { display:block; width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Hero: one image, one copy block, content determines minimum height. */
.hero { position:relative; overflow:hidden; min-height:41.8vw; padding:clamp(32px,6.7vw,100px) 5.5%; background:linear-gradient(90deg,rgba(0,8,20,.4),rgba(0,8,20,.02) 62%,rgba(0,8,20,.12)),url(hero-sunset-ice-lake.png) center 45%/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 52%,rgba(0,12,25,.22) 100%); }
.hero-content { position:relative; width:min(39vw,570px); z-index:3; color:#fff; text-shadow:0 3px 12px #00101dcc; }
.hero-content h2 { font:italic 900 clamp(28px,3.6vw,56px)/.92 Arial Black,Arial,sans-serif; letter-spacing:-.045em; text-transform:uppercase; margin:0 0 12px; text-shadow:0 4px 12px #00101dcc; }
.hero-content p { font:600 clamp(16px,1.35vw,22px)/1.3 Arial,sans-serif; margin:0; text-shadow:0 3px 9px #00101dcc; }
.hero-actions { display:flex; margin:10px 0 0; }
.hero-actions .button { position:relative; overflow:hidden; isolation:isolate; white-space:nowrap; width:18.6vw; min-width:150px; min-height:44px; height:4.18vw; padding:7px 13px; font-size:clamp(16px,1.8vw,26px); color:#fff; background-color:#11171d; background-image:linear-gradient(45deg,#ffffff0e 25%,transparent 25%,transparent 75%,#ffffff0e 75%),linear-gradient(45deg,#ffffff0e 25%,transparent 25%,transparent 75%,#ffffff0e 75%),linear-gradient(135deg,#0008 25%,transparent 25%,transparent 75%,#0008 75%),linear-gradient(135deg,#0008 25%,transparent 25%,transparent 75%,#0008 75%),linear-gradient(115deg,#26313a 0%,#0b1015 48%,#1b252d 52%,#090d11 100%); background-position:0 0,5px 5px,0 5px,5px 0,0 0; background-size:10px 10px,10px 10px,10px 10px,10px 10px,100% 100%; border:2px solid #dfe8ee; box-shadow:inset 0 0 0 2px #566774,inset 0 0 14px #000b,0 0 0 1px #07111a,0 5px 16px #00101dcc; text-shadow:0 2px 3px #000; }
.hero-actions .button::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.3; background:linear-gradient(110deg,transparent 20%,#ffffff2e 42%,transparent 58%); }
.hero-actions .button:hover { color:#fff; filter:brightness(1.16); border-color:#fff; box-shadow:inset 0 0 0 2px #718795,inset 0 0 14px #0009,0 0 14px #13a9f066,0 6px 18px #00101ddd; }
.hero-actions .button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media (min-width:701px) and (max-width:1000px) {
 header { gap:12px; padding:0 2%; }
 header nav { gap:13px; }
 header nav a { font-size:13px; }
}
@media (max-width:700px) {
 .detail { grid-template-columns:minmax(0,1fr); }
 header { height:88px; padding:0 4%; gap:10px; }
 header .logo { position:static; order:1; width:190px; max-width:190px; min-width:0; height:70px; flex:1 1 190px; }
 header .menu-toggle { order:0; flex:0 0 38px; min-width:38px; }
 header .search-toggle { order:2; flex:0 0 30px; min-width:30px; margin-left:auto; }
 header .cart-link { order:3; flex:0 0 30px; min-width:30px; margin-right:0; }
 header nav { top:88px; z-index:30; }
 .hero { min-height:0; padding:24px 5% 20px; background-position:64% center; }
 .hero::after { background:linear-gradient(180deg,#0000000a,transparent 42%,#0008123d); }
 .hero-content { width:min(72%,420px); }
 .hero-content h2 { font-size:clamp(23px,6vw,38px); line-height:.98; margin:0 0 9px; }
 .hero-content p { font-size:clamp(14px,3.7vw,18px); line-height:1.25; }
 .hero-actions .button { width:auto; height:auto; font-size:clamp(13px,3.5vw,17px); gap:12px; }
}

/* Shop categories: existing ice-blue palette, one shared catalog. */
.shop-categories { display:flex; gap:8px; padding:7px; margin:26px 0 0; border:1px solid #cbdde8; border-radius:12px; background:#e9f2f7; max-width:780px; }
.shop-categories [role="tab"] { display:flex; align-items:center; justify-content:center; gap:11px; flex:1; min-height:60px; margin:0; padding:14px 18px; border:1px solid transparent; border-radius:8px; background:transparent; color:#435b6c; font:600 18px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.035em; text-transform:uppercase; box-shadow:none; transition:background .15s,color .15s,box-shadow .15s; }
.shop-categories [role="tab"]:hover { background:#dcebf4; color:#063652; }
.shop-categories [role="tab"][aria-selected="true"] { color:#fff; background:#073651; border-color:#0c5476; box-shadow:0 3px 8px #082f4926,inset 0 -3px #12a9e8; }
.shop-categories [role="tab"]:focus-visible { outline:3px solid #008cc9; outline-offset:3px; }
.shop-categories svg { flex:0 0 24px; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.category-count { min-width:24px; padding:3px 6px; border-radius:5px; background:#cddfe9; color:#35566b; font:600 12px/1.2 Arial,sans-serif; }
[aria-selected="true"] .category-count { background:#ffffff20; color:#dbf4ff; }
.shop-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:25px 0; }
.shop-toolbar .search-label { flex:1; margin:0; max-width:450px; color:#435b6c; font-size:14px; }
.shop-toolbar input { margin-top:7px; }
.shop-result-count { margin:0 0 13px; color:#526a7a; font-size:13px; white-space:nowrap; }
.shop-empty { padding:52px 24px; text-align:center; border:1px solid #d1e2ed; border-radius:10px; background:linear-gradient(145deg,#f3f9fc,#e7f1f7); }
.shop-empty-mark { display:inline-block; color:#107ba7; font:700 37px/1 "Barlow Condensed",sans-serif; opacity:.55; }
.shop-empty h2 { margin:17px 0 8px; font-size:25px; color:#0b3550; }
.shop-empty p { margin:0; color:#526a7a; }
.catalog [hidden] { display:none!important; }
#shop-category-panel:focus-visible { outline:2px solid #008cc9; outline-offset:6px; }
@media(max-width:600px) {
 .shop-categories { gap:5px; padding:5px; margin-top:20px; }
 .shop-categories [role="tab"] { flex-direction:column; gap:7px; min-height:102px; padding:12px 7px; font-size:16px; }
 .shop-categories svg { width:22px; height:22px; flex-basis:22px; }
 .category-label-extra { display:block; font-size:13px; margin-top:3px; }
 .category-count { display:none; }
 .shop-toolbar { display:block; margin:21px 0; }
 .shop-toolbar .search-label { max-width:none; }
 .shop-result-count { margin:12px 0 0; }
 .shop-empty { padding:38px 18px; }
}

/* Checkout feedback and shipping selection. */
#checkout-message { margin: 18px 0; scroll-margin-top: 20px; }
#checkout-message.error { padding: 16px; border: 1px solid #b42318; background: #fff1f0; color: #8c1d18; border-radius: 5px; }
.checkout-fields select { width: 100%; margin-top: 6px; }
#shipping-rates { scroll-margin-top: 20px; }
#shipping-rates label { display: flex; align-items: center; gap: 12px; }
#shipping-rates input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; padding: 0; }
#shipping-rates label:has(input:checked) { border-color: #0074b8; background: #def3ff; }
#checkout-address[aria-busy="true"] button { cursor: wait; opacity: .75; }
#checkout-retry[hidden] { display: none; }

/* Show complete merchandise mockups in catalog cards and product views. */
.product[data-category="merchandise"] .product-art,
[data-merch-photo] .product-art,
body[data-product-id^="pf-"] .detail .product-art {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
}