{{!-- Shared Xania email layout — used as a Handlebars partial.

Usage in a child template:

  {{#> _layout subject="Your subject" preheader="What inbox previews show"}}
    <!-- email body HTML goes here, will be placed inside the styled container -->
  {{/_layout}}

Design notes:
- Single 600px column, table-based for maximum Outlook compatibility.
- All colors inlined as hex; some MUAs strip <style> blocks.
- Mobile responsive via media query — wrapper goes full width below 600px.
- Brand color is purple (#7c3aed) to match the in-app navbar.
- Preheader is the gray dim text Gmail/Apple Mail show beside the subject in
  the inbox list. Always set it — empty preheader pulls noise into preview.
--}}<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>{{subject}}</title>
  <style>
    /* Reset */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; background: #f4f4f7; }

    /* Container */
    .x-wrap { width: 100%; background: #f4f4f7; padding: 32px 16px; }
    .x-card { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,0.04); }

    /* Header */
    .x-hero {
      background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
      padding: 28px 32px;
      color: #ffffff;
    }
    .x-brand { font: 700 22px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #ffffff; letter-spacing: -0.01em; }
    .x-brand-sub { margin-top: 6px; font: 400 13px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #ede9fe; }

    /* Body */
    .x-body { padding: 32px; font: 400 15px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #1f2937; }
    .x-body h1 { font: 700 24px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #111827; margin: 0 0 16px; letter-spacing: -0.02em; }
    .x-body h2 { font: 600 18px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #111827; margin: 28px 0 12px; }
    .x-body p { margin: 0 0 14px; color: #374151; }
    .x-body a { color: #7c3aed; text-decoration: underline; }
    .x-muted { color: #6b7280; font-size: 13px; }

    /* CTA button */
    .x-cta-wrap { margin: 24px 0; text-align: center; }
    .x-cta {
      display: inline-block;
      padding: 13px 28px;
      font: 600 15px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      color: #ffffff !important;
      background: #7c3aed;
      border-radius: 10px;
      text-decoration: none !important;
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
    }
    .x-cta:hover { background: #6d28d9; }

    /* OTP code block */
    .x-code {
      display: inline-block;
      padding: 18px 32px;
      font: 700 32px/1 'SFMono-Regular',Consolas,Menlo,monospace;
      letter-spacing: 0.45em;
      color: #5b21b6;
      background: #f5f3ff;
      border: 2px dashed #c4b5fd;
      border-radius: 12px;
    }

    /* Book row used in the digest */
    .x-book { padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
    .x-book:last-child { border-bottom: none; }
    .x-book-title { font: 600 16px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #111827; margin: 0 0 4px; }
    .x-book-meta  { font: 400 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #6b7280; }
    .x-book-desc  { font: 400 14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #374151; margin-top: 6px; }

    /* Footer */
    .x-foot { padding: 24px 32px 28px; background: #fafafa; text-align: center; border-top: 1px solid #f3f4f6; }
    .x-foot p { margin: 4px 0; font: 400 12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color: #9ca3af; }
    .x-foot a { color: #7c3aed; text-decoration: none; }

    /* Preheader — invisible to the user, visible to inbox preview */
    .x-preheader { display: none !important; visibility: hidden; opacity: 0; height: 0; width: 0; overflow: hidden; mso-hide: all; font-size: 1px; line-height: 1px; color: #f4f4f7; }

    /* Mobile */
    @media screen and (max-width: 600px) {
      .x-wrap  { padding: 16px 0; }
      .x-card  { border-radius: 0; }
      .x-hero  { padding: 20px 20px; }
      .x-body  { padding: 22px 20px; }
      .x-foot  { padding: 20px 20px 24px; }
      .x-body h1 { font-size: 22px; }
      .x-code  { font-size: 26px; letter-spacing: 0.35em; padding: 14px 20px; }
    }
  </style>
</head>
<body>
  <div class="x-preheader">{{preheader}}</div>
  <div class="x-wrap">
    <div class="x-card">
      <div class="x-hero">
        <div class="x-brand">Xania Bookstore</div>
        {{#if heroSubtitle}}<div class="x-brand-sub">{{heroSubtitle}}</div>{{/if}}
      </div>
      <div class="x-body">
        {{> @partial-block}}
      </div>
      <div class="x-foot">
        <p>Sent from Xania Bookstore · Nairobi, Kenya</p>
        <p>
          {{#if dashboardUrl}}<a href="{{dashboardUrl}}">Open dashboard</a> · {{/if}}
          {{#if preferencesUrl}}<a href="{{preferencesUrl}}">Email preferences</a> · {{/if}}
          <a href="{{baseUrl}}/help">Help</a>
        </p>
        <p>&copy; {{year}} Xania Bookstore. All rights reserved.</p>
      </div>
    </div>
  </div>
</body>
</html>
