/* The Tech Pad — Store integrations overlay additions (LIGHT theme)
   (provider toggle + WooCommerce install-code flow).
   Complements shopify-ui.css (shared ttp-sh-* primitives). */

.ttp-sh-providers { display: flex; gap: 8px; margin: 12px 0 16px; flex-wrap: wrap; }
.ttp-sh-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #d3dfd9; color: #1a4437;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; margin: 14px 0 2px;
  box-shadow: 0 1px 2px rgba(13,43,34,.06);
}
.ttp-sh-back:hover { background: #eef4f1; }
.ttp-sh-dl {
  display: inline-block; text-decoration: none;
  background: #e8f6ee; color: #0f7a58;
  border: 1px solid #a8dcc2; border-radius: 999px;
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  margin: 8px 0 2px;
}
.ttp-sh-dl:hover { background: #d4eddf; }
.ttp-sh-inline-link { color: #0f7a58; text-decoration: underline; }
.ttp-sh-provider {
  background: #f1f5f3; border: 1px solid transparent; color: #33504a;
  padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ttp-sh-provider.active {
  background: #0d2b22; border-color: #0d2b22; color: #fff;
}
.ttp-sh-provider:hover { background: #e2eae6; }

.ttp-sh-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 28px; letter-spacing: .4em; font-weight: 800; text-align: center;
  background: #f0faf4; border: 1px dashed #7fc9a6;
  color: #0f7a58; border-radius: 12px; padding: 16px 12px; margin: 12px 0 4px;
  user-select: all;
}

.ttp-sh-steps { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.ttp-sh-step {
  background: #f6f9f7; border: 1px solid #e4ebe7; border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: #3c5049;
}
.ttp-sh-step code {
  background: #e7eee9; border-radius: 5px; padding: 1px 6px;
  font-size: 12.5px; color: #14231e;
}

/* Provider DETAIL pages (/wa/shopify, /wa/woocommerce): keep the card from
   stretching the full dashboard height and cap its width for density. */
#ttp-shopify-root.ttp-shopify { align-self: flex-start; max-width: 920px; }

/* Section heading: the bundle's .section-heading is a space-between flex row
   that scatters eyebrow / title / subtitle across the card — stack them left. */
.ttp-shopify .section-heading { display: block; border-bottom: 1px solid #e7ece9; padding-bottom: 14px; }
.ttp-shopify .section-heading .eyebrow {
  display: block; color: #128c7e; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
.ttp-shopify .section-heading h2 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px; color: #14231e; }
.ttp-shopify .section-heading p { color: #5c6d66; font-size: 14px; margin: 0; }

/* Mobile */
@media (max-width: 640px) {
  .ttp-sh-code { font-size: 22px; letter-spacing: .28em; }
}

/* The overlay is the Integrations UI — hide the native catalog/detail view
   ONLY while the overlay is mounted (deep link like /wa/integrations?provider=woocommerce).
   A plain visit shows the native catalog whose cards navigate to /wa/shopify and /wa/woocommerce. */
body.ttp-overlay-active section.integrations-page { display: none !important; }
/* Provider DETAIL pages (/wa/shopify, /wa/woocommerce): the SPA router falls
   back to "overview" for unknown /wa/* paths, so hide the native dashboard
   content — the overlay section (#ttp-shopify-root) IS the page. The sidebar
   (aside.sidebar) is a sibling of .dashboard and stays visible. */
body.ttp-provider-page .dashboard > *:not(#ttp-shopify-root) { display: none !important; }
.connector-card.live { cursor: pointer; }