/**
 * BootstrapSkin.css - Base Canvas Styles for Editor4
 *
 * Purpose: Bootstrap-compatible base styles for the editable canvas
 * Load order: Bootstrap 5.3.3 -> BootstrapSkin.css -> CustomStyles.css
 *
 * Contains:
 * - CSS resets & box-sizing
 * - Bootstrap alignment helpers
 * - Grid visualization aids (editor-only)
 * - Typography defaults
 *
 * Does NOT contain:
 * - Tenant-specific styles (those go in CustomStyles.css)
 * - Editor UI theme (that's ShopOn Skin - roadmap step 10)
 * - Component JavaScript behavior
 */

/* ==========================================================================
   CSS Resets & Parity
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}

/* Links */
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* ==========================================================================
   Bootstrap Grid Helpers (Base Structure)
   ========================================================================== */

/* Section wrapper (will become container/container-fluid) */
.so-section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* Default to transparent so body zone background shows through */
  background-color: transparent;
}

/* ==========================================================================
   Body Zone Background Inheritance
   ========================================================================== */

/*
 * Sections inside body zones inherit background by default.
 * This allows the body zone to set a "master" background that applies to all sections.
 * Individual sections can still override with their own background via the popover.
 *
 * How it works:
 * 1. #e4-body-zone sets background (via popover settings)
 * 2. Sections have transparent background by default (above)
 * 3. Body zone background shows through all sections
 * 4. If a section has explicit background set via its own popover, it overrides
 */
#e4-body-zone,
#e4-body-zone-2,
#e4-body-zone-3 {
  /* Body zones are block containers */
  display: block;
}

/* Container (standard Bootstrap container) */
.container {
  width: 100%;
  /* Removed default Bootstrap padding (was 15px left/right) */
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

/* Container fluid (full width) */
.container-fluid {
  display: block;  /* Required for child margin:auto centering to work */
  width: 100%;
  /* Removed default Bootstrap padding (was 15px left/right) */
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

/* Row - Zero gutters by default via BS5 variable (not hard-coded margins).
   BS5's calc() reads --bs-gutter-x for row margins and column padding.
   Our .so-row-gap-* classes override --bs-gutter-x to activate spacing. */
.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================================
   Row Width Modes (iframe-safe, no viewport units)
   ========================================================================== */

/*
 * Row width control works WITH section container mode:
 * - In container-fluid section: rows can be "contained" (centered) or "full" (span available width)
 * - In container section: rows naturally follow container width, no special classes needed
 */

/*
 * Row-level width control within container-fluid sections:
 * - .so-row--contained: row is centered with Bootstrap container max-widths
 * - .so-row--full: row spans full width of section
 * - Default: inherits from section (container = centered, container-fluid = full)
 *
 * ChatGPT approach: Make contained row "act like a container" using width:auto + max-width
 */

/* Contained row: mirrors .container behavior exactly (same padding, same max-widths) */
/* Row is display:flex, so we use flex + max-width for centering */
/* IMPORTANT: max-width values must match .container breakpoints exactly */
.so-section.container-fluid > .so-row.so-row--contained {
  display: flex !important;  /* Keep flex for column layout */
  flex-wrap: wrap;
  max-width: 100%;  /* Mobile first: full width on small screens */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Match .container padding (which is 0 in our setup) */
  padding-left: 0;
  padding-right: 0;
}

/* Same max-width breakpoints as .container (min-width, mobile-first) */
/* These values MUST match the .container rules above exactly */
@media (min-width: 576px) {
  .so-section.container-fluid > .so-row.so-row--contained { max-width: 540px; }
}
@media (min-width: 768px) {
  .so-section.container-fluid > .so-row.so-row--contained { max-width: 720px; }
}
@media (min-width: 992px) {
  .so-section.container-fluid > .so-row.so-row--contained { max-width: 960px; }
}
@media (min-width: 1200px) {
  .so-section.container-fluid > .so-row.so-row--contained { max-width: 1140px; }
}

/* Full width row: spans entire section */
.so-section.container-fluid > .so-row.so-row--full {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Column base - BS5 handles padding via calc(var(--bs-gutter-x) * .5).
   With --bs-gutter-x: 0 (default above), columns get zero padding.
   When .so-row-gap-* sets --bs-gutter-x, BS5's calc() activates spacing. */

/* Column positioning - DO NOT set width here; Bootstrap handles it via col-* classes */
[class*="col-"] {
  position: relative;
  /* width: 100% removed - was overriding Bootstrap column widths causing columns to stack */
}

/* ==========================================================================
   Editor Visual Aids
   ========================================================================== */

/* Section wrapper - no margin between sections */
.so-section {
  margin-bottom: 0;
}

/* Empty section styling - scoped to editor mode */
body.editor-mode .so-section:empty,
body.editor-mode .so-section:not(:has(*)) {
  min-height: 100px;
  background: repeating-linear-gradient(
    45deg,
    #f9f9f9,
    #f9f9f9 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  border: 2px dashed #e0e0e0;
}

/* Body-zone editor-mode min-height — keeps short pages from showing a
 * dead white gap below the body content. The GrapesJS canvas iframe is
 * always full-viewport-height (set by parent .so-shell { height: 100vh }),
 * so when body content is shorter than the viewport the user sees empty
 * iframe space below — not draggable, looks broken. Giving the body zone
 * a 50vh floor in editor mode means any "gap" lives INSIDE the body zone
 * and is therefore a valid drop target. Confirmed via user test 26 Apr
 * 2026: collapsing viewport (devtools open) makes the gap disappear,
 * proving it's just content vs iframe-height differential, not a
 * regression. Live preview is unaffected because .editor-mode is
 * editor-only. */
body.editor-mode #e4-body-zone {
  min-height: 50vh;
}

/* ==========================================================================
   Row & Column Visualization + Grid Lines
   ========================================================================== */

/* ROW: min-height + gridlines - editor mode, ShopOn grid only.
   Scoped to .so-row (NOT .row). Previously matched .row too, which
   indiscriminately tagged every Bootstrap row inside every component
   (featured-products' .so-fp-product-row, the nested .row inside the
   .info section of a product card, etc.), painting phantom 3-side
   border rectangles around all of them in editor mode. Bug surfaced
   24 May 2026 — DIAG dump showed bg-img=linear-gradient on every
   nested .row even after the so-bootstrap-grid auto-tag was disabled.
   .so-row is added only to editor-managed top-level grid rows, so
   scoping here keeps the gridlines exactly where merchants need them
   while leaving component internals untouched. */
body.editor-mode .so-row {
  /* SECTION SPACING HONESTY (8 Jul 2026, #150): blanket `min-height:
     100px !important` REMOVED — it defeated the conditional system in
     so-components.css (`.so-row:not(.has-content):not(.manual-height)`)
     which gives 100px to EMPTY rows only and lets content rows track
     their components (JC-remembered design, verified present). */
  position: relative;
  background:
    linear-gradient(#dee2e6, #dee2e6) bottom / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) left / 1px 100% no-repeat,
    linear-gradient(#dee2e6, #dee2e6) right / 1px 100% no-repeat;
}

/* First row also draws a top line — INSET 2px into the section (8 Jul
   2026, #150 / JC): drawn exactly on the boundary it vanishes whenever
   the NEIGHBOURING section has a similar background (light line on the
   light-above/dark-below seam). 2px inset keeps it visibly inside this
   section's own canvas. Same treatment for the last row's bottom line
   below. Owner rule — adjust positions here, never add painters
   (EDITOR4_CANVAS_GRID_SYSTEM.md §1). */
body.editor-mode .so-row:not(.so-row ~ .so-row) {
  /* selector note (8 Jul): was :first-child — but sections can lead with
     NON-row children (so-accent-layer, shape dividers), making no row
     match and the top edge line silently vanish (JC repro, dark
     carousel). :not(.so-row ~ .so-row) = "first .so-row among siblings"
     regardless of what precedes it. */
  background:
    linear-gradient(#dee2e6, #dee2e6) left 0 top 2px / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) bottom / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) left / 1px 100% no-repeat,
    linear-gradient(#dee2e6, #dee2e6) right / 1px 100% no-repeat;
}

/* Last row: bottom line inset 2px (same seam-visibility rationale) */
body.editor-mode .so-row:not(:has(~ .so-row)) {
  /* was :last-child — video sections append locked bg children AFTER
     the rows; :has(~ .so-row) = "a row follows me", negated = last row. */
  background:
    linear-gradient(#dee2e6, #dee2e6) left 0 bottom 2px / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) left / 1px 100% no-repeat,
    linear-gradient(#dee2e6, #dee2e6) right / 1px 100% no-repeat;
}

/* Single-row section (first AND last): both edge lines inset */
body.editor-mode .so-row:not(.so-row ~ .so-row):not(:has(~ .so-row)) {
  background:
    linear-gradient(#dee2e6, #dee2e6) left 0 top 2px / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) left 0 bottom 2px / 100% 1px no-repeat,
    linear-gradient(#dee2e6, #dee2e6) left / 1px 100% no-repeat,
    linear-gradient(#dee2e6, #dee2e6) right / 1px 100% no-repeat;
}

/* Row drop indicator - interactive, shown during drag only via JS */
/* Static placeholder removed - replaced with interactive drop zone */

/* COLUMN: min-height + separator lines - editor mode, ShopOn grid only.
   Same scoping rationale as the .so-row rule above — target the
   editor-managed cols (.so-col) not every Bootstrap [class*="col-"]
   which leaked the 120px min-height into nested col-md-12 wrappers
   inside featured-products .so-product-info-price (visible as a
   phantom rectangle around card text). The .so-col class is emitted
   alongside col-md-N by so-bootstrap-grid.js line 717, so this scope
   captures every legitimate editor grid col. */
body.editor-mode .so-col {
  /* SECTION SPACING HONESTY (8 Jul 2026, #150): blanket `min-height:
     120px !important` REMOVED — same rationale as the .so-row rule
     above. Empty-col safety lives in so-components.css: empty-row cols
     + align-top/middle/bottom rows' empty cols get 100px; empty cols in
     content rows stretch to row height (default align) and stay
     droppable. */
  position: relative;
}

/* Column separators: draw a LEFT line on every editor grid column
   except the first. Scoped to .so-row > .so-col for the same reason. */
body.editor-mode .so-row > .so-col + .so-col {
  background:
    linear-gradient(#dee2e6, #dee2e6) left / 1px 100% no-repeat;
}

/* Column drop indicator - interactive, shown during drag only via JS */
/* Static placeholder removed - replaced with interactive drop zone in editor4-full-ui.js */

/* ==========================================================================
   Utility Classes (Bootstrap alignment)
   ========================================================================== */

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

/* ==========================================================================
   Typography Defaults (Bootstrap parity)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Component Compatibility Fixes
   ========================================================================== */

/* Ensure tabs, accordions, etc. have proper spacing */
.tab-container,
.accordion {
  margin-bottom: 1rem;
}

/* GrapesJS tabs compatibility */
.tab {
  display: inline-block;
  padding: 7px 14px;
  margin-right: 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab:focus {
  outline: none;
}

.tab.tab-active {
  background-color: #0d94e6;
  color: white;
}

.tab-container {
  display: inline-block;
}

.tab-content {
  animation: fadeEffect 1s;
}

.tab-contents {
  min-height: 100px;
  padding: 10px;
}

@keyframes fadeEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Commit A2 boot-health sentinel */
:root{--e4-ready-skin:1;}