/* The Prettyy Place - Custom Luxury Styling & HD Anti-Aliased Typography */

/* Universal High-Definition Sharp Font Rendering (Eliminates Windows ClearType pixelation) */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-optical-sizing: auto;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #261817;
  letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.015em;
}

/* Material Symbols icon sharpness */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Custom Variables */
:root {
  --color-primary: #8a4d4b;
  --color-primary-container: #d48b88;
  --color-secondary: #775a19;
  --color-secondary-container: #fed488;
  --color-surface: #fff8f7;
  --color-surface-dim: #edd4d2;
  --color-surface-low: #fff0ef;
  --color-surface-container: #ffe9e7;
  --color-surface-high: #fce2e0;
  --color-on-surface: #261817;
  --color-on-surface-variant: #524342;
  --color-outline: #857372;
  --color-outline-variant: #d7c2c0;
}

/* Glassmorphism Classes with GPU Pixel Snapping */
.glass-nav {
  background: rgba(255, 248, 247, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(215, 194, 192, 0.45);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.glass-bottom-bar {
  background: rgba(255, 248, 247, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(215, 194, 192, 0.35);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.glass-card {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246, 221, 219, 0.7);
  transform: translateZ(0);
}

.glass-pill {
  background: rgba(255, 248, 247, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Crisp rendering for images and vector icons */
img, svg {
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

/* PDP Thumbnail Gallery */
.pdp-thumb-btn {
  width: 60px !important;
  height: 76px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  flex-shrink: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  display: block;
}

@media (min-width: 640px) {
  .pdp-thumb-btn {
    width: 76px !important;
    height: 96px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    border-radius: 16px;
  }
}

/* Story Gradient Rings */
.story-ring-active {
  background: linear-gradient(135deg, #fed488 0%, #d48b88 50%, #8a4d4b 100%);
  animation: pulse-ring 3s infinite ease-in-out;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.1); }
}

/* Hide scrollbar for clean luxury horizontal swipers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth Image Zooms */
.img-zoom {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateZ(0);
}
.group:hover .img-zoom {
  transform: scale(1.04) translateZ(0);
}

/* Custom Drawer Animations */
.drawer-backdrop {
  transition: opacity 0.3s ease;
}
.drawer-panel {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

/* Gold Gradient Text */
.text-gold-gradient {
  background: linear-gradient(135deg, #a47e35 0%, #dfba73 50%, #c5a059 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Rose Gold Border Accent */
.border-rose-glow {
  border-color: #d48b88;
  box-shadow: 0 0 15px rgba(212, 139, 136, 0.2);
}

/* Video reel styling */
.reel-aspect {
  aspect-ratio: 9 / 16;
}

@media (min-width: 768px) {
  .reel-aspect {
    aspect-ratio: 9 / 15;
    max-height: 580px;
  }
}

/* Shimmer placeholder */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, #fff0ef 25%, #ffe9e7 50%, #fff0ef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Floating Toast Animation */
.toast-enter {
  animation: toastIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes toastIn {
  0% { transform: translate(-50%, -20px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Soft Tap Press */
.active-press:active {
  transform: scale(0.97);
}

/* Safe area insets for mobile */
.pb-safe {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
}
.pt-safe {
  padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);
}