/* DECETI Templates v0 — immutable Storage palette contract.
 * It uses the Templates palette roles only inside this component. */
html body .deceti-template-controls.deceti-templates-v0 {
  --gallery-surface: #ffffff;
  --gallery-soft: #bbf3ff;
  --gallery-ink: #111827;
  --gallery-muted: #6b7280;
  --gallery-border: #d4d9df;
  --gallery-primary: #00334d;
  --gallery-on-primary: #ffffff;
  color: var(--gallery-ink);
}
html body .deceti-template-controls.deceti-templates-v0 .navmenu,
html body .deceti-template-controls.deceti-templates-v0 .s-content {
  background: var(--gallery-surface);
  border: 1px solid var(--gallery-border);
  border-radius: var(--radius-template-panel, 16px);
}
html body .deceti-template-controls.deceti-templates-v0 .template-item,
html body .deceti-template-controls.deceti-templates-v0 .subtemplate-item {
  color: #111827;
  background: #ffffff;
  border: 1px solid #d4d9df;
  border-radius: var(--radius-template-control, 10px);
}
html body .deceti-template-controls.deceti-templates-v0 :is(.template-item, .subtemplate-item):hover {
  color: #111827;
  background: #bbf3ff;
  border-color: #02b5ff;
}
html body .deceti-template-controls.deceti-templates-v0 :is(.template-item, .subtemplate-item).active {
  color: var(--gallery-on-primary);
  background: var(--gallery-primary);
  border-color: #00334d;
}
html body .deceti-template-controls.deceti-templates-v0 .navmenu .submenu { background: transparent; }
html body .deceti-template-controls.deceti-templates-v0 .search-bar input,
html body .deceti-template-controls.deceti-templates-v0 .size-select {
  color: #111827;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-template-control, 10px);
}
html body .deceti-template-controls.deceti-templates-v0 .search-bar input::placeholder { color: #6b7280; opacity: 1; }
html body .deceti-template-controls.deceti-templates-v0 .search-bar input:focus,
html body .deceti-template-controls.deceti-templates-v0 .size-select:focus { outline: 2px solid #02b5ff; outline-offset: 2px; }
html body .deceti-template-controls.deceti-templates-v0 .search-bar button,
html body .deceti-template-controls.deceti-templates-v0 :is(a.btn.btn-customize, a.btn-customize, .btn.btn-customize, .btn-customize),
html body .deceti-template-controls.deceti-templates-v0 .shape-button.active,
html body .deceti-template-controls.deceti-templates-v0 .shape-accordion-toggle.active {
  color: #ffffff !important;
  background: #00334d !important;
  border: 1px solid #00334d !important;
  border-radius: var(--radius-template-control, 10px);
}
html body .deceti-template-controls.deceti-templates-v0 .search-bar button:hover,
html body .deceti-template-controls.deceti-templates-v0 :is(a.btn.btn-customize, a.btn-customize, .btn.btn-customize, .btn-customize):hover {
  color: #ffffff !important;
  background: #00c5f0 !important;
  border-color: #00c5f0 !important;
}
html body .deceti-template-controls.deceti-templates-v0 .item-box {
  color: #111827;
  background: #ffffff;
  border: 1px solid #d4d9df;
  border-radius: var(--radius-template-card, 10px);
}
html body .deceti-template-controls.deceti-templates-v0 .item-box:hover {
  background: #ffffff;
  border-color: #02b5ff;
  outline: var(--deceti-template-outline-width) solid #02b5ff;
}
html body .deceti-template-controls.deceti-templates-v0 .item-box img { background: #ffffff; object-fit: contain; }
html body .deceti-template-controls.deceti-templates-v0 .new-category-name { color: #000000; }
html body .deceti-template-controls.deceti-templates-v0 .shape-button,
html body .deceti-template-controls.deceti-templates-v0 .shape-accordion-toggle {
  color: #111827;
  background: #ffffff;
  border: 1px solid #d4d9df;
  border-radius: var(--radius-template-control, 10px);
}
html body .deceti-template-controls.deceti-templates-v0 .shape-button:hover,
html body .deceti-template-controls.deceti-templates-v0 .shape-accordion-toggle:hover { background: #bbf3ff; border-color: #02b5ff; }
html body .deceti-template-controls.deceti-templates-v0 .color-button { border: 0; }
html body .deceti-template-controls.deceti-templates-v0 .color-button.active { border: 3px solid #02b5ff; }
html body .deceti-template-controls.deceti-templates-v0,
html body .deceti-template-controls.deceti-templates-v0 *,
html body .deceti-template-controls.deceti-templates-v0 *::before,
html body .deceti-template-controls.deceti-templates-v0 *::after { box-shadow: none; text-shadow: none; }

/* Category and subcategory controls are separate palette roles.  These final
 * component rules intentionally win the legacy v0 hover text declaration. */
html body .deceti-template-controls.deceti-templates-v0 .template-item {
  color: var(--color-template-category-text, var(--gallery-ink)) !important;
  background: var(--color-template-category-background, var(--gallery-surface)) !important;
  border-color: var(--color-template-category-border, var(--gallery-border)) !important;
}
html body .deceti-template-controls.deceti-templates-v0 .template-item:hover {
  color: var(--color-template-category-hover-text, var(--gallery-ink)) !important;
  background: var(--color-template-category-hover-background, var(--gallery-soft)) !important;
  border-color: var(--color-template-category-hover-border, #02b5ff) !important;
}
html body .deceti-template-controls.deceti-templates-v0 .template-item.active {
  color: var(--color-template-category-active-text, var(--gallery-on-primary)) !important;
  background: var(--color-template-category-active-background, var(--gallery-primary)) !important;
  border-color: var(--color-template-category-active-border, var(--gallery-primary)) !important;
}
html body .deceti-template-controls.deceti-templates-v0 .subtemplate-item {
  color: var(--color-template-subcategory-text, var(--gallery-ink)) !important;
  background: var(--color-template-subcategory-background, var(--gallery-surface)) !important;
  border-color: var(--color-template-subcategory-border, var(--gallery-border)) !important;
}
html body .deceti-template-controls.deceti-templates-v0 .subtemplate-item:hover {
  color: var(--color-template-subcategory-hover-text, var(--gallery-ink)) !important;
  background: var(--color-template-subcategory-hover-background, var(--gallery-soft)) !important;
  border-color: var(--color-template-subcategory-hover-border, #02b5ff) !important;
}
html body .deceti-template-controls.deceti-templates-v0 .subtemplate-item.active {
  color: var(--color-template-subcategory-active-text, var(--gallery-on-primary)) !important;
  background: var(--color-template-subcategory-active-background, var(--gallery-primary)) !important;
  border-color: var(--color-template-subcategory-active-border, var(--gallery-primary)) !important;
}