/* Jak si vybrat háček — stránka /jak-vybrat-hacek/ */
body.vv-hook-guide-page,
body.vv-hook-guide-page #wrap,
body.vv-hook-guide-page #wrapper,
body.vv-hook-guide-page .overall-wrapper,
body.vv-hook-guide-page #content-wrapper,
body.vv-hook-guide-page .content-wrapper,
body.vv-hook-guide-page .content-wrapper-in,
body.vv-hook-guide-page .content-in,
body.vv-hook-guide-page #content,
body.vv-hook-guide-page .content,
body.vv-hook-guide-page .content-inner {
  background: #edc7bf !important;
}

body.vv-hook-guide-page {
  overflow-x: hidden !important;
}

body.vv-hook-guide-page .breadcrumbs,
body.vv-hook-guide-page .breadcrumbs-wrapper,
body.vv-hook-guide-page .pageArticleDetail > header {
  display: none !important;
}

body.vv-hook-guide-page #content-wrapper,
body.vv-hook-guide-page .content-wrapper,
body.vv-hook-guide-page .content-wrapper-in,
body.vv-hook-guide-page .content-in,
body.vv-hook-guide-page #content,
body.vv-hook-guide-page .content,
body.vv-hook-guide-page .content-inner,
body.vv-hook-guide-page .pageArticleDetail,
html body.vv-hook-guide-page main#content .content-inner > article.pageArticleDetail {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.vv-hook-guide-page main#content.content {
  padding-top: 0 !important;
}

.vv-hook-guide {
  --hook-cream: var(--vv-cream, #faf2e7);
  --hook-paper: #fffaf6;
  --hook-white: #ffffff;
  --hook-sand: #efe1d0;
  --hook-blush: #f4e0da;
  --hook-blush-strong: #e9bcb3;
  --hook-red: var(--vv-red, #a03830);
  --hook-red-light: var(--vv-hover, #ac4d43);
  --hook-dark: var(--vv-dark, #404041);
  --hook-muted: var(--vv-muted, #706d6a);
  --hook-line: rgba(160, 56, 48, 0.15);
  --hook-shadow: 0 22px 60px rgba(94, 70, 64, 0.1);
  --hook-max: 1320px;
  --hook-side: clamp(18px, 5vw, 72px);
  width: 100% !important;
  overflow: clip !important;
  color: var(--hook-dark) !important;
  font-family: var(--template-font, "Nunito"), "Nunito", sans-serif !important;
}

.vv-hook-guide *,
.vv-hook-guide *::before,
.vv-hook-guide *::after {
  box-sizing: border-box !important;
}

.vv-hook-guide h1,
.vv-hook-guide h2,
.vv-hook-guide h3,
.vv-hook-guide p,
.vv-hook-guide figure,
.vv-hook-guide fieldset,
.vv-hook-guide legend,
.vv-hook-guide ol,
.vv-hook-guide ul {
  margin-top: 0 !important;
}

.vv-hook-guide h1,
.vv-hook-guide h2,
.vv-hook-guide h3,
.vv-hook-guide p,
.vv-hook-guide button,
.vv-hook-guide a,
.vv-hook-guide legend {
  font-family: inherit !important;
}

.vv-hook-guide h1,
.vv-hook-guide h2,
.vv-hook-guide h3,
.vv-hook-guide__hero-title,
.vv-hook-guide legend {
  color: var(--hook-dark) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

.vv-hook-guide p,
.vv-hook-guide li {
  color: var(--hook-dark) !important;
}

.vv-hook-guide a {
  text-decoration: none !important;
}

.vv-hook-guide button {
  appearance: none !important;
  -webkit-appearance: none !important;
}

.vv-hook-guide [hidden] {
  display: none !important;
}

.vv-hook-guide [id] {
  scroll-margin-top: 110px;
}

.vv-hook-guide button:focus-visible,
.vv-hook-guide a:focus-visible {
  outline: 3px solid rgba(160, 56, 48, 0.62) !important;
  outline-offset: 4px !important;
}

.vv-hook-guide__eyebrow {
  margin: 0 0 12px !important;
  color: var(--hook-red) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.vv-hook-guide__hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(var(--hook-max), calc(100% - 2 * var(--hook-side))) !important;
  min-height: 560px !important;
  aspect-ratio: 1672 / 941 !important;
  margin: 34px auto 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 38px !important;
  background:
    var(--hook-paper)
    url("/user/documents/upload/kody/vv-hook-guide-hero.jpg")
    center center / cover no-repeat !important;
  box-shadow: var(--hook-shadow) !important;
}

.vv-hook-guide__hero-copy {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(24px, 2.7vw, 40px) clamp(24px, 5vw, 76px)
    clamp(270px, 29vw, 390px) !important;
  text-align: center !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide__hero .vv-hook-guide__eyebrow {
  color: #a03830 !important;
}

.vv-hook-guide .vv-hook-guide__hero h1,
.vv-hook-guide .vv-hook-guide__hero-title {
  display: block !important;
  max-width: 920px !important;
  margin: 0 0 14px !important;
  font-size: clamp(38px, 3.96vw, 58px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.vv-hook-guide .vv-hook-guide__lead {
  max-width: 720px !important;
  margin: 0 0 18px !important;
  color: #575453 !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide__hero-actions {
  display: none !important;
}

.vv-hook-guide__hero-actions,
.vv-hook-guide__final-actions,
.vv-hook-guide__result-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px 19px !important;
}

body .vv-hook-guide .vv-hook-guide__button {
  display: inline-flex !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 22px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-align: center !important;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide .vv-hook-guide__button--primary {
  background: var(--hook-red) !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(160, 56, 48, 0.2) !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide .vv-hook-guide__button--primary:hover {
  background: var(--hook-red-light) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

body .vv-hook-guide .vv-hook-guide__button--secondary {
  border-color: rgba(160, 56, 48, 0.3) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--hook-red) !important;
}

body .vv-hook-guide .vv-hook-guide__button--secondary:hover {
  border-color: var(--hook-red) !important;
  background: #fff !important;
  color: var(--hook-red) !important;
  transform: translateY(-2px) !important;
}

.vv-hook-guide__text-link {
  display: inline-flex !important;
  min-height: 44px !important;
  align-items: center !important;
  color: var(--hook-red) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(160, 56, 48, 0.32) !important;
  text-underline-offset: 5px !important;
}

.vv-hook-guide__hero-art {
  display: none !important;
}

.vv-hook-guide__hero-art::before,
.vv-hook-guide__hero-art::after {
  position: absolute !important;
  z-index: -1 !important;
  width: 290px !important;
  height: 290px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.34) !important;
  content: "" !important;
}

.vv-hook-guide__hero-art::before {
  right: -100px !important;
  top: -70px !important;
}

.vv-hook-guide__hero-art::after {
  bottom: -160px !important;
  left: -110px !important;
}

.vv-hook-guide__cup {
  position: absolute !important;
  bottom: 50px !important;
  left: 50% !important;
  z-index: 5 !important;
  width: min(270px, 53%) !important;
  height: 245px !important;
  border: 1px solid rgba(136, 91, 77, 0.13) !important;
  border-radius: 28px 28px 78px 78px !important;
  background: #e8d2bf !important;
  box-shadow:
    inset -22px -10px 0 rgba(160, 111, 91, 0.08),
    0 30px 50px rgba(104, 69, 61, 0.13) !important;
  transform: translateX(-18%) !important;
}

.vv-hook-guide__cup::before {
  position: absolute !important;
  left: -5% !important;
  top: -16px !important;
  width: 110% !important;
  height: 38px !important;
  border: 1px solid rgba(136, 91, 77, 0.13) !important;
  border-radius: 50% !important;
  background: #f2e4d7 !important;
  box-shadow: inset 0 10px 0 rgba(160, 111, 91, 0.07) !important;
  content: "" !important;
}

.vv-hook-guide__hero-hook {
  position: absolute !important;
  bottom: 262px !important;
  z-index: 3 !important;
  width: 17px !important;
  height: 245px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 8px 16px rgba(102, 72, 64, 0.1) !important;
  transform-origin: bottom center !important;
}

.vv-hook-guide__hero-hook::before {
  position: absolute !important;
  left: -2px !important;
  top: -18px !important;
  width: 34px !important;
  height: 34px !important;
  border: 10px solid currentColor !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-radius: 50% !important;
  content: "" !important;
  transform: rotate(-20deg) !important;
}

.vv-hook-guide__hero-hook--one {
  left: 42% !important;
  color: var(--hook-red) !important;
  transform: rotate(-8deg) !important;
}

.vv-hook-guide__hero-hook--two {
  left: 56% !important;
  bottom: 257px !important;
  height: 282px !important;
  color: #b58c65 !important;
  transform: rotate(3deg) !important;
}

.vv-hook-guide__hero-hook--three {
  left: 68% !important;
  bottom: 250px !important;
  height: 228px !important;
  color: #b8aeb0 !important;
  transform: rotate(12deg) !important;
}

.vv-hook-guide__yarn-ball {
  position: absolute !important;
  bottom: 35px !important;
  left: 9% !important;
  z-index: 7 !important;
  width: 178px !important;
  height: 158px !important;
  border-radius: 48% 52% 46% 54% !important;
  background:
    repeating-linear-gradient(
      18deg,
      #bc665d 0,
      #bc665d 5px,
      #c9766d 6px,
      #c9766d 10px
    ) !important;
  box-shadow: 0 22px 36px rgba(105, 63, 58, 0.16) !important;
  transform: rotate(-7deg) !important;
}

.vv-hook-guide__yarn-ball::after {
  position: absolute !important;
  right: -72px !important;
  bottom: 14px !important;
  width: 98px !important;
  height: 44px !important;
  border-bottom: 5px solid #bc665d !important;
  border-radius: 50% !important;
  content: "" !important;
  transform: rotate(8deg) !important;
}

.vv-hook-guide__art-note {
  position: absolute !important;
  right: 34px !important;
  top: 45px !important;
  max-width: 145px !important;
  color: var(--hook-red) !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-align: right !important;
  transform: rotate(3deg) !important;
}

.vv-hook-guide__quick-nav {
  position: sticky !important;
  top: 8px !important;
  z-index: 30 !important;
  width: min(var(--hook-max), calc(100% - 2 * var(--hook-side))) !important;
  margin: 0 auto clamp(72px, 7vw, 104px) !important;
}

.vv-hook-guide__quick-nav-inner {
  display: flex !important;
  min-height: 62px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 2.2vw, 30px) !important;
  padding: 8px clamp(18px, 2.5vw, 34px) !important;
  overflow-x: auto !important;
  border: 1px solid rgba(160, 56, 48, 0.12) !important;
  border-radius: 999px !important;
  background: #edc7bf !important;
  box-shadow: 0 12px 30px rgba(86, 65, 59, 0.08) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.vv-hook-guide__quick-nav-inner::-webkit-scrollbar {
  display: none !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide__quick-nav a {
  display: inline-flex !important;
  min-height: 44px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: #4e4e4f !important;
  font-size: 14.3px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  white-space: nowrap !important;
  transition:
    color 0.2s ease,
    background-color 0.2s ease !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide__quick-nav a:hover {
  background: rgba(255, 250, 246, 0.2) !important;
  color: #4e4e4f !important;
  text-decoration: none !important;
}

html body.vv-hook-guide-page .pageArticleDetail .vv-hook-guide__quick-nav a span {
  color: #4e4e4f !important;
  font-size: 18px !important;
}

.vv-hook-guide__main {
  width: min(var(--hook-max), calc(100% - 2 * var(--hook-side))) !important;
  margin: 0 auto !important;
}

.vv-hook-guide__section {
  margin: 0 0 clamp(82px, 9vw, 128px) !important;
}

.vv-hook-guide__heading {
  max-width: 780px !important;
  margin: 0 0 38px !important;
}

.vv-hook-guide__heading--center {
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

.vv-hook-guide__heading h2 {
  margin: 0 0 15px !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05 !important;
}

.vv-hook-guide__heading > p:last-child {
  max-width: 690px !important;
  margin: 0 !important;
  color: var(--hook-muted) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.vv-hook-guide__heading--center > p:last-child {
  margin-right: auto !important;
  margin-left: auto !important;
}

.vv-hook-guide__type-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.vv-hook-guide__type-card {
  display: flex !important;
  min-width: 0 !important;
  grid-column: span 2 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(160, 56, 48, 0.11) !important;
  border-radius: 28px !important;
  background: var(--hook-paper) !important;
  box-shadow: 0 14px 36px rgba(91, 66, 60, 0.06) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.vv-hook-guide__type-card:nth-child(4) {
  grid-column: 2 / span 2 !important;
}

.vv-hook-guide__type-card:hover {
  box-shadow: 0 20px 46px rgba(91, 66, 60, 0.1) !important;
  transform: translateY(-4px) !important;
}

.vv-hook-guide__type-visual {
  position: relative !important;
  min-height: 180px !important;
  overflow: hidden !important;
  background: var(--hook-blush) !important;
}

.vv-hook-guide__type-visual::after {
  position: absolute !important;
  right: 20px !important;
  bottom: 17px !important;
  color: rgba(64, 64, 65, 0.44) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.vv-hook-guide__type-visual--ergonomic::after {
  content: "měkčená rukojeť" !important;
}

.vv-hook-guide__type-visual--metal {
  background: #edf0f0 !important;
}

.vv-hook-guide__type-visual--metal::after {
  content: "hladký kov" !important;
}

.vv-hook-guide__type-visual--wood {
  background: #efe2cd !important;
}

.vv-hook-guide__type-visual--wood::after {
  content: "bambus / dřevo" !important;
}

.vv-hook-guide__type-visual--plastic {
  background: #e7e0e9 !important;
}

.vv-hook-guide__type-visual--plastic::after {
  content: "lehký plast" !important;
}

.vv-hook-guide__type-visual--tunisian {
  background: #eadfd9 !important;
}

.vv-hook-guide__type-visual--tunisian::after {
  content: "extra dlouhý" !important;
}

.vv-hook-guide__drawn-hook {
  position: absolute !important;
  left: 14% !important;
  top: 50% !important;
  width: 68% !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: var(--hook-red) !important;
  box-shadow: 0 10px 18px rgba(82, 53, 49, 0.13) !important;
  transform: rotate(-13deg) translateY(-50%) !important;
}

.vv-hook-guide__drawn-hook::before {
  position: absolute !important;
  right: -15px !important;
  top: -12px !important;
  width: 35px !important;
  height: 35px !important;
  border: 10px solid currentColor !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-radius: 50% !important;
  color: inherit !important;
  content: "" !important;
  transform: rotate(12deg) !important;
}

.vv-hook-guide__type-visual--ergonomic .vv-hook-guide__drawn-hook {
  width: 58% !important;
  height: 30px !important;
  background: var(--hook-red) !important;
  color: #b8aeb0 !important;
}

.vv-hook-guide__type-visual--ergonomic .vv-hook-guide__drawn-hook::after {
  position: absolute !important;
  right: -50px !important;
  top: 8px !important;
  width: 62px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #b8aeb0 !important;
  content: "" !important;
}

.vv-hook-guide__type-visual--metal .vv-hook-guide__drawn-hook {
  height: 10px !important;
  background: #9da4a6 !important;
  color: #9da4a6 !important;
}

.vv-hook-guide__type-visual--wood .vv-hook-guide__drawn-hook {
  background: #aa7c4e !important;
  color: #aa7c4e !important;
}

.vv-hook-guide__type-visual--plastic .vv-hook-guide__drawn-hook {
  height: 18px !important;
  background: #8f7195 !important;
  color: #8f7195 !important;
}

.vv-hook-guide__type-visual--tunisian .vv-hook-guide__drawn-hook {
  left: 6% !important;
  width: 88% !important;
  height: 11px !important;
  background: #b98577 !important;
  color: #b98577 !important;
}

.vv-hook-guide__type-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 25px !important;
}

.vv-hook-guide__type-copy h3 {
  margin: 0 0 10px !important;
  font-size: 21px !important;
  line-height: 1.17 !important;
}

.vv-hook-guide__type-copy > p {
  margin: 0 0 17px !important;
  color: var(--hook-muted) !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.vv-hook-guide__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 0 0 18px !important;
}

.vv-hook-guide__tags span,
.vv-hook-guide__size-label {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: var(--hook-blush) !important;
  color: var(--hook-red) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.vv-hook-guide__details-button {
  display: flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: auto 0 0 !important;
  padding: 11px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hook-line) !important;
  background: transparent !important;
  color: var(--hook-red) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.vv-hook-guide__details-button span {
  font-size: 20px !important;
}

.vv-hook-guide__type-detail {
  padding: 17px 0 0 !important;
  animation: vvHookReveal 0.25s ease both;
}

.vv-hook-guide__type-detail p {
  margin: 0 0 8px !important;
  color: var(--hook-muted) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

.vv-hook-guide__type-detail p:last-child {
  margin-bottom: 0 !important;
}

.vv-hook-guide__type-detail strong {
  color: var(--hook-dark) !important;
}

.vv-hook-guide__quiz-section {
  margin: 0 0 clamp(82px, 9vw, 128px) !important;
  padding: clamp(46px, 6vw, 80px) clamp(18px, 5vw, 70px) !important;
  border-radius: 38px !important;
  background: var(--hook-sand) !important;
}

.vv-hook-guide__quiz {
  max-width: 940px !important;
  margin: 0 auto !important;
  padding: clamp(25px, 4vw, 52px) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 30px !important;
  background: var(--hook-paper) !important;
  box-shadow: var(--hook-shadow) !important;
}

.vv-hook-guide__quiz-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 42px !important;
  padding: 0 !important;
  list-style: none !important;
}

.vv-hook-guide__quiz-progress li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #8a8581 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vv-hook-guide__quiz-progress li:not(:last-child)::after {
  width: clamp(35px, 8vw, 92px) !important;
  height: 1px !important;
  margin: 0 12px !important;
  background: rgba(160, 56, 48, 0.2) !important;
  content: "" !important;
}

.vv-hook-guide__quiz-progress li span {
  display: inline-flex !important;
  width: 31px !important;
  height: 31px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(160, 56, 48, 0.2) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #8a8581 !important;
}

.vv-hook-guide__quiz-progress li.is-active,
.vv-hook-guide__quiz-progress li.is-complete {
  color: var(--hook-red) !important;
}

.vv-hook-guide__quiz-progress li.is-active span,
.vv-hook-guide__quiz-progress li.is-complete span {
  border-color: var(--hook-red) !important;
  background: var(--hook-red) !important;
  color: #fff !important;
}

.vv-hook-guide__quiz-progress li.is-complete span::before {
  content: "✓" !important;
}

.vv-hook-guide__quiz-progress li.is-complete span {
  font-size: 0 !important;
}

.vv-hook-guide__quiz-progress li.is-complete span::before {
  font-size: 13px !important;
}

.vv-hook-guide__question {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  animation: vvHookReveal 0.25s ease both;
}

.vv-hook-guide__question legend {
  width: 100% !important;
  margin: 0 0 27px !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

.vv-hook-guide__quiz-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

.vv-hook-guide__quiz-options button {
  position: relative !important;
  min-height: 76px !important;
  padding: 17px 52px 17px 19px !important;
  border: 1px solid rgba(160, 56, 48, 0.16) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: var(--hook-dark) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease !important;
}

.vv-hook-guide__quiz-options button::after {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  color: var(--hook-red) !important;
  content: "→" !important;
  font-size: 20px !important;
  transform: translateY(-50%) !important;
}

.vv-hook-guide__quiz-options button:hover {
  border-color: var(--hook-red) !important;
  background: var(--hook-blush) !important;
  transform: translateY(-2px) !important;
}

.vv-hook-guide__quiz-result {
  max-width: 700px !important;
  margin: 0 auto !important;
  text-align: center !important;
  animation: vvHookReveal 0.3s ease both;
}

.vv-hook-guide__result-icon {
  display: flex !important;
  width: 64px !important;
  height: 64px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  border-radius: 50% !important;
  background: var(--hook-blush) !important;
  color: var(--hook-red) !important;
  font-size: 26px !important;
}

.vv-hook-guide__quiz-result h3 {
  margin: 0 0 14px !important;
  font-size: clamp(28px, 3.4vw, 43px) !important;
  line-height: 1.08 !important;
}

.vv-hook-guide__quiz-result > p:not(.vv-hook-guide__eyebrow) {
  max-width: 610px !important;
  margin: 0 auto 25px !important;
  color: var(--hook-muted) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.vv-hook-guide__result-actions {
  justify-content: center !important;
}

.vv-hook-guide__reset {
  min-height: 46px !important;
  padding: 10px 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--hook-red) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  cursor: pointer !important;
}

.vv-hook-guide__noscript {
  margin: 25px 0 0 !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: var(--hook-blush) !important;
  font-size: 14px !important;
  text-align: center !important;
}

.vv-hook-guide__noscript a {
  color: var(--hook-red) !important;
  font-weight: 900 !important;
}

.vv-hook-guide__rule {
  display: flex !important;
  max-width: 980px !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 28px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(160, 56, 48, 0.14) !important;
  border-radius: 19px !important;
  background: var(--hook-blush) !important;
}

.vv-hook-guide__rule > span {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--hook-red) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.vv-hook-guide__rule p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.vv-hook-guide__yarn-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 17px !important;
}

.vv-hook-guide__yarn-card {
  min-width: 0 !important;
  padding: 19px !important;
  border: 1px solid rgba(160, 56, 48, 0.11) !important;
  border-radius: 25px !important;
  background: var(--hook-paper) !important;
}

.vv-hook-guide__yarn-visual {
  position: relative !important;
  height: 160px !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  background: #f1e3dc !important;
}

.vv-hook-guide__mini-ball {
  position: absolute !important;
  left: 21px !important;
  bottom: 20px !important;
  width: 90px !important;
  height: 82px !important;
  border-radius: 48% !important;
  background:
    repeating-linear-gradient(
      20deg,
      #bd6b65 0,
      #bd6b65 4px,
      #cb7c74 5px,
      #cb7c74 8px
    ) !important;
  box-shadow: 0 15px 24px rgba(90, 59, 55, 0.12) !important;
}

.vv-hook-guide__mini-hook {
  position: absolute !important;
  right: 26px !important;
  top: 29px !important;
  width: 11px !important;
  height: 115px !important;
  border-radius: 999px !important;
  background: var(--hook-red) !important;
  transform: rotate(32deg) !important;
}

.vv-hook-guide__mini-hook::before {
  position: absolute !important;
  left: -1px !important;
  top: -12px !important;
  width: 26px !important;
  height: 26px !important;
  border: 8px solid var(--hook-red) !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-radius: 50% !important;
  content: "" !important;
}

.vv-hook-guide__yarn-card--thin .vv-hook-guide__mini-ball {
  width: 72px !important;
  height: 66px !important;
}

.vv-hook-guide__yarn-card--thin .vv-hook-guide__mini-hook {
  width: 6px !important;
}

.vv-hook-guide__yarn-card--medium .vv-hook-guide__mini-ball {
  width: 86px !important;
  height: 78px !important;
  background:
    repeating-linear-gradient(
      20deg,
      #9b8878 0,
      #9b8878 5px,
      #ac9b8c 6px,
      #ac9b8c 10px
    ) !important;
}

.vv-hook-guide__yarn-card--medium .vv-hook-guide__mini-hook {
  width: 9px !important;
  background: #9da4a6 !important;
}

.vv-hook-guide__yarn-card--medium .vv-hook-guide__mini-hook::before {
  border-color: #9da4a6 !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.vv-hook-guide__yarn-card--thick .vv-hook-guide__mini-ball {
  width: 102px !important;
  height: 92px !important;
  background:
    repeating-linear-gradient(
      20deg,
      #a68b71 0,
      #a68b71 7px,
      #b49d86 8px,
      #b49d86 13px
    ) !important;
}

.vv-hook-guide__yarn-card--thick .vv-hook-guide__mini-hook {
  width: 13px !important;
  background: #aa7c4e !important;
}

.vv-hook-guide__yarn-card--thick .vv-hook-guide__mini-hook::before {
  border-color: #aa7c4e !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.vv-hook-guide__yarn-card--extra .vv-hook-guide__mini-ball {
  width: 116px !important;
  height: 102px !important;
  background:
    repeating-linear-gradient(
      20deg,
      #9d7589 0,
      #9d7589 9px,
      #ac8799 10px,
      #ac8799 16px
    ) !important;
}

.vv-hook-guide__yarn-card--extra .vv-hook-guide__mini-hook {
  width: 17px !important;
  background: #8f7195 !important;
}

.vv-hook-guide__yarn-card--extra .vv-hook-guide__mini-hook::before {
  border-color: #8f7195 !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.vv-hook-guide__yarn-card .vv-hook-guide__size-label {
  margin: 0 0 12px !important;
}

.vv-hook-guide__yarn-card h3 {
  margin: 0 0 9px !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
}

.vv-hook-guide__yarn-card > p:not(.vv-hook-guide__size-label) {
  margin: 0 0 12px !important;
  color: var(--hook-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.vv-hook-guide__yarn-card .vv-hook-guide__project {
  margin: auto 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--hook-line) !important;
}

.vv-hook-guide__note-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin: 22px 0 0 !important;
  padding: 22px 25px !important;
  border-radius: 21px !important;
  background: var(--hook-sand) !important;
}

.vv-hook-guide__note-box p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #5f5b58 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.vv-hook-guide__effect {
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(430px, 1.14fr) !important;
  gap: clamp(35px, 6vw, 80px) !important;
  align-items: center !important;
  margin: 0 0 clamp(82px, 9vw, 128px) !important;
  padding: clamp(32px, 5vw, 68px) !important;
  border-radius: 38px !important;
  background: var(--hook-blush) !important;
}

.vv-hook-guide__effect-copy .vv-hook-guide__heading {
  margin-bottom: 27px !important;
}

.vv-hook-guide__switcher {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.vv-hook-guide__switcher button {
  min-height: 46px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(160, 56, 48, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.63) !important;
  color: var(--hook-dark) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.vv-hook-guide__switcher button:hover,
.vv-hook-guide__switcher button.is-active {
  border-color: var(--hook-red) !important;
  background: var(--hook-red) !important;
  color: #fff !important;
}

.vv-hook-guide__effect-card {
  padding: 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 28px !important;
  background: var(--hook-paper) !important;
  box-shadow: var(--hook-shadow) !important;
}

.vv-hook-guide__stitch-sample {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  min-height: 270px !important;
  align-content: center !important;
  padding: clamp(22px, 4vw, 44px) !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #e8d0ca !important;
  transition: gap 0.28s ease !important;
}

.vv-hook-guide__stitch-sample span {
  position: relative !important;
  display: block !important;
  aspect-ratio: 1.08 / 1 !important;
  border: 9px solid var(--hook-red-light) !important;
  border-top-width: 12px !important;
  border-radius: 46% !important;
  background: transparent !important;
  transform: rotate(5deg) !important;
  transition:
    border-width 0.28s ease,
    transform 0.28s ease,
    opacity 0.28s ease !important;
}

.vv-hook-guide__effect-card[data-effect-state="small"] .vv-hook-guide__stitch-sample {
  gap: 2px !important;
}

.vv-hook-guide__effect-card[data-effect-state="small"] .vv-hook-guide__stitch-sample span {
  border-width: 13px !important;
  transform: rotate(2deg) scale(0.96) !important;
}

.vv-hook-guide__effect-card[data-effect-state="large"] .vv-hook-guide__stitch-sample {
  gap: 15px !important;
}

.vv-hook-guide__effect-card[data-effect-state="large"] .vv-hook-guide__stitch-sample span {
  border-width: 6px !important;
  opacity: 0.82 !important;
  transform: rotate(9deg) scale(1.08) !important;
}

.vv-hook-guide__effect-description {
  padding: 22px 4px 1px !important;
}

.vv-hook-guide__effect-description .vv-hook-guide__size-label {
  margin: 0 0 10px !important;
}

.vv-hook-guide__effect-description h3 {
  margin: 0 0 8px !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
}

.vv-hook-guide__effect-description > p:last-child {
  margin: 0 !important;
  color: var(--hook-muted) !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.vv-hook-guide__answer {
  max-width: 920px !important;
  margin: 0 auto 28px !important;
  padding: clamp(26px, 4vw, 43px) !important;
  border-radius: 28px !important;
  background: var(--hook-sand) !important;
  text-align: center !important;
}

.vv-hook-guide__answer > strong {
  display: block !important;
  margin: 0 0 13px !important;
  color: var(--hook-red) !important;
  font-size: clamp(21px, 2.5vw, 31px) !important;
  line-height: 1.25 !important;
}

.vv-hook-guide__answer p {
  max-width: 720px !important;
  margin: 0 auto !important;
  color: var(--hook-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.vv-hook-guide__choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.vv-hook-guide__choice-card {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.78fr) minmax(0, 1.22fr) !important;
  gap: 24px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 19px !important;
  overflow: hidden !important;
  border: 1px solid rgba(160, 56, 48, 0.11) !important;
  border-radius: 28px !important;
  background: var(--hook-paper) !important;
}

.vv-hook-guide__product-image,
.vv-hook-guide__set-visual {
  position: relative !important;
  min-height: 245px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: var(--hook-blush) !important;
}

.vv-hook-guide__product-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 245px !important;
  object-fit: cover !important;
}

.vv-hook-guide__choice-card h3 {
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.vv-hook-guide__choice-card > div:last-child > p:not(.vv-hook-guide__eyebrow) {
  margin: 0 0 20px !important;
  color: var(--hook-muted) !important;
  font-size: 14px !important;
  line-height: 1.52 !important;
}

.vv-hook-guide__set-visual span {
  position: absolute !important;
  bottom: 30px !important;
  width: 18px !important;
  height: 178px !important;
  border-radius: 999px !important;
  background: var(--hook-red) !important;
  transform-origin: bottom center !important;
}

.vv-hook-guide__set-visual span::before {
  position: absolute !important;
  left: -1px !important;
  top: -13px !important;
  width: 30px !important;
  height: 30px !important;
  border: 8px solid currentColor !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-radius: 50% !important;
  content: "" !important;
}

.vv-hook-guide__set-visual span:nth-child(1) {
  left: 22% !important;
  height: 150px !important;
  color: var(--hook-red) !important;
  transform: rotate(-10deg) !important;
}

.vv-hook-guide__set-visual span:nth-child(2) {
  left: 39% !important;
  color: #9da4a6 !important;
  background: #9da4a6 !important;
  transform: rotate(-3deg) !important;
}

.vv-hook-guide__set-visual span:nth-child(3) {
  left: 57% !important;
  height: 195px !important;
  color: #aa7c4e !important;
  background: #aa7c4e !important;
  transform: rotate(4deg) !important;
}

.vv-hook-guide__set-visual span:nth-child(4) {
  left: 74% !important;
  height: 164px !important;
  color: #8f7195 !important;
  background: #8f7195 !important;
  transform: rotate(11deg) !important;
}

.vv-hook-guide__tips {
  margin: 0 0 clamp(82px, 9vw, 128px) !important;
}

.vv-hook-guide__tip-list {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  list-style: none !important;
}

.vv-hook-guide__tip-list li {
  grid-column: span 2 !important;
  min-height: 170px !important;
  padding: 24px !important;
  border: 1px solid rgba(160, 56, 48, 0.11) !important;
  border-radius: 23px !important;
  background: var(--hook-paper) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

.vv-hook-guide__tip-list li:nth-child(4) {
  grid-column: 2 / span 2 !important;
}

.vv-hook-guide__tip-list span {
  display: flex !important;
  width: 42px !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  border-radius: 50% !important;
  background: var(--hook-blush) !important;
  color: var(--hook-red) !important;
  font-size: 20px !important;
}

.vv-hook-guide__best {
  display: flex !important;
  max-width: 940px !important;
  align-items: flex-start !important;
  gap: 22px !important;
  margin: 34px auto 0 !important;
  padding: clamp(26px, 4vw, 42px) !important;
  border-radius: 28px !important;
  background: var(--hook-blush) !important;
}

.vv-hook-guide__best > span {
  color: var(--hook-red) !important;
  font-family: Georgia, serif !important;
  font-size: 72px !important;
  line-height: 0.8 !important;
}

.vv-hook-guide__best h3 {
  margin: 0 0 8px !important;
  font-size: clamp(23px, 2.6vw, 34px) !important;
  line-height: 1.17 !important;
}

.vv-hook-guide__best p {
  margin: 0 !important;
  color: var(--hook-muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.vv-hook-guide__final {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr) !important;
  gap: 35px !important;
  min-height: 400px !important;
  align-items: center !important;
  margin: 0 0 clamp(56px, 7vw, 90px) !important;
  padding: clamp(38px, 6vw, 76px) !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  background: var(--hook-sand) !important;
  display: none !important;
}

.vv-hook-guide__final h2 {
  margin: 0 0 13px !important;
  font-size: clamp(38px, 5vw, 63px) !important;
  line-height: 1.02 !important;
}

.vv-hook-guide__final > div:first-child > p:not(.vv-hook-guide__eyebrow) {
  max-width: 580px !important;
  margin: 0 0 25px !important;
  color: var(--hook-muted) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.vv-hook-guide__final-art {
  position: relative !important;
  min-height: 270px !important;
}

.vv-hook-guide__final-ball {
  position: absolute !important;
  right: 18% !important;
  bottom: 10px !important;
  width: 180px !important;
  height: 165px !important;
  border-radius: 49% !important;
  background:
    repeating-linear-gradient(
      20deg,
      #bd6b65 0,
      #bd6b65 7px,
      #cb7c74 8px,
      #cb7c74 13px
    ) !important;
  box-shadow: 0 22px 35px rgba(90, 59, 55, 0.14) !important;
}

.vv-hook-guide__final-hook {
  position: absolute !important;
  right: 42% !important;
  top: 8px !important;
  width: 16px !important;
  height: 230px !important;
  border-radius: 999px !important;
  background: #aa7c4e !important;
  transform: rotate(29deg) !important;
}

.vv-hook-guide__final-hook::before {
  position: absolute !important;
  left: -1px !important;
  top: -15px !important;
  width: 34px !important;
  height: 34px !important;
  border: 10px solid #aa7c4e !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-radius: 50% !important;
  content: "" !important;
}

@keyframes vvHookReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .vv-hook-guide__hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .vv-hook-guide__quick-nav-inner {
    justify-content: flex-start !important;
  }

  .vv-hook-guide__yarn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vv-hook-guide__effect {
    grid-template-columns: minmax(0, 0.8fr) minmax(390px, 1.2fr) !important;
  }

  .vv-hook-guide__choice-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .vv-hook-guide {
    --hook-side: 20px;
  }

  .vv-hook-guide__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 570px !important;
    aspect-ratio: auto !important;
    margin-top: 20px !important;
  }

  .vv-hook-guide__hero-copy {
    padding-bottom: 290px !important;
  }

  .vv-hook-guide__hero-art {
    order: 2 !important;
    min-height: 470px !important;
  }

  .vv-hook-guide__quick-nav {
    margin-bottom: 72px !important;
  }

  .vv-hook-guide__type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vv-hook-guide__type-card,
  .vv-hook-guide__type-card:nth-child(4) {
    grid-column: auto !important;
  }

  .vv-hook-guide__type-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 11px) !important;
    justify-self: center !important;
  }

  .vv-hook-guide__effect {
    grid-template-columns: 1fr !important;
  }

  .vv-hook-guide__tip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vv-hook-guide__tip-list li,
  .vv-hook-guide__tip-list li:nth-child(4) {
    grid-column: auto !important;
  }

  .vv-hook-guide__tip-list li:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 680px) {
  .vv-hook-guide {
    --hook-side: 15px;
  }

  .vv-hook-guide [id] {
    scroll-margin-top: 84px;
  }

  .vv-hook-guide__hero {
    min-height: 540px !important;
    border-radius: 25px !important;
    background-position: center bottom !important;
    background-size: 100% auto !important;
  }

  .vv-hook-guide__hero-copy {
    padding: 28px 23px 230px !important;
  }

  .vv-hook-guide .vv-hook-guide__hero h1,
  .vv-hook-guide .vv-hook-guide__hero-title {
    font-size: clamp(35px, 10.8vw, 49px) !important;
  }

  .vv-hook-guide__hero-actions {
    width: 100% !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body .vv-hook-guide .vv-hook-guide__hero-actions .vv-hook-guide__button {
    width: 100% !important;
  }

  .vv-hook-guide__text-link {
    align-self: center !important;
  }

  .vv-hook-guide__hero-art {
    min-height: 390px !important;
  }

  .vv-hook-guide__cup {
    bottom: 32px !important;
    width: 210px !important;
    height: 190px !important;
  }

  .vv-hook-guide__hero-hook {
    bottom: 205px !important;
    height: 172px !important;
  }

  .vv-hook-guide__hero-hook--two {
    bottom: 200px !important;
    height: 210px !important;
  }

  .vv-hook-guide__hero-hook--three {
    bottom: 195px !important;
    height: 166px !important;
  }

  .vv-hook-guide__yarn-ball {
    bottom: 23px !important;
    left: 5% !important;
    width: 125px !important;
    height: 112px !important;
  }

  .vv-hook-guide__art-note {
    display: none !important;
  }

  .vv-hook-guide__quick-nav {
    top: 4px !important;
    width: calc(100% - 16px) !important;
  }

  .vv-hook-guide__quick-nav-inner {
    min-height: 56px !important;
    border-radius: 19px !important;
  }

  .vv-hook-guide__quick-nav a {
    min-height: 44px !important;
    padding: 7px 11px !important;
  }

  .vv-hook-guide__heading h2 {
    font-size: clamp(32px, 10vw, 44px) !important;
  }

  .vv-hook-guide__type-grid,
  .vv-hook-guide__yarn-grid,
  .vv-hook-guide__choice-grid,
  .vv-hook-guide__tip-list {
    grid-template-columns: 1fr !important;
  }

  .vv-hook-guide__type-card:last-child {
    grid-column: auto !important;
    width: 100% !important;
  }

  .vv-hook-guide__type-visual {
    min-height: 160px !important;
  }

  .vv-hook-guide__quiz-section,
  .vv-hook-guide__effect,
  .vv-hook-guide__final {
    border-radius: 26px !important;
  }

  .vv-hook-guide__quiz-section {
    padding: 39px 12px !important;
  }

  .vv-hook-guide__quiz {
    padding: 25px 15px !important;
    border-radius: 23px !important;
  }

  .vv-hook-guide__quiz-progress {
    align-items: stretch !important;
    margin-bottom: 33px !important;
  }

  .vv-hook-guide__quiz-progress li {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    font-size: 9px !important;
    text-align: center !important;
  }

  .vv-hook-guide__quiz-progress li:not(:last-child)::after {
    position: absolute !important;
    left: calc(50% + 20px) !important;
    top: 15px !important;
    width: calc(100% - 40px) !important;
    margin: 0 !important;
  }

  .vv-hook-guide__quiz-options {
    grid-template-columns: 1fr !important;
  }

  .vv-hook-guide__question legend {
    font-size: 26px !important;
  }

  .vv-hook-guide__result-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .vv-hook-guide__rule {
    align-items: flex-start !important;
  }

  .vv-hook-guide__note-box {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .vv-hook-guide__note-box .vv-hook-guide__button {
    width: 100% !important;
  }

  .vv-hook-guide__effect {
    padding: 29px 15px !important;
  }

  .vv-hook-guide__switcher {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .vv-hook-guide__switcher button {
    width: 100% !important;
  }

  .vv-hook-guide__effect-card {
    padding: 14px !important;
  }

  .vv-hook-guide__stitch-sample {
    min-height: 210px !important;
    gap: 4px !important;
    padding: 19px !important;
  }

  .vv-hook-guide__stitch-sample span {
    border-width: 6px !important;
  }

  .vv-hook-guide__effect-card[data-effect-state="small"] .vv-hook-guide__stitch-sample span {
    border-width: 8px !important;
  }

  .vv-hook-guide__effect-card[data-effect-state="large"] .vv-hook-guide__stitch-sample {
    gap: 8px !important;
  }

  .vv-hook-guide__choice-card {
    grid-template-columns: 1fr !important;
  }

  .vv-hook-guide__product-image,
  .vv-hook-guide__set-visual,
  .vv-hook-guide__product-image img {
    min-height: 230px !important;
  }

  .vv-hook-guide__tip-list li,
  .vv-hook-guide__tip-list li:last-child {
    grid-column: auto !important;
    min-height: 0 !important;
  }

  .vv-hook-guide__best {
    gap: 12px !important;
  }

  .vv-hook-guide__best > span {
    font-size: 50px !important;
  }

  .vv-hook-guide__final {
    grid-template-columns: 1fr !important;
    padding: 38px 22px 20px !important;
  }

  .vv-hook-guide__final-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .vv-hook-guide__final-actions .vv-hook-guide__button {
    width: 100% !important;
  }

  .vv-hook-guide__final-art {
    min-height: 230px !important;
  }
}

@media (max-width: 390px) {
  .vv-hook-guide__hero-art {
    min-height: 350px !important;
  }

  .vv-hook-guide__cup {
    width: 180px !important;
    height: 165px !important;
  }

  .vv-hook-guide__hero-hook {
    bottom: 177px !important;
    height: 155px !important;
  }

  .vv-hook-guide__hero-hook--two {
    bottom: 173px !important;
    height: 184px !important;
  }

  .vv-hook-guide__hero-hook--three {
    bottom: 170px !important;
    height: 145px !important;
  }

  .vv-hook-guide__yarn-ball {
    width: 100px !important;
    height: 90px !important;
  }
}

/* Full-image layout for the hook type overview. */
#vv-hook-types {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 40px !important;
  background:
    #f5ebe1
    url("/user/documents/upload/kody/vv-hook-types-bg-extension.jpg")
    center top / 100% auto no-repeat !important;
  box-shadow: 0 24px 58px rgba(91, 66, 60, 0.11) !important;
}

#vv-hook-types > .vv-hook-guide__heading {
  max-width: 860px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding:
    clamp(48px, 5.4vw, 76px)
    clamp(22px, 5vw, 60px)
    clamp(42px, 4.8vw, 66px) !important;
  text-align: center !important;
}

#vv-hook-types > .vv-hook-guide__heading .vv-hook-guide__eyebrow {
  display: none !important;
}

#vv-hook-types > .vv-hook-guide__heading > p:last-child {
  margin-right: auto !important;
  margin-left: auto !important;
}

#vv-hook-types .vv-hook-guide__type-grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 1150px !important;
  aspect-ratio: 941 / 1380 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-top: 0 !important;
  border-radius: 0 0 40px 40px !important;
  background:
    #f5ebe1
    url("/user/documents/upload/kody/vv-hook-types-bg.jpg")
    center center / cover no-repeat !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

#vv-hook-types .vv-hook-guide__type-card {
  position: absolute !important;
  z-index: 1 !important;
  width: clamp(275px, 32%, 370px) !important;
  min-width: 0 !important;
  grid-column: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 25px !important;
  background: rgba(255, 250, 240, 0.82) !important;
  box-shadow: 0 18px 44px rgba(75, 55, 49, 0.13) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.9) !important;
  backdrop-filter: blur(10px) saturate(0.9) !important;
}

#vv-hook-types .vv-hook-guide__type-card:nth-child(1) {
  right: 2.5% !important;
  top: 68% !important;
}

#vv-hook-types .vv-hook-guide__type-card:nth-child(2) {
  right: 3.5% !important;
  top: 44% !important;
}

#vv-hook-types .vv-hook-guide__type-card:nth-child(3) {
  left: 28% !important;
  top: 13% !important;
}

#vv-hook-types .vv-hook-guide__type-card:nth-child(4) {
  left: 27% !important;
  top: 69% !important;
}

#vv-hook-types .vv-hook-guide__type-card:nth-child(5) {
  right: 2.5% !important;
  top: 16% !important;
}

#vv-hook-types .vv-hook-guide__type-card:hover {
  box-shadow: 0 22px 48px rgba(75, 55, 49, 0.17) !important;
}

#vv-hook-types .vv-hook-guide__type-visual {
  display: none !important;
}

#vv-hook-types .vv-hook-guide__type-copy {
  padding: clamp(20px, 2.2vw, 27px) !important;
}

#vv-hook-types .vv-hook-guide__type-copy h3 {
  font-size: clamp(19px, 1.8vw, 23px) !important;
}

#vv-hook-types .vv-hook-guide__tags span {
  background: rgba(237, 199, 191, 0.58) !important;
}

#vv-hook-types .vv-hook-guide__details-button {
  border-top-color: rgba(160, 56, 48, 0.18) !important;
}

@media (max-width: 900px) {
  #vv-hook-types {
    border-radius: 32px !important;
  }

  #vv-hook-types .vv-hook-guide__type-grid {
    min-height: 1080px !important;
    aspect-ratio: 941 / 1420 !important;
    border-radius: 0 0 32px 32px !important;
  }

  #vv-hook-types .vv-hook-guide__type-card,
  #vv-hook-types .vv-hook-guide__type-card:last-child {
    width: min(42%, 330px) !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(1) {
    right: 4% !important;
    top: 68% !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(2) {
    right: 4% !important;
    top: 43% !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(3) {
    left: 28% !important;
    top: 12% !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(4) {
    left: 27% !important;
    top: 68% !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(5) {
    right: 4% !important;
    top: 15% !important;
  }
}

@media (max-width: 680px) {
  #vv-hook-types {
    border-radius: 25px !important;
  }

  #vv-hook-types > .vv-hook-guide__heading {
    margin-bottom: 0 !important;
    padding: 36px 18px 32px !important;
  }

  #vv-hook-types .vv-hook-guide__type-grid {
    display: flex !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex-direction: column !important;
    gap: 17px !important;
    padding: 28px 16px !important;
    border-radius: 0 0 25px 25px !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  #vv-hook-types .vv-hook-guide__type-card,
  #vv-hook-types .vv-hook-guide__type-card:last-child,
  #vv-hook-types .vv-hook-guide__type-card:nth-child(n) {
    position: relative !important;
    inset: auto !important;
    width: 88% !important;
    transform: none !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(odd) {
    align-self: flex-start !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(even) {
    align-self: flex-end !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(1) {
    order: 5 !important;
    align-self: flex-end !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(2) {
    order: 3 !important;
    align-self: center !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(3) {
    order: 1 !important;
    align-self: flex-start !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(4) {
    order: 4 !important;
    align-self: flex-start !important;
  }

  #vv-hook-types .vv-hook-guide__type-card:nth-child(5) {
    order: 2 !important;
    align-self: flex-end !important;
  }

  #vv-hook-types .vv-hook-guide__type-card {
    background: rgba(255, 250, 240, 0.86) !important;
  }

  #vv-hook-types .vv-hook-guide__type-copy {
    padding: 19px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vv-hook-guide *,
  .vv-hook-guide *::before,
  .vv-hook-guide *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}