/* ============================================================
   components.css — shared components for all pages
   ============================================================ */

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--normal), box-shadow var(--normal), background var(--normal);
}
.site-header.is-scrolled{border-bottom-color:var(--border);box-shadow:var(--sh-sm)}
.site-header__in{
  max-width:var(--maxw);margin-inline:auto;padding:12px var(--s5);
  display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--t-lg);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:32px;height:32px;flex:0 0 auto;color:var(--primary)}
.brand small{display:block;font-family:var(--font-mono);font-weight:400;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);margin-top:1px}

.main-nav{display:flex;align-items:center;gap:2px;margin-left:var(--s4)}
.main-nav a,.main-nav .nav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-sm);font-weight:var(--fw-medium);color:var(--text-muted);
  padding:8px 12px;border-radius:var(--r-md);background:none;border:0;cursor:pointer;
  transition:color var(--fast),background var(--fast);
}
.main-nav a:hover,.main-nav .nav-trigger:hover{color:var(--text);background:var(--bg-sunken);text-decoration:none}
.main-nav a[aria-current="page"]{color:var(--primary)}
.main-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.header-tools{display:flex;align-items:center;gap:var(--s3);margin-left:auto}

/* dropdown */
.nav-dropdown{position:relative}
.nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.chev{transition:transform var(--fast)}
.dropdown-panel{
  position:absolute;top:calc(100% + 8px);left:0;width:340px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:var(--s2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fast),transform var(--fast),visibility var(--fast);
}
.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel,.dropdown-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:flex;gap:12px;padding:10px 12px;border-radius:var(--r-md);align-items:flex-start}
.dropdown-item:hover{background:var(--bg-sunken);text-decoration:none}
.dropdown-item .di-ico{width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.dropdown-item .di-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dropdown-item b{display:flex;align-items:center;gap:8px;color:var(--text);font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--t-sm)}
.dropdown-item span{color:var(--text-muted);font-size:var(--t-xs);display:block;margin-top:2px}

/* lang switcher + theme toggle */
.lang-switch{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:var(--t-xs);border:1px solid var(--border);border-radius:var(--r-full);padding:3px;background:var(--surface)}
.lang-switch a{padding:3px 9px;border-radius:var(--r-full);color:var(--text-subtle)}
.lang-switch a:hover{text-decoration:none;color:var(--text)}
.lang-switch a[aria-current="true"]{background:var(--primary);color:var(--on-primary)}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:var(--fast);
}
.icon-btn:hover{border-color:var(--border-strong);box-shadow:var(--sh-sm)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme="light"] .i-sun{display:none}
[data-theme="dark"] .i-moon{display:none}

/* hamburger + mobile drawer */
.nav-toggle{display:none}
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,17,32,.5);opacity:0;visibility:hidden;transition:var(--fast);z-index:150}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.mobile-drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(360px,86vw);z-index:160;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--sh-xl);
  transform:translateX(100%);transition:transform var(--normal);
  display:flex;flex-direction:column;padding:var(--s5);overflow-y:auto;
}
.mobile-drawer.is-open{transform:translateX(0)}
.mobile-drawer .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}
.mobile-drawer nav{display:flex;flex-direction:column;gap:2px}
.mobile-drawer nav a{padding:12px var(--s3);border-radius:var(--r-md);color:var(--text);font-weight:var(--fw-medium)}
.mobile-drawer nav a:hover{background:var(--bg-sunken);text-decoration:none}
.mobile-drawer .drawer-sub{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);padding:var(--s3) var(--s3) var(--s1)}
.mobile-drawer .drawer-foot{margin-top:auto;padding-top:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}

@media (max-width:960px){
  .main-nav{display:none}
  .nav-toggle{display:grid}
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--t-base);
  padding:13px 24px;border-radius:var(--r-md);cursor:pointer;border:1.5px solid transparent;
  transition:var(--fast);line-height:1;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-hover)}
.btn--secondary{background:transparent;color:var(--primary);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--primary);background:var(--primary-soft)}
.btn--ghost{background:transparent;color:var(--text-muted)}
.btn--ghost:hover{color:var(--text);background:var(--bg-sunken)}
.btn--on-dark{background:#fff;color:var(--blue-700)}
.btn--on-dark:hover{background:var(--slate-100)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-ring)}
.btn--sm{padding:9px 16px;font-size:var(--t-sm)}
.btn--lg{padding:16px 30px;font-size:var(--t-lg)}
.btn--block{width:100%}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:var(--fw-semibold);padding:4px 11px;border-radius:var(--r-full);line-height:1.4;white-space:nowrap}
.badge--popular{background:var(--primary);color:var(--on-primary)}
.badge--free{background:var(--accent-soft);color:var(--accent)}
.badge--new{background:var(--warning-soft);color:var(--warning)}
.badge--beta{background:var(--bg-sunken);color:var(--text-muted);border:1px solid var(--border)}
.badge--version{background:var(--bg-sunken);color:var(--text-muted);border:1px solid var(--border);font-family:var(--font-mono)}

/* ===== CARD base ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm)}
.card-pad{padding:var(--s5)}

/* product card */
.product-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);position:relative;transition:transform var(--normal),box-shadow var(--normal),border-color var(--normal)}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong)}
.product-card.is-featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary), var(--sh-md)}
.product-card .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.product-card .pc-ico{width:46px;height:46px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.product-card .pc-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.product-card h3{font-size:var(--t-xl)}
.product-card p{font-size:var(--t-sm);color:var(--text-muted);flex:1}
.product-card .pc-price{font-family:var(--font-mono);font-size:var(--t-sm);color:var(--accent);font-weight:var(--fw-semibold)}
.product-card .pc-cta{margin-top:var(--s2)}

/* method/feature card (icon + title + line + link) */
.tile-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);transition:transform var(--normal),box-shadow var(--normal),border-color var(--normal)}
.tile-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--border-strong)}
.tile-card:hover .tile-more{gap:9px}
.tile-card .tile-ico{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--primary);display:grid;place-items:center}
.tile-card .tile-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tile-card h3{font-size:var(--t-lg);font-family:var(--font-body);font-weight:var(--fw-semibold)}
.tile-card p{font-size:var(--t-sm);color:var(--text-muted);flex:1}
.tile-more{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:var(--fw-semibold);font-size:var(--t-sm);transition:gap var(--fast)}
.tile-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.tile-card:hover{text-decoration:none}

/* feature row (icon + heading + text) */
.feature-item{display:flex;flex-direction:column;gap:var(--s3)}
.feature-item .fi-ico{width:48px;height:48px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.feature-item .fi-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature-item h3{font-size:var(--t-lg)}
.feature-item p{color:var(--text-muted);font-size:var(--t-sm)}

/* ===== STATS ===== */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .num{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1;color:var(--text)}
.stat .num em{font-style:normal;color:var(--primary)}
.stat .lbl{color:var(--text-muted);font-size:var(--t-sm)}
@media (max-width:560px){.stat .num{font-size:var(--t-3xl)}}

/* ===== TABLES ===== */
.table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:520px}
.data-table th,.data-table td{padding:14px var(--s4);text-align:left;border-bottom:1px solid var(--border);font-size:var(--t-sm)}
.data-table thead th{background:var(--bg-sunken);font-weight:var(--fw-semibold);color:var(--text-muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td.center,.data-table th.center{text-align:center}
.data-table .yes{color:var(--accent);font-weight:var(--fw-semibold)}
.data-table .no{color:var(--text-subtle)}
.data-table .row-head{font-weight:var(--fw-semibold);color:var(--text)}

/* ===== FAQ ===== */
.faq{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item:last-child{border-bottom:0}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--text);
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--t-lg);
  padding:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);align-items:center;transition:background var(--fast)}
.faq__q:hover{background:var(--bg-subtle)}
.faq__q svg{width:20px;height:20px;flex:0 0 auto;transition:transform var(--normal);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--text-muted)}
.faq__q[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--primary)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--normal)}
.faq__a-inner{padding:0 var(--s5) var(--s5);color:var(--text-muted)}
@media (max-width:560px){.faq__q{font-size:var(--t-base)}}

/* ===== CODE ===== */
:not(pre) > code{background:var(--code-inline-bg);color:var(--code-inline-text);padding:2px 7px;border-radius:var(--r-sm);font-size:.9em}
.codeblock{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.codeblock__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg-sunken);border-bottom:1px solid var(--border)}
.codeblock__bar span{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-subtle)}
.copy-btn{display:inline-flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:var(--t-xs);padding:5px 10px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-body);transition:var(--fast)}
.copy-btn:hover{color:var(--text);border-color:var(--border-strong)}
.copy-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.codeblock pre{margin:0;padding:var(--s5);background:var(--code-bg);overflow-x:auto}
.codeblock code{font-family:var(--font-mono);font-size:var(--t-sm);color:var(--code-text);line-height:1.7}
.tok-key{color:#79b8ff}.tok-fn{color:#b392f0}.tok-str{color:#9ecbff}.tok-com{color:#6b7a90}.tok-var{color:#e1e7f0}.tok-num{color:#ffab70}

/* ===== BREADCRUMBS ===== */
.breadcrumbs{padding-block:var(--s5) 0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;padding:0;font-size:var(--t-sm)}
.breadcrumbs li{display:flex;align-items:center;gap:8px;color:var(--text-subtle)}
.breadcrumbs a{color:var(--text-muted)}
.breadcrumbs svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--text-subtle)}
.breadcrumbs [aria-current="page"]{color:var(--text)}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--text-muted);font-weight:var(--fw-medium);margin-bottom:var(--s4)}
.back-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== CALLOUT / NOTE ===== */
.callout{display:flex;gap:var(--s4);padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-subtle)}
.callout svg{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.callout--info svg{color:var(--primary)}
.callout--warn svg{color:var(--warning)}
.callout b{color:var(--text)}
.callout p{font-size:var(--t-sm);color:var(--text-muted)}
.callout--pending{border-style:dashed;border-color:var(--border-strong)}

/* ===== CTA SECTION ===== */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-2xl);padding:var(--s9) var(--s7);background:var(--slate-900);color:#fff;text-align:center}
[data-theme="dark"] .cta-band{background:linear-gradient(180deg,#16213b,#0d1626);border:1px solid var(--border)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 320px at 80% -10%,rgba(91,132,246,.35),transparent 60%),radial-gradient(520px 300px at 5% 110%,rgba(31,185,138,.25),transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{font-size:var(--t-4xl);color:#fff;margin-bottom:var(--s3)}
.cta-band p{color:rgba(255,255,255,.78);font-size:var(--t-lg);max-width:48ch;margin-inline:auto;margin-bottom:var(--s6)}
.cta-band .cta-row{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
@media (max-width:560px){.cta-band{padding:var(--s7) var(--s5)}.cta-band h2{font-size:var(--t-3xl)}.cta-band .btn{width:100%}}

/* ===== TRUST BAR ===== */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:var(--s5);flex-wrap:wrap}
.logo-chip{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-muted);font-size:var(--t-sm);padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:var(--fast)}
.logo-chip:hover{color:var(--text);border-color:var(--border-strong)}

/* ===== RELATED CARDS ===== */
.related-card{display:flex;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);transition:var(--normal)}
.related-card:hover{box-shadow:var(--sh-md);border-color:var(--border-strong);text-decoration:none;transform:translateY(-2px)}
.related-card .rc-ico{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.related-card .rc-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.related-card b{color:var(--text);font-size:var(--t-sm);display:block}
.related-card span{color:var(--text-muted);font-size:var(--t-xs)}

/* ===== FOOTER ===== */
.site-footer{background:var(--bg-sunken);border-top:1px solid var(--border);padding-block:var(--s8) var(--s6);margin-top:var(--s9)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7)}
.footer-brand .brand{margin-bottom:var(--s4)}
.footer-brand p{color:var(--text-muted);font-size:var(--t-sm);max-width:34ch}
.footer-col h4{font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle);margin-bottom:var(--s4);font-weight:var(--fw-semibold)}
.footer-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--text-muted);font-size:var(--t-sm)}
.footer-col a:hover{color:var(--text)}
.footer-col a .ext{width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-left:3px;stroke:currentColor;fill:none;stroke-width:2}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--border)}
.footer-bottom p{color:var(--text-subtle);font-size:var(--t-xs)}
.footer-social{display:flex;gap:var(--s2)}
.footer-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid var(--border);color:var(--text-muted)}
.footer-social a:hover{color:var(--text);border-color:var(--border-strong)}
.footer-social svg{width:17px;height:17px}
.footer-ong{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s4);font-size:var(--t-sm);font-weight:var(--fw-semibold);color:var(--accent)}
.footer-ong:hover{color:var(--accent-strong)}
.footer-ong svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ===== NONPROFIT BAND (cross-site) ===== */
.np-section{padding-block:var(--s7)}
.nonprofit-band{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);border-radius:var(--r-xl);border:1px solid var(--border);background:linear-gradient(120deg,var(--accent-soft),var(--primary-soft))}
.nonprofit-band .np-ico{width:50px;height:50px;flex:0 0 auto;border-radius:var(--r-md);background:var(--surface);color:var(--accent);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.nonprofit-band .np-ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.nonprofit-band .np-text{flex:1;min-width:0}
.nonprofit-band .np-text b{display:block;font-family:var(--font-display);font-size:var(--t-lg);letter-spacing:-.01em}
.nonprofit-band .np-text p{color:var(--text-muted);font-size:var(--t-sm);margin-top:3px}
.nonprofit-band .btn{flex:0 0 auto}
@media (max-width:760px){.nonprofit-band{flex-direction:column;align-items:flex-start}.nonprofit-band .btn{width:100%;justify-content:center}}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ===== BRANDED PAY BUTTONS (Apple Pay / Google Pay) ===== */
/* Follows Apple HIG and Google Pay brand guidelines: fixed lockups,
   minimum height, system typeface, approved color variants. */
.paybtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:48px;min-width:160px;padding:0 22px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;font-family:-apple-system,'SF Pro Text','Helvetica Neue',Roboto,Arial,sans-serif;
  font-weight:600;font-size:17px;line-height:1;letter-spacing:-.01em;user-select:none;
  transition:filter var(--fast),background var(--fast);
}
.paybtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-ring)}
.paybtn svg{display:block}

/* Apple Pay — black / white / white-outline */
.paybtn--apple{color:#fff;background:#000}
.paybtn--apple:hover{filter:brightness(1.18)}
.paybtn--apple .ap-logo{width:20px;height:24px;fill:currentColor}
.paybtn--apple-white{color:#000;background:#fff;border-color:#fff}
.paybtn--apple-white:hover{filter:brightness(.95)}
.paybtn--apple-outline{color:#000;background:#fff;border-color:#000}
[data-theme="dark"] .paybtn--apple-white,[data-theme="dark"] .paybtn--apple-outline{color:#000}

/* Google Pay — black / white */
.paybtn--google{color:#fff;background:#000}
.paybtn--google:hover{filter:brightness(1.2)}
.paybtn--google-white{color:#3c4043;background:#fff;border-color:#dadce0}
.paybtn--google-white:hover{background:#f8f9fa}
.paybtn--google .gp-g,.paybtn--google-white .gp-g{width:22px;height:22px}
.paybtn--google .gp-pay{color:#fff}
.paybtn--google-white .gp-pay{color:#5f6368}
.gp-pay{font-weight:500}

/* button row + caption for the brand-button showcase */
.paybtn-row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.paybtn-note{font-size:var(--t-xs);color:var(--text-subtle);font-family:var(--font-mono);margin-top:var(--s3)}

/* express-button context strip (on product/cart) */
.express-strip{display:flex;flex-direction:column;gap:12px;max-width:340px;padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.express-strip .es-or{display:flex;align-items:center;gap:12px;color:var(--text-subtle);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em}
.express-strip .es-or::before,.express-strip .es-or::after{content:"";height:1px;flex:1;background:var(--border)}
.express-strip .paybtn{width:100%}