/* Case study: Ecommerce Website Using BigCommerce Platform (Dainty Jewells)
   Reference: https://www.cloudconverge.io/case-studies/portfolio-ecommerce/
   Prefix: cs-ecom- */

/* ---------- Breadcrumb color override ----------
   Same theme-level override as the Helm Boots case study: this template's
   breadcrumb is solid black/near-black (measured rgb(0,0,0) links/separator,
   rgb(25,25,25) current-page text) instead of the shared blue/gray scheme.
   Scoped to this page only via .cs-ecom-page; no shared file touched. */
.cs-ecom-page .breadcrumb-list a,
.cs-ecom-page .breadcrumb-list a:hover,
.cs-ecom-page .breadcrumb-sep,
.cs-ecom-page .breadcrumb-list li,
.cs-ecom-page .breadcrumb-list [aria-current="page"] {
  color: #000;
}
@media (max-width: 767px) {
  .cs-ecom-page .breadcrumb-list {
    flex-wrap: wrap;
  }
  /* Reference shrinks the breadcrumb text itself on mobile (14px/26px desktop
     down to 12px/20px) — without this the text wraps a word earlier than the
     reference ("Using / BigCommerce" instead of "BigCommerce / Platform"). */
  .cs-ecom-page .breadcrumb-list li {
    font-size: 12px;
    line-height: 20px;
  }
}
.cs-ecom-page .breadcrumb-list li:last-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Hero banner (single full-bleed baked image, edge to edge) ---------- */
.cs-ecom-hero {
  overflow: hidden;
}
.cs-ecom-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Two-column text/image rows ----------
   Reference: two 570px columns inside the 1140px .container with zero flex
   gap between them (measured via getBoundingClientRect: left column right
   edge = right column left edge, no gutter). The text column has 45px of
   padding on every side (not edge-to-edge — confirmed via getComputedStyle
   on the live reference); the image column carries 15px of padding on both
   sides, which is what creates the visual gap next to the text. */
/* Row-level padding is genuinely different per row on the reference (each
   is an independently-configured Elementor section, not a repeated
   pattern), confirmed by reading the reference's own dynamic CSS rather
   than guessing from a shared rule:
   - row 1 (cs-ecom-row-1): 60px top padding only, no bottom padding of its
     own — this is what creates the gap under the breadcrumb.
   - row 2 (cs-ecom-row-2): 48px padding top AND bottom (their "3em 0em").
   A single ".cs-ecom-row + .cs-ecom-row{padding-top:0}" rule previously
   patched the breadcrumb gap but incorrectly zeroed out row 2's own real
   padding as a side effect — replaced with explicit per-row classes so
   each row's padding is independent and matches the reference exactly. */
.cs-ecom-row-1 {
  padding-top: 60px;
}
.cs-ecom-row-2 {
  padding: 48px 0;
}
.cs-ecom-row-inner {
  display: flex;
  align-items: stretch;
  /* The shared .container class adds 15px of side padding, correct for
     every other page that reuses it — but this row's own Elementor
     container on the reference has genuine 0 side padding at its 1140px
     max-width (confirmed via getComputedStyle on the live reference), so
     the inherited 15px was silently shrinking the two-column row content
     area from 1140px to 1110px. Overridden here, scoped to this row only. */
  padding: 0;
}
/* Columns must be a literal 50/50 width split, not an equal flex-grow split.
   flex:1 1 0 distributes free space equally but then adds each column's own
   padding/margin on top of that equal share — since the text column carries
   90px of padding (45+45) and the image column only ~30px, that produced a
   585px/525px split instead of 570/570 on this exact build (caught via a
   user screenshot showing the wrong gap). Elementor's own columns are
   percentage-width (`width:50%`), which is unaffected by a child's own
   padding, so match that instead. */
.cs-ecom-col {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  box-sizing: border-box;
}
.cs-ecom-image-col {
  padding: 0 15px;
  box-sizing: border-box;
}
.cs-ecom-image-col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
}
/* Reference uses a theme-level ".move-image-left-right" hover class on both
   gallery images: box-shadow + border-radius always on, and on hover the
   image slides 10px left (confirmed via the reference's own dynamic CSS —
   ".move-image-left-right:hover img { transform: translate3d(-10px,0,0) }"). */
.cs-ecom-image-col:hover img {
  transform: translate3d(-10px, 0, 0);
}

/* ---------- Text column typography (left-aligned, unlike the centered Helm
   Boots template) ---------- */
.cs-ecom-text-col {
  padding: 45px;
}
.cs-ecom-text-col h1 {
  font-size: 36px;
  font-weight: 600;
  line-height: 42px;
  color: var(--color-heading);
  text-align: left;
  margin: 0 0 20px;
}
.cs-ecom-text-col p {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-body);
  text-align: left;
  margin: 0 0 20px;
}
.cs-ecom-text-col p:last-child {
  margin-bottom: 0;
}
.cs-ecom-dash {
  margin: 0 0 4px !important;
}

/* ---------- "Our Mission" column: light-gray background box, 45px padding,
   stretched to the full row height (matches the reference's empty gray
   space below the shorter text block, since the column is a flex item with
   default align-items:stretch). ---------- */
.cs-ecom-mission-col {
  background: #f4f4f4;
  padding: 45px;
  box-sizing: border-box;
}
.cs-ecom-mission-col h2,
.cs-ecom-mission-col h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-heading);
  text-align: left;
  margin: 0 0 20px;
}
.cs-ecom-mission-col p {
  margin: 0 0 20px;
}
.cs-ecom-mission-col > *:last-child {
  margin-bottom: 0;
}

/* ---------- Next/previous pagination (this page only has a "Next Post",
   right-aligned; the reference's own theme markup reserves an empty middle
   "back" slot and an empty "previous" slot when there's nothing earlier) ---------- */
.cs-ecom-pagination {
  padding: 50px 0 60px;
}
.cs-ecom-pagination-inner {
  display: flex;
  justify-content: flex-end;
}
.cs-ecom-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  max-width: 460px;
}
.cs-ecom-nav-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}
.cs-ecom-nav-eyebrow {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary);
}
.cs-ecom-nav-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-heading);
  transition: color 0.2s ease;
}
.cs-ecom-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.cs-ecom-nav-link:hover .cs-ecom-nav-arrow {
  background-color: var(--color-primary);
  color: #fff;
}

/* ---------- Responsive ----------
   Unlike the Helm Boots case study (one single-column template with a
   single max-width:767px breakpoint), this page's template stacks its
   two-column rows a full tier earlier — confirmed by reading the reference's
   own dynamic CSS: every column here gets `width:100%` inside a
   `(max-width:1024px) and (min-width:768px)` query, i.e. genuine tablet
   width already stacks. Typography changes (H1 size, paragraph justify)
   only appear in the reference's CSS at max-width:767px, so those stay
   gated to the narrower breakpoint even though the layout itself has
   already stacked by then. */
@media (max-width: 1024px) {
  .cs-ecom-row-inner {
    flex-direction: column;
  }
  .cs-ecom-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cs-ecom-image-col {
    padding: 0 15px;
  }
  .cs-ecom-text-col {
    padding: 25px 15px 0;
  }
  .cs-ecom-mission-col {
    padding: 30px 15px 0;
  }
}
@media (max-width: 767px) {
  .cs-ecom-text-col h1 {
    font-size: 24px;
    line-height: 36px;
    text-align: center;
  }
  .cs-ecom-row-1 {
    padding-top: 30px;
  }
  .cs-ecom-mission-col h2 {
    text-align: center;
  }
  .cs-ecom-text-col p {
    text-align: justify;
  }
  /* Row 1 keeps its 60px top padding at every width (no mobile override on
     the reference); row 2's own top/bottom padding shrinks from 48px to
     25px-top/0-bottom — confirmed via the reference's dynamic CSS for its
     row-2 section id, not a guess. */
  .cs-ecom-row-2 {
    padding: 25px 0 0;
  }
  .cs-ecom-text-col {
    padding: 25px;
  }
  /* Row 1's image (below the text) and row 2's image (above the mission
     box) carry different Elementor-authored margins on the reference —
     confirmed via getComputedStyle on the live reference: row1 image wrap
     = margin 25px top / 20px sides / 10px bottom; row2 image wrap =
     margin 0 top / 15px sides / 15px bottom. Target by DOM position within
     the row (image-col is last-child in row 1, first-child in row 2) to
     avoid the earlier :first-of-type sibling-count bug. */
  .cs-ecom-image-col {
    padding: 0;
  }
  .cs-ecom-row-inner .cs-ecom-image-col:last-child {
    margin: 25px 20px 10px;
  }
  .cs-ecom-row-inner .cs-ecom-image-col:first-child {
    margin: 0 15px 15px;
  }
  .cs-ecom-mission-col {
    padding: 25px;
    margin: 20px;
  }
  .cs-ecom-pagination-inner {
    justify-content: center;
  }
  .cs-ecom-nav-text {
    align-items: flex-start;
    text-align: left;
  }
  /* Same theme-level ".case-studies-banner img" rule as the Helm Boots
     case study (confirmed identical class on this page's hero): fixed
     260px height, left-anchored crop, instead of scaling down thin. */
  .cs-ecom-hero img {
    min-height: 260px;
    object-fit: cover;
    object-position: left center;
  }
}