/** Shopify CDN: Minification failed

Line 187:18 Unexpected "{"
Line 187:27 Expected ":"
Line 188:18 Unexpected "{"
Line 188:27 Expected ":"

**/
/* =============================================================================
   Globes101-only hide/show
   ============================================================================= */
.globes101__hidden { display: none !important; }

/* =============================================================================
   Wrapper positioning
   ============================================================================= */
.understanding-the-globes-wrapper { position: relative; width: 100%; }

/* =============================================================================
   Intro & Overlay grid (50/50)
   ============================================================================= */
.globe-selection-guide-container,
.cap-selection-guide,
.shape-selection-guide,
.technology-selection-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

@media screen and (max-width: 767px) {
  .globe-selection-guide-container,
  .cap-selection-guide,
  .shape-selection-guide,
  .technology-selection-guide {
    display: flex;
    gap: 2rem;
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    flex-direction: column;
  }
}

/* =============================================================================
   Headings & body text
   ============================================================================= */
.globe-selection-guide-info h1,
.cap-selection-guide-info h1,
.shape-selection-guide-info h1,
.technology-selection-guide-info h1 {
  margin-bottom: 1rem;
}
.globe-selection-guide-info .rte,
.cap-selection-guide-info .rte,
.shape-selection-guide-info .rte,
.technology-selection-guide-info .rte {
  margin-top: 1rem;
}

/* =============================================================================
   Names under each icon
   ============================================================================= */
.globe-cap-names span,
.globe-shape-names span,
.globe-technology-names span {
  display: block;
  line-height: 1.2;
}
.globe-cap-names span:first-child { font-weight: 600; }
.globe-cap-names span:last-child,
.globe-shape-names span,
.globe-technology-names span { font-size: 0.875rem; }

/* =============================================================================
   Cards grid inside overlays
   ============================================================================= */
.globes101__cards {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .globes101__cards { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================================
   UNIVERSAL ICON CIRCLES (buttons & cards) — ensures visually identical sizes
   ============================================================================= */
:root {
  /* base sizes; tuned for your design */
  --g101-btn-circle: 64px;   /* intro buttons */
  --g101-card-circle: 100px; /* overlay cards */
  --g101-img-scale: 0.60;    /* image fits inside circle */
}

.globes101__icon-circle {
  background: #fff;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden; /* guarantees perfect roundness even if images are not square */
}

.globes101__icon-circle--button {
  width: var(--g101-btn-circle);
  height: var(--g101-btn-circle);
}
.globes101__icon-circle--card {
  width: var(--g101-card-circle);
  height: var(--g101-card-circle);
}

.globes101__icon-circle img {
  max-width: calc(var(--g101-btn-circle) * var(--g101-img-scale));
  max-height: calc(var(--g101-btn-circle) * var(--g101-img-scale));
  width: auto;
  height: auto;
}

.globes101__icon-circle--card img {
  max-width: calc(var(--g101-card-circle) * var(--g101-img-scale));
  max-height: calc(var(--g101-card-circle) * var(--g101-img-scale));
}

/* Card layout */
.globes101__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.globes101__card-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: inherit;
}

/* Keep button icons perfectly round on hover/focus/active */
.globes101__icon-circle--button,
.globes101__icon-circle--button:hover,
.globes101__icon-circle--button:focus,
.globes101__icon-circle--button:active {
  border-radius: 50% !important;
  width: var(--g101-btn-circle) !important;
  height: var(--g101-btn-circle) !important;
  flex-shrink: 0;
}
/* =============================================================================
   Intro buttons stack
   ============================================================================= */
.globe-key-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  align-items: flex-start;
}

/* Theme button shell already present; keep only sizing tweaks */
.globes101__button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  width: 300px;
  margin: 0 auto;
}
.globes101__button .btn-fill { position: absolute; inset: 0; pointer-events: none; transform: translateY(var(--motion-translateY)); }
.globes101__button .btn-text { position: relative; }

/* Back button should look like theme buttons but be auto-width */
.globes101__button-back { width: auto; }

/* (Legacy) remove old per-image sizing so shapes/caps/tech all match */
.globes101__button img { display: block; }

/* Remove older round/size rules that caused inconsistency */
.globes101__card-icon { /* kept for backward compatibility; no visual rules */ }

/* Add extra space above the Go Back button in overlays */
#shopify-section-{{ section.id }} .globes101__button-back,
#shopify-section-{{ section.id }} .globes101__button.back-to-guide-intro-btn {
  margin-top: 2rem; /* adjust to taste, e.g., 1.5rem, 2.5rem */
}