/* STOCK_STORE_FLAT_V18 — only store.html, after adding body scope marker. */
body[data-stock-store-flat-v18="1"] {
  --ss18-paper: #fff;
  --ss18-line: #e7ecf2;
  --ss18-text: #172235;
}
html[data-theme="dark"] body[data-stock-store-flat-v18="1"],
body.dark-mode[data-stock-store-flat-v18="1"] {
  --ss18-paper: #171e28;
  --ss18-line: #344150;
  --ss18-text: #eef2f7;
}

/* Keep navigation, account sidebar, dialogs and controls as they were. */
body[data-stock-store-flat-v18="1"] main {
  background-color: var(--ss18-paper) !important;
  background-image: none !important;
  color: var(--ss18-text);
  box-shadow: none !important;
  min-width: 0;
}

/* Remove the big isolated blocks but keep the form and step structure. */
body[data-stock-store-flat-v18="1"] main :is(
  .card-surface, .form-card, .store-card, .store-panel,
  .store-section, .store-step, .store-step-card, .store-form-card,
  .store-form-section, .store-editor-card, .store-editor-section,
  .studio-card, .studio-section, .studio-panel,
  .shop-studio-card, .shop-studio-section, .store-identity-card,
  .store-contact-card, .store-brand-card, .store-verification-card,
  .panel-card, .section-card
):not([role="dialog"]):not([class*="modal"]):not([class*="preview"]):not([class*="dropzone"]) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}
body[data-stock-store-flat-v18="1"] main :is(
  .card-surface, .form-card, .store-card, .store-panel, .store-section,
  .store-step, .store-step-card, .store-form-card, .studio-card, .studio-panel,
  .panel-card, .section-card
):hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Flatten first-level content sections regardless of their revision-specific CSS class.
   Interactive controls, actual image frames and previews retain their styling. */
body[data-stock-store-flat-v18="1"] main > section:not([class*="preview"]):not([class*="modal"]),
body[data-stock-store-flat-v18="1"] main > article:not([class*="preview"]),
body[data-stock-store-flat-v18="1"] main > form > section:not([class*="preview"]),
body[data-stock-store-flat-v18="1"] main > div > form > section:not([class*="preview"]) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}

/* Make wrappers the same color as the page, without changing grid/flex geometry. */
body[data-stock-store-flat-v18="1"] main :is(
  .store-layout, .store-editor, .store-form, .store-studio,
  .studio-layout, .studio-form, .store-form-wrap,
  .store-content, .store-content-main, .store-main-content,
  .store-sections, .studio-sections, .form-sections
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Section separation replaces floating boxes. */
body[data-stock-store-flat-v18="1"] main :is(
  .store-step + .store-step,
  .store-form-section + .store-form-section,
  .studio-section + .studio-section,
  .store-editor-section + .store-editor-section,
  .store-section + .store-section
) {
  border-top: 1px solid var(--ss18-line) !important;
  padding-top: clamp(18px, 2.3vw, 30px) !important;
  margin-top: clamp(18px, 2.3vw, 30px) !important;
}

/* Avoid inset floating tiles for informational text, but preserve form fields,
   controls, preview phone, QR graphic and media upload drop areas. */
body[data-stock-store-flat-v18="1"] main :is(
  .info-card, .info-panel, .help-card, .section-intro,
  .form-help-card, .store-hint-card
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body[data-stock-store-flat-v18="1"] main :is(
  input, textarea, select, button, .btn, .button, [role="button"],
  .store-preview, .studio-preview, .live-preview, .qr-code,
  .qr-preview, .qr-frame, .upload-dropzone, .dropzone
) {
  /* Deliberately no resets: preserve original inputs and interactive UI. */
}

@media (max-width: 740px) {
  body[data-stock-store-flat-v18="1"] main {
    min-width: 0;
    max-width: 100%;
  }
  body[data-stock-store-flat-v18="1"] main :is(
    .store-step + .store-step,
    .store-form-section + .store-form-section,
    .studio-section + .studio-section,
    .store-section + .store-section
  ) {
    padding-top: 18px !important;
    margin-top: 18px !important;
  }
}