/* Embeds (embed.php): the products (a category's table or a brand's cards), the price notice,
   then the button to the full page. The whole frame scrolls, so the button shows only at the end.
   Everything else comes from site.css. */
body.pm-embed { margin: 0; padding: .5rem; background: var(--bg); }
.pm-embed-bottom { margin: .75rem 0 .25rem; }
.pm-embed-button { display: inline-block; padding: .5rem 1rem; border-radius: 6px; background: var(--accent); color: var(--accent-text);
  font-weight: 600; text-decoration: none; line-height: 1.3; }
.pm-embed-button:hover { text-decoration: underline; }
.pm-embed-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* The table scrolls sideways only; its Product column stays in view */
.pm-embed .pm-scroll { overflow-x: auto; overflow-y: hidden; max-height: none; }
.pm-embed .pm-table .col-product { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line); }
.pm-embed .pm-table th.col-product, .pm-embed .pm-table thead td.col-product { z-index: 4; }
.pm-embed-note { font-size: .75rem; color: var(--muted); margin: .4rem 0 0; }
.pm-embed-note p { margin: 0; }
.pm-embed-none { margin: 1rem; }
/* Thumbnails stay at every width (site.css hides them on phones; frames are often that narrow) */
.pm-embed .pm-table .col-product img { display: block; }
/* The product's picture and name link to its page on this site */
.pm-embed .pm-table .col-product a.p { color: var(--text); text-decoration: none; }
.pm-embed .pm-table .col-product a.p:hover .name { color: var(--accent); text-decoration: underline; }
/* A brand's embed: its product cards (site.css .pm-pcard) */
.pm-embed-cards { padding: 0 .1rem; }
.pm-embed-cards .pm-brand-sec { margin: .5rem 0 1.5rem; }
.pm-embed-cards .pm-brand-sec-head h2 { font-size: 1.15rem; }
.pm-embed-cards .pm-pcards { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }