.nav-links .current {
  color: var(--blue);
}

.product-page {
  width: min(1680px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 60px 0 82px;
  overflow: visible;
}

.product-hero {
  max-width: 710px;
  margin-bottom: 46px;
}

.product-hero h1 {
  margin: 0 0 20px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 740;
  font-size: 46px;
  line-height: 1.22;
  letter-spacing: -.065em;
}

.product-hero h1 span {
  color: var(--blue);
}

.product-hero > p:not(.eyebrow) {
  margin: 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.8;
}

.country-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 34px;
  align-items: stretch;
}

.flag-cloud {
  position: sticky;
  top: 105px;
  min-height: 890px;
  height: min(930px, calc(100vh - 126px));
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 32% 18%, rgba(23, 103, 234, .14), transparent 14rem),
    radial-gradient(circle at 72% 56%, rgba(20, 184, 166, .16), transparent 15rem),
    linear-gradient(155deg, rgba(255, 255, 255, .58), rgba(239, 246, 255, .3));
}

.flag-cloud::after {
  content: "";
  position: absolute;
  width: 155px;
  height: 155px;
  right: -38px;
  bottom: -31px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 103, 234, .16), rgba(23, 103, 234, 0) 68%);
}

.flag-orb {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 20px 42px rgba(9, 27, 50, .16);
  transform: rotate(var(--rotate, -7deg));
}

.flag-orb.mini {
  width: 74px;
  height: 74px;
  border-width: 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.flag-orb.mini span {
  position: relative;
  z-index: 1;
}

.flag-orb svg {
  width: 148%;
  height: 96%;
  object-fit: cover;
}

.flag-orb.large {
  width: 174px;
  height: 174px;
}

.flag-orb.small {
  width: 104px;
  height: 104px;
}

.orb-us {
  --rotate: -8deg;
  top: 44px;
  left: 36px;
}

.orb-canada {
  --rotate: 10deg;
  top: 198px;
  right: 33px;
  width: 136px;
  height: 136px;
}

.orb-uk {
  --rotate: -14deg;
  left: 44px;
  bottom: 70px;
  width: 132px;
  height: 132px;
}

.orb-au {
  --rotate: 12deg;
  right: -25px;
  bottom: -12px;
}

.orb-br.small {
  top: 352px;
  left: 185px;
}

.orb-es.small {
  top: 18px;
  right: 24px;
  opacity: .86;
}

.orb-eu {
  --rotate: 8deg;
  top: 120px;
  right: 98px;
  background: #1d4ed8;
}

.orb-jp {
  --rotate: -10deg;
  top: 290px;
  left: 42px;
  background: radial-gradient(circle, #d91f3f 0 28%, #fff 29%);
  color: #d91f3f;
}

.orb-de {
  --rotate: 13deg;
  right: 44px;
  top: 355px;
  background: linear-gradient(#111 0 33%, #dd0000 33% 66%, #ffce00 66%);
}

.orb-fr {
  --rotate: -15deg;
  left: 104px;
  bottom: 30px;
  background: linear-gradient(90deg, #1d4ed8 0 33%, #fff 33% 66%, #ef4444 66%);
  color: #0f2f72;
}

.orb-sg {
  --rotate: 9deg;
  right: 120px;
  bottom: 88px;
  background: linear-gradient(#ef4444 0 50%, #fff 50%);
  color: #ef4444;
}

.flag-cloud-copy {
  position: absolute;
  left: 58px;
  right: 58px;
  top: 560px;
  padding: 18px 20px;
  border: 1px solid rgba(185, 210, 250, .64);
  border-radius: 22px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 18px 34px rgba(15, 39, 72, .08);
}

.flag-cloud-copy strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 18px;
}

.flag-cloud-copy span {
  color: #4e6682;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.country-products {
  display: grid;
  gap: 22px;
}

.country-card {
  display: grid;
  grid-template-columns: 230px minmax(160px, 1fr) minmax(230px, 300px);
  gap: 30px;
  min-height: 154px;
  padding: 28px 36px;
  border: 1px solid rgba(190, 211, 246, .9);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94));
  position: relative;
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.country-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--blue);
  opacity: 0;
  transition: opacity .24s ease;
}

.country-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 76px;
  top: 50%;
  width: 168px;
  height: 168px;
  border: 9px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  opacity: .2;
  transform: translateY(-50%) rotate(var(--card-flag-rotate, -8deg));
  box-shadow: 0 16px 34px rgba(9, 27, 50, .13);
}

.featured-country {
  border-color: #bfd4f8;
}

#usa {
  min-height: 186px;
  border-color: rgba(138, 178, 244, .95);
  background:
    radial-gradient(circle at 92% 14%, rgba(23, 103, 234, .12), transparent 18rem),
    linear-gradient(135deg, #fff, #f6f9ff);
}

#usa::after,
#usa .flag-mini {
  background:
    linear-gradient(90deg, #3c3b6e 0 40%, transparent 40%),
    repeating-linear-gradient(180deg, #b22234 0 9px, #fff 9px 18px);
}

#canada {
  --card-flag-rotate: 9deg;
}

#canada::after,
#canada .flag-mini {
  background:
    linear-gradient(90deg, #e41e2b 0 24%, #fff 24% 76%, #e41e2b 76%),
    radial-gradient(circle at 50% 50%, #e41e2b 0 15%, transparent 16%);
}

#uk {
  --card-flag-rotate: -12deg;
}

#uk::after,
#uk .flag-mini {
  background:
    linear-gradient(90deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 38%, #c8102e 38% 62%, transparent 62%),
    linear-gradient(32deg, transparent 43%, #fff 43% 50%, #c8102e 50% 56%, #fff 56% 63%, transparent 63%),
    linear-gradient(-32deg, transparent 43%, #fff 43% 50%, #c8102e 50% 56%, #fff 56% 63%, transparent 63%),
    #012169;
}

#australia {
  --card-flag-rotate: 13deg;
}

#australia::after,
#australia .flag-mini {
  background:
    radial-gradient(circle at 70% 35%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 78% 62%, #fff 0 4%, transparent 5%),
    radial-gradient(circle at 53% 72%, #fff 0 6%, transparent 7%),
    linear-gradient(135deg, #012169 0 42%, #fff 42% 47%, #c8102e 47% 53%, #fff 53% 58%, #00008b 58%),
    #00008b;
}

#others {
  --card-flag-rotate: -4deg;
}

#others::after {
  background:
    radial-gradient(circle at 28% 32%, rgba(23, 103, 234, .85) 0 18%, transparent 19%),
    radial-gradient(circle at 68% 35%, rgba(20, 184, 166, .8) 0 16%, transparent 17%),
    radial-gradient(circle at 48% 70%, rgba(9, 28, 56, .75) 0 18%, transparent 19%),
    #edf4ff;
}

.flag-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 110px;
  padding-top: 0;
}

.flag {
  width: 205px;
  height: 119px;
  display: block;
  border-radius: 11px;
  box-shadow: 0 14px 28px rgba(9, 27, 50, .13);
  transition: transform .24s ease, box-shadow .24s ease;
}

.country-info {
  position: relative;
  z-index: 1;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(220px, 300px);
  gap: 24px;
  align-items: center;
  min-width: 0;
}

.country-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 0;
}

.country-name {
  display: none;
}

.country-name span {
  margin-left: 7px;
  color: var(--muted);
}

.country-head h2 {
  margin: 0;
  font-family: inherit;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.country-desc {
  margin: 0 0 15px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.65;
}

.available-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.available-tags span {
  padding: 6px 11px;
  border-radius: 16px;
  color: #34597f;
  background: #edf4fd;
  font-size: 12px;
}

.available-tags .muted-tag {
  color: #778ba2;
  background: #f1f4f8;
}

.country-action {
  position: relative;
  z-index: 1;
  min-height: 40px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.country-action strong {
  margin-right: auto;
  font-size: 24px;
  letter-spacing: -.04em;
}

.country-action small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.plain-link {
  display: inline-flex;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  transition: color .24s ease, transform .24s ease;
}

.catalog-button {
  position: static;
  z-index: 2;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  padding: 0 32px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #0f5ed7);
  box-shadow: 0 14px 26px rgba(23, 103, 234, .18);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.catalog-button:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(23, 103, 234, .24);
}

.catalog-entry-action {
  min-height: 100%;
  justify-content: center;
}

.other-mark {
  position: relative;
  z-index: 1;
  width: 205px;
  height: 119px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd7e8;
  border-radius: 11px;
  color: var(--blue);
  background: #f4f8ff;
  font-size: 42px;
}

.inquiry-button {
  padding: 12px 21px;
  border-radius: 10px;
  color: white;
  background: var(--blue);
  font-size: 13px;
  font-weight: 700;
  transition: transform .24s ease, box-shadow .24s ease;
}

.country-card .add-button {
  transition: transform .24s ease, box-shadow .24s ease, color .24s ease, background .24s ease;
}

.country-card:hover {
  z-index: 1;
  transform: translateY(-5px) scale(1.012);
  border-color: #99bdf8;
  box-shadow: 0 20px 44px rgba(23, 103, 234, .13);
}

.country-card:hover::before {
  opacity: 1;
}

.country-card:hover .flag {
  transform: scale(1.035);
  box-shadow: 0 14px 26px rgba(9, 27, 50, .16);
}

.country-card:hover .plain-link {
  color: #1055c9;
  transform: translateX(2px);
}

.country-card:hover .add-button,
.country-card:hover .inquiry-button {
  color: #fff;
  background: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(23, 103, 234, .2);
}

@media (max-width: 1100px) {
  .product-page {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
  }

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

  .flag-cloud {
    position: static;
    min-height: 280px;
    height: auto;
  }

  .flag-cloud-copy {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 18px;
  }
}

@media (max-width: 720px) {
  .product-page {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding-top: 40px;
  }

  .product-hero h1 {
    font-size: clamp(32px, 10vw, 38px);
    letter-spacing: -.045em;
  }

  .flag-cloud {
    min-height: 320px;
    border-radius: 22px;
  }

  .flag-orb.large {
    width: 128px;
    height: 128px;
  }

  .orb-us {
    top: 28px;
    left: 24px;
  }

  .orb-canada {
    top: 92px;
    right: 26px;
    width: 96px;
    height: 96px;
  }

  .orb-uk {
    left: 24px;
    bottom: 24px;
    width: 92px;
    height: 92px;
  }

  .orb-au {
    right: -16px;
    bottom: 6px;
  }

  .orb-br,
  .orb-es,
  .orb-jp,
  .orb-fr {
    display: none;
  }

  .country-card {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 18px;
  }

  .country-card::after {
    right: -36px;
    top: 18px;
    width: 120px;
    height: 120px;
    transform: rotate(var(--card-flag-rotate, -8deg));
  }

  .flag {
    width: min(100%, 190px);
    height: auto;
    aspect-ratio: 190 / 110;
  }

  .other-mark {
    width: min(100%, 190px);
    height: 110px;
  }

  .country-info {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: flex-start;
  }

  .country-action {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .catalog-button {
    width: 100%;
    min-height: 50px;
  }

  .catalog-button:hover {
    transform: translateY(-1px);
  }

  .flag-orb.mini {
    width: 58px;
    height: 58px;
    font-size: 15px;
  }

  .orb-eu,
  .orb-de,
  .orb-sg {
    display: none;
  }

  .country-action strong {
    width: 100%;
    margin-bottom: 7px;
  }
}

@media (hover: none) {
  .country-card:hover {
    transform: none;
    box-shadow: none;
  }

  .country-card:hover .flag,
  .country-card:hover .plain-link,
  .country-card:hover .add-button,
  .country-card:hover .inquiry-button {
    transform: none;
  }

  .country-card:hover .catalog-button {
    transform: none;
  }
}