/* ============================================================
   One of the shop's own pages (page.html, assets/js/page.js): an FAQ, the terms, about the shop… written in the
   admin's Website → Custom. Its colours are the shop's tokens, so the dark theme (tools/store-dark) follows.
   ============================================================ */
.pg-main{min-height:62vh}
.pg{max-width:1160px;margin:14px auto 0;animation:pg-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes pg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pg[hidden],.pg-gone[hidden],.pg-more[hidden],.pg-toc[hidden]{display:none}

/* its head: the icon, the title, the line under it and when it was last changed */
.pg-head{position:relative;display:flex;align-items:flex-start;gap:20px;padding:34px 36px;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  background:radial-gradient(90% 150% at 100% 0%,var(--brand-soft) 0%,transparent 62%),var(--card);overflow:hidden}
html[dir="rtl"] .pg-head{background:radial-gradient(90% 150% at 0% 0%,var(--brand-soft) 0%,transparent 62%),var(--card)}
.pg-ic{width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:18px;background:var(--brand);color:rgb(255 255 255);font-size:27px;
  box-shadow:0 14px 28px -14px color-mix(in srgb,var(--brand) 85%,transparent)}
.pg-ic:empty{background:var(--line-soft);box-shadow:none}
.pg-head-copy{min-width:0;flex:1}
.pg-head h1{font-size:clamp(26px,3.3vw,40px);line-height:1.1;color:var(--ink);overflow-wrap:anywhere}
.pg-head h1:empty{width:min(320px,70%);height:36px;border-radius:10px;background:var(--line-soft)}
.pg-intro{margin:12px 0 0;max-width:720px;font-size:15.5px;line-height:1.6;color:var(--sub)}
.pg-when{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;font-size:12px;color:var(--muted)}
.pg-when::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* the body, with On this page beside it when it has two big headings or more */
.pg-layout{margin-top:28px}
.pg-layout.has-toc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
.pg-toc{position:sticky;top:calc(var(--hdr-h,0px) + 20px);padding:16px 12px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--card);transition:top .38s cubic-bezier(.3,.9,.3,1)}
.pg-toc-t{display:block;margin:0 10px 8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pg-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.pg-toc a{display:block;padding:8px 10px;border-inline-start:2px solid transparent;border-radius:10px;font-size:13px;line-height:1.35;color:var(--sub);transition:background .2s,color .2s,border-color .2s}
.pg-toc a:hover{background:var(--bg);color:var(--ink)}
.pg-toc a.is-on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.pg-body{max-width:800px;min-width:0;font-size:15px;line-height:1.75;color:var(--sub)}
.pg-body > * + *{margin-top:18px}
.pg-body > :first-child{margin-top:0}
.pg-body a:not(.btn){color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pg-body a:not(.btn):hover{color:var(--brand-dark)}
.pg-body b{color:var(--ink);font-weight:650}
.pg-h{scroll-margin-top:calc(var(--hdr-h,0px) + 24px);color:var(--ink);overflow-wrap:anywhere}
.pg-body > h2.pg-h{margin-top:44px;font-size:23px;line-height:1.25}
.pg-body > h3.pg-h{margin-top:30px;font-size:17px;line-height:1.3}
.pg-body > .pg-h:first-child{margin-top:0}
.pg-body > .pg-h + *{margin-top:12px}
.pg-text p{margin:0}
.pg-text p + p{margin-top:14px}
.pg-empty{margin:0;padding:40px 0;text-align:center;color:var(--muted)}

/* lists: dots, numbers or ticks */
.pg-list{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px}
.pg-list li::marker{color:var(--brand);font-weight:700}
.pg-list.is-tick{padding:0;list-style:none}
.pg-list.is-tick li{display:flex;align-items:flex-start;gap:10px}
.pg-list.is-tick i{width:22px;height:22px;flex:none;display:grid;place-items:center;margin-top:3px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:14px}

/* questions: each opens to its answer */
.pg-faq{display:flex;flex-direction:column;gap:10px}
.pg-q{border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:border-color .2s,box-shadow .25s}
.pg-q:hover{border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.pg-q[open]{border-color:color-mix(in srgb,var(--brand) 38%,var(--line));box-shadow:var(--shadow-sm)}
.pg-q[hidden]{display:none}
.pg-q summary{display:flex;align-items:center;gap:14px;padding:16px 18px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink);border-radius:var(--r)}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pg-q summary > span{flex:1;min-width:0}
.pg-q-plus{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--bg);transition:background .2s}
.pg-q-plus::before,.pg-q-plus::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .2s}
.pg-q-plus::after{transform:rotate(90deg)}
.pg-q[open]:not(.is-closing) .pg-q-plus{background:var(--brand)}
.pg-q[open]:not(.is-closing) .pg-q-plus::before,.pg-q[open]:not(.is-closing) .pg-q-plus::after{background:rgb(255 255 255)}
.pg-q[open]:not(.is-closing) .pg-q-plus::after{transform:rotate(0deg)}
.pg-a{overflow:hidden}
.pg-a-in{padding:0 18px 18px;color:var(--sub)}
.pg-a-in p{margin:0}
.pg-a-in p + p{margin-top:10px}
/* finding one */
.pg-find{display:flex;align-items:center;gap:10px;height:50px;padding-inline:18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.pg-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.pg-find i{font-size:18px}
.pg-find input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:14.5px;color:var(--ink)}
.pg-none{margin:0;padding:18px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;font-size:13.5px;color:var(--muted)}
.pg-none[hidden]{display:none}

/* a picture, a button, a notice, a line */
.pg-fig{margin:0}
.pg-fig img{max-width:100%;height:auto;border:1px solid var(--line-soft);border-radius:var(--r-lg)}
.pg-fig.is-wide img{width:100%}
.pg-fig figcaption{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.pg-btn{margin:0}
.pg-body > .pg-btn{margin-top:22px}
.pg-note{display:flex;gap:12px;padding:16px 18px;border:1px solid;border-radius:var(--r);font-size:14.5px;line-height:1.6;color:var(--ink)}
.pg-note i{flex:none;margin-top:1px;font-size:20px}
.pg-note p{margin:0}
.pg-note p + p{margin-top:8px}
.pg-note.is-info{border-color:color-mix(in srgb,var(--brand) 26%,var(--line));background:color-mix(in srgb,var(--brand) 7%,var(--card))}
.pg-note.is-info i{color:var(--brand)}
.pg-note.is-ok{border-color:color-mix(in srgb,var(--ok) 30%,var(--line));background:color-mix(in srgb,var(--ok) 9%,var(--card))}
.pg-note.is-ok i{color:var(--ok)}
.pg-note.is-warn{border-color:color-mix(in srgb,var(--gold) 40%,var(--line));background:color-mix(in srgb,var(--gold) 12%,var(--card))}
.pg-note.is-warn i{color:var(--gold)}
.pg-hr{height:1px;margin:30px 0;border:0;background:var(--line)}
.pg-body > .pg-hr{margin-top:30px}

/* the shop's contact details */
.pg-contact{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pg-ct{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s}
a.pg-ct:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:var(--shadow-sm)}
.pg-ct-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--brand-soft);color:var(--brand);font-size:19px}
.pg-ct-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.pg-ct-t small{font-size:11.5px;color:var(--muted)}
.pg-ct-t b{font-size:14px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}

/* an address the shop has no page for */
.pg-gone{max-width:520px;margin:70px auto 0;text-align:center;animation:pg-in .45s cubic-bezier(.2,.8,.2,1) both}
.pg-gone-ic{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 18px;border-radius:22px;background:var(--brand-soft);color:var(--brand);font-size:32px}
.pg-gone h1{font-size:28px;color:var(--ink)}
.pg-gone p{margin:10px 0 22px;font-size:15px;line-height:1.6;color:var(--sub)}

/* the shop's other pages */
.pg-more{max-width:1160px;margin-inline:auto}
.pg-more-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pg-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-weight:600;color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s}
.pg-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:var(--shadow-sm)}
.pg-card-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-size:17px}
.pg-card .ico{margin-inline-start:auto;color:var(--muted);transition:transform .2s cubic-bezier(.2,.8,.3,1),color .2s}
.pg-card:hover .ico{color:var(--brand);transform:translateX(calc(3px * var(--x)))}

@media (max-width:900px){
  /* On this page becomes a row of chips that scrolls sideways */
  .pg-layout.has-toc{display:block}
  .pg-toc{position:static;display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:0;border:0;background:none}
  .pg-toc-t{flex:none;margin:0}
  .pg-toc ol{flex-direction:row;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,rgb(0 0 0) 88%,transparent)}
  html[dir="rtl"] .pg-toc ol{-webkit-mask-image:linear-gradient(270deg,rgb(0 0 0) 88%,transparent)}
  .pg-toc ol::-webkit-scrollbar{display:none}
  .pg-toc li{flex:none}
  .pg-toc a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
  .pg-toc a.is-on{border-color:var(--brand)}
}
@media (max-width:640px){
  .pg-head{flex-direction:column;gap:16px;padding:24px 20px;border-radius:var(--r-lg)}
  .pg-ic{width:50px;height:50px;border-radius:15px;font-size:23px}
  .pg-body{font-size:14.5px}
  .pg-body > h2.pg-h{margin-top:36px;font-size:20px}
  .pg-q summary{padding:14px 15px;font-size:14.5px}
  .pg-a-in{padding:0 15px 15px}
}
@media (prefers-reduced-motion:reduce){
  .pg,.pg-gone{animation:none}
  .pg-q-plus::before,.pg-q-plus::after,.pg-card,.pg-ct,.pg-card .ico{transition:none}
}