/** Shopify CDN: Minification failed

Line 18266:147 Unexpected "\\nbody"
Line 18266:182 Expected ":"
Line 18266:216 Expected ":"
Line 20500:228 Unexpected "\\n\\n"
Line 20500:356 Expected ":"
Line 20500:388 Expected ":"
Line 20500:423 Expected ":"
Line 20500:464 Expected ":"
Line 20500:542 Expected ":"
Line 20500:590 Expected ":"
... and 175 more hidden warnings

**/
@font-face {
  font-family: "TahomaXP";
  src: url("windows-xp-tahoma.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GoldHeartedTitle";
  src: url("GH-Title.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --title-font: "GoldHeartedTitle", Georgia, serif;
  --body-font: "TahomaXP", Tahoma, Arial, sans-serif;
}

/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;

  font-family: var(--body-font);

  background: black;
}

/* =========================
   HIDDEN
========================= */

.hidden {
  display: none !important;
}

/* =========================
   DESKTOP
========================= */

#desktop {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background-image: var(--gh-desktop-wallpaper, url("wallpaper.jpg.png"));

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   DESKTOP ICON
========================= */

.desktop-icon {
  width: 90px;

  padding: 12px;

  text-align: center;

  cursor: pointer;

  user-select: none;

  color: white;

  position: relative;

  z-index: 5;

  transition:
    transform 0.08s,
    filter 0.08s;
}

.desktop-icon:active {
  transform: scale(0.92);

  filter: brightness(0.85);
}

.desktop-icon img {
  width: 52px;

  margin-bottom: 6px;
}

.desktop-icon span {
  font-size: 13px;

  text-shadow:
    1px 1px 2px rgba(0,0,0,0.9);
}

/* =========================
   XP WINDOW
========================= */

.window {

  position: absolute;

  width: min(1050px, 92vw);

  height: min(620px, 82vh);

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: #ece9d8;

  border: 1px solid #245edb;

  box-shadow:
    0 0 0 1px #6ea7ff,
    4px 4px 14px rgba(0,0,0,0.4);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  z-index: 100;
}

/* =========================
   TITLE BAR
========================= */

.title-bar {
  height: 32px;

  background:
    linear-gradient(
      to bottom,
      #0997ff 0%,
      #0053ee 8%,
      #0050ee 40%,
      #06f 88%,
      #06f 93%,
      #005bff 95%,
      #003dd7 96%,
      #003dd7 100%
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 6px;

  color: white;

  font-weight: bold;

  user-select: none;
}

.window-controls {
  display: flex;

  gap: 4px;
}

.window-controls button {
  width: 22px;
  height: 22px;

  border: 1px solid #ffffff;

  border-radius: 4px;

  cursor: pointer;

  font-weight: bold;

  color: white;

  background:
    linear-gradient(
      to bottom,
      #ff9d7c,
      #ff5c33
    );
}

.window-controls button:hover {
  background:
    linear-gradient(
      to bottom,
      #ffb199,
      #ff2f00
    );

  box-shadow:
    0 0 10px rgba(255,60,0,0.8);
}

/* =========================
   WINDOW CONTENT
========================= */

.window-content {

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

  background: #ece9d8;

  display: flex;

  flex-direction: column;
}

/* =========================
   XP TOOLBAR
========================= */

.xp-toolbar {

  position: sticky;

  top: 0;

  z-index: 100;

  min-height: 62px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

  flex-wrap: wrap;

  background:
    linear-gradient(
      to bottom,
      #f7f3e7 0%,
      #ebe5d3 100%
    );

  border-bottom: 1px solid #b9b09a;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* =========================
   XP ADDRESS BAR
========================= */

.xp-address-bar {

  position: sticky;

  top: 72px;

  z-index: 999;

  height: 34px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 12px;

  background:
    linear-gradient(
      to bottom,
      #f5f2e8,
      #e2dccd
    );

  border-bottom: 1px solid #bdb6a4;
}

.address-label {

  font-size: 12px;

  font-weight: bold;

  color: #444;
}

.address-input {

  flex: 1;

  height: 22px;

  display: flex;

  align-items: center;

  padding: 0 8px;

  background: white;

  border: 1px solid #7f9db9;

  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.15);

  font-size: 12px;

  color: #111;

  overflow: hidden;

  white-space: nowrap;
}

/* =========================
   BACK GROUP
========================= */

.xp-nav-group {

  display: flex;

  align-items: center;

  gap: 6px;

  padding-right: 12px;

  border-right:
    1px solid #c8c2b2;
}

.back-label {

  font-size: 18px;

  font-weight: bold;

  color: #222;

  margin-right: 4px;
}

/* =========================
   XP NAV BUTTONS
========================= */

.xp-nav-btn {

  width: 38px;
  height: 38px;

  border-radius: 50%;

  border:
    1px solid #5d7d24;

  background:
    radial-gradient(
      circle at top,
      #b8ff7a 0%,
      #78d93d 45%,
      #4ba81f 70%,
      #357d12 100%
    );

  color: white;

  font-size: 20px;

  font-weight: bold;

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.75),
    inset 0 -3px 4px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.35);

  transition:
    transform 0.06s ease,
    filter 0.06s ease;
}

.xp-nav-btn:hover {

  filter: brightness(1.08);
}

.xp-nav-btn:active {

  transform: translateY(1px) scale(0.97);

  filter: brightness(0.9);
}

/* =========================
   XP MATERIAL BUTTONS
========================= */

.xp-material {

  height: 36px;

  min-width: 90px;

  padding: 0 14px;

  border:
    1px solid #9c8f58;

  background:
    linear-gradient(
      to bottom,
      #fff8d8 0%,
      #e8cf77 55%,
      #c8a33b 100%
    );

  color: #5c4200;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -2px 2px rgba(0,0,0,0.12);
}

.active-material {

  background:
    linear-gradient(
      to bottom,
      #ffe9a3 0%,
      #e2bb48 55%,
      #c6931f 100%
    );
}

.material-code {

  font-size: 24px;

  font-weight: bold;

  letter-spacing: -1px;
}

.material-name {

  font-size: 14px;

  font-weight: bold;
}

/* =========================
   XP TOOLBAR BUTTONS
========================= */

.xp-toolbar-btn {

  height: 36px;

  min-width: 60px;

  padding: 0 16px;

  border:
    1px solid #9f9a89;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #ece8d9 55%,
      #d8d1c0 100%
    );

  color: #222;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 15px;

  font-weight: bold;

  cursor: pointer;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.8),
    inset 0 -2px 2px rgba(0,0,0,0.08);
}

.live-icon {

  font-size: 18px;

  color: #245edb;
}

.cart-btn {

  margin-left: auto;

  min-width: 56px;

  justify-content: center;

  font-size: 22px;
}

/* =========================
   PRODUCT LAYOUT
========================= */

.product-layout {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: 40px;

  padding: 24px;

  flex-wrap: wrap;
}

/* =========================
   PRODUCT GALLERY
========================= */

.product-gallery {

  width: 48%;
}

/* MAIN IMAGE */

.main-product-image {

  width: 100%;

  max-width: 520px;

  aspect-ratio: 1/1;

  background: #f7f4ea;

  border: 3px solid #000000;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}

.main-product-image img {

  width: 100%;

  height: 100%;

  object-fit: contain;
}

/* =========================
   PRODUCT INFO
========================= */

.product-info {

  flex: 1;

  min-width: 320px;

  padding-top: 10px;
}

/* =========================
   DONATION TEXT
========================= */

.donation-note {

  margin-top: 18px;

  font-size: 13px;

  line-height: 1.5;

  color: #444;
}

.donation-note a {

  color: #245edb;

  text-decoration: underline;

  font-weight: bold;
}
/* =========================
   THUMBNAILS
========================= */

.thumbnail-row {

  display: flex;

  gap: 10px;

  margin-top: 14px;
}

.thumb {

  width: 70px;
  height: 70px;

  border: 2px solid #b9b19f;

  background: white;
}

.active-thumb {

  border-color: #245edb;
}

/* =========================
   PRODUCT INFO
========================= */

.product-info h1 {

  font-size: 28px;

  margin-bottom: 12px;
}

.product-price {

  font-size: 28px;

  font-weight: bold;

  color: #9b7a13;

  margin-bottom: 18px;
}

.product-description {

  line-height: 1.5;

  margin-bottom: 24px;
}

/* =========================
   BUY BUTTON
========================= */

.buy-button {

  height: 48px;

  padding: 0 30px;

  border-radius: 4px;

  border: 1px solid #245edb;

  color: white;

  font-size: 18px;

  font-weight: bold;

  cursor: pointer;

  background:
    linear-gradient(
      to bottom,
      #5aa2ff,
      #245edb
    );
}

/* =========================
   BOTTOM SECTION
========================= */

.related-products {

  display: flex;

  gap: 20px;

  padding: 0 20px 20px;

  align-items: flex-start;
}

/* =========================
   MORE PRODUCTS
========================= */

.more-products-section {

  width: 45%;
}

.more-products-section h2 {

  margin-bottom: 14px;

  font-size: 22px;
}

.related-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;
}

.related-card {

  aspect-ratio: 1/1;

  border: 1px solid #b9b19f;

  background: white;

  min-height: 120px;
}

/* =========================
   REVIEWS
========================= */

.reviews-section {

  width: 55%;

  margin-top: 38px;

  background: #f7f4ea;

  border: 1px solid #c7bfae;

  padding: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.reviews-section h2 {

  font-size: 22px;

  margin-bottom: 14px;
}

.review {

  padding-bottom: 14px;

  margin-bottom: 14px;

  border-bottom: 1px solid #d6cfbe;
}

.review-name {

  font-weight: bold;

  font-size: 14px;

  margin-bottom: 4px;
}

.review-stars {

  color: #c89c1c;

  margin-bottom: 6px;
}

.review-text {

  font-size: 14px;

  line-height: 1.5;

  color: #333;
}
/* =========================
   TASKBAR
========================= */

#taskbar {

  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;
  height: 40px;

  display: flex;

  align-items: center;
  padding: 0;
  margin: 0;

  z-index: 9999;

  background:
    linear-gradient(
      to bottom,
      #245edb 0%,
      #3a6ff7 3%,
      #0c59d8 8%,
      #1941a5 100%
    );
}

/* =========================
   CUSTOM START BUTTON
========================= */

/* =========================
   CUSTOM START / MENU BUTTON
========================= */

#start-button {

  width: 130px;
  height: 50px;

  flex: 0 0 130px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  background-image:
    url("/cdn/shop/files/StartMenuButton.png?v=1779829207");

  background-size: 100% 100%;

  background-position: left center;

  background-repeat: no-repeat;

  background-color: transparent;

  font-size: 0;

  border: none;

  margin: 0;

  padding: 0;

  overflow: visible;

  position: relative;

  z-index: 10001;

  transition:
    transform 0.08s ease,
    filter 0.12s ease;
}

#start-button:hover {

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(180, 90, 255, 0.9));
}

#start-button:active,
#start-button.active {

  transform: translateY(1px) scale(0.98);

  filter:
    brightness(0.9)
    drop-shadow(0 0 10px rgba(200, 120, 255, 1));
}
#start-button:hover {

  filter:
    brightness(1.1)
    drop-shadow(0 0 6px rgba(120, 255, 120, 0.85));
}

#start-button:active,
#start-button.active {

  transform: translateY(2px) scale(0.96);

  filter:
    brightness(0.9)
    drop-shadow(0 0 10px rgba(120, 255, 120, 1));
}

/* =========================
   TASKBAR APPS
========================= */

#taskbar-apps {

  flex: 1;

  display: flex;

  align-items: center;

  gap: 6px;

  padding-left: 0px;
}

.taskbar-app {

  height: 30px;

  min-width: 140px;

  padding: 0 14px;

  border-radius: 4px;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      to bottom,
      #4c8ffb,
      #245edb
    );

  color: white;

  font-size: 13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35);

  cursor: pointer;
}
/* =========================================================
   TASKBAR APP ICONS - DESKTOP
   Put this near TASKBAR APPS, not inside mobile section
========================================================= */

.taskbar-app {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.taskbar-app::before {
  content: "" !important;

  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;
  min-height: 18px !important;

  flex: 0 0 18px !important;

  display: block !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));
}

/* Product / Rings */
#rings-task::before {
  background-image: var(--gh-rings-task-icon, url("https://cdn-icons-png.flaticon.com/512/716/716784.png")) !important;
}

/* Info */
#info-task::before {
  background-image: var(--gh-info-task-icon, url("https://cdn-icons-png.flaticon.com/512/3135/3135715.png")) !important;
}

/* Messenger */
#aim-task::before {
  background-image: var(--gh-aim-task-icon, url("/cdn/shop/files/AimDesktop.png?v=1780648243")) !important;
}

/* Metal Pricing */
#metal-task::before {
  background-image: var(--gh-metal-task-icon, url("https://cdn-icons-png.flaticon.com/512/2933/2933116.png")) !important;
}

/* =========================================================
   TASKBAR HIDDEN FIX - DESKTOP + MOBILE
   This must stay OUTSIDE any @media section
========================================================= */

.taskbar-app.hidden,
#rings-task.hidden,
#info-task.hidden,
#aim-task.hidden,
#metal-task.hidden {
  display: none !important;
}

.taskbar-app.hidden::before,
#rings-task.hidden::before,
#info-task.hidden::before,
#aim-task.hidden::before,
#metal-task.hidden::before {
  display: none !important;
  content: none !important;
}
/* =========================
   CLOCK
========================= */

#clock {

  width: 95px;
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 12px;

  background:
    linear-gradient(
      to bottom,
      #0c59d8,
      #1a3fa0
    );
}

/* =========================
   START MENU
========================= */

#start-menu {

  position: absolute;

  left: 0;
  bottom: 48px;

  width: 400px;
  height: 300px;

  overflow: hidden;

  border-radius: 8px 8px 0 0;

  z-index: 99999;

  background: #f1f5fb;

  box-shadow:
    0 0 0 1px #245edb,
    0 0 0 2px #7ba7ff,
    0 18px 40px rgba(0,0,0,0.45);
}

/* =========================
   START HEADER
========================= */

#start-header {

  height: 78px;

  display: flex;

  align-items: center;

  padding-left: 20px;

  color: white;

  font-size: 30px;

  font-weight: bold;

  background:
    linear-gradient(
      to bottom,
      #1f6fe5 0%,
      #0c59d8 55%,
      #003ea8 100%
    );
}

/* =========================
   START CONTENT
========================= */

#start-content {

  display: flex;

  height: calc(100% - 132px);
}

.start-left {

  width: 52%;

  background: white;

  padding-top: 10px;
}

.start-right {

  width: 48%;

  padding-top: 10px;

  background:
    linear-gradient(
      to bottom,
      #d9e8fb,
      #c5dcfa
    );
}

.start-item,
.start-item-right {

  height: 42px;

  display: flex;

  align-items: center;

  padding: 0 18px;

  font-size: 15px;

  cursor: pointer;
}

.start-item:hover {

  background:
    linear-gradient(
      to bottom,
      #3c8df6,
      #245edb
    );

  color: white;
}

.start-item-right:hover {

  background: rgba(60,141,246,0.18);
}

/* =========================
   START FOOTER
========================= */

#start-footer {

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 18px;

  padding-right: 18px;

  background:
    linear-gradient(
      to bottom,
      #0d5bd7,
      #003ea8
    );
}

.footer-action {

  display: flex;

  align-items: center;

  gap: 8px;

  color: white;

  font-size: 13px;

  font-weight: bold;
}

.footer-icon {

  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  color: white;

  cursor: pointer;

  border:
    1px solid rgba(255,255,255,0.45);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.45),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 3px rgba(0,0,0,0.35);
}

.logoff-icon {

  background:
    linear-gradient(
      to bottom,
      #6ecb5f,
      #2f9d2f
    );
}

.shutdown-icon {

  background:
    linear-gradient(
      to bottom,
      #ff9d5a,
      #d95a00
    );
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .window {

    width: 96vw;

    height: 84vh;
  }

  .main-product-image {

    width: 100%;
  }

  .xp-toolbar {

    overflow-x: auto;

    padding: 10px 8px;
  }
}
/* =========================
   WINDOW CONTROL BUTTONS
========================= */

.window-controls {
  display: flex;
  gap: 4px;
}

.window-controls button {

  width: 24px;
  height: 22px;

  border: 1px solid #ffffff;

  border-radius: 4px;

  cursor: pointer;

  font-weight: bold;

  color: white;

  background:
    linear-gradient(
      to bottom,
      #6ea7ff,
      #245edb
    );

  display: flex;

  align-items: center;

  justify-content: center;
}

/* CLOSE BUTTON */

#closeBtn {

  background:
    linear-gradient(
      to bottom,
      #ff9d7c,
      #ff5c33
    );
}

/* MAXIMIZED WINDOW */

.window.maximized {

  width: 100vw !important;

  height: calc(100vh - 40px) !important;

  top: 0 !important;

  left: 0 !important;

  transform: none !important;

  border-radius: 0;
}

/* MINIMIZED WINDOW */

.window.minimized {

  display: none;
}

/* =========================
   PRODUCT OPTIONS
========================= */

.product-options {

  display: flex;

  gap: 18px;

  margin-bottom: 24px;

  margin-top: 10px;

  flex-wrap: wrap;
}

.option-group {

  display: flex;

  flex-direction: column;

  gap: 6px;
}

.option-group label {

  font-size: 13px;

  font-weight: bold;

  color: #333;
}

/* XP SELECT */

.xp-select {

  min-width: 140px;

  height: 32px;

  padding: 0 10px;

  border: 1px solid #7f9db9;

  background: white;

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  color: #111;

  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.12);

  cursor: pointer;
}

.xp-select:focus {

  outline: none;

  border-color: #245edb;
}
/* =========================
   3D VIEWER
========================= */

.viewer-3d {

  width: 100%;

  height: calc(100vh - 220px);

  background: #111;

  display: flex;

  align-items: center;

  justify-content: center;
}

.viewer-3d model-viewer {

  width: 100%;

  height: 100%;
}

/* HIDE SHOP PAGE */

.viewer-mode .product-layout,
.viewer-mode .related-products {

  display: none;
}

/* SHOW 3D VIEWER */

.viewer-mode #viewer3d {

  display: flex !important;
}

/* ACTIVE LIVE VIEW BUTTON */

.live-btn.active-viewer {

  background:
    linear-gradient(
      to bottom,
      #d7ecff 0%,
      #8cc3ff 55%,
      #4b91e2 100%
    );

  border: 1px solid #245edb;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.9),
    inset 0 -2px 3px rgba(0,0,0,0.15);
}
/* =========================
   3D LOADING SCREEN
========================= */

.viewer-loading {

  position: absolute;

  top: 96px;

  left: 0;

  width: 100%;

  height: calc(100% - 96px);

  z-index: 500;

  background: #050505;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    opacity 0.4s ease;
}

/* LOADING IMAGE */

.viewer-loading img {

  width: 220px;

  animation:
    pulseLoader 1.8s ease-in-out infinite;
}

/* PULSE EFFECT */

@keyframes pulseLoader {

  0% {

    opacity: 0.45;

    transform: scale(0.96);
  }

  50% {

    opacity: 1;

    transform: scale(1);
  }

  100% {

    opacity: 0.45;

    transform: scale(0.96);
  }
}

/* HIDE LOADER */

.viewer-loading.hidden {

  opacity: 0;

  pointer-events: none;
}

/* =========================
   FLOATING WMP PLAYER
========================= */

.wmp-player {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background: transparent;

  z-index: 999999;

  overflow: hidden;

  pointer-events: none;
}

/* HIDDEN */

#wmpPlayer.hidden {

  display: none !important;
}

/* SCALABLE WMP STAGE */
/* Based on your 2000 x 2600 alien PNG */

.wmp-stage {

  position: absolute;

  top: 50%;
  left: 50%;

  width: min(1020px, 96vw, calc(96vh * 2000 / 2600));

  aspect-ratio: 2000 / 2600;

  transform: translate(-50%, -50%);

  pointer-events: none;
}

/* MAIN ALIEN HEAD */

.wmp-shell {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  z-index: 2;

  pointer-events: none;
}

/* VIDEO SCREEN */

#wmpVideo {

  position: absolute;

  top: 19.5%;
  left: 50%;

  transform: translateX(-50%);

  width: 61%;
  height: 34.7%;

  object-fit: contain;

  object-position: center center;

  border-radius: 14px;

  z-index: 1;

  background: black;

  pointer-events: none;
}

/* FULL-SIZE VISUAL OVERLAYS */

.wmp-overlay,
#scrubberThumb {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.wmp-overlay {

  z-index: 5;
}

#scrubberThumb {

  z-index: 80;

  opacity: 1 !important;

  display: block !important;

  visibility: visible !important;

  transform: translateX(0%);
}

/* FORCE PLAY / PAUSE OVERLAYS ABOVE EVERYTHING */

#playOverlay,
#pauseOverlay {

  z-index: 30 !important;

  pointer-events: none !important;

  opacity: 1;
}

/* INVISIBLE CLICK HITBOXES */

.wmp-hitbox {

  position: absolute;

  width: 5.7%;
  height: 4.4%;

  border: none;

  background: transparent;

  z-index: 9999999 !important;

  cursor: pointer;

  pointer-events: auto !important;

  appearance: none;
  -webkit-appearance: none;

  padding: 0;
  margin: 0;
}

/* BACK BUTTON HITBOX */

#backToProduct {

  top: 7%;
  left: 49%;

  width: 5.9%;
  height: 4.6%;
}

/* TOP CONTROL HITBOXES */
/* Converted from your working full-screen numbers */

#prevVideo {

  top: 13.9%;
  left: 31%;
}

#playPause {

  top: 13.9%;
  left: 37.9%;
}

#stopVideo {

  top: 13.9%;
  left: 45.3%;
}

#nextVideo {

  top: 13.9%;
  left: 52.5%;
}

/* REAL INVISIBLE SLIDER */

#videoScrubber {

  position: absolute;

  top: 55.4%;
  left: 50%;

  transform: translateX(-50%);

  width: 34.3%;
  height: 1.8%;

  z-index: 9999999;

  opacity: 0;

  pointer-events: auto;
}
/* =========================
   CUSTOM IMAGE TOOLBAR BUTTONS
========================= */

.xp-toolbar {

  position: sticky;
  top: 0;
  z-index: 1000;

  min-height: 74px;

  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 14px;

  padding: 10px 14px;

  flex-wrap: nowrap;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;

  background:
    linear-gradient(
      to bottom,
      #f7f3e7 0%,
      #ebe5d3 100%
    );

  border-bottom: 1px solid #b9b09a;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.xp-nav-group,
.toolbar-item {

  display: flex;
  flex-direction: row;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;
}

.xp-nav-group {

  padding-right: 14px;

  border-right: 1px solid #c8c2b2;
}

.xp-image-btn {

  width: 42px;
  height: 42px;

  padding: 0;

  border: none;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex: 0 0 auto;

  transition:
    transform 0.08s ease,
    filter 0.12s ease;
}

.xp-image-btn img {

  width: 42px;
  height: 42px;

  object-fit: contain;

  pointer-events: none;
}

.xp-image-btn:hover {

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(90, 162, 255, 0.85));
}

.xp-image-btn:active {

  transform: translateY(2px) scale(0.94);

  filter:
    brightness(0.9)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

.live-btn.active-viewer {

  filter:
    brightness(1.15)
    drop-shadow(0 0 10px rgba(70, 180, 255, 1));

  transform: translateY(2px) scale(0.96);
}

.material-image-btn.active-material {

  filter:
    brightness(1.12)
    drop-shadow(0 0 8px rgba(255, 210, 80, 0.95));
}

.toolbar-text {

  font-family: "TahomaXP", sans-serif;

  font-size: 11px;

  font-weight: bold;

  color: #111;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;

  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.75);
}

.xp-nav-group,
.toolbar-item {

  display: flex;

  align-items: center;

  gap: 7px;
}

.xp-image-btn {

  width: 48px;
  height: 48px;

  padding: 0;

  border: none;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition:
    transform 0.08s ease,
    filter 0.12s ease;
}

.xp-image-btn img {

  width: 48px;
  height: 48px;

  object-fit: contain;

  pointer-events: none;
}

.xp-image-btn:hover {

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(90, 162, 255, 0.85));
}

.xp-image-btn:active {

  transform: translateY(2px) scale(0.94);

  filter:
    brightness(0.9)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* ACTIVE 3D BUTTON STATE */

.live-btn.active-viewer {

  filter:
    brightness(1.15)
    drop-shadow(0 0 10px rgba(70, 180, 255, 1));

  transform: translateY(2px) scale(0.96);
}

/* MATERIAL ACTIVE STATE */

.material-image-btn.active-material {

  filter:
    brightness(1.12)
    drop-shadow(0 0 8px rgba(255, 210, 80, 0.95));
}

/* UNCLICKABLE TOOLBAR TEXT */

.toolbar-text {

  font-family: "TahomaXP", sans-serif;

  font-size: 14px;

  font-weight: bold;

  color: #111;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;

  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.75);
}

/* =========================
   CUSTOM IMAGE TOOLBAR BUTTONS
========================= */

.xp-toolbar {

  position: sticky;
  top: 0;
  z-index: 1000;

  height: 74px;
  min-height: 74px;

  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 14px;

  padding: 10px 14px;

  flex-wrap: nowrap;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;

  background:
    linear-gradient(
      to bottom,
      #f7f3e7 0%,
      #ebe5d3 100%
    );

  border-bottom: 1px solid #b9b09a;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.xp-nav-group,
.toolbar-item {

  display: flex;
  flex-direction: row;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;
}

.xp-nav-group {

  padding-right: 14px;

  border-right: 1px solid #c8c2b2;
}

.xp-image-btn {

  width: 44px;
  height: 44px;

  padding: 0;

  border: none;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex: 0 0 auto;

  transition:
    transform 0.08s ease,
    filter 0.12s ease;
}

.xp-image-btn img {

  width: 44px;
  height: 44px;

  object-fit: contain;

  pointer-events: none;
}

.xp-image-btn:hover {

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(90, 162, 255, 0.85));
}

.xp-image-btn:active {

  transform: translateY(2px) scale(0.94);

  filter:
    brightness(0.9)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

.live-btn.active-viewer {

  filter:
    brightness(1.15)
    drop-shadow(0 0 10px rgba(70, 180, 255, 1));

  transform: translateY(2px) scale(0.96);
}

.material-image-btn.active-material {

  filter:
    brightness(1.12)
    drop-shadow(0 0 8px rgba(255, 210, 80, 0.95));
}

.toolbar-text {

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  font-weight: bold;

  color: #111;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;

  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.75);
}

/* KEEP CART ON SAME ROW */

.cart-btn {

  margin-left: 0;

  flex: 0 0 auto;

  min-width: 44px;

  padding: 0 8px;
}
/* FORCE GOLD / SILVER TOOLBAR IMAGES TO SHOW */

#goldBtn,
#silverBtn {

  display: flex !important;

  width: 38px;
  height: 38px;

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

  align-items: center;
  justify-content: center;
}

#goldBtn img,
#silverBtn img {

  display: block !important;

  width: 38px !important;
  height: 38px !important;

  object-fit: contain;

  opacity: 1 !important;

  visibility: visible !important;
}
/* =========================
   XP PHOTO GALLERY
========================= */

.xp-photo-gallery {

  width: 100%;

  min-height: 620px;

  background: #f4f4f4;

  display: flex;

  flex-direction: column;

  align-items: center;
}

/* MAIN IMAGE AREA */

.gallery-main-view {

  width: 100%;

  min-height: 410px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 34px 20px 42px;

  background: #f7f7f7;
}

.gallery-main-view img {

  max-width: 68%;

  max-height: 340px;

  object-fit: contain;

  border: 3px solid #111;

  background: white;

  transition:
    transform 0.25s ease;
}

/* CONTROLS BETWEEN MAIN IMAGE AND THUMBNAILS */

.gallery-photo-controls {

  height: 82px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  gap: 16px;

  padding-top: 10px;

  /* make the button area white again */
  background: #ffffff;
}

.photo-control-btn {

  width: 38px;
  height: 38px;

  border-radius: 50%;

  border: 1px solid #0b72d9;

  color: white;

  font-family: "TahomaXP", sans-serif;

  font-size: 18px;

  font-weight: bold;

  cursor: pointer;

  background:
    radial-gradient(
      circle at top,
      #7fd7ff 0%,
      #2196f3 50%,
      #005dbb 100%
    );

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.8),
    inset 0 -3px 4px rgba(0,0,0,0.25),
    0 1px 3px rgba(0,0,0,0.35);

  display: flex;

  align-items: center;

  justify-content: center;
}

.photo-control-btn:hover {

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(0,150,255,0.65));
}

.photo-control-btn:active {

  transform: translateY(1px) scale(0.95);

  filter: brightness(0.9);
}

.rotate-btn {

  border-radius: 4px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dfeee2
    );

  color: #148c26;

  border: 1px solid #9bbf9d;
}

.photo-control-divider {

  width: 1px;

  height: 38px;

  background: #cfcfcf;

  margin: 0 4px;
}

/* THUMBNAILS */

.gallery-thumb-row {

  width: 100%;

  display: flex;

  justify-content: center;

  gap: 42px;

  /* space between stroke and thumbnails */
  padding: 52px 20px 42px;

  /* keep thumbnail area white */
  background: #ffffff;

  /* stroke separating buttons from thumbnails */
  border-top: 1px solid #d6d6d6;
}
.gallery-thumb {

  width: 180px;

  cursor: pointer;

  text-align: center;

  font-family: "TahomaXP", sans-serif;

  color: #111;
}

.gallery-thumb img {

  width: 180px;
  height: 130px;

  object-fit: cover;

  background: white;

  border: 2px solid #ffffff;

  padding: 6px;
}

.gallery-thumb span {

  display: block;

  margin-top: 10px;

  font-size: 20px;
}

.gallery-thumb:hover img,
.active-gallery-thumb img {

  border-color: #245edb;

  box-shadow:
    0 0 0 1px #245edb,
    0 0 8px rgba(36,94,219,0.35);
}

/* GALLERY OPEN BUTTON NEAR PRODUCT THUMBS */

.gallery-open-btn {

  height: 70px;

  padding: 0 14px;

  border: 1px solid #7f9db9;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dbe8fb
    );

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  font-weight: bold;

  color: #111;

  cursor: pointer;
}

.gallery-open-btn:hover {

  border-color: #245edb;

  box-shadow:
    0 0 8px rgba(36,94,219,0.35);
}

/* XP MENU BAR */

.gallery-menu-bar {

  height: 38px;

  display: flex;

  align-items: center;

  gap: 32px;

  padding: 0 24px;

  background: #f5f1e8;

  border-bottom: 1px solid #d1c9b8;

  font-family: "TahomaXP", sans-serif;

  font-size: 22px;

  color: #111;

  user-select: none;
}

/* XP GALLERY TOOLBAR */

.gallery-toolbar {

  height: 58px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 8px 18px;

  background:
    linear-gradient(
      to bottom,
      #f8f4e9,
      #e7dfcc
    );

  border-bottom: 1px solid #c6bea9;
}

.gallery-toolbar-btn {

  height: 38px;

  padding: 0 14px;

  border: 1px solid #9f9a89;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #ddd6c3
    );

  font-family: "TahomaXP", sans-serif;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(0,0,0,0.15);
}

.gallery-toolbar-btn:hover {

  filter: brightness(1.08);
}

.gallery-toolbar-btn:active {

  transform: translateY(1px);

  filter: brightness(0.92);
}

/* MAIN IMAGE AREA */

.gallery-main-view {

  flex: 1;

  min-height: 360px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background: #fbfbfb;
}



.gallery-thumb {

  width: 180px;

  cursor: pointer;

  text-align: center;

  font-family: "TahomaXP", sans-serif;

  color: #111;
}

.gallery-thumb img {

  width: 180px;
  height: 130px;

  object-fit: cover;

  background: white;

  border: 2px solid #ffffff;

  padding: 6px;
}

.gallery-thumb span {

  display: block;

  margin-top: 10px;

  font-size: 20px;
}

.gallery-thumb:hover img,
.active-gallery-thumb img {

  border-color: #245edb;

  box-shadow:
    0 0 0 1px #245edb,
    0 0 8px rgba(36,94,219,0.35);
}

/* GALLERY OPEN BUTTON NEAR PRODUCT THUMBS */

.gallery-open-btn {

  height: 70px;

  padding: 0 14px;

  border: 1px solid #7f9db9;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dbe8fb
    );

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  font-weight: bold;

  color: #111;

  cursor: pointer;
}

.gallery-open-btn:hover {

  border-color: #245edb;

  box-shadow:
    0 0 8px rgba(36,94,219,0.35);
}
/* =========================
   FULLSCREEN PHOTO VIEWER
========================= */

.photo-fullscreen {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.94);

  z-index: 99999999;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: zoom-out;
}

.photo-fullscreen.hidden {

  display: none !important;
}

#photoFullscreenImage {

  max-width: 92vw;

  max-height: 88vh;

  object-fit: contain;

  border: 3px solid white;

  background: white;

  box-shadow:
    0 0 30px rgba(0,0,0,0.8);
}

.photo-fullscreen-close {

  position: absolute;

  top: 22px;
  right: 24px;

  width: 42px;
  height: 42px;

  border: 1px solid white;

  border-radius: 4px;

  background:
    linear-gradient(
      to bottom,
      #ff9d7c,
      #ff5c33
    );

  color: white;

  font-family: "TahomaXP", sans-serif;

  font-size: 22px;

  font-weight: bold;

  cursor: pointer;

  z-index: 2;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.7),
    0 2px 8px rgba(0,0,0,0.45);
}

.photo-fullscreen-close:hover {

  filter:
    brightness(1.15)
    drop-shadow(0 0 8px rgba(255,80,40,0.9));
}

.photo-fullscreen-close:active {

  transform: translateY(1px) scale(0.96);
}
/* FORCE PHOTO GALLERY BACKGROUND TO WHITE */

.xp-photo-gallery,
.gallery-main-view,
.gallery-photo-controls,
.gallery-thumb-row {

  background: #ffffff !important;
}
.gallery-thumb-row {

  border-top: 1px solid #d6d6d6 !important;

  padding-top: 40px !important;
}
/* =========================
   START MENU CUSTOM ITEMS
========================= */

.start-item,
.start-item-right {

  gap: 10px;
}

.start-custom-icon {

  width: 28px;
  height: 28px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 28px;

  border-radius: 6px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dce8ff
    );

  border: 1px solid #7f9db9;

  color: #245edb;

  font-family: "TahomaXP", sans-serif;

  font-size: 16px;

  font-weight: bold;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(0,0,0,0.18);
}

.start-custom-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================
   INTERNAL START MENU PAGES
========================= */

.xp-info-page {

  width: 100%;

  min-height: 620px;

  background: #ffffff;

  padding: 28px;

  font-family: "TahomaXP", sans-serif;
}

.simple-page-content {

  max-width: 900px;

  margin: 0 auto;

  background: #f7f7f7;

  border: 1px solid #cfcfcf;

  padding: 28px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.simple-page-content h1 {

  font-size: 28px;

  margin-bottom: 18px;

  color: #111;
}

.simple-page-content p {

  font-size: 15px;

  line-height: 1.6;

  margin-bottom: 22px;

  color: #333;
}

.shopify-form-box {

  min-height: 360px;

  background: white;

  border: 1px solid #7f9db9;

  padding: 20px;

  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.15);
}

.all-products-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(140px, 1fr));

  gap: 18px;

  margin-top: 20px;
}

.product-template-icon {

  min-height: 140px;

  background: white;

  border: 1px solid #b9b19f;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  cursor: pointer;

  font-family: "TahomaXP", sans-serif;

  font-weight: bold;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.product-template-icon:hover {

  border-color: #245edb;

  box-shadow:
    0 0 0 1px #245edb,
    0 0 8px rgba(36,94,219,0.35);
}

.product-template-placeholder {

  font-size: 42px;
}

/* =========================
   FIXED START MENU OVERRIDES
========================= */

#start-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: 48px !important;
  width: 430px !important;
  height: 360px !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
  z-index: 99999 !important;
  background: #f1f5fb !important;
  box-shadow:
    0 0 0 1px #245edb,
    0 0 0 2px #7ba7ff,
    0 18px 40px rgba(0,0,0,0.45) !important;
}

#start-header {
  height: 72px !important;
}

#start-content {
  display: flex !important;
  height: calc(100% - 126px) !important;
}

#start-content > .start-left,
#start-content > .start-right {
  display: block !important;
}

#start-footer {
  height: 54px !important;
}

/* Make internal pages visible correctly inside the XP window */
.xp-info-page {
  width: 100%;
  min-height: 620px;
  background: #ffffff;
  padding: 28px;
}
/* Make internal pages visible correctly inside the XP window */
.xp-info-page {
  width: 100%;
  min-height: 620px;
  background: #ffffff;
  padding: 28px;
}
/* =========================
   SIMPLE TOOLBAR MODE
   Start Menu pages only
========================= */

/* Hide Gold, Silver, 3D View, and WMP on Start Menu pages */
.window.simple-toolbar-mode .toolbar-item {

  display: none !important;
}

/* Keep Back / Forward visible */
.window.simple-toolbar-mode .xp-nav-group {

  display: flex !important;
}

/* Keep Cart visible */
.window.simple-toolbar-mode .cart-btn {

  display: flex !important;
}
/* =========================
   SECOND INFO WINDOW
========================= */

.info-window {

  width: min(1050px, 92vw);

  height: min(620px, 82vh);

  top: 53%;
  left: 54%;

  transform: translate(-50%, -50%);

  z-index: 101;
}

.info-window.maximized {

  width: 100vw !important;

  height: calc(100vh - 40px) !important;

  top: 0 !important;

  left: 0 !important;

  transform: none !important;
}

.info-window.minimized {

  display: none !important;
}

.info-window-content {

  background: #ffffff;
}

.info-page {

  width: 100%;

  min-height: 520px;

  background: #ffffff;

  padding: 28px;
}

.simple-info-toolbar {

  height: 74px;

  min-height: 74px;

  flex-wrap: nowrap;

  overflow-x: hidden;
}

.simple-info-toolbar .cart-btn {

  margin-left: auto;
}

.info-address-bar {

  top: 74px;
}

/* ACTIVE TASKBAR TAB LOOK */

.taskbar-app.active-task {

  background:
    linear-gradient(
      to bottom,
      #7fb0ff,
      #1f57c9
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 0 8px rgba(255,255,255,0.35);
}
/* =========================
   ALL PRODUCTS DESKTOP SHORTCUT VIEW
========================= */

.all-products-desktop {

  width: 100%;

  min-height: 460px;

  background: #ffffff;

  padding: 28px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 34px;

  flex-wrap: wrap;
}

.desktop-product-shortcut {

  width: 92px;

  min-height: 96px;

  border: 1px solid transparent;

  background: transparent;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  padding: 8px 6px;

  cursor: pointer;

  font-family: "TahomaXP", sans-serif;

  color: #111;

  text-align: center;

  user-select: none;
}

.desktop-product-shortcut img {

  width: 52px;
  height: 52px;

  object-fit: contain;

  pointer-events: none;
}

.desktop-product-placeholder {

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 38px;

  line-height: 1;

  pointer-events: none;
}

.desktop-product-shortcut span:last-child {

  font-size: 13px;

  line-height: 1.2;

  text-shadow:
    1px 1px 0 rgba(255,255,255,0.85);
}

.desktop-product-shortcut:hover {

  border: 1px dotted #245edb;

  background: rgba(36, 94, 219, 0.12);
}

.desktop-product-shortcut:active {

  transform: scale(0.95);

  filter: brightness(0.9);
}

.desktop-product-shortcut.selected-shortcut {

  border: 1px dotted #245edb;

  background: rgba(36, 94, 219, 0.22);
}
/* =========================
   ALL PRODUCTS DESKTOP SHORTCUT VIEW
========================= */

.all-products-desktop {

  width: 100%;

  min-height: 460px;

  background: #ffffff;

  padding: 28px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 34px;

  flex-wrap: wrap;
}

.desktop-product-shortcut {

  width: 92px;

  min-height: 96px;

  border: 1px solid transparent;

  background: transparent;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  padding: 8px 6px;

  cursor: pointer;

  font-family: "TahomaXP", sans-serif;

  color: #111;

  text-align: center;

  user-select: none;
}

.desktop-product-shortcut img {

  width: 52px;
  height: 52px;

  object-fit: contain;

  pointer-events: none;
}

.desktop-product-placeholder {

  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 38px;

  line-height: 1;

  pointer-events: none;
}

.desktop-product-shortcut span:last-child {

  font-size: 13px;

  line-height: 1.2;

  text-shadow:
    1px 1px 0 rgba(255,255,255,0.85);
}

.desktop-product-shortcut:hover {

  border: 1px dotted #245edb;

  background: rgba(36, 94, 219, 0.12);
}

.desktop-product-shortcut:active {

  transform: scale(0.95);

  filter: brightness(0.9);
}
/* =========================
   GOLDHEARTED MESSENGER
========================= */

#openAim {

  margin-top: 8px;
}

.aim-window {

  background: #ece9d8;

  z-index: 120;
}

.aim-signon-size {

  width: 260px;

  height: 430px;

  top: 50%;
  left: 28%;

  transform: translate(-50%, -50%);
}

.aim-chat-size {
  width: 700px;
  height: 500px;

  top: 50%;
  left: 58%;

  transform: translate(-50%, -50%);
}

.aim-window.maximized {

  width: 100vw !important;

  height: calc(100vh - 40px) !important;

  top: 0 !important;

  left: 0 !important;

  transform: none !important;
}

.aim-window.minimized {

  display: none !important;
}

.aim-content {

  flex: 1;

  background: #ece9d8;

  padding: 8px;

  overflow: hidden;
}

.aim-panel {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;
}

.aim-logo-box {

  width: 100%;

  height: 165px;

  background: #4266f5;

  border: 1px solid #7f9db9;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 8px;

  overflow: hidden;
}

.aim-logo-box img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;
}

.aim-label {

  font-size: 12px;

  margin-bottom: 3px;

  color: #111;
}

.aim-input {

  height: 26px;

  border: 1px solid #7f9db9;

  background: white;

  padding: 0 6px;

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  margin-bottom: 8px;
}

.aim-input:focus,
.aim-message-input:focus {

  outline: none;

  border-color: #245edb;
}

.aim-check-row {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  margin: 4px 0 12px;
}

.aim-signon-btn {

  height: 34px;

  align-self: flex-end;

  padding: 0 18px;

  border: 1px solid #7f9db9;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d8e8ff
    );

  font-family: "TahomaXP", sans-serif;

  font-weight: bold;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.aim-signon-btn:active {

  transform: translateY(1px);

  filter: brightness(0.9);
}

.aim-bottom-icons {

  margin-top: auto;

  display: flex;

  justify-content: space-between;

  font-size: 11px;

  color: #111;
}

#aimLoadingPanel {

  align-items: center;

  justify-content: center;

  background: black;

  color: white;

  text-align: center;
}

#aimLoadingVideo {

  width: 100%;

  height: 78%;

  object-fit: cover;

  background: black;
}

.aim-loading-text {

  margin-top: 10px;

  font-size: 18px;

  font-weight: bold;
}

.aim-loading-subtext {

  margin-top: 4px;

  font-size: 12px;

  opacity: 0.85;
}

.aim-chat-header {

  height: 58px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #d9e8ff
    );

  border: 1px solid #7f9db9;

  margin-bottom: 8px;
}

.aim-chat-header img {

  width: 38px;

  height: 38px;

  object-fit: contain;
}

.aim-chat-header strong {

  display: block;

  font-size: 14px;
}

.aim-chat-header span {

  display: block;

  font-size: 11px;

  color: #168000;
}

.aim-transcript {

  flex: 1;

  background: white;

  border: 1px solid #7f9db9;

  padding: 8px;

  overflow-y: auto;

  font-family: "Times New Roman", serif;

  font-size: 15px;

  line-height: 1.35;

  margin-bottom: 8px;
}

.aim-message {

  margin-bottom: 10px;
}

.aim-message-user strong {

  color: #245edb;
}

.aim-message-bot strong {

  color: #111;
}

.aim-message-input {

  height: 78px;

  resize: none;

  border: 1px solid #7f9db9;

  background: white;

  padding: 8px;

  font-family: "TahomaXP", sans-serif;

  font-size: 13px;

  margin-bottom: 8px;
}

.aim-chat-actions {

  height: 54px;

  display: flex;

  align-items: center;

  gap: 10px;
}

.aim-note {

  flex: 1;

  font-size: 11px;

  color: #444;
}

.aim-send-btn {

  width: 92px;

  height: 46px;

  border: none;

  background: transparent;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-family: "TahomaXP", sans-serif;

  font-size: 11px;

  font-weight: bold;
}

.aim-send-btn img {

  width: 42px;

  height: 30px;

  object-fit: contain;

  pointer-events: none;
}

.aim-send-btn:active {

  transform: scale(0.95);

  filter: brightness(0.9);
}
/* =========================
   AIM LOADING VIDEO ONLY MODE
========================= */

.aim-window.aim-loading-only {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  overflow: visible !important;
}

/* hide blue XP title bar only during loading */

.aim-window.aim-loading-only .title-bar {

  display: none !important;
}

/* remove padding/background around video */

.aim-window.aim-loading-only .aim-content {

  padding: 0 !important;

  background: transparent !important;

  overflow: visible !important;
}

/* make loading panel only the video */

.aim-window.aim-loading-only #aimLoadingPanel {

  background: transparent !important;

  padding: 0 !important;

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}

/* show full video with no crop */

.aim-window.aim-loading-only #aimLoadingVideo {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  background: transparent !important;

  display: block !important;
}

/* hide loading text during video-only mode */

.aim-window.aim-loading-only .aim-loading-text,
.aim-window.aim-loading-only .aim-loading-subtext {

  display: none !important;
}
/* =========================
   COLLECTION PRODUCT SHORTCUT PAGE
========================= */

.collection-page {

  width: 100%;

  min-height: 520px;

  background: #ffffff;

  padding: 28px;
}

.collection-desktop {

  width: 100%;

  min-height: 460px;

  background: #ffffff;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 34px;

  flex-wrap: wrap;
}

.collection-product-shortcut {

  width: 105px;

  min-height: 112px;

  border: 1px solid transparent;

  background: transparent;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  padding: 8px 6px;

  cursor: pointer;

  font-family: "TahomaXP", sans-serif;

  color: #111;

  text-align: center;

  user-select: none;
}

.collection-product-shortcut img {

  width: 56px;
  height: 56px;

  object-fit: contain;

  pointer-events: none;
}

.collection-product-shortcut span:last-child {

  font-size: 13px;

  line-height: 1.2;

  text-shadow:
    1px 1px 0 rgba(255,255,255,0.85);
}

.collection-product-shortcut:hover {

  border: 1px dotted #245edb;

  background: rgba(36, 94, 219, 0.12);
}

.collection-product-shortcut:active {

  transform: scale(0.95);

  filter: brightness(0.9);
}
/* =========================
   AIM SIGN ON CLEANUP
========================= */

.aim-signon-btn {

  display: none !important;
}

.aim-signon-image-btn {

  width: 116px;
  height: 70px;

  align-self: flex-end;

  border: none;

  background: transparent;

  padding: 0;
  margin: 8px 0 0 0;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.aim-signon-image-btn img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.aim-signon-image-btn:hover {

  filter: brightness(1.08);
}

.aim-signon-image-btn:active {

  transform: scale(0.95);

  filter: brightness(0.9);
}

.aim-bottom-icons {

  display: none !important;
}

.aim-version {

  margin-top: auto;

  width: 100%;

  text-align: center;

  font-size: 11px;

  color: #111;

  font-family: "TahomaXP", Tahoma, sans-serif;

  padding-top: 8px;
}
#aimSignOnPanel {

  position: relative;
}

.aim-signon-image-btn {

  position: absolute;

  right: 8px;
  bottom: 28px;
}

.aim-version {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 4px;
}
/* =========================
   AIM CHAT WINDOW XP LAYOUT
========================= */

#aimChatPanel {
  background: #ece9d8;
  padding: 6px;
  gap: 0;
}

.aim-im-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  border: 1px solid #9c9c9c;
  background: #ffffff;
}

.aim-avatar-strip {
  width: 78px;
  min-width: 78px;
  background:
    linear-gradient(
      to bottom,
      #c8f8ff,
      #8ee7f5 45%,
      #b6f6ff
    );
  border-right: 1px solid #9c9c9c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
}

.aim-avatar-box {
  width: 58px;
  height: 58px;
  border: 3px solid #ff1f1f;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.aim-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-avatar-box {
  margin-top: auto;
}

.aim-paw-bg {
  flex: 1;
  width: 100%;
  margin: 10px 0;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, #00a6c7 0 3px, transparent 4px),
    radial-gradient(circle, #00a6c7 0 2px, transparent 3px),
    radial-gradient(circle, #00a6c7 0 2px, transparent 3px);
  background-size: 28px 28px;
  background-position: 4px 4px, 14px 12px, 20px 6px;
}

.aim-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #ffffff;
}

.aim-transcript {
  flex: 1;
  min-height: 130px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #b9b9b9;
  padding: 8px;
  overflow-y: auto;
  font-family: "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
}

.aim-message {
  margin-bottom: 4px;
}

.aim-message-bot strong {
  color: #174cff;
}

.aim-message-user strong {
  color: #ff2020;
}

.aim-format-bar {
  height: 28px;
  min-height: 28px;
  background: #ece9d8;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #b9b9b9;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  gap: 3px;
}

.aim-format-bar button {
  height: 22px;
  min-width: 22px;
  border: 1px solid transparent;
  background: transparent;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: #111;
  cursor: default;
  padding: 0 4px;
}

.aim-format-bar button:hover {
  border-color: #9c9c9c;
  background: #ffffff;
}

.aim-format-bar .aim-link-btn {
  color: #0000ee;
  text-decoration: underline;
  font-weight: bold;
}

.aim-format-divider {
  width: 1px;
  height: 20px;
  background: #b9b9b9;
  margin: 0 3px;
  box-shadow: 1px 0 #ffffff;
}

.aim-message-input {
  height: 120px;
  min-height: 120px;
  resize: none;
  border: none;
  background: #ffffff;
  padding: 8px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
}

.aim-bottom-action-bar {
  height: 74px;
  min-height: 74px;
  background: #ece9d8;
  border: 1px solid #b9b9b9;
  border-top: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 10px;
}

.aim-bottom-left-links {
  width: 95px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.aim-bottom-left-links a {
  color: #0000ee;
  text-decoration: underline;
}

.aim-action-btn {
  width: 74px;
  height: 52px;
  border: none;
  background: transparent;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: #555;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.aim-action-icon {
  font-size: 25px;
  line-height: 1;
  margin-bottom: 2px;
}

.disabled-aim-action {
  opacity: 0.35;
  filter: grayscale(1);
  pointer-events: none;
}

.aim-send-btn {
  margin-left: auto;
  width: 74px;
  height: 58px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aim-send-btn img {
  width: 70px;
  height: 54px;
  object-fit: contain;
  pointer-events: none;
}

.aim-send-btn span {
  display: none !important;
}

.aim-send-btn:hover {
  filter: brightness(1.08);
}

.aim-send-btn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}
/* =========================
   AIM LEFT STRIP BLACK / PURPLE
========================= */

.aim-avatar-strip {
  width: 78px;
  min-width: 78px;

  background:
    radial-gradient(
      circle at 35% 20%,
      rgba(160, 80, 255, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(80, 0, 140, 0.65),
      transparent 22%
    ),
    linear-gradient(
      to bottom,
      #070008,
      #1a0026 35%,
      #32004d 70%,
      #09000d
    ) !important;

  border-right: 1px solid #17001f !important;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 8px 6px;
}

/* Replace blue dots with subtle purple pattern */
.aim-paw-bg {
  flex: 1;
  width: 100%;
  margin: 10px 0;

  opacity: 0.8;

  background-image:
    radial-gradient(circle, rgba(200, 120, 255, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(90, 0, 160, 0.7) 0 3px, transparent 4px),
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05) 0%,
      transparent 45%,
      rgba(255,255,255,0.04) 100%
    );

  background-size:
    24px 24px,
    38px 38px,
    100% 100%;

  background-position:
    4px 4px,
    12px 18px,
    center;
}

/* Avatar boxes look cleaner on dark strip */
.aim-avatar-box {
  border: 3px solid #7b20ff !important;

  background: #050008 !important;

  box-shadow:
    0 0 8px rgba(180, 80, 255, 0.65),
    inset 0 1px 0 rgba(255,255,255,0.2);
}



/* =========================================================
   FINAL FIXES — TASKBAR + AIM LEFT STRIP
   Paste-safe overrides added last so they win over older CSS.
========================================================= */

#taskbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2147483000 !important;
}

#taskbar-apps {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.taskbar-app {
  height: 30px !important;
  flex: 0 0 auto !important;
}

#clock {
  height: 40px !important;
  flex: 0 0 95px !important;
}

#desktop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background-image: var(--gh-desktop-wallpaper, url("wallpaper.jpg.png")) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.window {
  max-height: calc(100vh - 56px) !important;
}

.window.maximized,
.aim-window.maximized,
.info-window.maximized {
  height: calc(100vh - 40px) !important;
}

.aim-chat-size {
  width: min(700px, 92vw) !important;
  height: min(500px, calc(100vh - 76px)) !important;
  top: calc((100vh - 40px) / 2) !important;
  left: 58% !important;
  transform: translate(-50%, -50%) !important;
}

.aim-signon-size {
  max-height: calc(100vh - 76px) !important;
}

.aim-window .aim-content {
  min-height: 0 !important;
}

#aimChatPanel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.aim-im-layout {
  min-height: 0 !important;
}

.aim-avatar-strip {
  width: 78px !important;
  min-width: 78px !important;
  background-color: #08000c !important;
  background-image:
    radial-gradient(circle at 35% 18%, rgba(176, 86, 255, 0.55) 0%, rgba(176, 86, 255, 0.2) 13%, transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(88, 0, 150, 0.75) 0%, rgba(88, 0, 150, 0.25) 18%, transparent 34%),
    linear-gradient(to bottom, #050006 0%, #14001f 28%, #2e0048 62%, #08000d 100%) !important;
  border-right: 1px solid #1b0028 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 8px 6px !important;
}

.aim-paw-bg {
  flex: 1 !important;
  width: 100% !important;
  margin: 10px 0 !important;
  opacity: 1 !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(circle, rgba(210, 130, 255, 0.56) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(110, 20, 190, 0.72) 0 3px, transparent 4px),
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 45%, rgba(255,255,255,0.04) 100%) !important;
  background-size: 22px 22px, 36px 36px, 100% 100% !important;
  background-position: 4px 4px, 12px 18px, center !important;
}

.aim-avatar-box {
  border: 3px solid #9b3cff !important;
  background: #050008 !important;
  box-shadow:
    0 0 8px rgba(180, 80, 255, 0.75),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.aim-bottom-action-bar {
  min-height: 74px !important;
}

.aim-send-btn span {
  display: none !important;
}
/* =========================
   AIM WORKING FORMAT BAR
========================= */

.aim-message-editor {
  height: 120px;
  min-height: 120px;

  overflow-y: auto;

  outline: none;

  cursor: text;

  white-space: pre-wrap;

  word-break: break-word;
}

.aim-message-editor:empty::before {
  content: "";

  color: #777;
}

.aim-format-btn,
.aim-color-btn,
.aim-emoji-btn {
  height: 22px;
  min-width: 24px;

  border: 1px solid transparent;

  background: transparent;

  font-family: "TahomaXP", Tahoma, sans-serif;

  font-size: 13px;

  color: #111;

  cursor: pointer;

  padding: 0 5px;
}

.aim-format-btn:hover,
.aim-color-btn:hover,
.aim-emoji-btn:hover {
  border-color: #7f9db9;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #dcecff
    );
}

.aim-format-btn:active,
.aim-color-btn:active,
.aim-emoji-btn:active {
  transform: translateY(1px);

  filter: brightness(0.9);
}

.aim-color-btn {
  font-size: 17px;
  color: #000000;
}

.aim-color-btn.blue-color {
  color: #174cff;
}

.aim-color-btn.red-color {
  color: #ff2020;
}

.aim-color-btn.purple-color {
  color: #7b20ff;
}

.aim-emoji-btn {
  font-size: 15px;
}
/* =========================
   HIDE AIM EMAIL / MORE TEXT
========================= */

.aim-bottom-left-links {
  display: none !important;
}
.aim-bottom-action-bar {
  padding-left: 14px;
}
/* =========================
   ACTIVE WINDOW HIGHLIGHT
========================= */

.window {
  transition:
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* inactive windows look slightly muted */
.window:not(.active-window) {
  filter: brightness(0.92) saturate(0.9);
}

/* active window looks slightly brighter */
.window.active-window {
  filter: brightness(1.04) saturate(1.08);

  box-shadow:
    0 0 0 1px #6ea7ff,
    0 0 0 2px rgba(160, 80, 255, 0.45),
    0 0 18px rgba(160, 80, 255, 0.45),
    4px 4px 14px rgba(0,0,0,0.45);
}

/* active title bar gets a subtle purple/blue glow */
.window.active-window .title-bar {
  background:
    linear-gradient(
      to bottom,
      #2ba8ff 0%,
      #0068ff 12%,
      #245edb 45%,
      #4b28c8 100%
    );
}

/* inactive title bar is a little duller */
.window:not(.active-window) .title-bar {
  background:
    linear-gradient(
      to bottom,
      #7aa7dd 0%,
      #4f7fc3 40%,
      #315d9c 100%
    );
}
/* =========================
   CLEAN ACTIVE WINDOW HIGHLIGHT
   Keeps AIM from getting too glowy
========================= */

/* remove heavy glow/filter from all windows */
.window {
  transition:
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* inactive windows: very slightly muted only */
.window:not(.active-window) {
  filter: brightness(0.96) saturate(0.95);
}

/* active normal windows */
.window.active-window {
  filter: brightness(1.02) saturate(1.03);

  box-shadow:
    0 0 0 1px #6ea7ff,
    0 0 0 2px rgba(120, 80, 255, 0.25),
    0 0 10px rgba(120, 80, 255, 0.25),
    4px 4px 14px rgba(0,0,0,0.4);
}

/* active title bar only gets the color change */
.window.active-window .title-bar {
  background:
    linear-gradient(
      to bottom,
      #2ba8ff 0%,
      #0068ff 12%,
      #245edb 50%,
      #3927c8 100%
    );
}

/* inactive title bar slightly dull */
.window:not(.active-window) .title-bar {
  background:
    linear-gradient(
      to bottom,
      #8cb0df 0%,
      #5d88c7 45%,
      #3864a0 100%
    );
}

/* =========================
   AIM WINDOW ACTIVE FIX
   Smaller windows need softer effect
========================= */

.aim-window.active-window {
  filter: brightness(1.01) saturate(1.02);

  box-shadow:
    0 0 0 1px #6ea7ff,
    0 0 0 2px rgba(120, 80, 255, 0.18),
    0 0 7px rgba(120, 80, 255, 0.2),
    4px 4px 10px rgba(0,0,0,0.32);
}

.aim-window:not(.active-window) {
  filter: brightness(0.98) saturate(0.96);
}

/* keep sign-on window clean */
.aim-signon-size.active-window {
  box-shadow:
    0 0 0 1px #6ea7ff,
    0 0 0 2px rgba(120, 80, 255, 0.12),
    3px 3px 10px rgba(0,0,0,0.34);
}
/* =========================
   FONT SYSTEM
========================= */

/* Default UI/body font */
body,
button,
input,
select,
textarea,
.aim-message-editor,
.toolbar-text,
.address-input,
.start-item,
.start-item-right,
.taskbar-app,
#clock,
.aim-label,
.aim-input,
.aim-format-bar,
.aim-message,
.product-description,
.donation-note,
.review-text,
.option-group label,
.simple-page-content p,
.shopify-form-box p {
  font-family: var(--body-font);
}

/* Custom title font */
#productTitle,
.product-info h1,
.product-title,
.simple-page-content h1,
.simple-page-content h2,
.shopify-form-box h2,
.product-price,
.more-products-section h2,
.reviews-section h2,
.info-page h1,
.info-page h2 {
  font-family: var(--title-font);
  font-weight: normal;
}

/* Product title specifically */
#productTitle {
  font-size: 38px;
  letter-spacing: 0.5px;
}

/* Info page titles */
.simple-page-content h1,
.info-page h1 {
  font-size: 38px;
  letter-spacing: 0.5px;
}

/* Section titles */
.more-products-section h2,
.reviews-section h2,
.shopify-form-box h2 {
  font-size: 30px;
  letter-spacing: 0.4px;
}
/* =========================
   SLIGHTLY BIGGER XP BODY FONT
========================= */

:root {
  --xp-small: 13px;
  --xp-normal: 15px;
  --xp-medium: 16px;
}

/* General readable text */
body,
button,
input,
select,
textarea,
.aim-message-editor,
.aim-message,
.product-description,
.donation-note,
.review-text,
.simple-page-content p,
.shopify-form-box p {
  font-size: var(--xp-normal);
}

/* Toolbar / address / taskbar text */
.toolbar-text,
.address-label,
.address-input,
.taskbar-app,
#clock,
.start-item,
.start-item-right,
.aim-label,
.aim-input {
  font-size: var(--xp-small);
}

/* Product options and small labels */
.option-group label,
.xp-select {
  font-size: var(--xp-small);
}

/* AIM transcript can be a little larger */
.aim-transcript {
  font-size: 30px;
}

/* Start menu text slightly larger */
.start-item,
.start-item-right {
  font-size: 20px;
}

/* Desktop icon labels */
.desktop-icon span {
  font: size 50px;
}

/* Buttons */
.buy-button {
  font-size: 30px;
}
/* =========================
   GOLDHEARTED PURPLE THEME
   Easy to customize later for Shopify
========================= */

:root {
  --gh-purple-dark: #2a003d;
  --gh-purple-main: #5b0a8f;
  --gh-purple-light: #8f35d6;

  --gh-black: #050505;
  --gh-white: #ffffff;

  --gh-grey-light: #eeeeee;
  --gh-grey-mid: #b9b9b9;
  --gh-grey-dark: #5f5f5f;

  --gh-gold: #d6a313;
  --gh-gold-light: #f2cc55;

  --gh-title-gradient:
    linear-gradient(
      to bottom,
      #b46cff 0%,
      #7b20ff 12%,
      #5b0a8f 48%,
      #2a003d 100%
    );

  --gh-taskbar-gradient:
    linear-gradient(
      to bottom,
      #6b18a8 0%,
      #4b0876 45%,
      #21002f 100%
    );

  --gh-window-body: #f2f0ec;
  --gh-toolbar-bg: #ebe7df;
}

/* =========================
   WINDOW COLORS
========================= */

.window {
  border-color: var(--gh-purple-main) !important;

  box-shadow:
    0 0 0 1px var(--gh-purple-light),
    4px 4px 14px rgba(0,0,0,0.45);
}

.title-bar,
.window.active-window .title-bar {
  background: var(--gh-title-gradient) !important;

  color: var(--gh-white) !important;
}

.window:not(.active-window) .title-bar {
  background:
    linear-gradient(
      to bottom,
      #8b8b8b 0%,
      #666666 45%,
      #3a3a3a 100%
    ) !important;

  color: var(--gh-white) !important;
}

.window-content,
.info-window-content {
  background: var(--gh-window-body) !important;
}

/* =========================
   WINDOW CONTROL BUTTONS
========================= */

.window-controls button {
  border: 1px solid var(--gh-white) !important;

  background:
    linear-gradient(
      to bottom,
      #9d6ac7,
      #4b0876
    ) !important;

  color: var(--gh-white) !important;
}

/* close button grey instead of red */
.window-controls button[id*="close"],
#closeBtn,
#infoCloseBtn,
#aimCloseBtn {
  background:
    linear-gradient(
      to bottom,
      #f4f4f4 0%,
      #b8b8b8 45%,
      #5f5f5f 100%
    ) !important;

  color: var(--gh-white) !important;
}

.window-controls button:hover {
  filter: brightness(1.12);

  box-shadow:
    0 0 8px rgba(180, 120, 255, 0.75) !important;
}

/* close hover grey glow, not red */
.window-controls button[id*="close"]:hover,
#closeBtn:hover,
#infoCloseBtn:hover,
#aimCloseBtn:hover {
  box-shadow:
    0 0 8px rgba(255,255,255,0.75) !important;

  filter: brightness(1.08);
}

/* =========================
   TOOLBAR / ADDRESS BAR
========================= */

.xp-toolbar,
.simple-info-toolbar {
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #eee9df 48%,
      #d8d2c5 100%
    ) !important;

  border-bottom: 1px solid var(--gh-grey-mid) !important;
}

.xp-address-bar,
.info-address-bar {
  background:
    linear-gradient(
      to bottom,
      #f8f8f8,
      #dedbd3
    ) !important;

  border-bottom: 1px solid var(--gh-grey-mid) !important;
}

.address-input {
  border-color: var(--gh-grey-mid) !important;
}

/* =========================
   TASKBAR / START BUTTON AREA
========================= */

#taskbar {
  background: var(--gh-taskbar-gradient) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.55);
}

.taskbar-app {
  background:
    linear-gradient(
      to bottom,
      #8f35d6,
      #5b0a8f
    ) !important;

  color: var(--gh-white) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 6px rgba(0,0,0,0.2);
}

.taskbar-app.active-task {
  background:
    linear-gradient(
      to bottom,
      #f2cc55,
      #d6a313
    ) !important;

  color: var(--gh-black) !important;
}

#clock {
  background:
    linear-gradient(
      to bottom,
      #4b0876,
      #21002f
    ) !important;

  color: var(--gh-white) !important;
}

/* =========================
   START MENU COLORS
========================= */

#start-menu {
  background: var(--gh-grey-light) !important;

  box-shadow:
    0 0 0 1px var(--gh-purple-main),
    0 0 0 2px var(--gh-purple-light),
    0 18px 40px rgba(0,0,0,0.45) !important;
}

#start-header {
  background: var(--gh-title-gradient) !important;

  color: var(--gh-white) !important;
}

.start-left {
  background: var(--gh-white) !important;
}

.start-right {
  background:
    linear-gradient(
      to bottom,
      #f1edf5,
      #d9d4df
    ) !important;
}

.start-item:hover,
.start-item-right:hover {
  background:
    linear-gradient(
      to bottom,
      #8f35d6,
      #5b0a8f
    ) !important;

  color: var(--gh-white) !important;
}

#start-footer {
  background:
    linear-gradient(
      to bottom,
      #4b0876,
      #21002f
    ) !important;
}

/* footer icon colors */
.logoff-icon {
  background:
    linear-gradient(
      to bottom,
      #d9d9d9,
      #6f6f6f
    ) !important;
}

.shutdown-icon {
  background:
    linear-gradient(
      to bottom,
      #f2cc55,
      #d6a313
    ) !important;

  color: var(--gh-black) !important;
}

/* =========================
   PRODUCT / BUTTON COLORS
========================= */

.buy-button {
  border-color: var(--gh-purple-main) !important;

  background:
    linear-gradient(
      to bottom,
      #9f54e8,
      #5b0a8f
    ) !important;

  color: var(--gh-white) !important;
}

.buy-button:hover {
  filter: brightness(1.08);

  box-shadow:
    0 0 10px rgba(143, 53, 214, 0.45);
}

.product-price {
  color: var(--gh-gold) !important;
}

.active-thumb,
.active-gallery-thumb {
  border-color: var(--gh-purple-main) !important;
}

/* =========================
   AIM WINDOW PURPLE CLEANUP
========================= */

.aim-window .title-bar {
  background: var(--gh-title-gradient) !important;
}

.aim-avatar-strip {
  background:
    radial-gradient(
      circle at 35% 20%,
      rgba(180, 80, 255, 0.55),
      transparent 18%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(80, 0, 140, 0.65),
      transparent 22%
    ),
    linear-gradient(
      to bottom,
      #070008,
      #1a0026 35%,
      #32004d 70%,
      #09000d
    ) !important;

  border-right: 1px solid var(--gh-purple-dark) !important;
}

.aim-format-bar,
.aim-bottom-action-bar {
  background:
    linear-gradient(
      to bottom,
      #f5f2eb,
      #ded8cf
    ) !important;
}

/* =========================
   LINK COLORS
========================= */

a,
.aim-link-btn {
  color: var(--gh-purple-main) !important;
}

a:hover,
.aim-link-btn:hover {
  color: var(--gh-gold) !important;
}
/* =========================
   TASKBAR GREY TO PURPLE GRADIENT
========================= */

#taskbar {
  background:
    linear-gradient(
      to right,
      #b9b9b9 0%,
      #8f8f8f 8%,
      #6f4b86 22%,
      #5b0a8f 48%,
      #4b0876 72%,
      #21002f 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.55) !important;
}
/* =========================
   DESKTOP ICON SPACING
========================= */

#openAboutDesktop {
  margin-top: 4px;
}
/* =========================
   METAL PRICING WINDOW
========================= */

.metal-window {
  width: 620px;
  height: 500px;

  top: 50%;
  left: 54%;

  transform: translate(-50%, -50%);
}

.metal-window-content {
  background: var(--gh-window-body, #f2f0ec);
}

.metal-toolbar {
  height: 62px;
  min-height: 62px;
}

.metal-refresh-symbol {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  font-weight: bold;

  color: var(--gh-purple-main, #5b0a8f);

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #ded8cf
    );

  border: 1px solid #b9b9b9;
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 3px rgba(0,0,0,0.2);
}

#metalRefreshBtn:active .metal-refresh-symbol {
  transform: translateY(1px) scale(0.95);
  filter: brightness(0.9);
}

.metal-market-page {
  padding: 24px;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f2f0ec 100%
    );

  min-height: 100%;
}

.metal-market-header {
  margin-bottom: 20px;
}

.metal-market-header h1 {
  font-family: var(--title-font);
  font-size: 38px;
  font-weight: normal;

  color: var(--gh-purple-main, #5b0a8f);

  margin-bottom: 6px;
}

.metal-market-header p {
  font-family: var(--body-font);
  font-size: 14px;

  color: #444;

  max-width: 460px;
}

.metal-price-list {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.metal-price-row {
  min-height: 86px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 12px 16px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #ebe7df
    );

  border: 1px solid #c7c1b8;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    2px 2px 6px rgba(0,0,0,0.08);
}

.metal-icon-wrap {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 2px solid #ffffff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 2px 6px rgba(0,0,0,0.22);
}

.metal-icon-wrap img {
  width: 44px;
  height: 44px;

  object-fit: contain;
}

.gold-metal {
  background:
    linear-gradient(
      to bottom,
      #f2cc55,
      #d6a313
    );
}

.silver-metal {
  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #b9b9b9
    );
}

.platinum-metal {
  background:
    linear-gradient(
      to bottom,
      #f7f7f7,
      #9f9f9f
    );
}

.metal-info {
  flex: 1;
}

.metal-name {
  font-family: var(--title-font);
  font-size: 28px;
  font-weight: normal;

  color: #111;
}

.metal-subtext {
  font-family: var(--body-font);
  font-size: 13px;

  color: #666;
}

.metal-price {
  min-width: 130px;

  text-align: right;

  font-family: var(--body-font);
  font-size: 24px;
  font-weight: bold;

  color: var(--gh-gold, #d6a313);
}

.metal-market-footer {
  margin-top: 18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  font-family: var(--body-font);
  font-size: 13px;

  color: #444;
}

.metal-disclaimer {
  max-width: 260px;
  text-align: right;

  color: #777;
}

/* Mobile / small screen fit */
@media (max-width: 768px) {
  .metal-window {
    width: 96vw;
    height: 78vh;

    left: 50%;
  }

  .metal-price-row {
    padding: 10px;
  }

  .metal-name {
    font-size: 24px;
  }

  .metal-price {
    font-size: 20px;
    min-width: 110px;
  }
}
/* =========================
   FIX GAP BETWEEN TOOLBAR + ADDRESS BAR
========================= */

.xp-toolbar,
.simple-info-toolbar,
.metal-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;

  height: 74px !important;
  min-height: 74px !important;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #eee9df 48%,
      #d8d2c5 100%
    ) !important;
}

/* Address bar sits directly under the toolbar */
.xp-address-bar,
.info-address-bar,
.metal-address-bar {
  position: sticky !important;
  top: 74px !important;
  z-index: 2999 !important;

  height: 34px !important;
  min-height: 34px !important;

  background:
    linear-gradient(
      to bottom,
      #f8f8f8,
      #dedbd3
    ) !important;

  margin-top: 0 !important;
}

/* Prevent content from bleeding through while scrolling */
.window-content {
  background: #ece9d8 !important;
}
/* =========================
   WINDOW TITLE ICONS
========================= */

.window-title-with-icon {
  display: flex;
  align-items: center;
  gap: 6px;

  min-width: 0;

  color: white;
  font-weight: bold;

  overflow: hidden;
  white-space: nowrap;
}

.window-title-with-icon img {
  width: 18px;
  height: 18px;

  object-fit: contain;

  flex: 0 0 18px;

  image-rendering: auto;

  filter:
    drop-shadow(1px 1px 1px rgba(0,0,0,0.35));
}

.window-title-with-icon span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* =========================
   AIM TITLE ICON FIX
========================= */

.aim-window .window-title-with-icon {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.aim-window .window-title-with-icon img,
#aimWindowIcon {
  display: block !important;

  width: 18px !important;
  height: 18px !important;

  object-fit: contain !important;

  flex: 0 0 18px !important;

  opacity: 1 !important;
  visibility: visible !important;
}
/* =========================
   STRICT ACTIVE / INACTIVE WINDOW FIX
========================= */

.window:not(.active-window) {
  filter: grayscale(0.15) brightness(0.82) saturate(0.65) !important;
}

.window.active-window {
  filter: grayscale(0) brightness(1.03) saturate(1.05) !important;
}

.window:not(.active-window) .title-bar {
  background:
    linear-gradient(
      to bottom,
      #9a9a9a 0%,
      #707070 45%,
      #3f3f3f 100%
    ) !important;

  color: #e9e9e9 !important;
}

.window.active-window .title-bar {
  background:
    linear-gradient(
      to bottom,
      #b46cff 0%,
      #7b20ff 12%,
      #5b0a8f 48%,
      #2a003d 100%
    ) !important;

  color: white !important;
}

/* =========================
   MOBILE CLEANUP SYSTEM
   GoldHearted XP Mobile Layout
========================= */

@media (max-width: 768px) {

  /* -------------------------
     DESKTOP / WALLPAPER
  ------------------------- */

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  #desktop {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    background-size: cover !important;
    background-position: center center !important;
  }

  /* keep desktop icons always visible on the left */
  .desktop-icon {
    width: 70px !important;
    min-height: 82px !important;

    margin-left: 4px !important;
    margin-bottom: 8px !important;

    z-index: 50 !important;
  }

  .desktop-icon img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .desktop-icon span {
    font-size: 11px !important;
    line-height: 1.1 !important;
    max-width: 66px !important;
    word-break: break-word !important;
  }

  /* -------------------------
     TASKBAR MOBILE
  ------------------------- */

  #taskbar {
    height: 44px !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;

    z-index: 999999 !important;
  }

  #start-button {
    width: 118px !important;
    min-width: 118px !important;
    height: 44px !important;

    flex: 0 0 118px !important;
  }

  #start-button img,
  #start-button .start-icon,
  #start-button .menu-icon {
    max-height: 38px !important;
  }

  #taskbar-apps {
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  #taskbar-apps::-webkit-scrollbar {
    display: none !important;
  }

  .taskbar-app {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;

    height: 32px !important;

    font-size: 10px !important;

    padding: 0 5px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    justify-content: center !important;
  }

  #clock {
    width: 58px !important;
    min-width: 58px !important;

    font-size: 10px !important;

    padding: 0 4px !important;
  }

  /* -------------------------
     START MENU MOBILE
  ------------------------- */

  #start-menu {
    left: 8px !important;
    bottom: 44px !important;

    width: min(280px, calc(100vw - 18px)) !important;
    height: min(440px, calc(100vh - 72px)) !important;

    overflow: hidden !important;

    z-index: 999998 !important;
  }

  #start-header {
    height: 58px !important;

    font-size: 18px !important;

    padding: 8px 12px !important;
  }

  .start-menu-body,
  #start-body {
    height: calc(100% - 104px) !important;

    overflow-y: auto !important;
  }

  .start-left,
  .start-right {
    width: 50% !important;
  }

  .start-item,
  .start-item-right {
    min-height: 38px !important;

    font-size: 12px !important;

    padding: 5px 6px !important;

    gap: 6px !important;
  }

  .start-item img,
  .start-item-right img,
  .start-placeholder-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  #start-footer {
    height: 46px !important;

    padding: 4px 6px !important;
  }

  .logoff-button,
  .shutdown-button,
  #logOffButton {
    font-size: 10px !important;

    gap: 4px !important;

    padding: 4px !important;
  }

  .logoff-icon,
  .shutdown-icon {
    width: 28px !important;
    height: 28px !important;
  }

  /* -------------------------
     ALL WINDOWS MOBILE
     Keep left icons visible
  ------------------------- */

  .window {
    left: 82px !important;
    top: 78px !important;

    width: calc(100vw - 90px) !important;
    height: calc(100vh - 128px) !important;

    transform: none !important;

    max-width: none !important;
    max-height: none !important;

    resize: none !important;

    overflow: hidden !important;
  }

  .window.maximized {
    left: 82px !important;
    top: 60px !important;

    width: calc(100vw - 88px) !important;
    height: calc(100vh - 108px) !important;

    transform: none !important;
  }

  .title-bar {
    height: 30px !important;
    min-height: 30px !important;

    font-size: 12px !important;

    padding: 0 5px !important;
  }

  .window-title-with-icon img {
    width: 15px !important;
    height: 15px !important;
  }

  .window-controls button {
    width: 26px !important;
    height: 24px !important;

    font-size: 13px !important;
  }

  .window-content,
  .info-window-content,
  .metal-window-content {
    height: calc(100% - 30px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* -------------------------
     TOOLBARS MOBILE
  ------------------------- */

  .xp-toolbar,
  .simple-info-toolbar,
  .metal-toolbar {
    height: 64px !important;
    min-height: 64px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    white-space: nowrap !important;

    padding: 4px 6px !important;
  }

  .xp-toolbar::-webkit-scrollbar,
  .simple-info-toolbar::-webkit-scrollbar,
  .metal-toolbar::-webkit-scrollbar {
    height: 5px !important;
  }

  .toolbar-item,
  .xp-nav-group {
    min-width: max-content !important;
  }

  .xp-image-btn,
  .toolbar-icon-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .xp-image-btn img,
  .toolbar-icon-btn img {
    width: 38px !important;
    height: 38px !important;
  }

  .toolbar-text {
    font-size: 11px !important;
  }

  .xp-address-bar,
  .info-address-bar,
  .metal-address-bar {
    top: 64px !important;

    height: 32px !important;
    min-height: 32px !important;

    font-size: 11px !important;
  }

  .address-label {
    font-size: 11px !important;
    width: 48px !important;
  }

  .address-input {
    font-size: 11px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* -------------------------
     PRODUCT PAGE MOBILE
  ------------------------- */

  .product-layout {
    display: flex !important;
    flex-direction: column !important;

    gap: 18px !important;

    padding: 14px !important;
  }

  .product-left,
  .product-right {
    width: 100% !important;
    max-width: none !important;
  }

  .product-image-frame,
  .main-product-image-frame {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 260px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #productImage,
  .product-main-image {
    max-width: 92% !important;
    max-height: 260px !important;

    object-fit: contain !important;
  }

  .product-thumbs,
  .thumbnail-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: 10px !important;
  }

  .thumb,
  .product-thumb,
  .gallery-open-thumb {
    width: 100% !important;
    height: 68px !important;

    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .thumb img,
  .product-thumb img,
  .gallery-open-thumb img {
    max-width: 100% !important;
    max-height: 62px !important;

    object-fit: contain !important;
  }

  #openGalleryBtn {
    width: 100% !important;
    height: 68px !important;

    font-size: 11px !important;
  }

  .donation-note {
    font-size: 12px !important;

    margin: 10px 0 !important;
  }

  #productTitle,
  .product-title {
    font-size: 34px !important;
    line-height: 1 !important;

    word-break: normal !important;
  }

  .product-price {
    font-size: 26px !important;
  }

  .product-description {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .product-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;
  }

  .option-group select {
    width: 100% !important;
    height: 38px !important;
  }

  .buy-button {
    width: 100% !important;
    height: 52px !important;

    margin-top: 14px !important;
  }

  /* More products and reviews stack cleanly */
  .more-products-and-reviews,
  .lower-product-section,
  .product-bottom-layout {
    display: flex !important;
    flex-direction: column !important;

    gap: 18px !important;
  }

  .more-products-section,
  .reviews-section,
  .customer-reviews {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
  }

  .more-products-grid,
  .related-products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;
  }

  .related-product-card,
  .more-product-card {
    min-height: 120px !important;
  }

  .reviews-section h2,
  .customer-reviews h2,
  .more-products-section h2 {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .review-card {
    width: 100% !important;

    margin-bottom: 12px !important;
  }

  /* -------------------------
     COLLECTION PAGE MOBILE
  ------------------------- */

  .collection-page,
  #ringsCollectionPage {
    padding: 18px !important;
  }

  .collection-product-grid,
  .collection-shortcuts,
  .collection-products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;

    align-items: start !important;
  }

  .collection-product-shortcut,
  .desktop-product-shortcut {
    width: 100% !important;
    min-height: 130px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px !important;
  }

  .collection-product-shortcut img,
  .desktop-product-shortcut img {
    width: 58px !important;
    height: 58px !important;

    object-fit: contain !important;
  }

  .collection-product-shortcut span,
  .desktop-product-shortcut span {
    font-size: 12px !important;
    text-align: center !important;
  }

  /* -------------------------
     INFO WINDOW MOBILE
  ------------------------- */

  .simple-page-content,
  .info-page {
    padding: 18px !important;
  }

  .simple-page-content h1,
  .info-page h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  .simple-page-content p,
  .info-page p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .all-products-grid,
  .info-desktop-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;

    gap: 18px !important;
  }

  /* -------------------------
     METAL WINDOW MOBILE
  ------------------------- */

  .metal-window {
    left: 82px !important;
    top: 78px !important;

    width: calc(100vw - 90px) !important;
    height: calc(100vh - 128px) !important;

    transform: none !important;
  }

  .metal-market-page {
    padding: 16px !important;
  }

  .metal-market-header h1 {
    font-size: 34px !important;
  }

  .metal-price-row {
    min-height: 78px !important;

    padding: 10px !important;

    gap: 10px !important;
  }

  .metal-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
  }

  .metal-name {
    font-size: 24px !important;
  }

  .metal-price {
    font-size: 18px !important;
    min-width: 95px !important;
  }

  .metal-market-footer {
    flex-direction: column !important;

    gap: 6px !important;
  }

  .metal-disclaimer {
    text-align: left !important;
    max-width: none !important;
  }

  /* -------------------------
     AIM MOBILE
  ------------------------- */

  .aim-window {
    left: 82px !important;
    top: 78px !important;

    width: calc(100vw - 90px) !important;
    height: calc(100vh - 128px) !important;

    transform: none !important;
  }

  .aim-signon-size {
    width: calc(100vw - 90px) !important;
    height: auto !important;
    min-height: 470px !important;
  }

  .aim-chat-size {
    width: calc(100vw - 90px) !important;
    height: calc(100vh - 128px) !important;
  }

  .aim-sign-logo,
  .aim-signon-logo,
  #aimSignOnPanel img {
    max-width: 100% !important;
  }

  .aim-avatar-strip {
    width: 58px !important;
    min-width: 58px !important;
  }

  .aim-avatar-box {
    width: 46px !important;
    height: 46px !important;
  }

  .aim-transcript {
    font-size: 15px !important;
  }

  .aim-message-input {
    height: 110px !important;
    min-height: 110px !important;
  }

  .aim-format-bar {
    overflow-x: auto !important;
  }

  .aim-bottom-action-bar {
    height: 60px !important;
    min-height: 60px !important;

    gap: 8px !important;
  }

  .aim-send-btn {
    width: 58px !important;
    height: 50px !important;
  }

  .aim-send-btn img {
    width: 56px !important;
    height: 46px !important;
  }
  /* =========================================================
   FINAL MOBILE FIXES
   PASTE THIS AT THE VERY BOTTOM OF style.css
========================================================= */

@media (max-width: 768px) {

  html,
  body {
    overflow: hidden !important;
  }

  #desktop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* ---------------------------------
     DESKTOP ICONS
  --------------------------------- */

  .desktop-icon {
    width: 78px !important;
    padding: 8px 4px !important;
    margin-bottom: 8px !important;
    z-index: 80 !important;
  }

  .desktop-icon img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    margin-bottom: 4px !important;
  }

  .desktop-icon span {
    font-size: 11px !important;
    line-height: 1.1 !important;
    display: block !important;
  }

  /* ---------------------------------
     TASKBAR
  --------------------------------- */

  #taskbar {
    height: 42px !important;
    z-index: 2147483000 !important;
  }

  #start-button {
    width: 92px !important;
    min-width: 92px !important;
    font-size: 12px !important;
  }

  #taskbar-apps {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .taskbar-app {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 28px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
  }

  #clock {
    width: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
    font-size: 10px !important;
  }

  /* ---------------------------------
     START MENU
  --------------------------------- */

  #start-menu {
    left: 0 !important;
    bottom: 42px !important;
    width: 280px !important;
    height: 315px !important;
    overflow: hidden !important;
  }

  #start-header {
    height: 48px !important;
    font-size: 20px !important;
    padding-left: 12px !important;
  }

  #start-content {
    height: calc(100% - 92px) !important;
    overflow: hidden !important;
  }

  .start-left,
  .start-right {
    padding-top: 6px !important;
  }

  .start-item,
  .start-item-right {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  .start-custom-icon,
  .start-custom-icon-img {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    font-size: 13px !important;
  }

  #start-footer {
    height: 44px !important;
    gap: 10px !important;
    padding-right: 10px !important;
  }

  .footer-action {
    gap: 5px !important;
    font-size: 10px !important;
  }

  .footer-icon {
    width: 28px !important;
    height: 28px !important;
  }

  /* ---------------------------------
     MOBILE WINDOWS
     Slight offset so names stay visible
  --------------------------------- */

  .window,
  .info-window,
  .aim-window,
  #metalWindow {
    width: calc(100vw - 86px) !important;
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    transform: none !important;
    resize: none !important;
  }

  #window {
    top: 52px !important;
    left: 78px !important;
  }

  #infoWindow {
    top: 64px !important;
    left: 88px !important;
  }

  #aimWindow {
    top: 76px !important;
    left: 98px !important;
  }

  #metalWindow {
    top: 88px !important;
    left: 108px !important;
  }

  .window-content,
  .aim-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .title-bar {
    height: 28px !important;
    font-size: 12px !important;
    padding: 0 5px !important;
  }

  .window-controls button {
    width: 24px !important;
    height: 22px !important;
  }

  /* ---------------------------------
     TOOLBAR / ADDRESS BAR
  --------------------------------- */

  .xp-toolbar {
    min-height: 54px !important;
    padding: 8px 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .xp-nav-group,
  .toolbar-item {
    flex: 0 0 auto !important;
  }

  .xp-image-btn {
    width: 42px !important;
    height: 42px !important;
  }

  .xp-image-btn img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
  }

  .toolbar-text {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .xp-address-bar {
    min-height: 30px !important;
  }

  .address-label {
    width: 54px !important;
    font-size: 11px !important;
  }

  .address-input {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ---------------------------------
     COLLECTION WINDOW
  --------------------------------- */

  .collection-page {
    padding: 12px !important;
  }

  .collection-desktop {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .collection-product-shortcut {
    width: 100% !important;
    min-height: 120px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .collection-product-shortcut img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  .collection-product-shortcut span {
    font-size: 11px !important;
    text-align: center !important;
  }

  /* ---------------------------------
     PRODUCT PAGE
  --------------------------------- */

  .product-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .product-gallery,
  .product-info {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .main-product-image {
    width: 100% !important;
    max-width: none !important;
    min-height: 210px !important;
    aspect-ratio: auto !important;
  }

  .main-product-image img {
    width: 100% !important;
    height: 210px !important;
    object-fit: contain !important;
  }

  .thumbnail-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    align-items: stretch !important;
  }

  .thumb {
    width: 100% !important;
    height: 58px !important;
  }

  .gallery-open-btn {
    width: 100% !important;
    height: 58px !important;
    font-size: 11px !important;
    padding: 0 !important;
  }

  .donation-note {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .product-info {
    padding-top: 0 !important;
  }

  .product-info h1,
  #productTitle {
    font-size: 22px !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
  }

  .product-price {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .product-description {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }

  .product-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .xp-select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .buy-button {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
  }

  /* ---------------------------------
     MORE PRODUCTS + REVIEWS
  --------------------------------- */

  .related-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 14px 18px !important;
  }

  .more-products-section,
  .reviews-section {
    width: 100% !important;
  }

  .more-products-section h2,
  .reviews-section h2 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
  }

  .related-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .related-card {
    min-height: 92px !important;
    aspect-ratio: auto !important;
  }

  .review {
    margin-bottom: 10px !important;
  }

  .review-name,
  .review-stars,
  .review-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* ---------------------------------
     AIM SIGN ON FIX
  --------------------------------- */

  .aim-signon-size {
    height: auto !important;
    min-height: 430px !important;
  }

  #aimSignOnPanel {
    position: relative !important;
    padding-bottom: 18px !important;
  }

  .aim-logo-box img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .aim-input {
    width: 100% !important;
  }

  .aim-signon-image-btn {
    position: static !important;
    width: 90px !important;
    height: auto !important;
    margin: 8px 0 0 auto !important;
    display: block !important;
  }

  .aim-signon-image-btn img {
    width: 100% !important;
    height: auto !important;
  }

  .aim-version {
    position: static !important;
    margin-top: 8px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}
/* =========================================================
   FINAL MOBILE PATCH 2
   Fixes merged product/collection/gallery views,
   toolbar gap, 3D viewer, window alignment, and Start text
========================================================= */

@media (max-width: 768px) {

  /* ---------------------------------
     MOST IMPORTANT FIX:
     hidden must always win on mobile
  --------------------------------- */

  .hidden,
  .product-layout.hidden,
  .related-products.hidden,
  .collection-page.hidden,
  #ringsCollectionPage.hidden,
  #photoGallery.hidden,
  .viewer-3d.hidden,
  #viewer3d.hidden,
  .xp-photo-gallery.hidden,
  .info-page.hidden,
  .xp-info-page.hidden {
    display: none !important;
  }

  /* ---------------------------------
     REMOVE GAP BETWEEN TOOLBAR + ADDRESS BAR
  --------------------------------- */

  .xp-toolbar,
  .simple-info-toolbar,
  .metal-toolbar {
    position: sticky !important;
    top: 0 !important;

    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 6px 8px !important;

    z-index: 5000 !important;

    flex-wrap: nowrap !important;

    background:
      linear-gradient(
        to bottom,
        #ffffff 0%,
        #eee9df 48%,
        #d8d2c5 100%
      ) !important;

    border-bottom: 0 !important;
  }

  .xp-address-bar,
  .info-address-bar,
  .metal-address-bar {
    position: sticky !important;

    top: 58px !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;

    z-index: 4999 !important;

    background:
      linear-gradient(
        to bottom,
        #f8f8f8,
        #dedbd3
      ) !important;

    border-top: 0 !important;
    border-bottom: 1px solid #b9b9b9 !important;
  }

  .window-content {
    gap: 0 !important;
  }

  /* ---------------------------------
     MAKE WINDOWS FIT BETTER ON MOBILE
     Keeps icons visible, but stops windows going too far right
  --------------------------------- */

  .window,
  .info-window,
  .aim-window,
  #metalWindow {
    left: 76px !important;

    width: calc(100vw - 82px) !important;

    height: calc(100vh - 92px) !important;
    max-height: calc(100vh - 92px) !important;

    transform: none !important;

    resize: none !important;
  }

  #window {
    top: 52px !important;
  }

  #infoWindow {
    top: 62px !important;
  }

  #aimWindow {
    top: 72px !important;
  }

  #metalWindow {
    top: 82px !important;
  }

  .window.maximized,
  .info-window.maximized,
  .aim-window.maximized,
  #metalWindow.maximized {
    left: 76px !important;
    top: 48px !important;

    width: calc(100vw - 82px) !important;
    height: calc(100vh - 90px) !important;

    transform: none !important;
  }

  /* ---------------------------------
     HIDE TINY "START" TEXT
     Keeps your custom start/menu graphic visible
  --------------------------------- */

  #start-button {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;

    overflow: hidden !important;
  }

  #start-button img,
  #start-button svg,
  #start-button::before,
  #start-button::after {
    text-indent: 0 !important;
    color: initial !important;
  }

  /* ---------------------------------
     PRODUCT VIEW ONLY
  --------------------------------- */

  .product-layout:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;

    padding: 12px !important;
    gap: 14px !important;
  }

  .related-products:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;

    padding: 0 12px 18px !important;
    gap: 16px !important;
  }

  .product-gallery,
  .product-info {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .main-product-image {
    width: 100% !important;
    max-width: none !important;

    height: 230px !important;
    min-height: 230px !important;

    aspect-ratio: auto !important;
  }

  .main-product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

  .thumbnail-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin-top: 10px !important;
  }

  .thumb,
  .gallery-open-btn {
    width: 100% !important;
    height: 58px !important;
    min-width: 0 !important;
  }

  .gallery-open-btn {
    font-size: 10px !important;
    padding: 0 4px !important;
  }

  #productTitle {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .product-price {
    font-size: 20px !important;
  }

  .product-description {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .product-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 10px !important;
  }

  .xp-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .buy-button {
    width: 100% !important;
  }

  /* ---------------------------------
     MORE PRODUCTS + REVIEWS ALIGNMENT
  --------------------------------- */

  .more-products-section,
  .reviews-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .related-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }

  .related-card {
    min-height: 92px !important;
    aspect-ratio: auto !important;
  }

  .reviews-section {
    background: #f7f4ea !important;
    border: 1px solid #c7c1b8 !important;
    padding: 12px !important;
  }

  .reviews-section h2,
  .more-products-section h2 {
    font-size: 22px !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
  }

  .review {
    margin-bottom: 12px !important;
  }

  .review-name,
  .review-stars,
  .review-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* ---------------------------------
     COLLECTION PAGE ONLY
  --------------------------------- */

  #ringsCollectionPage:not(.hidden),
  .collection-page:not(.hidden) {
    display: block !important;
    padding: 14px !important;
    background: #ffffff !important;
    min-height: 100% !important;
  }

  .collection-desktop {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    align-items: start !important;
  }

  .collection-product-shortcut {
    width: 100% !important;
    min-height: 120px !important;

    padding: 10px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 8px !important;
  }

  .collection-product-shortcut img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  .collection-product-shortcut span {
    font-size: 11px !important;
    text-align: center !important;
  }

  .desktop-product-placeholder {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  /* ---------------------------------
     PHOTO GALLERY ONLY
  --------------------------------- */

  #photoGallery:not(.hidden),
  .xp-photo-gallery:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;

    min-height: 100% !important;
  }

  .gallery-main-view {
    min-height: 260px !important;
    padding: 14px !important;
  }

  #galleryMainImage,
  .gallery-main-view img {
    max-width: 100% !important;
    max-height: 250px !important;
    object-fit: contain !important;
  }

  .gallery-photo-controls {
    padding: 12px !important;
    gap: 10px !important;
  }

  .gallery-thumb-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    padding: 14px !important;
  }

  .gallery-thumb {
    width: 100% !important;
  }

  .gallery-thumb img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
  }

  .gallery-thumb span {
    font-size: 13px !important;
  }

  /* ---------------------------------
     3D VIEWER MOBILE FIX
  --------------------------------- */

  .viewer-mode #viewer3d,
  #viewer3d:not(.hidden) {
    display: flex !important;
  }

  .viewer-mode .product-layout,
  .viewer-mode .related-products,
  .viewer-mode #ringsCollectionPage,
  .viewer-mode #photoGallery {
    display: none !important;
  }

  .viewer-3d {
    width: 100% !important;
    height: calc(100vh - 180px) !important;

    min-height: 380px !important;

    background: #111 !important;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .viewer-3d model-viewer {
    width: 100% !important;
    height: 100% !important;
  }

  .viewer-loading {
    top: 88px !important;
    height: calc(100% - 88px) !important;
  }

  /* ---------------------------------
     AIM SIGN ON ALIGNMENT
  --------------------------------- */

  .aim-signon-size {
    height: auto !important;
    min-height: 430px !important;
  }

  #aimSignOnPanel {
    padding: 8px 8px 18px !important;
  }

  .aim-signon-image-btn {
    position: static !important;

    width: 92px !important;
    height: auto !important;

    margin: 10px 0 0 auto !important;

    display: block !important;
  }

  .aim-signon-image-btn img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .aim-version {
    position: static !important;

    margin-top: 8px !important;

    display: block !important;

    width: 100% !important;

    text-align: center !important;
  }
}
/* =========================================================
   FINAL MOBILE MESSENGER FIX
   Keeps Messenger inside screen + makes chat slightly smaller
========================================================= */

@media (max-width: 768px) {

  /* Main Messenger window mobile position */
  #aimWindow,
  .aim-window {
    left: 96px !important;
    top: 70px !important;

    width: calc(100vw - 108px) !important;
    max-width: 330px !important;

    height: calc(100vh - 124px) !important;
    max-height: calc(100vh - 124px) !important;

    transform: none !important;

    overflow: hidden !important;

    resize: none !important;
  }

  /* Sign-on mode */
  #aimWindow.aim-signon-size,
  .aim-window.aim-signon-size {
    left: 96px !important;
    top: 72px !important;

    width: calc(100vw - 108px) !important;
    max-width: 330px !important;

    height: 500px !important;
    max-height: calc(100vh - 124px) !important;

    transform: none !important;
  }

  /* Chat mode - slightly smaller and cleaner */
  #aimWindow.aim-chat-size,
  .aim-window.aim-chat-size {
    left: 96px !important;
    top: 68px !important;

    width: calc(100vw - 112px) !important;
    max-width: 324px !important;

    height: calc(100vh - 132px) !important;
    max-height: calc(100vh - 132px) !important;

    transform: none !important;
  }

  /* Make sure title bar controls never get clipped */
  #aimWindow .title-bar,
  .aim-window .title-bar {
    width: 100% !important;

    overflow: hidden !important;

    padding-right: 4px !important;
  }

  #aimWindow .window-title-with-icon,
  .aim-window .window-title-with-icon {
    min-width: 0 !important;
    max-width: calc(100% - 88px) !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #aimWindow .window-controls,
  .aim-window .window-controls {
    flex: 0 0 auto !important;

    display: flex !important;
    gap: 3px !important;

    margin-left: auto !important;
  }

  #aimWindow .window-controls button,
  .aim-window .window-controls button {
    width: 24px !important;
    height: 22px !important;

    flex: 0 0 24px !important;

    font-size: 12px !important;
  }

  /* Sign-on content spacing */
  #aimSignOnPanel {
    padding: 8px 8px 16px !important;
  }

  .aim-logo-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .aim-logo-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;
  }

  .aim-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .aim-signon-image-btn {
    position: static !important;

    width: 86px !important;
    height: auto !important;

    margin: 8px 4px 0 auto !important;

    display: block !important;
  }

  .aim-signon-image-btn img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .aim-version {
    position: static !important;

    margin-top: 8px !important;

    text-align: center !important;

    width: 100% !important;
  }

  /* Chat content fit */
  .aim-content {
    height: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;

    overflow: hidden !important;
  }

  #aimChatPanel {
    height: 100% !important;
    max-height: 100% !important;

    overflow: hidden !important;
  }

  .aim-im-layout {
    height: calc(100% - 62px) !important;
    max-height: calc(100% - 62px) !important;

    overflow: hidden !important;
  }

  .aim-avatar-strip {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  .aim-transcript {
    font-size: 13px !important;
    line-height: 1.35 !important;

    overflow-y: auto !important;
  }

  .aim-format-bar {
    height: 30px !important;
    min-height: 30px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .aim-message-input,
  .aim-message-editor {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  .aim-bottom-action-bar {
    height: 54px !important;
    min-height: 54px !important;

    padding: 4px 6px !important;
  }

  .aim-send-btn {
    width: 54px !important;
    height: 46px !important;
  }

  .aim-send-btn img {
    width: 52px !important;
    height: 44px !important;

    object-fit: contain !important;
  }
}/* =========================================================
   FINAL MOBILE ICON + FONT SIZE POLISH
   Makes collection icons even + XP font bigger on mobile
========================================================= */

@media (max-width: 768px) {

  /* ---------------------------------
     BIGGER XP FONT ON MOBILE
  --------------------------------- */

  body,
  button,
  input,
  select,
  textarea,
  .toolbar-text,
  .address-label,
  .address-input,
  .desktop-icon span,
  .taskbar-app,
  #clock,
  .start-item,
  .start-item-right,
  .product-description,
  .donation-note,
  .option-group label,
  .xp-select,
  .review-name,
  .review-stars,
  .review-text,
  .metal-subtext,
  .metal-market-footer,
  .aim-label,
  .aim-input,
  .aim-check-row,
  .aim-format-bar,
  .aim-message-editor {
    font-size: 13px !important;
  }

  .toolbar-text {
    font-size: 12px !important;
  }

  .address-input,
  .address-label {
    font-size: 11.5px !important;
  }

  .desktop-icon span {
    font-size: 12px !important;
  }

  .taskbar-app {
    font-size: 10px !important;
  }

  #clock {
    font-size: 10.5px !important;
  }

  .start-item,
  .start-item-right {
    font-size: 13px !important;
  }

  .product-description {
    font-size: 14px !important;
  }

  .donation-note {
    font-size: 13px !important;
  }

  .review-name,
  .review-stars,
  .review-text {
    font-size: 13px !important;
  }

  .aim-transcript {
    font-size: 14px !important;
  }

  /* ---------------------------------
     COLLECTION PRODUCT ICONS
     Same size for image + emoji icons
  --------------------------------- */

  .collection-desktop {
    align-items: start !important;
  }

  .collection-product-shortcut {
    min-height: 126px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 10px 6px !important;

    text-align: center !important;
  }

  .collection-product-shortcut img,
  .collection-product-shortcut .desktop-product-placeholder {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    max-width: 58px !important;
    max-height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    object-fit: contain !important;

    line-height: 58px !important;

    margin: 0 auto !important;
  }

  .collection-product-shortcut .desktop-product-placeholder {
    font-size: 42px !important;
    line-height: 58px !important;

    text-align: center !important;
  }

  .collection-product-shortcut span:not(.desktop-product-placeholder) {
    font-size: 12px !important;
    line-height: 1.15 !important;

    min-height: 28px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    text-align: center !important;
  }

  /* ---------------------------------
     ALL PRODUCTS INFO WINDOW ICONS TOO
     Keeps same desktop-shortcut look
  --------------------------------- */

  .desktop-product-shortcut {
    min-height: 126px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 10px 6px !important;
  }

  .desktop-product-shortcut img,
  .desktop-product-shortcut .product-template-placeholder {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    max-width: 58px !important;
    max-height: 58px !important;

    object-fit: contain !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
  }

  .desktop-product-shortcut .product-template-placeholder {
    font-size: 42px !important;
    line-height: 58px !important;
  }

  .desktop-product-shortcut span:not(.product-template-placeholder) {
    font-size: 40px !important;
    line-height: 1.15 !important;

    text-align: center !important;
  }
}
/* =========================================================
   MOBILE GLOBAL XP FONT SIZE BOOST
   Change only these numbers to adjust all mobile XP text
========================================================= */

@media (max-width: 768px) {

  :root {
    --mobile-xp-font: 20px;
    --mobile-xp-small: 18px;
    --mobile-xp-medium: 18px;
    --mobile-xp-large: 21px;
  }

  body,
  button,
  input,
  select,
  textarea,
  .window,
  .window-content,
  .toolbar-text,
  .address-label,
  .address-input,
  .desktop-icon span,
  .taskbar-app,
  #clock,
  .start-item,
  .start-item-right,
  .footer-action,
  .product-description,
  .donation-note,
  .option-group label,
  .xp-select,
  .review-name,
  .review-stars,
  .review-text,
  .simple-page-content p,
  .info-page p,
  .metal-subtext,
  .metal-market-footer,
  .aim-label,
  .aim-input,
  .aim-check-row,
  .aim-format-bar,
  .aim-message-editor,
  .aim-bottom-action-bar {
    font-size: var(--mobile-xp-font) !important;
    font-family: var(--body-font) !important;
  }

  /* Smaller UI areas */
  .toolbar-text,
  .address-label,
  .address-input,
  .desktop-icon span,
  .taskbar-app,
  #clock {
    font-size: var(--mobile-xp-small) !important;
  }

  /* Medium readable areas */
  .start-item,
  .start-item-right,
  .product-description,
  .donation-note,
  .review-text,
  .aim-input,
  .aim-check-row {
    font-size: var(--mobile-xp-medium) !important;
  }

  /* Window title text */
  .title-bar,
  .window-title-with-icon,
  .window-title-with-icon span {
    font-size: var(--mobile-xp-medium) !important;
  }

  /* Buttons */
  .buy-button,
  .xp-button,
  .gallery-open-btn {
    font-size: var(--mobile-xp-medium) !important;
  }

  /* Keep custom title font separate */
  #productTitle,
  .product-title,
  .metal-market-header h1,
  .more-products-section h2,
  .reviews-section h2,
  .simple-page-content h1,
  .info-page h1 {
    font-family: var(--title-font) !important;
  }
}
/* =========================================================
   MOBILE MESSENGER CHAT HEIGHT FIX
   Makes AIM chat window shorter on mobile
========================================================= */

@media (max-width: 768px) {

  /* Chat window size after signing on */
  #aimWindow.aim-chat-size,
  .aim-window.aim-chat-size {
    height: 560px !important;
    max-height: calc(100vh - 130px) !important;

    top: 70px !important;

    overflow: hidden !important;
  }

  /* Keeps content inside the shorter window */
  #aimWindow.aim-chat-size .aim-content,
  .aim-window.aim-chat-size .aim-content {
    height: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;

    overflow: hidden !important;
  }

  #aimWindow.aim-chat-size #aimChatPanel,
  .aim-window.aim-chat-size #aimChatPanel {
    height: 100% !important;
    max-height: 100% !important;

    overflow: hidden !important;
  }

  /* Main chat area */
  #aimWindow.aim-chat-size .aim-im-layout,
  .aim-window.aim-chat-size .aim-im-layout {
    height: calc(100% - 84px) !important;
    max-height: calc(100% - 84px) !important;

    overflow: hidden !important;
  }

  /* Message history gets shorter */
  #aimWindow.aim-chat-size .aim-transcript,
  .aim-window.aim-chat-size .aim-transcript {
    height: 210px !important;
    max-height: 210px !important;

    overflow-y: auto !important;
  }

  /* Text typing box smaller */
  #aimWindow.aim-chat-size .aim-message-input,
  #aimWindow.aim-chat-size .aim-message-editor,
  .aim-window.aim-chat-size .aim-message-input,
  .aim-window.aim-chat-size .aim-message-editor {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }

  /* Bottom video/talk/send bar */
  #aimWindow.aim-chat-size .aim-bottom-action-bar,
  .aim-window.aim-chat-size .aim-bottom-action-bar {
    height: 52px !important;
    min-height: 52px !important;
  }

  /* Avatar strip follows shorter window */
  #aimWindow.aim-chat-size .aim-avatar-strip,
  .aim-window.aim-chat-size .aim-avatar-strip {
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* =========================================================
   MOBILE MAXIMIZE FIX
   Lets all windows go full screen on mobile without breaking
   the normal offset mobile layout
========================================================= */

@media (max-width: 768px) {

  /* All maximized windows */
  .window.maximized,
  #window.maximized,
  #infoWindow.maximized,
  #aimWindow.maximized,
  #metalWindow.maximized {
    position: fixed !important;

    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: calc(100vh - 42px) !important;
    max-height: calc(100vh - 42px) !important;

    transform: none !important;

    resize: none !important;

    z-index: 2147482000 !important;

    border-radius: 0 !important;

    overflow: hidden !important;
  }

  /* Messenger has extra mobile sizing rules, so force it too */
  #aimWindow.aim-signon-size.maximized,
  #aimWindow.aim-chat-size.maximized,
  .aim-window.aim-signon-size.maximized,
  .aim-window.aim-chat-size.maximized {
    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: calc(100vh - 42px) !important;
    max-height: calc(100vh - 42px) !important;

    transform: none !important;

    overflow: hidden !important;
  }

  /* Metal window force */
  #metalWindow.maximized,
  .metal-window.maximized {
    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: calc(100vh - 42px) !important;
    max-height: calc(100vh - 42px) !important;
  }

  /* Window content fills maximized space */
  .window.maximized .window-content,
  #window.maximized .window-content,
  #infoWindow.maximized .window-content,
  #metalWindow.maximized .window-content {
    height: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Messenger content fills maximized space */
  #aimWindow.maximized .aim-content,
  .aim-window.maximized .aim-content {
    height: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;

    overflow: hidden !important;
  }

  #aimWindow.maximized #aimChatPanel,
  .aim-window.maximized #aimChatPanel {
    height: 100% !important;
    max-height: 100% !important;
  }

  #aimWindow.maximized .aim-im-layout,
  .aim-window.maximized .aim-im-layout {
    height: calc(100% - 84px) !important;
    max-height: calc(100% - 84px) !important;
  }

  #aimWindow.maximized .aim-transcript,
  .aim-window.maximized .aim-transcript {
    height: auto !important;
    max-height: none !important;

    flex: 1 1 auto !important;

    overflow-y: auto !important;
  }

  /* Keep taskbar above wallpaper but below maximized windows */
  #taskbar {
    z-index: 2147483000 !important;
  }
}

/* Mobile taskbar icons */
@media (max-width: 768px) {

  .taskbar-app {
    gap: 4px !important;
  }

  .taskbar-app::before {
    width: 14px !important;
    height: 14px !important;

    flex: 0 0 14px !important;
  }
}

/* =========================================================
   ALL PRODUCTS PAGE - PRODUCTS + COLLECTIONS
========================================================= */

.all-products-page {
  padding: 28px 32px 40px;

  background: #ffffff;

  min-height: 100%;
}

.all-products-section {
  margin-bottom: 34px;
}

.all-products-section-title {
  font-family: var(--title-font) !important;

  font-size: 42px;

  line-height: 1;

  margin-bottom: 16px;

  color: #111;
}

.all-products-row {
  display: flex;

  align-items: flex-start;

  gap: 34px;

  min-height: 180px;

  padding: 22px 24px;

  background: #ffffff;

  border: 1px solid #d9d9d9;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
}

.all-products-row::-webkit-scrollbar {
  height: 10px;
}

.all-products-row::-webkit-scrollbar-track {
  background: #ece9d8;
}

.all-products-row::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to bottom,
      #8f35d6,
      #5b0a8f
    );

  border-radius: 8px;
}

.all-products-shortcut {
  flex: 0 0 120px;

  width: 120px;
  min-height: 120px;

  border: none;

  background: transparent;

  cursor: pointer;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: flex-start;

  gap: 8px;

  text-align: center;

  font-family: var(--body-font);
}

.all-products-shortcut:hover {
  background: rgba(91,10,143,0.08);

  outline: 1px dotted #5b0a8f;
}

.all-products-shortcut img,
.all-products-shortcut .desktop-product-placeholder {
  width: 64px;
  height: 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  object-fit: contain;

  font-size: 46px;

  line-height: 64px;
}

.all-products-shortcut span:last-child {
  font-size: 14px;

  line-height: 1.15;

  color: #111;
}

/* =========================================================
   MOBILE ALL PRODUCTS SWIPE ROWS
========================================================= */

@media (max-width: 768px) {

  .all-products-page {
    padding: 16px 12px 28px !important;
  }

  .all-products-section {
    margin-bottom: 28px !important;
  }

  .all-products-section-title {
    font-size: 34px !important;

    margin-bottom: 10px !important;
  }

  .all-products-row {
    display: flex !important;

    gap: 14px !important;

    min-height: 260px !important;

    padding: 18px 14px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;

    -webkit-overflow-scrolling: touch !important;
  }

  .all-products-shortcut {
    flex: 0 0 78% !important;

    width: 78% !important;
    min-width: 78% !important;

    min-height: 220px !important;

    scroll-snap-align: center !important;

    justify-content: center !important;

    gap: 18px !important;

    border: 1px solid rgba(91,10,143,0.18) !important;

    background: rgba(255,255,255,0.82) !important;
  }

  .all-products-shortcut img,
  .all-products-shortcut .desktop-product-placeholder {
    width: 74px !important;
    height: 74px !important;

    font-size: 52px !important;

    line-height: 74px !important;
  }

  .all-products-shortcut span:last-child {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
}

/* =========================================================
   MOBILE INFO WINDOW BLEED FIX
   Prevents hidden info pages / inactive windows from bleeding
========================================================= */

@media (max-width: 768px) {

  /* Hidden info pages must always stay hidden */
  .info-page.hidden,
  #infoCustomOrderPage.hidden,
  #infoAboutPage.hidden,
  #infoFaqPage.hidden,
  #infoAllProductsPage.hidden,
  #infoEmailSignupPage.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Only the active info page can show */
  .info-page.active-info-page {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Info window content should be clean and solid */
  #infoWindow,
  #infoWindow .window-content,
  #infoWindow .info-window-content {
    background: #ffffff !important;
    overflow-x: hidden !important;
  }

  #infoWindow .info-page {
    width: 100% !important;
    min-height: 100% !important;
    background: #ffffff !important;
  }

  /* Keep active title bar bright */
  .window.active-window .title-bar {
    filter: none !important;
    opacity: 1 !important;
  }
}
/* =========================================================
   FINAL WINDOW + INFO PAGE FIX
   Keeps windows stackable, fixes info-page bleed
========================================================= */

/* Never let taskbar/window icon display rules override hidden */
.hidden,
.window.hidden,
.taskbar-app.hidden,
.info-page.hidden {
  display: none !important;
}

/* Minimized windows stay gone */
.window.minimized {
  display: none !important;
}

/* All open windows should stay visible.
   Do NOT hide inactive windows with opacity/visibility. */
.window:not(.hidden):not(.minimized) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Active window visual */
.window.active-window {
  filter: brightness(1.02) saturate(1.03) !important;

  box-shadow:
    0 0 0 1px #6ea7ff,
    0 0 0 2px rgba(120, 80, 255, 0.28),
    0 0 12px rgba(120, 80, 255, 0.28),
    4px 4px 14px rgba(0,0,0,0.45) !important;
}

/* Inactive windows visible, just slightly muted */
.window:not(.active-window):not(.hidden):not(.minimized) {
  filter: brightness(0.94) saturate(0.9) !important;
}

/* Info window: only active info page may show */
#infoWindow .info-page {
  display: none !important;
}

#infoWindow .info-page.active-info-page {
  display: block !important;
}

/* Info page hidden always wins */
#infoWindow .info-page.hidden {
  display: none !important;
}

/* Info content stays solid while scrolling */
#infoWindow,
#infoWindow .window-content,
#infoWindow .info-window-content {
  background: #ffffff !important;
  overflow-x: hidden !important;
}

#infoWindow .info-page.active-info-page {
  width: 100% !important;
  min-height: 100% !important;
  background: #ffffff !important;
}

/* Mobile: keep same stacking behavior, do not hide inactive windows */
@media (max-width: 768px) {

  .window:not(.hidden):not(.minimized) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #infoWindow .info-page {
    display: none !important;
  }

  #infoWindow .info-page.active-info-page {
    display: block !important;
  }

  #infoWindow .info-page.hidden {
    display: none !important;
  }
}

/* =========================================================
   TRUE FINAL AIM SIGN ON MAXIMIZED IMAGE FIX
   Stops the sign-on logo from stretching on desktop maximize
========================================================= */

/* Keep the maximized Messenger window full screen */
#aimWindow.maximized.aim-signon-size {
  width: 100vw !important;
  height: calc(100vh - 40px) !important;

  top: 0 !important;
  left: 0 !important;

  transform: none !important;
}

/* Keep the sign-on content from stretching edge to edge */
#aimWindow.maximized.aim-signon-size .aim-content {
  display: flex !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;

  padding: 8px !important;

  background: #ece9d8 !important;

  overflow: hidden !important;
}

/* Keep the whole sign-on panel AIM-sized when maximized */
#aimWindow.maximized.aim-signon-size #aimSignOnPanel {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;

  height: 430px !important;
  min-height: 430px !important;
  max-height: 430px !important;

  flex: 0 0 360px !important;

  display: flex !important;
  flex-direction: column !important;

  background: #ece9d8 !important;
}

/* Logo container stays compact */
#aimWindow.maximized.aim-signon-size .aim-logo-box {
  width: 100% !important;

  height: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  background: #4266f5 !important;

  border: 1px solid #7f9db9 !important;
}

/* THIS is the main fix:
   width:auto prevents the image from stretching across the full window */
#aimWindow.maximized.aim-signon-size .aim-logo-box img {
  width: auto !important;
  max-width: 100% !important;

  height: 100% !important;
  max-height: 100% !important;

  display: block !important;

  object-fit: contain !important;
  object-position: center center !important;
}

/* Normal non-maximized sign-on image */
#aimWindow.aim-signon-size:not(.maximized) .aim-logo-box img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;
}

}

/* =========================================================
   CLEAN FINAL WINDOW ACTIVE STATE + ALL PRODUCTS POLISH
   Keeps the same look, but removes filter-transition blinking.
========================================================= */

.window {
  transition: box-shadow 0.08s ease !important;
}

.window:not(.active-window):not(.hidden):not(.minimized) {
  filter: brightness(0.94) saturate(0.9) !important;
}

.window.active-window:not(.hidden):not(.minimized) {
  filter: brightness(1.02) saturate(1.03) !important;
}

.all-products-page {
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 58%,
      #f7f4ea 100%
    ) !important;
}

.all-products-section {
  position: relative;
}

.all-products-section + .all-products-section {
  margin-top: 26px !important;
  padding-top: 34px !important;
  border-top: 1px solid rgba(91,10,143,0.22) !important;
}

.all-products-section + .all-products-section::before {
  content: "";

  position: absolute;

  top: -2px;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      to right,
      rgba(91,10,143,0),
      rgba(91,10,143,0.85),
      rgba(214,163,19,0.9),
      rgba(91,10,143,0.85),
      rgba(91,10,143,0)
    );
}

.all-products-section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 0 14px 6px 0 !important;

  border-bottom: 2px solid rgba(214,163,19,0.7) !important;
}

.all-products-row {
  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 70%,
      #f4f0e4 100%
    ) !important;

  border: 1px solid rgba(91,10,143,0.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 6px rgba(0,0,0,0.06) !important;
}

.all-products-shortcut {
  border-radius: 2px !important;
}

.all-products-shortcut:hover {
  background: rgba(91,10,143,0.07) !important;
  outline: 1px dotted #5b0a8f !important;
}

@media (max-width: 768px) {

  .all-products-section + .all-products-section {
    margin-top: 18px !important;
    padding-top: 26px !important;
  }

  .all-products-section-title {
    margin-left: 2px !important;
  }

}

/* =========================================================
   SHOPIFY EDITABLE INFO WINDOW CONTENT
   Keeps XP look while allowing theme-editor text/images/app embeds.
========================================================= */

.info-richtext {
  font-family: var(--body-font) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

.info-richtext p,
.info-richtext ul,
.info-richtext ol {
  margin-bottom: 16px !important;
}

.info-richtext ul,
.info-richtext ol {
  padding-left: 22px !important;
}

.info-page-media {
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid #cfcfcf !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 4px rgba(0,0,0,0.08) !important;
}

.info-page-media img {
  display: block !important;
  width: 100% !important;
  max-height: 360px !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

.info-custom-liquid {
  margin-top: 18px !important;
}

.info-custom-liquid iframe,
.info-custom-liquid video,
.info-custom-liquid img {
  max-width: 100% !important;
}

.shopify-form-box .info-richtext {
  margin-bottom: 16px !important;
}

@media (max-width: 768px) {
  .info-richtext {
    font-size: 16px !important;
  }

  .info-page-media img {
    max-height: 280px !important;
  }
}

/* =========================================================
   FINAL FIX: Keep product thumbnail/gallery images boxed
   Stops Shopify gallery images from overflowing into the
   product page, donation area, More Products, or menu.
========================================================= */
.thumbnail-row {
  align-items: center !important;
  overflow: visible !important;
}

.product-gallery .thumb {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex: 0 0 70px !important;
  box-sizing: border-box !important;
}

.product-gallery .thumb img,
.thumbnail-row .thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  position: static !important;
  transform: none !important;
}

.product-gallery,
.product-layout {
  overflow: visible !important;
}

.main-product-image {
  overflow: hidden !important;
}

.main-product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .product-gallery .thumb,
  .thumbnail-row .thumb {
    width: 100% !important;
    height: 58px !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    max-height: 58px !important;
    flex: none !important;
  }

  .product-gallery .thumb img,
  .thumbnail-row .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* =========================================================
   SHOPIFY REAL ADD TO CART STATUS
========================================================= */
.buy-button[disabled] {
  opacity: 0.75 !important;
  cursor: wait !important;
}

.xp-cart-status {
  margin-top: 8px !important;
  min-height: 18px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #2f2f2f !important;
}

.xp-cart-status.is-error {
  color: #9b0000 !important;
  font-weight: bold !important;
}


/* =========================================================
   CART ICON + LIVE CART BADGES
========================================================= */
.cart-desktop-image-wrap,
.gh-cart-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.desktop-cart-icon {
  cursor: pointer !important;
}

.desktop-cart-icon.has-cart-items img,
.gh-cart-button.has-cart-items {
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.95)) brightness(1.08) !important;
}

.gh-cart-button.has-cart-items {
  background: linear-gradient(to bottom, #fff1a8, #d6a313) !important;
  border-color: #7a003f !important;
  color: #21002f !important;
}

.gh-cart-badge {
  position: absolute !important;
  top: -7px !important;
  right: -9px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #e00000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.7) !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: bold !important;
  text-align: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.gh-cart-button .gh-cart-badge {
  top: -9px !important;
  right: -10px !important;
}

.gh-cart-badge.hidden {
  display: none !important;
}

/* =========================================================
   XP CART PAGE
========================================================= */
.cart-page-desktop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background-image: var(--gh-cart-wallpaper, var(--gh-desktop-wallpaper, url("wallpaper.jpg.png"))) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

.xp-cart-window {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(980px, 92vw) !important;
  height: min(660px, 82vh) !important;
  background: #ece9d8 !important;
  border: 1px solid #5b0a8f !important;
  box-shadow: 0 0 0 1px #b67cff, 4px 4px 16px rgba(0,0,0,0.45) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 50 !important;
}

.xp-cart-window .title-bar {
  flex: 0 0 32px !important;
}

.xp-cart-window-content {
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 18px !important;
  background: #f8f7f0 !important;
}

.xp-cart-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  background: linear-gradient(to bottom, #f2eee2, #d7d0c0) !important;
  border-bottom: 1px solid #b9b2a1 !important;
}

.xp-cart-address {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #ece9d8 !important;
  border-bottom: 1px solid #c8c1ae !important;
}

.xp-cart-address-label {
  font-weight: bold !important;
  color: #444 !important;
}

.xp-cart-address-input {
  flex: 1 !important;
  background: #ffffff !important;
  border: 1px solid #aaa !important;
  padding: 4px 8px !important;
  color: #333 !important;
}

.xp-cart-heading {
  font-family: GoldHeartedTitle, Georgia, serif !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  color: #4b006f !important;
  margin: 0 0 16px !important;
}

.xp-cart-line {
  display: grid !important;
  grid-template-columns: 92px 1fr 130px 120px !important;
  gap: 14px !important;
  align-items: center !important;
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid #c8c1ae !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

.xp-cart-line-image {
  width: 92px !important;
  height: 92px !important;
  border: 1px solid #8e86a3 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.xp-cart-line-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.xp-cart-no-image {
  font-size: 34px !important;
}

.xp-cart-line-title {
  font-weight: bold !important;
  font-size: 18px !important;
  color: #1d1d1d !important;
  text-decoration: none !important;
}

.xp-cart-line-variant,
.xp-cart-line-properties {
  margin-top: 5px !important;
  color: #555 !important;
  font-size: 13px !important;
}

.xp-cart-line-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.xp-cart-line-controls input {
  width: 82px !important;
  padding: 4px !important;
  border: 1px solid #8f8f8f !important;
  background: #fff !important;
  font-size: 14px !important;
}

.xp-cart-remove {
  color: #5b0a8f !important;
  font-weight: bold !important;
  font-size: 13px !important;
}

.xp-cart-line-price {
  text-align: right !important;
  font-weight: bold !important;
  font-size: 20px !important;
  color: #d6a313 !important;
}

.xp-cart-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #c8c1ae !important;
}

.xp-cart-subtotal {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #1d1d1d !important;
}

.xp-cart-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

.xp-cart-btn,
.xp-cart-checkout-btn,
.xp-cart-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 16px !important;
  border: 1px solid #6b5d7d !important;
  text-decoration: none !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-weight: bold !important;
  cursor: pointer !important;
}

.xp-cart-btn,
.xp-cart-secondary-btn {
  background: linear-gradient(to bottom, #ffffff, #dfeeff) !important;
  color: #1d1d1d !important;
}

.xp-cart-checkout-btn {
  background: linear-gradient(to bottom, #9f45e8, #5b0a8f) !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

.xp-empty-cart-box {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid #c8c1ae !important;
  padding: 26px !important;
  font-size: 18px !important;
}

.cart-page-taskbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 44px !important;
  background: linear-gradient(to bottom, #8f35d6, #5b0a8f 55%, #3b0059) !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  gap: 10px !important;
  z-index: 80 !important;
}

.cart-page-start-btn {
  min-width: 130px !important;
  height: 36px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: linear-gradient(to bottom, #6fdb55, #1f8f1b) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7), 2px 2px 4px rgba(0,0,0,0.35) !important;
}

.cart-page-task-tab {
  height: 34px !important;
  min-width: 170px !important;
  color: #ffffff !important;
  background: linear-gradient(to bottom, #d6a313, #7a4f00) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  font-weight: bold !important;
}

@media (max-width: 760px) {
  .xp-cart-window {
    width: 94vw !important;
    height: 82vh !important;
  }

  .xp-cart-line {
    grid-template-columns: 74px 1fr !important;
  }

  .xp-cart-line-controls,
  .xp-cart-line-price {
    grid-column: 2 !important;
    text-align: left !important;
  }

  .xp-cart-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .xp-cart-actions {
    justify-content: stretch !important;
  }

  .xp-cart-btn,
  .xp-cart-checkout-btn,
  .xp-cart-secondary-btn {
    width: 100% !important;
  }
}

/* =========================================================
   CART PAGE CLEANUP: BACK BUTTON, NO START MENU, NO TITLE BADGE
========================================================= */
.cart-title-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
}

.xp-cart-back-group {
  gap: 7px !important;
  padding-right: 14px !important;
  margin-right: 2px !important;
}

.xp-cart-back-image-btn,
.xp-cart-back-image-btn img {
  width: 42px !important;
  height: 42px !important;
}

.xp-cart-toolbar .toolbar-text {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #1d1d1d !important;
  cursor: default !important;
  user-select: none !important;
}

.cart-page-taskbar-no-start {
  padding-left: 10px !important;
}

.cart-page-taskbar-no-start .cart-page-task-tab {
  margin-left: 0 !important;
}

.xp-cart-btn:disabled {
  opacity: 0.72 !important;
  cursor: wait !important;
}


/* =========================================================
   CART PAGE FINAL CLEANUPS
   - no bottom purple taskbar on cart page
   - no cart number badge inside the cart title favicon
========================================================= */
.cart-page-taskbar,
.cart-page-taskbar-no-start {
  display: none !important;
}

.cart-title-icon .gh-cart-badge,
.xp-cart-window .gh-cart-badge {
  display: none !important;
}

/* Automatic Shopify metal toolbar buttons */
.auto-metal-toolbar-item .toolbar-text {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-metal-btn img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* =========================================================
   SHOW READY APP LINKS: REVIEWS / QIKIFY / INBOX
========================================================= */
.product-layout .more-products-section {
  display: none !important;
}

.product-layout .reviews-section {
  width: 100% !important;
  margin-top: 0 !important;
}

.judge-me-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.xp-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid #777;
  border-radius: 3px;
  background: linear-gradient(to bottom, #ffffff, #d8d8d8);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9b9b9b;
  font-family: TahomaXP, Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #111;
  text-decoration: none;
  cursor: pointer;
}

.xp-link-button:hover {
  background: linear-gradient(to bottom, #f9f9ff, #cfdcff);
}

.app-helper-note {
  margin: 8px 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #333;
}

.judge-me-widget-shell {
  margin: 8px 0 12px;
}

.judge-me-widget-shell:empty {
  display: none;
}

.qikify-custom-order-embed {
  width: 100%;
  min-height: 80px;
}

.aim-message-bot strong {
  color: #3f126d;
}

/* Shopify Forms inside GH Instant Messenger */
.aim-forms-layout {
  height: calc(100% - 84px);
}

.aim-forms-main {
  min-width: 0;
}

.aim-forms-transcript {
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
}

.gh-messenger-shopify-forms {
  height: calc(100% - 82px);
  overflow: auto;
  background: #ffffff;
  border-top: 1px solid #b9b5a8;
  padding: 12px;
  box-sizing: border-box;
}

.gh-messenger-shopify-form-block {
  width: 100%;
  max-width: 100%;
}

.gh-messenger-shopify-form-placeholder {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #3a3a3a;
  border: 1px dashed #7b20ff;
  background: #fbf8ff;
  padding: 14px;
  line-height: 1.5;
}

.aim-forms-bottom-bar {
  height: 84px;
}

#aimWindow .gh-messenger-shopify-forms input,
#aimWindow .gh-messenger-shopify-forms textarea,
#aimWindow .gh-messenger-shopify-forms select {
  max-width: 100%;
}

#aimWindow .gh-messenger-shopify-forms form {
  max-width: 100%;
}

/* =========================================================
   JUDGE.ME REAL REVIEWS - CLEAN PRODUCT AREA
========================================================= */
.related-products.reviews-only-products {
  display: block !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.related-products .more-products-section,
.more-products-section {
  display: none !important;
}

.judge-me-reviews-section,
.related-products .reviews-section {
  width: 100% !important;
  max-width: 100% !important;
}

.judge-me-widget-shell {
  min-height: 80px;
}

.judge-me-loading-note {
  font-family: TahomaXP, Tahoma, Arial, sans-serif;
  font-size: 13px;
  color: #333;
  padding: 12px;
  border: 1px dashed #aaa;
  background: #f6f6f6;
}

.judge-me-widget-shell .jdgm-widget,
.judge-me-widget-shell .jdgm-review-widget {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

.judge-me-fallback-actions {
  margin-top: 12px;
}


/* =========================================================
   JUDGE.ME XP PRODUCT WINDOW LAYOUT FIX
   Keeps Judge.me inside the Customer Reviews panel only.
========================================================= */
#window.viewer-mode .related-products.reviews-only-products,
#window.gallery-mode .related-products.reviews-only-products,
#viewer3d .jdgm-widget,
#photoGallery .jdgm-widget,
#aimWindow .jdgm-widget {
  display: none !important;
}

.related-products.reviews-only-products {
  width: calc(100% - 40px) !important;
  max-width: calc(100% - 40px) !important;
  margin: 10px 20px 24px !important;
  padding: 0 !important;
  display: block !important;
  clear: both !important;
}

.reviews-only-products .judge-me-reviews-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  clear: both !important;
}

#judgeMeWidgetShell,
#judgeMeWidgetShell .gh-judgeme-real-widget,
#judgeMeWidgetShell .jdgm-widget,
#judgeMeWidgetShell .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-review-widget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  clear: both !important;
}

#judgeMeWidgetShell {
  display: block !important;
  overflow: hidden !important;
}

#judgeMeWidgetShell * {
  box-sizing: border-box !important;
}

#judgeMeWidgetShell .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-rev-widg__body,
#judgeMeWidgetShell .jdgm-rev-widg__reviews,
#judgeMeWidgetShell .jdgm-rev-widg__header,
#judgeMeWidgetShell .jdgm-rev,
#judgeMeWidgetShell .jdgm-form-wrapper,
#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  text-align: left !important;
  margin: 8px 0 !important;
}

#judgeMeWidgetShell .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-btn,
#judgeMeWidgetShell a.jdgm-write-rev-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 260px !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
}

#judgeMeWidgetShell .jdgm-star,
#judgeMeWidgetShell .jdgm-prev-badge__stars,
#judgeMeWidgetShell .jdgm-rev-widg__summary-stars {
  display: inline-block !important;
  white-space: nowrap !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__reviews,
#judgeMeWidgetShell .jdgm-rev {
  border-left: 0 !important;
  border-right: 0 !important;
}


/* =========================================================
   JUDGE.ME REAL WIDGET FINAL CLEANUP
   The product-window reviews are rendered in-place; the backup link is hidden
   so it doesn't open the XP product template in a separate tab.
========================================================= */
.judge-me-fallback-actions {
  display: none !important;
}

#judgeMeWidgetShell {
  overflow: visible !important;
  min-height: 160px !important;
}

#judgeMeWidgetShell .jdgm-widget,
#judgeMeWidgetShell .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-review-widget {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#judgeMeWidgetShell .jdgm-widget-actions-wrapper,
#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-rev-widg__header,
#judgeMeWidgetShell .jdgm-rev-widg__body,
#judgeMeWidgetShell .jdgm-rev-widg__reviews {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  column-count: 1 !important;
}

#judgeMeWidgetShell .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-btn,
#judgeMeWidgetShell button,
#judgeMeWidgetShell a {
  white-space: normal !important;
}

/* === GoldHearted Judge.me iframe isolation fix === */
#judgeMeWidgetShell {
  width: 100%;
  min-height: 420px;
  overflow: hidden;
  background: #fbfaf1;
  border: 1px solid #c7c0aa;
  box-sizing: border-box;
}

#judgeMeWidgetShell .gh-judgeme-reviews-frame {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  background: #fbfaf1;
}

#window.viewer-mode .reviews-only-products,
#window.gallery-mode .reviews-only-products,
#viewer3d #judgeMeWidgetShell,
#photoGallery #judgeMeWidgetShell {
  display: none !important;
}

.judge-me-fallback-actions {
  display: none !important;
}

/* =========================================================
   GoldHearted final Judge.me containment
   - Reviews show only on normal product mode.
   - Hidden/gallery/3D states always beat the review display rules.
   - Uses direct Judge.me widget HTML instead of the grey iframe.
========================================================= */
#window .related-products.reviews-only-products.hidden,
#window.viewer-mode .related-products.reviews-only-products,
#window.gallery-mode .related-products.reviews-only-products,
#window.viewer-mode #judgeMeWidgetShell,
#window.gallery-mode #judgeMeWidgetShell,
#viewer3d .related-products.reviews-only-products,
#photoGallery .related-products.reviews-only-products {
  display: none !important;
}

#judgeMeWidgetShell {
  min-height: 120px !important;
  background: #fbfaf1 !important;
  border: 0 !important;
  overflow: visible !important;
}

#judgeMeWidgetShell .gh-judgeme-reviews-frame {
  display: none !important;
}

#judgeMeWidgetShell .gh-judgeme-direct-widget,
#judgeMeWidgetShell .gh-judgeme-direct-widget .jdgm-widget,
#judgeMeWidgetShell .gh-judgeme-direct-widget .jdgm-review-widget,
#judgeMeWidgetShell .gh-judgeme-direct-widget .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-widget,
#judgeMeWidgetShell .jdgm-review-widget,
#judgeMeWidgetShell .jdgm-rev-widg {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  column-count: 1 !important;
}

#judgeMeWidgetShell .jdgm-widget-actions-wrapper,
#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-rev-widg__header,
#judgeMeWidgetShell .jdgm-rev-widg__body,
#judgeMeWidgetShell .jdgm-rev-widg__reviews,
#judgeMeWidgetShell .jdgm-rev,
#judgeMeWidgetShell .jdgm-form-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
  column-count: 1 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FRIDAY LAUNCH: JUDGE.ME SHARED REVIEW WALL CLEAN LAYOUT
   This keeps the working shared review widget, but makes it
   fit the XP product window instead of looking stretched/odd.
========================================================= */
.reviews-only-products .judge-me-reviews-section {
  background: #fbfaf1 !important;
  border: 1px solid #c7c0aa !important;
  padding: 18px 20px 22px !important;
  box-sizing: border-box !important;
}

.reviews-only-products .judge-me-reviews-section > h2 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 34px !important;
  line-height: 1.1 !important;
  color: #000 !important;
  text-align: left !important;
}

#judgeMeWidgetShell {
  background: #fbfaf1 !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

#judgeMeWidgetShell .jdgm-rev-widg {
  background: #fffef7 !important;
  border: 1px solid #d4cbb8 !important;
  padding: 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  color: #111 !important;
}

/* We already have the XP panel title, so remove Judge.me's duplicate title. */
#judgeMeWidgetShell .jdgm-rev-widg__title {
  display: none !important;
}

/* Make the top review summary compact and even. */
#judgeMeWidgetShell .jdgm-rev-widg__header {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1fr) minmax(180px, auto) !important;
  gap: 22px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0 0 18px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid #e2dccd !important;
  box-sizing: border-box !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-histogram,
#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  justify-self: start !important;
  align-self: start !important;
}

#judgeMeWidgetShell .jdgm-star,
#judgeMeWidgetShell .jdgm-prev-badge__stars,
#judgeMeWidgetShell .jdgm-rev-widg__summary-stars,
#judgeMeWidgetShell .jdgm-rev__rating {
  color: #b02bdd !important;
  letter-spacing: 1px !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary-text,
#judgeMeWidgetShell .jdgm-rev-widg__summary-average,
#judgeMeWidgetShell .jdgm-rev-widg__summary-caption {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

#judgeMeWidgetShell .jdgm-histogram__row {
  display: grid !important;
  grid-template-columns: 84px minmax(90px, 1fr) 28px !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 22px !important;
  margin: 0 0 4px !important;
}

#judgeMeWidgetShell .jdgm-histogram__bar,
#judgeMeWidgetShell .jdgm-histogram__bar-content {
  height: 14px !important;
  border-radius: 0 !important;
}

#judgeMeWidgetShell .jdgm-histogram__bar-content {
  background: #b02bdd !important;
}

#judgeMeWidgetShell .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-btn,
#judgeMeWidgetShell a.jdgm-write-rev-link {
  background: linear-gradient(#c03be8, #8a16c5) !important;
  border: 1px solid #6b0d9d !important;
  color: #fff !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 16px !important;
  min-width: 165px !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45) !important;
}

#judgeMeWidgetShell .jdgm-write-rev-link:hover,
#judgeMeWidgetShell .jdgm-btn:hover,
#judgeMeWidgetShell a.jdgm-write-rev-link:hover {
  filter: brightness(1.05) !important;
}

#judgeMeWidgetShell .jdgm-sort-dropdown-wrapper {
  margin: 10px 0 14px !important;
  padding: 0 !important;
}

#judgeMeWidgetShell .jdgm-sort-dropdown {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  color: #6b0d9d !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__body,
#judgeMeWidgetShell .jdgm-rev-widg__reviews {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#judgeMeWidgetShell .jdgm-rev {
  background: #fff !important;
  border: 1px solid #ded6c8 !important;
  padding: 14px 16px !important;
  margin: 12px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  color: #111 !important;
}

#judgeMeWidgetShell .jdgm-rev__header,
#judgeMeWidgetShell .jdgm-rev__content {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#judgeMeWidgetShell .jdgm-rev__timestamp {
  float: right !important;
  color: #666 !important;
  font-size: 13px !important;
}

#judgeMeWidgetShell .jdgm-rev__author,
#judgeMeWidgetShell .jdgm-rev__title {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

#judgeMeWidgetShell .jdgm-rev__title {
  font-size: 17px !important;
  font-weight: bold !important;
  margin: 8px 0 6px !important;
}

#judgeMeWidgetShell .jdgm-rev__body,
#judgeMeWidgetShell .jdgm-rev__body p {
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

@media (max-width: 850px) {
  #judgeMeWidgetShell .jdgm-rev-widg__header {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .reviews-only-products .judge-me-reviews-section > h2 {
    font-size: 28px !important;
  }
}

/* =========================================================
   FRIDAY LAUNCH REVIEW COMPACT OVERRIDE
   Fixes Judge.me header weird stacking inside the XP window.
   Keep the working shared review widget, but simplify the top
   summary so it looks clean and cannot bleed/stack badly.
========================================================= */
.reviews-only-products .judge-me-reviews-section {
  background: #fbfaf1 !important;
  border: 1px solid #c7c0aa !important;
  padding: 16px 18px 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.reviews-only-products .judge-me-reviews-section > h2 {
  margin: 0 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #e5ddcb !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

#judgeMeWidgetShell,
#judgeMeWidgetShell * {
  box-sizing: border-box !important;
}

#judgeMeWidgetShell {
  background: #fbfaf1 !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

#judgeMeWidgetShell .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-review-widget,
#judgeMeWidgetShell .jdgm-widget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: #fffef7 !important;
  border: 1px solid #d7cfbd !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

/* Use only our XP title. */
#judgeMeWidgetShell .jdgm-rev-widg__title {
  display: none !important;
}

/* Simplified, stable top bar: rating summary + write button. */
#judgeMeWidgetShell .jdgm-rev-widg__header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #e5ddcb !important;
  outline: 0 !important;
  background: transparent !important;
  float: none !important;
  clear: both !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 230px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  text-align: left !important;
  float: none !important;
  clear: none !important;
}

#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Hide the rating histogram because it is what keeps stacking weird in the XP window. */
#judgeMeWidgetShell .jdgm-histogram,
#judgeMeWidgetShell .jdgm-histogram__row,
#judgeMeWidgetShell .jdgm-histogram__bar,
#judgeMeWidgetShell .jdgm-histogram__bar-content,
#judgeMeWidgetShell .jdgm-histogram__frequency,
#judgeMeWidgetShell .jdgm-histogram__star,
#judgeMeWidgetShell .jdgm-histogram__stars,
#judgeMeWidgetShell .jdgm-see-all-reviews,
#judgeMeWidgetShell .jdgm-rev-widg__summary-footer {
  display: none !important;
}

#judgeMeWidgetShell .jdgm-star,
#judgeMeWidgetShell .jdgm-prev-badge__stars,
#judgeMeWidgetShell .jdgm-rev-widg__summary-stars,
#judgeMeWidgetShell .jdgm-rev__rating {
  color: #b02bdd !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  letter-spacing: 1px !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary-average,
#judgeMeWidgetShell .jdgm-rev-widg__summary-text,
#judgeMeWidgetShell .jdgm-rev-widg__summary-caption {
  color: #111 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

#judgeMeWidgetShell .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-btn,
#judgeMeWidgetShell a.jdgm-write-rev-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 170px !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: linear-gradient(#c743eb, #8a16c5) !important;
  border: 1px solid #67108c !important;
  color: #fff !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45) !important;
}

/* Clean dropdown row. */
#judgeMeWidgetShell .jdgm-sort-dropdown-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}

#judgeMeWidgetShell .jdgm-sort-dropdown {
  color: #7b14b9 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
}

/* Review cards */
#judgeMeWidgetShell .jdgm-rev-widg__body,
#judgeMeWidgetShell .jdgm-rev-widg__reviews {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: both !important;
}

#judgeMeWidgetShell .jdgm-rev {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid #dfd6c6 !important;
  color: #111 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  float: none !important;
  clear: both !important;
}

#judgeMeWidgetShell .jdgm-rev__header,
#judgeMeWidgetShell .jdgm-rev__content {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#judgeMeWidgetShell .jdgm-rev__timestamp {
  float: right !important;
  color: #777 !important;
  font-size: 13px !important;
}

#judgeMeWidgetShell .jdgm-rev__title {
  margin: 8px 0 6px !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

#judgeMeWidgetShell .jdgm-rev__body,
#judgeMeWidgetShell .jdgm-rev__body p {
  color: #111 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

@media (max-width: 850px) {
  #judgeMeWidgetShell .jdgm-rev-widg__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #judgeMeWidgetShell .jdgm-rev-widg__summary {
    min-width: 0 !important;
  }
}


/* =========================================================
   GOLDHEARTED NEWSLETTER SIGNUP FIX
   Uses Shopify customer/newsletter form instead of app popup
========================================================= */
.gh-newsletter-form {
  margin-top: 18px !important;
  max-width: 760px !important;
}

.gh-newsletter-label {
  display: block !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #222 !important;
  margin-bottom: 7px !important;
}

.gh-newsletter-row {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.gh-newsletter-input {
  flex: 1 1 260px !important;
  min-width: 220px !important;
  height: 44px !important;
  border: 1px solid #7f9db9 !important;
  background: #fff !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.18) !important;
  padding: 0 12px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 16px !important;
}

.gh-newsletter-submit {
  min-width: 190px !important;
  height: 46px !important;
  margin: 0 !important;
}

.gh-newsletter-note {
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #444 !important;
}

.gh-newsletter-success,
.password-newsletter-success {
  margin: 0 0 14px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #2e8b57 !important;
  background: #eafff1 !important;
  color: #075c2d !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.gh-newsletter-error,
.password-newsletter-error {
  margin: 0 0 14px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #a60000 !important;
  background: #fff0f0 !important;
  color: #8a0000 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
}

.password-newsletter-success,
.password-newsletter-error {
  margin: 0 0 10px 0 !important;
  grid-column: 1 / -1 !important;
}

/* =========================================================
   FINAL LAUNCH FONT SIZE TUNE
   Password page font is fixed in layout/password.liquid.
   These overrides make XP UI labels about 2px smaller,
   especially Start Menu and product window toolbar text.
========================================================= */

:root {
  --xp-ui-small-final: 11px;
  --xp-ui-normal-final: 12px;
}

/* Start menu + taskbar words */
#start-menu,
#start-menu *,
.start-item,
.start-item-right,
#start-footer,
#start-footer *,
#start-header,
.taskbar-app,
#clock {
  font-family: var(--body-font) !important;
}

.start-item,
.start-item-right,
#start-footer,
#start-footer *,
#start-menu button,
#start-menu a {
  font-size: var(--xp-ui-normal-final) !important;
  line-height: 1.15 !important;
}

#start-header {
  font-size: 22px !important;
  line-height: 1 !important;
}

.taskbar-app,
#clock {
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Product window toolbar words */
.xp-toolbar .toolbar-text,
.simple-info-toolbar .toolbar-text,
.metal-toolbar .toolbar-text,
.xp-cart-toolbar .toolbar-text,
.auto-metal-toolbar-item .toolbar-text,
.toolbar-text {
  font-family: var(--body-font) !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.xp-toolbar .toolbar-item,
.simple-info-toolbar .toolbar-item,
.metal-toolbar .toolbar-item {
  gap: 4px !important;
}

/* Address bar + title bar UI words */
.address-label,
.address-input,
.info-address-bar,
.info-address-bar *,
.metal-address-bar,
.metal-address-bar *,
.xp-address-bar,
.xp-address-bar * {
  font-family: var(--body-font) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.title-bar,
.title-bar *,
.window-title {
  font-family: var(--body-font) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Desktop icon labels slightly tighter but still readable. */
.desktop-icon span,
.desktop-icon-label {
  font-family: var(--body-font) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

@media (max-width: 768px) {
  .toolbar-text,
  .xp-toolbar .toolbar-text,
  .simple-info-toolbar .toolbar-text,
  .metal-toolbar .toolbar-text {
    font-size: 9px !important;
  }

  .start-item,
  .start-item-right,
  #start-menu button,
  #start-menu a {
    font-size: 11px !important;
  }
}

/* =========================================================
   SAFE EMPTY INFO WINDOW CLEANUP
   Hides known filler copy without changing theme schema defaults.
========================================================= */
.info-page .info-richtext:empty,
.info-page .info-custom-liquid:empty {
  display: none !important;
}

/* =========================================================
   AIM MESSENGER + SHOPIFY FORMS BACKEND TEST
   Keeps the AIM editor visible while Shopify Forms handles delivery.
========================================================= */
.gh-hidden-form-engine {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0.01 !important;
  pointer-events: none !important;
}

.gh-visible-form-fallback {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 220px !important;
  margin: 8px 0 0 !important;
  padding: 10px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: auto !important;
  background: #fff !important;
  border-top: 1px solid #c9c2b2 !important;
}

#aimMessage.is-disabled {
  background: #e4e4e4 !important;
  color: #777 !important;
  cursor: default !important;
}

#aimSendBtn:disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

.gh-messenger-shopify-form-placeholder {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #222 !important;
}


/* GoldHearted XP cart discount + payment polish */
.xp-cart-left-summary {
  display: grid !important;
  gap: 10px !important;
  min-width: min(420px, 100%) !important;
}

.xp-cart-discount-box {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #b9b0c7 !important;
  padding: 9px !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.8) !important;
}

.xp-cart-discount-box label {
  display: block !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  margin-bottom: 5px !important;
  color: #2b163c !important;
}

.xp-cart-discount-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.xp-cart-discount-row input {
  width: 100% !important;
  max-width: 240px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid #7d718b !important;
  background: #ffffff !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  color: #111 !important;
}

.xp-cart-discount-help {
  margin-top: 5px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 11px !important;
  color: #5c5168 !important;
}

.xp-cart-payments {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  color: #2b163c !important;
}

.xp-cart-payments strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  padding: 2px 6px !important;
  border: 1px solid #8f86a0 !important;
  border-radius: 3px !important;
  background: linear-gradient(to bottom, #fff, #ece8f5) !important;
  color: #20122e !important;
  font-size: 11px !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,.12) !important;
}

@media (max-width: 760px) {
  .xp-cart-left-summary {
    min-width: 100% !important;
  }

  .xp-cart-discount-row input {
    max-width: none !important;
  }
}


/* Featured product update: smaller desktop icons + second column after six icons */
#desktop > .desktop-icon {
  width: 66px !important;
  min-height: 74px !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  position: absolute !important;
  left: 6px !important;
  z-index: 70 !important;
}

#desktop > .desktop-icon img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  margin-bottom: 3px !important;
}

#desktop > .desktop-icon span {
  display: block !important;
  max-width: 62px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  word-break: break-word !important;
}

#openAboutDesktop { top: 10px !important; }
#openWindow { top: 86px !important; }
#openFeaturedProduct1Desktop { top: 162px !important; }
#openFeaturedProduct2Desktop { top: 238px !important; }
#openAim { top: 314px !important; }
#openCustomOrderDesktop { top: 390px !important; }
#openMetalPricing { top: 10px !important; left: 78px !important; }
#openCartDesktop { top: 86px !important; left: 78px !important; }

@media (max-height: 760px) {
  #desktop > .desktop-icon {
    width: 62px !important;
    min-height: 66px !important;
  }
  #desktop > .desktop-icon img {
    width: 34px !important;
    height: 34px !important;
  }
  #desktop > .desktop-icon span {
    font-size: 9px !important;
    max-width: 58px !important;
  }
  #openAboutDesktop { top: 8px !important; }
  #openWindow { top: 76px !important; }
  #openFeaturedProduct1Desktop { top: 144px !important; }
  #openFeaturedProduct2Desktop { top: 212px !important; }
  #openAim { top: 280px !important; }
  #openCustomOrderDesktop { top: 348px !important; }
  #openMetalPricing { top: 8px !important; left: 72px !important; }
  #openCartDesktop { top: 76px !important; left: 72px !important; }
}


/* Adjustment: icons should be only slightly smaller, not tiny */
#desktop > .desktop-icon {
  width: 80px !important;
  min-height: 82px !important;
  padding: 8px 6px !important;
  left: 8px !important;
}

#desktop > .desktop-icon img {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 5px !important;
}

#desktop > .desktop-icon span {
  max-width: 76px !important;
  font-size: 10.5px !important;
  line-height: 1.08 !important;
}

#openAboutDesktop { top: 10px !important; }
#openWindow { top: 94px !important; }
#openFeaturedProduct1Desktop { top: 178px !important; }
#openFeaturedProduct2Desktop { top: 262px !important; }
#openAim { top: 346px !important; }
#openCustomOrderDesktop { top: 430px !important; }
#openMetalPricing { top: 10px !important; left: 98px !important; }
#openCartDesktop { top: 94px !important; left: 98px !important; }

@media (max-height: 760px) {
  #desktop > .desktop-icon {
    width: 74px !important;
    min-height: 74px !important;
    padding: 7px 5px !important;
  }
  #desktop > .desktop-icon img {
    width: 42px !important;
    height: 42px !important;
  }
  #desktop > .desktop-icon span {
    font-size: 10px !important;
    max-width: 70px !important;
  }
  #openAboutDesktop { top: 8px !important; }
  #openWindow { top: 84px !important; }
  #openFeaturedProduct1Desktop { top: 160px !important; }
  #openFeaturedProduct2Desktop { top: 236px !important; }
  #openAim { top: 312px !important; }
  #openCustomOrderDesktop { top: 388px !important; }
  #openMetalPricing { top: 8px !important; left: 88px !important; }
  #openCartDesktop { top: 84px !important; left: 88px !important; }
}


/* Correct desktop icon layout: natural grid, second column after six visible icons */
.desktop-icons-grid {
  position: absolute !important;
  top: 8px !important;
  left: 6px !important;
  z-index: 90 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(6, 82px) !important;
  grid-auto-columns: 86px !important;
  column-gap: 4px !important;
  row-gap: 2px !important;
  align-items: start !important;
  justify-items: center !important;
  pointer-events: none !important;
}

.desktop-icons-grid > .desktop-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 82px !important;
  min-height: 78px !important;
  padding: 8px 5px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.desktop-icons-grid > .desktop-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  margin-bottom: 4px !important;
}

.desktop-icons-grid > .desktop-icon span {
  max-width: 78px !important;
  font-size: 11px !important;
  line-height: 1.08 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 74px) !important;
    grid-auto-columns: 78px !important;
    row-gap: 0 !important;
  }
  .desktop-icons-grid > .desktop-icon {
    width: 76px !important;
    min-height: 72px !important;
    padding: 6px 4px !important;
  }
  .desktop-icons-grid > .desktop-icon img {
    width: 42px !important;
    height: 42px !important;
  }
  .desktop-icons-grid > .desktop-icon span {
    max-width: 72px !important;
    font-size: 10px !important;
  }
}


/* Final icon grid correction: remove old absolute ID positions inside the grid */
.desktop-icons-grid > #openAboutDesktop,
.desktop-icons-grid > #openWindow,
.desktop-icons-grid > #openFeaturedProduct1Desktop,
.desktop-icons-grid > #openFeaturedProduct2Desktop,
.desktop-icons-grid > #openAim,
.desktop-icons-grid > #openCustomOrderDesktop,
.desktop-icons-grid > #openMetalPricing,
.desktop-icons-grid > #openCartDesktop {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.desktop-icons-grid {
  top: 10px !important;
  left: 8px !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(6, 92px) !important;
  grid-auto-columns: 94px !important;
  row-gap: 0 !important;
  column-gap: 8px !important;
  align-items: start !important;
  justify-items: start !important;
}

.desktop-icons-grid > .desktop-icon {
  width: 88px !important;
  min-height: 86px !important;
  padding: 8px 5px !important;
}

.desktop-icons-grid > .desktop-icon img {
  width: 50px !important;
  height: 50px !important;
  margin-bottom: 5px !important;
}

.desktop-icons-grid > .desktop-icon span {
  max-width: 84px !important;
  font-size: 11px !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 82px) !important;
    grid-auto-columns: 86px !important;
    column-gap: 5px !important;
  }
  .desktop-icons-grid > .desktop-icon {
    width: 82px !important;
    min-height: 78px !important;
    padding: 7px 4px !important;
  }
  .desktop-icons-grid > .desktop-icon img {
    width: 46px !important;
    height: 46px !important;
  }
  .desktop-icons-grid > .desktop-icon span {
    max-width: 78px !important;
    font-size: 10.5px !important;
  }
}


/* Tiny spacing bump: stop icon label overlap while keeping the same size */
.desktop-icons-grid {
  grid-template-rows: repeat(6, 102px) !important;
  row-gap: 4px !important;
}

.desktop-icons-grid > .desktop-icon {
  min-height: 94px !important;
}

.desktop-icons-grid > .desktop-icon span {
  line-height: 1.15 !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 90px) !important;
    row-gap: 2px !important;
  }
  .desktop-icons-grid > .desktop-icon {
    min-height: 86px !important;
  }
}


/* Extra spacing bump: remove the last tiny icon overlap */
.desktop-icons-grid {
  grid-template-rows: repeat(6, 112px) !important;
  row-gap: 6px !important;
}

.desktop-icons-grid > .desktop-icon {
  min-height: 104px !important;
}

.desktop-icons-grid > .desktop-icon span {
  line-height: 1.22 !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 98px) !important;
    row-gap: 4px !important;
  }
  .desktop-icons-grid > .desktop-icon {
    min-height: 92px !important;
  }
}


/* More breathing room between desktop icons */
.desktop-icons-grid {
  grid-template-rows: repeat(6, 124px) !important;
  row-gap: 8px !important;
}

.desktop-icons-grid > .desktop-icon {
  min-height: 112px !important;
}

.desktop-icons-grid > .desktop-icon span {
  line-height: 1.28 !important;
}

/* All Products page: let product icons wrap cleanly instead of horizontal scrolling */
.all-products-row {
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  gap: 24px 30px !important;
  align-content: flex-start !important;
  min-height: 0 !important;
}

.all-products-row .desktop-product-shortcut,
.all-products-row .collection-product-shortcut {
  flex: 0 0 108px !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 106px) !important;
    row-gap: 6px !important;
  }
  .desktop-icons-grid > .desktop-icon {
    min-height: 98px !important;
  }
}


/* Final desktop icon spacing: between v10 and v12 */
.desktop-icons-grid {
  grid-template-rows: repeat(6, 112px) !important;
  row-gap: 4px !important;
}

.desktop-icons-grid > .desktop-icon {
  min-height: 100px !important;
}

.desktop-icons-grid > .desktop-icon span {
  line-height: 1.20 !important;
}

@media (max-height: 760px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 98px) !important;
    row-gap: 3px !important;
  }
  .desktop-icons-grid > .desktop-icon {
    min-height: 90px !important;
  }
}


/* Judge.me XP cleanup: stop glitchy layout and make review wall cleaner */
#judgeMeWidgetShell {
  padding: 12px 16px !important;
  background: #f7f5ec !important;
  border: 1px solid #c8c1ae !important;
  overflow: visible !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__title,
#judgeMeWidgetShell .jdgm-rev-widg__summary-text,
#judgeMeWidgetShell .jdgm-histogram,
#judgeMeWidgetShell .jdgm-rev-widg__summary-average,
#judgeMeWidgetShell .jdgm-rev-widg__summary .jdgm-link {
  display: none !important;
}

#judgeMeWidgetShell .jdgm-rev-widg,
#judgeMeWidgetShell .jdgm-review-widget,
#judgeMeWidgetShell .jdgm-widget {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px !important;
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9) !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary,
#judgeMeWidgetShell .jdgm-widget-actions-wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__summary-stars,
#judgeMeWidgetShell .jdgm-star,
#judgeMeWidgetShell .jdgm-prev-badge__stars {
  color: #a729d7 !important;
  font-size: 18px !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

#judgeMeWidgetShell .jdgm-widget-actions-wrapper .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-write-rev-link,
#judgeMeWidgetShell .jdgm-btn,
#judgeMeWidgetShell a.jdgm-write-rev-link {
  background: linear-gradient(to bottom, #b83be3, #6b129d) !important;
  color: #ffffff !important;
  border: 1px solid #4b0e74 !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.25) !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  min-width: 150px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
}

#judgeMeWidgetShell .jdgm-rev-widg__sort-wrapper,
#judgeMeWidgetShell .jdgm-sort-dropdown-wrapper {
  margin: 8px 0 12px !important;
  text-align: left !important;
}

#judgeMeWidgetShell .jdgm-rev {
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.06) !important;
}

#judgeMeWidgetShell .jdgm-rev__header,
#judgeMeWidgetShell .jdgm-rev__content {
  width: 100% !important;
  max-width: 100% !important;
}

#judgeMeWidgetShell .jdgm-rev__author,
#judgeMeWidgetShell .jdgm-rev__title {
  color: #5b0a8f !important;
  font-weight: bold !important;
}

#judgeMeWidgetShell .jdgm-form-wrapper,
#judgeMeWidgetShell .jdgm-form {
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  padding: 14px !important;
  margin-top: 12px !important;
}

#judgeMeWidgetShell .jdgm-form input,
#judgeMeWidgetShell .jdgm-form textarea,
#judgeMeWidgetShell .jdgm-form select {
  border: 1px solid #8f8f8f !important;
  background: #fff !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

/* Judge.me cancel-review close state */
#judgeMeWidgetShell .gh-review-form-closed {
  display: none !important;
}

/* GoldHearted custom review wall */
.gh-custom-reviews-section {
  background: #f7f5ec !important;
  border: 1px solid #c8c1ae !important;
  padding: 18px !important;
  margin-top: 18px !important;
}

.gh-review-summary-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  padding: 12px 14px !important;
  margin: 10px 0 16px !important;
}

.gh-review-summary-stars,
.gh-review-stars {
  color: #a729d7 !important;
  font-size: 20px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
}

.gh-review-summary-text {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  margin-top: 5px !important;
}

.gh-write-review-btn,
.gh-review-submit,
.gh-review-cancel {
  border: 1px solid #4b0e74 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-weight: bold !important;
  cursor: pointer !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
}

.gh-write-review-btn,
.gh-review-submit {
  background: linear-gradient(to bottom, #b83be3, #6b129d) !important;
  color: #ffffff !important;
}

.gh-review-cancel {
  background: linear-gradient(to bottom, #ffffff, #e7e7e7) !important;
  color: #4b0e74 !important;
}

.gh-review-list {
  display: grid !important;
  gap: 12px !important;
}

.gh-review-card {
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  padding: 14px !important;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.06) !important;
}

.gh-review-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.gh-review-author {
  color: #5b0a8f !important;
  font-weight: bold !important;
  margin-bottom: 6px !important;
}

.gh-review-card h3 {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 16px !important;
  margin: 0 0 7px !important;
}

.gh-review-card p {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.gh-review-date {
  color: #777 !important;
  font-size: 12px !important;
}

.gh-review-media {
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.gh-review-media img {
  max-width: 120px !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border: 1px solid #c8c1ae !important;
}

.gh-review-media a {
  color: #5b0a8f !important;
  font-weight: bold !important;
}

.gh-review-form-panel {
  background: #ffffff !important;
  border: 1px solid #d8d1c0 !important;
  padding: 14px !important;
  margin: 12px 0 16px !important;
}

.gh-review-form h3 {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  margin-bottom: 10px !important;
}

.gh-review-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.gh-review-form label {
  display: grid !important;
  gap: 5px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

.gh-review-form input,
.gh-review-form select,
.gh-review-form textarea {
  width: 100% !important;
  border: 1px solid #8f8f8f !important;
  background: #ffffff !important;
  padding: 7px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
}

.gh-review-form-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.gh-review-form-status {
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #5b0a8f !important;
  font-weight: bold !important;
}

.gh-review-form-status.is-error {
  color: #b00020 !important;
}

@media (max-width: 700px) {
  .gh-review-summary-bar,
  .gh-review-card-top {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .gh-review-form-grid {
    grid-template-columns: 1fr !important;
  }
}


/* GH: second collection safe + slightly larger desktop icons */
.all-products-collection2-mount {
  display: contents;
}
.desktop-icons-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(6, 110px) !important;
  grid-auto-columns: 100px !important;
  row-gap: 5px !important;
  column-gap: 12px !important;
  align-content: start !important;
  justify-content: start !important;
  padding: 18px 0 0 16px !important;
}
.desktop-icons-grid > .desktop-icon {
  position: static !important;
  width: 92px !important;
  min-height: 102px !important;
  margin: 0 !important;
  padding: 6px 4px !important;
}
.desktop-icons-grid > .desktop-icon img,
.desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}
.desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
.desktop-icons-grid > .desktop-icon .desktop-icon-label {
  max-width: 90px !important;
  font-size: 11.5px !important;
  line-height: 1.12 !important;
}

/* GH one-change update: All Products product section flows in 2 horizontal rows */
#infoAllProductsPage .all-products-page > .all-products-section:first-of-type > .all-products-row,
#infoAllProductsPage .all-products-page .all-products-section:first-child .all-products-row,
#infoAllProductsPage .all-products-section:first-of-type .all-products-row,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(2, 138px) !important;
  grid-auto-columns: 128px !important;
  gap: 18px 18px !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  min-height: 305px !important;
  max-height: 325px !important;
}

#infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-collection2-mount,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-collection2-mount {
  display: contents !important;
}

#infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-shortcut,
#infoAllProductsPage .all-products-section:first-of-type .all-products-row .desktop-product-shortcut,
#infoAllProductsPage .all-products-section:first-of-type .all-products-row .collection-product-shortcut,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-shortcut,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .desktop-product-shortcut,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .collection-product-shortcut {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  min-height: 126px !important;
  flex: none !important;
  margin: 0 !important;
}

#infoAllProductsPage .all-products-section:first-of-type .all-products-row img,
.info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row img {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

/* GH one-change update: mobile All Products becomes 1 horizontal row with smaller icons */
@media (max-width: 700px) {
  #infoAllProductsPage .all-products-page > .all-products-section:first-of-type > .all-products-row,
  #infoAllProductsPage .all-products-page .all-products-section:first-child .all-products-row,
  #infoAllProductsPage .all-products-section:first-of-type .all-products-row,
  .info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(1, 118px) !important;
    grid-auto-columns: 96px !important;
    gap: 10px !important;
    min-height: 132px !important;
    max-height: 150px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 10px !important;
  }

  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-shortcut,
  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .desktop-product-shortcut,
  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .collection-product-shortcut,
  .info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-shortcut,
  .info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .desktop-product-shortcut,
  .info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row .collection-product-shortcut {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    min-height: 108px !important;
    gap: 4px !important;
    padding: 4px 3px !important;
  }

  #infoAllProductsPage .all-products-section:first-of-type .all-products-row img,
  .info-page#infoAllProductsPage .all-products-section:first-of-type .all-products-row img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .all-products-shortcut span,
  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .desktop-product-shortcut span,
  #infoAllProductsPage .all-products-section:first-of-type .all-products-row .collection-product-shortcut span {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }
}

/* GH one-change update: landing desktop icons slightly smaller on mobile only */
@media (max-width: 700px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(6, 100px) !important;
    grid-auto-columns: 90px !important;
    row-gap: 3px !important;
    column-gap: 8px !important;
    padding: 14px 0 0 10px !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: 84px !important;
    min-height: 94px !important;
    padding: 4px 3px !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: 52px !important;
    height: 52px !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: 82px !important;
    font-size: 10.75px !important;
    line-height: 1.1 !important;
  }
}


/* GH custom order Formspree form */
.gh-custom-order-form {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}
.gh-custom-order-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  margin-bottom: 14px !important;
}
.gh-custom-order-grid label,
.gh-custom-order-block {
  display: grid !important;
  gap: 5px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  color: #111 !important;
}
.gh-custom-order-wide {
  grid-column: 1 / -1 !important;
}
.gh-custom-order-form input,
.gh-custom-order-form select,
.gh-custom-order-form textarea {
  width: 100% !important;
  border: 1px solid #b93ac8 !important;
  background: #ffffff !important;
  color: #111 !important;
  padding: 8px 10px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.12) !important;
}
.gh-custom-order-form select {
  appearance: auto !important;
}
.gh-custom-order-fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 12px 0 14px !important;
  display: grid !important;
  gap: 9px !important;
}
.gh-custom-order-fieldset legend {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  margin-bottom: 8px !important;
}
.gh-custom-order-fieldset label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 14px !important;
}
.gh-custom-order-fieldset input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  box-shadow: none !important;
  accent-color: #b93ac8 !important;
}
.gh-custom-order-block {
  margin: 12px 0 !important;
}
.gh-custom-order-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
}
.gh-custom-order-submit {
  border: 1px solid #6d178c !important;
  background: linear-gradient(to bottom, #b83ce1, #6716a0) !important;
  color: #fff !important;
  padding: 9px 18px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: bold !important;
  cursor: pointer !important;
}
.gh-custom-order-submit:disabled {
  opacity: 0.55 !important;
  cursor: default !important;
}
.gh-custom-order-status {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #5b0a8f !important;
}
.gh-custom-order-status.is-error {
  color: #b00020 !important;
}
@media (max-width: 700px) {
  .gh-custom-order-grid {
    grid-template-columns: 1fr !important;
  }
  .gh-custom-order-form input,
  .gh-custom-order-form select,
  .gh-custom-order-form textarea {
    font-size: 13px !important;
  }
}

.start-footer-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================================================
   MOBILE ONLY FINAL READABILITY TWEAKS
   These rules are mobile-only and do not affect desktop.
========================================================= */
@media (max-width: 768px) {

  /* Overall XP text slightly smaller so it does not crowd mobile windows */
  :root {
    --mobile-xp-font: 16px !important;
    --mobile-xp-small: 14px !important;
    --mobile-xp-medium: 16px !important;
    --mobile-xp-large: 20px !important;
  }

  .window-content,
  .info-window-content,
  .metal-window-content,
  .product-description,
  .donation-note,
  .simple-page-content p,
  .info-page p,
  .metal-subtext,
  .metal-market-footer,
  .aim-message-editor,
  .aim-bottom-action-bar {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  .title-bar,
  .window-title-with-icon,
  .window-title-with-icon span {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Keep mobile windows above the taskbar so the bottom is not cut off */
  #infoWindow,
  .info-window {
    top: 58px !important;
    height: calc(100dvh - 108px) !important;
    max-height: calc(100dvh - 108px) !important;
  }

  #infoWindow .window-content,
  #infoWindow .info-window-content {
    height: calc(100% - 30px) !important;
    max-height: calc(100% - 30px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Start menu: make Gold-Hearted title fit and show footer buttons */
  #start-menu {
    left: 4px !important;
    bottom: 44px !important;
    width: min(348px, calc(100vw - 8px)) !important;
    height: min(430px, calc(100dvh - 58px)) !important;
    max-height: calc(100dvh - 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #start-header {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
  }

  #xp-user {
    font-size: 20px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  #start-content {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  #start-footer {
    display: flex !important;
    flex: 0 0 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    overflow: visible !important;
  }

  #start-footer .footer-action {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  #start-footer .footer-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  /* Metal Pricing: cleaner row layout on mobile */
  #metalWindow .metal-market-page {
    padding: 10px 12px 14px !important;
  }

  #metalWindow .metal-market-header h1 {
    font-size: 24px !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }

  #metalWindow .metal-market-header p {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }

  #metalWindow .metal-price-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    min-height: 84px !important;
    padding: 9px 10px !important;
  }

  #metalWindow .metal-icon-wrap {
    grid-column: 1 !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }

  #metalWindow .metal-info {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  #metalWindow .metal-name {
    font-size: 20px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #metalWindow .metal-subtext {
    font-size: 13px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  #metalWindow .metal-price {
    grid-column: 3 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-width: auto !important;
    text-align: right !important;
  }

  #metalWindow .metal-market-footer {
    font-size: 13px !important;
    line-height: 1.12 !important;
    margin-top: 10px !important;
  }

  /* Cart page: keep product text beside thumbnail, never over it */
  .xp-cart-line {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px !important;
  }

  .xp-cart-line-image {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 86px !important;
    height: 86px !important;
    align-self: start !important;
  }

  .xp-cart-line-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding-left: 4px !important;
  }

  .xp-cart-line-title {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .xp-cart-line-variant,
  .xp-cart-line-properties {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .xp-cart-line-controls,
  .xp-cart-line-price {
    grid-column: 2 !important;
    text-align: left !important;
    padding-left: 4px !important;
  }

  /* Messenger: keep formatting toolbar fully visible */
  #aimWindow.aim-chat-size .aim-format-bar,
  .aim-window.aim-chat-size .aim-format-bar {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #aimWindow.aim-chat-size .aim-format-btn,
  .aim-window.aim-chat-size .aim-format-btn {
    width: 31px !important;
    min-width: 31px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex: 0 0 31px !important;
  }

  #aimWindow.aim-chat-size .aim-format-divider,
  .aim-window.aim-chat-size .aim-format-divider {
    height: 30px !important;
    flex: 0 0 1px !important;
  }

  #aimWindow.aim-chat-size .aim-im-layout,
  .aim-window.aim-chat-size .aim-im-layout {
    height: calc(100% - 94px) !important;
    max-height: calc(100% - 94px) !important;
  }

  /* Product toolbar: small visual swipe/scroll hint */
  #window .xp-toolbar {
    position: sticky !important;
    padding-bottom: 12px !important;
  }

  #window .xp-toolbar::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 3px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.28) !important;
    pointer-events: none !important;
  }

  #window .xp-toolbar::after {
    content: "" !important;
    position: absolute !important;
    left: 45% !important;
    bottom: 1px !important;
    width: 34px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.95) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.22) !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   MOBILE START MENU HIDDEN FIX + REAL TOOLBAR SCROLL INDICATOR
========================================================= */
@media (max-width: 768px) {

  /* The Start Menu should stay closed until Start is tapped */
  #start-menu.hidden {
    display: none !important;
  }

  /* Turn off the old static swipe hint */
  #window .xp-toolbar::before,
  #window .xp-toolbar::after {
    display: none !important;
    content: none !important;
  }

  #window .xp-toolbar {
    position: sticky !important;
    padding-bottom: 16px !important;
  }

  .gh-mobile-toolbar-scroll-track {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 4px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.24) !important;
    pointer-events: none !important;
    z-index: 15 !important;
  }

  .gh-mobile-toolbar-scroll-thumb {
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    width: 34px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.96) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.28) !important;
    transform: translateX(0) !important;
  }
}

/* =========================================================
   MOBILE PRODUCT TOOLBAR RANGE SCROLLER
   Completely replaces the old custom/static purple scroll wheel.
   The side vertical window scroll is untouched.
========================================================= */
#window .gh-toolbar-range-inner {
  display: contents;
}

.gh-mobile-toolbar-range-wrap {
  display: none;
}

@media (max-width: 768px) {
  /* Remove every old decorative toolbar scroll hint. */
  #window .xp-toolbar::before,
  #window .xp-toolbar::after,
  #window .gh-mobile-toolbar-scroll-track,
  #window .gh-mobile-toolbar-scroll-thumb,
  #window .gh-mobile-toolbar-scroll-shell {
    display: none !important;
    content: none !important;
  }

  #window .xp-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0 !important;
    padding-bottom: 17px !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #window .xp-toolbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #window .gh-toolbar-range-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    transform: translateX(0px);
    will-change: transform !important;
    transition: none !important;
    touch-action: pan-y !important;
  }

  #window .gh-toolbar-range-inner > .xp-nav-group,
  #window .gh-toolbar-range-inner > .toolbar-item,
  #window .gh-toolbar-range-inner > .cart-btn {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  #window .gh-mobile-toolbar-range-wrap {
    position: absolute !important;
    height: 16px !important;
    display: none;
    z-index: 2147482600 !important;
    pointer-events: auto !important;
    touch-action: none !important;
  }

  #window.hidden .gh-mobile-toolbar-range-wrap,
  #window.minimized .gh-mobile-toolbar-range-wrap {
    display: none !important;
  }

  #window .gh-mobile-toolbar-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    cursor: pointer !important;
    touch-action: none !important;
  }

  #window .gh-mobile-toolbar-range::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.24) !important;
    border: 0 !important;
  }

  #window .gh-mobile-toolbar-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 38px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.96) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.28) !important;
    border: 0 !important;
    margin-top: -2.5px !important;
  }

  #window .gh-mobile-toolbar-range::-moz-range-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.24) !important;
    border: 0 !important;
  }

  #window .gh-mobile-toolbar-range::-moz-range-thumb {
    width: 38px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: rgba(143,53,214,0.96) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.28) !important;
    border: 0 !important;
  }
}

/* =========================================================
   CART ICON CONSISTENCY + SMALLER MOBILE START MENU
========================================================= */
.gh-cart-symbol-image {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 1 !important;
}

.gh-cart-symbol-image img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.gh-cart-button.has-cart-items .gh-cart-symbol-image img {
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.95)) brightness(1.08) !important;
}

@media (max-width: 768px) {
  #window .gh-cart-symbol-image,
  #infoWindow .gh-cart-symbol-image,
  #metalWindow .gh-cart-symbol-image {
    width: 26px !important;
    height: 26px !important;
  }

  #window .gh-cart-symbol-image img,
  #infoWindow .gh-cart-symbol-image img,
  #metalWindow .gh-cart-symbol-image img {
    width: 23px !important;
    height: 23px !important;
  }

  /* Shorten mobile Start menu to remove the large empty area above footer. */
  #start-menu {
    height: min(352px, calc(100dvh - 58px)) !important;
    max-height: calc(100dvh - 58px) !important;
  }

  #start-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* =========================================================
   DESKTOP ICON LAYOUT CLEANUP
   Desktop/tablet: 8 icons across before wrapping.
   Mobile: compact 2-column grid with no reserved empty rows.
========================================================= */
@media (min-width: 769px) {
  .desktop-icons-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(8, 96px) !important;
    grid-auto-rows: 108px !important;
    grid-template-rows: none !important;
    gap: 10px 14px !important;
    align-content: start !important;
    justify-content: start !important;
    padding: 20px 0 0 18px !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: 92px !important;
    min-height: 100px !important;
  }
}

@media (max-width: 768px) {
  .desktop-icons-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, 86px) !important;
    grid-auto-rows: 94px !important;
    grid-template-rows: none !important;
    gap: 4px 8px !important;
    align-content: start !important;
    justify-content: start !important;
    padding: 12px 0 0 10px !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: 82px !important;
    min-height: 90px !important;
    padding: 4px 3px !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: 80px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
  }

  #start-menu {
    height: min(318px, calc(100dvh - 58px)) !important;
  }
}

/* =========================================================
   DESKTOP ICON LAYOUT CORRECTION
   Vertical columns: fill 8 icons DOWN first, then start next column.
========================================================= */
@media (min-width: 769px) {
  .desktop-icons-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(8, 104px) !important;
    grid-template-columns: none !important;
    grid-auto-columns: 100px !important;
    gap: 6px 14px !important;
    align-content: start !important;
    justify-content: start !important;
    padding: 18px 0 0 16px !important;
  }
}

@media (max-width: 768px) {
  .desktop-icons-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(8, 92px) !important;
    grid-template-columns: none !important;
    grid-auto-columns: 86px !important;
    gap: 3px 8px !important;
    align-content: start !important;
    justify-content: start !important;
    padding: 10px 0 0 10px !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: 82px !important;
    min-height: 88px !important;
    padding: 3px 3px !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* =========================================================
   PRODUCT PERSONALIZATION / ORDER NOTES BOX
========================================================= */
.gh-product-note-group {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.gh-product-note-input {
  width: 100% !important;
  min-height: 64px !important;
  resize: vertical !important;
  border: 1px solid #7f9db9 !important;
  background: #ffffff !important;
  padding: 8px 10px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #111111 !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.18) !important;
}

.gh-product-note-input:focus {
  outline: 1px dotted #5b0a8f !important;
  outline-offset: 2px !important;
}

.gh-product-note-help {
  margin-top: 4px !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #5b0a8f !important;
}

@media (max-width: 768px) {
  .gh-product-note-group {
    margin-top: 6px !important;
  }

  .gh-product-note-input {
    min-height: 56px !important;
    font-size: 14px !important;
    padding: 7px 8px !important;
  }

  .gh-product-note-help {
    font-size: 11px !important;
  }
}

/* =========================================================
   GH V1 FINAL: DESKTOP ICON SAFE ZONE
   Keeps the vertical 8-icon column inside the space between
   the top of the desktop and the purple taskbar, even when
   browser zoom/screen size changes.
========================================================= */
@media (min-width: 769px) {
  .desktop-icons-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(8, clamp(58px, 9.6dvh, 100px)) !important;
    grid-auto-columns: clamp(74px, 8.8dvh, 100px) !important;
    row-gap: clamp(1px, 0.45dvh, 5px) !important;
    column-gap: clamp(8px, 1.3dvh, 14px) !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: start !important;
    justify-content: start !important;
    padding: clamp(6px, 1.2dvh, 14px) 0 0 clamp(8px, 1.1dvh, 16px) !important;
    height: calc(100dvh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .desktop-icons-grid > .desktop-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: clamp(66px, 8.1dvh, 92px) !important;
    min-height: 0 !important;
    height: clamp(58px, 9.4dvh, 100px) !important;
    max-height: 100px !important;
    margin: 0 !important;
    padding: clamp(2px, 0.55dvh, 6px) 3px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: clamp(34px, 5.4dvh, 56px) !important;
    height: clamp(34px, 5.4dvh, 56px) !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    margin-bottom: clamp(1px, 0.45dvh, 5px) !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: clamp(62px, 8dvh, 88px) !important;
    font-size: clamp(9px, 1.35dvh, 11.5px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .desktop-icons-grid > .desktop-icon .gh-cart-badge {
    font-size: clamp(9px, 1.2dvh, 12px) !important;
  }
}

/* =========================================================
   GH V1 FINAL TUNE: ICONS FILL FROM TOP TO TASKBAR
   Bigger icons, but still constrained so row 8 ends at the taskbar.
========================================================= */
@media (min-width: 769px) {
  .desktop-icons-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: calc(100dvh - 42px) !important;
    max-height: calc(100dvh - 42px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-columns: clamp(88px, 10.2dvh, 110px) !important;
    row-gap: 0 !important;
    column-gap: clamp(8px, 1.2dvh, 16px) !important;
    padding: clamp(6px, 1dvh, 10px) 0 2px clamp(8px, 1dvh, 14px) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-content: start !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: clamp(78px, 9.3dvh, 100px) !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: clamp(2px, 0.5dvh, 6px) 3px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: clamp(42px, 6.4dvh, 64px) !important;
    height: clamp(42px, 6.4dvh, 64px) !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    margin-bottom: clamp(2px, 0.5dvh, 5px) !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: clamp(76px, 9dvh, 98px) !important;
    font-size: clamp(10px, 1.48dvh, 13px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .desktop-icons-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: calc(100dvh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-columns: clamp(82px, 11dvh, 100px) !important;
    row-gap: 0 !important;
    column-gap: clamp(6px, 1.1dvh, 12px) !important;
    padding: clamp(6px, 1dvh, 9px) 0 2px clamp(8px, 1dvh, 12px) !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-content: start !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: clamp(76px, 10.4dvh, 92px) !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: clamp(2px, 0.5dvh, 5px) 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: clamp(40px, 6.5dvh, 58px) !important;
    height: clamp(40px, 6.5dvh, 58px) !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    margin-bottom: clamp(1px, 0.45dvh, 4px) !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: clamp(72px, 10dvh, 90px) !important;
    font-size: clamp(9.5px, 1.48dvh, 12px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
}


/* =========================================================
   ABOUT + FAQ POLISH + MOBILE TOOLBAR END SPACING
   - fixes product toolbar cart button getting clipped on mobile
   - gives About and FAQ distinct XP-friendly layouts
   - forces long words/text to wrap inside the content boxes
========================================================= */
.info-richtext,
.info-richtext *,
.simple-page-content,
.simple-page-content * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#infoAboutPage .simple-page-content,
#infoFaqPage .simple-page-content {
  max-width: 980px;
  position: relative;
  overflow: hidden;
}

#infoAboutPage .simple-page-content {
  background: linear-gradient(to bottom, #faf8f3 0%, #f1eee6 100%);
  border: 1px solid #c8c3b5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 7px rgba(0,0,0,0.08);
}

#infoAboutPage .simple-page-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to bottom, #9f4aff 0%, #7021ca 100%);
}

#infoAboutPage .simple-page-content h1 {
  margin: 0 0 18px;
  padding-left: 10px;
}

#infoAboutPage .info-page-media {
  border-color: #b8bfd1 !important;
  background: linear-gradient(to bottom, #ffffff, #f2f5fb) !important;
}

#infoAboutPage .info-richtext {
  background: #ffffff;
  border: 1px solid #b7c5d7;
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.45);
}

#infoAboutPage .info-richtext p:last-child,
#infoFaqPage .info-richtext p:last-child {
  margin-bottom: 0 !important;
}

#infoFaqPage .simple-page-content {
  background: linear-gradient(to bottom, #f8f8fb 0%, #eceef4 100%);
  border: 1px solid #bcc6d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 2px 7px rgba(0,0,0,0.08);
}

#infoFaqPage .simple-page-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, #8f35d6 0%, #4f0f90 100%);
}

#infoFaqPage .simple-page-content h1 {
  margin: 6px 0 18px;
}

#infoFaqPage .info-richtext {
  background: #ffffff;
  border: 1px solid #a9b6cc;
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 0 0 1px rgba(255,255,255,0.42);
}

#infoFaqPage .info-richtext p,
#infoFaqPage .info-richtext li {
  background: #fbfbfe;
  border: 1px solid #dbe2ef;
  border-left: 4px solid #8f35d6;
  padding: 10px 12px;
  margin-bottom: 12px !important;
}

#infoFaqPage .info-richtext ul,
#infoFaqPage .info-richtext ol {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style-position: inside;
}

#infoAboutPage .shopify-form-box.info-custom-liquid,
#infoFaqPage .shopify-form-box.info-custom-liquid {
  margin-top: 18px !important;
  background: #ffffff;
  border-color: #b7c5d7 !important;
}

@media (min-width: 769px) {
  #infoAboutPage .simple-page-content {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 16px;
    align-items: start;
  }

  #infoAboutPage .simple-page-content h1,
  #infoAboutPage .simple-page-content > .shopify-form-box.info-custom-liquid {
    grid-column: 1 / -1;
  }

  #infoAboutPage .info-page-media {
    margin: 0 !important;
  }

  #infoAboutPage .info-richtext {
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  #window .gh-toolbar-range-inner {
    padding-right: 22px !important;
  }

  #window .gh-toolbar-range-inner > .cart-btn {
    margin-left: 8px !important;
    margin-right: 12px !important;
  }

  #infoAboutPage .simple-page-content,
  #infoFaqPage .simple-page-content {
    padding: 18px 16px !important;
    border-width: 1px !important;
  }

  #infoAboutPage .simple-page-content h1,
  #infoFaqPage .simple-page-content h1 {
    font-size: 30px !important;
    line-height: 1.02 !important;
  }

  #infoAboutPage .info-richtext,
  #infoFaqPage .info-richtext {
    padding: 14px 14px !important;
  }

  #infoFaqPage .info-richtext p,
  #infoFaqPage .info-richtext li {
    padding: 10px !important;
  }
}


/* =========================================================
   DESKTOP ONLY: About Me height cleanup
   Keeps the mobile About layout unchanged, but removes the
   extra tall desktop content boxes when the About copy is short.
========================================================= */
@media (min-width: 769px) {
  #infoAboutPage .simple-page-content {
    padding: 22px 24px 22px 30px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }

  #infoAboutPage .simple-page-content h1 {
    margin-bottom: 12px !important;
  }

  #infoAboutPage .info-richtext {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 16px !important;
  }

  #infoAboutPage .info-richtext p,
  #infoAboutPage .info-richtext ul,
  #infoAboutPage .info-richtext ol {
    margin-bottom: 10px !important;
  }

  #infoAboutPage .info-page-media {
    max-width: 250px !important;
    margin-bottom: 0 !important;
  }

  #infoAboutPage .info-page-media img {
    max-height: 220px !important;
  }
}


/* NameChain mobile/fullscreen and Start Menu real-phone footer fixes */
@media (max-width: 749px) {
  #namechainWindow.gh-namechain-window {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 54px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 88px) !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    z-index: 260 !important;
  }

  #start-menu {
    position: fixed !important;
    left: 0 !important;
    bottom: var(--taskbar-height, 42px) !important;
    width: min(96vw, 390px) !important;
    max-height: calc(100dvh - var(--taskbar-height, 42px) - 10px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 500 !important;
  }

  #start-menu .start-footer,
  #start-menu .start-menu-footer,
  #start-menu .xp-start-footer,
  #start-menu [class*="footer"] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
  }
}


/* NameChain.exe launchers and final start-menu stacking */
#start-menu {
  z-index: 2147483600 !important;
}

.gh-namechain-all-products-shortcut {
  cursor: pointer;
}

#namechain-task::before {
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   NAMECHAIN ACTIVE / INACTIVE STATE FIX
   Keeps NameChain.exe from looking stuck active when switching taskbar tabs.
========================================================= */
#namechainWindow.gh-namechain-window:not(.active-window):not(.hidden):not(.minimized) > .title-bar {
  background: linear-gradient(to bottom, #9a9a9a 0%, #707070 45%, #3f3f3f 100%) !important;
  border-color: #777 !important;
  color: #e9e9e9 !important;
}

#namechainWindow.gh-namechain-window.active-window:not(.hidden):not(.minimized) > .title-bar {
  background: linear-gradient(to bottom, #9c37df 0%, #6c12a4 48%, #3a005f 100%) !important;
  border-color: #b96bff !important;
  color: #fff !important;
}


/* NameChain taskbar click/active safeguard */
#namechain-task {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 3 !important;
}

#namechain-task.active-task {
  background: linear-gradient(to bottom, #fff36a 0%, #e5b800 48%, #b88400 100%) !important;
  color: #111 !important;
}



/* NameChain admin controls unlocked for tuning */


/* =========================================================
   GH FINAL PATCH - Facebook + Metal Market mobile layout
========================================================= */

/* Use the new button artwork directly without fighting the old medal background */
.metal-icon-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.metal-icon-wrap img {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.22));
}

@media (max-width: 768px) {
  .metal-market-page {
    padding: 12px 10px !important;
  }

  .metal-market-header {
    margin-bottom: 10px !important;
  }

  .metal-market-header h1 {
    font-size: 30px !important;
    line-height: 0.95 !important;
    margin-bottom: 4px !important;
  }

  .metal-market-header p {
    font-size: 16px !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
  }

  .metal-price-list {
    gap: 10px !important;
  }

  .metal-price-row {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon info"
      "icon price" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    min-height: 86px !important;
    padding: 8px 10px !important;
  }

  .metal-icon-wrap {
    grid-area: icon !important;
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
  }

  .metal-icon-wrap img {
    width: 60px !important;
    height: 60px !important;
  }

  .metal-info {
    grid-area: info !important;
    min-width: 0 !important;
  }

  .metal-name {
    font-size: 30px !important;
    line-height: 0.88 !important;
    margin: 0 !important;
  }

  .metal-subtext {
    font-size: 15px !important;
    line-height: 0.98 !important;
  }

  .metal-price {
    grid-area: price !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 19px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .metal-market-footer {
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }
}

/* Mobile/tablet landscape layout stabilizer.
   A normal Shopify page cannot truly lock phone/tablet rotation like a native app,
   but this keeps the XP layout pinned instead of reflowing wildly in widescreen mode. */
@media (hover: none) and (pointer: coarse) and (max-width: 1180px) and (orientation: landscape) {
  html,
  body {
    overflow: hidden !important;
  }

  #desktop {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .desktop-icons-grid {
    left: 6px !important;
    top: 8px !important;
    max-height: calc(100dvh - 58px) !important;
    overflow: visible !important;
  }

  .window:not(.maximized),
  .info-window:not(.maximized),
  .aim-window:not(.maximized),
  .metal-window:not(.maximized),
  #namechainWindow:not(.maximized) {
    transform: none !important;
    max-width: calc(100vw - 92px) !important;
    max-height: calc(100dvh - 124px) !important;
  }

  .metal-window:not(.maximized) {
    left: 82px !important;
    top: 72px !important;
    width: min(420px, calc(100vw - 92px)) !important;
    height: calc(100dvh - 118px) !important;
  }
}


/* =========================================================
   GH FINAL PATCH - Metal price red-line position + 3D loader bar
========================================================= */

.viewer-loading {
  flex-direction: column !important;
}

.viewer-loading-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(360px, 72vw) !important;
}

.viewer-loading-inner img {
  width: min(220px, 54vw) !important;
  height: auto !important;
}

.viewer-loading-track {
  width: min(300px, 62vw) !important;
  height: 13px !important;
  padding: 2px !important;
  border: 1px solid #8b8b8b !important;
  background: #ece9d8 !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
  overflow: hidden !important;
}

.viewer-loading-fill {
  width: 42% !important;
  height: 100% !important;
  background:
    repeating-linear-gradient(
      90deg,
      #7f1bb2 0,
      #7f1bb2 10px,
      #c66cff 10px,
      #c66cff 18px
    ) !important;
  animation: ghViewerLoadingBar 1.2s linear infinite !important;
}

.viewer-loading-text {
  font-family: var(--body-font) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

@keyframes ghViewerLoadingBar {
  0% { transform: translateX(-118%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 768px) {
  /* Put the metal price on the red-line area beside the spot text and keep all mobile prices inside the box. */
  .metal-price-row {
    grid-template-columns: 74px 70px minmax(118px, 1fr) !important;
    grid-template-areas: "icon info price" !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
    align-items: center !important;
    min-height: 92px !important;
    padding: 8px 8px !important;
    overflow: hidden !important;
  }

  .metal-icon-wrap {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
  }

  .metal-icon-wrap img {
    width: 66px !important;
    height: 66px !important;
  }

  .metal-info {
    align-self: center !important;
    transform: translateY(-1px) !important;
    min-width: 0 !important;
  }

  .metal-name {
    font-size: 24px !important;
    line-height: 0.84 !important;
  }

  .metal-subtext {
    font-size: 13px !important;
    line-height: 0.94 !important;
  }

  .metal-price {
    align-self: center !important;
    justify-self: end !important;
    transform: translateY(2px) !important;
    text-align: right !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: -0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .viewer-loading-inner {
    gap: 12px !important;
    width: min(320px, 74vw) !important;
  }

  .viewer-loading-inner img {
    width: min(180px, 48vw) !important;
  }

  .viewer-loading-track {
    width: min(260px, 62vw) !important;
    height: 12px !important;
  }

  .viewer-loading-text {
    font-size: 14px !important;
  }
}


/* =========================================================
   GH PATCH - Custom Info window + small XP photo gallery
========================================================= */

.gh-custom-info-page .simple-page-content,
.gh-custom-info-content {
  background: #f7f7f7 !important;
  border: 1px solid #cfcfcf !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 7px rgba(0,0,0,0.08) !important;
}

.gh-custom-info-richtext {
  margin-bottom: 18px !important;
}

.gh-info-gallery {
  width: 100% !important;
  margin: 20px 0 8px !important;
  background: #f4f4f4 !important;
  border: 1px solid #b8b8b8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
}

.gh-info-gallery-main-view {
  width: 100% !important;
  min-height: 260px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 18px 28px !important;
  background: #f7f7f7 !important;
}

.gh-info-gallery-main-view img {
  max-width: 72% !important;
  max-height: 240px !important;
  object-fit: contain !important;
  border: 3px solid #111 !important;
  background: #ffffff !important;
  transition: transform 0.25s ease !important;
}

.gh-info-gallery-controls {
  min-height: 66px !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  padding-top: 12px !important;
  background: #f4f4f4 !important;
}

.gh-info-gallery-btn {
  width: 46px !important;
  height: 42px !important;
  border: 1px solid #8f8f8f !important;
  background: #ece9d8 !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
  font-family: var(--body-font) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.gh-info-gallery-btn:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #777777 !important;
  transform: translateY(1px) !important;
}

.gh-info-gallery-rotate-btn {
  color: #6b079b !important;
  font-size: 24px !important;
}

.gh-info-gallery-divider {
  width: 1px !important;
  height: 42px !important;
  background: #d4d0c8 !important;
  border-right: 1px solid #ffffff !important;
}

.gh-info-gallery-thumb-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 26px !important;
  padding: 28px 16px 30px !important;
  background: #ffffff !important;
  border-top: 1px solid #d6d6d6 !important;
}

.gh-info-gallery-thumb {
  width: 145px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: center !important;
  font-family: var(--body-font) !important;
  color: #111111 !important;
  padding: 0 !important;
}

.gh-info-gallery-thumb img {
  width: 145px !important;
  height: 100px !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 5px !important;
  box-shadow: 0 0 0 1px #b8b8b8 !important;
  display: block !important;
}

.gh-info-gallery-thumb span {
  display: block !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
}

.gh-info-gallery-thumb.active-gh-info-gallery-thumb img {
  border-color: #6b079b !important;
  box-shadow:
    0 0 0 1px #6b079b,
    0 0 0 3px rgba(107,7,155,0.18) !important;
}

@media (max-width: 768px) {
  .gh-info-gallery-main-view {
    min-height: 210px !important;
    padding: 18px 12px 22px !important;
  }

  .gh-info-gallery-main-view img {
    max-width: 88% !important;
    max-height: 185px !important;
  }

  .gh-info-gallery-controls {
    min-height: 58px !important;
    gap: 10px !important;
    padding-top: 10px !important;
  }

  .gh-info-gallery-btn {
    width: 42px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  .gh-info-gallery-thumb-row {
    gap: 12px !important;
    padding: 20px 10px 22px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .gh-info-gallery-thumb {
    width: 112px !important;
    flex: 0 0 112px !important;
  }

  .gh-info-gallery-thumb img {
    width: 112px !important;
    height: 78px !important;
  }

  .gh-info-gallery-thumb span {
    font-size: 12px !important;
  }
}


/* =========================================================
   GH PATCH - GoldHearted EDU upgraded layout
========================================================= */

#infoCustomInfoPage {
  background: linear-gradient(180deg, #f4f3ff 0%, #ece8ff 100%) !important;
}

#infoCustomInfoPage .gh-edu-shell {
  padding: 14px 14px 22px !important;
}

#infoCustomInfoPage .gh-edu-banner-shell {
  margin-bottom: 14px !important;
  background: #ece9d8 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;
  padding: 8px !important;
}

#infoCustomInfoPage .gh-edu-banner-media {
  width: 100% !important;
  min-height: 165px !important;
  max-height: 265px !important;
  overflow: hidden !important;
  background: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#infoCustomInfoPage .gh-edu-banner-media img,
#infoCustomInfoPage .gh-edu-banner-media video {
  width: 100% !important;
  height: 100% !important;
  min-height: 165px !important;
  max-height: 265px !important;
  object-fit: cover !important;
  display: block !important;
}

#infoCustomInfoPage .gh-edu-content-shell {
  background: #efede0 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;
  padding: 16px !important;
}

#infoCustomInfoPage .gh-edu-header-card {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid #c6c2b0 !important;
  background: linear-gradient(90deg, rgba(109,24,155,0.12) 0%, rgba(255,255,255,0.85) 100%) !important;
}

#infoCustomInfoPage .gh-edu-header-copy h1 {
  margin: 0 0 8px !important;
  color: #5f0f8c !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

#infoCustomInfoPage .gh-edu-subtitle {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #303030 !important;
}

#infoCustomInfoPage .gh-edu-badge {
  flex: 0 0 auto !important;
  align-self: center !important;
  background: linear-gradient(180deg, #7b19b6 0%, #5a0f85 100%) !important;
  color: #fff !important;
  border: 1px solid #3a0458 !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

#infoCustomInfoPage .gh-edu-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

#infoCustomInfoPage .gh-edu-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#infoCustomInfoPage .gh-edu-panel {
  background: #f7f7f7 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;
}

#infoCustomInfoPage .gh-edu-panel-title {
  padding: 8px 10px !important;
  background: linear-gradient(90deg, #7621a7 0%, #a95cd8 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-bottom: 1px solid #5b1083 !important;
}

#infoCustomInfoPage .gh-edu-text-panel .gh-custom-info-richtext,
#infoCustomInfoPage .gh-edu-liquid-panel .gh-custom-info-liquid {
  padding: 14px !important;
}

#infoCustomInfoPage .gh-edu-feature-panel .gh-custom-info-feature-image {
  padding: 14px !important;
}

#infoCustomInfoPage .gh-custom-info-feature-image img {
  width: 100% !important;
  max-height: 340px !important;
  object-fit: cover !important;
  border: 3px solid #111 !important;
  display: block !important;
}

#infoCustomInfoPage .gh-edu-gallery-panel .gh-info-gallery {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#infoCustomInfoPage .gh-info-gallery-main-view {
  background: linear-gradient(180deg, #f7f5ff 0%, #ece8ff 100%) !important;
  border-bottom: 1px solid #d2cee0 !important;
}

#infoCustomInfoPage .gh-info-gallery-main-view img {
  max-width: 84% !important;
  max-height: 300px !important;
  cursor: zoom-in !important;
}

#infoCustomInfoPage .gh-info-gallery-click-tip {
  width: 100% !important;
  padding: 8px 14px 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #6b079b !important;
  background: #f4f4f4 !important;
}

#infoCustomInfoPage .gh-info-gallery-thumb-row {
  padding-top: 18px !important;
}

@media (max-width: 900px) {
  #infoCustomInfoPage .gh-edu-main-grid {
    grid-template-columns: 1fr !important;
  }

  #infoCustomInfoPage .gh-edu-header-card {
    flex-direction: column !important;
  }

  #infoCustomInfoPage .gh-edu-badge {
    align-self: flex-start !important;
  }
}

@media (max-width: 768px) {
  #infoCustomInfoPage .gh-edu-shell {
    padding: 10px 10px 18px !important;
  }

  #infoCustomInfoPage .gh-edu-banner-media,
  #infoCustomInfoPage .gh-edu-banner-media img,
  #infoCustomInfoPage .gh-edu-banner-media video {
    min-height: 110px !important;
    max-height: 170px !important;
  }

  #infoCustomInfoPage .gh-edu-content-shell {
    padding: 10px !important;
  }

  #infoCustomInfoPage .gh-edu-header-copy h1 {
    font-size: 24px !important;
  }

  #infoCustomInfoPage .gh-edu-subtitle {
    font-size: 13px !important;
  }

  #infoCustomInfoPage .gh-edu-panel-title {
    font-size: 13px !important;
  }

  #infoCustomInfoPage .gh-info-gallery-main-view img {
    max-width: 90% !important;
    max-height: 220px !important;
  }
}


/* =========================================================
   GH PATCH - GoldHearted EDU signup + partnerships + matching gradient
========================================================= */

#infoCustomInfoPage .gh-edu-badge {
  display: none !important;
}

#infoCustomInfoPage .gh-edu-header-card {
  background:
    linear-gradient(90deg, #5a0f85 0%, #7820b0 34%, #b577db 66%, #e7e5ee 100%) !important;
  border: 1px solid #4c0872 !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.5),
    inset -1px -1px 0 rgba(40,0,60,0.45) !important;
}

#infoCustomInfoPage .gh-edu-header-copy h1,
#infoCustomInfoPage .gh-edu-header-copy .gh-edu-subtitle {
  color: #ffffff !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35) !important;
}

#infoCustomInfoPage .gh-edu-panel-title {
  background:
    linear-gradient(90deg, #5a0f85 0%, #7820b0 45%, #d7c1e8 100%) !important;
  border-bottom: 1px solid #4c0872 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.32) !important;
}

#infoCustomInfoPage .gh-edu-signup-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 14px !important;
  margin: 0 0 16px !important;
  background:
    linear-gradient(90deg, #f8f6ff 0%, #efe8ff 55%, #ffffff 100%) !important;
  border: 1px solid #8f8f8f !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
}

#infoCustomInfoPage .gh-edu-signup-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#infoCustomInfoPage .gh-edu-signup-copy strong {
  color: #5a0f85 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
}

#infoCustomInfoPage .gh-edu-signup-copy span {
  color: #252525 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#infoCustomInfoPage .gh-edu-signup-button {
  flex: 0 0 auto !important;
  min-width: 132px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid #4c0872 !important;
  background:
    linear-gradient(180deg, #c88cf0 0%, #7d25b5 48%, #5a0f85 100%) !important;
  color: #ffffff !important;
  font-family: var(--body-font) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.55),
    inset -1px -1px 0 rgba(30,0,45,0.65),
    0 1px 2px rgba(0,0,0,0.18) !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35) !important;
}

#infoCustomInfoPage .gh-edu-signup-button:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset -1px -1px 0 rgba(255,255,255,0.55),
    inset 1px 1px 0 rgba(30,0,45,0.65) !important;
}

#infoCustomInfoPage .gh-edu-partners-panel {
  margin-top: 18px !important;
}

#infoCustomInfoPage .gh-edu-partners-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 16px !important;
  background: #ffffff !important;
}

#infoCustomInfoPage .gh-edu-partner-card {
  min-height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #111111 !important;
  padding: 12px 8px !important;
  background: #f4f4f4 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
}

#infoCustomInfoPage .gh-edu-partner-card:hover {
  background: #f0e7ff !important;
  border-color: #6b079b !important;
}

#infoCustomInfoPage .gh-edu-partner-icon {
  width: 62px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #c9c9c9 !important;
  background: #ffffff !important;
  padding: 7px !important;
  box-shadow: inset 1px 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.12) !important;
  color: #6b079b !important;
  font-size: 30px !important;
}

#infoCustomInfoPage .gh-edu-partner-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

#infoCustomInfoPage .gh-edu-partner-label {
  display: block !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  #infoCustomInfoPage .gh-edu-partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #infoCustomInfoPage .gh-edu-signup-panel {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #infoCustomInfoPage .gh-edu-signup-button {
    width: 100% !important;
  }

  #infoCustomInfoPage .gh-edu-partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #infoCustomInfoPage .gh-edu-partner-card {
    min-height: 104px !important;
  }

  #infoCustomInfoPage .gh-edu-partner-icon {
    width: 54px !important;
    height: 54px !important;
  }
}


/* =========================================================
   GH PATCH - GoldHearted EDU inline signup form
========================================================= */

#infoCustomInfoPage .gh-edu-inline-signup-panel {
  align-items: stretch !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-form {
  flex: 0 0 min(420px, 48%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-input {
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 7px 9px !important;
  background: #ffffff !important;
  border: 1px solid #7f9db9 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0,0,0,0.15),
    inset -1px -1px 0 rgba(255,255,255,0.85) !important;
  font-family: var(--body-font) !important;
  font-size: 13px !important;
  color: #111111 !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-button {
  min-width: 104px !important;
  height: 38px !important;
  white-space: nowrap !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-button:disabled {
  opacity: 0.7 !important;
  cursor: wait !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-status {
  grid-column: 1 / -1 !important;
  min-height: 16px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #4a4a4a !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-status.is-success {
  color: #136f25 !important;
  font-weight: 700 !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-status.is-error,
#infoCustomInfoPage .gh-edu-inline-signup-status .errors,
#infoCustomInfoPage .gh-edu-inline-signup-status .errors li {
  color: #9a0000 !important;
  font-weight: 700 !important;
}

@media (max-width: 820px) {
  #infoCustomInfoPage .gh-edu-inline-signup-panel {
    flex-direction: column !important;
  }

  #infoCustomInfoPage .gh-edu-inline-signup-form {
    flex: 0 0 auto !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  #infoCustomInfoPage .gh-edu-inline-signup-button {
    width: 100% !important;
  }
}


/* =========================================================
   GH PATCH - GoldHearted EDU signup button + no-close polish
========================================================= */

#infoCustomInfoPage .gh-edu-inline-signup-form {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.78fr) !important;
  align-items: start !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-form > label.visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: 5px 8px 0 0 !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  font-family: var(--body-font) !important;
  font-size: 14px !important;
  color: #111111 !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-input {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-button {
  grid-column: 1 / -1 !important;
  grid-row: 2 / 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#infoCustomInfoPage .gh-edu-inline-signup-status {
  grid-column: 1 / -1 !important;
  grid-row: 3 / 4 !important;
}

/* =========================================================
   GH PATCH - Product Photo Gallery matches GoldHearted EDU
========================================================= */

#photoGallery.xp-photo-gallery {
  width: min(760px, calc(100% - 28px)) !important;
  min-height: 0 !important;
  margin: 12px auto 24px !important;
  background: #f4f4f4 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#photoGallery .gh-product-gallery-panel-title {
  padding: 8px 10px !important;
  background:
    linear-gradient(90deg, #5a0f85 0%, #7820b0 45%, #d7c1e8 100%) !important;
  border-bottom: 1px solid #4c0872 !important;
  color: #ffffff !important;
  font-family: var(--body-font) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.32) !important;
}

#photoGallery .gallery-main-view {
  width: 100% !important;
  min-height: 330px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 18px 28px !important;
  background: linear-gradient(180deg, #f7f5ff 0%, #ece8ff 100%) !important;
  border-bottom: 1px solid #d2cee0 !important;
}

#photoGallery .gallery-main-view img {
  max-width: 84% !important;
  max-height: 300px !important;
  object-fit: contain !important;
  border: 3px solid #111111 !important;
  background: #ffffff !important;
  transition: transform 0.25s ease !important;
  cursor: zoom-in !important;
}

#photoGallery .gallery-photo-controls {
  min-height: 66px !important;
  height: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 12px 12px 6px !important;
  background: #f4f4f4 !important;
}

#photoGallery .photo-control-btn {
  width: 46px !important;
  height: 42px !important;
  border-radius: 0 !important;
  border: 1px solid #8f8f8f !important;
  background: #ece9d8 !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
  color: #111111 !important;
  font-family: var(--body-font) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  filter: none !important;
}

#photoGallery .photo-control-btn:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #777777 !important;
  transform: translateY(1px) !important;
}

#photoGallery .rotate-btn {
  color: #6b079b !important;
  font-size: 24px !important;
  background: #ece9d8 !important;
  border: 1px solid #8f8f8f !important;
}

#photoGallery .photo-control-divider {
  width: 1px !important;
  height: 42px !important;
  background: #d4d0c8 !important;
  border-right: 1px solid #ffffff !important;
  margin: 0 !important;
}

#photoGallery .gh-product-gallery-click-tip {
  width: 100% !important;
  padding: 8px 14px 10px !important;
  text-align: center !important;
  font-family: var(--body-font) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #6b079b !important;
  background: #f4f4f4 !important;
}

#photoGallery .gallery-thumb-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 26px !important;
  padding: 18px 16px 30px !important;
  background: #ffffff !important;
  border-top: 1px solid #d6d6d6 !important;
  overflow-x: auto !important;
}

#photoGallery .gallery-thumb {
  width: 145px !important;
  flex: 0 0 145px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-family: var(--body-font) !important;
  color: #111111 !important;
}

#photoGallery .gallery-thumb img {
  width: 145px !important;
  height: 100px !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 5px !important;
  box-shadow: 0 0 0 1px #b8b8b8 !important;
  display: block !important;
}

#photoGallery .gallery-thumb span {
  display: block !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
}

#photoGallery .gallery-thumb.active-gallery-thumb img {
  border-color: #6b079b !important;
  box-shadow:
    0 0 0 1px #6b079b,
    0 0 0 3px rgba(107,7,155,0.18) !important;
}

@media (max-width: 768px) {
  #infoCustomInfoPage .gh-edu-inline-signup-form {
    grid-template-columns: 1fr !important;
  }

  #infoCustomInfoPage .gh-edu-inline-signup-form > label.visually-hidden,
  #infoCustomInfoPage .gh-edu-inline-signup-input,
  #infoCustomInfoPage .gh-edu-inline-signup-button,
  #infoCustomInfoPage .gh-edu-inline-signup-status {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  #photoGallery.xp-photo-gallery {
    width: calc(100% - 18px) !important;
    margin: 10px auto 18px !important;
  }

  #photoGallery .gallery-main-view {
    min-height: 230px !important;
    padding: 18px 12px 22px !important;
  }

  #photoGallery .gallery-main-view img {
    max-width: 90% !important;
    max-height: 220px !important;
  }

  #photoGallery .gallery-photo-controls {
    min-height: 58px !important;
    gap: 10px !important;
    padding-top: 10px !important;
  }

  #photoGallery .photo-control-btn {
    width: 42px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  #photoGallery .gallery-thumb-row {
    gap: 12px !important;
    padding: 20px 10px 22px !important;
    justify-content: flex-start !important;
  }

  #photoGallery .gallery-thumb {
    width: 112px !important;
    flex: 0 0 112px !important;
  }

  #photoGallery .gallery-thumb img {
    width: 112px !important;
    height: 78px !important;
  }

  #photoGallery .gallery-thumb span {
    font-size: 12px !important;
  }
}


/* =========================================================
   GH PATCH - Product gallery fills product window + scroll fix
   Makes the product Photo Gallery match EDU without clipping.
========================================================= */

#window.gallery-mode .window-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-items: stretch !important;
}

#window.gallery-mode .xp-toolbar,
#window.gallery-mode .xp-address-bar {
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery.xp-photo-gallery {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100% - 0px) !important;
  height: auto !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #8f8f8f !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #777777 !important;
  overflow: visible !important;
  flex: 1 0 auto !important;
}

#window.gallery-mode #photoGallery .gh-product-gallery-panel-title {
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery .gallery-main-view {
  min-height: clamp(220px, 43vh, 310px) !important;
  padding: 16px 18px 18px !important;
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery .gallery-main-view img {
  max-width: min(72%, 520px) !important;
  max-height: clamp(205px, 38vh, 285px) !important;
}

#window.gallery-mode #photoGallery .gallery-photo-controls {
  min-height: 58px !important;
  padding: 10px 12px 4px !important;
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery .gh-product-gallery-click-tip {
  padding: 6px 14px 8px !important;
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery .gallery-thumb-row {
  padding: 14px 16px 20px !important;
  flex: 0 0 auto !important;
}

#window.gallery-mode #photoGallery .gallery-thumb {
  width: 132px !important;
  flex-basis: 132px !important;
}

#window.gallery-mode #photoGallery .gallery-thumb img {
  width: 132px !important;
  height: 88px !important;
}

#window.gallery-mode #photoGallery .gallery-thumb span {
  margin-top: 6px !important;
}

/* Short-height desktop/laptop windows: shrink a little more so controls and thumbnails show. */
@media (max-height: 720px) {
  #window.gallery-mode #photoGallery .gallery-main-view {
    min-height: 205px !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  #window.gallery-mode #photoGallery .gallery-main-view img {
    max-height: 195px !important;
  }

  #window.gallery-mode #photoGallery .gallery-photo-controls {
    min-height: 52px !important;
    padding-top: 8px !important;
  }

  #window.gallery-mode #photoGallery .photo-control-btn {
    width: 42px !important;
    height: 38px !important;
  }

  #window.gallery-mode #photoGallery .photo-control-divider {
    height: 38px !important;
  }

  #window.gallery-mode #photoGallery .gallery-thumb-row {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  #window.gallery-mode #photoGallery .gallery-thumb {
    width: 118px !important;
    flex-basis: 118px !important;
  }

  #window.gallery-mode #photoGallery .gallery-thumb img {
    width: 118px !important;
    height: 76px !important;
  }
}

@media (max-width: 768px) {
  #window.gallery-mode #photoGallery.xp-photo-gallery {
    width: 100% !important;
    margin: 0 !important;
  }

  #window.gallery-mode #photoGallery .gallery-main-view {
    min-height: 205px !important;
    padding: 14px 10px 16px !important;
  }

  #window.gallery-mode #photoGallery .gallery-main-view img {
    max-width: 88% !important;
    max-height: 195px !important;
  }

  #window.gallery-mode #photoGallery .gallery-thumb-row {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   GH PATCH - Product gallery no title + larger main image
========================================================= */

#window.gallery-mode #photoGallery .gh-product-gallery-panel-title {
  display: none !important;
}

#window.gallery-mode #photoGallery .gallery-main-view {
  min-height: clamp(270px, 50vh, 385px) !important;
  padding: 18px 18px 20px !important;
}

#window.gallery-mode #photoGallery .gallery-main-view img {
  max-width: min(86%, 650px) !important;
  max-height: clamp(255px, 46vh, 360px) !important;
}

@media (max-height: 720px) {
  #window.gallery-mode #photoGallery .gallery-main-view {
    min-height: 245px !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }

  #window.gallery-mode #photoGallery .gallery-main-view img {
    max-width: min(88%, 610px) !important;
    max-height: 235px !important;
  }
}

@media (max-width: 768px) {
  #window.gallery-mode #photoGallery .gallery-main-view {
    min-height: 245px !important;
    padding: 14px 10px 16px !important;
  }

  #window.gallery-mode #photoGallery .gallery-main-view img {
    max-width: 92% !important;
    max-height: 235px !important;
  }
}


/* =========================================================
   GH PATCH - Keep product photo gallery hidden outside gallery mode
   Fixes gallery showing underneath 3D View.
========================================================= */

#photoGallery.xp-photo-gallery.hidden,
#window.viewer-mode #photoGallery.xp-photo-gallery,
#window:not(.gallery-mode) #photoGallery.xp-photo-gallery {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#window.gallery-mode #photoGallery.xp-photo-gallery:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* =========================================================
   GH PATCH - Retro About + FAQ info pages
========================================================= */

.info-page.gh-about-retro-page,
.info-page.gh-faq-retro-page {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.72), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, #efeafc 0%, #f7f0d6 55%, #dac4ff 100%) !important;
}

.gh-retro-info-shell {
  position: relative;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 14px !important;
}

.gh-retro-info-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(60, 20, 92, .035) 0,
      rgba(60, 20, 92, .035) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: multiply;
}

.gh-retro-info-topbar {
  position: relative;
  z-index: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  color: #fff;
  background:
    linear-gradient(to bottom, rgba(190,82,255,.95), rgba(101,12,157,.98) 52%, rgba(48,5,80,.98));
  border: 1px solid #3c075b;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(0,0,0,.35),
    0 2px 0 rgba(0,0,0,.15);
  font-family: Tahoma, Verdana, sans-serif;
}

.gh-retro-info-light {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6ba, #ffc31f 42%, #b86a00 100%);
  box-shadow: 0 0 10px rgba(255,212,62,.85);
  flex: 0 0 auto;
}

.gh-retro-info-topbar strong {
  font-size: 13px;
  letter-spacing: .02em;
}

.gh-retro-info-tag {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 10px;
  color: #2c1142;
  background: linear-gradient(to bottom, #fff5a8, #e3b83d);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.72);
}

.gh-retro-info-subtitle {
  margin: 0 0 14px;
  color: #402457;
  font-size: 14px;
  line-height: 1.35;
}

.gh-about-retro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 14px;
}

.gh-about-photo-card,
.gh-about-story-card,
.gh-faq-retro-header,
.gh-faq-list-panel,
.gh-retro-custom-liquid {
  position: relative;
  z-index: 1;
  background: rgba(255,253,244,.94);
  border: 1px solid #7e6d9e;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 rgba(0,0,0,.15),
    2px 2px 0 rgba(58,25,91,.16);
}

.gh-about-photo-card {
  padding: 10px;
  align-self: start;
}

.gh-about-photo-header {
  margin: -10px -10px 10px;
  padding: 7px 9px;
  color: #fff;
  background: linear-gradient(to right, #2e0552, #8e2bd3, #e4b735);
  font-size: 12px;
  font-weight: bold;
}

.gh-about-photo-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,.5), rgba(255,255,255,0)),
    radial-gradient(circle at center, #fff, #d9d1ef);
  border: 1px solid #5d4e79;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.85),
    0 0 0 4px rgba(255,255,255,.45);
}

.gh-about-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 3px, rgba(80,20,120,.08) 4px);
}

.gh-about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gh-about-photo-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #6a5680;
  text-align: center;
  font-size: 12px;
}

.gh-about-photo-caption {
  margin: 10px 0 0;
  padding: 7px 8px;
  background: #f7f1d2;
  border: 1px solid #cabd80;
  color: #4b3511;
  font-weight: bold;
  font-size: 11px;
}

.gh-about-story-card {
  padding: 18px;
}

.gh-about-story-card h1,
.gh-faq-retro-header h1,
.gh-faq-display-title {
  margin: 0 0 8px;
  color: #5d168d;
  font-size: clamp(28px, 4vw, 46px);
  line-height: .9;
  text-shadow: 1px 1px 0 #fff2a6;
}

.gh-about-richtext {
  color: #201431;
  font-size: 14px;
  line-height: 1.5;
}

.gh-about-richtext p {
  margin-top: 0;
}

.gh-about-retro-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.gh-about-retro-details span {
  padding: 6px 9px;
  color: #fff;
  background: linear-gradient(to bottom, #7f23c3, #3e075f);
  border: 1px solid #2d0447;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: bold;
}

.gh-faq-retro-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 14px;
  align-items: center;
  padding: 18px;
  margin-bottom: 12px;
}

.gh-faq-header-image {
  aspect-ratio: 1.35 / 1;
  overflow: hidden;
  border: 1px solid #5d4e79;
  background: #fff;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.85);
}

.gh-faq-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gh-faq-list-panel {
  padding: 0;
}

.gh-faq-list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: #fff;
  background: linear-gradient(to bottom, #1e0635, #652095 48%, #3b075d);
  border-bottom: 1px solid #271033;
}

.gh-faq-list-title span {
  font-weight: bold;
}

.gh-faq-list-title small {
  margin-left: auto;
  font-size: 10px;
  opacity: .85;
}

.gh-faq-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.gh-faq-item {
  background: #fffdf4;
  border: 1px solid #9d8dbb;
  box-shadow:
    inset 1px 1px 0 #fff,
    1px 1px 0 rgba(0,0,0,.08);
}

.gh-faq-item summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
  color: #1e1230;
  background: linear-gradient(to bottom, #ffffff, #eee7d0);
  user-select: none;
}

.gh-faq-item summary::-webkit-details-marker {
  display: none;
}

.gh-faq-item summary::after {
  content: "+";
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #6b5588;
  background: linear-gradient(to bottom, #fff, #d9c4ff);
  color: #4e1275;
  font-weight: bold;
}

.gh-faq-item[open] summary::after {
  content: "–";
}

.gh-faq-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(to bottom, #9b34dd, #4b0b70);
  border: 1px solid #33054e;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: bold;
}

.gh-faq-answer {
  padding: 10px 13px 13px 44px;
  color: #33263c;
  background: #fffaf0;
  border-top: 1px solid #cabd80;
  font-size: 13px;
  line-height: 1.45;
}

.gh-faq-answer p:last-child {
  margin-bottom: 0;
}

.gh-faq-richtext-list {
  margin-top: 4px;
  padding: 10px 12px;
  background: #fffdf4;
  border: 1px dashed #8e72ad;
  color: #33263c;
}

.gh-faq-richtext-list ul,
.gh-faq-richtext-list ol {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.gh-faq-richtext-list li {
  padding: 7px 8px;
  background: rgba(246,237,255,.8);
  border: 1px solid rgba(107,85,136,.25);
}

@media (max-width: 768px) {
  .gh-retro-info-shell {
    padding: 10px !important;
  }

  .gh-about-retro-grid,
  .gh-faq-retro-header {
    grid-template-columns: 1fr;
  }

  .gh-about-photo-card {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
  }

  .gh-faq-header-image {
    max-width: 240px;
    width: 100%;
  }

  .gh-about-story-card,
  .gh-faq-retro-header {
    padding: 14px;
  }

  .gh-faq-answer {
    padding-left: 13px;
  }
}


/* =========================================================
   GH PATCH - About Me cleaner retro profile layout
   Removes duplicate internal title strip/subtitle/badges
   and moves the photo/profile card to the left.
========================================================= */

#infoAboutPage .gh-about-retro-shell {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 22px 28px 28px !important;
}

#infoAboutPage .gh-about-retro-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

#infoAboutPage .gh-about-photo-card {
  width: 100% !important;
  max-width: 310px !important;
  margin: 0 !important;
  justify-self: start !important;
}

#infoAboutPage .gh-about-photo-frame {
  aspect-ratio: 4 / 5 !important;
  min-height: 300px !important;
}

#infoAboutPage .gh-about-story-card {
  min-height: 100% !important;
  padding: 24px 26px !important;
}

#infoAboutPage .gh-about-story-card h1 {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#infoAboutPage .gh-about-richtext {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#infoAboutPage .gh-about-photo-caption {
  margin-top: 10px !important;
}

#infoAboutPage .gh-retro-info-topbar,
#infoAboutPage .gh-retro-info-subtitle {
  display: none !important;
}

@media (max-width: 768px) {
  #infoAboutPage .gh-about-retro-shell {
    padding: 12px !important;
  }

  #infoAboutPage .gh-about-retro-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #infoAboutPage .gh-about-photo-card {
    max-width: 260px !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }

  #infoAboutPage .gh-about-photo-frame {
    min-height: 260px !important;
  }

  #infoAboutPage .gh-about-story-card {
    padding: 16px !important;
  }
}


/* =========================================================
   GH PATCH - About Me title readability fix
   Forces the story panel wide enough so the title never stacks vertically.
========================================================= */

#infoAboutPage .gh-about-retro-shell {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#infoAboutPage .gh-about-retro-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#infoAboutPage .gh-about-photo-card {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
}

#infoAboutPage .gh-about-story-card {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 420px !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#infoAboutPage .gh-about-story-card h1 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  writing-mode: horizontal-tb !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
}

#infoAboutPage .gh-about-richtext,
#infoAboutPage .gh-about-richtext * {
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 900px) {
  #infoAboutPage .gh-about-retro-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #infoAboutPage .gh-about-photo-card {
    flex: none !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  #infoAboutPage .gh-about-story-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  #infoAboutPage .gh-about-story-card h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
  }
}


/* =========================
   SEO CRAWLABLE LINK RESET
   Product/collection shortcuts are real anchors for search engines and
   open-in-new-tab, but remain visually identical to the XP shortcut UI.
========================= */
.desktop-icon,
.collection-product-shortcut,
.desktop-product-shortcut {
  text-decoration: none;
}

.desktop-icon:visited {
  color: white;
}

.collection-product-shortcut:visited,
.desktop-product-shortcut:visited {
  color: #111;
}

/* NameChain SEO route: keep crawlable anchors visually identical to the old XP launchers. */
a.gh-namechain-launcher {
  text-decoration: none !important;
}

#desktop > a.gh-namechain-desktop-icon,
#desktop > a.gh-namechain-desktop-icon:hover,
#desktop > a.gh-namechain-desktop-icon:visited {
  color: #fff !important;
  text-decoration: none !important;
}

/* GH SEO route anchors: real crawlable links, same XP appearance. */
a.desktop-icon,
a.start-page-link {
  text-decoration: none !important;
}

a.desktop-icon {
  color: white;
}

a.start-item.start-page-link {
  color: inherit;
}

/* =========================================================
   GH SEO V9 - Homepage welcome / category context
   Sticky-note style SEO note that fits the desktop theme.
========================================================= */
.gh-home-seo-intro {
  position: absolute;
  top: 24px;
  right: 26px;
  width: min(360px, calc(100vw - 260px));
  z-index: 20;
  background: linear-gradient(180deg, #fff8b0 0%, #f9ef91 100%);
  border: 1px solid #b69f36;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  color: #2d2500;
  transform: rotate(-2.1deg);
}

.gh-home-seo-sticky-note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 28px 28px;
  border-color: transparent transparent rgba(201, 174, 53, 0.45) transparent;
}

.gh-home-note-tape {
  position: absolute;
  top: -11px;
  width: 70px;
  height: 22px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(185, 185, 185, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.gh-home-note-tape-left {
  left: 26px;
  transform: rotate(-12deg);
}

.gh-home-note-tape-right {
  right: 24px;
  transform: rotate(10deg);
}

.gh-home-seo-body {
  padding: 18px 16px 16px;
}

.gh-home-seo-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #756008;
}

.gh-home-seo-intro h1 {
  margin: 0 0 9px;
  font-family: GoldHeartedTitle, Georgia, serif;
  font-size: 31px;
  line-height: 1.02;
  font-weight: 400;
  color: #4b006f;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.65);
}

.gh-home-seo-intro p {
  margin: 0;
  font-size: 12px;
  line-height: 1.48;
}

.gh-home-seo-links-label {
  margin-top: 11px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b5600;
}

.gh-home-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px dashed rgba(117, 96, 8, 0.5);
}

.gh-home-seo-links a,
.gh-home-seo-links a:visited {
  color: #5b0a8f;
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
}

.gh-home-seo-links a:hover,
.gh-home-seo-links a:focus-visible {
  color: #7b20ff;
}

.gh-home-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(117, 96, 8, 0.35);
  font-size: 10px;
}

.gh-home-social-links span {
  font-weight: 700;
  color: #6b5600;
}

.gh-home-social-links a,
.gh-home-social-links a:visited {
  color: #4b006f;
  font-weight: 700;
  text-decoration: underline;
}

.gh-home-social-links a:hover,
.gh-home-social-links a:focus-visible {
  color: #7b20ff;
}

@media (max-width: 768px) {
  .gh-home-seo-intro {
    top: 10px;
    right: 8px;
    width: calc(100vw - 112px);
    max-height: calc(100vh - 84px);
    overflow: auto;
    transform: rotate(-1deg);
  }

  .gh-home-note-tape {
    width: 54px;
    height: 18px;
    top: -9px;
  }

  .gh-home-note-tape-left {
    left: 16px;
  }

  .gh-home-note-tape-right {
    right: 14px;
  }

  .gh-home-seo-body {
    padding: 14px 10px 11px;
  }

  .gh-home-seo-kicker {
    margin-bottom: 4px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .gh-home-seo-intro h1 {
    margin-bottom: 6px;
    font-size: 21px;
    line-height: 1.02;
  }

  .gh-home-seo-intro p {
    font-size: 9.5px;
    line-height: 1.32;
  }

  .gh-home-seo-links-label {
    margin-top: 7px;
    font-size: 9px;
  }

  .gh-home-seo-links {
    gap: 4px 8px;
    margin-top: 5px;
    padding-top: 6px;
  }

  .gh-home-seo-links a,
  .gh-home-seo-links a:visited {
    font-size: 9.5px;
  }

  .gh-home-social-links {
    gap: 4px 7px;
    margin-top: 7px;
    padding-top: 6px;
    font-size: 9px;
  }
}


/* =========================================================
   GH PATCH - Start Menu focus overlay when all 4 app slots are open
   Greys out the desktop so customers choose the Start Menu, an open window,
   or tap Menu again / Escape to exit.
========================================================= */

#ghStartMenuFocusOverlay {
  position: absolute;
  inset: 0;
  z-index: 2147482350;
  display: block;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.06), rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.56) 100%),
    rgba(30, 30, 30, 0.42);
  backdrop-filter: grayscale(1) brightness(0.68);
  -webkit-backdrop-filter: grayscale(1) brightness(0.68);
  cursor: default;
  opacity: 1;
  transition: opacity 0.16s ease;
}

#ghStartMenuFocusOverlay.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#desktop.gh-start-menu-focus-mode #taskbar {
  z-index: 2147483400 !important;
}

#desktop.gh-start-menu-focus-mode #start-menu {
  z-index: 2147483600 !important;
}

#desktop.gh-start-menu-focus-mode .window:not(.hidden):not(.minimized) {
  box-shadow:
    0 0 0 2px rgba(255, 229, 97, 0.42),
    0 12px 30px rgba(0,0,0,.52) !important;
}

#desktop.gh-start-menu-focus-mode .desktop-icons-grid,
#desktop.gh-start-menu-focus-mode .desktop-note,
#desktop.gh-start-menu-focus-mode .gh-desktop-note,
#desktop.gh-start-menu-focus-mode [class*="desktop-note"] {
  filter: grayscale(1) brightness(0.72);
}


/* =========================================================
   GH PATCH - Start Menu focus mode active with any window count
   Overlay dims desktop behind windows; windows dim until selected.
========================================================= */

#ghStartMenuFocusOverlay {
  z-index: 850 !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.07), rgba(0,0,0,0.22) 38%, rgba(0,0,0,0.62) 100%),
    rgba(22, 22, 22, 0.48) !important;
  backdrop-filter: grayscale(1) brightness(0.62) !important;
  -webkit-backdrop-filter: grayscale(1) brightness(0.62) !important;
}

#desktop.gh-start-menu-focus-mode .window:not(.hidden):not(.minimized),
#desktop.gh-start-menu-focus-mode .info-window:not(.hidden):not(.minimized),
#desktop.gh-start-menu-focus-mode .aim-window:not(.hidden):not(.minimized),
#desktop.gh-start-menu-focus-mode .metal-window:not(.hidden):not(.minimized),
#desktop.gh-start-menu-focus-mode #namechainWindow:not(.hidden):not(.minimized) {
  filter: grayscale(1) brightness(0.68) contrast(0.92) !important;
  opacity: 0.72 !important;
  transition: filter 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease !important;
  pointer-events: auto !important;
}

/* Keep the windows clickable while the menu is open. Selecting a window closes the menu,
   then the chosen window returns to normal active color. */
#desktop.gh-start-menu-focus-mode .window:not(.hidden):not(.minimized):hover,
#desktop.gh-start-menu-focus-mode .info-window:not(.hidden):not(.minimized):hover,
#desktop.gh-start-menu-focus-mode .aim-window:not(.hidden):not(.minimized):hover,
#desktop.gh-start-menu-focus-mode .metal-window:not(.hidden):not(.minimized):hover,
#desktop.gh-start-menu-focus-mode #namechainWindow:not(.hidden):not(.minimized):hover {
  filter: grayscale(0.45) brightness(0.86) contrast(0.98) !important;
  opacity: 0.9 !important;
  box-shadow:
    0 0 0 2px rgba(255, 229, 97, 0.62),
    0 12px 30px rgba(0,0,0,.52) !important;
}

#desktop.gh-start-menu-focus-mode #start-menu,
#desktop.gh-start-menu-focus-mode .start-menu,
#desktop.gh-start-menu-focus-mode #taskbar,
#desktop.gh-start-menu-focus-mode .taskbar {
  filter: none !important;
  opacity: 1 !important;
}

#desktop.gh-start-menu-focus-mode .desktop-icons-grid,
#desktop.gh-start-menu-focus-mode .desktop-icon,
#desktop.gh-start-menu-focus-mode .desktop-note,
#desktop.gh-start-menu-focus-mode .gh-desktop-note,
#desktop.gh-start-menu-focus-mode [class*="desktop-note"] {
  filter: grayscale(1) brightness(0.58) !important;
  opacity: 0.62 !important;
}


/* =========================================================
   GH PATCH - Desktop icon text + sticky note polish/mobile fit
========================================================= */

/* Desktop icon labels: white normally, yellow on hover/focus */
.desktop-icons-grid > .desktop-icon,
.desktop-icons-grid > .desktop-icon:visited,
a.desktop-icon,
a.desktop-icon:visited {
  color: #ffffff !important;
}

.desktop-icons-grid > .desktop-icon span,
.desktop-icon span {
  color: #ffffff !important;
  text-shadow:
    1px 1px 0 #26003d,
    2px 2px 2px rgba(0,0,0,0.95),
    0 0 5px rgba(91,0,143,0.75) !important;
}

.desktop-icons-grid > .desktop-icon:hover span,
.desktop-icons-grid > .desktop-icon:focus-visible span,
.desktop-icon:hover span,
.desktop-icon:focus-visible span {
  color: #ffe45c !important;
  text-shadow:
    1px 1px 0 #3a0054,
    2px 2px 2px rgba(0,0,0,0.95),
    0 0 8px rgba(255,229,92,0.9) !important;
}

/* Sticky note title: more outlined and readable */
.gh-home-seo-intro h1 {
  -webkit-text-stroke: 0.45px rgba(255, 244, 153, 0.95);
  text-shadow:
    1px 1px 0 #fff0a6,
    2px 2px 0 rgba(88, 0, 126, 0.8),
    3px 3px 3px rgba(0,0,0,0.34),
    0 0 6px rgba(255, 238, 108, 0.45) !important;
}

/* Keep the smaller top kicker readable too */
.gh-home-seo-kicker {
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.75),
    1px 2px 2px rgba(0,0,0,0.22) !important;
}

/* Mobile: make sticky note smaller so it does not cover the desktop icons */
@media (max-width: 768px) {
  .gh-home-seo-intro {
    top: 8px !important;
    right: 6px !important;
    width: min(255px, 52vw) !important;
    max-height: 235px !important;
    overflow: auto !important;
    transform: rotate(-1deg) !important;
    z-index: 18 !important;
  }

  .gh-home-seo-body {
    padding: 11px 8px 9px !important;
  }

  .gh-home-seo-kicker {
    margin-bottom: 3px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.05em !important;
  }

  .gh-home-seo-intro h1 {
    margin-bottom: 4px !important;
    font-size: 15.5px !important;
    line-height: 0.98 !important;
    -webkit-text-stroke: 0.35px rgba(255, 244, 153, 0.95);
    text-shadow:
      1px 1px 0 #fff0a6,
      2px 2px 0 rgba(88,0,126,0.72),
      0 0 5px rgba(0,0,0,0.24) !important;
  }

  .gh-home-seo-intro p {
    font-size: 8px !important;
    line-height: 1.22 !important;
  }

  .gh-home-seo-links-label {
    margin-top: 5px !important;
    font-size: 7.5px !important;
  }

  .gh-home-seo-links {
    gap: 3px 6px !important;
    margin-top: 3px !important;
    padding-top: 4px !important;
  }

  .gh-home-seo-links a,
  .gh-home-seo-links a:visited {
    font-size: 7.7px !important;
  }

  .gh-home-social-links {
    gap: 3px 6px !important;
    margin-top: 5px !important;
    padding-top: 4px !important;
    font-size: 7.5px !important;
  }

  .gh-home-note-tape {
    width: 42px !important;
    height: 14px !important;
    top: -7px !important;
  }

  .gh-home-note-tape-left {
    left: 12px !important;
  }

  .gh-home-note-tape-right {
    right: 10px !important;
  }

  .gh-home-seo-sticky-note::after {
    border-width: 0 0 18px 18px !important;
  }
}

/* Very narrow phones: keep the note tucked into the upper-right corner */
@media (max-width: 430px) {
  .gh-home-seo-intro {
    width: min(225px, 50vw) !important;
    max-height: 210px !important;
  }

  .gh-home-seo-intro h1 {
    font-size: 14px !important;
  }

  .gh-home-seo-intro p {
    font-size: 7.4px !important;
  }
}


/* =========================================================
   GH SEO V12 - Custom Jewelry landing page content
   People-first copy + process + crawlable internal links.
========================================================= */
#infoCustomOrderPage .simple-page-content > h1 {
  margin-bottom: 7px;
}

.gh-custom-order-intro {
  max-width: 980px;
}

.gh-custom-order-intro p {
  margin: 0 0 8px;
  line-height: 1.48;
}

.gh-custom-order-process {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #8d8370;
  background: #f6f3e8;
  box-shadow: inset 1px 1px 0 #fff;
}

.gh-custom-order-process h2 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.2;
}

.gh-custom-order-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.gh-custom-order-process-grid > div {
  padding: 8px;
  border: 1px solid #c7c1ae;
  background: #fffef7;
}

.gh-custom-order-process-grid strong,
.gh-custom-order-process-grid span {
  display: block;
}

.gh-custom-order-process-grid strong {
  margin-bottom: 3px;
  font-size: 11px;
}

.gh-custom-order-process-grid span {
  font-size: 10.5px;
  line-height: 1.35;
}

.gh-custom-order-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 10px 0 12px;
  padding: 8px 10px;
  border: 1px dashed #8b7c60;
  background: #fffdf2;
}

.gh-custom-order-seo-links a,
.gh-custom-order-seo-links a:visited {
  color: #5b0a8f;
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
}

.gh-custom-order-quote-box h2 {
  margin-bottom: 6px;
}

.gh-custom-order-statusbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 5px 6px;
  border: 1px solid #8f8a7b;
  background: #e7e2d3;
  box-shadow: inset 1px 1px 0 #fff;
  z-index: 3;
}

.gh-custom-order-statusbar-label {
  flex: 0 0 auto;
  min-width: 86px;
  padding: 2px 6px;
  border: 1px solid #9e998b;
  background: #efebdf;
  color: #2b2b2b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.gh-custom-order-statusbar-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 7px;
  border-top: 1px solid #7b776b;
  border-left: 1px solid #7b776b;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #fff;
  color: #2d2d2d;
  font-size: 10px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .gh-custom-order-process {
    margin: 8px 0;
    padding: 7px;
  }

  .gh-custom-order-process h2 {
    font-size: 13px;
  }

  .gh-custom-order-process-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .gh-custom-order-process-grid > div {
    padding: 6px;
  }

  .gh-custom-order-process-grid strong,
  .gh-custom-order-process-grid span,
  .gh-custom-order-seo-links a,
  .gh-custom-order-seo-links a:visited {
    font-size: 9.5px;
  }

  .gh-custom-order-statusbar {
    gap: 4px;
    padding: 4px;
  }

  .gh-custom-order-statusbar-label {
    min-width: 66px;
    font-size: 8.5px;
    padding: 2px 4px;
  }

  .gh-custom-order-statusbar-field {
    font-size: 8.8px;
    padding: 3px 5px;
  }
}


/* =========================================================
   GH SEO V13 - Custom Jewelry previous work gallery + looping reel
   XP "My Pictures" inspired proof-of-work section.
========================================================= */
.gh-custom-order-portfolio {
  margin: 12px 0 14px;
  border: 1px solid #6f6f6f;
  background: #ece9d8;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 rgba(0,0,0,.12);
}

.gh-custom-order-portfolio-titlebar {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  background: linear-gradient(to bottom, #b46cff 0%, #7b20ff 15%, #5b0a8f 58%, #2a003d 100%);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.gh-custom-order-portfolio-titlebar h2 {
  margin: 0;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif !important;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: inherit;
}

.gh-custom-order-portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 10px;
  padding: 10px;
  align-items: start;
}

.gh-custom-order-portfolio-grid.no-video {
  grid-template-columns: 1fr;
}

.gh-custom-order-gallery-panel,
.gh-custom-order-video-panel {
  min-width: 0;
  padding: 7px;
  border: 1px solid #aca899;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff;
  overflow: hidden;
}

.gh-custom-order-gallery-label {
  margin: 0 0 6px;
  padding: 3px 5px;
  border: 1px solid #d4d0c8;
  background: #f1f0e8;
  color: #2b2b2b;
  font-size: 10px;
  font-weight: 700;
}

.gh-custom-order-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.gh-custom-order-gallery-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid #b8b8b8;
  background: #f7f7f7;
  box-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.08);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
}

.gh-custom-order-gallery-card:hover,
.gh-custom-order-gallery-card:focus-visible {
  border-color: #5b0a8f;
  outline: 1px solid #7b20ff;
  outline-offset: 1px;
}

.gh-custom-order-gallery-zoom {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}

.gh-custom-order-gallery-card-legacy {
  grid-column: span 2;
}

.gh-custom-order-gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-custom-order-video-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 2px inset #d4d0c8;
  background: #000;
  aspect-ratio: 16 / 9;
  min-height: 250px;
}

.gh-custom-order-video-frame > video,
.gh-custom-order-video-frame > iframe,
.gh-custom-order-video-frame video,
.gh-custom-order-video-frame iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

.gh-custom-order-loop-video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.gh-custom-order-video-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  pointer-events: none;
}

@media (max-width: 768px) {
  .gh-custom-order-portfolio {
    margin: 8px 0 10px;
  }

  .gh-custom-order-portfolio-titlebar {
    min-height: 23px;
    padding: 3px 5px;
  }

  .gh-custom-order-portfolio-titlebar h2 {
    font-size: 11px;
  }

  .gh-custom-order-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
  }

  .gh-custom-order-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .gh-custom-order-video-frame {
    min-height: 210px;
  }

  .gh-custom-order-gallery-label {
    font-size: 9px;
  }
}


/* =========================================================
   GH SEO V21 - Custom Jewelry bottom XP information bar
   Mirrors the compact NameChain SEO/status strip while keeping
   the main Custom Order page independently scrollable.
========================================================= */
#infoWindow .info-window-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#infoWindow .simple-info-toolbar,
#infoWindow .info-address-bar {
  flex: 0 0 auto !important;
}

#infoWindow .info-page.active-info-page {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gh-custom-order-bottom-seo {
  display: none;
  flex: 0 0 auto;
  margin: 0 8px 8px;
  padding: 4px;
  border: 1px solid #9d967f;
  background: #ece9d8;
  box-shadow: inset 1px 1px 0 #fff;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  color: #1a1a1a;
  z-index: 20;
}

#infoCustomOrderPage.active-info-page ~ .gh-custom-order-bottom-seo {
  display: block;
}

/* The Custom Order page is the scrollable middle pane; the SEO bar stays fixed below it. */
#infoWindow #infoCustomOrderPage.active-info-page {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

.gh-custom-order-bottom-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px solid #9f9b8b;
  background: linear-gradient(to bottom, #f8f7f1 0%, #dcd8c9 100%);
  box-shadow: inset 1px 1px 0 #fff;
}

.gh-custom-order-bottom-badge {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  border: 1px solid #777267;
  background: #f5f3e9;
  color: #333;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.gh-custom-order-bottom-heading {
  margin: 0;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  color: #1a1a1a;
}

.gh-custom-order-bottom-field {
  max-height: 44px;
  margin-top: 3px;
  padding: 4px 7px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #8f8b7a;
  background: #fbfaf5;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c9c3b0;
  scrollbar-width: thin;
}

.gh-custom-order-bottom-copy,
.gh-custom-order-bottom-copy p {
  font-family: TahomaXP, Tahoma, Verdana, sans-serif !important;
}

.gh-custom-order-bottom-copy p {
  margin: 0 0 3px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.gh-custom-order-bottom-copy p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  #infoWindow .info-window-content {
    overflow: hidden !important;
  }

  #infoWindow .info-page.active-info-page {
    overflow-y: auto !important;
  }

  .gh-custom-order-bottom-seo {
    margin: 0 5px 5px;
    padding: 3px;
  }

  .gh-custom-order-bottom-heading {
    font-size: 10px;
  }

  .gh-custom-order-bottom-field {
    max-height: 38px;
    padding: 3px 5px;
  }

  .gh-custom-order-bottom-copy p {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
}


/* =========================
   CUSTOM GRILLZ COMING SOON PAGE
========================= */
.gh-custom-grillz-page .simple-page-content.gh-grillz-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gh-grillz-hero {
  order: 2;
  border: 1px solid #b7b4a6;
  background: #f7f4ea;
  padding: 18px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c7c0aa;
}

.gh-grillz-hero h1 {
  font-family: var(--body-font);
  font-size: 34px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.gh-grillz-coming-soon {
  display: block;
  width: 100%;
  margin: 2px auto 16px !important;
  padding: 0 8px;
  font-family: var(--title-font) !important;
  font-size: 39px !important;
  line-height: 1.08 !important;
  letter-spacing: 0.02em;
  font-weight: normal !important;
  text-align: center;
  color: #6d0ca1;
  background: transparent;
  border: 0;
  text-shadow: 1px 1px 0 #f0cf46;
  animation: none !important;
}

.gh-grillz-intro-copy p + p {
  margin-top: 12px;
}

.gh-grillz-gallery-wrap {
  order: 1;
  border: 1px solid #b7b4a6;
  background: #ece8d7;
  padding: 10px;
}

.gh-grillz-titlebar {
  margin-bottom: 10px;
}

.gh-grillz-gallery-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 150px;
  gap: 12px;
  align-items: start;
}

.gh-grillz-main-panel,
.gh-grillz-thumbs-panel {
  background: #f8f8f0;
  border: 1px solid #bcb8a8;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #ccc4ad;
}

.gh-grillz-main-image-button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px;
  text-align: left;
  cursor: zoom-in;
}

.gh-grillz-main-image-button img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
  border: 1px solid #b8b2a1;
  background: #fff;
}

.gh-grillz-main-tip {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #4d4a40;
}

.gh-grillz-main-placeholder {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: #5e5a4e;
}

.gh-grillz-thumbs-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.gh-grillz-thumb {
  border: 2px solid #c7c0aa;
  background: #fff;
  padding: 4px;
  cursor: pointer;
}

.gh-grillz-thumb.is-active {
  border-color: #7b2fd7;
  box-shadow: 0 0 0 1px #efe3ff inset;
}

.gh-grillz-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gh-grillz-links {
  order: 5;
  margin-top: -4px;
}

.gh-grillz-waitlist-box {
  order: 6;
  margin-top: 0;
}

@media (max-width: 900px) {
  .gh-grillz-gallery-shell {
    grid-template-columns: 1fr;
  }

  .gh-grillz-thumbs-panel {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gh-grillz-thumb {
    width: calc(25% - 6px);
  }
}

@media (max-width: 640px) {
  .gh-grillz-hero h1 {
    font-size: 28px;
  }

  .gh-grillz-coming-soon {
    font-size: 24px;
    padding: 0;
  }

  .gh-grillz-thumb {
    width: calc(50% - 4px);
  }
}




.gh-grillz-options {
  order: 3;
  border: 1px solid #b7b4a6;
  background: #ece8d7;
  padding: 10px;
}

.gh-grillz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gh-grillz-option-panel {
  min-width: 0;
  border: 1px solid #bcb8a8;
  background: #f8f8f0;
  padding: 10px 12px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #ccc4ad;
}

.gh-grillz-option-panel h3 {
  margin: 0 0 7px;
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.2;
}

.gh-grillz-option-panel p {
  margin: 0;
  line-height: 1.45;
}

.gh-grillz-options-note {
  margin: 9px 2px 0;
  font-size: 12px;
  line-height: 1.35;
  color: #555044;
}

@media (max-width: 700px) {
  .gh-grillz-options-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GH SEO V27 - Custom Grillz scroll + looping reel
========================================================= */
#infoWindow #infoCustomGrillzPage.active-info-page {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


.gh-grillz-video-wrap {
  order: 4;
  border: 1px solid #b7b4a6;
  background: #ece8d7;
  padding: 10px;
}

.gh-grillz-video-panel {
  width: 100%;
  min-width: 0;
  padding: 7px;
  border: 1px solid #aca899;
  background: #fff;
  box-shadow: inset 1px 1px 0 #fff;
  overflow: hidden;
}

.gh-grillz-video-frame {
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  aspect-ratio: 16 / 9;
}

.gh-grillz-video-frame video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gh-grillz-video-frame {
    min-height: 190px;
  }
}


/* =========================
   GOLDHEARTED EDU - TUTORIAL & CLASS HUB
========================= */
#infoCustomInfoPage .gh-edu-learning-section {
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid #9d967f;
  background: #ece9d8;
  box-shadow: inset 1px 1px 0 #fff;
}

#infoCustomInfoPage .gh-edu-learning-title {
  margin: -1px -1px 8px;
}

#infoCustomInfoPage .gh-edu-learning-intro {
  margin: 0 2px 10px;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  color: #252525;
  font-size: 12px;
  line-height: 1.45;
}

#infoCustomInfoPage .gh-edu-learning-intro p {
  margin: 0;
}

#infoCustomInfoPage .gh-edu-learning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#infoCustomInfoPage .gh-edu-learning-card {
  min-width: 0;
  border: 1px solid #aaa392;
  background: #fbfaf5;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 rgba(0,0,0,.08);
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
}

#infoCustomInfoPage .gh-edu-learning-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 5px 7px;
  border-bottom: 1px solid #c9c3b1;
  background: linear-gradient(to bottom, #f9f8f2, #ddd8c8);
}

#infoCustomInfoPage .gh-edu-learning-card-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
  border: 1px solid #837d6d;
  background: #fff;
  color: #5b0a8f;
  font-size: 9px;
}

#infoCustomInfoPage .gh-edu-learning-card h2 {
  margin: 0;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: #161616;
}

#infoCustomInfoPage .gh-edu-learning-card p {
  margin: 0;
  padding: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #343434;
}

@media (max-width: 900px) {
  #infoCustomInfoPage .gh-edu-learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #infoCustomInfoPage .gh-edu-learning-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V34 - About GoldHearted SEO / brand story
   Uses the shared Info-window scroll pane and keeps all added
   search copy visible, editable, and consistent with the XP UI.
========================================================= */
#infoAboutPage .gh-about-display-title,
#infoAboutPage .gh-about-story-card h1 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  color: #5d168d;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
  text-shadow: 1px 1px 0 #fff2a6;
  font-weight: bold;
}

#infoAboutPage .gh-about-profile-subtitle {
  margin: 0 0 16px !important;
  padding: 8px 10px;
  color: #3b1853;
  background: #f5edd3;
  border: 1px solid #c8b66f;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: bold;
}

#infoAboutPage .gh-about-retro-details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

#infoAboutPage .gh-about-foundation {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  border: 1px solid #77628d;
  background: rgba(255,253,244,.94);
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(58,25,91,.13);
}

#infoAboutPage .gh-about-foundation-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  color: #fff;
  background: linear-gradient(to right, #2e0552, #8e2bd3, #e4b735);
}

#infoAboutPage .gh-about-foundation-header h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

#infoAboutPage .gh-about-foundation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

#infoAboutPage .gh-about-foundation-card {
  min-width: 0;
  padding: 12px;
  color: #2b1b35;
  background: #fffdf4;
  border: 1px solid #a494b8;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 rgba(0,0,0,.08);
}

#infoAboutPage .gh-about-foundation-card h2 {
  margin: 0 0 8px !important;
  color: #651297 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
}

#infoAboutPage .gh-about-foundation-card p {
  margin: 0 !important;
  color: #33263c !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

#infoAboutPage .gh-about-mission-card {
  background: linear-gradient(135deg, #fffdf4, #f5e8ff);
}

#infoAboutPage .gh-about-links {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 9px 11px;
  color: #2f163d;
  background: #fffdf4;
  border: 1px dashed #8e72ad;
}

#infoAboutPage .gh-about-links > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

#infoAboutPage .gh-about-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
}

#infoAboutPage .gh-about-link-row a {
  color: #641394;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}

@media (max-width: 900px) {
  #infoAboutPage .gh-about-foundation-grid {
    grid-template-columns: 1fr !important;
  }

  #infoAboutPage .gh-about-display-title,
  #infoAboutPage .gh-about-story-card h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
  }
}

/* =========================================================
   V35 - About GoldHearted alignment + founder story
   Keeps the profile/story windows level, uses one consistent XP
   title-bar font, and adds editable background + mission panels.
========================================================= */
#infoAboutPage .gh-about-retro-grid {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

#infoAboutPage .gh-about-photo-card,
#infoAboutPage .gh-about-story-card {
  margin: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  top: auto !important;
  transform: none !important;
}

#infoAboutPage .gh-about-photo-card {
  width: 320px !important;
  max-width: 320px !important;
}

#infoAboutPage .gh-about-story-card {
  width: 100% !important;
  min-width: 0 !important;
}

/* All secondary About window title bars match Owner / Designer. */
#infoAboutPage .gh-about-photo-header,
#infoAboutPage .gh-about-foundation-header,
#infoAboutPage .gh-about-origin-titlebar {
  min-height: 29px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 7px 9px !important;
  color: #fff !important;
  background: linear-gradient(to right, #2e0552, #8e2bd3, #e4b735) !important;
  border: 0 !important;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

#infoAboutPage .gh-about-foundation-header .gh-retro-info-light {
  display: none !important;
}

#infoAboutPage .gh-about-foundation-header h2,
#infoAboutPage .gh-about-origin-titlebar h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

#infoAboutPage .gh-about-foundation {
  clear: both !important;
  margin-top: 16px !important;
  top: auto !important;
  transform: none !important;
}

#infoAboutPage .gh-about-origin-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#infoAboutPage .gh-about-origin-card {
  min-width: 0;
  overflow: hidden;
  background: rgba(255,253,244,.96);
  border: 1px solid #7e6d9e;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.12), 2px 2px 0 rgba(58,25,91,.13);
}

#infoAboutPage .gh-about-origin-body {
  padding: 13px 14px 14px;
  color: #33263c;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#infoAboutPage .gh-about-origin-body p {
  margin: 0 0 9px !important;
}

#infoAboutPage .gh-about-origin-body p:last-child {
  margin-bottom: 0 !important;
}

#infoAboutPage .gh-about-mission-statement-card .gh-about-origin-body {
  background: linear-gradient(135deg, #fffdf4, #f5e8ff);
}

@media (max-width: 900px) {
  #infoAboutPage .gh-about-retro-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #infoAboutPage .gh-about-photo-card {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  #infoAboutPage .gh-about-origin-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V36 - About GoldHearted layout correction
   Neutralizes the legacy simple-page-content desktop grid that was
   squeezing later About sections into narrow/vertical columns.
========================================================= */
#infoAboutPage .gh-about-retro-shell,
#infoAboutPage .gh-about-retro-shell * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* Rich text inside the new XP cards should not inherit the old standalone
   About text-box border/padding treatment. */
#infoAboutPage .gh-about-story-card .info-richtext,
#infoAboutPage .gh-about-origin-body.info-richtext,
#infoAboutPage .gh-about-foundation-card .info-richtext {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#infoAboutPage .gh-about-story-card .info-richtext p,
#infoAboutPage .gh-about-origin-body.info-richtext p,
#infoAboutPage .gh-about-foundation-card .info-richtext p {
  width: 100% !important;
  max-width: none !important;
  white-space: normal !important;
  line-height: 1.48 !important;
}

@media (min-width: 769px) {
  /* Critical fix: older CSS made every direct child of the About shell a
     grid item. Keep the page itself a normal vertical document instead. */
  #infoAboutPage .simple-page-content.gh-about-retro-shell {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 22px 28px 28px !important;
    box-sizing: border-box !important;
  }

  /* Top profile row: portrait on the left, About/brand story on the right. */
  #infoAboutPage .gh-about-retro-grid {
    display: grid !important;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #infoAboutPage .gh-about-photo-card {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: start !important;
  }

  #infoAboutPage .gh-about-story-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: start !important;
  }

  /* Founder story: two balanced, readable windows under the profile row. */
  #infoAboutPage .gh-about-origin-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    align-items: stretch !important;
  }

  #infoAboutPage .gh-about-origin-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #infoAboutPage .gh-about-origin-body {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Capabilities: two columns with the culture/community story spanning the
     full row. This prevents skinny three-column paragraphs. */
  #infoAboutPage .gh-about-foundation {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
  }

  #infoAboutPage .gh-about-foundation-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  #infoAboutPage .gh-about-foundation-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #infoAboutPage .gh-about-foundation-card:last-child {
    grid-column: 1 / -1 !important;
  }

  #infoAboutPage .gh-about-foundation-card h2,
  #infoAboutPage .gh-about-foundation-card p,
  #infoAboutPage .gh-about-foundation-card li {
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  #infoAboutPage .gh-about-links {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  #infoAboutPage .simple-page-content.gh-about-retro-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #infoAboutPage .gh-about-retro-grid,
  #infoAboutPage .gh-about-origin-grid,
  #infoAboutPage .gh-about-foundation-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #infoAboutPage .gh-about-foundation-card:last-child {
    grid-column: auto !important;
  }
}

/* =========================================================
   V37 - Shared Info-window quick links + copy cleanup
   Keeps navigation fixed directly below the address bar on pages
   that already had quick links, and removes About badge clutter.
========================================================= */
#infoWindow .gh-info-quicklinks-host {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-bottom: 1px solid #aca899;
  background: #ece9d8;
  box-shadow: inset 0 1px 0 #fff;
  z-index: 8;
}

#infoWindow .gh-info-quicklinks-host.hidden,
#infoWindow .gh-info-quicklinks.hidden {
  display: none !important;
}

#infoWindow .gh-info-quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  min-height: 24px;
  margin: 0;
  padding: 5px 8px;
  box-sizing: border-box;
  border: 1px dashed #8b7c60;
  background: #fffdf2;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
}

#infoWindow .gh-info-quicklinks-label {
  color: #292929;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

#infoWindow .gh-info-quicklinks a,
#infoWindow .gh-info-quicklinks a:visited {
  color: #5b0a8f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  white-space: nowrap;
}

/* Page-local link bars were replaced by the shared bar above. */
#infoCustomGrillzPage .gh-grillz-links,
#infoAboutPage .gh-about-links,
#infoCustomOrderPage .gh-custom-order-seo-links {
  display: none !important;
}

/* The old specialty badges are intentionally removed from About. */
#infoAboutPage .gh-about-retro-details {
  display: none !important;
}

/* The Grillz shell no longer reserves a fifth flex-order slot for links. */
.gh-grillz-links {
  order: 0 !important;
  margin: 0 !important;
}

#infoCustomGrillzPage .gh-grillz-option-panel h3 {
  margin-bottom: 8px;
}

#infoCustomGrillzPage .gh-grillz-option-panel .info-richtext p {
  font-weight: normal !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  #infoWindow .gh-info-quicklinks-host {
    padding: 4px 6px;
  }

  #infoWindow .gh-info-quicklinks {
    gap: 4px 10px;
    padding: 4px 6px;
  }

  #infoWindow .gh-info-quicklinks-label,
  #infoWindow .gh-info-quicklinks a,
  #infoWindow .gh-info-quicklinks a:visited {
    font-size: 9px;
  }
}


/* =========================================================
   GH V38 - FAQ conversion + SEO layout
========================================================= */
#infoFaqPage .gh-faq-retro-shell {
  max-width: 1040px !important;
  width: 100% !important;
  padding: 18px 22px 28px !important;
}

#infoFaqPage .gh-faq-header-no-image {
  grid-template-columns: 1fr !important;
}

#infoFaqPage .gh-faq-display-title {
  margin: 0 0 8px;
  color: #5d168d;
  font-size: clamp(28px, 4vw, 46px);
  line-height: .9;
  text-shadow: 1px 1px 0 #fff2a6;
}

#infoFaqPage .gh-faq-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

#infoFaqPage .gh-faq-topic-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  color: #3f1959;
  background: linear-gradient(to bottom, #fffdf7, #eee4c7);
  border: 1px solid #9b86af;
  box-shadow: inset 1px 1px 0 #fff;
  font-size: 11px;
  font-weight: bold;
}

#infoFaqPage .gh-faq-item summary strong {
  min-width: 0;
  line-height: 1.25;
}

#infoFaqPage .gh-faq-answer {
  font-size: 14px;
  line-height: 1.5;
}

#infoFaqPage .gh-faq-answer p {
  margin-top: 0;
}

#infoFaqPage .gh-faq-help-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 13px 14px;
  background: #fffdf4;
  border: 1px solid #7e6d9e;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(58,25,91,.12);
}

#infoFaqPage .gh-faq-help-panel strong {
  display: block;
  margin-bottom: 4px;
  color: #4e1275;
  font-size: 14px;
}

#infoFaqPage .gh-faq-help-panel p {
  margin: 0;
  color: #33263c;
  font-size: 12px;
  line-height: 1.4;
}

#infoFaqPage .gh-faq-help-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

#infoFaqPage .gh-faq-help-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 5px 9px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to bottom, #9a35dc, #4a086f);
  border: 1px solid #32034c;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: bold;
}

#infoFaqPage .gh-faq-help-links a:hover,
#infoFaqPage .gh-faq-help-links a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 768px) {
  #infoFaqPage .gh-faq-retro-shell {
    padding: 10px 10px 20px !important;
  }

  #infoFaqPage .gh-faq-help-panel {
    grid-template-columns: 1fr;
  }

  #infoFaqPage .gh-faq-help-links {
    justify-content: flex-start;
  }

  #infoFaqPage .gh-faq-help-links a {
    width: 100%;
  }
}


/* =========================================================
   GH V39 - FAQ header cleanup + button legibility
========================================================= */
#infoFaqPage .gh-faq-list-title h1 {
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}

#infoFaqPage .gh-faq-help-links a,
#infoFaqPage .gh-faq-help-links a:visited,
#infoFaqPage .gh-faq-help-links a:hover,
#infoFaqPage .gh-faq-help-links a:focus-visible,
#infoFaqPage .gh-faq-help-links .start-page-link,
#infoFaqPage .gh-faq-help-links .gh-namechain-launcher {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* =========================================================
   V40 — ALL PRODUCTS SHOPPING HUB
   Compact SEO intro + shared Info-window behavior.
========================================================= */
#infoAllProductsPage .all-products-page {
  padding-top: 14px !important;
}

#infoAllProductsPage .gh-all-products-intro {
  margin: 0 0 18px !important;
  padding: 14px 16px 13px !important;
  border: 1px solid #c8c1a8 !important;
  background: linear-gradient(to bottom, #fffef8 0%, #f4f0df 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

#infoAllProductsPage .gh-all-products-heading {
  margin: 0 0 5px !important;
  font-family: var(--title-font) !important;
  font-size: clamp(30px, 3.5vw, 48px) !important;
  line-height: 1.02 !important;
  font-weight: 400 !important;
  color: #5b0a8f !important;
}

#infoAllProductsPage .gh-all-products-intro p {
  margin: 0 !important;
  max-width: 980px !important;
  font-family: var(--body-font) !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  color: #2f2a33 !important;
}

#infoAllProductsPage .all-products-section-title {
  font-family: var(--body-font) !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #4f076f !important;
}

@media (max-width: 700px) {
  #infoAllProductsPage .all-products-page {
    padding-top: 10px !important;
  }

  #infoAllProductsPage .gh-all-products-intro {
    margin-bottom: 13px !important;
    padding: 11px 12px !important;
  }

  #infoAllProductsPage .gh-all-products-heading {
    font-size: 29px !important;
  }

  #infoAllProductsPage .gh-all-products-intro p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #infoAllProductsPage .all-products-section-title {
    font-size: 19px !important;
  }
}


/* =========================================================
   V41 — BLACK JESUS COLLECTION SEO / MEDIA EXPERIENCE
========================================================= */

.gh-black-jesus-collection-page {
  padding: 0 !important;
  background: #ece9d8 !important;
}

.gh-black-jesus-shell {
  width: 100%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ece9d8;
  box-sizing: border-box;
}

.gh-black-jesus-hero,
.gh-black-jesus-gallery-wrap,
.gh-black-jesus-video-wrap,
.gh-black-jesus-products,
.gh-black-jesus-story {
  border: 1px solid #7f9db9;
  background: #fff;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #d4d0c8;
}

.gh-black-jesus-hero-copy {
  padding: 18px 20px 16px;
}

.gh-black-jesus-title {
  margin: 0 0 5px !important;
  font-family: var(--title-font, Tahoma, Arial, sans-serif) !important;
  font-size: clamp(30px, 4.2vw, 52px) !important;
  line-height: 1 !important;
  text-align: center;
  color: #4b0876;
  text-shadow: 1px 1px 0 #fff;
}

.gh-black-jesus-kicker {
  margin: 0 auto 12px;
  max-width: 880px;
  text-align: center;
  font-family: TahomaXP, Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #333;
}

.gh-black-jesus-intro,
.gh-black-jesus-story-copy {
  max-width: 980px;
  margin: 0 auto;
  color: #222;
}

.gh-black-jesus-intro p,
.gh-black-jesus-story-copy p {
  margin: 0 0 10px;
  font-family: TahomaXP, Tahoma, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.gh-black-jesus-intro p:last-child,
.gh-black-jesus-story-copy p:last-child {
  margin-bottom: 0;
}

.gh-black-jesus-titlebar {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #7f9db9 !important;
  border-radius: 0 !important;
}

.gh-black-jesus-titlebar h2 {
  margin: 0 !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.gh-black-jesus-gallery-shell {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: stretch;
}

.gh-black-jesus-main-panel,
.gh-black-jesus-thumbs-panel {
  border: 1px solid #aca899;
  background: #f7f7f7;
}

.gh-black-jesus-main-image-button {
  width: 100%;
  min-height: 360px;
  padding: 10px;
  border: 0;
  background: #111;
  cursor: zoom-in;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-black-jesus-main-image-button img {
  width: 100%;
  height: min(58vh, 620px);
  min-height: 340px;
  object-fit: contain;
  display: block;
}

.gh-black-jesus-main-tip {
  position: absolute;
  right: 9px;
  bottom: 8px;
  padding: 4px 7px;
  border: 1px solid #fff;
  background: rgba(0,0,0,.72);
  color: #fff;
  font: 11px TahomaXP, Tahoma, Arial, sans-serif;
}

.gh-black-jesus-thumbs-panel {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
}

.gh-black-jesus-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border: 1px solid #7f9db9;
  background: #fff;
  cursor: pointer;
}

.gh-black-jesus-thumb.is-active {
  outline: 2px solid #6b2b91;
  outline-offset: 1px;
}

.gh-black-jesus-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gh-black-jesus-video-panel {
  margin: 0;
  padding: 12px;
  text-align: center;
}

.gh-black-jesus-video-frame {
  width: min(100%, 860px);
  margin: 0 auto;
  background: #000;
}

.gh-black-jesus-video-frame video {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  display: block;
}

.gh-black-jesus-video-panel figcaption {
  max-width: 820px;
  margin: 8px auto 0;
  font: 11px/1.4 TahomaXP, Tahoma, Arial, sans-serif;
  color: #555;
}

.gh-black-jesus-products-grid {
  min-height: 0 !important;
  padding: 18px;
  gap: 28px;
  justify-content: center;
}

.gh-black-jesus-products-grid .collection-product-shortcut {
  width: 145px;
  min-height: 155px;
  text-align: center;
}

.gh-black-jesus-products-grid .collection-product-shortcut img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.gh-black-jesus-products-grid .collection-product-shortcut span {
  max-width: 140px;
  font-weight: 700;
  line-height: 1.25;
}

.gh-black-jesus-story-copy {
  padding: 15px 18px 6px;
}

.gh-black-jesus-links {
  position: static !important;
  margin: 4px 14px 14px !important;
  width: auto !important;
}

@media (max-width: 700px) {
  .gh-black-jesus-shell {
    padding: 8px;
    gap: 9px;
  }

  .gh-black-jesus-hero-copy {
    padding: 14px 12px;
  }

  .gh-black-jesus-title {
    font-size: clamp(25px, 9vw, 38px) !important;
  }

  .gh-black-jesus-gallery-shell {
    grid-template-columns: 1fr;
    padding: 8px;
    gap: 8px;
  }

  .gh-black-jesus-main-image-button {
    min-height: 250px;
    padding: 6px;
  }

  .gh-black-jesus-main-image-button img {
    height: 46vh;
    min-height: 240px;
  }

  .gh-black-jesus-thumbs-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px;
    gap: 6px;
  }

  .gh-black-jesus-products-grid {
    padding: 10px !important;
    gap: 12px !important;
  }

  .gh-black-jesus-products-grid .collection-product-shortcut {
    width: 100% !important;
    min-height: 128px !important;
  }
}


/* =========================================================
   V44 — PRODUCT DESCRIPTION RICH-TEXT FIX
   Preserve Shopify formatting from every product-open path.
   Keep the original cream/gold product color family.
========================================================= */
#productDescription.product-description-rich {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

#productDescription.product-description-rich > :first-child {
  margin-top: 0;
}

#productDescription.product-description-rich > :last-child {
  margin-bottom: 0;
}

#productDescription.product-description-rich p {
  margin: 0 0 12px;
  line-height: 1.42;
}

#productDescription.product-description-rich h2,
#productDescription.product-description-rich h3,
#productDescription.product-description-rich h4 {
  box-sizing: border-box;
  margin: 14px 0 8px;
  padding: 5px 8px;
  border: 1px solid #b99734;
  background: linear-gradient(180deg, #fff4c9 0%, #ead99a 100%);
  color: #4a3900;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

#productDescription.product-description-rich ul,
#productDescription.product-description-rich ol {
  box-sizing: border-box;
  margin: 8px 0 12px;
  padding: 9px 12px 9px 30px;
  border: 1px solid #c8c1aa;
  background: rgba(255, 254, 244, 0.72);
}

#productDescription.product-description-rich li {
  margin: 4px 0;
  line-height: 1.32;
}

#productDescription.product-description-rich strong {
  font-weight: 700;
}

#productDescription.product-description-rich a {
  color: #6c5200;
  text-decoration: underline;
}

@media (min-width: 761px) {
  #productDescription.product-description-rich ul.gh-spec-grid,
  #productDescription.product-description-rich ol.gh-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
}

@media (max-width: 760px) {
  #productDescription.product-description-rich {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  #productDescription.product-description-rich h2,
  #productDescription.product-description-rich h3,
  #productDescription.product-description-rich h4 {
    font-size: 13px !important;
  }
}


/* =========================================================
   V45 — STRUCTURED PRODUCT SPECIFICATIONS
   Keep the story as normal description copy; only the dense
   specification portion gets a fixed, readable XP info layout.
========================================================= */
#productDescription.product-description-rich .gh-product-story {
  margin: 0 0 14px;
}

#productDescription.product-description-rich .gh-product-story p {
  margin: 0;
  line-height: 1.42;
}

#productDescription.product-description-rich .gh-product-spec-card {
  box-sizing: border-box;
  margin: 12px 0 16px;
  border: 1px solid #b8ad83;
  background: #f8f3df;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85);
}

#productDescription.product-description-rich .gh-product-spec-title {
  padding: 6px 9px;
  border-bottom: 1px solid #b8ad83;
  background: linear-gradient(180deg, #f6d96b 0%, #dfb83f 100%);
  color: #3f3200;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

#productDescription.product-description-rich .gh-product-spec-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: 10px;
  padding: 10px;
}

#productDescription.product-description-rich .gh-product-spec-group {
  min-width: 0;
  padding: 8px;
  border: 1px solid #d1c8a8;
  background: rgba(255, 255, 250, 0.7);
}

#productDescription.product-description-rich .gh-product-spec-stones {
  grid-column: 1 / -1;
}

#productDescription.product-description-rich .gh-product-spec-subtitle {
  margin: 0 0 6px;
  color: #4a3900;
  font-weight: 700;
  line-height: 1.2;
}

#productDescription.product-description-rich .gh-product-spec-rows {
  display: grid;
  gap: 3px;
}

#productDescription.product-description-rich .gh-product-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dotted #c9bf9c;
}

#productDescription.product-description-rich .gh-product-spec-row:last-child {
  border-bottom: 0;
}

#productDescription.product-description-rich .gh-product-spec-label {
  min-width: 0;
}

#productDescription.product-description-rich .gh-product-spec-value {
  white-space: nowrap;
  font-weight: 700;
  text-align: right;
}

#productDescription.product-description-rich .gh-product-stone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#productDescription.product-description-rich .gh-product-stone-list span {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid #c9bf9c;
  background: #fffdf4;
  line-height: 1.15;
}

@media (max-width: 760px) {
  #productDescription.product-description-rich .gh-product-spec-layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  #productDescription.product-description-rich .gh-product-spec-stones {
    grid-column: auto;
  }

  #productDescription.product-description-rich .gh-product-spec-title {
    font-size: 13px;
  }
}


/* =========================================================
   SHOPIFY VARIANT MATRIX AVAILABILITY
   Gray out combinations that do not exist in Shopify while
   keeping real made-to-order variants usable at zero inventory.
========================================================= */
.auto-metal-toolbar-item.gh-variant-unavailable {
  opacity: 0.42;
}

.auto-metal-toolbar-item.gh-variant-unavailable .auto-metal-btn,
.auto-metal-btn:disabled {
  cursor: not-allowed !important;
  filter: grayscale(1);
}

.auto-metal-toolbar-item.gh-variant-unavailable .toolbar-text {
  opacity: 0.72;
}

.auto-variant-select option:disabled {
  color: #777;
}

/* =========================================================
   GH V49 - Product gallery simplification
   - Main product window uses one View Gallery launcher only.
   - Gallery thumbnail labels are generated as Picture 1, 2, 3...
   ========================================================= */
.product-gallery-launch-row {
  justify-content: flex-start;
  gap: 0;
}

.product-gallery-launch-row .gallery-open-btn {
  margin-left: 0;
}

#photoGallery .gallery-thumb-row {
  align-items: flex-start;
}

#photoGallery .gallery-thumb {
  cursor: pointer;
}

/* =========================================================
   GH V50 - Centered graffiti View Gallery launcher
   ========================================================= */
.product-gallery-launch-row {
  width: min(100%, 520px) !important;
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 14px !important;
}

.product-gallery-launch-row .gallery-open-btn {
  width: 240px !important;
  max-width: 78% !important;
  min-width: 190px !important;
  height: 64px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
}

@media (max-width: 700px) {
  .product-gallery-launch-row .gallery-open-btn {
    width: 220px !important;
    max-width: 82% !important;
    min-width: 170px !important;
    height: 56px !important;
    font-size: 21px !important;
    padding: 0 12px !important;
  }
}


/* =========================================================
   GH PATCH - XP fundraising thermometer for product donations
========================================================= */
.gh-xp-fundraiser {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 18px 0 12px !important;
  background: #ece9d8 !important;
  border: 2px solid #8b21cf !important;
  box-shadow:
    2px 2px 0 rgba(0,0,0,0.3),
    inset 1px 1px 0 rgba(255,255,255,0.96) !important;
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
  color: #1f1f1f !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.gh-xp-fundraiser-titlebar {
  min-height: 25px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 7px !important;
  background: var(--gh-title-gradient) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-shadow: 1px 1px 0 #36005c, 0 0 5px rgba(255,255,255,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(34,0,55,0.5) !important;
  border-bottom: 1px solid rgba(68, 0, 109, 0.65) !important;
}

.gh-xp-fundraiser-icon-wrap {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.gh-xp-fundraiser-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255,255,255,0.35)) !important;
}

.gh-xp-fundraiser-controls {
  margin-left: auto !important;
  display: flex !important;
  gap: 3px !important;
  align-items: center !important;
}

.gh-xp-fundraiser-hearts i {
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 3px !important;
  background: linear-gradient(to bottom, #f0c4ff, #9942ff 55%, #6100a2 100%) !important;
  color: #fff6ff !important;
  font-style: normal !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 rgba(90,0,130,0.8) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.55), 0 0 4px rgba(181,102,255,0.35) !important;
}

.gh-xp-fundraiser-body {
  padding: 12px 13px 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(236,233,216,0.96)),
    repeating-linear-gradient(0deg, rgba(111,0,168,0.05) 0, rgba(111,0,168,0.05) 1px, transparent 1px, transparent 7px) !important;
}

.gh-xp-fundraiser-copy {
  min-width: 0 !important;
}

.gh-xp-fundraiser-status-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.gh-xp-fundraiser-status {
  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  color: #6f00a8 !important;
  text-shadow: 1px 1px 0 #fff2a8 !important;
}

.gh-xp-fundraiser-percent,
.gh-xp-fundraiser-goal,
.gh-xp-fundraiser-blurb,
.gh-xp-fundraiser-link {
  font-family: TahomaXP, Tahoma, Arial, sans-serif !important;
}

.gh-xp-fundraiser-percent {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6f00a8 !important;
  white-space: nowrap !important;
}

.gh-xp-fundraiser-blurb {
  margin: 6px 0 8px !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  color: #252525 !important;
}

.gh-xp-fundraiser-meter-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.gh-xp-fundraiser-meter {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 20px !important;
  height: 30px !important;
}

.gh-xp-fundraiser-meter::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  width: 18px !important;
  height: 12px !important;
  margin-top: -6px !important;
  border: 2px solid #8b21cf !important;
  border-left: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(to bottom, #fff6a0 0%, #f7c5ff 16%, #d95aff 42%, #9d22dd 66%, #7300ac 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(70,0,107,0.35),
    0 0 6px rgba(208,89,255,0.32) !important;
  z-index: 2 !important;
}

.gh-xp-fundraiser-meter-bulb {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin-top: -14px !important;
  border: 2px solid #8b21cf !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, #fffbe3 0, #ffe47c 18%, #e47cff 42%, #9d22dd 66%, #5d0091 100%) !important;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.7),
    inset -2px -2px 3px rgba(89,0,136,0.35),
    0 0 8px rgba(211,97,255,0.45),
    0 0 14px rgba(211,97,255,0.25),
    1px 1px 0 rgba(0,0,0,0.18) !important;
  z-index: 3 !important;
  animation: ghFundraiserBulbGlow 2.2s ease-in-out infinite !important;
}

.gh-xp-fundraiser-track {
  position: relative !important;
  height: 18px !important;
  margin-top: 6px !important;
  margin-left: 0 !important;
  border: 2px solid #8b21cf !important;
  border-radius: 999px !important;
  background:
    linear-gradient(to bottom, #faf8ff 0%, #f1ebfb 46%, #dfd0f1 100%) !important;
  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.22),
    inset -1px -1px 1px rgba(255,255,255,0.88),
    0 0 0 1px rgba(255,255,255,0.25) !important;
  overflow: hidden !important;
}

.gh-xp-fundraiser-track::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px 0 auto 0 !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.12)) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.gh-xp-fundraiser-track::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px 10px 2px 10px !important;
  background: repeating-linear-gradient(90deg, rgba(111,0,168,0.14) 0 1px, transparent 1px 18px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.gh-xp-fundraiser-track-fill {
  position: relative !important;
  width: var(--gh-fundraiser-percent, 0%) !important;
  min-width: 0 !important;
  height: 100% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(to bottom, #fff6a0 0%, #f7c5ff 16%, #d95aff 42%, #9d22dd 66%, #7300ac 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(70,0,107,0.42),
    0 0 6px rgba(208,89,255,0.55),
    0 0 12px rgba(208,89,255,0.28) !important;
  overflow: hidden !important;
  transition: width 0.45s ease !important;
  animation: ghFundraiserPulse 1.9s ease-in-out infinite !important;
  z-index: 1 !important;
}

.gh-xp-fundraiser-liquid-glow,
.gh-xp-fundraiser-liquid-shine,
.gh-xp-fundraiser-liquid-bubbles {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.gh-xp-fundraiser-liquid-glow {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.28) 18%, rgba(255,244,177,0.18) 30%, rgba(255,255,255,0.0) 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 7px, rgba(255,255,255,0) 7px, rgba(255,255,255,0) 14px) !important;
  animation: ghFundraiserFlow 2.2s linear infinite !important;
  opacity: 0.9 !important;
  filter: saturate(1.05) brightness(1.1) !important;
}

.gh-xp-fundraiser-liquid-shine {
  width: 42px !important;
  left: -42px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.18) 65%, rgba(255,255,255,0) 100%) !important;
  animation: ghFundraiserShine 2.8s ease-in-out infinite !important;
}

.gh-xp-fundraiser-liquid-bubbles {
  background:
    radial-gradient(circle at 16% 65%, rgba(255,255,255,0.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 40% 35%, rgba(255,243,190,0.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 70%, rgba(255,255,255,0.75) 0 2px, transparent 2.5px),
    radial-gradient(circle at 88% 30%, rgba(255,248,206,0.55) 0 1.5px, transparent 2px) !important;
  animation: ghFundraiserBubbles 3.5s linear infinite !important;
  opacity: 0.7 !important;
}

.gh-xp-fundraiser-goal {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #2f2f2f !important;
  text-align: right !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  min-width: 72px !important;
}

.gh-xp-fundraiser-goal-sub {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #6a178f !important;
  margin-top: 1px !important;
}

.gh-xp-fundraiser-link,
.gh-xp-fundraiser-link:visited {
  display: inline-block !important;
  margin-top: 6px !important;
  color: #5b0a8f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.gh-xp-fundraiser-link:hover,
.gh-xp-fundraiser-link:focus-visible {
  color: #ffe45c !important;
  text-shadow: 1px 1px 0 #4b006f !important;
}

.gh-xp-fundraiser-logo {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  width: 56px !important;
  height: 42px !important;
  padding: 3px !important;
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid #8b21cf !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.8),
    1px 1px 0 rgba(0,0,0,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gh-xp-fundraiser-logo.hidden {
  display: none !important;
}

.gh-xp-fundraiser-logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.gh-xp-fundraiser-body {
  position: relative !important;
}

.gh-xp-fundraiser-link {
  padding-right: 70px !important;
}

@keyframes ghFundraiserFlow {
  from { background-position: 0 0; }
  to { background-position: 32px 0; }
}

@keyframes ghFundraiserShine {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 0.95; }
  60% { opacity: 0.9; }
  100% { transform: translateX(320px); opacity: 0; }
}

@keyframes ghFundraiserPulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.08) brightness(1.06); }
}

@keyframes ghFundraiserBubbles {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes ghFundraiserBulbGlow {
  0%, 100% { box-shadow: inset 2px 2px 3px rgba(255,255,255,0.7), inset -2px -2px 3px rgba(89,0,136,0.35), 0 0 8px rgba(211,97,255,0.45), 0 0 14px rgba(211,97,255,0.25), 1px 1px 0 rgba(0,0,0,0.18); }
  50% { box-shadow: inset 2px 2px 3px rgba(255,255,255,0.78), inset -2px -2px 3px rgba(89,0,136,0.4), 0 0 10px rgba(231,121,255,0.62), 0 0 18px rgba(231,121,255,0.38), 1px 1px 0 rgba(0,0,0,0.18); }
}

@media (max-width: 768px) {
  .gh-xp-fundraiser {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  .gh-xp-fundraiser-titlebar {
    min-height: 22px !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  .gh-xp-fundraiser-icon-wrap,
  .gh-xp-fundraiser-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .gh-xp-fundraiser-hearts i {
    width: 12px !important;
    height: 12px !important;
    font-size: 7px !important;
  }

  .gh-xp-fundraiser-body {
    padding: 9px !important;
  }

  .gh-xp-fundraiser-status {
    font-size: 15px !important;
  }

  .gh-xp-fundraiser-percent,
  .gh-xp-fundraiser-goal,
  .gh-xp-fundraiser-blurb,
  .gh-xp-fundraiser-link,
  .gh-xp-fundraiser-goal-sub {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  .gh-xp-fundraiser-meter-row {
    gap: 8px !important;
  }

  .gh-xp-fundraiser-meter {
    padding-left: 18px !important;
    height: 26px !important;
  }

  .gh-xp-fundraiser-meter-bulb {
    width: 22px !important;
    height: 22px !important;
    margin-top: -11px !important;
  }

  .gh-xp-fundraiser-meter::before {
    left: 14px !important;
    width: 14px !important;
    height: 10px !important;
    margin-top: -5px !important;
  }

  .gh-xp-fundraiser-track {
    height: 15px !important;
    margin-left: 0 !important;
  }

  .gh-xp-fundraiser-logo {
    width: 44px !important;
    height: 32px !important;
    right: 8px !important;
    bottom: 7px !important;
  }

  .gh-xp-fundraiser-link {
    padding-right: 54px !important;
  }

  .gh-xp-fundraiser-status-row,
  .gh-xp-fundraiser-meter-row {
    align-items: center !important;
  }
}


/* =========================================================
   GH PATCH - Desktop fundraiser room + maximized product info alignment
   Desktop only. Normal product window layout stays unchanged.
========================================================= */
@media (min-width: 769px) {
  .gh-xp-fundraiser {
    width: min(620px, calc(100vw - 64px)) !important;
    max-width: none !important;
  }

  .gh-xp-fundraiser-body {
    padding: 14px 14px 16px !important;
  }

  .gh-xp-fundraiser-logo {
    width: 62px !important;
    height: 46px !important;
    right: 12px !important;
    bottom: 10px !important;
  }

  .gh-xp-fundraiser-link {
    padding-right: 78px !important;
  }
}

@media (min-width: 1024px) {
  #window.maximized .product-layout:not(.hidden) {
    flex-wrap: nowrap !important;
    gap: 46px !important;
    align-items: flex-start !important;
  }

  #window.maximized .product-gallery {
    width: 430px !important;
    max-width: 430px !important;
    min-width: 430px !important;
    flex: 0 0 430px !important;
  }

  #window.maximized .product-info {
    width: auto !important;
    max-width: 760px !important;
    min-width: 0 !important;
    flex: 0 1 760px !important;
    margin-left: 0 !important;
    padding-top: 24px !important;
  }

  #window.maximized .product-info .product-description,
  #window.maximized .product-info #productDescription {
    max-width: 760px !important;
  }

  #window.maximized .product-info .product-options {
    max-width: 540px !important;
  }
}

@media (min-width: 1500px) {
  #window.maximized .product-info {
    max-width: 790px !important;
    flex-basis: 790px !important;
  }

  #window.maximized .product-info .product-description,
  #window.maximized .product-info #productDescription {
    max-width: 790px !important;
  }
}

/* =========================================================
   GH PATCH - v7 desktop donation width fix + mobile gallery text
   Keeps max-screen product alignment from v6, but prevents the
   fundraiser from spilling into the product controls in normal desktop view.
========================================================= */
@media (min-width: 769px) {
  #window:not(.maximized) .product-gallery > .gh-xp-fundraiser {
    width: 100% !important;
    max-width: 560px !important;
  }

  #window:not(.maximized) .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-body {
    padding: 12px 13px 14px !important;
  }

  #window:not(.maximized) .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-logo {
    width: 52px !important;
    height: 42px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  #window:not(.maximized) .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-link {
    padding-right: 64px !important;
  }
}

@media (max-width: 700px) {
  #openGalleryBtn.gallery-open-btn,
  .product-gallery-launch-row #openGalleryBtn.gallery-open-btn {
    font-size: 27px !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   GH PATCH - v8 desktop max donation spacing + title glow
   Desktop max only: gives the donation panel its own room so it
   does not bleed into product controls. Mobile stays untouched.
========================================================= */
.product-info h1,
#productTitle {
  text-shadow:
    0 0 5px rgba(140, 24, 210, 0.35),
    0 0 9px rgba(255, 225, 95, 0.18),
    1px 1px 0 rgba(255, 255, 255, 0.65) !important;
}

.gh-xp-fundraiser,
.gh-xp-fundraiser * {
  box-sizing: border-box !important;
}

/* Let the nonprofit PNG sit cleanly without the fake white tile. */
.gh-xp-fundraiser-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.gh-xp-fundraiser-logo img {
  background: transparent !important;
}

@media (min-width: 769px) {
  /* Slightly roomier donation window without forcing it over the controls. */
  #window:not(.maximized) .product-gallery > .gh-xp-fundraiser {
    width: 100% !important;
    max-width: 580px !important;
  }

  .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-body {
    padding-bottom: 54px !important;
    min-height: 136px !important;
  }

  .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-logo {
    width: 56px !important;
    height: 40px !important;
    right: 12px !important;
    bottom: 10px !important;
  }

  .product-gallery > .gh-xp-fundraiser .gh-xp-fundraiser-link {
    padding-right: 82px !important;
  }

  #window.maximized .product-layout:not(.hidden) {
    flex-wrap: nowrap !important;
    gap: 38px !important;
    align-items: flex-start !important;
  }

  #window.maximized .product-gallery {
    width: 500px !important;
    max-width: 500px !important;
    min-width: 500px !important;
    flex: 0 0 500px !important;
  }

  #window.maximized .product-gallery > .gh-xp-fundraiser {
    width: 500px !important;
    max-width: 500px !important;
  }

  #window.maximized .product-info {
    width: auto !important;
    max-width: 820px !important;
    min-width: 0 !important;
    flex: 0 1 820px !important;
    margin-left: 0 !important;
    padding-top: 24px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #window.maximized .product-info .product-description,
  #window.maximized .product-info #productDescription {
    max-width: 820px !important;
  }

  #window.maximized .product-info .product-options {
    max-width: 560px !important;
  }
}

/* =========================================================
   GH V52 - Collapsible story panels + consistent quick links
   Keeps long-form SEO/story copy in the document while presenting
   it behind optional XP-style disclosure bars for a cleaner first view.
========================================================= */

/* Shared native disclosure behavior. */
.gh-xp-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.gh-xp-collapsible > summary::-webkit-details-marker {
  display: none;
}

.gh-collapse-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gh-collapse-summary .gh-collapse-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1;
  transition: transform .14s ease;
  transform-origin: center;
}

.gh-xp-collapsible[open] > .gh-collapse-summary .gh-collapse-arrow {
  transform: rotate(90deg);
}

.gh-xp-collapsible > summary:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -3px;
}

/* Product/collection quick links now live directly below the address bar,
   matching the shared Info-window navigation position. */
#window .gh-product-quicklinks-host {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-bottom: 1px solid #aca899;
  background: #ece9d8;
  box-shadow: inset 0 1px 0 #fff;
  z-index: 8;
}

#window .gh-product-quicklinks-host.hidden {
  display: none !important;
}

#window .gh-product-quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  min-height: 24px;
  margin: 0;
  padding: 5px 8px;
  box-sizing: border-box;
  border: 1px dashed #8b7c60;
  background: #fffdf2;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
}

#window .gh-product-quicklinks .gh-info-quicklinks-label {
  color: #292929;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

#window .gh-product-quicklinks a,
#window .gh-product-quicklinks a:visited {
  color: #5b0a8f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: underline;
  white-space: nowrap;
}

/* The old collection-local navigation has been moved out of the scroll pane. */
.gh-black-jesus-links {
  display: none !important;
}

/* About: founder story title bars stay in the same Owner / Designer XP font,
   but can now open only when the visitor wants the longer story. */
#infoAboutPage .gh-about-origin-grid {
  align-items: start !important;
}

#infoAboutPage .gh-about-origin-titlebar h2 {
  flex: 1 1 auto;
  min-width: 0;
}

#infoAboutPage .gh-about-origin-titlebar .gh-collapse-arrow {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

/* What Makes It GoldHearted: each thought gets its own branded disclosure bar. */
#infoAboutPage .gh-about-foundation-grid {
  align-items: start !important;
}

#infoAboutPage .gh-about-foundation-card.gh-about-foundation-collapse {
  padding: 0 !important;
  overflow: hidden !important;
}

#infoAboutPage .gh-about-foundation-card-titlebar {
  min-height: 39px;
  box-sizing: border-box;
  padding: 7px 10px 6px 12px !important;
  color: #fff !important;
  background: linear-gradient(to right, #2e0552, #8e2bd3, #e4b735) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(48, 7, 77, .55) !important;
}

#infoAboutPage .gh-about-foundation-card-titlebar h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif) !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.42) !important;
}

#infoAboutPage .gh-about-foundation-card-titlebar .gh-collapse-arrow {
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

#infoAboutPage .gh-about-foundation-card .gh-about-foundation-card-body.info-richtext {
  padding: 12px 13px 13px !important;
  background: #fffdf4 !important;
}

#infoAboutPage .gh-about-mission-card .gh-about-foundation-card-body.info-richtext {
  background: linear-gradient(135deg, #fffdf4, #f5e8ff) !important;
}

/* EDU: Tutorials & Classes is a single optional expandable learning hub. */
#infoCustomInfoPage details.gh-edu-learning-section {
  padding: 0 !important;
  overflow: hidden;
}

#infoCustomInfoPage .gh-edu-learning-title {
  margin: 0 !important;
  min-height: 34px;
  box-sizing: border-box;
}

#infoCustomInfoPage .gh-edu-learning-title h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

#infoCustomInfoPage .gh-edu-learning-title .gh-collapse-arrow {
  color: #fff;
}

#infoCustomInfoPage .gh-edu-learning-collapse-body {
  padding: 8px;
}

#infoCustomInfoPage .gh-edu-learning-collapse-body .gh-edu-learning-intro {
  margin: 0 2px 10px !important;
}

/* Custom Jewelry lower design note collapses to a small title bar by default. */
.gh-custom-order-bottom-seo > .gh-custom-order-bottom-toolbar {
  cursor: pointer;
}

.gh-custom-order-bottom-toolbar .gh-custom-order-bottom-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.gh-custom-order-bottom-toolbar .gh-collapse-arrow {
  color: #333;
}

.gh-custom-order-bottom-seo[open] .gh-custom-order-bottom-field {
  max-height: 90px;
}

@media (max-width: 768px) {
  #window .gh-product-quicklinks-host {
    padding: 4px 6px;
  }

  #window .gh-product-quicklinks {
    gap: 4px 10px;
    padding: 4px 6px;
  }

  #window .gh-product-quicklinks .gh-info-quicklinks-label,
  #window .gh-product-quicklinks a,
  #window .gh-product-quicklinks a:visited {
    font-size: 9px;
  }

  #infoAboutPage .gh-about-foundation-card-titlebar h2 {
    font-size: 17px !important;
  }
}

/* =========================================================
   GH V53 - Cleaner disclosure hierarchy + locked EDU video library
========================================================= */

/* About: one disclosure for the whole "What Makes It GoldHearted" group. */
#infoAboutPage details.gh-about-foundation {
  overflow: hidden;
}

#infoAboutPage details.gh-about-foundation > .gh-about-foundation-header {
  cursor: pointer;
}

#infoAboutPage details.gh-about-foundation > .gh-about-foundation-header .gh-collapse-arrow {
  margin-left: auto;
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}

/* The three ideas are now simple static cards inside the one parent window. */
#infoAboutPage .gh-about-foundation-card.gh-about-foundation-static {
  padding: 0 !important;
  overflow: hidden !important;
  background: #fffdf4 !important;
}

#infoAboutPage .gh-about-foundation-static-title {
  margin: 0 !important;
  padding: 10px 12px 5px !important;
  color: #4d0877 !important;
  background: #fffdf4 !important;
  border: 0 !important;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif) !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  text-shadow: none !important;
}

#infoAboutPage .gh-about-foundation-static .gh-about-foundation-card-body.info-richtext,
#infoAboutPage .gh-about-mission-card.gh-about-foundation-static .gh-about-foundation-card-body.info-richtext {
  padding: 6px 12px 13px !important;
  background: #fffdf4 !important;
}

/* Neutralize the V52 individual disclosure styling if any old selector still matches. */
#infoAboutPage .gh-about-foundation-static .gh-about-foundation-card-titlebar {
  display: none !important;
}

/* The Black Jesus artist-story is now optional reading. */
.gh-black-jesus-story.gh-xp-collapsible {
  overflow: hidden;
}

.gh-black-jesus-story > .gh-black-jesus-titlebar {
  cursor: pointer;
}

.gh-black-jesus-story > .gh-black-jesus-titlebar h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.gh-black-jesus-story > .gh-black-jesus-titlebar .gh-collapse-arrow {
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}

/* EDU disclosure arrow gets the yellow XP accent requested. */
#infoCustomInfoPage .gh-edu-learning-title .gh-collapse-arrow {
  color: #ffd51f !important;
  font-size: 13px;
  text-shadow: 1px 1px 0 #5b2879, -1px -1px 0 rgba(0,0,0,.15);
}

/* EDU locked video library. This is deliberately presentation-only until
   tutorial content is ready, so no private videos are exposed behind it. */
#infoCustomInfoPage .gh-edu-video-vault-panel {
  min-height: 250px;
}

#infoCustomInfoPage .gh-edu-video-vault-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#infoCustomInfoPage .gh-edu-video-vault-badge {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #7c5a00;
  background: #ffdc37;
  color: #2d2100;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 1px 1px 0 #fff6b7;
}

#infoCustomInfoPage .gh-edu-video-vault {
  min-height: 210px;
  box-sizing: border-box;
  padding: 22px 18px;
  border: 1px solid #9b93a7;
  background:
    repeating-linear-gradient(135deg, rgba(111,42,154,.035) 0 8px, rgba(111,42,154,.07) 8px 16px),
    #f9f7fb;
  text-align: center;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
}

#infoCustomInfoPage .gh-edu-video-lock-icon {
  margin: 2px 0 6px;
  font-size: 31px;
  line-height: 1;
}

#infoCustomInfoPage .gh-edu-video-lock-heading {
  display: block;
  margin-bottom: 6px;
  color: #4d0877;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif);
  font-size: 22px;
  line-height: 1.05;
}

#infoCustomInfoPage .gh-edu-video-vault p {
  max-width: 440px;
  margin: 0 auto 14px;
  font-size: 11px;
  line-height: 1.35;
}

#infoCustomInfoPage .gh-edu-video-lock-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  max-width: 410px;
  margin: 0 auto;
}

#infoCustomInfoPage .gh-edu-video-lock-form input,
#infoCustomInfoPage .gh-edu-video-lock-form button {
  min-height: 30px;
  box-sizing: border-box;
  font-family: "TahomaXP", Tahoma, Verdana, sans-serif;
  font-size: 10px;
}

#infoCustomInfoPage .gh-edu-video-lock-form input {
  min-width: 0;
  padding: 5px 7px;
  border: 2px inset #fff;
  background: #fff;
}

#infoCustomInfoPage .gh-edu-video-lock-form button {
  padding: 4px 14px;
  border: 1px solid #4f0b76;
  background: linear-gradient(#b348e3, #650996);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

#infoCustomInfoPage .gh-edu-video-lock-status {
  grid-column: 1 / -1;
  min-height: 14px;
  color: #6b5b73;
  font-size: 9px;
  line-height: 1.25;
}

/* FAQ: V53 removes the redundant inner FAQ/HELP.TXT strip entirely. */
#infoFaqPage .gh-faq-list-panel {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  #infoAboutPage .gh-about-foundation-static-title {
    font-size: 17px !important;
  }

  #infoCustomInfoPage .gh-edu-video-lock-form {
    grid-template-columns: 1fr;
  }

  #infoCustomInfoPage .gh-edu-video-lock-status {
    grid-column: auto;
  }
}
\n\n/* GH v60: prevent a server-rendered/default XP template from flashing before\n   the route-specific product/collection/page is initialized. */\nbody.gh-route-pending #window {\n  visibility: hidden !important;\n}\n
/* =========================================================
   GH SEO V66 - One primary H1 per crawlable URL
   Inactive XP app/window titles keep the same visual treatment
   without emitting extra H1 elements into every Shopify route.
========================================================= */
.simple-page-content .gh-info-display-heading,
.info-page .gh-info-display-heading {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 38px;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  color: #111;
}

#infoCustomOrderPage .simple-page-content > .gh-info-display-heading {
  margin-bottom: 7px;
}

#infoCustomInfoPage .gh-edu-header-copy .gh-edu-display-heading {
  margin: 0 0 8px !important;
  color: #5f0f8c !important;
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 34px !important;
  line-height: 1 !important;
}

.metal-market-header .gh-metal-display-heading {
  font-family: var(--title-font);
  font-size: 38px;
  font-weight: normal;
  color: var(--gh-purple-main, #5b0a8f);
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .simple-page-content .gh-info-display-heading,
  .info-page .gh-info-display-heading {
    font-size: 30px;
  }

  #infoCustomInfoPage .gh-edu-header-copy .gh-edu-display-heading {
    font-size: 28px !important;
  }

  .metal-market-header .gh-metal-display-heading {
    font-size: 30px;
  }
}


/* =========================================================
   GH V70 - Interaction / route persistence / responsive banners
========================================================= */

/* NameChain: keep one-finger orbit gestures owned by the canvas on touch screens. */
.gh-namechain-viewer,
.gh-namechain-viewer canvas {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

/* WMP: the two controls called out in review get a visible interactive glow. */
#backOverlay,
#playOverlay,
#pauseOverlay {
  filter:
    brightness(1.16)
    drop-shadow(0 0 6px rgba(255, 255, 255, .95))
    drop-shadow(0 0 12px rgba(242, 69, 255, 1))
    drop-shadow(0 0 20px rgba(116, 26, 224, .95));
  animation: ghWmpControlGlow 1.05s ease-in-out infinite alternate;
}

@keyframes ghWmpControlGlow {
  from {
    filter:
      brightness(1.08)
      drop-shadow(0 0 4px rgba(255, 255, 255, .82))
      drop-shadow(0 0 10px rgba(231, 74, 255, .92))
      drop-shadow(0 0 17px rgba(112, 28, 218, .82));
  }
  to {
    filter:
      brightness(1.24)
      drop-shadow(0 0 7px rgba(255, 248, 185, 1))
      drop-shadow(0 0 15px rgba(255, 213, 56, .98))
      drop-shadow(0 0 24px rgba(180, 53, 255, 1));
  }
}

/* Shared top banner used by EDU, Custom Jewelry and Custom Grillz. Full image/video
   stays visible at normal, mobile and maximized window sizes instead of cropping. */
#infoCustomInfoPage .gh-edu-banner-shell,
.gh-route-banner-shell {
  margin: 14px 14px 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #ece9d8 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777 !important;
}

#infoCustomInfoPage .gh-edu-banner-media,
.gh-route-banner-media {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  background: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#infoCustomInfoPage .gh-edu-banner-media img,
#infoCustomInfoPage .gh-edu-banner-media video,
.gh-route-banner-media img,
.gh-route-banner-media video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Transparent PNG pixels reveal the XP banner container instead of black. */
.gh-route-banner-media.is-image,
.gh-route-banner-media.is-image img {
  background: transparent !important;
}

/* EDU already has padding on its shell; avoid double side margins there. */
#infoCustomInfoPage .gh-edu-banner-shell {
  margin: 0 0 14px !important;
}

/* Smaller Grillz thumbnails: compact desktop strip and true thumbnails on mobile. */
.gh-grillz-gallery-shell {
  grid-template-columns: minmax(0, 1fr) 118px !important;
}

.gh-grillz-thumbs-panel {
  gap: 7px !important;
  padding: 7px !important;
  overflow: hidden !important;
}

.gh-grillz-thumb {
  width: 100% !important;
  height: 78px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.gh-grillz-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

/* Center the owner/artist caption under the About photo. */
#infoAboutPage .gh-about-photo-caption {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .gh-grillz-gallery-shell {
    grid-template-columns: 1fr !important;
  }

  .gh-grillz-thumbs-panel {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
  }

  .gh-grillz-thumb {
    width: 76px !important;
    height: 58px !important;
    flex: 0 0 76px !important;
  }
}

@media (max-width: 768px) {
  #infoCustomInfoPage .gh-edu-banner-shell,
  .gh-route-banner-shell {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding: 5px !important;
  }

  #infoCustomInfoPage .gh-edu-banner-shell {
    margin: 0 0 10px !important;
  }

  #infoCustomInfoPage .gh-edu-banner-media,
  #infoCustomInfoPage .gh-edu-banner-media img,
  #infoCustomInfoPage .gh-edu-banner-media video,
  .gh-route-banner-media,
  .gh-route-banner-media img,
  .gh-route-banner-media video {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
}


/* =========================================================
   GH V71 - Stable desktop return + Grillz reel sizing
========================================================= */

/* A homepage note rebuilt after an in-place route return keeps the same look
   without adding another literal H1 to non-home server routes. */
.gh-home-seo-intro .gh-home-seo-runtime-heading {
  margin: 0 0 7px;
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 25px;
  line-height: .95;
  letter-spacing: .01em;
  color: #5f0f8c;
  text-shadow:
    -1px 0 #fff0a6,
    0 1px #fff0a6,
    1px 0 #fff0a6,
    0 -1px #fff0a6;
}

/* Do not force the Grillz reel to fill/crop the entire 16:9 stage.
   It may scale DOWN to fit the window, but it will not be enlarged past its
   own natural CSS size. */
.gh-grillz-video-frame {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.gh-grillz-video-frame video,
.gh-grillz-loop-video {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(70vh, 640px) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  .gh-home-seo-intro .gh-home-seo-runtime-heading {
    font-size: 18px;
    line-height: .96;
  }

  .gh-grillz-video-frame video,
  .gh-grillz-loop-video {
    max-height: 58vh !important;
  }
}

/* =========================================================
   GH V74 - Looping reel frames follow the actual video size
   The XP frame/panel shrink-wraps portrait or landscape media instead of
   stretching a full-width 16:9 box around it. Videos may scale DOWN to fit
   the available window, but are never forced to scale up.
========================================================= */
.gh-custom-order-video-panel,
.gh-grillz-video-panel {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.gh-custom-order-video-frame,
.gh-grillz-video-frame {
  display: inline-flex !important;
  position: relative !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: transparent !important;
  line-height: 0 !important;
  vertical-align: top !important;
}

.gh-custom-order-video-frame > video,
.gh-custom-order-video-frame video,
.gh-grillz-video-frame > video,
.gh-grillz-video-frame video,
.gh-custom-order-loop-video,
.gh-grillz-loop-video {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(70vh, 640px) !important;
  object-fit: contain !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Center the shrink-wrapped reel inside the full XP section/column. */
.gh-grillz-video-panel {
  align-self: center !important;
}

.gh-custom-order-video-panel {
  justify-self: center !important;
}

@media (max-width: 768px) {
  .gh-custom-order-video-frame > video,
  .gh-custom-order-video-frame video,
  .gh-grillz-video-frame > video,
  .gh-grillz-video-frame video,
  .gh-custom-order-loop-video,
  .gh-grillz-loop-video {
    max-height: 58vh !important;
  }
}

/* =========================================================
   GH V75 - Reel section chrome shrink-wraps the video
   Make the Custom Grillz tan section + purple title bar follow the actual
   reel width instead of spanning the whole content column. Custom Order's
   reel panel/label follows the same intrinsic-media sizing while its larger
   Previous Custom Work gallery section remains full-width.
========================================================= */
.gh-grillz-video-wrap {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  justify-self: center !important;
}

.gh-grillz-video-wrap > .gh-custom-order-portfolio-titlebar,
.gh-grillz-video-wrap > .gh-grillz-titlebar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.gh-grillz-video-wrap .gh-grillz-video-panel {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The Custom Order reel does not have its own outer purple section bar;
   keep its white XP panel and gray label tight to the video itself. */
.gh-custom-order-video-panel {
  width: fit-content !important;
  max-width: 100% !important;
  justify-self: center !important;
}

.gh-custom-order-video-panel > .gh-custom-order-gallery-label {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .gh-grillz-video-wrap {
    max-width: calc(100% - 2px) !important;
    padding: 7px !important;
  }
}

/* =========================================================
   V78 - GoldHearted EDU live / online class cards
   Theme-editor blocks inside Tutorials & Classes.
========================================================= */
#infoCustomInfoPage .gh-edu-class-schedule {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #bdb6a3;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
}

#infoCustomInfoPage .gh-edu-class-schedule-heading {
  margin: 0 2px 8px;
}

#infoCustomInfoPage .gh-edu-class-schedule-heading h3 {
  margin: 0 0 3px;
  color: #5b0a8f;
  font-size: 14px;
  line-height: 1.2;
}

#infoCustomInfoPage .gh-edu-class-schedule-heading p {
  margin: 0;
  color: #444;
  font-size: 11px;
  line-height: 1.4;
}

#infoCustomInfoPage .gh-edu-class-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#infoCustomInfoPage .gh-edu-class-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  border: 1px solid #8f8878;
  background: #fffdf7;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 rgba(0,0,0,.12);
}

#infoCustomInfoPage .gh-edu-class-card:not(:has(.gh-edu-class-media)) {
  grid-template-columns: 1fr;
}

#infoCustomInfoPage .gh-edu-class-media {
  min-height: 112px;
  border-right: 1px solid #aaa392;
  background: #ece9d8;
}

#infoCustomInfoPage .gh-edu-class-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 112px;
  object-fit: cover;
}

#infoCustomInfoPage .gh-edu-class-card-body {
  min-width: 0;
  padding: 8px;
}

#infoCustomInfoPage .gh-edu-class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}

#infoCustomInfoPage .gh-edu-class-format,
#infoCustomInfoPage .gh-edu-class-status {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #6c367f;
  background: linear-gradient(to bottom, #c76bff, #7813aa);
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .2px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

#infoCustomInfoPage .gh-edu-class-status {
  border-color: #9c7400;
  background: linear-gradient(to bottom, #ffe572, #d49c00);
  color: #2c2100;
  text-shadow: none;
}

#infoCustomInfoPage .gh-edu-class-card h3 {
  margin: 0 0 4px;
  color: #171717;
  font-size: 13px;
  line-height: 1.2;
}

#infoCustomInfoPage .gh-edu-class-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 5px;
  color: #5b0a8f;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
}

#infoCustomInfoPage .gh-edu-class-card p {
  margin: 0 0 7px;
  color: #333;
  font-size: 10px;
  line-height: 1.4;
}

#infoCustomInfoPage .gh-edu-class-button {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #64317a;
  background: linear-gradient(to bottom, #bd63eb, #6a1294);
  color: #fff !important;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.18);
}

#infoCustomInfoPage .gh-edu-class-button:hover {
  filter: brightness(1.08);
}

#infoCustomInfoPage .gh-edu-class-card.is-past {
  filter: grayscale(1);
  opacity: .62;
  background: #e4e4e4;
}

#infoCustomInfoPage .gh-edu-class-card.is-past .gh-edu-class-status,
#infoCustomInfoPage .gh-edu-class-card.is-past .gh-edu-class-format {
  border-color: #777;
  background: linear-gradient(to bottom, #aaa, #777);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
}

#infoCustomInfoPage .gh-edu-class-card.is-past .gh-edu-class-button {
  border-color: #777;
  background: linear-gradient(to bottom, #aaa, #777);
}

#infoCustomInfoPage .gh-edu-class-button.is-disabled {
  cursor: default;
  pointer-events: none;
}

@media (max-width: 820px) {
  #infoCustomInfoPage .gh-edu-class-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #infoCustomInfoPage .gh-edu-class-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  #infoCustomInfoPage .gh-edu-class-media,
  #infoCustomInfoPage .gh-edu-class-media img {
    min-height: 96px;
  }
  #infoCustomInfoPage .gh-edu-class-card-body {
    padding: 7px;
  }
}


/* =========================================================
   V79 - EDU Google Calendar action
   Auto-generated from the class block's structured date/time.
========================================================= */
#infoCustomInfoPage .gh-edu-class-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

#infoCustomInfoPage .gh-edu-calendar-button {
  border-color: #174d9a;
  background: linear-gradient(to bottom, #73b8ff, #1d62bb);
  color: #fff !important;
}

#infoCustomInfoPage .gh-edu-calendar-button:hover {
  filter: brightness(1.09);
}

@media (max-width: 520px) {
  #infoCustomInfoPage .gh-edu-class-actions {
    align-items: stretch;
  }
  #infoCustomInfoPage .gh-edu-class-actions .gh-edu-class-button {
    text-align: center;
  }
}


/* =========================================================
   V80 - GoldHearted EDU invite-only manual approval flow
========================================================= */
#infoCustomInfoPage .gh-edu-class-invite-badge {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #7e1450;
  background: linear-gradient(to bottom, #ff7bc4, #b41670);
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-toggle {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: TahomaXP, Tahoma, Verdana, sans-serif;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-form {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #8f8878;
  background: #fff8dc;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #d2c8a5;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-form[hidden] {
  display: none !important;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-copy {
  margin: 0 0 7px !important;
  color: #333;
  font-size: 10px;
  line-height: 1.4;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #34223a;
  font-size: 9px;
  font-weight: 700;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid label em {
  font-weight: 400;
  color: #666;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 6px;
  border: 1px solid #7f7f7f;
  background: #fff;
  color: #111;
  font: 11px TahomaXP, Tahoma, Verdana, sans-serif;
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.12);
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid input:focus {
  outline: 1px solid #6a1294;
  outline-offset: 0;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-wide {
  grid-column: 1 / -1;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-cancel {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 8px;
  border: 1px solid #777;
  background: linear-gradient(to bottom, #fff, #d8d8d8);
  color: #222;
  font: 700 10px TahomaXP, Tahoma, Verdana, sans-serif;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 rgba(0,0,0,.12);
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-status {
  min-height: 14px;
  margin-top: 6px;
  color: #444;
  font-size: 10px;
  line-height: 1.35;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-status.is-success {
  color: #176012;
  font-weight: 700;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-status.is-error {
  color: #a31111;
  font-weight: 700;
}


/* V84 - Match Send Request typography to the Cancel button exactly. */
:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-submit {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 8px;
  font: 700 10px TahomaXP, Tahoma, Verdana, sans-serif;
  line-height: 1.2;
  box-sizing: border-box;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-submit:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 520px) {
  :is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-grid {
    grid-template-columns: 1fr;
  }
  :is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-wide {
    grid-column: auto;
  }
  :is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-form-actions {
    align-items: stretch;
  }
}

/* =========================================================
   V82 - GoldHearted EDU invite request mini window
   Keeps the class card fixed-height while the form floats.
========================================================= */
:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window {
  position: fixed;
  z-index: 2147482500;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #6f17a0;
  border-radius: 3px;
  background: #ece9d8;
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 0 rgba(76,16,111,.45);
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window[hidden] {
  display: none !important;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  padding: 3px 4px 3px 8px;
  background: linear-gradient(to bottom, #b946ff 0%, #7613b3 44%, #4f007f 100%);
  color: #fff;
  font: 700 11px TahomaXP, Tahoma, Verdana, sans-serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  user-select: none;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-close {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 2px;
  background: linear-gradient(to bottom, #d995ff, #7f1abd 55%, #5a058b);
  color: #fff;
  font: 700 16px/16px Arial, sans-serif;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), 1px 1px 0 rgba(0,0,0,.25);
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-close:hover,
:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-close:focus-visible {
  filter: brightness(1.15);
  outline: 1px solid #fff;
  outline-offset: -2px;
}

:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-body {
  max-height: calc(min(520px, 100vh - 24px) - 27px);
  overflow: auto;
  padding: 10px;
  background: #fff8dc;
}

/* Neutralize the old inline-card box now that the form is a window. */
:is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window.gh-edu-invite-form {
  margin-top: 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

@media (max-width: 520px) {
  :is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  :is(#infoCustomInfoPage, .gh-edu-invite-modal-layer) .gh-edu-invite-window-body {
    max-height: calc(100vh - 43px);
    padding: 9px;
  }
}


/* =========================================================
   V83 - Centered EDU invite modal + light grey backdrop
   Portal layer keeps the dialog centered to the browser viewport
   on desktop and mobile, regardless of XP window transforms.
========================================================= */
.gh-edu-invite-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
  background: rgba(150, 150, 150, .46);
  -webkit-backdrop-filter: grayscale(.18) brightness(.94);
  backdrop-filter: grayscale(.18) brightness(.94);
  overscroll-behavior: contain;
  touch-action: none;
}

.gh-edu-invite-modal-layer[hidden] {
  display: none !important;
}

body.gh-edu-invite-modal-open {
  overflow: hidden;
}

.gh-edu-invite-modal-layer .gh-edu-invite-window {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 1 auto;
  width: min(360px, 100%);
  max-width: 100%;
  max-height: min(520px, calc(100dvh - 24px));
  z-index: 1;
  touch-action: auto;
}

.gh-edu-invite-modal-layer .gh-edu-invite-window-body {
  max-height: calc(min(520px, 100dvh - 24px) - 29px);
}

@media (max-width: 520px) {
  .gh-edu-invite-modal-layer {
    padding: 8px;
  }
  .gh-edu-invite-modal-layer .gh-edu-invite-window {
    width: min(340px, 100%);
    max-height: calc(100dvh - 16px);
  }
  .gh-edu-invite-modal-layer .gh-edu-invite-window-body {
    max-height: calc(100dvh - 45px);
  }
}


/* GH v88 - selected metal donation amount near product price */
.gh-product-giving-per-sale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: -8px 0 16px;
  padding: 5px 8px;
  border: 1px solid #8d78a8;
  background: #f4eef9;
  color: #3d245a;
  font-size: 13px;
  line-height: 1.2;
  box-sizing: border-box;
}
.gh-product-giving-per-sale.hidden { display: none !important; }
.gh-product-giving-per-sale-label { font-weight: 700; }
.gh-product-giving-per-sale strong { color: #6b2a91; font-size: inherit; }
@media (max-width: 700px) {
  .gh-product-giving-per-sale {
    font-size: 12px;
    margin-top: -6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
}

/* =========================================================
   GH V90 - MOBILE VISUAL POLISH
   - keep the full sticky note/tape visible on phones
   - show EDU class artwork as a real thumbnail instead of a tall crop
   - keep Custom Grillz gallery artwork contained on mobile
   - reorganize desktop icons into compact rows in phone landscape
========================================================= */

/* Phone portrait/general mobile: the tape sits outside the note box, so the
   outer note must not clip overflow. Scroll only the note body if a very short
   viewport cannot fit all of the copy. */
@media (max-width: 768px) {
  .gh-home-seo-intro {
    top: 16px !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .gh-home-seo-body {
    max-height: calc(100dvh - 92px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* EDU class cards: stack artwork over the copy on narrow phones. This gives
     the image enough width to read while preserving the full image. */
  #infoCustomInfoPage .gh-edu-class-card {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  #infoCustomInfoPage .gh-edu-class-media {
    width: 100% !important;
    height: 132px !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #aaa392 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f7f4ea !important;
  }

  #infoCustomInfoPage .gh-edu-class-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f7f4ea !important;
  }

  /* Custom Grillz: never enlarge/crop the main reference image to fill the
     mobile column. The whole piece stays visible inside the XP panel. */
  .gh-grillz-main-image-button {
    padding: 7px !important;
    text-align: center !important;
  }

  .gh-grillz-main-image-button img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 52dvh !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    background: #fff !important;
  }

  .gh-grillz-thumb img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff !important;
  }
}

/* Extra breathing room above the tape on very narrow portrait phones. */
@media (max-width: 430px) {
  .gh-home-seo-intro {
    top: 18px !important;
    width: min(235px, 54vw) !important;
  }

  .gh-home-seo-body {
    max-height: calc(100dvh - 98px) !important;
  }
}

/* Real-phone landscape: 8 vertical rows cannot physically fit into the short
   viewport. Use four compact rows and flow into new columns instead. This keeps
   labels from stacking on top of one another while retaining the XP desktop
   feel and leaving the right side free for the sticky note. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .desktop-icons-grid {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 54px) !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(4, 78px) !important;
    grid-auto-columns: 84px !important;
    row-gap: 2px !important;
    column-gap: 4px !important;
    padding: 0 !important;
    align-content: start !important;
    align-items: start !important;
    justify-content: start !important;
    justify-items: center !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .desktop-icons-grid > .desktop-icon {
    position: relative !important;
    width: 80px !important;
    height: 76px !important;
    min-height: 0 !important;
    max-height: 76px !important;
    margin: 0 !important;
    padding: 2px 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    margin-bottom: 2px !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: 78px !important;
    font-size: 9.5px !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Keep the note fully visible above its tape in landscape too. */
  .gh-home-seo-intro {
    top: 16px !important;
    right: 8px !important;
    width: min(255px, 36vw) !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .gh-home-seo-body {
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* =========================================================
   GH V91 - PHONE LANDSCAPE WINDOW CENTERING
   The prior landscape stabilizer removed the normal translate(-50%, -50%)
   from XP windows while leaving their desktop top/left percentages in place.
   That made initial windows begin around the middle of the screen instead of
   being centered inside the usable area above the taskbar. This patch restores
   a true centered initial state and gives the windows more usable vertical room.
   Desktop and portrait mobile are intentionally untouched.
========================================================= */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  /* Shared working-area center: reserve the 44px XP taskbar plus a little
     breathing room so the window still reads as a floating XP window. */
  #window:not(.maximized):not(.minimized),
  #infoWindow:not(.maximized):not(.minimized),
  #namechainWindow:not(.maximized):not(.minimized),
  #metalWindow:not(.maximized):not(.minimized),
  #aimWindow:not(.maximized):not(.minimized) {
    position: fixed !important;
    left: 50% !important;
    top: calc((100dvh - 44px) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;

    width: min(860px, calc(100vw - 110px)) !important;
    height: calc(100dvh - 64px) !important;
    max-width: calc(100vw - 110px) !important;
    max-height: calc(100dvh - 64px) !important;

    resize: none !important;
  }

  /* Keep the very small utility windows from becoming unnecessarily wide. */
  #metalWindow:not(.maximized):not(.minimized) {
    width: min(520px, calc(100vw - 150px)) !important;
    max-width: min(520px, calc(100vw - 150px)) !important;
  }

  #aimWindow.aim-signon-size:not(.maximized):not(.minimized) {
    width: min(360px, calc(100vw - 170px)) !important;
    max-width: min(360px, calc(100vw - 170px)) !important;
    height: min(350px, calc(100dvh - 64px)) !important;
  }

  #aimWindow.aim-chat-size:not(.maximized):not(.minimized) {
    width: min(700px, calc(100vw - 120px)) !important;
    max-width: min(700px, calc(100vw - 120px)) !important;
  }

  /* Compact the chrome slightly in the short landscape viewport so users see
     actual page content immediately instead of mostly toolbar/address bars. */
  #window:not(.maximized) > .title-bar,
  #infoWindow:not(.maximized) > .title-bar,
  #namechainWindow:not(.maximized) > .title-bar,
  #metalWindow:not(.maximized) > .title-bar,
  #aimWindow:not(.maximized) > .title-bar {
    min-height: 27px !important;
    height: 27px !important;
  }

  #window:not(.maximized) .xp-toolbar,
  #infoWindow:not(.maximized) .simple-info-toolbar,
  #metalWindow:not(.maximized) .metal-toolbar {
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #window:not(.maximized) .xp-address-bar,
  #infoWindow:not(.maximized) .info-address-bar,
  #metalWindow:not(.maximized) .metal-address-bar {
    min-height: 28px !important;
    height: 28px !important;
  }

  /* The product toolbar is intentionally horizontally scrollable in landscape;
     shrink only the controls, not their labels, so every material remains easy
     to reach without making the window wider than the phone. */
  #window:not(.maximized) .xp-image-btn,
  #window:not(.maximized) .toolbar-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }

  #window:not(.maximized) .xp-image-btn img,
  #window:not(.maximized) .toolbar-icon-btn img {
    width: 34px !important;
    height: 34px !important;
  }

  /* NameChain has its own toolbar rather than the standard XP address chrome. */
  #namechainWindow:not(.maximized) .gh-namechain-toolbar {
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  #namechainWindow:not(.maximized) .gh-namechain-content-wrap {
    min-height: 0 !important;
    height: calc(100% - 27px) !important;
  }
}


/* =========================================================
   GH V92 - PHONE LANDSCAPE DESKTOP-STYLE INTERIORS
   Builds on v91's centered phone-landscape windows. In short landscape
   viewports the shopping window now uses the desktop two-column product
   composition, while XP chrome is compacted to return vertical space to
   product media and information. Desktop + portrait mobile stay unchanged.
========================================================= */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  /* Compact XP title chrome to desktop-like proportions. */
  #window > .title-bar,
  #infoWindow > .title-bar,
  #namechainWindow > .title-bar,
  #metalWindow > .title-bar,
  #aimWindow > .title-bar {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 4px !important;
  }

  #window > .title-bar,
  #window > .title-bar *,
  #infoWindow > .title-bar,
  #infoWindow > .title-bar *,
  #namechainWindow > .title-bar,
  #namechainWindow > .title-bar *,
  #metalWindow > .title-bar,
  #metalWindow > .title-bar *,
  #aimWindow > .title-bar,
  #aimWindow > .title-bar * {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #window > .title-bar .window-title-with-icon img,
  #namechainWindow > .title-bar .window-title-with-icon img,
  #infoWindow > .title-bar .window-title-with-icon img,
  #metalWindow > .title-bar .window-title-with-icon img {
    width: 14px !important;
    height: 14px !important;
  }

  #window > .title-bar .window-controls button,
  #infoWindow > .title-bar .window-controls button,
  #namechainWindow > .title-bar .window-controls button,
  #metalWindow > .title-bar .window-controls button,
  #aimWindow > .title-bar .window-controls button {
    width: 24px !important;
    min-width: 24px !important;
    height: 21px !important;
    min-height: 21px !important;
    padding: 0 !important;
  }

  /* Product toolbar: same controls, substantially less vertical chrome. */
  #window .xp-toolbar {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 6px 10px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  #window .gh-toolbar-range-inner {
    gap: 6px !important;
  }

  #window .xp-nav-group {
    gap: 3px !important;
    padding-right: 6px !important;
  }

  #window .toolbar-item {
    gap: 2px !important;
  }

  #window .xp-toolbar .toolbar-text,
  #window .auto-metal-toolbar-item .toolbar-text {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #window .xp-image-btn,
  #window .toolbar-icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  #window .xp-image-btn img,
  #window .toolbar-icon-btn img {
    width: 27px !important;
    height: 27px !important;
    object-fit: contain !important;
  }

  #window .xp-toolbar-btn.cart-btn {
    min-width: 34px !important;
    width: 34px !important;
    height: 30px !important;
    padding: 0 3px !important;
  }

  #window .gh-cart-symbol-image,
  #window .gh-cart-symbol-image img {
    width: 21px !important;
    height: 21px !important;
  }

  /* Keep the existing purple range control, just make it less dominant. */
  #window .gh-mobile-toolbar-range-wrap {
    height: 10px !important;
  }

  #window .gh-mobile-toolbar-range {
    height: 10px !important;
  }

  #window .gh-mobile-toolbar-range::-webkit-slider-runnable-track {
    height: 4px !important;
  }

  #window .gh-mobile-toolbar-range::-webkit-slider-thumb {
    width: 32px !important;
    height: 8px !important;
    margin-top: -2px !important;
  }

  #window .gh-mobile-toolbar-range::-moz-range-track {
    height: 4px !important;
  }

  #window .gh-mobile-toolbar-range::-moz-range-thumb {
    width: 32px !important;
    height: 8px !important;
  }

  #window .xp-address-bar {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    gap: 6px !important;
  }

  #window .xp-address-bar,
  #window .xp-address-bar * {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #window .address-input {
    height: 18px !important;
    padding: 0 6px !important;
  }

  /* Main product view: restore desktop logic rather than portrait stacking. */
  #window .product-layout:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #window .product-gallery,
  #window .product-info {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  #window .product-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #window .main-product-image {
    width: 100% !important;
    max-width: none !important;
    height: clamp(145px, 44dvh, 235px) !important;
    min-height: 145px !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
  }

  #window .main-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* The main window only needs a small launcher; the full thumbnail strip
     remains available after View Gallery is opened. */
  #window .product-gallery-launch-row,
  #window .thumbnail-row.product-gallery-launch-row {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 5px !important;
    gap: 0 !important;
  }

  #window #openGalleryBtn.gallery-open-btn,
  #window .product-gallery-launch-row #openGalleryBtn.gallery-open-btn {
    width: auto !important;
    min-width: 104px !important;
    max-width: 150px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #window .product-info {
    padding-top: 1px !important;
    padding-right: 2px !important;
  }

  #window .product-info h1,
  #window #productTitle {
    font-size: 18px !important;
    line-height: 1.02 !important;
    margin: 0 0 5px !important;
  }

  #window .product-price {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
  }

  #window .gh-product-giving-per-sale {
    margin: 0 0 6px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  #window .product-description,
  #window #productDescription.product-description-rich {
    font-size: 11.5px !important;
    line-height: 1.24 !important;
    margin-bottom: 8px !important;
  }

  #window #productDescription.product-description-rich p {
    margin-bottom: 5px !important;
  }

  #window #productDescription.product-description-rich h2,
  #window #productDescription.product-description-rich h3,
  #window #productDescription.product-description-rich h4 {
    font-size: 13px !important;
    line-height: 1.05 !important;
    margin-top: 7px !important;
    margin-bottom: 4px !important;
  }

  #window .product-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 4px 0 8px !important;
  }

  #window .option-group {
    gap: 3px !important;
  }

  #window .option-group label {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #window .xp-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  #window .buy-button {
    width: 100% !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  #window .donation-note {
    margin-top: 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Keep the content scroll inside the window instead of growing the window. */
  #window .window-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Related products/reviews still follow beneath the two-column hero area. */
  #window .related-products:not(.hidden) {
    padding: 0 8px 10px !important;
    gap: 10px !important;
  }
}


/* V92 specificity guard: v91 intentionally used :not(.maximized) selectors;
   match that specificity here so the newer compact landscape chrome wins. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  #window:not(.maximized) > .title-bar,
  #infoWindow:not(.maximized) > .title-bar,
  #namechainWindow:not(.maximized) > .title-bar,
  #metalWindow:not(.maximized) > .title-bar,
  #aimWindow:not(.maximized) > .title-bar {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 4px !important;
  }

  #window:not(.maximized) > .title-bar,
  #window:not(.maximized) > .title-bar *,
  #infoWindow:not(.maximized) > .title-bar,
  #infoWindow:not(.maximized) > .title-bar *,
  #namechainWindow:not(.maximized) > .title-bar,
  #namechainWindow:not(.maximized) > .title-bar *,
  #metalWindow:not(.maximized) > .title-bar,
  #metalWindow:not(.maximized) > .title-bar *,
  #aimWindow:not(.maximized) > .title-bar,
  #aimWindow:not(.maximized) > .title-bar * {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #window:not(.maximized) .xp-toolbar {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 6px 10px !important;
  }

  #window:not(.maximized) .xp-address-bar {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
  }

  #window:not(.maximized) .xp-image-btn,
  #window:not(.maximized) .toolbar-icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  #window:not(.maximized) .xp-image-btn img,
  #window:not(.maximized) .toolbar-icon-btn img {
    width: 27px !important;
    height: 27px !important;
  }
}

/* =========================================================
   GH V93 - MOBILE TASKBAR COLLAPSE + LANDSCAPE POLISH
   Builds directly on v92.
   - Mobile taskbar stays collapsed until the Menu/Start button is requested.
   - Phone-landscape icons use 3 rows so Messenger + Metal Pricing stay visible.
   - Sticky toolbar/address offsets are matched so content cannot scroll through
     a transparent gap.
   - Landscape content type is slightly smaller for more usable page area.
   Desktop remains unchanged.
========================================================= */

/* V94: restored the original mobile taskbar/start-button presentation.
   The Start Menu itself remains closed until Menu is tapped; the taskbar is no longer collapsed. */

/* Phone landscape: use three rows so utility icons do not fall under taskbar. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  .desktop-icons-grid {
    grid-template-rows: repeat(3, 72px) !important;
    grid-auto-columns: 80px !important;
    row-gap: 2px !important;
    column-gap: 4px !important;
    max-height: calc(100dvh - 28px) !important;
  }

  .desktop-icons-grid > .desktop-icon {
    width: 76px !important;
    height: 70px !important;
    max-height: 70px !important;
    padding: 2px !important;
  }

  .desktop-icons-grid > .desktop-icon img,
  .desktop-icons-grid > .desktop-icon .cart-desktop-image-wrap > img {
    width: 39px !important;
    height: 39px !important;
    max-width: 39px !important;
    max-height: 39px !important;
    margin-bottom: 2px !important;
  }

  .desktop-icons-grid > .desktop-icon span:not(.gh-cart-badge),
  .desktop-icons-grid > .desktop-icon .desktop-icon-label {
    max-width: 74px !important;
    font-size: 8.75px !important;
    line-height: 1.01 !important;
  }

  /* FIX: v92 shortened the toolbars but the sticky address offsets still
     pointed at the older 72/74px heights. Match the real toolbar heights. */
  #window:not(.maximized) .xp-toolbar {
    top: 0 !important;
    background: linear-gradient(to bottom, #f7f3e7 0%, #ebe5d3 100%) !important;
    z-index: 1200 !important;
  }

  #window:not(.maximized) .xp-address-bar {
    top: 40px !important;
    background: linear-gradient(to bottom, #f5f2e8, #e2dccd) !important;
    z-index: 1190 !important;
  }

  #infoWindow:not(.maximized) .simple-info-toolbar,
  #metalWindow:not(.maximized) .metal-toolbar {
    top: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    box-sizing: border-box !important;
    background: linear-gradient(to bottom, #f7f3e7 0%, #ebe5d3 100%) !important;
    z-index: 1200 !important;
  }

  #infoWindow:not(.maximized) .info-address-bar,
  #metalWindow:not(.maximized) .metal-address-bar {
    top: 40px !important;
    min-height: 24px !important;
    height: 24px !important;
    background: linear-gradient(to bottom, #f5f2e8, #e2dccd) !important;
    z-index: 1190 !important;
  }

  /* Make the real purple product-toolbar range sit on an opaque XP strip. */
  #window .gh-mobile-toolbar-range-wrap {
    background: #ebe5d3 !important;
    border-radius: 0 !important;
  }

  /* Slightly smaller landscape type across content areas. */
  #infoWindow .info-page,
  #infoWindow .info-page p,
  #infoWindow .simple-page-content,
  #infoWindow .simple-page-content p,
  #infoWindow .info-richtext,
  #infoWindow .info-richtext p,
  #infoWindow .collection-description,
  #infoWindow .collection-description p {
    font-size: 12.5px !important;
    line-height: 1.16 !important;
  }

  #infoWindow .info-page h1,
  #infoWindow .simple-page-content h1 {
    font-size: 20px !important;
    line-height: 1.04 !important;
  }

  #infoWindow .info-page h2,
  #infoWindow .simple-page-content h2 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  #window .product-info h1,
  #window #productTitle {
    font-size: 16.5px !important;
  }

  #window .product-price {
    font-size: 15px !important;
  }

  #window .product-description,
  #window #productDescription.product-description-rich {
    font-size: 10.5px !important;
    line-height: 1.18 !important;
  }

  #window #productDescription.product-description-rich h2,
  #window #productDescription.product-description-rich h3,
  #window #productDescription.product-description-rich h4 {
    font-size: 12px !important;
  }

  #window .gh-product-giving-per-sale,
  #window .donation-note {
    font-size: 9px !important;
  }

  /* Messenger first/sign-on state: deliberately compact in landscape. */
  #aimWindow.aim-signon-size:not(.maximized):not(.minimized) {
    width: min(300px, calc(100vw - 190px)) !important;
    max-width: min(300px, calc(100vw - 190px)) !important;
    height: min(255px, calc(100dvh - 46px)) !important;
    max-height: min(255px, calc(100dvh - 46px)) !important;
  }

  #aimWindow.aim-signon-size .aim-content {
    padding: 4px !important;
  }

  #aimWindow.aim-signon-size #aimSignOnPanel {
    padding: 3px 5px 5px !important;
  }

  #aimWindow.aim-signon-size .aim-logo-box {
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 0 4px !important;
  }

  #aimWindow.aim-signon-size .aim-label {
    font-size: 9.5px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  #aimWindow.aim-signon-size .aim-input {
    height: 21px !important;
    min-height: 21px !important;
    margin-bottom: 4px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }

  #aimWindow.aim-signon-size .aim-check-row {
    font-size: 9.5px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
  }

  #aimWindow.aim-signon-size .aim-check-row input {
    width: 13px !important;
    height: 13px !important;
  }

  #aimWindow.aim-signon-size .aim-signon-image-btn {
    width: 64px !important;
    margin: 3px 2px 0 auto !important;
  }

  #aimWindow.aim-signon-size .aim-version {
    margin-top: 2px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* Slightly smaller utility-window body text in landscape too. */
  #aimWindow,
  #metalWindow,
  #aimWindow input,
  #aimWindow textarea,
  #aimWindow button,
  #metalWindow .metal-market-page,
  #metalWindow .metal-market-footer {
    font-size: 90% !important;
  }
}


/* =========================================================
   GH V94 - MOBILE UI CONSISTENCY
   - Restores the original full mobile taskbar/start button.
   - Keeps Start Menu closed until requested.
   - Standardizes landscape browser toolbars to the compact collection size.
========================================================= */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  #window:not(.maximized) .xp-toolbar,
  #infoWindow:not(.maximized) .simple-info-toolbar,
  #metalWindow:not(.maximized) .metal-toolbar {
    min-height: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
  }

  #window:not(.maximized) .xp-address-bar,
  #infoWindow:not(.maximized) .info-address-bar,
  #metalWindow:not(.maximized) .metal-address-bar {
    min-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
  }

  #window:not(.maximized) .xp-address-bar,
  #infoWindow:not(.maximized) .info-address-bar,
  #metalWindow:not(.maximized) .metal-address-bar {
    top: 40px !important;
  }
}

/* =========================================================
   GH V95 - LANDSCAPE TOOLBAR CONTROL CONSISTENCY + COMPACT MESSENGER
   Builds directly on v94.
   - Every XP toolbar icon/control uses the same 30px landscape button box.
   - Product, collection/info, and metal utility toolbars share the same sizing.
   - Messenger sign-on is genuinely compact in phone landscape, independent of
     the older mobile Messenger rules.
========================================================= */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) {
  /* One toolbar geometry everywhere. */
  #window:not(.maximized) .xp-toolbar,
  #infoWindow:not(.maximized) .simple-info-toolbar,
  #metalWindow:not(.maximized) .metal-toolbar {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 6px 7px !important;
    gap: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  #window:not(.maximized) .xp-nav-group,
  #infoWindow:not(.maximized) .xp-nav-group,
  #metalWindow:not(.maximized) .xp-nav-group {
    gap: 3px !important;
    padding-right: 6px !important;
    align-items: center !important;
  }

  #window:not(.maximized) .toolbar-item,
  #infoWindow:not(.maximized) .toolbar-item,
  #metalWindow:not(.maximized) .toolbar-item {
    gap: 2px !important;
    align-items: center !important;
  }

  /* Back / Forward / metal / 3D / media / refresh: identical button boxes. */
  #window:not(.maximized) .xp-toolbar .xp-image-btn,
  #window:not(.maximized) .xp-toolbar .toolbar-icon-btn,
  #infoWindow:not(.maximized) .simple-info-toolbar .xp-image-btn,
  #infoWindow:not(.maximized) .simple-info-toolbar .toolbar-icon-btn,
  #metalWindow:not(.maximized) .metal-toolbar .xp-image-btn,
  #metalWindow:not(.maximized) .metal-toolbar .toolbar-icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    flex: 0 0 30px !important;
    box-sizing: border-box !important;
  }

  #window:not(.maximized) .xp-toolbar .xp-image-btn img,
  #window:not(.maximized) .xp-toolbar .toolbar-icon-btn img,
  #infoWindow:not(.maximized) .simple-info-toolbar .xp-image-btn img,
  #infoWindow:not(.maximized) .simple-info-toolbar .toolbar-icon-btn img,
  #metalWindow:not(.maximized) .metal-toolbar .xp-image-btn img,
  #metalWindow:not(.maximized) .metal-toolbar .toolbar-icon-btn img,
  #window:not(.maximized) .auto-metal-btn img {
    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
    object-fit: contain !important;
  }

  /* Cart is also the same physical control size; badge stays overlaid. */
  #window:not(.maximized) .xp-toolbar .xp-toolbar-btn.cart-btn,
  #infoWindow:not(.maximized) .simple-info-toolbar .xp-toolbar-btn.cart-btn {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    flex: 0 0 30px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #window:not(.maximized) .gh-cart-symbol-image,
  #window:not(.maximized) .gh-cart-symbol-image img,
  #infoWindow:not(.maximized) .gh-cart-symbol-image,
  #infoWindow:not(.maximized) .gh-cart-symbol-image img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  /* Metal Pricing uses a text glyph inside the same 30px button shell. */
  #metalWindow:not(.maximized) .metal-refresh-symbol {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  #window:not(.maximized) .xp-toolbar .toolbar-text,
  #infoWindow:not(.maximized) .simple-info-toolbar .toolbar-text,
  #metalWindow:not(.maximized) .metal-toolbar .toolbar-text,
  #window:not(.maximized) .auto-metal-toolbar-item .toolbar-text {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* Keep every address row paired with the standardized 40px toolbar. */
  #window:not(.maximized) .xp-address-bar,
  #infoWindow:not(.maximized) .info-address-bar,
  #metalWindow:not(.maximized) .metal-address-bar {
    top: 40px !important;
    min-height: 24px !important;
    height: 24px !important;
  }

  /* Messenger sign-on: much smaller first state in landscape. The selector is
     intentionally at the end of the stylesheet and does not depend on the
     max-height:620px breakpoint, so tall landscape browser UI cannot bypass it. */
  #aimWindow.aim-signon-size:not(.maximized):not(.minimized),
  .aim-window.aim-signon-size:not(.maximized):not(.minimized) {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 245px !important;
    min-width: 245px !important;
    max-width: min(245px, calc(100vw - 32px)) !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: min(220px, calc(100dvh - 20px)) !important;
    resize: none !important;
    overflow: hidden !important;
  }

  #aimWindow.aim-signon-size .aim-content,
  .aim-window.aim-signon-size .aim-content {
    padding: 3px !important;
    overflow: hidden !important;
  }

  #aimWindow.aim-signon-size #aimSignOnPanel,
  .aim-window.aim-signon-size #aimSignOnPanel {
    padding: 2px 4px 3px !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #aimWindow.aim-signon-size .aim-logo-box,
  .aim-window.aim-signon-size .aim-logo-box {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 0 3px !important;
  }

  #aimWindow.aim-signon-size .aim-label,
  .aim-window.aim-signon-size .aim-label {
    font-size: 8.5px !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }

  #aimWindow.aim-signon-size .aim-input,
  .aim-window.aim-signon-size .aim-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 19px !important;
    min-height: 19px !important;
    margin-bottom: 3px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  #aimWindow.aim-signon-size .aim-check-row,
  .aim-window.aim-signon-size .aim-check-row {
    gap: 3px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
  }

  #aimWindow.aim-signon-size .aim-check-row input,
  .aim-window.aim-signon-size .aim-check-row input {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
  }

  #aimWindow.aim-signon-size .aim-signon-image-btn,
  .aim-window.aim-signon-size .aim-signon-image-btn {
    position: static !important;
    width: 54px !important;
    height: auto !important;
    margin: 2px 1px 0 auto !important;
  }

  #aimWindow.aim-signon-size .aim-version,
  .aim-window.aim-signon-size .aim-version {
    position: static !important;
    margin-top: 1px !important;
    padding-top: 0 !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   GH V96 - MESSENGER BANNER FIT + SMALLER MOBILE START MENU
   Builds directly on v95.
   - Messenger sign-on banner is fully contained instead of cropped.
   - Start Menu panel is slightly smaller on touch mobile; taskbar is untouched.
========================================================= */

/* Phone landscape Messenger: preserve the compact v95 window, but show the
   complete banner artwork at its natural aspect ratio instead of cropping it. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) {
  #aimWindow.aim-signon-size:not(.maximized) .aim-logo-box,
  .aim-window.aim-signon-size:not(.maximized) .aim-logo-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #aimWindow.aim-signon-size:not(.maximized) .aim-logo-box img,
  .aim-window.aim-signon-size:not(.maximized) .aim-logo-box img {
    width: auto !important;
    height: 100% !important;
    max-width: 86% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Slightly smaller Start Menu panel only. Keep the taskbar/start button at
     their existing v95 dimensions. */
  #start-menu {
    width: min(260px, calc(100vw - 28px)) !important;
    height: min(300px, calc(100dvh - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
  }
}

/* Portrait mobile Start Menu: modest reduction from the previous near-full
   width menu. Taskbar dimensions are intentionally not touched here. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 749px) {
  #start-menu {
    width: min(350px, 88vw) !important;
    height: min(330px, calc(100dvh - 72px)) !important;
    max-height: calc(100dvh - 72px) !important;
  }
}

/* =========================================================
   GH V97 - FINAL LAYOUT POLISH
   - Prevent desktop info-gallery thumbnails from colliding.
   - Match All Products collection shortcuts to product shortcut sizing on mobile.
   - Keep mobile taskbar tabs left-anchored so icon + beginning of title stay visible.
========================================================= */

/* Desktop/tablet info photo gallery: fluid 3-column thumbnails instead of
   three fixed 145px cards that can overrun narrower desktop windows. */
@media (min-width: 769px) {
  .gh-info-gallery-thumb-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 22px 16px 26px !important;
    align-items: start !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .gh-info-gallery-thumb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 145px !important;
    justify-self: center !important;
  }

  .gh-info-gallery-thumb img {
    width: 100% !important;
    max-width: 145px !important;
    height: auto !important;
    aspect-ratio: 1.45 / 1 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }
}

/* All Products > Collections: use the same compact mobile shortcut geometry
   as the Products row instead of the generic large collection cards. */
@media (max-width: 700px) {
  #infoAllProductsPage .all-products-section:last-of-type .all-products-row,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(1, 118px) !important;
    grid-auto-columns: 96px !important;
    gap: 10px !important;
    min-height: 132px !important;
    max-height: 150px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 10px !important;
    align-items: start !important;
    justify-content: start !important;
    flex-wrap: nowrap !important;
  }

  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .all-products-shortcut,
  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .desktop-product-shortcut,
  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .collection-product-shortcut,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .all-products-shortcut,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .desktop-product-shortcut,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .collection-product-shortcut {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    min-height: 108px !important;
    height: auto !important;
    gap: 4px !important;
    padding: 4px 3px !important;
    flex: none !important;
    margin: 0 !important;
  }

  #infoAllProductsPage .all-products-section:last-of-type .all-products-row img,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .all-products-shortcut span,
  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .desktop-product-shortcut span,
  #infoAllProductsPage .all-products-section:last-of-type .all-products-row .collection-product-shortcut span,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .all-products-shortcut span,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .desktop-product-shortcut span,
  .info-page#infoAllProductsPage .all-products-section:last-of-type .all-products-row .collection-product-shortcut span {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    min-height: 0 !important;
  }
}

/* Mobile taskbar: keep the icon and the START of the window title visible.
   Tabs can still scroll horizontally when several windows are open. */
@media (max-width: 768px) {
  #taskbar-apps {
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 2px !important;
  }

  .taskbar-app {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    flex: 0 0 112px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .taskbar-app::before {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex: 0 0 14px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .taskbar-app {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-basis: 128px !important;
  }
}

\n\n/* =========================================================\n   GH V99 - ABOUT PARTNERSHIPS + LANDSCAPE START MENU + TABLET CENTERING\n   Builds directly on v98.\n========================================================= */\n\n/* About Me: reuse the same partnership content/settings as GoldHearted EDU. */\n#infoAboutPage .gh-about-partners-panel {\n  margin-top: 18px !important;\n  background: #f7f7f7 !important;\n  border: 1px solid #8f8f8f !important;\n  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;\n}\n\n#infoAboutPage .gh-about-partners-title {\n  padding: 8px 10px !important;\n  background: linear-gradient(90deg, #5a0f85 0%, #7820b0 45%, #d7c1e8 100%) !important;\n  border-bottom: 1px solid #4c0872 !important;\n  color: #ffffff !important;\n  font-family: var(--body-font) !important;\n  font-size: 14px !important;\n  line-height: 1 !important;\n  text-shadow: 1px 1px 0 rgba(0,0,0,0.32) !important;\n}\n\n#infoAboutPage .gh-about-partners-grid {\n  display: grid !important;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n  gap: 14px !important;\n  padding: 16px !important;\n  background: #ffffff !important;\n}\n\n#infoAboutPage .gh-about-partner-card {\n  min-height: 116px !important;\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 8px !important;\n  padding: 12px 8px !important;\n  text-align: center !important;\n  text-decoration: none !important;\n  color: #111111 !important;\n  background: #f4f4f4 !important;\n  border: 1px solid #8f8f8f !important;\n  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;\n}\n\n#infoAboutPage .gh-about-partner-card:hover {\n  background: #f0e7ff !important;\n  border-color: #6b079b !important;\n}\n\n#infoAboutPage .gh-about-partner-icon {\n  width: 62px !important;\n  height: 62px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  padding: 7px !important;\n  border: 1px solid #c9c9c9 !important;\n  background: #ffffff !important;\n  color: #6b079b !important;\n  font-size: 30px !important;\n  box-shadow: inset 1px 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.12) !important;\n  box-sizing: border-box !important;\n}\n\n#infoAboutPage .gh-about-partner-icon img {\n  display: block !important;\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: contain !important;\n}\n\n#infoAboutPage .gh-about-partner-label {\n  display: block !important;\n  max-width: 100% !important;\n  font-family: var(--body-font) !important;\n  font-size: 12px !important;\n  line-height: 1.15 !important;\n  overflow-wrap: anywhere !important;\n}\n\n@media (max-width: 900px) {\n  #infoAboutPage .gh-about-partners-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n  }\n}\n\n@media (max-width: 768px) {\n  #infoAboutPage .gh-about-partners-title {\n    font-size: 12px !important;\n    padding: 7px 8px !important;\n  }\n\n  #infoAboutPage .gh-about-partners-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    gap: 8px !important;\n    padding: 10px !important;\n  }\n\n  #infoAboutPage .gh-about-partner-card {\n    min-height: 96px !important;\n    padding: 8px 6px !important;\n  }\n\n  #infoAboutPage .gh-about-partner-icon {\n    width: 50px !important;\n    height: 50px !important;\n  }\n\n  #infoAboutPage .gh-about-partner-label {\n    font-size: 10px !important;\n  }\n}\n\n/* Phone landscape Start Menu: keep the v96 panel size, but scale the internal\n   type/controls to the compact landscape footprint so no labels are cut off. */\n@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 1180px) {\n  #start-menu {\n    overflow: hidden !important;\n  }\n\n  #start-header {\n    flex: 0 0 42px !important;\n    height: 42px !important;\n    min-height: 42px !important;\n    padding: 5px 8px !important;\n    box-sizing: border-box !important;\n  }\n\n  #xp-user {\n    max-width: 100% !important;\n    min-width: 0 !important;\n    font-size: 14px !important;\n    line-height: 1 !important;\n    white-space: nowrap !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n  }\n\n  #start-content {\n    display: grid !important;\n    grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;\n    width: 100% !important;\n    min-width: 0 !important;\n    overflow: hidden !important;\n  }\n\n  #start-content > .start-left,\n  #start-content > .start-right {\n    width: auto !important;\n    min-width: 0 !important;\n    max-width: none !important;\n    padding-top: 4px !important;\n    box-sizing: border-box !important;\n    overflow: hidden !important;\n  }\n\n  #start-content > .start-right {\n    background: linear-gradient(to bottom, #f1edf5, #d9d4df) !important;\n    background-clip: border-box !important;\n  }\n\n  .start-item,\n  .start-item-right {\n    min-width: 0 !important;\n    height: 29px !important;\n    padding: 0 6px !important;\n    gap: 4px !important;\n    font-size: 8.5px !important;\n    line-height: 1 !important;\n    box-sizing: border-box !important;\n    overflow: hidden !important;\n  }\n\n  .start-item > span:last-child,\n  .start-item-right > span:last-child {\n    min-width: 0 !important;\n    max-width: 100% !important;\n    overflow: hidden !important;\n    white-space: nowrap !important;\n    text-overflow: ellipsis !important;\n  }\n\n  .start-item .start-custom-icon,\n  .start-item-right .start-custom-icon,\n  .start-item .start-custom-icon-img,\n  .start-item-right .start-custom-icon-img {\n    width: 21px !important;\n    min-width: 21px !important;\n    max-width: 21px !important;\n    height: 21px !important;\n    min-height: 21px !important;\n    max-height: 21px !important;\n    flex: 0 0 21px !important;\n  }\n\n  #start-footer {\n    flex: 0 0 42px !important;\n    height: 42px !important;\n    min-height: 42px !important;\n    gap: 4px !important;\n    padding: 3px 6px !important;\n    box-sizing: border-box !important;\n    overflow: hidden !important;\n  }\n\n  #start-footer .footer-action {\n    min-width: 0 !important;\n    gap: 3px !important;\n    font-size: 8.5px !important;\n    line-height: 1 !important;\n    white-space: nowrap !important;\n    overflow: hidden !important;\n  }\n\n  #start-footer .footer-action span:last-child {\n    min-width: 0 !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n  }\n\n  #start-footer .footer-icon {\n    width: 23px !important;\n    min-width: 23px !important;\n    height: 23px !important;\n    min-height: 23px !important;\n    flex: 0 0 23px !important;\n  }\n}\n\n/* Tablet/small-desktop viewport: center every floating XP window in the usable\n   workspace. This corrects the old per-window 54%/58% left offsets while\n   preserving each window's own dimensions and maximized behavior. */\n@media (min-width: 769px) and (max-width: 1366px) and (max-height: 1100px) {\n  #window:not(.maximized):not(.minimized),\n  #infoWindow:not(.maximized):not(.minimized),\n  #namechainWindow:not(.maximized):not(.minimized),\n  #metalWindow:not(.maximized):not(.minimized),\n  #aimWindow:not(.maximized):not(.minimized) {\n    left: 50% !important;\n    top: calc((100dvh - 48px) / 2) !important;\n    right: auto !important;\n    bottom: auto !important;\n    transform: translate(-50%, -50%) !important;\n    max-width: calc(100vw - 36px) !important;\n    max-height: calc(100dvh - 68px) !important;\n  }\n\n  .xp-cart-window {\n    left: 50% !important;\n    top: calc((100dvh - 48px) / 2) !important;\n    transform: translate(-50%, -50%) !important;\n    max-width: calc(100vw - 36px) !important;\n    max-height: calc(100dvh - 68px) !important;\n  }\n}\n

/* =========================================================
   GH V100 - ABOUT PARTNERSHIP MATCH + SLIM LANDSCAPE MESSENGER
   Builds directly on v99.
========================================================= */

/* About Me: make Partnerships visually identical to the EDU partnership panel. */
#infoAboutPage .gh-about-partners-panel {
  margin-top: 18px !important;
  background: #f7f7f7 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-panel-title,
#infoAboutPage .gh-about-partners-title {
  padding: 8px 10px !important;
  background: linear-gradient(90deg, #5a0f85 0%, #7820b0 45%, #d7c1e8 100%) !important;
  border-bottom: 1px solid #4c0872 !important;
  color: #ffffff !important;
  font-family: var(--body-font) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.32) !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partners-grid,
#infoAboutPage .gh-about-partners-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 16px !important;
  background: #ffffff !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partner-card,
#infoAboutPage .gh-about-partner-card {
  min-height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #111111 !important;
  background: #f4f4f4 !important;
  border: 1px solid #8f8f8f !important;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #777777 !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partner-card:hover,
#infoAboutPage .gh-about-partner-card:hover {
  background: #f0e7ff !important;
  border-color: #6b079b !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partner-icon,
#infoAboutPage .gh-about-partner-icon {
  width: 62px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px !important;
  border: 1px solid #c9c9c9 !important;
  background: #ffffff !important;
  color: #6b079b !important;
  font-size: 30px !important;
  box-shadow: inset 1px 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.12) !important;
  box-sizing: border-box !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partner-icon img,
#infoAboutPage .gh-about-partner-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

#infoAboutPage .gh-about-partners-panel .gh-edu-partner-label,
#infoAboutPage .gh-about-partner-label {
  display: block !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  #infoAboutPage .gh-about-partners-panel .gh-edu-partners-grid,
  #infoAboutPage .gh-about-partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  #infoAboutPage .gh-about-partners-panel .gh-edu-panel-title,
  #infoAboutPage .gh-about-partners-title {
    font-size: 12px !important;
    padding: 7px 8px !important;
  }

  #infoAboutPage .gh-about-partners-panel .gh-edu-partners-grid,
  #infoAboutPage .gh-about-partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  #infoAboutPage .gh-about-partners-panel .gh-edu-partner-card,
  #infoAboutPage .gh-about-partner-card {
    min-height: 96px !important;
    padding: 8px 6px !important;
  }

  #infoAboutPage .gh-about-partners-panel .gh-edu-partner-icon,
  #infoAboutPage .gh-about-partner-icon {
    width: 50px !important;
    height: 50px !important;
  }

  #infoAboutPage .gh-about-partners-panel .gh-edu-partner-label,
  #infoAboutPage .gh-about-partner-label {
    font-size: 10px !important;
  }
}

/* Phone / compact landscape: make Messenger noticeably slimmer while keeping
   the existing compact vertical layout and full banner artwork. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  #aimWindow.aim-signon-size:not(.maximized):not(.minimized),
  .aim-window.aim-signon-size:not(.maximized):not(.minimized) {
    width: 220px !important;
    min-width: 220px !important;
    max-width: min(220px, calc(100vw - 28px)) !important;
    height: 218px !important;
    min-height: 218px !important;
    max-height: min(218px, calc(100dvh - 18px)) !important;
  }

  #aimWindow.aim-signon-size:not(.maximized) .aim-logo-box img,
  .aim-window.aim-signon-size:not(.maximized) .aim-logo-box img {
    max-width: 82% !important;
  }

  #aimWindow.aim-signon-size .aim-label,
  .aim-window.aim-signon-size .aim-label {
    font-size: 8px !important;
  }

  #aimWindow.aim-signon-size .aim-input,
  .aim-window.aim-signon-size .aim-input {
    font-size: 8.5px !important;
  }

  #aimWindow.aim-signon-size .aim-check-row,
  .aim-window.aim-signon-size .aim-check-row {
    font-size: 8px !important;
  }
}


/* =========================================================
   GH V101 - Story / policy / SEO content architecture
========================================================= */
#infoAboutPage .gh-about-timeline {
  margin-top: 12px;
  border: 1px solid #8f8872;
  background: #f8f5e9;
  box-shadow: inset 0 0 0 1px #fff;
}
#infoAboutPage .gh-about-timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: #fff;
  background: linear-gradient(to right, #3b075f, #8e2bd3, #caa7e6);
  border-bottom: 1px solid #4e1a68;
}
#infoAboutPage .gh-about-timeline-header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 18px;
  line-height: 1.1;
}
#infoAboutPage .gh-about-timeline-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #d1c8ae;
  background: #fffdf4;
}
#infoAboutPage .gh-about-timeline-item:last-child { border-bottom: 0; }
#infoAboutPage .gh-about-timeline-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #5e188b;
  background: linear-gradient(#9e38dc, #5b0a8f);
  color: #fff;
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 13px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
}
#infoAboutPage .gh-about-timeline-copy h3 {
  margin: 0 0 6px;
  color: #5b0a8f;
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 17px;
  line-height: 1.15;
}
#infoAboutPage .gh-about-timeline-copy .info-richtext,
#infoAboutPage .gh-about-timeline-copy p {
  margin-top: 0;
}
#infoAboutPage .gh-about-partners-intro {
  margin: 0;
  padding: 10px 12px 2px;
  color: #222;
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 14px;
  line-height: 1.35;
}

.gh-policies-shell { padding: 12px !important; }
.gh-policies-header {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #8a7a96;
  background: linear-gradient(135deg, #fffdf4, #f3e6ff);
}
.gh-policies-header h1,
.gh-policies-display-title {
  margin: 0 0 5px;
  color: #5b0a8f;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif);
  font-size: 30px;
  line-height: 1;
}
.gh-policies-header p { margin: 0; }
.gh-policy-card {
  margin: 0 0 8px;
  border: 1px solid #8e8772;
  background: #fffdf4;
}
.gh-policy-card > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(to right, #5a0a8d, #9c38d7, #caa6e7);
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 16px;
  font-weight: 700;
}
.gh-policy-card > summary::-webkit-details-marker { display: none; }
.gh-policy-card > summary::after { content: "▶"; float: right; font-size: 11px; }
.gh-policy-card[open] > summary::after { transform: rotate(90deg); }
.gh-policy-body { padding: 10px 12px; }
.gh-faq-policy-link {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid #5b0a8f;
  background: #efe2fb;
  color: #5b0a8f !important;
  text-decoration: underline;
  font-weight: 700;
}

#infoCustomGrillzPage .gh-grillz-main-title {
  margin: 0 0 6px;
  color: #5b0a8f;
  font-family: var(--title-font, "GoldHeartedTitle", Georgia, serif);
  font-size: 34px;
  line-height: 1;
}
#infoCustomGrillzPage .gh-grillz-status-line {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 7px;
  border: 1px solid #9c8b3a;
  background: #fff3a6;
  color: #3b2c00;
  font-family: var(--xp-font, TahomaXP, Tahoma, sans-serif);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 768px) {
  #infoAboutPage .gh-about-timeline-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
    padding: 9px;
  }
  #infoAboutPage .gh-about-timeline-step { width: 32px; height: 32px; font-size: 11px; }
  #infoAboutPage .gh-about-timeline-copy h3 { font-size: 15px; }
  .gh-policies-header h1,
  .gh-policies-display-title { font-size: 25px; }
  #infoCustomGrillzPage .gh-grillz-main-title { font-size: 28px; }
}