/* Muslim Undertaker shop. Same ground as the live booklet (muslimundertaker.com): the dark
   green-black page, the gold accent, Cormorant Garamond for display and Archivo for text,
   uppercase display headings, 1px rules, no radius, no shadow, no gradient. The shop is the
   calmer, quieter room of that house: forms and receipts, read by families on a phone.
   Contrast (WCAG): ink 15.9:1, read 12.9:1, muted 8.3:1, gold 8.0:1 on --bg; field borders
   5.1:1 (finding 100); the error colour 8.6:1. 8px grid. Fonts are self-hosted (OFL,
   public/fonts/OFL.txt): no request leaves Cloudflare for them. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a0e0c;
  --surface: #121815;
  --surface-2: #1a211d;
  --line: #26302b;
  --line-2: #3a4640;
  --field: #7a857e;
  --ink: #ece8de;
  --read: #d6d2c7;
  --muted: #a7aba2;
  --gold: #c9a063;
  --gold-hover: #d8b57e;
  --gold-ink: #0a0e0c;
  --danger: #e59a86;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space: 8px;
  --measure: 38rem;
  --page: 1080px;
  --tabbar: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  overflow-wrap: break-word;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }
svg.i {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 calc(var(--space) * 2);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.4rem; }

.skip {
  position: absolute;
  left: var(--space);
  top: -48px;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 8px 12px;
  z-index: 50;
}
.skip:focus { top: var(--space); }

.wrap {
  width: min(var(--page), calc(100% - 48px));
  margin-inline: auto;
}
.view { padding: 48px 0 80px; }

.kicker {
  margin: 0 0 16px;
  font: 600 11.5px/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lede { max-width: var(--measure); color: var(--read); margin: 0; font-size: 17px; }
.muted { color: var(--muted); font-size: 14px; }

/* Buttons: gold for the one thing to do, a quiet outline for the rest (as in the booklet). */
.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--gold-ink);
  font: 600 13px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
.btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--gold-ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { color: var(--ink); border-color: var(--gold); background: transparent; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.btn[aria-busy="true"]::after { content: " · working"; letter-spacing: 0.06em; }

/* Visible focus everywhere: a 2px gold ring clear of the element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Header: the brand mark goes back to the booklet; Shop is the first link. */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 0;
}
.mark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
  min-height: 44px;
  justify-content: center;
}
.mark b {
  font: 600 18px/1 var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mark small {
  margin-top: 6px;
  font: 500 9.5px/1 var(--sans);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}
.topnav { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.topnav a {
  padding: 10px 12px;
  text-decoration: none;
  font: 500 13px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.topr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.topr form { margin: 0; }
.top .btn { min-height: 44px; padding: 10px 16px; font-size: 12px; white-space: nowrap; }

/* Phone tab bar, like the booklet's: Shop, Cart, Orders, Call always one tap away. */
.tabbar { display: none; }

.rule {
  height: 1px;
  background: var(--line);
  margin: 40px 0;
  position: relative;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  background: var(--bg);
  transform: rotate(45deg);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 0.7fr);
  gap: 32px 56px;
  align-items: start;
}
.note {
  border-left: 1px solid var(--line-2);
  padding: 8px 0 8px 20px;
  color: var(--read);
  font-size: 15px;
}
.note p { margin: 0 0 12px; }
.note p:last-child { margin-bottom: 0; }
.note a, .prose a, .policy a, .foot a, .auth-col a, .lede a, .muted a, .urgent a { color: var(--gold); text-decoration: underline; }
.note a:hover, .prose a:hover, .policy a:hover, .foot a:hover, .auth-col a:hover, .lede a:hover, .muted a:hover, .urgent a:hover { color: var(--gold-hover); }
.ph {
  display: inline;
  color: var(--gold);
  border: 1px dashed rgba(201, 160, 99, 0.7);
  padding: 0 6px;
  font-style: normal;
}
a.phone { color: var(--gold); text-decoration: underline; font-weight: 600; }

/* Catalogue: an editorial list, a photograph frame beside each row. */
.catalogue { list-style: none; margin: 0; padding: 0; }
.catalogue li { border-bottom: 1px solid var(--line); }
.catalogue li:first-child { border-top: 1px solid var(--line); }
.catalogue a {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px 32px;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
}
.catalogue a:hover h2 { color: var(--gold); }
.catalogue h2 { font-size: 1.6rem; margin: 0 0 8px; }

/* Photograph frames keep their ratio before the photo loads (no layout jump). */
.frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.frame-page { aspect-ratio: 4 / 5; }
.ph-img {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ph-mark {
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
}
.frame-empty { background: var(--bg); border-style: dashed; border-color: var(--line-2); }

.price {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
  margin-top: 16px;
}
.product .lede { margin-top: 16px; }
.buy { margin-top: 32px; }

/* Forms: boxed fields with a border that can be seen (5.1:1). */
.form, .product form, .qty {
  display: grid;
  gap: 16px;
  max-width: 28rem;
}
label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--read);
  letter-spacing: 0.04em;
}
input, textarea, select {
  font: 16px/1.4 var(--sans);
  padding: 12px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field);
  border-radius: 0;
  width: 100%;
  min-height: 48px;
}
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
input[readonly] { color: var(--muted); }
textarea { resize: vertical; }
input[type="file"] { padding: 10px; }
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0;
}
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--gold); }
.cf-turnstile { min-height: 0; }

/* Tables (orders, the desk's lists). On phones each row becomes a card (finding 48). */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th {
  font: 600 11px/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.table td .muted { overflow-wrap: anywhere; }
.tag {
  display: inline-block;
  margin-left: 8px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.total {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  margin: 24px 0;
}

.banner {
  max-width: var(--measure);
  margin: 0 0 32px;
  padding: 12px 16px;
  border: 0;
  border-left: 2px solid var(--gold);
  background: var(--surface);
  color: var(--ink);
}
.banner.err { border-left-color: var(--danger); color: var(--danger); }
.banner.ok { border-left-color: var(--gold); }

.empty { max-width: var(--measure); }
.empty .btn { margin-top: 24px; }

.stack { display: grid; gap: 0; max-width: var(--measure); padding: 0; margin: 24px 0; }
.stack li { list-style: none; padding: 12px 0; border-bottom: 1px solid var(--line); }

.auth-col { max-width: 28rem; }
.auth-col p { color: var(--read); }

/* "Continue with Google" (P8): Google's dark-theme sign-in button (fill #131314, 1px #8E918F
   border, #E3E3E3 label, 4px corners) with the official G mark; the label is set in the
   shop's self-hosted Archivo. Then a quiet "or" rule above the email form. */
.gsi { margin: 8px 0 0; max-width: 28rem; }
.gsi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: #131314;
  color: #e3e3e3;
  border: 1px solid #8e918f;
  border-radius: 4px;
  font: 500 15px/1.2 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
}
.gsi-btn:hover { background: #2a2a2b; }
.gsi-btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.gsi-mark { width: 20px; height: 20px; flex: none; }
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 28rem;
  margin: 24px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-col .or { color: var(--muted); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gap-top { margin-top: 24px; }
.gap-top-sm { margin-top: 12px; }
.inline { display: inline; }

details summary { cursor: pointer; color: var(--read); }
details[open] summary { margin-bottom: 8px; }

.foot {
  padding: 8px 0 48px;
  color: var(--muted);
  font-size: 13.5px;
}
.foot p { margin: 0 0 8px; max-width: var(--measure); }
.foot .urgent { color: var(--ink); font-size: 15.5px; margin-bottom: 16px; }
.footnav { margin: 0 0 8px; line-height: 2.2; }

/* The desk: smaller sans headings, dense tables, no marketing chrome. */
.is-admin .view { padding-top: 32px; }
.is-admin h1 {
  font-family: var(--sans);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.is-admin .table td { padding: 12px 12px 12px 0; font-size: 14px; }
.mini {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.qty { grid-template-columns: 88px max-content; align-items: end; max-width: none; }
.qty input { padding: 8px 10px; }
.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.lines li {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto auto;
  gap: 16px 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
/* The flex box is a div inside the cell: a flex <td> stops being a table cell, and its
   bottom border then sits off the rest of the row. Padding keeps the 44px targets' text on
   the same line as the row's other cells. */
.row-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.row-actions form { margin: 0; }
.table td.actions-cell { padding-top: 1px; padding-bottom: 1px; }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cart, order and desk details. */
.prose p { margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.sums { margin: 16px 0 0; }
.sums li { display: flex; justify-content: space-between; gap: 16px; }
.line-problem { color: var(--danger); margin: 8px 0 0; font-size: 14px; }
.lines li[data-problem] { border-left: 2px solid var(--danger); padding-left: 12px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0 0 24px; max-width: var(--measure); }
.facts dt { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
[data-testid="order-filters"] a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }

/* Policy pages. */
.policy { max-width: var(--measure); }
.policy h2 { font-size: 1.3rem; margin: 32px 0 8px; }
.policy p { color: var(--read); margin: 0 0 12px; overflow-wrap: anywhere; }
.policy .stack li { color: var(--read); }
.policy-others { margin-top: 32px; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .view { padding: 28px 0 48px; }
  .top .wrap { padding: 10px 0; }
  .topnav, .top .btn.call, .top .wide-only { display: none; }
  .mark b { font-size: 15px; letter-spacing: 0.14em; white-space: nowrap; }
  .mark small { font-size: 9px; letter-spacing: 0.32em; }
  .intro, .product { grid-template-columns: 1fr; }
  .intro { gap: 24px; }
  .note { border-left: 0; padding: 20px 0 4px; border-top: 1px solid var(--line); }

  /* Catalogue rows: a small frame beside the words, not a full-width empty box. */
  .catalogue a { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; align-items: start; }
  .catalogue h2 { font-size: 1.3rem; }
  .catalogue .frame-empty .ph-img > span:last-child { display: none; }
  .catalogue .kicker .tag { display: block; margin: 4px 0 0; }
  .product { gap: 24px; }
  .product .frame-page { aspect-ratio: 4 / 3; }
  .product .frame-empty { aspect-ratio: auto; height: 88px; }
  .product .frame-empty .ph-img { flex-direction: row; }

  .lines li { grid-template-columns: 1fr auto; }
  .lines .qty { grid-column: 1 / -1; }

  .table.cards, .table.cards tbody, .table.cards tr, .table.cards td { display: block; width: 100%; }
  .table.cards thead { display: none; }
  .table.cards tr { border: 1px solid var(--line); background: var(--surface); padding: 12px 16px; margin: 0 0 12px; }
  /* Label in a fixed left column, the cell's own content (links, tags, line breaks) untouched beside it. */
  .table.cards td {
    position: relative;
    padding: 6px 0 6px 6.75rem;
    border: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  .table.cards td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 6px;
    width: 6.25rem;
    color: var(--muted);
    font: 600 11px/1.9 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .table.cards td[data-label=""] { padding-left: 0; }
  .table.cards td[data-label=""]::before { content: none; }

  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: #0e1311;
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--tabbar);
    text-decoration: none;
    font: 600 10.5px/1.1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tabbar a[aria-current="page"] { color: var(--gold); }
  .tabbar a.call { color: var(--ink); }
  .tabbar a.call svg { color: var(--gold); }
  body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}