.template-picker {
  --picker-surface: var(--bg-elevated, #fff);
  --picker-soft: var(--bg-surface, #fdfbf7);
  --picker-line: var(--border-default, #e5dfd4);
  --picker-ink: var(--text-primary, #1f1d1a);
  --picker-muted: var(--text-secondary, #4a4540);
  --picker-accent: #8b6528;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--picker-line);
  border-radius: 24px;
  background: var(--picker-soft);
  color: var(--picker-ink);
  box-shadow: 0 16px 50px rgba(48, 36, 17, .05);
  min-width: 0;
  text-align: start;
}
[data-theme="dark"] .template-picker { --picker-accent: #d4b85a; }
.template-picker [hidden] { display: none !important; }
.template-picker .design-order-guidance__intro { max-width: 800px; margin-bottom: 28px; }
.template-picker .design-order-guidance__intro > span { color: var(--picker-accent); font-size: .88rem; }
.template-picker__tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.template-picker__tools label { display: grid; gap: 8px; color: var(--picker-muted); font-size: .875rem; font-weight: 600; min-width: 0; }
.template-picker__tools input, .template-picker__tools select {
  min-width: 0; width: 100%; min-height: 48px; border: 1px solid var(--picker-line); border-radius: 10px;
  padding: 10px 12px; color: var(--picker-ink); background: var(--picker-surface); font: inherit; font-size: 1rem;
}
.template-picker__search > div { position: relative; }
.template-picker__search svg { position: absolute; top: 14px; inset-inline-start: 13px; pointer-events: none; }
.template-picker__search input { padding-inline-start: 42px; }
.template-picker :is(input, select, button, a):focus-visible { outline: 3px solid var(--accent-gold, #c9a84c); outline-offset: 3px; }
.template-picker__results { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-block: 18px; font-size: .875rem; color: var(--picker-muted); }
.template-picker__results button, .template-picker__empty button, .template-picker__selection > button { background: transparent; color: var(--picker-accent); border: 0; padding: 8px 0; font: inherit; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.template-picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; min-width: 0; }
.template-picker__entry { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--picker-line); border-radius: 14px; background: var(--picker-surface); transition: border-color .2s, box-shadow .2s; }
.template-picker__entry:has(.is-selected) { border-color: var(--accent-gold, #c9a84c); box-shadow: 0 0 0 2px rgba(201, 168, 76, .2); }
.template-picker__select { display: block; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--picker-ink); text-align: start; font: inherit; cursor: pointer; }
.template-picker__select:disabled { cursor: default; }
.template-picker__image { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--picker-soft); }
.template-picker__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
@media (hover: hover) { .template-picker__select:not(:disabled):hover img { transform: scale(1.025); } .template-picker__entry:hover { border-color: var(--accent-brass, #b8956a); } }
.template-picker__number { position: absolute; top: 10px; inset-inline-start: 10px; min-width: 30px; padding: 5px 7px; border-radius: 7px; color: #fff; background: rgba(20, 18, 16, .7); font: 600 .75rem/1.4 Inter, sans-serif; }
.template-picker__check { display: none; position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; place-items: center; color: #201a0e; background: #d4b85a; border-radius: 50%; font-weight: 900; }
.is-selected .template-picker__check { display: grid; }
.template-picker__body { display: grid; gap: 8px; padding: 15px; }
.template-picker__body strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.template-picker__meta { min-height: 1.7em; color: var(--picker-muted); font-size: .8rem; line-height: 1.7; }
.template-picker__choose { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--picker-line); color: var(--picker-accent); font-size: .8rem; font-weight: 700; }
.template-picker__choose > span { font-size: 1.2rem; }
.template-picker__project-link { display: flex; justify-content: space-between; gap: 8px; padding: 10px 15px; min-height: 44px; border-top: 1px solid var(--picker-line); color: var(--picker-muted); text-decoration: none; font-size: .8rem; }
.template-picker__pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-block: 24px; color: var(--picker-muted); font-size: .875rem; }
.template-picker__pagination button { min-height: 44px; min-width: 110px; padding: 9px 15px; border: 1px solid var(--picker-line); border-radius: 10px; background: var(--picker-surface); color: var(--picker-ink); font: inherit; cursor: pointer; }
.template-picker__pagination button:disabled { opacity: .4; cursor: default; }
.template-picker__empty { padding: 28px 16px; text-align: center; color: var(--picker-muted); border: 1px dashed var(--picker-line); border-radius: 14px; }
.template-picker__selection { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 20px; margin-top: 24px; border: 1px solid rgba(201, 168, 76, .4); border-radius: 14px; background: var(--picker-surface); }
.template-picker__selection > img { flex: 0 0 80px; width: 80px; height: 64px; object-fit: cover; border-radius: 8px; }
.template-picker__selection > div { flex: 1 1 230px; min-width: 0; display: grid; gap: 5px; }
.template-picker__selection > div > span { color: var(--picker-accent); font-size: .75rem; }
.template-picker__selection strong { font-size: .96rem; line-height: 1.7; overflow-wrap: anywhere; }
.template-picker__selection small, .template-picker__fallback { color: var(--picker-muted); font-size: .875rem; line-height: 1.8; }
.template-picker__continue { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 46px; padding: 12px 20px; border: 1px solid #c9a84c; border-radius: 10px; background: #c9a84c; color: #241e12; text-decoration: none; font-size: .875rem; font-weight: 700; }
.sanjab-form[id] { scroll-margin-top: 115px; }
@media (max-width: 991.98px) { .template-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .template-picker { padding: 20px 16px; border-radius: 18px; }
  .template-picker__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .template-picker__search { grid-column: 1 / -1; }
  .template-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .template-picker__body { padding: 12px; }
  .template-picker__body strong { font-size: .875rem; }
  .template-picker__selection { gap: 12px; padding: 16px; }
  .template-picker__selection > div { flex-basis: calc(100% - 100px); }
  .template-picker__continue { width: 100%; }
}
@media (max-width: 359px) { .template-picker__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .template-picker__entry, .template-picker__image img { transition: none; } }