/** Shopify CDN: Minification failed

Line 1187:2 Invalid escape

**/
/* Zodiac Tool Styles - Godly Theme Revamp */

/*
  Table of Contents:
  1. CSS Variables & Base Styles
  2. Typography
  3. Layout & Grid
  4. Product Media & Main Image
  5. Zodiac Overlay & Preview Group
  6. Thumbnails
  7. Media Controls & Adjust Button
  8. Placement Controls Panel
  9. Product Info & Header
  10. Zodiac Personalization UI (Selectors, Colors, Summary)
  11. Birth Chart UI
  12. Product Form (Variants, Quantity, ATC)
  13. Buttons (General & Specific)
  14. Popup Modal
  15. Helper & Accessibility Classes
  16. Responsive Design
*/

/* 1. CSS Variables & Base Styles
-------------------------------------------------------------------------------- */
:root {
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  /* Theme Colors from User Request */
  --color-primary-soft: #fadadd; /* Soft Pink */
  --color-secondary-soft: #fff5ba; /* Soft Yellow */
  --color-text-dark: #333333; /* Deep Black */

  /* Derived/Additional Theme Colors */
  --color-primary-soft-strong: #f7ced3; /* Slightly darker pink for accents */
  --color-secondary-soft-strong: #fef0a1; /* Slightly darker yellow for accents */
  --color-background-main: #fdfcfa; /* Very light, almost white, warm tone for page background */
  --color-background-card: #ffffff;
  --color-border-subtle: #f0e9e9; /* Softer border color */
  --color-text-primary: var(--color-text-dark);
  --color-text-secondary: #5f5f5f;
  --color-text-on-primary: var(--color-text-dark); /* Text on soft pink */
  --color-text-on-secondary: var(--color-text-dark); /* Text on soft yellow */
  --color-text-on-dark: #ffffff; /* Text on deep black */
  --color-accent-interactive: #e9a4b1; /* A slightly stronger pink for interactions */
  --color-focus-ring: color-mix(in srgb, var(--color-accent-interactive) 40%, transparent);

  /* Shadows & Radii */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.07);
  --shadow-button: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-button-hover: 0 4px 10px rgba(0, 0, 0, 0.1); /* For button lift */
  --border-radius-card: 20px;
  --border-radius-button-pill: 9999px;
  --border-radius-button-soft: 12px;
  --border-radius-inner: 10px;
  --border-radius-swatch: 6px;

  /* Transitions */
  --transition-smooth: all 200ms ease-in-out;
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Z-Index Layers */
  --z-base: 1;
  --z-media-image: 5;
  --z-thumbnail-grid: 10;
  --z-zodiac-overlay: 15; /* Contains preview content */
  --z-adjust-overlay: 20; /* Adjust button on non-featured */
  --z-media-controls: 25; /* Controls on main image */
  --z-placement-controls: 30; /* Main placement panel */
  --z-select-dropdown: 100;
  --z-popup-overlay: 999;
  --z-popup-content: 1000;
  --font-inter: "Inter", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  --color-soft-pink: #ffd1dc;
  --color-light-pink: #ffe4e1;
  --color-lavender: #e6e6fa;
  --color-light-lavender: #f3e8ff;
  --color-pastel-yellow: #fffacd;
  --color-pastel-green: #d1ffd7;
  --color-sky-blue: #e0f2fe;
  --color-black: #333333;

  --gradient-pink-lavender-start: #ffd1dc;
  --gradient-pink-lavender-end: #e6e6fa;

  --primary-color: #ec4899; /* Pink-500 */
  --primary-color-darker: #db2777; /* Pink-600 */
  --secondary-color: #a855f7; /* Purple-500 */
  --secondary-color-darker: #9333ea; /* Purple-600 */

  --border-color: #e5e7eb; /* Gray-200 */
  --input-border-color: #d1d5db; /* Gray-300 */
  --ring-color: var(--primary-color);
  --text-color-default: #1f2937; /* Gray-800 */
  --text-color-muted: #6b7280; /* Gray-500 */
  --text-color-heading: #111827; /* Gray-900 */
  --background-color-page: linear-gradient(to bottom right, var(--color-light-pink), white, var(--color-light-lavender));
  --background-color-card: white;
  --shadow-pastel-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-full: 9999px;
}

/* Apply settings from Liquid to global vars if desired */
.product-section--godly-theme-zpt-mi {
  --color-primary-soft: var(--zodiac-pink-setting, #fadadd);
  --color-secondary-soft: var(--zodiac-yellow-setting, #fff5ba);
  --color-text-dark: var(--zodiac-black-setting, #333333);

  /* Re-calculate derived colors based on settings if necessary */
  --color-primary-soft-strong: color-mix(in srgb, var(--color-primary-soft) 90%, black);
  --color-secondary-soft-strong: color-mix(in srgb, var(--color-secondary-soft) 90%, black);
  /* Text color logic is now handled in JS for summary badges */

  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-background-main);
  padding: 2rem 0;
}

* {
  box-sizing: border-box;
}

/* 2. Typography
-------------------------------------------------------------------------------- */
.product-section--godly-theme-zpt-mi h1,
.product-section--godly-theme-zpt-mi h2,
.product-section--godly-theme-zpt-mi h3,
.product-section--godly-theme-zpt-mi h4 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-top: 0;
}

.product-title-zpt-mi {
  font-size: 2.25rem; /* Elegant large title */
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.product-vendor-zpt-mi {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

.price-container-zpt-mi .price-zpt-mi {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-accent-interactive);
}

.zodiac-tool-header-zpt-mi h2,
.zodiac-popup-title-zpt-mi {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.zodiac-tool-header-zpt-mi p,
.zodiac-popup-description-zpt-mi {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.sign-header-zpt-mi h3 {
  font-size: 1.25rem;
  font-weight: 600;
}
.control-label-zpt-mi,
.variant-label-upgraded-zpt-mi {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
  display: block; /* Ensure it takes full width for alignment */
}
.zodiac-symbol-zpt-mi {
  font-size: 2.5rem; /* Keep symbols large and impactful */
  font-weight: normal; /* Symbols often have their own weight */
  line-height: 1;
}

/* 3. Layout & Grid
-------------------------------------------------------------------------------- */
.product-container-zpt-mi {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.product-grid-zpt-mi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  /* Adjust breakpoint for 2-col layout */
  .product-grid-zpt-mi {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* Slightly larger media col */
    gap: 3rem;
  }
}

.product-media-zpt-mi {
  position: relative;
  z-index: var(--z-base);
}
.product-info-zpt-mi {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Consistent gap between info cards */
}

/* Card Style Base (Applied via .card-style-zpt-mi class in Liquid) */
.card-style-zpt-mi {
  background-color: var(--color-background-card);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: var(--transition-smooth);
}
.card-style-zpt-mi:hover {
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 768px) {
  .card-style-zpt-mi {
    padding: 2rem;
  }
}

/* 4. Product Media & Main Image
-------------------------------------------------------------------------------- */
.main-media-container-zpt-mi {
  position: relative;
  margin-bottom: 1rem;
  z-index: var(--z-media-image); /* Ensure this is above general page flow but below specific overlays */
}

.main-media-zpt-mi {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-background-card); /* Softer background */
  border-radius: var(--border-radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: grab;
  user-select: none;
}
.main-media-zpt-mi.dragging-zpt-mi {
  cursor: grabbing;
}
.main-media-zpt-mi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Critical for interactjs */
}
.placeholder-media-zpt-mi {
  /* Styles for placeholder */
  /* ... existing ... */
  border-radius: var(--border-radius-card);
}

/* 5. Zodiac Overlay & Preview Group
-------------------------------------------------------------------------------- */
.zodiac-overlay-zpt-mi {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Overlay itself is not interactive */
  z-index: var(--z-zodiac-overlay);
}
.zodiac-overlay-zpt-mi.hidden-zpt-mi {
  display: none !important;
}
.zodiac-overlay-zpt-mi * {
  pointer-events: auto;
} /* Children can be interactive */

.grid-overlay-zpt-mi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: calc(var(--z-zodiac-overlay) + 1); /* Above preview content */
}
.grid-overlay-zpt-mi.show-zpt-mi {
  display: block;
}
.grid-line-v-zpt-mi,
.grid-line-h-zpt-mi {
  position: absolute;
  border-color: color-mix(in srgb, var(--color-accent-interactive) 40%, transparent);
}
.grid-line-v-zpt-mi {
  top: 0;
  bottom: 0;
  border-left: 1px dashed;
}
.grid-line-h-zpt-mi {
  left: 0;
  right: 0;
  border-top: 1px dashed;
}
.center-crosshair-zpt-mi {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-accent-interactive);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.preview-group-zpt-mi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  /* border: 2px dashed transparent; Ensure this doesn't add unwanted space */
  padding: 0; /* Let content define padding */
}
.preview-group-zpt-mi.placement-mode-zpt-mi {
  cursor: move;
  border: 2px dashed var(--color-accent-interactive);
  border-radius: var(--border-radius-inner);
  background: color-mix(in srgb, var(--color-accent-interactive) 5%, transparent);
}
.preview-content-zpt-mi {
  background: transparent;
}
.preview-content-zpt-mi img {
  /* For birth chart image preview */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pdf-placeholder-zpt-mi {
  /* Styling for PDF placeholder text */
  /* ... existing ... */
  font-family: var(--font-body);
  color: var(--color-text-secondary);
}
.preview-content-zpt-mi.personalized-zpt-mi {
  opacity: 1; /* Keep it clear */
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.15));
}

/* Layout Styles (Grid, Horizontal etc.) */
.layout-grid-zpt-mi,
.layout-horizontal-zpt-mi,
.layout-vertical-zpt-mi,
.layout-paired-zpt-mi {
  padding: 0.5rem; /* Reduced padding, rely on symbol size */
  display: flex; /* Using flex for more control for all */
  align-items: center;
  justify-content: center;
}
.layout-grid-zpt-mi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.layout-horizontal-zpt-mi {
  flex-direction: column;
  gap: 0.5rem;
}
.layout-horizontal-row-zpt-mi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.layout-vertical-zpt-mi {
  flex-direction: column;
  gap: 1rem;
}
.layout-vertical-item-zpt-mi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.layout-paired-zpt-mi {
  flex-direction: column;
  gap: 0.75rem;
}
.layout-paired-row-zpt-mi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.celestial-icon-zpt-mi {
  width: 2rem;
  height: 2rem;
} /* Refined size */

.resize-handle-zpt-mi {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-accent-interactive);
  border-radius: 50%;
  cursor: se-resize;
  border: 3px solid var(--color-background-card);
  box-shadow: var(--shadow-button);
  touch-action: none;
  z-index: calc(var(--z-zodiac-overlay) + 2); /* Above grid */
}
.position-indicator-zpt-mi {
  position: absolute;
  top: -2.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-dark);
  color: var(--color-text-on-dark);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: var(--border-radius-button-soft);
  white-space: nowrap;
  box-shadow: var(--shadow-button);
  z-index: calc(var(--z-zodiac-overlay) + 2);
}
button[type=button]:not(.button){
  padding: 10px 5px;
}
.zodiac-badge-zpt-mi {
  /* Personalized badge */
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--color-primary-soft-strong), var(--color-accent-interactive));
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius-button-pill);
  font-size: 1.25rem;
  font-weight: 600;
  box-shadow: var(--shadow-button);
  z-index: calc(var(--z-zodiac-overlay) + 1);
}
.zodiac-instructions-zpt-mi {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-inner);
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: calc(var(--z-zodiac-overlay) + 1);
}

/* 6. Thumbnails
-------------------------------------------------------------------------------- */
.thumbnail-grid-container-zpt-mi {
  background: transparent; /* No card style for container */
  border: none;
  padding: 0;
  margin-top: 1rem;
  position: relative;
  z-index: var(--z-thumbnail-grid); /* Ensure thumbnails are contextually layered */
}
.thumbnail-grid-zpt-mi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Responsive sizing */
  gap: 0.75rem;
}
.thumbnail-item-zpt-mi {
  aspect-ratio: 1;
  cursor: pointer;
  position: relative;
  border-radius: var(--border-radius-inner);
  overflow: hidden;
  transition: var(--transition-smooth);
  border: 2px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.thumbnail-item-zpt-mi:hover,
.thumbnail-item-zpt-mi:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent-interactive);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.thumbnail-item-zpt-mi.active-zpt-mi {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}
.thumbnail-content-zpt-mi {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail-content-zpt-mi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbnail-label-zpt-mi {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  padding: 6px 2px 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.video-badge-zpt-mi {
  /* Play icon for video */
  /* ... existing, ensure good contrast ... */
  background: rgba(0, 0, 0, 0.5);
  width: 28px;
  height: 28px;
}

/* 7. Media Controls & Adjust Button
-------------------------------------------------------------------------------- */
.media-controls-zpt-mi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem; /* Spacing from main image */
  position: relative; /* Stacking context */
  z-index: var(--z-media-controls);
}
/* General button styles will apply via .media-btn-zpt-mi */

.adjust-engraving-overlay-zpt-mi {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: var(--z-adjust-overlay); /* Above image, below potential main controls */
}
.adjust-engraving-overlay-zpt-mi.hidden-zpt-mi {
  display: none;
}
.adjust-engraving-btn-zpt-mi {
  /* Specific styling if needed beyond .btn-zpt-mi */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem; /* Slightly smaller */
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(5px);
}
.adjust-engraving-btn-zpt-mi:hover {
  background-color: white;
  border-color: var(--color-accent-interactive);
  color: var(--color-accent-interactive);
}
.adjust-engraving-btn-zpt-mi svg {
  width: 14px;
  height: 14px;
}

/* 8. Placement Controls Panel
-------------------------------------------------------------------------------- */
.placement-controls-zpt-mi {
  /* Already has .card-style-zpt-mi from Liquid */
  margin-top: 1.5rem;
  position: relative; /* Stacking context */
  z-index: var(--z-placement-controls);
}
.placement-controls-zpt-mi.hidden-zpt-mi {
  display: none !important;
}
.controls-header-zpt-mi {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.controls-header-zpt-mi h3 {
  font-size: 1.35rem;
  font-weight: 600;
}
.control-grid-zpt-mi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
  .control-grid-zpt-mi {
    grid-template-columns: 1fr 1fr;
  }
}
.control-group-zpt-mi {
  margin-bottom: 1.5rem;
}
.control-row-zpt-mi {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.control-slider-zpt-mi {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border-subtle);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.control-slider-zpt-mi::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-interactive);
  border: 3px solid var(--color-background-card);
  box-shadow: var(--shadow-button);
  transition: var(--transition-smooth);
}
.control-slider-zpt-mi::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.control-slider-zpt-mi::-moz-range-thumb {
  /* Firefox */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-interactive);
  border: 3px solid var(--color-background-card);
  box-shadow: var(--shadow-button);
  transition: var(--transition-smooth);
  cursor: pointer;
}
.control-slider-zpt-mi::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.custom-select-zpt-mi {
  min-width: 150px;
  width: 60%;
}
.control-value-zpt-mi {
  font-size: 0.875rem;
  min-width: 3.5rem;
  text-align: right;
  color: var(--color-text-primary);
  font-weight: 500;
  background-color: color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-inner);
}
.layout-buttons-zpt-mi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
/* .layout-btn-zpt-mi uses general button styles */
.layout-description-zpt-mi {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: white;
  font-size: 0.875rem;
  text-transform: capitalize;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.checkbox-row-zpt-mi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.checkbox-row-zpt-mi input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-accent-interactive);
  border-radius: 4px;
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
}
.checkbox-row-zpt-mi label {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  cursor: pointer;
}
.control-actions-zpt-mi {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* 9. Product Info & Header
-------------------------------------------------------------------------------- */
.product-header-zpt-mi.card-style-zpt-mi {
  padding-bottom: 1.5rem; /* Already a card */
}
.zodiac-tool-header-zpt-mi {
  /* For "Personalize your Big Three" */
  text-align: center;
  padding: 0 0 1.5rem 0; /* Padding inside the card */
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  /* Optional: Soft Gradient background */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-soft) 20%, transparent) 0%,
    transparent 70%
  );
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0; /* If it's the top */
  margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Extend to card edges if padding is 1.5rem */
  padding: 1.5rem 1.5rem 1rem 1.5rem;
}
@media (min-width: 768px) {
  .zodiac-tool-header-zpt-mi {
    margin: -2rem -2rem 1.5rem -2rem; /* Adjust for larger card padding */
    padding: 2rem 2rem 1.5rem 2rem;
  }
}

/* 10. Zodiac Personalization UI
-------------------------------------------------------------------------------- */
.zodiac-personalization-ui-zpt-mi.card-style-zpt-mi {
  /* Outer container */
  overflow: hidden; /* For header gradient */
}
.sign-section-zpt-mi.card-style-zpt-mi {
  /* Inner cards for Sun, Moon, Rising */
  margin-bottom: 1.5rem;
  background-color: color-mix(in srgb, var(--color-background-card) 95%, var(--color-border-subtle)); /* Slightly off-white */
}
.sign-section-zpt-mi:last-child {
  margin-bottom: 0;
}
.sign-header-zpt-mi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.celestial-icon-zpt-mi.sun-icon-zpt-mi path,
.celestial-icon-zpt-mi.sun-icon-zpt-mi circle {
  stroke: var(--color-secondary-soft-strong) !important;
}
.celestial-icon-zpt-mi.moon-icon-zpt-mi path,
.celestial-icon-zpt-mi.moon-icon-zpt-mi g {
  fill: var(--color-primary-soft-strong) !important;
}
.celestial-icon-zpt-mi.rising-icon-zpt-mi g {
  stroke: var(--color-text-dark) !important;
}

.sign-controls-zpt-mi {
  display: flex;

  gap: 0.75rem;
}
@media (min-width: 576px) {
  .sign-controls-zpt-mi {
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
  }
}

/* Custom Select */
.custom-select-zpt-mi {
  position: relative;
}
.select-trigger-zpt-mi {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-button-soft);
  background: var(--color-background-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-button);
}
.select-trigger-zpt-mi:hover,
.select-trigger-zpt-mi:focus-visible {
  border-color: var(--color-accent-interactive);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  outline: none;
}
.select-trigger-zpt-mi.open-zpt-mi {
  border-color: var(--color-accent-interactive);
}
.select-arrow-zpt-mi {
  transition: transform 0.2s ease;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}
.select-trigger-zpt-mi.open-zpt-mi .select-arrow-zpt-mi {
  transform: rotate(180deg);
}
.select-content-zpt-mi {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-background-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-button-soft);
  box-shadow: var(--shadow-card);
  z-index: calc(var(--z-select-dropdown) + 1); /* Above trigger */
  max-height: 250px;
  overflow-y: auto;
  display: none;
}
.select-content-zpt-mi.show-zpt-mi {
  display: block;
  animation: fadeInSoft-zpt-mi 0.2s ease forwards;
}
@keyframes fadeInSoft-zpt-mi {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.select-item-zpt-mi {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: background-color 0.15s ease;
}
.select-item-zpt-mi:hover {
  background-color: color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
}
.select-item-zpt-mi span {
  font-size: 1.1em;
  color: var(--color-text-secondary);
} /* Symbol */

/* Color Buttons - Upgraded */
.color-buttons-zpt-mi {
  display: flex;

  gap: 0.75rem; /* Space between color options */
}

.color-btn-zpt-mi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  border: 2px solid transparent !important;
  padding: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.color-swatch-zpt-mi {
  width: 1.5rem; /* Larger swatch */
  height: 1.5rem;
  border-radius: var(--border-radius-swatch); /* Slightly rounded square */
  border: 2px solid color-mix(in srgb, var(--color-text-dark) 15%, transparent); /* Subtle border */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0; /* Prevent swatch from shrinking */
}

.color-label-zpt-mi {
  color: var(--color-text-primary); /* Ensure label text color is consistent */
}

.color-btn-zpt-mi.active-zpt-mi {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-md);
}
.color-btn-zpt-mi.active-zpt-mi .color-label-zpt-mi {
  font-weight: 600;
  color: var(--color-accent-interactive);
}
.color-btn-zpt-mi.active-zpt-mi .color-swatch-zpt-mi {
  border-color: var(--color-accent-interactive);
  outline: 2px solid var(--color-accent-interactive);
  outline-offset: 1px;
}

.color-btn-zpt-mi:hover,
.color-btn-zpt-mi:focus-visible {
  border-color: var(--color-accent-interactive);
  background-color: color-mix(in srgb, var(--color-accent-interactive) 5%, transparent);
  box-shadow: 0 0 0 2px var(--color-focus-ring), var(--shadow-button-hover);
  outline: none;
}

/* Personalization Summary */
.personalization-summary-zpt-mi.card-style-zpt-mi {
  margin-top: 1.5rem; /* Add some space above the summary */
}
.personalization-summary-zpt-mi.card-style-zpt-mi h4 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}
.summary-grid-zpt-mi {
  display: grid;
  gap: 0.75rem;
}
.summary-item-zpt-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--color-border-subtle) 30%, transparent);
  border-radius: var(--border-radius-inner);
}
.summary-item-zpt-mi .summary-label-zpt-mi {
  /* Changed from span to class for clarity */
  font-weight: 500;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-right: 0.5rem;
}
button#resetPosition {
  background-color: white;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
button#togglePlacement {
  background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  border-color: transparent;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: white;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.summary-badge-zpt-mi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  border: 2px solid transparent !important;
  padding: .75rem !important;
  cursor: pointer !important;
  transition: all .2s ease-in-out;
  position: relative;
}
/* Initial badge colors set by Liquid, JS will update them */

/* 11. Birth Chart UI
-------------------------------------------------------------------------------- */
.birth-chart-label-zpt-mi {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}
.birth-chart-input-zpt-mi {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-button-soft);
  font-size: 0.9rem;
  transition: var(--transition-smooth);
  margin-bottom: 0.75rem;
  background-color: var(--color-background-card);
}
.birth-chart-input-zpt-mi:focus {
  border-color: var(--color-accent-interactive);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  outline: none;
}
.birth-chart-preview-zpt-mi {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin-top: 1rem;
  border-radius: var(--border-radius-inner);
  border: 1px solid var(--color-border-subtle);
  object-fit: contain;
  background-color: color-mix(in srgb, var(--color-border-subtle) 20%, transparent);
}
.birth-chart-filename-zpt-mi {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 12. Product Form
-------------------------------------------------------------------------------- */
.product-form-container-zpt-mi.card-style-zpt-mi {
  margin-top: 1.5rem;
}
.product-variants-upgraded-zpt-mi {
  margin-bottom: 1.5rem;
}
.variant-group-upgraded-zpt-mi {
  margin-bottom: 1.5rem;
} /* Increased margin */
.variant-options-upgraded-zpt-mi {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Upgraded Variant Option Buttons */
.variant-option-btn-zpt-mi {
  padding: 0.75rem 1.25rem; /* Increased hit area */
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--border-radius-button-soft); /* Softer radius */
  position: relative; /* For checkmark */
}
.variant-option-btn-zpt-mi .checkmark-icon-zpt-mi {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
  stroke: currentColor; /* Will be white on active */
  fill: none;
}
.variant-option-btn-zpt-mi.active-zpt-mi .checkmark-icon-zpt-mi {
  display: inline-block;
}
.variant-option-btn-zpt-mi.active-zpt-mi {
  background-image: linear-gradient(to right, #000000, #000000);
  color: white!important;
  border-color: transparent;
}
.variant-option-btn-zpt-mi:hover:not(.active-zpt-mi) {
  border-color: var(--color-accent-interactive);
  color: var(--color-accent-interactive);
  background-color: color-mix(in srgb, var(--color-accent-interactive) 10%, transparent);
}
.variant-option-btn-zpt-mi:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-accent-interactive);
  box-shadow: 0 0 0 2px var(--color-focus-ring), var(--shadow-button-hover);
}

.product-actions-upgraded-zpt-mi {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quantity-wrapper-upgraded-zpt-mi {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--border-radius-button-pill);
  width: fit-content;
  overflow: hidden;
}
.quantity-btn-zpt-mi {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.quantity-btn-zpt-mi:hover {
  background-color: color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
  color: var(--color-accent-interactive);
}
.quantity-input-upgraded-zpt-mi {
  width: 50px;
  height: 40px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-primary);
  outline: none;
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}
/* .btn-add-to-cart-upgraded-zpt-mi uses .btn-zpt-mi and .btn-primary-zpt-mi styles */
.buy-now-wrapper-upgraded-zpt-mi .shopify-payment-button__button {
  border-radius: var(--border-radius-button-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: var(--transition-smooth) !important;
  box-shadow: var(--shadow-button) !important;
}
.buy-now-wrapper-upgraded-zpt-mi .shopify-payment-button__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover) !important;
}

/* 13. Buttons (General & Specific)
-------------------------------------------------------------------------------- */
.btn-zpt-mi,
.media-btn-zpt-mi,
.layout-btn-zpt-mi,
.variant-option-btn-zpt-mi,
.adjust-engraving-btn-zpt-mi,
.quantity-btn-zpt-mi {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: white;
  font-size: 0.875rem;
  text-transform: capitalize;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  \
;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Note: .color-btn-zpt-mi has specific overrides above */

.btn-zpt-mi:hover,
.media-btn-zpt-mi:hover,
.layout-btn-zpt-mi:hover,
.variant-option-btn-zpt-mi:hover:not(.active-zpt-mi),
.adjust-engraving-btn-zpt-mi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
  border-color: var(--color-accent-interactive);
  color: var(--color-accent-interactive);
}
.btn-zpt-mi:focus-visible,
.media-btn-zpt-mi:focus-visible,
.layout-btn-zpt-mi:focus-visible,
.variant-option-btn-zpt-mi:focus-visible,
.adjust-engraving-btn-zpt-mi:focus-visible {
  border-color: var(--color-accent-interactive);
  box-shadow: 0 0 0 2px var(--color-focus-ring), var(--shadow-button-hover);
  outline: none; /* Custom focus ring */
}
.btn-zpt-mi.active-zpt-mi,
.media-btn-zpt-mi.active-zpt-mi,
.layout-btn-zpt-mi.active-zpt-mi {
  /* .variant-option-btn-zpt-mi.active-zpt-mi and .color-btn-zpt-mi.active-zpt-mi have specific styles */
  background-image: linear-gradient(to right, #f472b6, #a78bfa) !important;
  color: white !important;
  border-color: transparent !important;
}
/* Primary Button */
.btn-primary-zpt-mi,
.btn-add-to-cart-upgraded-zpt-mi {
  background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  width: 100%;
  padding: 0.75rem 0;
  border-radius: var(--border-radius-full);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.btn-primary-zpt-mi:hover,
.btn-add-to-cart-upgraded-zpt-mi:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-accent-interactive) 90%, black);
  border-color: color-mix(in srgb, var(--color-accent-interactive) 90%, black);
  color: var(--color-text-on-dark);
}
/* Secondary Button */
.btn-secondary-zpt-mi {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}
.btn-secondary-zpt-mi:hover {
  background-color: color-mix(in srgb, var(--color-border-subtle) 40%, transparent);
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}
.btn-zpt-mi:disabled,
.btn-add-to-cart-upgraded-zpt-mi:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.btn-add-to-cart-upgraded-zpt-mi .cart-icon-zpt-mi {
  margin-right: 0.5rem;
}
.loading-overlay-upgraded-zpt-mi {
  /* Styles for loading spinner */
  /* ... existing ... */
  background: var(--color-accent-interactive);
}
.loading-spinner-upgraded-zpt-mi {
  border-top-color: var(--color-text-on-dark);
}

/* 14. Popup Modal
-------------------------------------------------------------------------------- */
.zodiac-popup-zpt-mi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-popup-content); /* Above overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.zodiac-popup-zpt-mi.hidden-zpt-mi {
  display: none;
}
.zodiac-popup-overlay-zpt-mi {
  position: fixed; /* Use fixed for full viewport coverage */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(50, 30, 30, 0.4); /* Soft, dark overlay */
  backdrop-filter: blur(8px);
  z-index: var(--z-popup-overlay);
}
.zodiac-popup-content-zpt-mi.card-style-zpt-mi {
  /* Popup content is also a card */
  position: relative;
  width: 100%;
  max-width: 600px; /* Max width for readability */
  max-height: 90vh;
  overflow-y: auto;
  z-index: var(--z-popup-content); /* Above its own overlay */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow for popup */
}
.zodiac-popup-close-zpt-mi {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.zodiac-popup-close-zpt-mi:hover {
  background-color: color-mix(in srgb, var(--color-border-subtle) 50%, transparent);
  color: var(--color-accent-interactive);
}
.zodiac-popup-preview-zpt-mi {
  position: relative;
  margin-bottom: 1.5rem;
}
.popup-media-container-zpt-mi {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-border-subtle);
  border-radius: var(--border-radius-inner);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.popup-media-container-zpt-mi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popup-media-container-zpt-mi .preview-group-zpt-mi {
  cursor: move;
}
.popup-media-container-zpt-mi .resize-handle-zpt-mi {
  display: block !important; /* Ensure visible in popup */
}
.zodiac-popup-preview-zpt-mi::after {
  /* "Drag to position" hint */
  /* ... existing, ensure good contrast and font ... */
  font-family: var(--font-body);
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius-button-soft);
}
.zodiac-popup-controls-zpt-mi {
  margin-bottom: 1.5rem;
}
.zodiac-popup-actions-zpt-mi {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* 15. Helper & Accessibility Classes
-------------------------------------------------------------------------------- */
.hidden-zpt-mi {
  display: none !important;
}
.visually-hidden-zpt-mi {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Focus states handled by general button styles */

/* 16. Responsive Design
-------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Tablet and below */
  .product-grid-zpt-mi {
    grid-template-columns: 1fr;
  }
  .product-info-zpt-mi {
    margin-top: 2rem;
  }
}

@media (max-width: 767px) {
  /* Smaller tablets / Large phones */
  .product-title-zpt-mi {
    font-size: 1.85rem;
  }
  .price-container-zpt-mi .price-zpt-mi {
    font-size: 1.5rem;
  }
  .card-style-zpt-mi,
  .zodiac-popup-content-zpt-mi.card-style-zpt-mi {
    padding: 1.25rem;
  }
  .zodiac-tool-header-zpt-mi {
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
  }
  .zodiac-tool-header-zpt-mi h2 {
    font-size: 1.5rem;
  }
  .sign-header-zpt-mi h3 {
    font-size: 1.1rem;
  }
  .layout-buttons-zpt-mi {
    grid-template-columns: 1fr 1fr;
  } /* Keep 2 cols if space */
  .btn-zpt-mi,
  .media-btn-zpt-mi,
  .layout-btn-zpt-mi,
  .variant-option-btn-zpt-mi {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
  .color-btn-zpt-mi {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  } /* Adjusted color button padding */
  .btn-primary-zpt-mi,
  .btn-add-to-cart-upgraded-zpt-mi {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }
  .quantity-btn-zpt-mi {
    width: 36px;
    height: 36px;
  }
  .quantity-input-upgraded-zpt-mi {
    width: 45px;
    height: 36px;
  }
}

@media (max-width: 575px) {
  /* Mobile */
  .product-container-zpt-mi {
    padding: 0 0.75rem;
  }
  .sign-controls-zpt-mi {
    grid-template-columns: 1fr;
  }
  /* .color-buttons-zpt-mi already column from base styles */
  .control-grid-zpt-mi {
    grid-template-columns: 1fr;
  }
  .layout-buttons-zpt-mi {
    grid-template-columns: 1fr;
  } /* Stack layout buttons */
  .variant-options-upgraded-zpt-mi {
    flex-direction: column;
    align-items: stretch;
  }
  .variant-option-btn-zpt-mi {
    width: 100%;
    justify-content: center;
  }
  .product-actions-upgraded-zpt-mi {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-add-to-cart-upgraded-zpt-mi {
    width: 100%;
  }
  .buy-now-wrapper-upgraded-zpt-mi {
    width: 100%;
  }
  .thumbnail-grid-zpt-mi {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.5rem;
  }
  .zodiac-popup-content-zpt-mi.card-style-zpt-mi {
    padding: 1rem;
  }
  .zodiac-popup-title-zpt-mi {
    font-size: 1.3rem;
  }
}

/* Styles from previous block, integrated */
.celestial-icon-img-zpt-mi {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  vertical-align: middle;
}
.celestial-icon-placeholder-zpt-mi {
  font-size: 1.5rem;
  line-height: 2rem;
  display: inline-block;
  width: 2rem;
  text-align: center;
}
.preview-icon-zpt-mi {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  display: inline-block;
}
.zodiac-symbol-zpt-mi.preview-icon-zpt-mi {
  font-size: 2.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.5rem;
  height: 2.5rem;
}
.layout-grid-zpt-mi > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-spinner-small-zpt-mi {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin-zpt-mi 1s ease-in-out infinite;
  margin-right: 0.5em;
  vertical-align: middle;
}
@keyframes spin-zpt-mi {
  to {
    transform: rotate(360deg);
  }
}