/* ==========================================================================
   CraftNest — Editorial
   Blog index, the 680px reading column, support pages and the legal template.
   ========================================================================== */

/* ==========================================================================
   Blog index
   ========================================================================== */

.cn-featured-post {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  overflow: hidden;
  color: var(--cn-ink);
  transition: box-shadow var(--cn-ease);
}
.cn-featured-post:hover { box-shadow: var(--cn-shadow-hover); color: var(--cn-ink); }
.cn-featured-post__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, var(--cn-ink-a05) 0 8px, transparent 8px 16px);
}
.cn-featured-post__media img { width: 100%; height: 100%; object-fit: cover; }
.cn-featured-post__body {
  padding: var(--cn-space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cn-featured-post__body h2 {
  font-size: var(--cn-fs-44);
  line-height: 1.08;
  margin: 0 0 var(--cn-space-4);
}
@media (max-width: 780px) {
  .cn-featured-post { grid-template-columns: minmax(0, 1fr); }
  .cn-featured-post__body { padding: var(--cn-space-6); }
  .cn-featured-post__body h2 { font-size: var(--cn-fs-24); }
}

.cn-post-card {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  overflow: hidden;
  color: var(--cn-ink);
  display: flex;
  flex-direction: column;
  background: var(--cn-paper);
  transition: box-shadow var(--cn-ease);
}
.cn-post-card:hover { box-shadow: var(--cn-shadow-hover); color: var(--cn-ink); }
.cn-post-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, var(--cn-ink-a05) 0 6px, transparent 6px 12px);
}
.cn-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cn-post-card__body {
  padding: var(--cn-space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cn-post-card__title {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: var(--cn-fs-20);
  line-height: 1.3;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.cn-post-card__excerpt { margin: 0 0 var(--cn-space-4); color: var(--cn-graphite); flex: 1; }
.cn-post-card__foot {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  border-top: 1px solid var(--cn-line);
  padding-top: 14px;
}

/* ==========================================================================
   Reading column — 240 rail, 680 measure, one empty track on the right
   ========================================================================== */

/*
 * Two tracks: the contents rail, and everything else.
 *
 * It used to be three, with the measure boxed to 656px in the middle and a
 * matching empty track on each side. That centred it, but it also left the
 * article a third narrower than every other band on the site, so a post read
 * as a column sitting in a page that had been built for something wider.
 *
 * Now the article fills whatever the rail does not, and its right edge lines
 * up with the shop's -- the same 1280px shell, the same 24px gutter. A post
 * with no rail spans both tracks and matches the homepage exactly.
 *
 * Kept from the old note, because the reason still stands:
 *
 * The third used to be 1fr, which only looks balanced once the shell has hit
 * its 1280px ceiling. Between the point where the rail appears and the point
 * where the shell stops growing, that track was whatever happened to be left:
 * at 1100px the reading column sat 312px from the left and 108px from the
 * right, a 204px lean that reads as the article being shoved to one side.
 *
 * Mirroring the rail centres the measure at every width, and the measure
 * itself gives up the last few pixels rather than the balance -- 656px of
 * text centred beats 680px off to one side.
 */
.cn-article-shell {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--cn-space-12);
  align-items: start;
}
/*
 * Same fix as the shell above, which this one was left out of: a fixed
 * 260px rail beside a fixed 680px measure came to 940px inside a 1232px
 * container, so a legal or help page sat against the left with 292px of
 * nothing to its right. The text takes whatever the rail does not.
 */
.cn-article-shell--legal { grid-template-columns: 260px minmax(0, 1fr); }

/*
 * One track, the whole width. A page with no contents rail lines up with the
 * shop: same 1280px shell, same 24px gutter, same edges as the bands above
 * and below it.
 *
 * This rule went missing for one release when the measure cap was taken out,
 * and without it these pages fell through to the base rule above and put
 * their text in the 240px rail track -- a page of body copy 240px wide with
 * a thousand pixels of nothing beside it.
 */
.cn-article-shell--wide { grid-template-columns: minmax(0, 1fr); }

/*
 * A post with no headings has no contents rail -- craftnest_contents_rail()
 * prints nothing when there is nothing to list -- and the article then became
 * the first grid item and sat in the rail's 240px track. On a 1440px screen
 * that is a 240px column of text with 1,096px of white beside it, which is
 * what "the article is squashed against the left" turned out to be.
 *
 * Placed in the second track explicitly, so the empty rail track becomes a
 * margin and the measure stays centred whether the rail is there or not.
 */
.cn-article-shell:not(.cn-article-shell--wide):not(.cn-article-shell--sections) > :first-child:not(.cn-contents) {
  grid-column: 1 / -1;
}

/* ==========================================================================
   The article runs the full width of the shell
   --------------------------------------------------------------------------
   The measure was capped here for a while, and it did make the sentences
   easier to read, but it put the text on a different width from everything
   around it: "Keep reading" is drawn outside the article and spans the whole
   shell, so the page had a narrow column of words sitting between two
   full width blocks. Matching them is the shop's call, and it was asked for
   twice.

   A line is about 180 characters at 1280px, which is wide. If that ever
   wants reining in, one rule brings the measure back:

     .cn-prose > :not(figure):not(table):not(pre) { max-width: 780px; }
   ========================================================================== */

@media (max-width: 1320px) {
  .cn-article-shell,
  .cn-article-shell--legal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cn-space-8);
  }
  .cn-article-shell > .cn-contents { order: -1; }
  /*
   * One track now, so the placement above would invent a second one. Written
   * with the same selector it is undoing, because a media query adds no
   * specificity and the shorter version lost.
   */
  .cn-article-shell:not(.cn-article-shell--wide):not(.cn-article-shell--sections) > :first-child:not(.cn-contents) {
    grid-column: 1 / -1;
  }
}

.cn-article__meta {
  display: flex;
  gap: var(--cn-space-4);
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--cn-line);
  border-bottom: 1px solid var(--cn-line);
  padding-block: var(--cn-space-5);
  margin-bottom: var(--cn-space-8);
}
.cn-article__avatar {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: var(--cn-radius-badge);
  overflow: hidden;
  background: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, rgba(14, 17, 22, .07) 0 4px, transparent 4px 8px);
}
.cn-article__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cn-article__byline { flex: 1; min-width: 200px; }
.cn-article__name { display: block; font-size: var(--cn-fs-16); font-weight: 500; }
.cn-article__dates {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  line-height: 1.8;
  text-align: end;
}
@media (max-width: 600px) { .cn-article__dates { text-align: start; } }

/* Prose. The body specimen: 18px lead, 16px graphite paragraphs.
 *
 * A page assembled from the section shortcodes is still wrapped in .cn-prose,
 * so every rule below has to stop at the edge of a section the theme drew.
 * Without the guard the prose list padding pushed every product grid on the
 * homepage 20px to the right, the prose h3 blew card titles from 16px to
 * 24px with a 32px top margin, and the prose img margin dropped 32px of air
 * above and below every card thumbnail. The :not() is repeated on each rule
 * rather than hoisted so that every selector gains the same specificity and
 * the order inside this block is preserved exactly.
 */
.cn-prose { font-size: var(--cn-fs-16); }
.cn-prose > p:first-of-type:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { font-size: var(--cn-fs-18); color: var(--cn-ink); }
.cn-prose p:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { margin: 0 0 var(--cn-space-5); color: var(--cn-graphite); }
.cn-prose h2:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) {
  font-size: var(--cn-fs-32);
  letter-spacing: var(--cn-track-tight);
  margin: var(--cn-space-10) 0 var(--cn-space-4);
  color: var(--cn-ink);
}
.cn-prose h3:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) {
  font-size: var(--cn-fs-24);
  margin: var(--cn-space-8) 0 var(--cn-space-3);
  color: var(--cn-ink);
}
.cn-prose h4:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { font-size: var(--cn-fs-20); margin: var(--cn-space-6) 0 var(--cn-space-2); }
.cn-prose ul:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *),
.cn-prose ol:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { margin: 0 0 var(--cn-space-6); padding-inline-start: 20px; color: var(--cn-graphite); }
.cn-prose li:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { margin-bottom: var(--cn-space-2); }
.cn-prose img:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *),
.cn-prose figure:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { margin-block: var(--cn-space-8); }
.cn-prose figure img:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { border: 1px solid var(--cn-line); border-radius: var(--cn-radius-card); }
.cn-prose .wp-block-image img:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { border-radius: var(--cn-radius-card); }
.cn-prose table:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { margin-block: var(--cn-space-8); }
/* A section dropped into a page keeps its own typography: prose rules are for
   paragraphs somebody wrote, not for a band the theme drew. */
.cn-prose :is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) :is(p, li) {
  color: inherit;
  font-size: inherit;
}
.cn-prose :is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) > :first-child { margin-top: 0; }

/* Underline links in prose, but not inside a section dropped into the page:
   a button in a banner is not a link in a paragraph. */
.cn-prose a:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { text-decoration: underline; text-underline-offset: 2px; }
.cn-prose :is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) a { text-decoration: none; }
.cn-prose :is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) a:hover { text-decoration: none; }
.cn-prose blockquote p:not(:is(section, .cn-shell, .cn-band--ink, .cn-catstrip, .cn-marquee) *) { color: var(--cn-ink); }

/* Inline product card, dropped mid article */
.cn-inline-product {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-space-5);
  display: flex;
  gap: var(--cn-space-5);
  align-items: center;
  flex-wrap: wrap;
  margin-block: var(--cn-space-10);
  background: var(--cn-paper);
}
.cn-inline-product__thumb {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, var(--cn-ink-a06) 0 6px, transparent 6px 12px);
}
.cn-inline-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn-inline-product__info { flex: 1; min-width: 200px; }
.cn-inline-product__name { font-size: var(--cn-fs-18); font-weight: 500; line-height: 1.3; }
.cn-inline-product__buy {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-2);
  min-width: 180px;
}

/* Author box */
.cn-authorbox {
  display: flex;
  gap: var(--cn-space-5);
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--cn-surface);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-space-8);
  margin-top: var(--cn-space-8);
}
.cn-authorbox__avatar {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: var(--cn-radius-badge);
  overflow: hidden;
  background: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, rgba(14, 17, 22, .07) 0 4px, transparent 4px 8px);
}
.cn-authorbox__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cn-authorbox__body { flex: 1; min-width: 260px; }
.cn-authorbox p { color: var(--cn-graphite); margin-bottom: var(--cn-space-3); }

/* ==========================================================================
   Support pages
   ========================================================================== */

.cn-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--cn-space-12);
}
@media (max-width: 780px) {
  .cn-help-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cn-space-8); }
}
.cn-help-grid h2 { font-size: var(--cn-fs-24); letter-spacing: normal; margin: 0 0 var(--cn-space-4); }
.cn-help-grid h2 + .cn-accordion { margin-bottom: var(--cn-space-10); }

/* Help centre topic cards */
.cn-helpcard {
  display: flex;
  flex-direction: column;
  color: var(--cn-ink);
}
.cn-helpcard:hover { color: var(--cn-ink); }
.cn-helpcard p { flex: 1; margin-bottom: var(--cn-space-4); }
.cn-helpcard__cta {
  margin-top: auto;
  border-top: 1px solid var(--cn-line);
  padding-top: var(--cn-space-4);
  color: var(--cn-accent);
}

/* Licence comparison table — the middle column is the recommended one, so it
   carries a tinted band the full height of the table. */
.cn-table--licence { min-width: 680px; }
.cn-table--licence th,
.cn-table--licence td { text-align: start; }
.cn-table--licence .cn-table__tier { text-align: center; width: 18%; }
.cn-table--licence th.cn-table__tier {
  font-family: var(--cn-font-display);
  font-size: var(--cn-fs-16);
  font-weight: 600;
  color: var(--cn-ink);
  text-transform: none;
  letter-spacing: normal;
  padding-block: var(--cn-space-5);
}
.cn-table--licence th.cn-table__tier .cn-badge { display: block; margin: 6px auto 0; width: max-content; }
.cn-table--licence .cn-table__tier.is-featured { background: var(--cn-accent-a08); }
.cn-table--licence th.cn-table__tier.is-featured { box-shadow: inset 0 2px 0 var(--cn-accent); }
.cn-table--licence .cn-table__tier svg { display: inline-block; }
/* Graphite, not the disabled hairline. The dash is the only mark in a "no"
   cell, so it has to be legible: at --cn-disabled-line it measured 1.74:1 on
   paper and 1.56:1 on the featured column. Screen 09 prints the word "No" in
   graphite in this cell, so graphite is the design's own answer. */
/* Screen 09 prints the words in mono uppercase: green for yes, graphite for
   no. The dash this replaced sat at 1.56:1 on the featured column and was
   aria-hidden, so the only visible mark in the cell was also the least legible
   thing on the page. */
.cn-table__yes { color: var(--cn-success); }
.cn-table__no { color: var(--cn-graphite); }

.cn-contact-aside { display: flex; flex-direction: column; gap: var(--cn-space-4); }
.cn-status-dot {
  width: 8px; height: 8px;
  border-radius: var(--cn-radius-badge);
  background: var(--cn-success);
  flex: 0 0 8px;
}
.cn-quicklinks a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cn-space-4);
  min-height: 52px;
  color: var(--cn-ink);
  border-bottom: 1px solid var(--cn-line);
}
.cn-quicklinks a:first-child { border-top: 1px solid var(--cn-line); }
.cn-quicklinks a:last-child { border-bottom: 0; }
.cn-quicklinks a:hover { color: var(--cn-accent); }
.cn-quicklinks a span { color: var(--cn-accent); }

/* 404 */
.cn-404__code {
  font-family: var(--cn-font-display);
  font-weight: 600;
  font-size: var(--cn-fs-76);
  line-height: 1;
  letter-spacing: var(--cn-track-tight);
  margin-bottom: var(--cn-space-4);
}

/* Sitemap */
.cn-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--cn-space-8);
}
.cn-sitemap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cn-sitemap li { margin: 0; }
.cn-sitemap a { color: var(--cn-ink); display: inline-flex; min-height: 32px; align-items: center; }
.cn-sitemap a:hover { color: var(--cn-accent); }

/* Comments */
.cn-comments { border-top: 1px solid var(--cn-line); padding-top: var(--cn-space-8); margin-top: var(--cn-space-8); }
.cn-comments ol { list-style: none; margin: 0; padding: 0; }
.cn-comments .children { list-style: none; padding-inline-start: var(--cn-space-6); margin: 0; }
.cn-comment {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-space-5);
  margin-bottom: var(--cn-space-4);
}
.cn-comment__head { display: flex; gap: var(--cn-space-3); align-items: center; margin-bottom: var(--cn-space-3); }
.comment-respond { margin-top: var(--cn-space-8); }
.comment-form { display: flex; flex-direction: column; gap: var(--cn-space-4); }
.comment-form label {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  display: block;
  margin-bottom: var(--cn-space-2);
}

/* ==========================================================================
   Freebies, wishlist and search results reuse the product grid, so only the
   page furniture is defined here.
   ========================================================================== */

.cn-authshell {
  /* It sits on its own, not inside a shell, so it carries the page measure
     and gutter itself — without them the cards ran to the window edge. */
  max-width: var(--cn-max);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--cn-space-12);
  align-items: start;
}
.cn-authcard {
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-space-8);
}
.cn-authcard form { display: flex; flex-direction: column; gap: var(--cn-space-4); }

/*
 * Account deletion. Warm, not red: this is the same "careful" colour the rest
 * of the system uses, and a second red would be a tenth token.
 */
.cn-danger { border-color: var(--cn-warm-a35); background: var(--cn-warm-a10); }
/* Outspecifies `.cn-authcard form { flex-direction: column }`, which would
   otherwise stack these two and push them to the right. */
.cn-authcard .cn-danger__form,
.cn-danger__form {
  display: flex;
  flex-direction: row;
  gap: var(--cn-space-3);
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.cn-danger__button {
  background: var(--cn-paper);
  border: 1px solid var(--cn-warm-text);
  color: var(--cn-warm-text);
}
.cn-danger__button:hover { background: var(--cn-warm-text); color: var(--cn-on-fill); }

/* Request form success state */
.cn-request__done { text-align: start; }

@media (max-width: 600px) {
  .cn-authcard { padding: var(--cn-space-5); }
}

/* ==========================================================================
   Block editor alignments, so pasted content behaves inside the shell
   ========================================================================== */

.cn-prose .alignwide  { max-width: 900px; margin-inline: auto; }
.cn-prose .alignfull  { max-width: none; }
.cn-prose .alignleft  { float: left;  margin: 0 var(--cn-space-6) var(--cn-space-4) 0; }
.cn-prose .alignright { float: right; margin: 0 0 var(--cn-space-4) var(--cn-space-6); }
.cn-prose .aligncenter { margin-inline: auto; }
.cn-prose::after { content: ''; display: table; clear: both; }

.wp-block-button__link {
  font-family: var(--cn-font-display);
  font-weight: 600;
  border-radius: var(--cn-radius-button);
  background: var(--cn-accent);
  color: var(--cn-on-fill);
  padding: 0 var(--cn-space-6);
  height: var(--cn-control);
  display: inline-flex;
  align-items: center;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--cn-ink);
  color: var(--cn-ink);
}

/* Service list on the maintenance page — screen 14b */
.cn-status {
  list-style: none;
  margin: var(--cn-space-10) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cn-space-3) var(--cn-space-6);
}
.cn-status li { display: flex; align-items: center; gap: var(--cn-space-2); margin: 0; }
.cn-status-dot--paused { background: var(--cn-warm); }
.cn-on-ink .cn-status .cn-mono { color: var(--cn-white-a72); }

/* Social links in the contact aside — screen 09b */
.cn-sociallist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--cn-space-4);
  flex-wrap: wrap;
}
.cn-sociallist li { margin: 0; }
.cn-sociallist a { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-15); }

/* Reasons to create an account — screen 10a */
.cn-ticklist {
  list-style: none;
  margin: var(--cn-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-2);
}
.cn-ticklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-2);
  margin: 0;
  font-size: var(--cn-fs-15);
  color: var(--cn-graphite);
}
.cn-ticklist svg { flex: 0 0 auto; margin-top: 3px; }

/* Row headers in the licence matrix are <th scope="row"> for screen readers;
   they should still read as body cells. */
.cn-table--licence th[scope="row"] {
  text-align: start;
  font-weight: 500;
  background: transparent;
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  color: inherit;
}

/* A page built with a page builder lays out its own rows, so the reading
   column has to get out of the way. The theme still supplies the header, the
   footer and the type; the builder supplies the middle. */
.cn-builder-page .cn-article-shell--wide,
.cn-builder-page .cn-article-shell--sections { grid-template-columns: minmax(0, 1fr); }
.cn-builder-page .cn-prose { max-width: none; }
.cn-builder-page .cn-prose .vc_row,
.cn-builder-page .cn-prose .porto-block { max-width: none; }