/* Phase 6 — storefront presentation & reach. Two halves, one file, because they share the same
   promise: a customer can reach the shop, and reading about the shop never costs a page load.
   1) The shop's information pages — contact, questions, policies — and the merchant screen that
      writes them.
   2) The information strip and footer links that are the only way into those pages. */

/* Feature 14 — the shop's information pages. These are ordinary storefront pages: they inherit the
   store's theme, accent and font, and they only use the shared panel look for their cards. */
.info-page{max-width:900px;margin:0 auto}
.info-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.info-nav a{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border:1px solid var(--line,#e6ddcd);border-radius:999px;background:var(--surface,#fff);color:var(--ink,#211d18);font-size:.85rem;font-weight:600;text-decoration:none}
.info-nav a:hover{border-color:var(--accent,#21503e);color:var(--accent,#21503e)}
.info-nav a[aria-current="page"]{background:var(--accent,#21503e);border-color:var(--accent,#21503e);color:var(--accent-text,#fff)}
.info-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:16px}
.info-card{margin-bottom:16px}
.info-card h3{margin:0 0 12px;font-size:1rem;letter-spacing:.01em}
.info-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.info-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;word-break:break-word}
.info-list li>span[aria-hidden]{flex:0 0 auto;width:1.3em;text-align:center;color:var(--accent,#21503e)}
.info-list a{color:var(--ink,#211d18)}
.info-list.compact{gap:8px;margin-bottom:0}
.info-list.compact li{align-items:center}
.hours-table{width:100%;border-collapse:collapse;font-size:.9rem}
.hours-table th,.hours-table td{padding:7px 0;border-bottom:1px solid var(--line,#e6ddcd);text-align:left;font-weight:500}
.hours-table th{color:var(--muted,#78705f);font-weight:600;width:45%}
.hours-table tr:last-child th,.hours-table tr:last-child td{border-bottom:0}
.hours-table tr.closed td{color:var(--muted,#78705f)}
.faq-list{margin:0 0 16px}
.faq-list dt{margin:0 0 4px;font-weight:600;line-height:1.45}
.faq-list dd{margin:0 0 16px;padding:0;color:var(--muted,#78705f);line-height:1.6}
.faq-page-list dt{font-size:1.02rem}
.faq-page-list dd{color:var(--ink,#211d18)}
.policy-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.policy-links a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--line,#e6ddcd);border-radius:10px;text-decoration:none;font-size:.88rem;font-weight:600}
.policy-links-title{margin:0 0 10px;font-size:.95rem}
.policy-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:16px}
.policy-card h3{margin:0 0 8px}
.policy-card p{margin:0 0 14px;color:var(--muted,#78705f);line-height:1.55;font-size:.9rem}
.policy-body h1{margin:0 0 6px}
.prose{margin-top:16px;line-height:1.7}
.info-cta ul{margin-bottom:0}
.info-back{margin:8px 0 0;font-size:.88rem}
.footer-info-links{display:inline-flex;flex-wrap:wrap;gap:12px;margin:0}
.footer-info-links a{display:inline-flex;align-items:center;min-height:44px}

/* Feature 14 — the merchant screen. The form is a stack of panels: one for where the shop is, one for
   its policies, one for its questions. Textareas are plain text on purpose — merchants write policy
   text, and a rich-text editor would let them paste markup that this shop will never render. */
.trust-form{display:grid;gap:16px}
.trust-summary{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0 0 12px}
.trust-summary dt{color:var(--muted,#78705f);font-size:.85rem;font-weight:600}
.trust-summary dd{margin:0;font-size:.9rem;word-break:break-word}
.policy-editor{padding:14px 0;border-top:1px solid var(--line,#e6ddcd)}
.policy-editor:first-of-type{border-top:0;padding-top:4px}
.policy-editor-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.policy-editor-head h3{margin:0;font-size:.95rem}
.policy-editor textarea,.policy-editor input[type="text"]{width:100%}
.faq-editor{display:grid;gap:14px}
.faq-row{display:grid;gap:8px;padding:14px;border:1px solid var(--line,#e6ddcd);border-radius:12px;background:var(--surface,#fff)}
.faq-row .switch{align-self:start}
.trust-save{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trust-preview-links{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.trust-preview-links a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--line,#e6ddcd);border-radius:10px;font-size:.88rem;font-weight:600;text-decoration:none}
.trust-preview-links a:hover{border-color:var(--brand,#21503e)}

/* A small labelled checkbox, used for policy and question visibility. Big enough to hit on a phone,
   and the label is the control, so tapping the words works too. */
.switch{display:inline-flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--muted,#78705f)}
.switch input{width:20px;height:20px;margin:0;accent-color:var(--brand,#21503e);flex:0 0 auto}

@media (max-width:640px){
  .hours-table th{width:38%}
  .policy-links a,.info-nav a{width:100%;justify-content:center}
}