/* Shared styles for the MERGE public pages — About, Contact, Terms,
   Privacy, Shipping, Returns. Loaded by each of them so there is one
   stylesheet to change rather than six copies.

   The brand faces are served from /fonts; the palette is the store's own,
   with a warm dark variant for viewers whose system asks for one. */

  @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;
    src:url('/fonts/cormorant-latin.woff2') format('woff2');}
  @font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
    src:url('/fonts/jost-latin.woff2') format('woff2');}

  :root{
    --sand:#F6F1EC; --linen:#E4DBD3; --taupe:#C9B8AC; --mocha:#735C4D;
    --espresso:#2A2521; --matcha:#7D8F6A;

    --page:#EDE6E0;
    --surface:#FBF8F4;
    --ink:#2A2521;
    /* Darker than the brand mocha so small grey text keeps 4.5:1 against
       the page (WCAG AA); the shop uses the same value. */
    --muted:#735C4D;
    --hairline:rgba(42,37,33,.14);
    --hairline-soft:rgba(42,37,33,.07);
    --accent:#5F6F4D;

    --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --font-ui:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --radius:10px;
    --radius-card:18px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --page:#191614; --surface:#221E1B; --ink:#F2ECE5; --muted:#BFAD9E;
      --hairline:rgba(246,241,236,.16); --hairline-soft:rgba(246,241,236,.08);
      --accent:#A6B58C;
    }
  }
  :root[data-theme="dark"]{
    --page:#191614; --surface:#221E1B; --ink:#F2ECE5; --muted:#BFAD9E;
    --hairline:rgba(246,241,236,.16); --hairline-soft:rgba(246,241,236,.08);
    --accent:#A6B58C;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    background:var(--page);color:var(--ink);
    font-family:var(--font-ui);font-weight:300;font-size:16px;line-height:1.7;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }

  /* ── Masthead ─────────────────────────────────────────────── */
  .top{
    border-bottom:1px solid var(--hairline-soft);
    background:var(--page);position:sticky;top:0;z-index:10;
    backdrop-filter:blur(8px);
  }
  .top__in{
    max-width:1080px;margin:0 auto;padding:18px 24px;
    display:flex;align-items:baseline;gap:16px;
  }
  .wordmark{
    font-family:var(--font-display);font-size:26px;font-weight:500;
    letter-spacing:.22em;color:var(--ink);text-decoration:none;
  }
  .top__tag{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  }
  .top__back{
    margin-inline-start:auto;font-size:12px;letter-spacing:.08em;color:var(--muted);
    text-decoration:none;border-bottom:1px solid transparent;
  }
  .top__back:hover,.top__back:focus-visible{color:var(--ink);border-bottom-color:var(--hairline)}
  .top__lang{
    font-size:12px;color:var(--muted);text-decoration:none;
    border:1px solid var(--hairline);border-radius:999px;padding:3px 12px;
  }
  .top__lang:hover,.top__lang:focus-visible{color:var(--ink);border-color:var(--taupe)}
  @media (max-width:420px){.top__tag{display:none}}

  /* ── Layout ───────────────────────────────────────────────── */
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px 88px}
  .lede{padding:56px 0 34px;border-bottom:1px solid var(--hairline-soft)}
  .lede h1{
    font-family:var(--font-display);font-weight:500;
    font-size:clamp(38px,7vw,60px);line-height:1.02;letter-spacing:-.01em;
    text-wrap:balance;margin-bottom:14px;
  }
  .lede p{max-width:62ch;color:var(--muted);font-size:16px}
  .meta{
    display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;
    font-size:12px;letter-spacing:.06em;color:var(--muted);
  }
  .meta b{color:var(--ink);font-weight:500}

  /* minmax(0,1fr), not 1fr: a plain 1fr column grows to its widest child,
     so the delivery table (min-width 420px) pushed a phone page sideways
     instead of scrolling inside its own frame. */
  .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-top:44px}
  @media (min-width:940px){
    .cols{grid-template-columns:228px minmax(0,1fr);gap:56px}
  }

  /* ── Contents ─────────────────────────────────────────────── */
  .toc{align-self:start}
  @media (min-width:940px){.toc{position:sticky;top:96px}}
  .toc__h{
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--hairline-soft);
  }
  .toc ol{list-style:none;display:flex;flex-direction:column;gap:1px}
  .toc a{
    display:flex;gap:10px;text-decoration:none;color:var(--muted);
    font-size:13.5px;line-height:1.45;padding:5px 0;
  }
  .toc a:hover,.toc a:focus-visible{color:var(--ink)}
  .toc .n{
    font-variant-numeric:tabular-nums;color:var(--muted);min-width:16px;
  }

  /* ── Body ─────────────────────────────────────────────────── */
  .doc{max-width:68ch}
  section{padding-bottom:36px}
  section+section{border-top:1px solid var(--hairline-soft);padding-top:34px}
  h2{
    font-family:var(--font-display);font-weight:500;font-size:27px;line-height:1.18;
    letter-spacing:-.005em;margin-bottom:14px;text-wrap:balance;
    display:flex;gap:14px;align-items:baseline;
  }
  h2 .n{
    font-family:var(--font-ui);font-size:11px;font-weight:500;letter-spacing:.14em;
    color:var(--accent);font-variant-numeric:tabular-nums;
    padding-top:6px;flex:0 0 auto;
  }
  h3{
    font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin:22px 0 8px;
  }
  p{margin-bottom:14px}
  p:last-child{margin-bottom:0}
  .doc ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
  .doc ul li{padding-inline-start:20px;position:relative}
  .doc ul li::before{
    content:'';position:absolute;inset-inline-start:2px;top:.72em;
    width:5px;height:1px;background:var(--taupe);
  }
  a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--taupe);
    text-underline-offset:3px}
  a:hover,a:focus-visible{text-decoration-color:var(--accent)}
  strong{font-weight:500}

  /* ── Contact card ─────────────────────────────────────────── */
  .card{
    background:var(--surface);border:1px solid var(--hairline);
    border-radius:var(--radius-card);padding:24px 26px;margin-top:6px;
  }
  .card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:15px}
  .card dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px}
  .card dd{color:var(--ink)}

  .note{
    border-inline-start:2px solid var(--accent);background:var(--surface);
    border-radius:0 var(--radius) var(--radius) 0;
    padding:14px 18px;margin:16px 0;font-size:15px;color:var(--muted);
  }
  .note b{color:var(--ink);font-weight:500}

  .foot{
    border-top:1px solid var(--hairline-soft);margin-top:8px;padding-top:26px;
    display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;
    font-size:12px;letter-spacing:.06em;color:var(--muted);
  }
  .foot .mark{font-family:var(--font-display);font-size:17px;letter-spacing:.2em;color:var(--ink)}

  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ── Additions for the other public pages ──────────────────── */

/* The hidden attribute must beat the layout rules below: .rows__r sets
   display:grid, and an author display rule overrides the UA's [hidden]. */
[hidden]{display:none !important}

/* A value that the admin has not filled in yet. */
[data-empty]{color:var(--muted);font-style:italic}

/* Definition-style rows used by Contact and About. */
.rows{display:flex;flex-direction:column;gap:0}
.rows__r{
  display:grid;grid-template-columns:160px minmax(0,1fr);gap:6px 22px;
  padding:13px 0;border-top:1px solid var(--hairline-soft);align-items:baseline;
}
.rows__r:first-child{border-top:none}
.rows__k{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.rows__v{color:var(--ink)}
@media (max-width:560px){
  .rows__r{grid-template-columns:1fr;gap:2px}
}

/* Tables (delivery timelines, shipping rates). */
.tablewrap{overflow-x:auto;margin:6px 0 16px;
  border:1px solid var(--hairline);border-radius:var(--radius-card)}
table.t{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
table.t th,table.t td{
  text-align:start;padding:12px 16px;border-bottom:1px solid var(--hairline-soft);
}
table.t thead th{
  background:var(--surface);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}
table.t tbody tr:last-child td{border-bottom:none}
table.t td:last-child,table.t th:last-child{font-variant-numeric:tabular-nums}

/* Cross-links between the policy pages. */
.pagelinks{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;
}
.pagelinks a{
  font-size:13px;letter-spacing:.04em;text-decoration:none;color:var(--muted);
  border:1px solid var(--hairline);border-radius:var(--radius-pill,999px);
  padding:7px 15px;
}
.pagelinks a:hover,.pagelinks a:focus-visible{color:var(--ink);border-color:var(--taupe)}

/* ── Arabic ────────────────────────────────────────────────────────────
   The Arabic twins under /ar/ use the same markup with dir="rtl"; the
   layout is written with logical properties so it mirrors by itself. What
   is left is typography: the brand faces carry no Arabic, so the system's
   Arabic face is used, at a weight it actually has, and the wide tracking
   on small capitals is dropped — Arabic letters join and must not be
   spaced apart. */
[lang='ar'] body{font-weight:400;line-height:1.85}
[lang='ar'] .top__tag,[lang='ar'] .toc__h,[lang='ar'] .meta,[lang='ar'] .rows__k,
[lang='ar'] h3,[lang='ar'] .card dt,[lang='ar'] table.t thead th,[lang='ar'] .foot,
[lang='ar'] .top__back,[lang='ar'] .pagelinks a{letter-spacing:0}
[lang='ar'] .top__tag{font-size:12px}
[lang='ar'] h1,[lang='ar'] h2{font-weight:600;letter-spacing:0}
[lang='ar'] h1{line-height:1.25}
[lang='ar'] .wordmark,[lang='ar'] .foot .mark{direction:ltr}
[dir='rtl'] .note{border-radius:var(--radius) 0 0 var(--radius)}