/* Partsy web — "For Ecom" page.
   Page-scoped additions only; global styles stay in styles.css. */

.ecom-hero-note{
  margin-top:26px;
  color:var(--electric);
  font:600 .85rem 'Space Grotesk',sans-serif;
  letter-spacing:.03em;
}
.page-hero .ecom-hero-button{background:var(--electric);color:var(--ink)}
.page-hero .ecom-hero-button:hover{background:#5ee0d7}
.page-hero .ecom-hero-link{color:#e8fffd}
.page-hero .ecom-hero-link:hover{color:#fff}

/* Plug-and-play steps */
.ecom-steps{padding:100px clamp(22px,8vw,130px) 20px;background:var(--white)}
.ecom-steps-head{max-width:780px}
.ecom-steps-head>p:not(.kicker){color:var(--muted);font-size:1.15rem;max-width:600px}
.ecom-step-list{padding:30px 0 90px}

/* The snippet block */
.ecom-embed{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:7vw;
  align-items:center;
  padding:100px clamp(22px,10vw,160px);
  background:var(--ink);
  color:#fff;
}
.ecom-embed h2{color:#fff;max-width:520px}
.ecom-embed-copy>p:not(.kicker){color:#b9caca;font-size:1.1rem;max-width:520px}
.ecom-embed-copy .muted{color:#8ea4a8;font-size:.95rem}
.ecom-embed-copy .text-link{color:var(--electric);font-weight:700}
.ecom-snippet{margin:0;justify-self:end;width:100%;max-width:680px}
.ecom-snippet-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:rgba(255,255,255,.08);border-radius:12px 12px 0 0;
}
.ecom-snippet-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.ecom-snippet-bar em{
  margin-left:10px;font:500 .72rem 'Space Grotesk',sans-serif;
  font-style:normal;letter-spacing:.04em;color:#8ea4a8;
}
.ecom-snippet pre{
  margin:0;padding:22px 20px;background:#0d181c;overflow-x:auto;
  border-radius:0 0 12px 12px;
}
.ecom-snippet code{
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:.82rem;line-height:1.75;color:#d7ecea;white-space:pre;
}
.ecom-snippet figcaption{margin-top:12px;color:#8ea4a8;font-size:.78rem}

/* Catalog interaction demo (GIF player) */
.ecom-demo{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:7vw;
  align-items:center;
  padding:100px clamp(22px,10vw,160px);
  background:var(--ink);
  color:#fff;
}
.ecom-demo h2{color:#fff;max-width:520px}
.ecom-demo-copy>p:not(.kicker){color:#b9caca;font-size:1.1rem;max-width:520px}
.ecom-demo-copy .muted{color:#8ea4a8;font-size:.95rem}
.ecom-demo-copy .text-link{color:var(--electric);font-weight:700}
.ecom-demo-player{margin:0;justify-self:end;width:100%;max-width:680px}
.ecom-demo-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:rgba(255,255,255,.08);border-radius:12px 12px 0 0;
}
.ecom-demo-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.ecom-demo-bar em{
  margin-left:10px;font:500 .72rem 'Space Grotesk',sans-serif;
  font-style:normal;letter-spacing:.04em;color:#8ea4a8;
}
/* line-height:0 keeps the frame tight around the image; the canvas that holds the
   paused frame lands on exactly the same box, so pausing never shifts the layout. */
.ecom-demo-frame{position:relative;line-height:0;background:#0d181c;border-radius:0 0 12px 12px;overflow:hidden}
.ecom-demo-frame img,.ecom-demo-frame canvas{display:block;width:100%;height:auto}
.ecom-demo-toggle{
  position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(13,24,28,.8);color:#fff;font-size:.85rem;cursor:pointer;
  display:grid;place-items:center;
}
.ecom-demo-toggle:hover{background:var(--electric);color:var(--ink)}
.ecom-demo-player figcaption{margin-top:12px;color:#8ea4a8;font-size:.78rem}

/* Feature grid */
.ecom-features{padding:100px clamp(22px,8vw,130px)}
.ecom-features-head{max-width:780px;margin-bottom:44px}
.ecom-features-head>p:not(.kicker){color:var(--muted);font-size:1.15rem;max-width:620px}
.ecom-features .benefit-card h3{font-size:1.2rem}

/* Plans strip */
.ecom-plans{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center;
  padding:100px clamp(22px,10vw,160px);background:var(--white);
}
.ecom-plans-copy>p:not(.kicker){color:var(--muted);font-size:1.1rem;max-width:520px}
.ecom-plan-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.ecom-plan{
  background:var(--paper);padding:26px 24px;
  display:flex;flex-direction:column;gap:6px;min-height:150px;
}
.ecom-plan span{color:#168d87;font:600 .72rem 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ecom-plan strong{font:700 1.7rem 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.ecom-plan em{font-style:normal;color:var(--muted);font-size:.82rem;line-height:1.45}

/* Supported frameworks */
.ecom-frameworks{padding:100px clamp(22px,8vw,130px)}
.ecom-frameworks-head{max-width:820px;margin-bottom:44px}
.ecom-frameworks-head>p:not(.kicker){color:var(--muted);font-size:1.15rem;max-width:660px}

/* The table scrolls sideways on a narrow screen rather than squashing the columns. */
.fw-scroll{overflow-x:auto;border-top:1px solid var(--line)}
.fw-table{width:100%;border-collapse:collapse;min-width:940px}
.fw-caption{caption-side:top;text-align:left;padding:0 0 16px;color:var(--muted);font-size:.8rem}
.fw-table th{
  text-align:left;padding:14px 20px 14px 0;border-bottom:1px solid var(--line);
  font:700 .68rem 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:#168d87;white-space:nowrap;
}
.fw-table td{padding:16px 20px 16px 0;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.fw-table th:last-child,.fw-table td:last-child{padding-right:0}
.fw-table tbody tr{transition:background .18s ease}
.fw-table tbody tr:hover{background:var(--white)}
.fw-table td:nth-child(2),.fw-table td:nth-child(3){color:var(--ink-soft)}
.fw-table td:nth-child(4){color:var(--muted)}

/* Brand logos sit in one fixed-width slot so every platform name lines up, whatever
   the logo's aspect ratio — the glyphs are square, several wordmarks are 3:1 or wider. */
.fw-brand{display:flex;align-items:center;gap:16px;white-space:nowrap}
.fw-icon{flex:0 0 96px;display:flex;align-items:center;justify-content:center;height:30px}
.fw-icon img{display:block;max-width:96px;max-height:26px;width:auto;height:auto}
.fw-name{font-weight:700;font-size:.95rem}
/* The platform name links to its landing page, so it must not look like a default
   blue link dropped into the table. */
a.fw-name{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
a.fw-name:hover{border-bottom-color:var(--electric)}

.fw-badge{
  font:600 .63rem 'Space Grotesk',sans-serif;font-style:normal;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;
}
.fw-badge-app{border-color:var(--electric);background:rgba(55,211,202,.16);color:#0a8d88}
.fw-badge-starter{border-color:#e2cfa0;background:#fdf7e6;color:#7a5a12}

.fw-note{margin:26px 0 0;color:var(--muted);font-size:.9rem;max-width:800px}
.fw-note strong{color:var(--ink)}
.fw-note em{color:var(--ink-soft);font-style:normal;font-weight:700}

@media(max-width:960px){
  .ecom-demo,.ecom-embed,.ecom-plans{grid-template-columns:1fr;gap:40px}
  .ecom-demo-player,.ecom-snippet{justify-self:start}
}
@media(max-width:560px){
  .ecom-plan-strip{grid-template-columns:1fr}
  .ecom-steps,.ecom-features,.ecom-demo,.ecom-embed,.ecom-plans,.ecom-frameworks{padding-left:22px;padding-right:22px}
}