@font-face {
  font-family: Instrument;
  src: url(ec770cb3c-instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2);
}
@font-face {
  font-family: Instrument;
  src: url(32a3adb0e-instrumentsans_n6.27dc66245013a6f7f317d383a3cc9a0c347fb42d.woff2);
  font-weight: 600;
}
@font-face {
  font-family: Instrument;
  src: url(0d04ec44d-instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2);
  font-weight: 700;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    16px/1.4 Instrument,
    Arial,
    sans-serif;
  color: #181313;
}
button,
input {
  font: inherit;
}
button,
a,
summary {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  display: block;
}
.wrap {
  width: min(100%, 1440px);
  margin: auto;
  padding: 0 40px;
}
.announce {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #150707;
  color: white;
  font-size: 14px;
}
header {
  height: 55px;
  background: #af2833;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0 75px;
}
header nav {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
}
header > .logo img {
  width: 96px;
  height: 40px;
  object-fit: contain;
}
header > nav {
  flex: 1;
}
header > nav:first-of-type {
  justify-content: flex-end;
}
.mobileNav {
  display: none;
}
cart-icon {
  position: absolute;
  right: 40px;
  top: 15px;
}
cart-icon small {
  background: #181313;
  color: white;
  border-radius: 100%;
  position: absolute;
  bottom: -2px;
  right: -5px;
  min-width: 14px;
  text-align: center;
  font-size: 11px;
}
.hero {
  background: #16060a url(/media/hero-desktop.webp) center center/cover no-repeat;
  color: #fff;
  min-height: 504px;
  display: flex;
  align-items: center;
}
.hero-inner {
  max-width: 700px;
}
.rating {
  background: white;
  color: #111;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #ddd;
}
.rating b {
  background: #51a984;
  letter-spacing: 1px;
  color: white;
  line-height: 17px;
}
.rating strong {
  font-weight: 600;
}
.hero h1 {
  font-size: 48px;
  line-height: 1.23;
  letter-spacing: -1px;
  max-width: 650px;
  margin: 20px 0 10px;
}
.hero p {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 20px;
  max-width: 700px;
}
.cta {
  display: inline-block;
  background: #b42a36;
  color: white;
  padding: 15px 21px;
  border-radius: 8px;
  font-size: 14px;
}
.product {
  display: grid;
  grid-template-columns: 1.09fr 1fr;
  gap: 50px;
  align-items: start;
  padding-top: 60px;
  padding-bottom: 60px;
}
.gallery {
  padding-top: 10px;
}
.featured {
  width: 100%;
  border-radius: 16px;
}
.thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 1px;
}
.thumbs button {
  flex: 0 0 72px;
  padding: 0;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  overflow: hidden;
}
.thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.panel {
  padding: 20px;
  background: #f3f3f3;
  border-radius: 16px;
}
.panel h2,
.editor h2,
.read h1 {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 20px 0 10px;
}
.panel p {
  margin: 10px 0;
}
.hp-pack small {
  display: block;
  font-size: 13px;
}
.hp-pack span {
  flex: 1;
}
.editor {
  padding: 42px 0;
  text-align: center;
}
.editor.red,
.perks {
  background: #b42a36;
  color: white;
}
.editor img {
  max-height: 560px;
  border-radius: 12px;
  margin: auto;
  object-fit: contain;
}
.editor p {
  margin: 12px auto;
  max-width: 780px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 45px;
  text-align: left;
}
.split > div:empty {
  display: none;
}
.vids {
  display: flex;
  overflow: auto;
  gap: 15px;
  margin-top: 25px;
}
.vids video {
  width: min(26%, 320px);
  min-width: 180px;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 14px;
  background: #341519;
}
.faq {
  max-width: 800px;
  text-align: left;
  margin: 0 auto;
  padding: 14px 4px;
  border-bottom: 1px solid #bbb;
}
.faq summary {
  font-weight: 600;
}
.perks {
  display: flex;
  justify-content: space-evenly;
  padding: 32px 20px;
  gap: 16px;
}
footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  background: #150707;
  color: white;
  padding: 42px 40px;
}
footer .logo {
  max-width: 140px;
}
footer a {
  display: block;
  margin: 6px 0;
}
footer h3 {
  margin: 0 0 12px;
}
.read {
  max-width: 820px;
  margin: 40px auto;
  padding: 0 25px;
  min-height: 40vh;
}
.read img {
  max-height: 400px;
}
@media (max-width: 820px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  header > nav {
    display: none;
  }
  .mobileNav {
    display: block;
    position: absolute;
    left: 20px;
  }
  .mobileNav summary {
    list-style: none;
    font-size: 22px;
  }
  .mobileNav nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 84px;
    padding: 22px;
    background: #af2833;
    display: grid;
  }
  .announce {
    height: 34px;
    font-size: 12px;
  }
  header {
    height: 50px;
  }
  header > .logo img {
    height: 25px;
    width: 76px;
  }
  cart-icon {
    right: 20px;
    top: 13px;
  }
  .hero {
    background-image: url(/media/hero-mobile.webp);
    min-height: 440px;
  }
  .hero h1 {
    font-size: 34px;
  }
  .hero p {
    font-size: 16px;
  }
  .rating {
    font-size: 11px;
    gap: 4px;
    padding: 8px;
  }
  .product,
  .split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .gallery {
    padding: 0;
  }
  .panel {
    padding: 16px;
  }
  .thumbs button {
    flex-basis: 54px;
  }
  .editor {
    padding: 28px 0;
  }
  .perks {
    font-size: 13px;
    text-align: center;
  }
  footer {
    grid-template-columns: 1fr 1fr;
    padding: 25px 20px;
    font-size: 14px;
  }
  .vids video {
    min-width: 54%;
  }
}
header,
.mobileNav nav,
.cta,
.perks,
.editor.red {
  background-color: #c80f2e;
}
header > .logo img {
  width: 121px;
}
.hero h1 {
  max-width: 620px;
  font-weight: 600;
}
.product {
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1fr);
}
.gallery,
.panel,
.split > div {
  min-width: 0;
}
.rating strong {
  white-space: nowrap;
}
.hp-pack b {
  display: block;
}
.editor .cta {
  margin: 7px;
}
@media (max-width: 820px) {
  header > .logo img {
    width: 76px;
  }
  .product {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    min-height: 590px;
  }
  .hero h1 {
    font-size: 32px;
    line-height: 1.25;
  }
  .hero p {
    font-size: 16px;
  }
  .announce {
    height: 40px;
  }
  header {
    height: 55px;
  }
  .mobileNav nav {
    top: 95px;
  }
}

.arranged .hony-flow {
  display: flex;
  flex-direction: var(--d);
  gap: var(--g);
  align-items: var(--a);
  justify-content: var(--j);
  width: var(--w);
  max-width: 100%;
  min-width: 0;
}
.arranged .hony-flow > .hony-picture { flex: 1 1 100%; min-width: 0; }
.arranged .hony-picture img { width: 100%; }
.arranged .hony-symbol { flex: none; width: 36px; }
.arranged .hony-section-logo img { height: 40px; width: auto; }
.arranged .hony-copy, .arranged .hony-title { text-align: inherit; }
.arranged .hony-flow[style*="--a:flex-start"] { text-align: left; }
.arranged .hony-title { font-weight: 600; line-height: 1.16; }
.arranged .hony-title.h2 { font-size: clamp(28px, 3.5vw, 48px); }
.arranged .hony-title.h3 { font-size: clamp(21px, 2vw, 30px); }
.arranged .hony-title p, .arranged .hony-copy p { margin: 0; }
.arranged .faq { width: 100%; }
@media (max-width: 820px) {
  .arranged .hony-flow { flex-direction: var(--m); align-items: var(--ma); justify-content: var(--mj); gap: var(--s); }
  .arranged .hony-flow > .hony-picture { flex-basis: auto; }
}