add header background contrast warning and improve branding UX

- extract dominant colors from header images during optimization
- calculate WCAG contrast ratios against theme text color
- show warning in theme editor when text may be hard to read
- prevent hiding shop name when no logo is uploaded
- auto-enable shop name when logo is deleted
- fix image cache invalidation on delete
- add missing .hidden utility class

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -4017,21 +4017,30 @@
   transition: width 0.2s;
 }
 
-/* Small round remove button (overlaid on thumbnails) */
+/* Round remove button (overlaid on thumbnails) */
 .theme-remove-btn {
   position: absolute;
-  top: -0.375rem;
-  inset-inline-end: -0.375rem;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: var(--t-text-primary);
-  color: var(--t-surface-base);
+  top: -0.5rem;
+  inset-inline-end: -0.5rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  background: var(--t-status-error);
+  color: white;
   border-radius: 9999px;
-  font-size: 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    background: color-mix(in oklch, var(--t-status-error) 85%, black);
+    transform: scale(1.1);
+  }
 }
 
 /* Thumbnail preview boxes */
@@ -4043,7 +4052,10 @@
   background: var(--t-surface-base);
   border: 1px solid var(--t-border-default);
   border-radius: 0.5rem;
-  overflow: hidden;
+}
+
+.theme-thumb img {
+  border-radius: 0.375rem;
 }
 
 .theme-thumb-logo {
@@ -4342,6 +4354,35 @@
   margin-top: 0.25rem;
 }
 
+/* Contrast warning for header backgrounds */
+.theme-contrast-warning {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-top: 0.75rem;
+  border-radius: 0.375rem;
+  background: color-mix(in oklch, var(--t-status-warning) 12%, var(--t-surface-base));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+
+  & .size-5 {
+    color: var(--t-status-warning);
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+  }
+
+  & strong {
+    display: block;
+    color: var(--t-text-primary);
+    font-weight: 500;
+  }
+
+  & p {
+    margin-top: 0.25rem;
+    color: var(--admin-text-muted);
+  }
+}
+
 /* Radio card selector (logo mode picker) */
 .theme-radio-fieldset {
   border: none;