:root {
  --brand-accent: #68e1fd;
  --brand-bg: #0b0f14;
  --brand-text: #e8eef5;
  --brand-muted: #9fb2c7;
}
html[data-theme="dark"] { color-scheme: dark; background: var(--brand-bg); }
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--brand-text); margin:0; }
    @font-face {
      font-family: 'SuiGeneris';
      src: url('/fonts/typodermic_-_suigenerisrg-regular-webfont.woff2') format('woff2'),
           url('/fonts/typodermic_-_suigenerisrg-regular-webfont.woff') format('woff'),
           url('/fonts/Typodermic - SuiGenerisRg-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
.brand-title { font-family: "SuiGeneris", Inter, system-ui, sans-serif; letter-spacing: .5px; }

header.site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); background: rgba(11,15,20,0.7); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; max-width: 1200px; margin: 0 auto; }
.site-nav .left, .site-nav .right { display: flex; align-items: center; gap: 1rem; }
.site-nav a { color: var(--brand-text); text-decoration: none; opacity: .9; }
.site-nav a:hover { opacity: 1; }
.site-nav .cta { padding: .5rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); }
.logo { display:flex; align-items:center; gap:.5rem; }
.logo img { height: 28px; width:auto; }
main.container { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
footer.site-footer { max-width: 1200px; margin: 2rem auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); color: var(--brand-muted); }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: clamp(1rem, 3vw, 2rem) 0; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 .5rem; }
.hero p.lead { font-size: clamp(1rem, 2vw, 1.2rem); opacity: .9; }
.hero-media img { width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }

.grid { display: grid; gap: 1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.accent { color: var(--brand-accent); }

.embed { position: relative; width: 100%; aspect-ratio: 16/9; background: rgba(255,255,255,.04); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.embed-ig { position: relative; width: 100%; height: 620px; background: rgba(255,255,255,.04); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.embed-ig iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.box { padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.box small { color: var(--brand-muted); display:block; margin-top:.5rem; }

.pipeline-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pipeline-header h2 { margin: 0 0 .25rem; }
.pipeline-status { margin: 0; color: var(--brand-muted); }
.repo-meta { display: grid; gap: .35rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .75rem 1rem; min-width: 240px; }
.repo-meta .meta-line { display: flex; justify-content: space-between; gap: .75rem; font-size: .95rem; }
.repo-meta .meta-label { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: var(--brand-muted); }
.repo-meta .meta-value { text-align: right; font-weight: 600; }
.repo-meta .meta-value .commit-sha { color: var(--brand-accent); text-decoration: none; margin-right: .5rem; }
.repo-meta .meta-value .commit-sha:hover { text-decoration: underline; }
.repo-meta .meta-value .commit-message { display: block; font-weight: 600; color: var(--brand-text); }
.repo-meta .meta-value .commit-author { display: block; font-size: .85rem; color: var(--brand-muted); margin-top: .25rem; }

.pipeline-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.auth-chip { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: .35rem .85rem; font-size: .95rem; color: var(--brand-text); }
.auth-chip .chip-dot { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.4); display: inline-block; }
.auth-chip[data-state="signed-in"] .chip-dot { background: var(--brand-accent); box-shadow: 0 0 8px rgba(104,225,253,.6); }
.auth-chip .chip-meta { font-size: .8rem; color: var(--brand-muted); }
.toolbar-buttons { display: flex; gap: .5rem; }

.pipeline-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: end; margin-bottom: 1rem; }
.pipeline-form label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; }
.pipeline-form .input-row { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.02); }
.pipeline-form .input-prefix { padding: .55rem .75rem; color: var(--brand-muted); font-size: .9rem; border-right: 1px solid rgba(255,255,255,.08); }
.pipeline-form input, .pipeline-form select { flex: 1; padding: .55rem .75rem; background: transparent; border: none; color: var(--brand-text); font-size: 1rem; min-width: 0; }
.pipeline-form button { justify-self: start; }

.pipeline-alert { min-height: 1.25rem; font-size: .95rem; color: var(--brand-muted); margin-bottom: 1rem; }
.pipeline-alert[data-variant="success"] { color: var(--brand-accent); }
.pipeline-alert[data-variant="error"] { color: #ff9aa2; }
.pipeline-alert[data-variant="warning"] { color: #ffd28c; }

.file-manifest { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(0,0,0,.25); min-height: 180px; padding: 1rem; overflow: auto; max-height: 360px; font-family: "JetBrains Mono", "Fira Code", monospace; font-size: .9rem; }
.file-manifest.empty { display: flex; justify-content: center; align-items: center; color: var(--brand-muted); font-style: italic; }
.file-manifest.loading { color: var(--brand-muted); }
.manifest-loading { margin: 0; text-align: center; }
.manifest-error { color: #ff9aa2; text-align: center; }
.manifest-summary { font-weight: 600; margin-bottom: .75rem; }
.manifest-tree details { margin-left: .5rem; }
.manifest-tree summary { cursor: pointer; padding: .2rem 0; }
.tree-children { margin-left: 1rem; border-left: 1px dashed rgba(255,255,255,.08); padding-left: .75rem; }
.tree-file { display: flex; justify-content: space-between; padding: .2rem 0; align-items: baseline; }
.tree-file .size { color: var(--brand-muted); margin-left: 1rem; font-variant-numeric: tabular-nums; }

.pipeline-loading #file-manifest { opacity: .6; }

.auth-dialog { border: none; border-radius: 18px; padding: 0; max-width: 520px; width: min(92vw, 520px); background: rgba(15,19,27,.96); color: var(--brand-text); }
.auth-dialog::backdrop { background: rgba(0,0,0,.6); }
.auth-dialog__surface { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; }
.auth-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.auth-dialog__header h2 { margin: 0; }
.auth-dialog__subtitle { margin: .35rem 0 0; color: var(--brand-muted); font-size: .95rem; }
.dialog-close { background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; width: 36px; height: 36px; color: var(--brand-text); cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.auth-tabs { display: flex; gap: .5rem; }
.auth-tab { flex: 1; padding: .55rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--brand-muted); cursor: pointer; font-weight: 600; }
.auth-tab.active { background: var(--brand-accent); color: #001018; border-color: transparent; }
.auth-panels { display: flex; flex-direction: column; gap: 1.5rem; }
.auth-panel { display: none; flex-direction: column; gap: 1rem; }
.auth-panel.active { display: flex; }
.auth-form { display: flex; flex-direction: column; gap: .85rem; }
.auth-form label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; }
.auth-form input { border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--brand-text); padding: .6rem .75rem; font-size: 1rem; }
.auth-form input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(104,225,253,.2); }
.auth-form small { color: var(--brand-muted); line-height: 1.4; }
.device-flow { border: 1px dashed rgba(255,255,255,.16); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.device-flow code { font-size: 1.4rem; letter-spacing: .2em; background: rgba(0,0,0,.3); padding: .4rem .6rem; border-radius: 8px; text-align: center; }
.device-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.device-status { min-height: 1.2rem; color: var(--brand-muted); }
.device-countdown { color: var(--brand-accent); font-weight: 600; }
.auth-feedback { min-height: 1.2rem; font-size: .95rem; color: var(--brand-muted); }
.auth-feedback[data-variant="success"] { color: var(--brand-accent); }
.auth-feedback[data-variant="error"] { color: #ff9aa2; }

.button { display:inline-block; padding:.6rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color:var(--brand-text); text-decoration:none; }
.button.primary { background: var(--brand-accent); color:#001018; border-color: transparent; }
.button.outline { background: transparent; }

.shopify-buy__btn, .shopify-buy__btn--parent {
  background: var(--brand-accent) !important;
  color: #001018 !important;
  border-radius: 10px !important;
  padding: .8rem 1rem !important;
  box-shadow: none !important;
}
.shopify-buy__btn[disabled] { opacity: .6 !important; cursor: not-allowed !important; }

/* --- Shopify Buy Button skin --- */
#product-component .shopify-buy__product {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1rem;
}
#product-component .shopify-buy__product__title {
  font-family: "SuiGeneris", Inter, system-ui, sans-serif;
  font-size: 1.8rem;
  letter-spacing: .5px;
}
#product-component .shopify-buy__product__image-wrapper img {
  border-radius: 12px;
}

/* Hide the default price line if you don't want $0.00 showing */
/* #product-component .shopify-buy__product__price { display: none; } */

/* Make the button look like your site’s primary button */
#product-component .shopify-buy__btn,
#product-component .shopify-buy__btn--parent {
  background: var(--brand-accent) !important;
  color: #001018 !important;
  border-radius: 10px !important;
  padding: .9rem 1.1rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: none !important;
}
#product-component .shopify-buy__btn[disabled] {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* Contain Shopify widget images on small screens */
#product-component img { max-width: 100% !important; height: auto !important; }

/* Make the product card itself non-scroll-busting */
#product-component .shopify-buy__product { overflow: hidden; }

/* Slightly tighter padding on phones */
@media (max-width: 640px) {
  #product-component .shopify-buy__product { padding: .75rem; }
}

[data-if-enabled] { display: none; }
:root[data-enabled~="product"] [data-if-enabled="product"],
:root[data-enabled~="apps"] [data-if-enabled="apps"],
:root[data-enabled~="blog"] [data-if-enabled="blog"],
:root[data-enabled~="buy"] [data-if-enabled="buy"],
:root[data-enabled~="gallery"] [data-if-enabled="gallery"] { display: block; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: 1fr; } }

/* Allow the nav to wrap under the logo on small screens */
@media (max-width: 880px) {
  .site-nav { flex-wrap: wrap; }
  .site-nav .right {
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
    justify-content: flex-start;
  }
  .site-nav a { padding: .35rem .6rem; font-size: .95rem; }
}

/* Hide brand wordmark text next to the logo */
.site-nav .brand-title { display: none; }

/* Hamburger default hidden on desktop */
.menu-toggle { display: none; background: transparent; color: var(--brand-text); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: .4rem .6rem; }

/* Mobile: collapse menu into a column */
@media (max-width: 880px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav .right { display: none; }
  .site-nav .right.open { display: flex; flex-direction: column; width: 100%; gap: .25rem; margin-top: .5rem; }
}