/** Shopify CDN: Minification failed

Line 26:2 All "@import" rules must come first
Line 27:2 All "@import" rules must come first

**/
/* StyleMind Widget - Modern Design v2.0 */

/* ── Brand theme tokens (defaults; overridden at runtime by theme-vars.js) ── */
:root {
    --sm-button-bg:        #111827;
    --sm-button-text:      #ffffff;
    --sm-button-border:    #374151;
    --sm-button-radius:    12px;
    --sm-panel-bg:         #ffffff;
    --sm-panel-header-bg:  #111827;
    --sm-accent:           #6366f1;
    --sm-text-primary:     #111827;
    --sm-text-secondary:   #6b7280;
    --sm-cta-bg:           #111827;
    --sm-cta-text:         #ffffff;
    --sm-cta-hover-bg:     #374151;
  }
  
  /* Import Google Fonts */
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");
  
  /* Notification Animations */
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideOutToRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  
  /* Login Button Styles */
  .login-button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .login-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Try On Button - Matches Widget Theme (Premium Glassy Slate) */
  @keyframes stylemind-tryon-pop-in {
    0% {
      transform: scale(1.4);
      opacity: 0.6;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes stylemind-tryon-glare {
    0% {
      transform: translateX(-140%) skewX(-20deg);
      opacity: 0;
    }
    40% {
      opacity: 0.55;
    }
    100% {
      transform: translateX(140%) skewX(-20deg);
      opacity: 0;
    }
  }
  
  .stylemind-tryon-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 64px;
    height: 64px;
    min-width: 64px;
    padding: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #334155;
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    animation: stylemind-tryon-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards;
    overflow: hidden;
  }
  
  .stylemind-tryon-btn svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transform: translateY(2px);
  }
  
  .stylemind-tryon-btn::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 50%;
    height: 180%;
    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.9),
      transparent
    );
    opacity: 0;
    pointer-events: none;
    animation: stylemind-tryon-glare 2.8s ease-in-out infinite;
  }
  
  /* Shopify-specific try-on button - same theme, icon only */
  .badge--tryon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #334155 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    cursor: pointer !important;
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif !important;
    pointer-events: auto !important;
    user-select: none !important;
    text-decoration: none !important;
    animation: stylemind-tryon-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .badge--tryon svg {
    width: 32px !important;
    height: 32px !important;
    transform: translateY(2px);
  }
  
  .badge--tryon span {
    display: none !important;
  }
  
  .badge--tryon::after,
  .badge--top-right::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 50%;
    height: 180%;
    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.9),
      transparent
    );
    opacity: 0;
    pointer-events: none;
    animation: stylemind-tryon-glare 2.8s ease-in-out infinite;
  }
  
  /* Top-right positioning for try-on button */
  .card__badge.top.right {
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    border-radius: 50% !important;
  }
  
  /* Force circle on desktop – theme CSS can override at larger viewports */
  @media (min-width: 769px) {
    .card__badge.top.right,
    .card__badge .badge--tryon,
    .card__badge .badge--top-right,
    .badge--tryon,
    .badge--top-right,
    .stylemind-tryon-btn,
    .stylemind-tryon-btn-per-image {
      border-radius: 50% !important;
    }
  }
  
  .badge--top-right {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #334155 !important;
    border-radius: 999px !important;
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: stylemind-tryon-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .badge--tryon:hover {
    transform: translateY(0) scale(1) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: #1e293b !important;
  }
  
  .badge--tryon:active {
    transform: translateY(0) scale(1) !important;
  }
  
  .badge--tryon:focus {
    outline: none !important;
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.15),
      0 0 0 2px rgba(100, 116, 139, 0.35) !important;
  }
  
  /* Ensure product media containers can have positioned buttons */
  .product-media {
    position: relative !important;
  }
  
  .card__badge {
    position: absolute !important;
    z-index: 10000 !important;
  }
  
  .stylemind-tryon-btn:hover {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #1e293b;
  }
  
  .stylemind-tryon-btn:active {
    transform: translateY(0) scale(1);
  }
  
  .stylemind-tryon-btn:focus {
    outline: none;
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.15),
      0 0 0 2px rgba(100, 116, 139, 0.35);
  }
  
  /* Ensure product images can have positioned buttons */
  img[style*="position: relative"] {
    position: relative !important;
  }
  
  /* StyleMind Widget - Modern Design v2.0 */
  
  /* Main Widget Container */
  .stylemind-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }
  
  /* Floating Button - Slate Theme */
  .stylemind-floating-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      rgba(100, 116, 139, 0.9) 0%,
      rgba(71, 85, 105, 0.9) 100%
    );
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow:
      0 8px 24px rgba(71, 85, 105, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  
  .stylemind-floating-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent
    );
    transition: left 0.5s;
  }
  
  .stylemind-floating-btn:hover::before {
    left: 100%;
  }
  
  .stylemind-floating-btn:hover {
    background: linear-gradient(
      135deg,
      rgba(71, 85, 105, 0.95) 0%,
      rgba(51, 65, 85, 0.95) 100%
    );
    transform: translateY(-2px) scale(1.05);
    box-shadow:
      0 12px 32px rgba(51, 65, 85, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  
  /* Upload Popup - Premium Glassy Theme */
  #upload-popup {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 320px;
    max-height: 80vh;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #1e293b;
    padding: 0;
    border-radius: 28px;
    box-shadow:
      0 32px 64px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.5) inset,
      0 8px 32px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    overflow: hidden;
  }
  
  #upload-popup.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: popupEntrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  @keyframes popupEntrance {
    from {
      opacity: 0;
      transform: translateY(24px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* Header Section */
  .upload-header {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(248, 250, 252, 0.25) 100%
    );
    backdrop-filter: blur(20px);
    color: #1e293b;
    padding: 14px 18px 12px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
  }
  
  .upload-header::after {
    display: none;
  }
  
  .upload-header h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #0f172a;
  }
  
  .upload-header p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
  }
  
  /* Content Area */
  .upload-content {
    padding: 14px 16px;
    max-height: calc(80vh - 120px);
    background: rgba(255, 255, 255, 0.08);
  }
  
  /* Upload Options - Cards */
  .upload-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  
  .upload-option {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid #94a3b8;
    border-radius: 20px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: cardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    box-shadow:
      0 2px 12px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  
  .upload-option:nth-child(1) {
    animation-delay: 0.05s;
  }
  .upload-option:nth-child(2) {
    animation-delay: 0.1s;
  }
  .upload-option:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  @keyframes cardSlideIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .upload-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .upload-option:hover::before {
    left: 100%;
  }
  
  .upload-option:hover {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.55);
    transform: translateY(-3px);
    box-shadow:
      0 12px 28px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  
  .upload-option .option-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(248, 250, 252, 0.7) 100%
    );
    border: 2px solid #94a3b8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: #475569;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .upload-option:hover .option-icon {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
    border-color: #64748b;
    transform: scale(1.05);
  }
  
  .upload-option h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #0f172a;
  }
  
  .upload-option p {
    font-size: 11px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
  }
  
  /* Avatar Circle - visible grey border */
  .stylemind-avatar-circle {
    width: 160px;
    height: 160px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: relative;
    overflow: hidden;
    border: 2px solid #94a3b8;
    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .stylemind-avatar-circle:hover {
    border-color: #64748b;
    transform: scale(1.02);
    box-shadow:
      0 12px 32px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  
  .stylemind-avatar-circle img {
    width: 65%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  
  /* Selfie upload wrapper - add space below header */
  .stylemind-upload {
    margin-top: 16px;
  }
  
  /* Full Body Upload */
  .fullbody-upload {
    margin: 16px 0 24px;
  }
  
  /* Quick Try-On Modal Close Button - Slate theme */
  .quick-tryon-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  
  .quick-tryon-close-btn:hover {
    background: rgba(248, 113, 113, 0.25);
    border-color: rgba(248, 113, 113, 0.5);
    color: #dc2626;
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.2);
  }
  
  /* Enhanced Upload Interface */
  .fullbody-preview-container {
    width: 100%;
    height: 200px;
    border: 2px solid #94a3b8;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  .fullbody-preview-container:hover {
    border-color: #64748b;
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  
  .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }
  
  .upload-icon-large {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
  }
  
  .upload-text h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .upload-text p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
  }
  
  .upload-button {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.25);
    transition: all 0.3s ease;
  }
  
  .upload-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(51, 65, 85, 0.3);
  }
  
  .fullbody-preview-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .fullbody-upload-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 4px 16px rgba(71, 85, 105, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .fullbody-upload-icon:hover {
    transform: scale(1.08);
    box-shadow:
      0 6px 20px rgba(71, 85, 105, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  
  .fullbody-upload-icon svg {
    width: 20px;
    height: 20px;
    color: white;
    stroke: white;
  }
  
  /* Full body placeholder - dark text/icon on light background */
  .fullbody-preview-container .upload-placeholder svg:first-child {
    color: #64748b !important;
    opacity: 0.8 !important;
  }
  
  /* Upload Icon - Floating Action Button (slate theme, visible border) */
  .stylemind-upload-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 4px 16px rgba(71, 85, 105, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  
  .stylemind-upload-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
      0 8px 24px rgba(71, 85, 105, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  
  .stylemind-upload-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
  }
  
  /* Size Selection - Modern Pills */
  .size-selection {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  
  .size-btn {
    padding: 12px 20px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 100%
    );
    color: #667eea;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    min-width: 50px;
    text-align: center;
  }
  
  .size-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .size-btn:hover::before {
    left: 100%;
  }
  
  .size-btn:hover {
    border-color: #667eea;
    color: #5a67d8;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
    background: linear-gradient(
      135deg,
      rgba(102, 126, 234, 0.1) 0%,
      rgba(118, 75, 162, 0.05) 100%
    );
  }
  
  .size-btn.selected {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: #f9fafb;
    border-color: #111827;
    box-shadow:
      0 8px 24px rgba(102, 126, 234, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transform: scale(1.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  /* Action Buttons - Fixed Layout */
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    padding: 0 20px 20px 20px;
    width: 100%;
  }
  
  /* Tighter spacing for avatar setup to avoid scroll */
  .screen-2 .action-buttons {
    margin-top: 10px;
    padding: 0 16px 12px 16px;
    gap: 10px;
  }
  
  .screen-2 .action-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  /* Last avatar step: place buttons side by side to avoid scroll */
  .screen-2 .avatar-step[data-step="5"] .action-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
  }
  
  .screen-2 .avatar-step[data-step="5"] .action-btn {
    flex: 1;
  }
  
  .action-btn {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    text-align: center;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  
  .action-btn.primary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
    border: 2px solid #475569;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.25);
  }
  
  .action-btn.primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3);
  }
  
  .action-btn.secondary {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #94a3b8;
    color: #475569;
  }
  
  .action-btn.secondary:hover {
    background: #f8fafc;
    border-color: #64748b;
    color: #334155;
    transform: translateY(-2px);
  }
  
  /* Screen-specific button adjustments */
  .screen-3 .action-buttons {
    margin-top: 16px;
  }
  
  .screen-4 .action-buttons {
    margin-top: 16px;
  }
  
  .screen-5 .action-buttons {
    margin-top: 16px;
  }
  
  /* Avatar Scroll - Modern Cards */
  .avatar-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 16px 0;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: #667eea #f1f5f9;
    /* max-height: 120px; */
  }
  
  .avatar-scroll::-webkit-scrollbar {
    height: 6px;
  }
  
  .avatar-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
  }
  
  .avatar-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4b5563 0%, #9ca3af 100%);
    border-radius: 3px;
  }
  
  .avatar-scroll img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid transparent;
    cursor: pointer;
    object-fit: cover;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
  }
  
  .avatar-scroll img:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  .avatar-scroll img.selected {
    border: 3px solid #667eea;
    transform: scale(1.08);
    box-shadow:
      0 20px 25px -5px rgba(102, 126, 234, 0.3),
      0 10px 10px -5px rgba(102, 126, 234, 0.2);
  }
  
  /* Result Container */
  .result-container {
    margin-bottom: 24px;
  }
  
  .result-image-container {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .result-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Screen Management */
  .screen {
    display: none;
  }
  
  .screen.active {
    display: block;
  }
  
  /* Upload Preview */
  .upload-preview {
    width: 100%;
    max-width: 300px;
    max-height: 200px;
    object-fit: cover;
    border-radius: 16px;
    margin: 16px auto;
    display: block;
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .stylemind-widget {
      bottom: 20px;
      right: 20px;
    }
  
    #upload-popup {
      width: calc(100vw - 40px);
      right: 20px;
      left: 20px;
      bottom: 80px;
      max-height: 75vh;
    }
  
    .stylemind-avatar-circle {
      width: 150px;
      height: 150px;
    }
  
    .avatar-scroll img {
      width: 45px;
      height: 45px;
    }
  
    .upload-header h3 {
      font-size: 14px;
    }
  
    .upload-content {
      padding: 12px;
    }
  
    .upload-option {
      padding: 10px 12px;
    }
  
    .upload-option .option-icon {
      width: 24px;
      height: 24px;
    }
  
    .upload-option h4 {
      font-size: 11px;
    }
  }
  
  @media (max-width: 480px) {
    .stylemind-avatar-circle {
      width: 130px;
      height: 130px;
    }
  
    .avatar-scroll img {
      width: 45px;
      height: 45px;
    }
  
    .size-selection {
      gap: 6px;
    }
  
    .size-btn {
      padding: 8px 12px;
      font-size: 13px;
      min-width: 40px;
    }
  
    .upload-option .option-icon {
      width: 48px;
      height: 48px;
    }
  
    .upload-option h4 {
      font-size: 15px;
    }
  
    .upload-option p {
      font-size: 13px;
    }
  }
  
  /* Animation Keyframes */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  /* Loading States */
  .loading {
    animation: pulse 2s infinite;
  }
  
  /* Success States */
  .success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  }
  
  /* Error States */
  .error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  }
  
  /* Progress Bar Component - New Addition */
  .progress-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 24px;
  }
  
  .progress-bar-content {
    text-align: center;
    padding: 20px;
    max-width: 300px;
  }
  
  .progress-bar-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
  }
  
  .progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
  }
  
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    animation: shimmer 1.5s infinite;
  }
  
  @keyframes shimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }
  
  .progress-bar-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
  
  .progress-bar-percentage {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
    margin-left: 5px;
  }
  
  /* Hide progress bar when not active */
  .progress-bar-container.hidden {
    display: none;
  }
  
  /* Widget Progress Bar - New Addition */
  .widget-progress-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 24px;
  }

  .widget-progress-bar-container.widget-progress-bar-container--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    z-index: 999999;
  }
  
  .widget-progress-bar-content {
    text-align: center;
    padding: 20px;
    max-width: 300px;
  }
  
  .widget-progress-bar-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
  }
  
  .widget-progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
  }
  
  .widget-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #111827 0%, #4b5563 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .widget-progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    animation: shimmer 1.5s infinite;
  }
  
  .widget-progress-bar-text {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
  }
  
  .widget-progress-bar-percentage {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-left: 5px;
  }
  
  /* Existing countdown modal styles - keeping for reference but will be replaced */
  #countdown-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
  }
  
  #countdown-timer {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
  }
  
  /* ---------- Avatar Scroll Container ---------- */
  #avatar-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    max-width: 100%;
  }
  
  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
    height: 209px;
  }
  
  .avatar-card {
    position: relative;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
      0 2px 8px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  
  .avatar-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 8px 20px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  
  .avatar-card .avatar-img {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
  }
  
  .save-avatar-btn {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
  }
  
  .save-avatar-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }
  
  .save-avatar-btn:disabled {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    cursor: not-allowed;
  }
  
  .avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
  }
  
  .avatar-img:hover {
    transform: scale(1.05);
    border-color: #667eea;
  }
  
  .avatar-img.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
  }
  
  /* ---------- Avatar Preview Overlay ---------- */
  #avatar-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 12px;
    backdrop-filter: blur(5px);
  }
  
  #avatar-preview-overlay > div {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  #avatar-preview-overlay img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  
  #avatar-preview-overlay button {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px;
  }
  
  #avatar-preview-overlay button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }
  
  #avatar-preview-overlay button:last-child {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  
  /* ---------- AI Preview Container ---------- */
  #ai-preview-container {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .upload-preview {
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
    margin: 10px 0;
    border-radius: 12px;
    border: 2px solid #ddd;
  }
  
  /* =================================================================== */
  /* ### NEW: Outfit Bucket Styles ### */
  /* =================================================================== */
  
  .outfit-bucket-container {
    padding: 14px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(24px);
    border-radius: 20px;
    margin-top: 16px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  
  .bucket-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  
  .bucket-item {
    position: relative;
    width: 72px;
    height: 72px;
    border: 2px solid #94a3b8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow:
      0 2px 12px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  .bucket-item.has-item {
    border-color: #64748b;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
      0 4px 16px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  
  .bucket-item:hover {
    border-color: #475569;
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  
  .bucket-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  
  .bucket-icon {
    font-size: 32px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
  }
  
  .bucket-icon svg {
    width: 32px;
    height: 32px;
    color: currentColor;
  }
  
  .bucket-text {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .bucket-hint {
    font-size: 10px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
  }
  
  .bucket-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
  
  .remove-bucket-item {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
  
  .remove-bucket-item:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  }
  
  .bucket-connector {
    font-size: 24px;
    font-weight: bold;
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid #94a3b8;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 2px 12px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  .bucket-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  .bucket-actions .action-btn {
    width: 100%;
    max-width: 280px;
  }
  
  .bucket-actions .action-btn.primary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    border: 2px solid #475569;
    box-shadow: 0 4px 16px rgba(71, 85, 105, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .bucket-actions .action-btn.primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(71, 85, 105, 0.4);
  }
  
  .bucket-actions .action-btn.primary.ready {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 2px solid #059669;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    animation: pulse 2s infinite;
  }
  
  .bucket-actions .action-btn.primary.ready:hover {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  }
  
  .bucket-actions .action-btn.primary:disabled {
    background: rgba(148, 163, 184, 0.4);
    color: #94a3b8;
    border: 2px solid #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  
  .bucket-actions .action-btn.secondary {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #94a3b8;
    color: #475569;
  }
  
  .bucket-actions .action-btn.secondary:hover {
    background: rgba(248, 250, 252, 0.95);
    border-color: #64748b;
    color: #1e293b;
    transform: translateY(-2px);
  }
  
  /* Responsive design for bucket */
  @media (max-width: 480px) {
    .bucket-items {
      gap: 10px;
    }
  
    .bucket-item {
      width: 70px;
      height: 70px;
    }
  
    .bucket-connector {
      width: 28px;
      height: 28px;
      font-size: 18px;
    }
  
    .bucket-icon {
      font-size: 24px;
    }
  
    .bucket-text {
      font-size: 10px;
    }
  }
  
  /* =================================================================== */
  /* ### END: Outfit Bucket Styles ### */
  /* =================================================================== */
  
  /* =================================================================== */
  /* ### NEW: Quick Add to Outfit Button Styles ### */
  /* =================================================================== */
  
  .quick-add-outfit-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    opacity: 0;
    transform: scale(0.9);
  }
  
  .quick-add-outfit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  }
  
  .quick-add-outfit-btn:active {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  /* Show button on image hover */
  .product-media:hover .quick-add-outfit-btn,
  .product__media:hover .quick-add-outfit-btn,
  .product-image:hover .quick-add-outfit-btn {
    opacity: 1;
    transform: scale(1);
  }
  
  /* Mobile responsive */
  @media (max-width: 768px) {
    .quick-add-outfit-btn {
      font-size: 10px;
      padding: 4px 8px;
      top: 8px;
      left: 8px;
    }
  }
  
  /* =================================================================== */
  /* ### END: Quick Add to Outfit Button Styles ### */
  /* =================================================================== */
  
  /* =================================================================== */
  /* ### NEW: Outfit Builder Overlay Styles ### */
  /* =================================================================== */
  
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  #outfit-builder-overlay {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    background: linear-gradient(
      135deg,
      rgba(100, 116, 139, 0.9) 0%,
      rgba(71, 85, 105, 0.9) 100%
    );
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 20px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    font-weight: 600;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideInFromRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #outfit-builder-overlay:hover {
    background: linear-gradient(
      135deg,
      rgba(71, 85, 105, 0.95) 0%,
      rgba(51, 65, 85, 0.95) 100%
    );
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      0 8px 24px rgba(51, 65, 85, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  #close-outfit-overlay {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  #close-outfit-overlay:hover {
    transform: scale(1.1);
    color: rgba(255, 255, 255, 0.8);
  }
  
  /* Mobile responsive */
  @media (max-width: 768px) {
    #outfit-builder-overlay {
      top: 10px;
      right: 10px;
      left: 10px;
      font-size: 13px;
      padding: 12px 16px;
    }
  }
  
  /* =================================================================== */
  /* ### NEW: 3D View Button and GIF Overlay Styles ### */
  /* =================================================================== */
  
  /* 3D View Button - Floating on Result Image */
  .stylemind-3d-view-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .stylemind-3d-view-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  }
  
  .stylemind-3d-view-btn:active {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  .stylemind-3d-view-btn:focus {
    outline: none;
    box-shadow:
      0 4px 12px rgba(102, 126, 234, 0.3),
      0 0 0 2px rgba(102, 126, 234, 0.3);
  }
  
  /* 3D View Icon */
  .stylemind-3d-view-btn::before {
    content: "🎥";
    font-size: 14px;
  }
  
  /* 3D View Widget Container */
  #gif-widget-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px;
    margin: 14px 0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  #gif-widget-container.show {
    display: flex;
  }
  
  /* Full Screen 3D View Modal */
  .gif-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #111827 0%, #4b5563 50%, #9ca3af 100%);
    z-index: 999999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    pointer-events: auto;
  }
  
  .gif-fullscreen-modal.show {
    display: flex;
  }
  
  .gif-fullscreen-container {
    position: relative;
    width: 90vw;
    height: 80vh;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    z-index: 1000000;
  }
  
  .gif-fullscreen-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .gif-fullscreen-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
  
  .gif-fullscreen-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 12px 25px rgba(239, 68, 68, 0.5);
  }
  
  /* Progress Bar for Full Screen */
  .gif-fullscreen-progress-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin: 20px 0;
  }
  
  .gif-fullscreen-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .gif-fullscreen-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
  }
  
  .gif-fullscreen-progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent
    );
    animation: shimmer 1.5s infinite;
  }
  
  .gif-fullscreen-progress-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 500;
  }
  
  .gif-fullscreen-progress-percentage {
    font-size: 18px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .gif-fullscreen-cancel-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }
  
  .gif-fullscreen-cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  }
  
  /* GIF Display for Full Screen */
  .gif-fullscreen-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
  }
  
  .gif-fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    animation: slowPlay 60s linear infinite;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .gif-fullscreen-image.paused {
    animation-play-state: paused;
  }
  
  .gif-fullscreen-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 15px 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .gif-fullscreen-speed-btn {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gif-fullscreen-speed-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  .gif-fullscreen-instruction {
    color: white;
    font-size: 14px;
    opacity: 0.8;
    margin-left: 10px;
  }
  
  /* 3D View Modal Overlay (like try-on process) */
  .gif-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
  }
  
  .gif-modal-overlay.show {
    display: flex;
  }
  
  .gif-modal-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
  }
  
  .gif-modal-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .gif-modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
  
  .gif-modal-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 12px 25px rgba(239, 68, 68, 0.5);
  }
  
  /* Progress Bar for Modal */
  .gif-modal-progress-container {
    width: 100%;
    text-align: center;
    margin: 20px 0;
  }
  
  .gif-modal-progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .gif-modal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    border-radius: 5px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
  }
  
  .gif-modal-progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent
    );
    animation: shimmer 1.5s infinite;
  }
  
  .gif-modal-progress-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 500;
  }
  
  .gif-modal-progress-percentage {
    font-size: 16px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .gif-modal-cancel-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }
  
  .gif-modal-cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  }
  
  /* GIF Display for Modal */
  .gif-modal-image-container {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
  }
  
  .gif-modal-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    animation: slowPlay 60s linear infinite;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .gif-modal-image.paused {
    animation-play-state: paused;
  }
  
  .gif-modal-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
  }
  
  .gif-modal-speed-btn {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gif-modal-speed-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  .gif-modal-instruction {
    color: white;
    font-size: 12px;
    opacity: 0.8;
    margin-left: 10px;
  }
  
  /* GIF Widget Container - Keep for compatibility */
  .gif-widget-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  /* GIF Widget Image Container */
  .gif-widget-image-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gif-widget-image-container.zoomed {
    cursor: zoom-out;
  }
  
  /* GIF Widget Image */
  .gif-widget-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: slowPlay 60s linear infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation-play-state: running;
    cursor: pointer;
  }
  
  /* GIF Popup Modal */
  .gif-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
  }
  
  .gif-popup-modal.show {
    display: flex;
  }
  
  .gif-popup-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(25px);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  }
  
  .gif-popup-image-wrapper {
    position: relative;
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
  }
  
  .gif-popup-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    animation: slowPlay 60s linear infinite;
    cursor: grab;
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
  }
  
  .gif-popup-image:active {
    cursor: grabbing;
  }
  
  .gif-popup-image.rotating {
    transform-style: preserve-3d;
  }
  
  .gif-popup-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
  
  .gif-popup-close:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  }
  
  .gif-popup-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
  
  .gif-popup-speed-btn {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gif-popup-speed-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  .gif-widget-image-container.zoomed .gif-widget-image {
    transform: scale(2);
    cursor: zoom-out;
  }
  
  /* Zoom Controls */
  .gif-zoom-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
  }
  
  .gif-zoom-btn {
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .gif-zoom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
  
  .gif-zoom-btn:active {
    transform: translateY(0);
  }
  
  /* GIF Widget Title */
  .gif-widget-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }
  
  /* GIF Widget Loading State */
  .gif-widget-loading {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }
  
  /* Progress Bar Container */
  .gif-progress-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    text-align: center;
    z-index: 1001;
  }
  
  .gif-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
  }
  
  .gif-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .gif-progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    animation: shimmer 1.5s infinite;
  }
  
  .gif-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
  }
  
  .gif-progress-percentage {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
  }
  
  /* Cancel Button */
  .gif-cancel-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 10px;
  }
  
  .gif-cancel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }
  
  .gif-cancel-btn:active {
    transform: translateY(0);
  }
  
  /* GIF Widget Error State */
  .gif-widget-error {
    color: #ef4444;
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }
  
  /* Close 3D View Button */
  .gif-widget-close-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .gif-widget-close-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }
  
  .gif-widget-close-btn:active {
    transform: translateY(0);
  }
  
  /* Slow play animation for GIF */
  @keyframes slowPlay {
    0% {
      animation-play-state: running;
      animation-duration: 20s;
    }
    50% {
      animation-play-state: running;
      animation-duration: 20s;
    }
    100% {
      animation-play-state: running;
      animation-duration: 20s;
    }
  }
  
  /* Mobile Responsive */
  @media (max-width: 768px) {
    .stylemind-3d-view-btn {
      font-size: 11px;
      padding: 6px 10px;
      top: 8px;
      right: 8px;
    }
  
    #gif-widget-container {
      padding: 15px;
      margin: 15px 0;
    }
  
    .gif-widget-image-container.zoomed .gif-widget-image {
      transform: scale(1.5);
    }
  
    .gif-widget-title {
      font-size: 14px;
    }
  
    .gif-zoom-btn {
      font-size: 11px;
      padding: 5px 10px;
    }
  
    .gif-widget-close-btn {
      font-size: 11px;
      padding: 6px 12px;
    }
  }
  
  /* =================================================================== */
  /* ### NEW: Gender Selection and Body Parameters Styles ### */
  /* =================================================================== */
  
  /* Gender Selection */
  .gender-selection {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    padding: 0 20px;
  }
  
  .gender-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 30px;
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-width: 140px;
  }
  
  .gender-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gender-option:hover::before {
    left: 100%;
  }
  
  .gender-option:hover {
    border-color: rgba(102, 126, 234, 0.5);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(102, 126, 234, 0.3);
  }
  
  .gender-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  
  .gender-option:hover .gender-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
  }
  
  .gender-option h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Body Parameters - Compact Light Glassy */
  .body-parameters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
    padding: 0 10px;
  }
  
  .parameter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .parameter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
  }
  
  .parameter-select {
    padding: 10px 14px;
    border: 2px solid #94a3b8;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
  }
  
  .parameter-select:hover {
    border-color: #64748b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }
  
  .parameter-select:focus {
    border-color: #475569;
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.25);
  }
  
  .parameter-select option {
    background: #f8fafc;
    color: #1e293b;
    padding: 6px;
  }
  
  /* Avatar Generation - Multi-step flow (screen 2) */
  .avatar-steps-header {
    margin: 6px 0 10px;
    padding: 0 10px;
  }
  
  .avatar-stepper {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  
  .avatar-stepper::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e5e7eb 0%, #9ca3af 100%);
    opacity: 0.9;
  }
  
  .avatar-step-indicator {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transform: translateY(0);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }
  
  .avatar-step-circle {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #d1d5db;
    background: #f9fafb;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
  }
  
  .avatar-step-label {
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  .avatar-step-indicator.active,
  .avatar-step-indicator.complete {
    opacity: 1;
  }
  
  .avatar-step-indicator.active {
    transform: translateY(-1px);
  }
  
  .avatar-step-indicator.active .avatar-step-circle {
    border-color: #111827;
    background: radial-gradient(circle at 30% 30%, #9ca3af, #111827);
  }
  
  .avatar-step-indicator.complete .avatar-step-circle {
    border-color: #4b5563;
    background: radial-gradient(circle at 30% 30%, #e5e7eb, #4b5563);
  }
  
  .avatar-steps-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .avatar-step {
    display: none;
  }
  
  .avatar-step.active {
    display: block;
  }
  
  .avatar-step-question h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .avatar-step-question p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #64748b;
  }
  
  .avatar-step-actions {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  
  /* Avatar theme: Next / Generate buttons on the right */
  .avatar-theme .avatar-step-actions,
  .avatar-theme .avatar-step-actions-row {
    justify-content: flex-end;
    gap: 10px;
  }
  
  .avatar-theme .avatar-step-actions .action-btn,
  .avatar-theme .avatar-step-actions-row .action-btn {
    width: auto;
    min-width: 140px;
  }
  
  .avatar-question-card {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(18px);
    box-shadow:
      0 10px 30px rgba(15, 23, 42, 0.12),
      0 0 0 1px rgba(148, 163, 184, 0.18);
  }
  
  .avatar-question-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
  }
  
  .avatar-question-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .avatar-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #cbd5f5;
    background: rgba(248, 250, 252, 0.9);
    cursor: pointer;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      background 0.15s ease;
  }
  
  .avatar-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    border: 2px solid #94a3b8;
    background: #ffffff;
    position: relative;
  }
  
  .avatar-radio input[type="radio"]:checked {
    border-color: #6366f1;
    background: radial-gradient(circle at 30% 30%, #a5b4fc, #4f46e5);
  }
  
  .avatar-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: #eef2ff;
  }
  
  .avatar-radio span {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
  }
  
  .avatar-radio:hover {
    border-color: #64748b;
    box-shadow: 0 3px 10px rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 1);
  }
  
  /* Avatar theme - Digital Selection (monochrome) */
  .avatar-theme {
    font-family:
      "Outfit",
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
  }
  
  .avatar-theme .avatar-theme-header {
    text-align: center;
    padding: 12px 18px 14px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
  }
  
  .avatar-theme .avatar-theme-step-text {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #374151;
    margin-bottom: 2px;
  }
  
  .avatar-theme .avatar-theme-brand {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #374151;
    margin-bottom: 6px;
  }
  
  .avatar-theme .avatar-theme-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
    margin: 0;
  }
  
  /* Gender step: circular options row */
  .avatar-theme-options-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
  }
  
  .avatar-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
  }
  
  .avatar-theme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .avatar-theme-option-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
  }
  
  .avatar-theme-option-icon {
    width: 32px;
    height: 32px;
    color: #374151;
    transition: color 0.2s ease;
  }
  
  .avatar-theme-option-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #374151;
    transition: color 0.2s ease;
  }
  
  .avatar-theme-option-hint {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #6b7280;
    margin-top: 2px;
    transition: color 0.2s ease;
  }
  
  .avatar-theme-option:has(input:checked) .avatar-theme-option-hint {
    color: #374151;
  }
  
  .avatar-theme-option input[type="radio"]:checked + .avatar-theme-option-circle {
    border: 2px solid #111827;
    background: #fff;
    box-shadow: 0 0 0 1px #111827;
  }
  
  .avatar-theme-option input[type="radio"]:checked ~ .avatar-theme-option-label,
  .avatar-theme-option
    input[type="radio"]:checked
    + .avatar-theme-option-circle
    .avatar-theme-option-icon {
    color: #111827;
  }
  
  .avatar-theme-option
    input[type="radio"]:checked
    + .avatar-theme-option-circle
    .avatar-theme-option-icon {
    color: #111827;
  }
  
  .avatar-theme-option:has(input:checked) .avatar-theme-option-icon {
    color: #111827;
  }
  
  .avatar-theme-option:has(input:checked) .avatar-theme-option-label {
    color: #111827;
  }
  
  .avatar-theme-description {
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: #374151;
    margin: 0 0 16px;
    text-align: center;
    line-height: 1.4;
  }
  
  /* Avatar theme buttons */
  .avatar-theme .avatar-theme-btn.primary,
  .avatar-theme .action-btn.primary.avatar-theme-btn {
    background: #111827;
    color: #fff;
    border: 2px solid #111827;
    box-shadow: none;
  }
  
  .avatar-theme .avatar-theme-btn.primary:hover,
  .avatar-theme .action-btn.primary.avatar-theme-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.25);
  }
  
  .avatar-theme .avatar-theme-btn-outline.secondary,
  .avatar-theme .action-btn.secondary.avatar-theme-btn-outline {
    background: #fff;
    color: #111827;
    border: 1px solid #111827;
  }
  
  .avatar-theme .avatar-theme-btn-outline.secondary:hover,
  .avatar-theme .action-btn.secondary.avatar-theme-btn-outline:hover {
    background: #f9fafb;
    border-color: #374151;
    color: #1f2937;
  }
  
  .avatar-theme-footer {
    text-align: center;
    padding: 14px 18px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 8px;
  }
  
  .avatar-theme-return {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease;
  }
  
  .avatar-theme-return:hover {
    color: #111827;
  }
  
  /* Stepper in avatar theme - monochrome */
  .avatar-theme .avatar-step-indicator.active .avatar-step-circle {
    border-color: #111827;
    background: #fff;
    box-shadow: inset 0 0 0 2px #111827;
  }
  
  .avatar-theme .avatar-step-indicator.complete .avatar-step-circle {
    border-color: #6b7280;
    background: #f3f4f6;
  }
  
  .avatar-theme .avatar-step-label {
    color: #374151;
  }
  
  .avatar-theme .avatar-step-indicator.active .avatar-step-label {
    color: #111827;
  }
  
  /* Avatar theme: monochrome radio cards for Height, Weight, Body steps */
  .avatar-theme .avatar-question-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  }
  
  .avatar-theme .avatar-question-title {
    color: #374151;
  }
  
  .avatar-theme .avatar-radio input[type="radio"]:checked {
    border-color: #111827;
    background: #111827;
  }
  
  .avatar-theme .avatar-radio input[type="radio"]:checked::after {
    background: #fff;
  }
  
  .avatar-theme .avatar-radio {
    border-color: rgba(0, 0, 0, 0.1);
    background: #fff;
  }
  
  .avatar-theme .avatar-radio:hover {
    border-color: #6b7280;
    background: #f9fafb;
  }
  
  .avatar-theme .avatar-step-question h4 {
    color: #111827;
  }
  
  .avatar-theme .avatar-step-question p {
    color: #374151;
  }
  
  /* =================================================================== */
  /* ### Unified theme – all screens (same as avatar Digital Selection) ### */
  /* =================================================================== */
  
  .stylemind-unified-theme {
    font-family:
      "Outfit",
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
  }
  
  /* Screen 1: Upload option cards – monochrome */
  .stylemind-unified-theme .upload-option {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    color: #111827;
  }
  
  .stylemind-unified-theme .upload-option:hover {
    border-color: #111827;
    background: #fafafa;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  }
  
  .stylemind-unified-theme .upload-option .option-icon {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #374151;
  }
  
  .stylemind-unified-theme .upload-option:hover .option-icon {
    border-color: #111827;
    color: #111827;
    background: #fff;
  }
  
  .stylemind-unified-theme .upload-option h4 {
    color: #111827;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  
  .stylemind-unified-theme .upload-option p {
    color: #374151;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  
  /* Theme header (STYLEMIND + title) – all screens */
  .stylemind-unified-theme .theme-header {
    text-align: center;
    padding: 12px 18px 14px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  
  .stylemind-unified-theme .theme-header-brand {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: #374151;
    margin-bottom: 4px;
  }
  
  .stylemind-unified-theme .theme-header-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
    margin: 0 0 2px 0;
  }
  
  .stylemind-unified-theme .theme-header-desc {
    font-size: 11px;
    font-weight: 400;
    color: #374151;
    margin: 0;
  }
  
  /* Theme action buttons – right-aligned, monochrome */
  .stylemind-unified-theme .theme-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding: 0 16px 12px;
  }
  
  .stylemind-unified-theme .theme-actions .action-btn {
    width: auto;
    min-width: 120px;
  }
  
  .stylemind-unified-theme .theme-btn.primary,
  .stylemind-unified-theme .action-btn.primary.theme-btn {
    background: #111827;
    color: #fff;
    border: 2px solid #111827;
    box-shadow: none;
  }
  
  .stylemind-unified-theme .theme-btn.primary:hover,
  .stylemind-unified-theme .action-btn.primary.theme-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.25);
  }
  
  .stylemind-unified-theme .theme-btn-outline.secondary,
  .stylemind-unified-theme .action-btn.secondary.theme-btn-outline {
    background: #fff;
    color: #111827;
    border: 1px solid #111827;
  }
  
  .stylemind-unified-theme .theme-btn-outline.secondary:hover,
  .stylemind-unified-theme .action-btn.secondary.theme-btn-outline:hover {
    background: #f9fafb;
    border-color: #374151;
    color: #1f2937;
  }
  
  /* Theme footer – RETURN TO ATELIER */
  .stylemind-unified-theme .theme-footer {
    text-align: center;
    padding: 12px 18px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .stylemind-unified-theme .theme-return {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease;
  }
  
  .stylemind-unified-theme .theme-return:hover {
    color: #111827;
  }
  
  /* Full body upload area – monochrome */
  .stylemind-unified-theme .fullbody-preview-container {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
  }
  
  .stylemind-unified-theme .fullbody-preview-container:hover {
    border-color: #111827;
    background: #fafafa;
  }
  
  .stylemind-unified-theme
    .fullbody-preview-container
    .upload-placeholder
    svg:first-child,
  .stylemind-unified-theme .fullbody-preview-container .upload-placeholder div {
    color: #374151 !important;
  }
  
  .stylemind-unified-theme .fullbody-upload-icon {
    background: #111827;
    color: #fff;
    border: none;
  }
  
  /* Screen 4: Avatar circle container */
  .stylemind-unified-theme .screen-4 .stylemind-avatar-circle {
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
  
  /* Outfit builder bucket – monochrome cards */
  .stylemind-unified-theme .bucket-item,
  .stylemind-unified-theme .bucket-placeholder {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #111827;
  }
  
  .stylemind-unified-theme .bucket-item:hover .bucket-placeholder,
  .stylemind-unified-theme .bucket-placeholder:hover {
    border-color: #111827;
    background: #fafafa;
  }
  
  .stylemind-unified-theme .bucket-icon,
  .stylemind-unified-theme .bucket-icon svg {
    color: #374151;
  }
  
  .stylemind-unified-theme .bucket-item:hover .bucket-icon,
  .stylemind-unified-theme .bucket-placeholder:hover .bucket-icon {
    color: #111827;
  }
  
  .stylemind-unified-theme .bucket-connector {
    color: #374151;
    font-weight: 300;
  }
  
  .stylemind-unified-theme
    .bucket-actions.theme-actions
    .action-btn.primary.ready {
    background: #111827;
    border-color: #111827;
  }
  
  /* Top branding in popup – match theme */
  .stylemind-unified-theme .stylemind-header .brand-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #111827;
  }
  
  .stylemind-unified-theme .stylemind-header .brand-tagline {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #374151;
  }
  
  /* Result screen (screen 5) result container */
  .stylemind-unified-theme .screen-5 .result-container {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }
  
  /* Mobile responsive for gender selection */
  @media (max-width: 768px) {
    .gender-selection {
      flex-direction: column;
      gap: 20px;
      padding: 0 15px;
    }
  
    .gender-option {
      padding: 20px;
      min-width: auto;
    }
  
    .gender-icon {
      width: 60px;
      height: 60px;
    }
  
    .gender-option h4 {
      font-size: 16px;
    }
  
    .body-parameters {
      padding: 0 15px;
    }
  
    .parameter-select {
      padding: 10px 14px;
      font-size: 13px;
    }
  
    .avatar-steps-header {
      padding: 0 4px;
    }
  
    .avatar-step-label {
      font-size: 10px;
    }
  
    .avatar-step-question p {
      font-size: 11px;
    }
  
    .avatar-question-card {
      padding: 10px 12px;
    }
  
    .avatar-theme-options-row {
      gap: 16px;
    }
  
    .avatar-theme-option-circle {
      width: 64px;
      height: 64px;
    }
  
    .avatar-theme-option-icon {
      width: 28px;
      height: 28px;
    }
  }
  
  /* =================================================================== */
  /* ### Theme modals: bucket item, previous outfits, full-size outfit ### */
  /* =================================================================== */
  
  .theme-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    animation: fadeIn 0.3s ease;
    font-family:
      "Outfit",
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
  }
  
  #bucket-item-fullsize-modal {
    z-index: 10002;
  }
  
  #fullsize-outfit-modal {
    z-index: 10002;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .theme-modal-container {
    position: relative;
    max-width: 90%;
    max-height: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow-y: auto;
    padding: 20px;
  }
  
  .theme-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #111827;
    border: 1px solid #111827;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
  }
  
  .theme-modal-close:hover {
    background: #111827;
    color: #fff;
  }
  
  .theme-modal-close-inset {
    top: 12px;
    right: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #111827;
  }
  
  .theme-modal-close-inset:hover {
    border-color: #111827;
    background: #f9fafb;
  }
  
  .theme-modal-image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .theme-modal-image {
    max-width: 100%;
    max-height: 55vh;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #fff;
    object-fit: contain;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  
  #fullsize-outfit-modal .theme-modal-image {
    max-height: 60vh;
  }
  
  .theme-modal-item-title {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 20px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.04em;
  }
  
  .theme-modal-product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111827;
    color: #fff;
    border: 2px solid #111827;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 280px;
    font-family: inherit;
  }
  
  .theme-modal-product-btn:hover {
    background: #1f2937;
    border-color: #1f2937;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.3);
  }
  
  .theme-modal-product-icon {
    flex-shrink: 0;
    color: currentColor;
  }
  
  /* Previous outfits modal – light box */
  .theme-modal-box {
    position: relative;
    width: 95%;
    max-height: 90%;
    border-radius: 20px;
    padding: 24px;
    overflow-y: auto;
    animation: slideInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .theme-modal-box-light {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  }
  
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .theme-modal-heading {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
    text-align: center;
  }
  
  .theme-modal-subtitle {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: #374151;
    text-align: center;
  }
  
  .theme-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 8px 0;
  }
  
  .theme-modal-thumb-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .theme-modal-thumb-card:hover {
    border-color: #111827;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .theme-modal-thumb-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
  }
  
  .theme-modal-thumb-label {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.02em;
  }
  
  /* =================================================================== */
  /* ### END: Gender Selection and Body Parameters Styles ### */
  /* =================================================================== */
  
  /* =================================================================== */
  /* ### END: 3D View Button and GIF Overlay Styles ### */
  /* =================================================================== */

  /* =================================================================== */
  /* ### SM inline PDP (product page try-on, scanning, result) ### */
  /* =================================================================== */

  @keyframes sm-gpulse {
    0%,
    100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes sm-slideup {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes sm-scandown {
    0% {
      top: 0;
    }
    100% {
      top: calc(100% - 2px);
    }
  }

  @keyframes sm-svgscan {
    0% {
      top: 0;
    }
    100% {
      top: 177px;
    }
  }

  @keyframes sm-shimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 200%;
    }
  }

  @keyframes sm-pulseglow {
    0%,
    100% {
      box-shadow:
        0 0 16px rgba(99, 102, 241, 0.8),
        0 0 32px rgba(99, 102, 241, 0.4);
    }
    50% {
      box-shadow:
        0 0 24px rgba(139, 92, 246, 1),
        0 0 48px rgba(99, 102, 241, 0.6);
    }
  }

  @keyframes widget-progress-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .sm-gallery-active {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #sm-inject-bar {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    background: #111;
    padding: 12px 14px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    box-sizing: border-box;
    width: 100%;
    font-family:
      -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  }

  #sm-inject-bar:hover {
    background: #1a1a1a;
  }

  #sm-inject-bar .smb-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #5b5fef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #sm-inject-bar .smb-text {
    flex: 1;
    min-width: 0;
  }

  #sm-inject-bar .smb-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
  }

  #sm-inject-bar .smb-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
  }

  #sm-inject-bar .smb-arrow {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
    flex-shrink: 0;
  }

  #sm-inject-bar.sm-bar-light {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin: 10px 0 0;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  #sm-inject-bar.sm-bar-light:hover {
    background: #f9fafb;
  }

  #sm-inject-bar.sm-bar-light .smb-title {
    color: #111;
    font-size: 14px;
  }

  #sm-inject-bar.sm-bar-light .smb-sub {
    color: #6b7280;
    font-size: 12px;
  }

  #sm-inject-bar.sm-bar-light .smb-arrow {
    color: #9ca3af;
  }

  #sm-inject-bar.sm-inject-bar-fixed {
    position: fixed;
    bottom: max(72px, env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    z-index: 2147483640;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  body.sm-tryon-active #sm-inject-bar {
    display: none !important;
  }

  body.sm-result-open {
    overflow: hidden;
  }

  #sm-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 199999;
    background: #06060f;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #sm-progress-overlay .sm-gen-canvas--overlay {
    flex: 1;
    width: 100%;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px
      max(20px, env(safe-area-inset-bottom));
  }

  #sm-progress-overlay .sm-gen-brand {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    z-index: 6;
  }

  #sm-progress-overlay .sm-gen-brand span {
    color: #8b8ff8;
    font-weight: 800;
  }

  #sm-gen-canvas.sm-gen-canvas {
    width: 100%;
    min-height: min(var(--sm-gen-min-h, 380px), 72vh);
    max-height: min(var(--sm-gen-min-h, 560px), 72vh);
    background: #06060f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    font-family:
      -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    gap: 20px;
    padding: 32px 16px 56px;
  }

  #sm-gen-canvas .sm-gen-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 70% 60% at 50% 45%,
      rgba(99, 102, 241, 0.13),
      transparent
    );
  }

  #sm-gen-canvas .sm-gen-cancel {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 6px 12px;
    z-index: 5;
  }

  #sm-gen-canvas .sm-gen-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 520px;
    z-index: 1;
  }

  #sm-gen-canvas .sm-gen-photo {
    position: relative;
    width: 96px;
    height: 136px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid rgba(91, 95, 239, 0.5);
    box-shadow:
      0 0 28px rgba(91, 95, 239, 0.3),
      0 0 60px rgba(91, 95, 239, 0.1);
  }

  #sm-gen-canvas .sm-gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  #sm-gen-canvas .sm-gen-photo-scan {
    position: absolute;
    left: -5%;
    right: -5%;
    height: 2px;
    top: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(91, 95, 239, 1),
      transparent
    );
    box-shadow: 0 0 12px rgba(91, 95, 239, 0.9);
    animation: sm-scandown 2s linear infinite alternate;
  }

  #sm-gen-canvas .sm-gen-photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1px;
  }

  #sm-gen-canvas .sm-gen-silhouette {
    position: relative;
    flex-shrink: 0;
  }

  #sm-gen-canvas .sm-gen-silhouette-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(99, 102, 241, 0.95),
      transparent
    );
    box-shadow:
      0 0 12px rgba(99, 102, 241, 0.8),
      0 0 24px rgba(99, 102, 241, 0.3);
    animation: sm-svgscan 2s ease-in-out infinite alternate;
  }

  #sm-gen-canvas .sm-gen-steps {
    flex: 1;
    min-width: 0;
    max-width: 220px;
  }

  #sm-gen-canvas .sm-gen-step {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 12px;
    transition: opacity 0.4s;
  }

  #sm-gen-canvas .sm-gen-step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sm-gen-canvas .sm-gen-step-label {
    font-size: 12px;
    line-height: 1.35;
    transition: color 0.3s;
    word-break: break-word;
  }

  #sm-gen-canvas .sm-gen-pct-wrap {
    text-align: center;
    z-index: 1;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }

  #sm-gen-canvas #sm-gen-pct {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  #sm-gen-canvas #sm-gen-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 8px;
    letter-spacing: 0.2px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
  }

  #sm-gen-canvas .sm-gen-prog-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    overflow: hidden;
  }

  #sm-gen-canvas #sm-gen-prog {
    height: 100%;
    width: 0%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(
      90deg,
      #4f46e5,
      #6366f1,
      #8b5cf6,
      #a78bfa
    );
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.9);
    animation: sm-pulseglow 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
  }

  #sm-gen-canvas #sm-gen-prog .sm-gen-prog-shimmer {
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.55),
      transparent
    );
    animation: sm-shimmer 2.2s ease-in-out infinite;
  }

  #sm-ba-slider.sm-ba-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    width: 100%;
    background: #111;
  }

  #sm-ba-slider .sm-ba-before {
    position: absolute;
    inset: 0;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #sm-ba-slider .sm-ba-before img,
  #sm-ba-slider .sm-ba-after img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #sm-ba-slider .sm-ba-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(160deg, #10102a, #0c0c1e);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sm-ba-slider .sm-ba-tag {
    position: absolute;
    bottom: 12px;
    z-index: 4;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family:
      -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  }

  #sm-ba-slider .sm-ba-tag-before {
    left: 12px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.75);
  }

  #sm-ba-slider .sm-ba-tag-after {
    right: 12px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
  }

  #sm-result-bar {
    background: #0e0e0e;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family:
      -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    box-sizing: border-box;
    width: 100%;
  }

  #sm-result-bar .sm-result-brand {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
  }

  #sm-result-bar .sm-result-brand em {
    font-style: normal;
    color: #7b7ff5;
  }

  #sm-result-bar .sm-result-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22c55e;
    flex-shrink: 0;
  }

  #sm-result-bar .sm-result-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }

  #sm-result-bar button {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
  }

  #sm-result-bar #sm-swap-photo-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
  }

  #sm-result-bar #sm-build-outfit-btn {
    background: rgba(91, 95, 239, 0.18);
    border: 1px solid rgba(91, 95, 239, 0.38);
    color: #8b8ff8;
  }

  #sm-result-bar #sm-try-again-btn {
    background: #5b5fef;
    color: #fff;
    border: none;
  }

  @media (max-width: 768px) {
    #sm-gen-canvas.sm-gen-canvas,
    #sm-progress-overlay .sm-gen-canvas--overlay {
      padding: 24px 12px 52px;
      gap: 16px;
    }

    #sm-gen-canvas .sm-gen-row,
    #sm-progress-overlay .sm-gen-row {
      flex-direction: column;
      gap: 16px;
    }

    #sm-gen-canvas .sm-gen-steps,
    #sm-progress-overlay .sm-gen-steps {
      max-width: 100%;
      width: 100%;
    }

    #sm-gen-canvas #sm-gen-pct,
    #sm-progress-overlay #sm-gen-pct {
      font-size: 40px;
    }

    #sm-result-bar {
      padding: 10px;
    }

    #sm-result-bar .sm-result-actions {
      margin-left: 0;
      width: 100%;
    }

    #sm-result-bar button {
      flex: 1;
      min-width: calc(50% - 4px);
    }

    #sm-result-bar #sm-try-again-btn {
      flex: 1 1 100%;
    }
  }

  @media (min-width: 769px) {
    #sm-gen-canvas #sm-gen-pct {
      font-size: 56px;
    }
  }

  #sm-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  }

  #sm-result-overlay .sm-result-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.72);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
  }

  #sm-result-overlay .sm-result-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 96vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 22px 18px max(22px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    animation: sm-slideup 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (min-width: 769px) {
    #sm-result-overlay .sm-result-overlay-backdrop {
      align-items: center;
      padding: 24px;
    }

    #sm-result-overlay .sm-result-overlay-panel {
      border-radius: 20px;
      max-height: 90vh;
      padding: 28px 24px 24px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    }
  }

  #sm-result-overlay .sm-result-overlay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  #sm-result-overlay .sm-result-overlay-close:hover {
    background: #f5f5f5;
    border-color: #111;
  }

  #sm-result-overlay .sm-result-overlay-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 40px 6px 0;
  }

  #sm-result-overlay .sm-result-overlay-title {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 600;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 36px 8px 0;
    font-family: Georgia, "Times New Roman", serif;
  }

  #sm-result-overlay .sm-result-overlay-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.45;
  }

  #sm-result-overlay .sm-result-slider-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f8f8f8;
    margin-bottom: 18px;
  }

  #sm-result-overlay .sm-ba-slider {
    border-radius: 0;
  }

  #sm-result-overlay .sm-result-overlay-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #sm-result-overlay .sm-result-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease;
  }

  #sm-result-overlay .sm-result-btn-primary {
    background: #111;
    color: #fff;
    border: 2px solid #111;
  }

  #sm-result-overlay .sm-result-btn-primary:hover:not(:disabled) {
    background: #1f2937;
    border-color: #1f2937;
  }

  #sm-result-overlay .sm-result-btn-primary.sm-result-atc-success {
    background: #111;
    border-color: #22c55e;
    box-shadow: inset 0 0 0 1px #22c55e;
  }

  #sm-result-overlay .sm-result-btn-secondary {
    background: #fff;
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.14);
  }

  #sm-result-overlay .sm-result-btn-secondary:hover {
    background: #fafafa;
    border-color: #111;
  }

  #sm-result-overlay .sm-result-btn:disabled {
    opacity: 0.65;
    cursor: wait;
  }

  /* Virtual try-on consent (DPDP) — once per browser when granted */
  body.sm-consent-open {
    overflow: hidden;
  }

  #sm-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 200002;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
  }

  #sm-consent-overlay .sm-consent-sheet {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 8px 20px max(22px, env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.18);
    animation: sm-slideup 0.3s ease;
    box-sizing: border-box;
  }

  #sm-consent-overlay .sm-consent-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    margin: 4px auto 14px;
  }

  #sm-consent-overlay .sm-consent-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 8px;
    text-align: center;
  }

  #sm-consent-overlay .sm-consent-brand span {
    color: #5b5fef;
  }

  #sm-consent-overlay .sm-consent-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
  }

  #sm-consent-overlay .sm-consent-lead {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    text-align: center;
  }

  #sm-consent-overlay .sm-consent-points {
    margin: 0 0 12px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.45;
    color: #444;
  }

  #sm-consent-overlay .sm-consent-points li {
    margin-bottom: 6px;
  }

  #sm-consent-overlay .sm-consent-policy {
    margin: 0 0 16px;
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
    text-align: center;
  }

  #sm-consent-overlay .sm-consent-policy a {
    color: #5b5fef;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  #sm-consent-overlay .sm-consent-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
  }

  #sm-consent-overlay .sm-consent-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
  }

  #sm-consent-overlay .sm-consent-btn-accept {
    background: #111;
    color: #fff;
  }

  #sm-consent-overlay .sm-consent-btn-decline {
    background: #fafafa;
    color: #444;
    border: 1px solid #e5e7eb;
  }

  #sm-consent-overlay .sm-consent-footnote {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
    color: #9ca3af;
    text-align: center;
  }

  @media (min-width: 520px) {
    #sm-consent-overlay {
      align-items: center;
      padding: 20px;
    }

    #sm-consent-overlay .sm-consent-sheet {
      border-radius: 16px;
      max-height: min(90vh, 640px);
      overflow-y: auto;
    }
  }

  /* Upload sheet — camera / gallery actions */
  .sm-sheet-action {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px;
    border: none;
    display: block;
  }

  .sm-sheet-action-primary {
    background: #111;
    color: #fff;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
  }

  .sm-sheet-action-primary.sm-sheet-camera-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .sm-sheet-camera-title {
    font-size: 14px;
    font-weight: 700;
  }

  .sm-sheet-camera-sub {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
  }

  .sm-sheet-action-secondary {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
  }

  label.sm-sheet-file-label {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sm-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* In-app camera (Option B) */
  body.sm-camera-open {
    overflow: hidden;
  }

  #sm-camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 200001;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  #sm-camera-overlay .sm-camera-shell {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  #sm-camera-overlay .sm-camera-phase-guide {
    background: linear-gradient(180deg, #14141c 0%, #0a0a0f 100%);
    border-radius: 20px 20px 0 0;
    padding: 8px 16px max(16px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
    max-height: min(94vh, 720px);
    overflow-y: auto;
  }

  #sm-camera-overlay .sm-camera-phase-capture {
    min-height: 100vh;
    min-height: 100dvh;
    background: #0a0a0f;
    padding: max(12px, env(safe-area-inset-top)) 16px
      max(20px, env(safe-area-inset-bottom));
    border-radius: 0;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  #sm-camera-overlay .sm-camera-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px auto 12px;
  }

  #sm-camera-overlay .sm-camera-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    z-index: 3;
  }

  #sm-camera-overlay .sm-camera-phase {
    position: relative;
    padding-top: 36px;
  }

  #sm-camera-overlay .sm-camera-phase-capture {
    padding-top: 44px;
  }

  #sm-camera-overlay .sm-camera-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
    text-align: center;
  }

  #sm-camera-overlay .sm-camera-brand span {
    color: #8b8ff8;
  }

  #sm-camera-overlay .sm-camera-heading {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 4px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    color: #f4f4f5;
  }

  #sm-camera-overlay .sm-camera-lead {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 14px;
    text-align: center;
  }

  #sm-camera-overlay:has(#sm-camera-phase-capture:not([hidden])) {
    justify-content: flex-start;
    background: #0a0a0f;
  }

  #sm-camera-overlay .sm-camera-visual {
    margin-bottom: 16px;
  }

  #sm-camera-overlay .sm-camera-visual-hero {
    display: grid;
    grid-template-columns: 1fr 108px;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
    min-height: 148px;
  }

  #sm-camera-overlay .sm-camera-scene {
    position: relative;
    height: 148px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1e1e28 0%, #121218 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  #sm-camera-overlay .sm-camera-scene-wall {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.03) 18px,
      rgba(255, 255, 255, 0.03) 19px
    );
  }

  #sm-camera-overlay .sm-camera-scene-distance {
    position: absolute;
    left: 10px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
  }

  #sm-camera-overlay .sm-camera-scene-phone {
    color: #a5b4fc;
    display: flex;
  }

  #sm-camera-overlay .sm-camera-scene-line {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, #6366f1, transparent);
  }

  #sm-camera-overlay .sm-camera-scene-figure {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 72px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.35));
  }

  #sm-camera-overlay .sm-camera-phone-mock {
    width: 108px;
    height: 148px;
    border-radius: 14px;
    padding: 6px;
    background: #2a2a34;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 12px 28px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }

  #sm-camera-overlay .sm-camera-phone-notch {
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: #0a0a0f;
    margin: 0 auto 4px;
  }

  #sm-camera-overlay .sm-camera-phone-screen {
    position: relative;
    height: calc(100% - 12px);
    border-radius: 10px;
    background: #0d0d14;
    border: 1px dashed rgba(99, 102, 241, 0.55);
    overflow: hidden;
  }

  #sm-camera-overlay .sm-camera-phone-safe {
    position: absolute;
    inset: 10px 14px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  #sm-camera-overlay .sm-camera-phone-head {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #818cf8;
  }

  #sm-camera-overlay .sm-camera-phone-torso {
    width: 4px;
    flex: 1;
    max-height: 36px;
    margin: 2px 0;
    border-radius: 2px;
    background: #818cf8;
  }

  #sm-camera-overlay .sm-camera-phone-legs {
    width: 28px;
    height: 36px;
    border: 2px solid #818cf8;
    border-top: none;
    border-radius: 0 0 8px 8px;
    opacity: 0.85;
  }

  #sm-camera-overlay .sm-camera-phone-feet-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    border-top: 2px solid #4ade80;
    text-align: center;
  }

  #sm-camera-overlay .sm-camera-phone-feet-line span {
    display: inline-block;
    margin-top: 2px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4ade80;
  }

  #sm-camera-overlay .sm-camera-tips {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  #sm-camera-overlay .sm-camera-tips li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.25;
  }

  #sm-camera-overlay .sm-camera-tip-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    position: relative;
  }

  #sm-camera-overlay .sm-camera-tip-wall::after {
    content: "";
    position: absolute;
    inset: 8px 6px;
    border-left: 3px solid #a5b4fc;
    border-top: 3px solid #a5b4fc;
    border-radius: 2px 0 0 0;
  }

  #sm-camera-overlay .sm-camera-tip-light::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fde047 30%, transparent 70%);
    box-shadow: 0 14px 0 -10px rgba(253, 224, 71, 0.35);
  }

  #sm-camera-overlay .sm-camera-tip-pose::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background: #a5b4fc;
    box-shadow: -8px 4px 0 0 #a5b4fc, 8px 4px 0 0 #a5b4fc;
  }

  #sm-camera-overlay .sm-camera-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #sm-camera-overlay .sm-camera-compare-card {
    position: relative;
    border-radius: 12px;
    padding: 10px 8px 12px;
    text-align: center;
  }

  #sm-camera-overlay .sm-camera-compare-card p {
    margin: 8px 0 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.65);
  }

  #sm-camera-overlay .sm-camera-compare-yes {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.25);
  }

  #sm-camera-overlay .sm-camera-compare-no {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.22);
  }

  #sm-camera-overlay .sm-camera-compare-art svg {
    width: 64px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #sm-camera-overlay .sm-camera-compare-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  #sm-camera-overlay .sm-camera-compare-badge-yes {
    background: #22c55e;
    color: #052e16;
  }

  #sm-camera-overlay .sm-camera-compare-badge-no {
    background: #ef4444;
    color: #fff;
  }

  #sm-camera-overlay .sm-camera-btn-primary {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 10px;
    background: #5b5fef;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
  }

  #sm-camera-overlay .sm-camera-btn-ghost {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  #sm-camera-overlay .sm-camera-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: min(62vh, 520px);
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  #sm-camera-overlay #sm-camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #sm-camera-overlay .sm-camera-frame-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.45) 100%
    );
  }

  #sm-camera-overlay .sm-camera-silhouette {
    width: 42%;
    max-width: 140px;
    aspect-ratio: 90 / 180;
    border: 2px dashed rgba(99, 102, 241, 0.75);
    border-radius: 40% 40% 8% 8%;
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
    opacity: 0.9;
  }

  #sm-camera-overlay .sm-camera-frame-label {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  }

  #sm-camera-overlay .sm-camera-live-chips {
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #sm-camera-overlay .sm-camera-live-chips li {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(129, 140, 248, 0.35);
  }

  #sm-camera-overlay .sm-camera-capture-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #sm-camera-overlay .sm-camera-capture-actions .sm-camera-btn-ghost {
    width: auto;
    min-width: 100px;
    padding: 0 16px;
  }

  #sm-camera-overlay .sm-camera-shutter {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: #5b5fef;
    box-shadow: 0 0 0 4px rgba(91, 95, 239, 0.35);
    cursor: pointer;
    flex-shrink: 0;
  }

  #sm-camera-overlay .sm-camera-shutter:disabled {
    opacity: 0.5;
    cursor: wait;
  }

  #sm-camera-overlay .sm-camera-shutter-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
  }

  #sm-camera-overlay .sm-camera-error {
    font-size: 12px;
    color: #f87171;
    text-align: center;
    margin-top: 12px;
  }

  /* =================================================================== */
  /* ### END SM inline PDP ### */
  /* =================================================================== */