/** Shopify CDN: Minification failed

Line 2380:9 Expected identifier but found whitespace
Line 2380:10 Unexpected "0"

**/
/* Custom styles for Shopify Refresh Theme */
body {
  letter-spacing: 0rem;
}

.heading-highlight {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
  color: var(--ds-brand-500);
  background: linear-gradient(100deg, var(--ds-brand-500) 0%, var(--ds-brand-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading-highlight::after {
  position: absolute;
  right: -0.08em;
  bottom: -0.03em;
  left: -0.05em;
  height: 0.13em;
  border-radius: 70% 30% 65% 35%;
  background: linear-gradient(100deg, var(--ds-brand-500) 0%, var(--ds-brand-green) 100%);
  content: '';
  opacity: 0.88;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

@media screen and (max-width: 749px) {
  .heading-highlight {
    padding-bottom: 0.1em;
  }

  .heading-highlight::after {
    height: 0.15em;
  }
}

.collection-hero-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgb(var(--color-background));
}

.collection-hero-banner .collection-hero__background {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.collection-hero-banner::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-background), var(--collection-hero-overlay-opacity)) 0%,
    rgba(var(--color-background), 0.5) 56%,
    rgb(var(--color-background)) 100%
  );
  content: '';
}

.collection-hero-banner .collection-hero__background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.collection-hero-banner .collection-hero__inner {
  position: relative;
  z-index: 0;
  min-height: 34rem;
}

.collection-hero-banner .slideshow__text.banner__box.collection-hero__text-wrapper {
  max-width: 76rem;
}

.collection-hero-banner .collection-hero__description {
  max-width: 100%;
}

@media screen and (min-width: 750px) {
  .collection-hero-banner .collection-hero__text-wrapper {
    padding: 5rem;
  }
}

@media screen and (max-width: 749px) {
  .collection-hero-banner .collection-hero__inner {
    min-height: 28rem;
    padding: 2.4rem 1.5rem;
  }

  .collection-hero-banner .slideshow__text.banner__box.collection-hero__text-wrapper {
    background: rgb(var(--color-background)) !important;
    border: 0.1rem solid rgba(var(--color-foreground), 0.12) !important;
    border-radius: var(--text-boxes-radius) !important;
    box-shadow: 0 0.8rem 2.4rem rgba(var(--color-shadow), 0.12) !important;
    padding: 2.4rem 2rem;
  }
}

@media screen and (max-width: 749px) {
  #MainContent:has(.main-list-collections) .slideshow.banner--small.banner--mobile-bottom .banner__media {
    height: 22rem;
  }
}

@media screen and (min-width: 750px) {
  #MainContent:has(.main-list-collections) .slideshow.banner--small {
    min-height: 34rem;
  }
}

/* 1. Tokens */
:root {
  --ds-brand-50:  #f0fbfc;
  --ds-brand-100: #dcf6f9;
  --ds-brand-200: #bceef4;
  --ds-brand-300: #8ee0ea;
  --ds-brand-400: #5accdb;
  --ds-brand-500: #46b9c9; /* Primary Brand */
  --ds-brand-green: #8bdb6f;
  --ds-brand-600: #329ba9;
  --ds-brand-700: #2a7c89;
  --ds-brand-800: #286570;
  --ds-brand-900: #25545e;

  /* Semantic Colors */
  --ds-success-bg:   #ecfdf5;
  --ds-success-text: #065f46;
  --ds-success-def:  #10b981;
  
  --ds-warning-bg:   #fffbeb;
  --ds-warning-text: #92400e;
  
  --ds-error-bg:     #fef2f2;
  --ds-error-text:   #991b1b;
  
  /* External Brand Colors */
  --ds-minecraft-text: #52a535;
  --ds-minecraft-bg:   #eef9ed;
  
  --ds-discord-text:   #5865F2;
  --ds-discord-bg:     #eef0fd;
  
  --ds-youtube-text:   #FF0000;
  --ds-youtube-bg:     #ffe5e5;

  --ds-neutral-bg:   #f8fafc;
  --ds-neutral-text: #1e293b;
}

/* 2. Utility Classes (Tailwind-like) */

/* Layout */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.shrink-0 { flex-shrink: 0; }

/* Spacing */
.p-4 { padding: 1rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Borders */
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: var(--text-boxes-radius); }

/* Typography */
.text-xs { font-size: 1.3rem; line-height: 1.6rem; }
.text-sm { font-size: 1.4rem; line-height: 2rem; }
.text-base { font-size: 1.6rem; line-height: 2.2rem; }
.text-xl { font-size: 2rem; line-height: 2.4rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }

/* Backgrounds & Colors */
.bg-brand-500 { background-color: var(--ds-brand-500); }
.text-white { color: #ffffff; }

.bg-brand-100 { background-color: var(--ds-brand-100); }
.text-brand-700 { color: var(--ds-brand-700); }

.bg-success-bg { background-color: var(--ds-success-bg); }
.text-success-text { color: var(--ds-success-text); }

.bg-warning-bg { background-color: var(--ds-warning-bg); }
.text-warning-text { color: var(--ds-warning-text); }

.bg-error-bg { background-color: var(--ds-error-bg); }
.text-error-text { color: var(--ds-error-text); }

.bg-neutral-bg { background-color: var(--ds-neutral-bg); }
.text-neutral-text { color: var(--ds-neutral-text); }

/* Focus States (Global Override from Design System) */
*:focus-visible {
  outline: 2px solid var(--ds-brand-500);
  outline-offset: 2px;
}

/* =============================================================================
   HULK PRODUCT OPTIONS — THEME INTEGRATION — START
   All Hulk overrides live between START and END markers.
   ============================================================================= */

/* --- Main Container Reset --- */
.hulkapps_product_options {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
}

/* --- Option Labels --- */
/* Hulk injects .hulkapps_option_name with display:table, width:130px,
   font-weight:normal, font-size:16px, color:rgb(14,27,77). Override all. */
.hulkapps_option_name {
  font-family: var(--font-body-family) !important;
  font-size: 1.4rem !important;
  font-weight: var(--font-body-weight-bold) !important;
  color: rgb(var(--color-foreground)) !important;
  letter-spacing: 0.04rem !important;
  margin-bottom: 0.8rem !important;
  line-height: 1.5 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.hulkapps_option_name .hulkapps-required {
  color: var(--ds-error-text) !important;
  font-weight: var(--font-body-weight-bold) !important;
}

/* --- Spacing Between Options --- */
/* Hulk injects transition:all 0.3s — causes animated layout shift on validation */
.hulkapps_option {
  margin-bottom: 1.5rem;
  transition: none !important;
}

.hulkapps_option:last-child {
  margin-bottom: 0;
}

/* --- Text Inputs & Textareas --- */
.hulkapps_option_value input[type="text"],
.hulkapps_option_value input[type="email"],
.hulkapps_option_value input[type="tel"],
.hulkapps_option_value input[type="number"],
.hulkapps_option_value input[type="url"],
.hulkapps_option_value input[type="search"],
.hulkapps_option_value input[type="password"],
.hulkapps_option_value textarea,
.hulkapps_option_set .hulkapps_option_value input[type="text"],
.hulkapps_option_set .hulkapps_option_value input[type="email"],
.hulkapps_option_set .hulkapps_option_value input[type="tel"],
.hulkapps_option_set .hulkapps_option_value input[type="number"],
.hulkapps_option_set .hulkapps_option_value textarea {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background)) !important;
  color: rgb(var(--color-foreground)) !important;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight) !important;
  font-size: 1.6rem !important;
  width: 100%;
  box-sizing: border-box;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: var(--inputs-radius) !important;
  height: 4.5rem;
  padding: 1.5rem !important;
  outline: none !important;
  transition: box-shadow var(--duration-short) ease;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

.hulkapps_option_value textarea {
  height: auto;
  min-height: 10rem;
  resize: vertical;
}

.hulkapps_option_value input[type="text"]:hover,
.hulkapps_option_value input[type="email"]:hover,
.hulkapps_option_value input[type="tel"]:hover,
.hulkapps_option_value input[type="number"]:hover,
.hulkapps_option_value input[type="url"]:hover,
.hulkapps_option_value input[type="search"]:hover,
.hulkapps_option_value input[type="password"]:hover,
.hulkapps_option_value textarea:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

.hulkapps_option_value input[type="text"]:focus,
.hulkapps_option_value input[type="email"]:focus,
.hulkapps_option_value input[type="tel"]:focus,
.hulkapps_option_value input[type="number"]:focus,
.hulkapps_option_value input[type="url"]:focus,
.hulkapps_option_value input[type="search"]:focus,
.hulkapps_option_value input[type="password"]:focus,
.hulkapps_option_value textarea:focus {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground)) !important;
  outline: 0 !important;
}

.hulkapps_option_value input::placeholder,
.hulkapps_option_value textarea::placeholder {
  color: rgba(var(--color-foreground), 0.5);
}

/* --- Select / Dropdown --- */
.hulkapps_option_value select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  padding: 0 3rem 0 1.5rem;
  cursor: pointer;
  outline: none !important;
  transition: box-shadow var(--duration-short) ease;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1rem 0.6rem;
}

.hulkapps_option_value select:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

.hulkapps_option_value select:focus {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground)) !important;
  outline: 0 !important;
}

/* --- Checkboxes & Radio Buttons --- */
.hulkapps_option_value input[type="checkbox"],
.hulkapps_option_value input[type="radio"] {
  width: 1.8rem;
  height: 1.8rem;
  accent-color: rgb(var(--color-button));
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.hulkapps_option_value label {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.5;
}

/* --- File Upload --- */
.hulkapps_option .file-upload {
  position: relative;
  width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.hulkapps_option .file-select {
  display: flex !important;
  align-items: center;
  border-radius: var(--inputs-radius) !important;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
  overflow: hidden;
  transition: none !important;
  background-color: rgb(var(--color-background)) !important;
  height: 4.5rem;
  border: none !important;
  outline: none !important;
}

.hulkapps_option .file-select:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

.hulkapps_option .file-select-name {
  flex-grow: 1;
  padding: 0 1.5rem;
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.5) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent !important;
  border: none !important;
}

.hulkapps_option .file-select-name:not(.noFile) {
  color: rgb(var(--color-foreground)) !important;
}

.hulkapps_option .file-select-button,
.hulkapps_option .file-select-button#fileName {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 3rem;
  height: 100%;
  background-color: rgb(var(--color-button)) !important;
  color: rgb(var(--color-button-text)) !important;
  font-family: var(--font-body-family);
  font-size: 1.5rem !important;
  font-weight: inherit;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: none !important;
  outline: none !important;
  transition: opacity var(--duration-short) ease;
}

/* Hover via parent — file input overlay steals :hover from the button directly */
.hulkapps_option .file-upload:hover .file-select-button,
.hulkapps_option .file-upload:hover .file-select-button#fileName {
  opacity: 0.85;
}

.hulkapps_option .file-upload input[type="file"] {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  cursor: pointer;
  border: none !important;
  outline: none !important;
}

/* Kill any Hulk default borders/outlines on the upload wrapper */
.hulkapps_option.fu_render .hulkapps_option_value,
.hulkapps_option_set .hulkapps_option.fu_render .hulkapps_option_value {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

.hulkapps_option.fu_render,
.hulkapps_option_set .hulkapps_option.fu_render {
  border: none !important;
  outline: none !important;
}

/* Override Hulk dashboard CSS on file upload container */
.hulkapps_option_set .file-upload,
.hulkapps_product_options .file-upload,
.hulkapps_option .file-upload {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Override Hulk dashboard CSS on file-select — all states including after file selection */
.hulkapps_option_set .file-select,
.hulkapps_product_options .file-select,
.hulkapps_option .file-select,
.hulkapps_option .file-select[style] {
  border: none !important;
  background-color: rgb(var(--color-background)) !important;
  border-radius: var(--inputs-radius) !important;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
  outline: none !important;
}

.hulkapps_option .file-select:hover,
.hulkapps_option .file-select[style]:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

/* Override Hulk dashboard CSS on inputs */
.hulkapps_option_set input[type="text"],
.hulkapps_option_set input[type="email"],
.hulkapps_option_set input[type="file"] {
  border: none !important;
  border-color: transparent !important;
  border-radius: var(--inputs-radius) !important;
  padding: 1.5rem !important;
  font-weight: var(--font-body-weight) !important;
}

/* --- Swatches --- */
.hulkapps_option .hulk_swatch_item {
  border-radius: var(--inputs-radius);
  border: 2px solid rgba(var(--color-foreground), 0.15);
  cursor: pointer;
  transition: border-color var(--duration-short) ease, box-shadow var(--duration-short) ease;
  overflow: hidden;
}

.hulkapps_option .hulk_swatch_item:hover {
  border-color: rgba(var(--color-foreground), 0.5);
}

.hulkapps_option .hulk_swatch_item.selected,
.hulkapps_option .hulk_swatch_item.active {
  border-color: rgb(var(--color-button));
  box-shadow: 0 0 0 1px rgb(var(--color-button));
}

/* --- Hulk Buttons (Radio-Style) --- */
.hulkapps_option .hulk_btn_item,
.hulkapps_option .hulkapps_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
  padding: 0 2rem;
  border: 0;
  border-radius: var(--buttons-radius-outset);
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-background));
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease, color var(--duration-short) ease, background-color var(--duration-short) ease;
}

.hulkapps_option .hulk_btn_item:hover,
.hulkapps_option .hulkapps_btn:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

.hulkapps_option .hulk_btn_item.selected,
.hulkapps_option .hulk_btn_item.active,
.hulkapps_option .hulkapps_btn.selected,
.hulkapps_option .hulkapps_btn.active {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  box-shadow: 0 0 0 var(--buttons-border-width) rgb(var(--color-button));
}

/* --- Date Picker --- */
.hulkapps_option_value input[type="date"],
.hulkapps_option_value .hulk_datepicker,
.hulkapps_option_value .hulk-datepicker {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  width: 100%;
  border: 0 !important;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  padding: 1.5rem;
  outline: none !important;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
}

.hulkapps_option_value input[type="date"]:focus,
.hulkapps_option_value .hulk_datepicker:focus,
.hulkapps_option_value .hulk-datepicker:focus {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
}

/* --- Color Picker --- */
.hulkapps_option_value input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.3rem;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  cursor: pointer;
  background-color: rgb(var(--color-background));
}

.hulkapps_option_value input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.hulkapps_option_value input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--inputs-radius) - 0.3rem);
}

/* --- Tooltip / Help Text --- */
.hulkapps_option .hulkapps_tooltip_icon,
.hulkapps_option .hulkapps-helptext-icon {
  color: rgba(var(--color-foreground), 0.5);
  cursor: help;
  font-size: 1.4rem;
  margin-left: 0.4rem;
}

.hulkapps_option .hulkapps_helptext,
.hulkapps_option .hulkapps-helptext {
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.65);
  margin-top: 0.4rem;
  line-height: 1.5;
}

/* --- Character Counter --- */
.hulkapps_option .hulkapps_char_count,
.hulkapps_option .character-count {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.5);
  text-align: right;
  margin-top: 0.4rem;
}

/* --- Option Pricing Display --- */
#option_total,
.hulkapps_option_total {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  margin-top: 1rem;
  padding: 1rem 0;
}

#formatted_option_total,
.hulkapps_formatted_total {
  font-weight: var(--font-body-weight-bold);
}

/* --- Validation Error States --- */
/* Hulk uses #id-based selectors for error color — !important required to win */
.hulkapps_option.validation_error .hulkapps_option_name {
  color: var(--ds-error-text) !important;
}

.hulkapps_option.validation_error input[type="text"],
.hulkapps_option.validation_error input[type="email"],
.hulkapps_option.validation_error input[type="tel"],
.hulkapps_option.validation_error input[type="number"],
.hulkapps_option.validation_error input[type="url"],
.hulkapps_option.validation_error input[type="password"],
.hulkapps_option.validation_error textarea,
.hulkapps_option.validation_error select,
.hulkapps_option.validation_error input[type="date"] {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) var(--ds-error-text) !important;
  background-color: rgb(var(--color-background)) !important;
}

.hulkapps_option.validation_error .file-select {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) var(--ds-error-text) !important;
}

/* Override Hulk's default ugly red error styling */
/* Hulk uses #id .validation_error with padding:8px, display:inline-block,
   border:1px solid, margin-top:2px — all cause layout shift on error */
.hulkapps_option.validation_error {
  color: inherit !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  display: block !important;
  transition: none !important;
  animation: none !important;
}

/* Error message text below the field */
.hulkapps_option .hulkapps_error_msg,
.hulkapps_option .hulk_error_text,
.hulkapps_option .hulkapps-error-message,
.hulkapps_option .error-message {
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  color: var(--ds-error-text);
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.4;
}

/* Prevent Hulk's inline error styles from leaking */
.hulkapps_option.validation_error > .hulkapps_option_value {
  background-color: transparent !important;
}

/* --- Toggle Switch (Hulk) --- */
.hulkapps_option .hulk_toggle_switch,
.hulkapps_option .hulkapps-toggle {
  background-color: rgba(var(--color-foreground), 0.15);
  border-radius: 9999px;
  transition: background-color var(--duration-short) ease;
  cursor: pointer;
}

.hulkapps_option .hulk_toggle_switch.active,
.hulkapps_option .hulkapps-toggle.active,
.hulkapps_option .hulk_toggle_switch:checked,
.hulkapps_option .hulkapps-toggle:checked {
  background-color: rgb(var(--color-button));
}

/* --- Multi-Quantity Selector --- */
.hulkapps_option .hulk_qty_wrapper input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  border: 0;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  padding: 0 1.5rem;
  text-align: center;
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
}

.hulkapps_option .hulk_qty_wrapper input[type="number"]:focus {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
}

/* --- Popup Button --- */
.hulkapps_option .hulkapps_popup_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
  padding: 1rem 2rem;
  border: 0;
  border-radius: var(--buttons-radius-outset);
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  color: rgb(var(--color-secondary-button-text));
  background-color: rgb(var(--color-secondary-button));
  transition: box-shadow var(--duration-short) ease;
}

.hulkapps_option .hulkapps_popup_btn:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--buttons-border-width)) rgba(var(--color-foreground), 0.2);
}

/* --- Recommended Badge --- */
.hulkapps_option .hulk_recommended,
.hulkapps_option .hulkapps-recommended {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  font-weight: 700;
  background-color: var(--ds-success-bg);
  color: var(--ds-success-text);
  margin-left: 0.5rem;
}

/* --- Hulk Inline Styles Override (Nuclear) --- */
/* Hulk injects inline styles that conflict; these !important overrides fix that */
.hulkapps_product_options .hulkapps_option.validation_error[style] {
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
}

/* Reset any inline color/bg Hulk injects on error */
div.hulkapps_option.validation_error {
  color: rgb(var(--color-foreground)) !important;
  background: transparent !important;
  border: none !important;
}

div.hulkapps_option.validation_error .hulkapps_option_value {
  background: transparent !important;
}

/* --- Edit-in-Cart Popup --- */

/* Overlay — matches cart drawer overlay exactly */
.hulkapp_popupOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  background-color: rgba(var(--color-foreground), 0.5) !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: visibility var(--duration-default) ease !important;
}

/* Popup box — rounded corners, padding, theme surface */
.hulkapp_popupBox {
  background-color: rgb(var(--color-background)) !important;
  border-radius: var(--inputs-radius) !important;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2) !important;
  padding: 2.5rem !important;
  width: 90vw !important;
  max-width: 50rem !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
}

/* Header row — spacing and alignment */
.hulkapp_mainHead {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1) !important;
}

/* Product title — theme heading font */
.hulkapp_popup-heading {
  font-family: var(--font-heading-family) !important;
  font-style: var(--font-heading-style) !important;
  font-weight: bold !important;
  font-size: calc(var(--font-heading-scale) * 1.8rem) !important;
  letter-spacing: calc(var(--font-heading-scale) * 0rem) !important;
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale))) !important;
  color: rgb(var(--color-foreground)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Close button — matches theme drawer__close (scoped to header only) */
.hulkapp_mainHead > .hulkapp_close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.4rem !important;
  min-height: 4.4rem !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: rgb(var(--color-foreground)) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transition: opacity var(--duration-short) ease !important;
  flex-shrink: 0 !important;
}

/* Replace × text with a proper close icon via pseudo-element */
.hulkapp_mainHead > .hulkapp_close::before {
  content: '✕' !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: rgb(var(--color-foreground)) !important;
}

.hulkapp_mainHead > .hulkapp_close:hover {
  opacity: 0.7 !important;
}

/* Content area */
.hulkapp_mainContent {
  padding: 0 !important;
}

/* Form set inside popup — inherit overrides from product page */
.hulkapp_mainContent .hulkapps_option_set {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.hulkapp_mainContent .hulkapps_edit_product_options {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer — buttons row */
.co_hulkapp_popup-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 1.2rem !important;
  padding-top: 2rem !important;
  margin-top: 2rem !important;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.1) !important;
}

/* Popup buttons — let theme .button class do all the heavy lifting.
   Hulk's buttons already have class="button", so we only force
   properties that Hulk's injected <style> overrides. */
.co_hulkapp_popup-footer .hulkapps_btn_cancel,
.co_hulkapp_popup-footer .hulkapps_btn_save {
  font-weight: inherit !important;
  font-family: var(--font-body-family) !important;
  border: 0 !important;
  border-radius: var(--buttons-radius-outset) !important;
}

/* Pseudo-element border-radius — Hulk's CSS may flatten these too */
.co_hulkapp_popup-footer .hulkapps_btn_cancel::before,
.co_hulkapp_popup-footer .hulkapps_btn_save::before {
  border-radius: var(--buttons-radius-outset) !important;
}

.co_hulkapp_popup-footer .hulkapps_btn_cancel::after,
.co_hulkapp_popup-footer .hulkapps_btn_save::after {
  border-radius: var(--buttons-radius) !important;
}

.co_hulkapp_popup-footer .hulkapps_btn_save {
  background-color: rgba(var(--color-button), var(--alpha-button-background)) !important;
  color: rgb(var(--color-button-text)) !important;
}

.co_hulkapp_popup-footer .hulkapps_btn_cancel {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
  --alpha-button-background: 0;
  --border-opacity: var(--buttons-border-opacity);
  background-color: rgba(var(--color-button), var(--alpha-button-background)) !important;
  color: rgb(var(--color-button-text)) !important;
}

/* Popup inputs — inherit product page overrides */
.hulkapp_mainContent .hulkapps_option .hulkapps_option_child {
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
  border: none !important;
  border-radius: var(--inputs-radius) !important;
  height: 4.5rem !important;
  padding: 0 1.5rem !important;
  font-family: var(--font-body-family) !important;
  font-size: 1.6rem !important;
  color: rgb(var(--color-foreground)) !important;
  background-color: rgb(var(--color-background)) !important;
  width: 100% !important;
}

.hulkapp_mainContent .hulkapps_option .hulkapps_option_child:focus,
.hulkapp_mainContent .hulkapps_option .hulkapps_option_child:focus-visible {
  box-shadow: 0 0 0 0.2rem rgb(var(--color-foreground)) !important;
  outline: none !important;
}

/* Labels inside popup */
.hulkapp_mainContent .hulkapps_option_name {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-body-family) !important;
  font-size: 1.4rem !important;
  font-weight: var(--font-body-weight-bold) !important;
  color: rgb(var(--color-foreground)) !important;
  margin-bottom: 0.6rem !important;
  padding: 0 !important;
  min-width: unset !important;
}

/* =============================================================================
   HULK PRODUCT OPTIONS — THEME INTEGRATION — END
   ============================================================================= */

/* Product Highlights Legacy Styles (Migrated) */
.product-highlights-container {
  font-size: 1.4rem; 
  line-height: 1.5;
  margin-top: 0; 
  margin-bottom: 30px; 
}
.product-highlight {
  display: flex;             
  align-items: center;    
  gap: 0.8rem;            
  margin-bottom: 0.8rem; 
  font-weight: bold; 
  color: rgb(var(--color-foreground));
}
.product-highlight:last-child {
    margin-bottom: 0;
}

.product-highlight i.fa-solid,
.product-highlight i.fa-brands {
  color: rgb(var(--color-button)); 
  width: 1.4em; 
  text-align: center; 
  flex-shrink: 0; 
  font-size: 1.1em; 
}
.product-highlight span {
  flex-grow: 1; 
  font-weight: bold; 
}

.highlight-underline {
  text-decoration: underline;
}

/* Status Badge Component */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 1.3rem !important; 
  font-weight: 700 !important;
  line-height: normal !important;
  border: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.status-badge i {
  font-size: 1.1em;
  width: auto;
  margin: 0;
}

.status-badge--success {
  background-color: var(--ds-success-bg) !important;
  color: var(--ds-success-text) !important;
}

.status-badge--warning {
  background-color: var(--ds-warning-bg) !important;
  color: var(--ds-warning-text) !important;
}

.status-badge--error {
  background-color: var(--ds-error-bg) !important;
  color: var(--ds-error-text) !important;
}

.status-badge--brand {
  background-color: var(--ds-brand-100) !important;
  color: var(--ds-brand-700) !important;
}

.status-badge--neutral {
  background-color: var(--ds-neutral-bg) !important;
  color: var(--ds-neutral-text) !important;
}

/* Product detail accent using the shared badge component. */
.product-highlight__badge {
  margin-left: 0.25rem;
}

/* Product Card Tags */
.product-card-tag {
  margin-top: 0.5rem;
}

/* Product Card Warnings */

.card-wrapper.product-card-wrapper .card__inner > .card__badge:has(.status-badge) {
  align-self: auto !important;
  display: flex !important;
  grid-row-start: auto !important;
  justify-self: auto !important;
  left: auto !important;
  position: absolute !important;
  right: 1rem !important;
  top: 1rem !important;
  z-index: 2;
}

.card-wrapper.product-card-wrapper .card__inner:has(> .card__badge .status-badge) {
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 749px) {
  .card-wrapper.product-card-wrapper .card__inner > .card__badge:has(.status-badge) {
    max-width: calc(100% - 1.2rem);
    right: 0.6rem !important;
    top: 0.6rem !important;
  }

  .card-wrapper.product-card-wrapper .card__inner > .card__badge .status-badge {
    font-size: 1.1rem !important;
    padding: 0.2rem 0.55rem !important;
  }
}

.product-card__stock-warning {
  color: var(--ds-error-text) !important;
  font-size: 1.5rem;
  font-weight: 600;
  display: block;
  margin-top: 0.5rem;
}

/* Brand icon surfaces */
.nav-custom-icon,
.feature-highlight__icon,
.multicolumn-card--review .multicolumn-card__review-avatar,
.step-by-step__visual {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
}

.nav-custom-icon,
.feature-highlight__icon,
.multicolumn-card--review .multicolumn-card__review-avatar,
.step-by-step__visual--brand {
  background-color: var(--ds-brand-100);
  color: var(--ds-brand-700);
}

.nav-custom-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
  flex-shrink: 0;
}

.nav-custom-icon i {
  font-size: 1.2rem;
}

/* Brand Specific Overrides */
.nav-custom-icon--minecraft {
  background-color: var(--ds-minecraft-bg);
  color: var(--ds-minecraft-text);
}

.nav-custom-icon--discord {
  background-color: var(--ds-discord-bg);
  color: var(--ds-discord-text);
}

.nav-custom-icon--youtube {
  background-color: var(--ds-youtube-bg);
  color: var(--ds-youtube-text);
}

/* Ensure consistency in Mega Menu */
@media screen and (min-width: 990px) {
  .mega-menu__list li {
    display: flex;
    align-items: center;
  }
}

/* Grouped Collection List Spacing */
.collection-list-group {
  margin-bottom: 5rem;
}

.collection-list-group:last-child {
  margin-bottom: 0;
}

.collection-list-group .title {
  margin-bottom: 2rem;
}

/* Article Promotion (Migrated from legacy Custom Liquid) */
.article-promotion {
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
  border-radius: var(--text-boxes-radius);
  overflow: hidden;
  color: rgb(var(--color-foreground));
}

.article-promotion .button {
  color: rgb(var(--color-button-text));
}

.article-promotion .button:hover {
  color: rgb(var(--color-button-text));
}

.article-promotion__inner {
  padding: 3rem 2rem;
}

@media screen and (min-width: 750px) {
  .article-promotion__inner {
    padding: 4rem 5rem;
  }
}

.article-promotion__heading {
  margin-top: 0;
  margin-bottom: 2rem;
}

.article-promotion__image-wrapper {
  margin-bottom: 2.5rem;
  border-radius: var(--collection-card-corner-radius);
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}

.article-promotion__image-wrapper .media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--collection-card-corner-radius);
}

.article-promotion__content {
  max-width: 70rem;
  margin: 0 auto 3rem;
}

.article-promotion__description {
  color: inherit;
}

.article-promotion .fa-chevron-right {
  margin-left: 1rem;
}

/* Remove underline from navigation icons on desktop */
.nav-custom-icon {
  text-decoration: none !important;
}

summary.list-menu__item:hover .nav-custom-icon,
summary.list-menu__item[aria-expanded="true"] .nav-custom-icon {
  text-decoration: none;
}

/* Fix for Customer Account Table Padding (Mobile) */
@media screen and (max-width: 749px) {
  .customer table.order-history td,
  .customer table.order-details td {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Custom Unordered List with Icons */
.custom-ul {
  list-style: none;
  padding-left: 0;
  margin: 2.5rem 0;
}

.custom-ul li {
  display: flex;
  align-items: baseline; /* Fix vertical alignment */
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.custom-ul li:last-child {
  margin-bottom: 0;
}

.custom-ul .icon-container {
  background-color: var(--ds-brand-100);
  color: var(--ds-brand-700);
  border-radius: 9999px;
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0.2rem); /* Fine-tune visual alignment */
}

.custom-ul .icon-container i {
  font-size: 1.5rem;
  line-height: 1;
}

.custom-ul h2,
.custom-ul h3,
.custom-ul h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.custom-ul p {
  margin: 0;
  color: rgba(var(--color-foreground), 0.75);
}

/* Custom Code Block Styling */
.custom-code-block {
  position: relative;
  background-color: rgba(var(--color-foreground), 0.04);
  border-radius: var(--text-boxes-radius);
  margin: 2rem 0;
  font-family: monospace;
}

.custom-code-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 2rem;
  margin: 0;
  overflow-x: auto;
  color: rgba(var(--color-foreground), 0.85);
}

.custom-code-block pre code {
  font-size: 1.4rem;
  line-height: 1.6;
}

.copy-code-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border: none;
  border-radius: var(--buttons-radius);
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.copy-code-button:hover {
  background-color: rgba(var(--color-button), 0.8);
}

.copy-code-button .fa-copy {
  font-size: 1.4rem;
}

/* Custom Ordered List */
.custom-ol {
  list-style: none;
  counter-reset: custom-counter;
  padding-left: 0;
  margin: 2.5rem 0;
}

.custom-ol li {
  counter-increment: custom-counter;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.custom-ol li:last-child {
  margin-bottom: 0;
}

.custom-ol li::before {
  content: counter(custom-counter);
  background-color: var(--ds-brand-100);
  color: var(--ds-brand-700);
  border-radius: 9999px;
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 3.2rem;
  text-align: center;
}

.custom-ol h2,
.custom-ol h3,
.custom-ol h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.custom-ol p {
  margin: 0;
  color: rgba(var(--color-foreground), 0.75);
}

/* Simple Pull Quote Style for Blog Posts */
.rte .pull-quote {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 4rem;
  text-align: center;
  box-sizing: border-box;
}

.rte .pull-quote p {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: calc(var(--font-heading-scale) * 2.2rem);
  line-height: 1.5;
  color: rgb(var(--color-button));
  margin: 0;
}

.rte .pull-quote .icon-quote {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.3;
  color: rgb(var(--color-button));
}

.rte .pull-quote .icon-quote-left {
  top: 1.5rem;
  left: 0.5rem;
}

.rte .pull-quote .icon-quote-right {
  bottom: 1.5rem;
  right: 0.5rem;
}

/* Feature Highlights */
.feature-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: flex-start;
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
}

.feature-highlight__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.feature-highlight__item > span:not(.feature-highlight__icon) {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  color: inherit;
}

.collection-hero-banner .feature-highlights.feature-highlights--collection {
  gap: 1.2rem 2rem;
  margin: 3rem 0 1.5rem;
}

.feature-highlight__icon {
  flex: 0 0 3.2rem;
  height: 3.2rem;
  width: 3.2rem;
}

.feature-highlight__icon i {
  font-size: 1.5rem;
  line-height: 1;
}

.feature-highlights--stacked {
  flex-direction: column;
}

.feature-highlights--stacked .feature-highlight__item {
  padding-top: 0.8rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
}

.feature-highlights--stacked .feature-highlight__item:first-child {
  padding-top: 0;
}

.feature-highlights--stacked .feature-highlight__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .slideshow__feature-highlights {
    gap: 0.8rem 1.5rem;
    justify-content: var(--feature-highlights-mobile-alignment, center) !important;
  }

  .slideshow__feature-highlights .feature-highlight__item > span {
    font-size: 1.3rem;
  }
}

/* Highlight Box for Blog Posts */
.blog-highlight-box {
  border-radius: var(--text-boxes-radius);
  padding: var(--grid-mobile-vertical-spacing) 1.5rem;
  margin: 3rem 0;
  text-align: center;
  color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) {
  .blog-highlight-box {
    padding: var(--grid-desktop-vertical-spacing) 3rem;
  }
}

.blog-highlight-box img {
  border-radius: var(--collection-card-corner-radius);
  margin-bottom: 1.5rem;
}

/* Override .rte a color leak on both rest and hover states */
.blog-highlight-box .button {
  margin-top: 1rem;
  color: rgb(var(--color-button-text));
}

.blog-highlight-box .button:hover {
  color: rgb(var(--color-button-text));
}

.blog-highlight-box .button .fa-chevron-right {
  margin-left: 10px;
}

/* Value props row */
.blog-highlight-box__values {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.blog-highlight-box__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.3rem;
  font-weight: bold;
}

.blog-highlight-box__value i {
  font-size: 1.8rem;
}

/* Eyebrow badge — reuses theme badge variables */
.blog-highlight-box__eyebrow {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: rgba(var(--color-foreground), 0.12);
  color: rgb(var(--color-foreground));
  padding: 0.5rem 1.3rem;
  border-radius: var(--badge-corner-radius);
  line-height: 1;
}

/* Promo inner cascade — children stagger in after the box slides in */
.blog-highlight-box > * {
  opacity: 0;
  transform: translateY(1rem);
}

.blog-highlight-box:not(.scroll-trigger--offscreen) > * {
  animation: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
}

.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(1) { animation-delay: 150ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(2) { animation-delay: 250ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(3) { animation-delay: 350ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(4) { animation-delay: 450ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(5) { animation-delay: 550ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(6) { animation-delay: 650ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(7) { animation-delay: 750ms; }
.blog-highlight-box:not(.scroll-trigger--offscreen) > *:nth-child(8) { animation-delay: 850ms; }

/* Skip cascade when user prefers reduced motion or in theme editor */
@media (prefers-reduced-motion: reduce) {
  .blog-highlight-box > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.blog-highlight-box.scroll-trigger--design-mode > * {
  opacity: 1;
  transform: none;
  animation: none;
}

.article-template__content h2,
.article-template__content h3,
.article-template__content h4,
.article-template__content h5,
.article-template__content h6 {
  margin-top: 2em;
}

.blog-highlight-box h1,
.blog-highlight-box h2,
.blog-highlight-box h3,
.blog-highlight-box h4,
.blog-highlight-box h5,
.blog-highlight-box h6 {
  margin-top: 0.4em;
}

/* ShareThis Customization - Circular & Native Colors */
.sharethis-inline-share-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important; /* Reduced Gap by user request */
  margin-top: 2rem !important;
}

/* Share Counter - Styled to match theme text */
.sharethis-inline-share-buttons .st-total {
  /* Use display: inline-block to respect ShareThis visibility toggles (display: none) */
  display: inline-block;
  vertical-align: middle !important;
  margin-right: 0.5rem !important;
  color: rgb(var(--color-foreground)) !important;
  line-height: 1.1 !important;
  text-align: left !important;
  min-width: 0; /* Fix flexbox sizing issues if parent becomes flex */
}

/* Ensure inner spans stack vertically without forcing parent display: flex */
.sharethis-inline-share-buttons .st-label {
  font-family: var(--font-body-family) !important;
  font-size: 2rem !important;
  font-weight: bold !important;
  color: inherit !important;
  display: block !important; /* Forces new line */
  margin-bottom: 0.2rem !important;
  line-height: 1 !important;
}

.sharethis-inline-share-buttons .st-shares {
  font-family: var(--font-body-family) !important;
  font-size: 1.1rem !important;
  color: inherit !important;
  opacity: 0.75;
  display: block !important; /* Forces new line */
  line-height: 1 !important;
}

/* Button Styling - Circle with original colors */
.sharethis-inline-share-buttons .st-btn {
  /* Reset Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative !important;
  vertical-align: middle !important;
  
  /* Shape & Size (Increased by ~15% -> 3.4rem) */
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-width: 3.4rem !important;
  border-radius: 50% !important;
  padding: 0 !important;
  
  /* Reset Theme Button Overrides */
  opacity: 1 !important;
  transform: none !important;
  top: 0 !important; /* Prevent rising */
  transition: opacity var(--duration-short) ease !important;
}

/* Force icons to be white and centered */
.sharethis-inline-share-buttons .st-btn img,
.sharethis-inline-share-buttons .st-btn svg {
  width: 1.7rem !important;
  height: 1.7rem !important;
  
  /* Absolute centering to fix vertical alignment issues */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Row-layout accordion: rounded hover + spacing fixes */
.collapsible-row-layout .accordion summary {
  border-radius: var(--text-boxes-radius);
}

.collapsible-row-layout .accordion details[open] > summary {
  border-radius: var(--text-boxes-radius) var(--text-boxes-radius) 0 0;
}

.collapsible-content.collapsible-row-layout .accordion details[open] .accordion__content {
  padding-top: 1.5rem;
}

/* Customer review cards */
.multicolumn-card--review .multicolumn-card__review-author {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.product-card__badge-context {
  display: block;
  position: relative;
}

.multicolumn-card--review .multicolumn-card__info,
.multicolumn-card--review .multicolumn-card__review-stars,
.multicolumn-card--review .multicolumn-card__title,
.multicolumn-card--review .multicolumn-card__text {
  text-align: left;
}

.multicolumn-card--review .multicolumn-card__review-author-name {
  font-weight: var(--font-body-weight-bold);
}

.multicolumn-card--review .multicolumn-card__review-avatar {
  flex: 0 0 4rem;
  height: 4rem;
  overflow: hidden;
  width: 4rem;
}

.multicolumn-card--review .multicolumn-card__review-avatar i {
  font-size: 1.6rem;
}

.multicolumn-card--review .multicolumn-card__review-avatar-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.multicolumn-card--review .multicolumn-card__review-stars {
  color: #fad100;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.multicolumn-card--review .multicolumn-card__title {
  margin-top: 0;
}

.multicolumn-card--review .multicolumn-card__info .multicolumn-card__title + .multicolumn-card__text {
  margin-top: 4rem;
}

.multicolumn-card--review .multicolumn-card__text blockquote {
  border: 0;
  color: inherit;
  font-style: normal;
  margin: 0;
  padding: 0;
}

.multicolumn-card--review .multicolumn-card__text blockquote::before {
  color: rgb(var(--color-button));
  content: '\201C';
  display: block;
  font-family: var(--font-heading-family);
  font-size: 5rem;
  font-weight: var(--font-heading-weight);
  line-height: 0.12;
  margin-bottom: 0;
}

.multicolumn-card--review .multicolumn-card__text blockquote p {
  display: block;
  margin: 0;
}

/* Section subtitles */
.multicolumn__subtitle {
  color: rgba(var(--color-foreground), 0.7);
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  margin: 0.8rem 0 0;
}

/* Before and after comparison */
.before-after-slider {
  --before-after-position: 30%;
  display: block;
}

.before-after-slider__comparison {
  position: relative;
}

.before-after-slider__header {
  margin-bottom: 2.4rem;
}

/* Keep comparison headings on the same tablet-down gutter as Collection and multi-column sections. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  :root {
    --tablet-section-content-width: calc(100% - 3rem);
  }

  .before-after-slider__page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .before-after-slider__header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Use the shared tablet gutter on both edges of each content card. */
  .before-after-slider__comparison {
    margin-left: 1.5rem;
    width: var(--tablet-section-content-width);
  }

  before-after-slider .before-after-slider__form-preview {
    margin-left: 1.5rem;
    max-width: var(--tablet-section-content-width) !important;
    width: var(--tablet-section-content-width) !important;
  }

  .multicolumn.step-by-step .step-by-step__grid {
    padding-left: 0;
    padding-right: 0;
  }

  .multicolumn.step-by-step .step-by-step__item {
    margin-left: 1.5rem;
    max-width: var(--tablet-section-content-width);
    width: var(--tablet-section-content-width) !important;
  }

  .promo-banner__page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .promo-banner__page-width > .promo-banner {
    margin-left: 1.5rem;
    width: var(--tablet-section-content-width);
  }
}

.before-after-slider__media {
  aspect-ratio: var(--before-after-ratio);
  background: rgb(var(--color-background));
  margin: 0;
  overflow: hidden;
  position: relative;
}

.before-after-slider__image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.before-after-slider__template,
.before-after-slider__after {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.before-after-slider__template {
  clip-path: inset(0 0 0 var(--before-after-position));
}

.before-after-slider__after {
  clip-path: inset(0 calc(100% - var(--before-after-position)) 0 0);
}

.before-after-slider--tint-before .before-after-slider__image--before {
  filter: grayscale(0.35) saturate(0.55) brightness(0.78);
}

before-after-slider .before-after-slider__label {
  bottom: auto;
  height: auto;
  left: auto;
  max-width: calc(100% - 3.2rem);
  position: absolute;
  top: 1.6rem;
  width: auto;
  z-index: 2;
}

before-after-slider .before-after-slider__label--personalized {
  left: 1.6rem;
}

before-after-slider .before-after-slider__label--template {
  right: 1.6rem;
}

.before-after-slider__range {
  appearance: none;
  cursor: ew-resize;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  touch-action: pan-y;
  width: 100%;
  z-index: 4;
}

before-after-slider .before-after-slider__comparison > .before-after-slider__divider {
  background: rgb(var(--color-button));
  bottom: 0;
  left: var(--before-after-position);
  cursor: ew-resize;
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 0.3rem;
  z-index: 3;
}

.before-after-slider__handle {
  align-items: center;
  background: rgb(var(--color-button));
  border: 0.2rem solid rgb(var(--color-background));
  border-radius: 50%;
  color: rgb(var(--color-button-text));
  display: flex;
  height: 4.8rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.8rem;
}

.before-after-slider__range:focus-visible ~ .before-after-slider__divider .before-after-slider__handle {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgb(var(--color-button));
}

.before-after-slider__form-preview {
  margin-top: 2rem;
  max-width: 48rem;
}

.before-after-slider__form-heading {
  font-size: 1.8rem;
  margin: 0;
}

.before-after-slider__form-copy {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.4rem;
  margin: 0.4rem 0 1.2rem;
}

.before-after-slider__preview-fields {
  display: grid;
  gap: 1.2rem;
}

.before-after-slider__preview-option .hulkapps_option_name {
  margin-bottom: 0.6rem !important;
}

.before-after-slider__preview-input {
  border: 0.1rem solid rgba(var(--color-foreground), 0.55);
  border-radius: var(--inputs-radius);
  box-sizing: border-box;
  color: rgb(var(--color-foreground));
  display: block;
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  height: 4.2rem;
  line-height: 1.5;
  overflow: hidden;
  padding: 0.9rem 1.2rem;
  text-overflow: clip;
  white-space: nowrap;
  width: 100%;
}

.before-after-slider__preview-input:empty::after {
  content: '';
}

@media screen and (max-width: 749px) {
  .homepage-slideshow .slideshow__text-wrapper.banner__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .homepage-slideshow .slideshow__text.banner__box {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .before-after-slider__comparison {
    overflow: clip;
  }

  .before-after-slider__media {
    aspect-ratio: var(--before-after-ratio);
  }

  .before-after-slider__image {
    object-fit: contain;
  }

  before-after-slider .before-after-slider__comparison > .before-after-slider__divider {
    left: clamp(2.5rem, var(--before-after-position), calc(100% - 2.5rem));
  }

  before-after-slider .before-after-slider__label {
    font-size: 1.1rem !important;
    max-width: calc(100% - 2rem);
    padding: 0.2rem 0.55rem !important;
    top: 1rem;
  }

  before-after-slider .before-after-slider__label--personalized {
    left: 1rem;
  }

  before-after-slider .before-after-slider__label--template {
    right: 1rem;
  }
}

@media screen and (max-width: 1199px) {
  .multicolumn.step-by-step .step-by-step__icon-content {
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    height: auto;
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .step-by-step__visual,
  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__title,
  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__text,
  .multicolumn.step-by-step .step-by-step__icon-content .link {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .step-by-step__visual {
    grid-row: 1;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__title,
  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__text,
  .multicolumn.step-by-step .step-by-step__icon-content .link {
    justify-self: stretch;
    width: 100%;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__title {
    grid-row: 2;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .multicolumn-card__text {
    grid-row: 3;
  }

  .multicolumn.step-by-step .step-by-step__icon-content .link {
    grid-row: 4;
  }
}

/* Step-by-step process */
.step-by-step__subtitle {
  color: rgba(var(--color-foreground), 0.7);
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  margin: -1.2rem 0 3rem;
  padding: 0;
  text-align: left;
}

.step-by-step__grid {
  align-items: stretch;
  list-style: none;
}

.step-by-step__item {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
}

.multicolumn.step-by-step .step-by-step__card {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
  text-align: center;
  width: 100%;
}

.step-by-step .step-by-step__icon-content {
  align-items: start;
  box-sizing: border-box;
  column-gap: 0.8rem;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  grid-template-rows: 8rem auto auto;
  height: 100%;
  row-gap: 1.2rem;
}

.step-by-step__visual {
  flex: 0 0 8rem;
  height: 8rem;
  position: relative;
  width: 8rem;
}

.step-by-step__visual--success {
  background-color: var(--ds-success-bg);
  color: var(--ds-success-text);
}

.step-by-step__visual--neutral {
  background-color: var(--ds-neutral-bg);
  color: var(--ds-neutral-text);
}

.step-by-step__visual i {
  font-size: 3rem;
  line-height: 1;
}

.step-by-step__number {
  align-items: center;
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background));
  color: inherit;
  display: inline-flex;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: var(--font-body-weight-bold);
  height: 2.8rem;
  justify-content: center;
  left: -0.2rem;
  line-height: 1;
  position: absolute;
  top: -0.2rem;
  width: 2.8rem;
  z-index: 1;
}

.step-by-step .multicolumn-card__info {
  text-align: center;
}

.step-by-step .multicolumn-card__title {
  font-size: 1.7rem;
  font-weight: var(--font-body-weight-bold);
  margin: 0;
}

.step-by-step__icon-content .multicolumn-card__title {
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

.step-by-step .multicolumn-card__info .multicolumn-card__title + .multicolumn-card__text {
  margin-top: 0;
}

.step-by-step .multicolumn-card__text {
  color: rgba(var(--color-foreground), 0.7);
  text-align: center;
}

.step-by-step__icon-content .multicolumn-card__text {
  grid-column: 1 / -1;
  grid-row: 2;
}

.step-by-step .multicolumn-card__info .link {
  justify-self: center;
  text-align: center;
}

.step-by-step .step-by-step__icon-content .link {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

.step-by-step__image-wrapper {
  overflow: visible;
}

.step-by-step__media-frame {
  position: relative;
}

.step-by-step__media {
  border-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
  overflow: hidden;
  width: 100%;
}

.step-by-step__card--image .step-by-step__image {
  object-fit: contain;
}

.step-by-step__card--image .step-by-step__number {
  color: var(--ds-brand-700);
  left: 0.8rem;
  top: 0.8rem;
}

.step-by-step .step-by-step__card--image .multicolumn-card__info .multicolumn-card__title + .multicolumn-card__text {
  margin-top: 1.5rem;
}

.step-by-step__connector {
  align-items: center;
  align-self: center;
  color: rgb(var(--color-button));
  display: flex;
  font-size: 2.4rem;
  justify-content: center;
  padding: 0.8rem 0;
  pointer-events: none;
}

.step-by-step__connector-icon--desktop,
.step-by-step__connector-icon--mobile {
  display: none;
}

@media screen and (max-width: 989px) {
  .step-by-step__connector-icon--mobile {
    display: inline;
  }
}

@media screen and (min-width: 990px) {
  .step-by-step__item {
    flex-direction: row;
  }

  .step-by-step .multicolumn-list__item {
    padding-left: 0;
    padding-right: 0;
  }

  .step-by-step__visual {
    flex-basis: 7.2rem;
    height: 7.2rem;
    width: 7.2rem;
  }

  .multicolumn.step-by-step .step-by-step__card:not(.step-by-step__card--image) {
    height: 100%;
  }

  .step-by-step .step-by-step__icon-content {
    grid-template-columns: 7.2rem minmax(0, 1fr);
    grid-template-rows: 7.2rem auto auto;
  }

  .step-by-step__visual i {
    font-size: 2.8rem;
  }

  .step-by-step__connector {
    display: block;
    padding: 0;
    position: absolute;
    right: calc(-1 * var(--grid-desktop-horizontal-spacing) / 2);
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 2;
  }

  .step-by-step__connector-icon--desktop {
    display: inline;
  }

  .step-by-step__connector-icon--mobile {
    display: none;
  }
}

.collapsible-content.collapsible-row-layout summary:hover {
  background: rgba(var(--color-foreground), 0.08);
}
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* Ensure white icons */
}

/* Hide Shopify Inbox & Forms widgets when cart drawer is open */
body.overflow-hidden #shopify-chat,
body.overflow-hidden shopify-chat,
body.overflow-hidden iframe[id*="chat"],
body.overflow-hidden [id*="ShopifyChat"],
body.overflow-hidden [id*="shopify-chat"],
body.overflow-hidden shopify-forms-embed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hover Effect - Only highlight (opacity), NO movement */
.sharethis-inline-share-buttons .st-btn:hover {
  opacity: 0.8 !important;
  transform: none !important;
  top: 0 !important;
  margin: 0 !important;
}

/* Remove previous legacy pseudo-elements if any */
.sharethis-inline-share-buttons .st-btn::after {
  content: none !important;
  display: none !important;
}

/* Clean SaaS Table */

.rte .table-wrapper {
  background-color: rgb(var(--color-background));
  border-radius: var(--text-boxes-radius);
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  overflow: hidden;
  margin: 2.5rem 0;
}

.rte .table-wrapper__inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rte .table-wrapper__inner::-webkit-scrollbar {
  height: 6px;
}

.rte .table-wrapper__inner::-webkit-scrollbar-track {
  background: transparent;
}

.rte .table-wrapper__inner::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-foreground), 0.15);
  border-radius: 3px;
}

.rte .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.6;
  font-family: var(--font-body-family);
  table-layout: auto;
  border-style: none;
  box-shadow: none;
}

.rte .table-wrapper thead th {
  padding: 1.2rem 1.8rem;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(var(--color-foreground), 0.6);
  background-color: rgba(var(--color-foreground), 0.04);
  border: none;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
  white-space: nowrap;
}

.rte .table-wrapper tbody td {
  padding: 1.2rem 1.8rem;
  color: rgb(var(--color-foreground));
  border: none;
  vertical-align: middle;
}

.rte .table-wrapper tbody tr {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.06);
}

.rte .table-wrapper tbody tr:last-child {
  border-bottom: none;
}

.rte .table-wrapper tbody tr:hover {
  background-color: rgba(var(--color-foreground), 0.02);
}

.rte .table-wrapper tbody td:first-child {
  font-weight: 600;
}

@media screen and (min-width: 750px) {
  .rte .table-wrapper thead th,
  .rte .table-wrapper tbody td {
    padding: 1.4rem 2.2rem;
  }
}

.rte .table-wrapper__title {
  padding: 1.4rem 1.8rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.1);
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) {
  .rte .table-wrapper__title {
    padding: 1.6rem 2.2rem;
    font-size: 1.8rem;
  }
}

/* Article body images — match collection card corner radius */
.article-template__content.rte img {
  border-radius: var(--collection-card-corner-radius);
}

/* Origin timeline */
.origin-timeline {
  display: block;
}

.origin-timeline__items {
  --origin-dot-size: 1.8rem;
  --origin-marker-column: 2.8rem;
  --origin-marker-offset: 2.2rem;
  --origin-row-gap: var(--grid-mobile-vertical-spacing);
  --origin-column-gap: 1.8rem;
  --origin-line-width: 0.1rem;
  position: relative;
  display: grid;
  row-gap: var(--origin-row-gap);
}

.origin-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--origin-marker-column) minmax(0, 1fr);
  column-gap: var(--origin-column-gap);
  align-items: stretch;
}

.origin-timeline__item:not(:last-child)::before,
.origin-timeline__item::after {
  content: '';
  position: absolute;
  background: rgba(var(--color-foreground), 0.2);
  pointer-events: none;
}

.origin-timeline__item:not(:last-child)::before {
  top: calc(var(--origin-marker-offset) + (var(--origin-dot-size) / 2));
  bottom: calc(-1 * var(--origin-row-gap) - var(--origin-marker-offset) - (var(--origin-dot-size) / 2) - (var(--origin-dot-size) * 0.18));
  left: calc((var(--origin-marker-column) / 2) - (var(--origin-line-width) / 2));
  width: var(--origin-line-width);
}

.origin-timeline__item::after {
  top: calc(var(--origin-marker-offset) + (var(--origin-dot-size) / 2));
  left: calc((var(--origin-marker-column) / 2) + (var(--origin-dot-size) / 2));
  width: calc((var(--origin-marker-column) / 2) + var(--origin-column-gap) - (var(--origin-dot-size) / 2));
  height: var(--origin-line-width);
}

.origin-timeline__marker {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: var(--origin-marker-offset);
}

.origin-timeline__marker span {
  display: block;
  width: var(--origin-dot-size);
  height: var(--origin-dot-size);
  border: 0.1rem solid rgb(var(--color-background));
  border-radius: 50%;
  background: rgb(var(--color-button));
}

.origin-timeline__media-item,
.origin-timeline__text-item {
  min-width: 0;
}

.origin-timeline__media-item {
  display: flex;
  margin-bottom: 1.6rem;
}

.origin-timeline .origin-timeline__media {
  flex: 1 1 auto;
  height: auto;
  min-height: 28rem;
  padding-bottom: 0;
  box-shadow: none;
}

.origin-timeline .origin-timeline__content {
  height: auto;
  padding: 2.4rem 0 0;
  background: transparent;
  box-shadow: none;
}

.origin-timeline__label {
  width: fit-content;
  margin: 0 0 1.4rem;
}

.origin-timeline__heading {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.origin-timeline__text {
  color: rgba(var(--color-foreground), 0.76);
}

@media screen and (min-width: 750px) {
  .origin-timeline__items {
    --origin-dot-size: 2.2rem;
    --origin-marker-column: 3.2rem;
    --origin-marker-offset: 3rem;
    --origin-row-gap: var(--grid-desktop-vertical-spacing);
    --origin-column-gap: 3rem;
  }

  .origin-timeline__item {
    grid-template-columns: var(--origin-marker-column) minmax(0, 0.92fr) minmax(0, 1fr);
  }

  .origin-timeline__media-item {
    grid-column: 3;
    grid-row: 1;
  }

  .origin-timeline__text-item {
    grid-column: 2;
    grid-row: 1;
  }

  .origin-timeline__media-item {
    margin-bottom: 0;
  }

  .origin-timeline .origin-timeline__media {
    min-height: 34rem;
  }

  .origin-timeline .origin-timeline__content {
    padding: 3.2rem 0;
  }
}

@media screen and (min-width: 990px) {
  .origin-timeline__items {
    --origin-marker-column: 3.6rem;
    --origin-column-gap: 4rem;
  }

  .origin-timeline__item {
    grid-template-columns: var(--origin-marker-column) minmax(32rem, 0.85fr) minmax(0, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .origin-timeline__media-item,
  .origin-timeline__text-item {
    grid-column: 2;
  }
}

.pagination-wrapper .pagination__list {
  align-items: center;
  gap: 0.8rem;
}

.pagination-wrapper {
  --pagination-primary-button: var(--color-button);
  --pagination-primary-button-text: var(--color-button-text);
  --pagination-control-rest-color: rgba(var(--color-foreground), 0.55);
  --pagination-control-current-color: rgba(var(--color-foreground), 0.3);
}

.pagination-wrapper .pagination__list > li {
  flex: 0 0 4.4rem;
  max-width: none;
}

.pagination-wrapper .pagination__list > li:not(:last-child) {
  margin-right: 0;
}

.pagination-wrapper .pagination__list > li:has(.pagination__item-arrow) {
  flex-basis: 5.2rem;
}

.pagination-wrapper .pagination__list > li:has(.pagination__item-arrow) + li:not(:has(.pagination__item-arrow)),
.pagination-wrapper .pagination__list > li:not(:has(.pagination__item-arrow)) + li:has(.pagination__item-arrow) {
  margin-inline-start: 0.2rem;
}

.pagination-wrapper .pagination__item {
  box-sizing: border-box;
  min-width: 4.4rem;
  min-height: 4.4rem;
  height: 4.4rem;
  width: 100%;
  padding: 0;
}

.pagination-wrapper a.pagination__item.button {
  border: var(--buttons-border-width) solid var(--pagination-control-rest-color);
  background-color: transparent;
  box-shadow: none;
  color: var(--pagination-control-rest-color);
  transition: transform var(--duration-default) var(--ease-out-slow),
    background-color var(--duration-default) var(--ease-out-slow),
    border-color var(--duration-default) var(--ease-out-slow), color var(--duration-default) var(--ease-out-slow);
}

.pagination-wrapper a.pagination__item.button::before,
.pagination-wrapper a.pagination__item.button::after {
  display: none !important;
}

.pagination-wrapper a.pagination__item.button:hover,
.pagination-wrapper a.pagination__item.button:active {
  border-color: rgb(var(--pagination-primary-button));
  background-color: rgb(var(--pagination-primary-button));
  color: rgb(var(--pagination-primary-button-text));
}

.pagination-wrapper a.pagination__item-arrow.button {
  border-color: rgb(var(--pagination-primary-button));
  background-color: rgb(var(--pagination-primary-button));
  color: rgb(var(--pagination-primary-button-text));
}

.pagination-wrapper a.pagination__item.button:focus-visible {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.pagination-wrapper .pagination__item--current {
  border: var(--buttons-border-width) solid var(--pagination-control-current-color);
  border-radius: var(--buttons-radius);
  background-color: transparent;
  color: var(--pagination-control-current-color);
  cursor: default;
  pointer-events: none;
}

.pagination-wrapper .pagination__item--current::after {
  display: none;
}

.pagination-wrapper .pagination__item-arrow {
  min-width: 5.2rem;
  height: 5.2rem;
}

.pagination-wrapper .pagination__item-arrow .icon-caret {
  width: 1.2rem;
  height: 1.2rem;
}

.pagination-wrapper .pagination__item--double .svg-wrapper + .svg-wrapper {
  margin-left: -0.6rem;
}

.pagination-wrapper .pagination__item--previous .icon {
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

.pagination-wrapper .pagination__item--next .icon {
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

.pagination-wrapper .pagination__item--next:hover .icon {
  transform: rotate(-90deg);
}

@media screen and (max-width: 749px) {
  .pagination-wrapper {
    overflow: visible;
    padding: 0.2rem 0;
  }

  .pagination-wrapper .pagination__list {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
    gap: 0.1rem;
  }

  .pagination-wrapper .pagination__list > li {
    flex-basis: 3.5rem;
  }

  .pagination-wrapper .pagination__list > li:has(.pagination__item-arrow) {
    flex-basis: 3.55rem;
  }

  .pagination-wrapper .pagination__item {
    min-width: 3.5rem;
    min-height: 3.5rem;
    height: 3.5rem;
  }

  .pagination-wrapper .pagination__item-arrow {
    min-width: 3.55rem;
    height: 3.55rem;
  }

  .pagination-wrapper .pagination__list > li:has(.pagination__item-arrow) + li:not(
      :has(.pagination__item-arrow)
    ),
  .pagination-wrapper .pagination__list > li:not(:has(.pagination__item-arrow)) + li:has(
      .pagination__item-arrow
    ) {
    margin-inline-start: 0.1rem;
  }

  .pagination-wrapper .pagination__list > li:has(.pagination__item--previous) + li:has(
      .pagination__item--mobile-distant
    ) + li {
    margin-inline-start: 0.1rem;
  }

  .pagination-wrapper .pagination__list > li:has(.pagination__item--mobile-distant):not(
    :has(.pagination__item--double)
  ) {
    display: none;
  }
}