/*
  Premium badge. Main only (the online demo): labels the sections and product blocks that NAVEGaid Free
  does not have. Never copy into Blank or Free. It targets each feature's root class, so the shared
  section files stay untouched. Keep the list in sync with the Premium-only table in THEME-EDITIONS.md.
*/

.shopify-section:has(.pdh-container, .bar-container, .nvgd-ts-container, .tilted-showcase) {
  position: relative;
}

.shopify-section:has(.pdh-container, .bar-container, .nvgd-ts-container, .tilted-showcase)::after,
.product-upsell::before,
.nvgd-addon-content-container::before,
.nvgd-video-slider-wrapper::before {
  content: 'Premium section';
  display: block;
  width: max-content;
  /* Pill like the Soft buttons and option pills; the right side gives back the trailing letter-spacing. */
  padding: 1rem calc(1.8rem - 0.14em) 0.9rem 1.8rem;
  border-radius: 999px;
  background: #1b1c1c;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
  color: #fff;
  font: 600 1.3rem/1 var(--font-body-family);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
  Sections: a corner label over the section's own top spacing, so the page layout does not move.
  Right edge follows the demo's 1240px content grid (100px in at 1440), so every badge lines up.
*/
.shopify-section:has(.pdh-container, .bar-container, .nvgd-ts-container, .tilted-showcase)::after {
  position: absolute;
  top: 1.6rem;
  right: max(3.2rem, calc((100% - 124rem) / 2));
  z-index: 2;
  pointer-events: none;
}

/* Product blocks: a label above the block, in the flow, so it never covers the block's own text. */
.product-upsell::before,
.nvgd-addon-content-container::before,
.nvgd-video-slider-wrapper::before {
  content: 'Premium block';
  margin-bottom: 1rem;
}

@media screen and (max-width: 749px) {
  .shopify-section:has(.pdh-container, .bar-container, .nvgd-ts-container, .tilted-showcase)::after {
    top: 0.8rem;
    right: 2rem;
  }
}