/* Shared repair for converted snap pages:
   1) Fill the desktop sidebar column (vp-d-side)
   2) Keep the main column a transparent stack so cards stay visible
   3) Style non-fo forms like the product sidebar form */

html[data-snap="product"] .content-wrapper,
html[data-snap="product"] .content-wrapper.b2c-page {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-snap="product"] .sl-form-wrap,
html[data-snap="product"] .org-form-wrap,
html[data-snap="product"] .support-form-wrap,
html[data-snap="product"] .fo-form-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 16px 16px;
  border-radius: var(--sn-radius, 20px);
  background: var(--sn-surface, #fff);
  box-shadow: var(--sn-elev-1, 0 1px 2px rgba(13, 21, 32, 0.04), 0 10px 24px -16px rgba(13, 21, 32, 0.18));
}

html[data-snap="product"] .sl-form-card,
html[data-snap="product"] .org-form-card,
html[data-snap="product"] .support-form-card,
html[data-snap="product"] .fo-form-card {
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(13, 21, 32, 0.08);
}

html[data-snap="product"] .vp-d-side .atin-related {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0;
  padding: 16px;
  border-radius: var(--sn-radius, 20px);
  background: var(--sn-surface, #fff);
  box-shadow: var(--sn-elev-1, 0 1px 2px rgba(13, 21, 32, 0.04), 0 10px 24px -16px rgba(13, 21, 32, 0.18));
}

html[data-snap="product"] .b2c-svc-card,
html[data-snap="product"] .bp-card,
html[data-snap="product"] .dc-feat,
html[data-snap="product"] .dc-loc,
html[data-snap="product"] .sl-product,
html[data-snap="product"] .sl-benefit,
html[data-snap="product"] .support-channel,
html[data-snap="product"] .support-expert-card {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(13, 21, 32, 0.08) !important;
}

@media screen and (min-width: 768px) {
  html[data-snap="product"] .vp-d-side {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
}