/** Shopify CDN: Minification failed

Line 18259:147 Unexpected "\\nbody"
Line 18259:182 Expected ":"
Line 18259:216 Expected ":"
Line 18259:219 Expected "{" but found end of file

**/
@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