/* ══════════════════════════════════════════════════
   HONIO TEMPLATES
   Scoped by .tpl-X class (applied to body of frontend
   of aan preview-container in admin).
   ══════════════════════════════════════════════════ */

/* ───── 1. ELEGANT (basis, serif accenten) ───── */
.tpl-elegant .logo-text   { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: 0.08em; }
.tpl-elegant .page-title  { font-family: Georgia, serif; font-style: italic; }
.tpl-elegant .cat-label   { font-family: Georgia, serif; font-style: italic; text-transform: none; letter-spacing: 0.05em; font-size: 0.85rem; }
.tpl-elegant .divider::before,
.tpl-elegant .divider::after { width: 50px; }

/* ───── 2. MODERN (strak sans-serif, scherp) ───── */
.tpl-modern .divider       { display: none; }
.tpl-modern header         { border-bottom: 3px solid var(--accent); }
.tpl-modern .logo-text     { font-weight: 700; letter-spacing: 0; text-transform: none; }
.tpl-modern .logo-sub      { letter-spacing: 0.05em; text-transform: none; }
.tpl-modern .prod-row,
.tpl-modern .pay-btn,
.tpl-modern .modal-box,
.tpl-modern .input-field,
.tpl-modern .qty-btn       { border-radius: 0 !important; }
.tpl-modern .pay-btn       { letter-spacing: 0.03em; text-transform: none; font-weight: 600; }
.tpl-modern .cat-label     { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--accent); }
.tpl-modern .prod-name     { font-weight: 500; }

/* ───── 3. FOTO RECHTS (48px foto rechts naast tekst) ───── */
.tpl-foto_rechts .prod-row  { flex-direction: row; }
.tpl-foto_rechts .prod-info { order: 1; }
.tpl-foto_rechts .prod-img  { order: 2; width: 48px; height: 48px; }
.tpl-foto_rechts .prod-qty  { order: 3; }

/* ───── 4. FOTO LINKS (48px links, standaard layout) ───── */
.tpl-foto_links .prod-img   { width: 48px; height: 48px; }

/* ───── 5. FOTO GROOT (grote foto boven tekst) ───── */
.tpl-foto_groot .prod-row   { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.5rem; }
.tpl-foto_groot .prod-img   { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.tpl-foto_groot .prod-info  { text-align: center; }
.tpl-foto_groot .prod-qty   { justify-content: center; }

/* ───── 6. COMPACT (kleinste font, minimale spacing) ───── */
.tpl-compact .prod-row      { padding: 0.25rem 0.6rem; margin-bottom: 0.12rem; gap: 0.45rem; }
.tpl-compact .prod-name     { font-size: 0.78rem; }
.tpl-compact .prod-desc     { display: none; }
.tpl-compact .prod-price    { font-size: 0.68rem; margin-top: 0; }
.tpl-compact .prod-img      { width: 28px; height: 28px; }
.tpl-compact .qty-btn       { width: 22px; height: 22px; font-size: 0.85rem; }
.tpl-compact .qty-num       { min-width: 14px; font-size: 0.78rem; }
.tpl-compact .cat-label     { margin: 0.6rem 0 0.2rem; font-size: 0.58rem; }
.tpl-compact .divider       { display: none; }

/* ───── 7. KAART (grid van productkaarten) ───── */
.tpl-kaart #product-list    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.tpl-kaart .cat-label       { grid-column: 1 / -1; margin: 0.8rem 0 0.1rem; }
.tpl-kaart .cat-label:first-of-type { margin-top: 0; }
.tpl-kaart .prod-row        { flex-direction: column; padding: 0.5rem; border-radius: 6px; align-items: stretch; gap: 0.4rem; margin-bottom: 0; }
.tpl-kaart .prod-img        { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; }
.tpl-kaart .prod-info       { text-align: center; }
.tpl-kaart .prod-qty        { justify-content: center; }

/* ───── 8. DONKER (dark mode) ───── */
.tpl-donker                 { --bg: #1a1a1a; --card: #262626; --text: #e5e5e5; --border: #3f3f3f; --accent: #E5A84A; --text-muted: #a1a1a1; --text-faint: #6b6b6b; }
.tpl-donker .lang-btn       { border-color: var(--border); color: var(--text-muted); }
.tpl-donker .pay-btn        { background: var(--accent); color: #1a1a1a; }
.tpl-donker .pay-btn:hover:not(:disabled) { background: #fff; color: #1a1a1a; }

/* ───── 9. NATUURLIJK (warme aardetinten, ronde hoeken) ───── */
.tpl-natuurlijk             { --bg: #F5EDE4; --card: #FFF8F0; --accent: #A0522D; --border: #D4C4AE; --text: #3D2B1F; }
.tpl-natuurlijk .logo-text  { font-family: Georgia, serif; font-weight: 400; letter-spacing: 0.05em; }
.tpl-natuurlijk .prod-row   { border-radius: 14px; }
.tpl-natuurlijk .modal-box  { border-radius: 16px; }
.tpl-natuurlijk .pay-btn    { border-radius: 999px; letter-spacing: 0.1em; }
.tpl-natuurlijk .input-field{ border-radius: 8px; }
.tpl-natuurlijk .cat-label  { font-family: Georgia, serif; font-style: italic; letter-spacing: 0.05em; text-transform: none; }

/* ───── 10. ZAKELIJK (strak, grijs/blauw, geen decoratie) ───── */
.tpl-zakelijk               { --bg: #F8F9FA; --card: #FFFFFF; --accent: #1E3A8A; --border: #D1D5DB; --text: #1F2937; }
.tpl-zakelijk .divider      { display: none; }
.tpl-zakelijk header        { border-bottom: 1px solid var(--border); }
.tpl-zakelijk .logo-text    { font-weight: 600; letter-spacing: 0.03em; text-transform: none; }
.tpl-zakelijk .prod-row,
.tpl-zakelijk .pay-btn,
.tpl-zakelijk .qty-btn,
.tpl-zakelijk .input-field,
.tpl-zakelijk .modal-box    { border-radius: 3px; }
.tpl-zakelijk .qty-btn      { border-radius: 50%; }
.tpl-zakelijk .pay-btn      { background: var(--accent); color: #fff; text-transform: none; letter-spacing: 0.02em; font-weight: 500; }
.tpl-zakelijk .pay-btn:hover:not(:disabled) { background: #1E40AF; }
.tpl-zakelijk .cat-label    { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; color: var(--accent); border-bottom-color: var(--accent); }