/* ==========================================================================
   Digital products (storefront): "My downloads", the order confirmation card,
   the product page badge and file list, and the checkout "delivered by email"
   note. Built on the storefront tokens (--sf-*) from shop.css; every colour has
   a neutral fallback so the pages stay readable if a token is missing.
   ========================================================================== */

/* -- the buyer's list ------------------------------------------------------ */
.sf-dl-page{padding-block:clamp(22px,5vw,56px)}
.sf-dl-page h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:6px}
.sf-dl-lede{margin:0 0 18px;max-width:62ch}
.sf-dl-foot{margin:14px 0 0;font-size:.9rem}
.sf-dl-list{display:flex;flex-direction:column;gap:14px}
.sf-dl-item{
  padding:clamp(14px,3vw,20px);background:var(--sf-surface,#fff);border:1px solid var(--sf-border,#e4e7ec);
  border-radius:calc(var(--sf-radius,8px) + 2px);
}
.sf-dl-item--revoked,.sf-dl-item--expired{background:color-mix(in srgb,var(--sf-text,#101828) 3%,var(--sf-surface,#fff))}
.sf-dl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.sf-dl-title{min-width:0;flex:1 1 240px}
.sf-dl-title h3{margin:0;font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.sf-dl-title h3 a{color:inherit;text-decoration:none}
.sf-dl-title h3 a:hover{text-decoration:underline}
.sf-dl-variant{font-weight:400;color:var(--sf-muted,#475467);font-size:.92em}
.sf-dl-meta{margin:3px 0 0;font-size:.86rem;color:var(--sf-muted,#475467)}
.sf-dl-note{margin:10px 0 0;font-size:.9rem;color:var(--sf-muted,#475467)}
.sf-dl-note--err{color:#B42318}
.sf-dl-note--warn{color:#7A4A06}
.sf-dl-files{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sf-dl-file{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;
  padding:10px 12px;border:1px solid var(--sf-border,#e4e7ec);border-radius:var(--sf-radius,8px);background:var(--sf-bg,#fff);
}
.sf-dl-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:var(--sf-accent-soft,#eaf1fe);color:var(--sf-accent,#155eef);font-size:1.05rem;line-height:1}
.sf-dl-fname{min-width:0;display:flex;flex-direction:column}
.sf-dl-fname b{font-weight:600;overflow-wrap:anywhere}
.sf-dl-fmeta{font-size:.82rem;color:var(--sf-muted,#475467)}
.sf-dl-off{font-size:.86rem;font-weight:600;color:#B42318;white-space:nowrap}
.sf-body .sf-dl-get{white-space:nowrap}
.sf-dl-player{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.sf-dl-player audio{width:100%;max-width:520px}
.sf-dl-player video{width:100%;max-width:640px;max-height:60vh;background:#000;border-radius:var(--sf-radius,8px)}
.sf-dl-keys{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sf-dl-key{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;
  padding:10px 12px;border:1px solid var(--sf-border,#e4e7ec);border-radius:var(--sf-radius,8px);background:var(--sf-bg,#fff);
}
.sf-dl-keylabel{grid-column:1/-1;font-size:.8rem;font-weight:600;color:var(--sf-muted,#475467);text-transform:uppercase;letter-spacing:.04em}
.sf-dl-keyvalue{font-family:inherit;font-size:.98rem;font-weight:600;overflow-wrap:anywhere;user-select:all}
.sf-dl-waiting{
  display:flex;flex-direction:column;gap:2px;margin-top:14px;padding:12px 14px;border-radius:var(--sf-radius,8px);
  background:#FFFAEB;border:1px solid #FEDF89;color:#7A4A06;font-size:.92rem;
}
.sf-dl-unlock{margin-top:14px;padding:clamp(14px,3vw,20px);border:1px solid var(--sf-border,#e4e7ec);border-radius:calc(var(--sf-radius,8px) + 2px);background:var(--sf-surface,#fff)}
.sf-dl-unlock h3{margin:0 0 6px;font-size:1.05rem}
.sf-dl-unlock p{margin:0 0 10px}
.sf-dl-unlock-row{display:flex;gap:10px;flex-wrap:wrap}
.sf-dl-unlock-row .sf-input{flex:1 1 240px;min-width:0}
.sf-dl-empty h2{margin:0 0 6px}
.sf-dl-inline{margin-top:18px;padding-top:16px;border-top:1px solid var(--sf-border,#e4e7ec)}
.sf-dl-inline h3{margin:0 0 10px;font-size:1.05rem}
.sf-dl-conf .sf-dl-item{padding:12px}

/* -- link no longer works -------------------------------------------------- */
.sf-dl-gone{max-width:560px;margin:clamp(10px,4vw,48px) auto;padding:clamp(20px,5vw,36px);text-align:center;border:1px solid var(--sf-border,#e4e7ec);border-radius:calc(var(--sf-radius,8px) + 4px);background:var(--sf-surface,#fff)}
.sf-dl-gone-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:#FEF3F2;color:#B42318;font-size:1.6rem}
.sf-dl-gone h1{font-size:clamp(1.25rem,1.1rem + 1vw,1.6rem);margin-bottom:8px}
.sf-dl-gone-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* -- product page: badge, file list, sample --------------------------------- */
.sf-dl-badge{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px;border-radius:999px;
  background:var(--sf-accent-soft,#eaf1fe);color:var(--sf-accent,#155eef);font-size:.8rem;font-weight:700;letter-spacing:.01em;
}
.sf-dl-pdp{margin:16px 0;padding:14px 16px;border:1px solid var(--sf-border,#e4e7ec);border-radius:var(--sf-radius,8px);background:var(--sf-surface,#fff)}
.sf-dl-pdp h2{margin:0 0 8px;font-size:1rem}
.sf-dl-pdp ul{list-style:none;margin:0;padding:0}
.sf-dl-pdp li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--sf-border,#e4e7ec);font-size:.92rem}
.sf-dl-pdp li:first-child{border-top:0}
.sf-dl-pdp li span:last-child{color:var(--sf-muted,#475467);white-space:nowrap}
.sf-dl-pdp .sf-dl-formats{margin:8px 0 0;font-size:.86rem;color:var(--sf-muted,#475467)}
.sf-dl-pdp .sf-dl-sample{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.sf-dl-pdp-note{margin:8px 0 0;font-size:.84rem;color:var(--sf-muted,#475467)}

/* -- checkout: "delivered by email" ---------------------------------------- */
.co-digital{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--sf-radius,8px);border:1px solid var(--sf-accent,#155eef);background:var(--sf-accent-soft,#eaf1fe);color:var(--sf-text,#101828);font-size:.95rem;margin-bottom:12px}
.co-digital .co-muted{color:var(--sf-text,#101828);opacity:.78}

@media (max-width:560px){
  .sf-dl-file{grid-template-columns:auto minmax(0,1fr)}
  .sf-dl-file .sf-dl-get,.sf-dl-file .sf-dl-off{grid-column:1/-1}
  .sf-body .sf-dl-get{width:100%;justify-content:center}
  .sf-dl-key{grid-template-columns:1fr}
  .sf-dl-key .sf-btn{width:100%}
  .sf-dl-unlock-row .sf-btn{width:100%}
}
.sf-dl-badgeline{margin:6px 0 0}

/* Status pills: the confirmation page does not load account.css, so the few pill rules are repeated here. */
.sf-dl-item .sf-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em;line-height:1.4;white-space:nowrap;background:color-mix(in srgb,var(--sf-text,#101828) 7%,var(--sf-surface,#fff));color:var(--sf-text,#101828)}
.sf-dl-item .sf-pill--ok{background:#DCFAE6;color:#05603A}
.sf-dl-item .sf-pill--warn{background:#FEF0C7;color:#7A4A06}
.sf-dl-item .sf-pill--err{background:#FEE4E2;color:#B42318}
.sf-dl-keys .sf-btn,.sf-dl-file .sf-btn{min-height:44px}