.dark body                                { background-color: #020617 !important; color: #e2e8f0 !important; }
.dark .container                          { background-color: transparent !important; }
.dark .bg-white                           { background-color: #0f172a !important; }
.dark .bg-gray-50                         { background-color: #020617 !important; }
.dark .bg-rose-50                         { background-color: rgba(244,114,182,0.06) !important; }
.dark .bg-amber-50,
.dark .bg-amber-50\/30,
.dark .bg-amber-50\/50                    { background-color: rgba(245,158,11,0.06) !important; }
.dark .text-gray-900,
.dark .text-gray-800                      { color: #e2e8f0 !important; }
.dark .text-gray-700,
.dark .text-gray-600                      { color: #94a3b8 !important; }
.dark .text-gray-500                      { color: #64748b !important; }
.dark .text-gray-400                      { color: #475569 !important; }
.dark .border-rose-100                    { border-color: rgba(244,114,182,0.08) !important; }
.dark .border-rose-200                    { border-color: rgba(244,114,182,0.12) !important; }
.dark .border-amber-100,
.dark .border-amber-100\/60               { border-color: rgba(245,158,11,0.1) !important; }
.dark .border-amber-200,
.dark .border-amber-200\/60               { border-color: rgba(245,158,11,0.12) !important; }
.dark .bg-green-50                        { background-color: rgba(34,197,94,0.08) !important; }
.dark .bg-red-50                          { background-color: rgba(239,68,68,0.08) !important; }
.dark .border-green-200                   { border-color: rgba(34,197,94,0.15) !important; }
.dark .border-red-200                     { border-color: rgba(239,68,68,0.15) !important; }
.dark .text-green-700                     { color: #4ade80 !important; }
.dark .text-red-700                       { color: #f87171 !important; }
.dark a                                   { color: inherit !important; }
.dark .shadow-2xl                         { box-shadow: 0 25px 50px -12px rgba(2,6,23,0.7) !important; }
.dark .bg-white\/95                       { background-color: rgba(15,23,42,0.95) !important; }
.dark input,
.dark textarea,
.dark select                              { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
.dark input::placeholder,
.dark textarea::placeholder               { color: #475569 !important; }

.qv-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.qv-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.qv-modal {
  position: relative;
  width: 100%; max-width: 780px;
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dark .qv-modal { background: #0f172a; box-shadow: 0 25px 60px -12px rgba(0,0,0,0.6); }

@media (max-width: 640px) {
  .qv-modal {
    max-width: 100%; max-height: 100vh;
    border-radius: 0; height: 100%;
  }
  .qv-overlay { padding: 0; }
}

.qv-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .qv-body { grid-template-columns: 1fr; overflow-y: auto; }
}

.qv-gallery { position: relative; }
.qv-main-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: opacity 0.3s ease;
}
.qv-thumbs {
  display: flex; gap: 6px; padding: 10px 14px;
  overflow-x: auto;
}
.qv-thumb {
  width: 52px; height: 52px; border-radius: 8px;
  object-fit: cover; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.6; flex-shrink: 0;
}
.qv-thumb:hover { opacity: 0.85; }
.qv-thumb.active { border-color: #f43f5e; opacity: 1; }
.dark .qv-thumb.active { border-color: #fb7185; }

.qv-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.qv-badge-sale { background: #22c55e; color: #fff; }
.qv-badge-out  { background: rgba(0,0,0,0.7); color: #fff; backdrop-filter: blur(4px); }

.qv-info {
  padding: 24px;
  display: flex; flex-direction: column;
}
@media (max-width: 640px) { .qv-info { padding: 20px 16px; } }

.qv-close {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  color: #64748b;
}
.dark .qv-close { background: rgba(30,41,59,0.9); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.qv-close:hover { background: #fee2e2; color: #e11d48; }
.dark .qv-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.qv-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}
.qv-spinner {
  width: 36px; height: 36px;
  border: 3px solid #fecdd3;
  border-top-color: #f43f5e;
  border-radius: 50%;
  animation: qv-spin 0.7s linear infinite;
}
.dark .qv-spinner { border-color: #334155; border-top-color: #fb7185; }
@keyframes qv-spin { to { transform: rotate(360deg); } }

.qv-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.qv-price-main { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; }
.qv-price-old  { font-size: 16px; color: #9ca3af; text-decoration: line-through; }
.qv-discount-badge {
  font-size: 12px; font-weight: 700;
  background: #f0fdf4; color: #16a34a;
  padding: 2px 10px; border-radius: 99px;
}
.dark .qv-discount-badge { background: rgba(34,197,94,0.1); color: #4ade80; }

.qv-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fef3c7;
  margin-bottom: 14px;
}
.dark .qv-specs { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.1); }
.qv-spec-label { font-size: 10px; color: #9ca3af; margin-bottom: 1px; }
.qv-spec-value { font-size: 13px; font-weight: 600; color: #1f2937; }
.dark .qv-spec-value { color: #e2e8f0; }

.qv-stars { display: flex; align-items: center; gap: 1px; }
.qv-star { width: 16px; height: 16px; }
.qv-star-filled { color: #facc15; }
.qv-star-empty  { color: #e5e7eb; }
.dark .qv-star-empty { color: #334155; }

.qv-qty-wrap {
  display: flex; align-items: center;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 3px;
}
.dark .qv-qty-wrap { border-color: #334155; }
.qv-qty-btn {
  width: 34px; height: 34px;
  border-radius: 8px; border: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #f43f5e;
  cursor: pointer; transition: background 0.15s;
}
.dark .qv-qty-btn { color: #fb7185; }
.qv-qty-btn:hover { background: #fff1f2; }
.dark .qv-qty-btn:hover { background: rgba(244,114,182,0.1); }
.qv-qty-num {
  width: 36px; text-align: center;
  font-size: 15px; font-weight: 700;
  color: #1f2937;
}
.dark .qv-qty-num { color: #e2e8f0; }

.qv-enter { animation: qvIn 0.3s cubic-bezier(0.16,1,0.3,1); }
@keyframes qvIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.bloom-support-btn {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px -4px rgba(244,63,94,.6);
  transition: transform .2s, box-shadow .2s;
}
.bloom-support-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px -4px rgba(244,63,94,.7); }
.bloom-support-pulse {
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; background: #22c55e; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  animation: supportPulse 2s ease-in-out infinite;
}
@keyframes supportPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }