/* ============================================================================
   BREAZY - RICH TEXT
   Loaded last on every page that renders imported copy, so its rules sit
   after the page, product and archive rules exactly as they did in v2 - the
   generic `.bz-rich p` / `.bz-rich img` rules win over the page-level ones at
   equal specificity by source order.
   ========================================================================== */

/* ============================================================================
   RICH TEXT COMPONENTS  (.bz-rich)
   One system for every body of imported copy: product descriptions, category
   descriptions, the long-form copy beneath category grids, and content pages.
   The authored markup shipped its own <style> block, which the importer
   strips; that house style is expressed here once, in theme tokens.

   Scoping to .bz-rich is required, not cosmetic: the source uses generic names
   (.hero, .details, .notice, .card, .feature-card) that collide with the theme.

   Authored copy sets its own colours inline - including panels with a dark
   ground and white text. Colour is therefore set ONCE on the wrapper and
   inherited; explicit colours below appear only where this stylesheet also
   owns the background.
   ========================================================================== */
.bz-rich{
  --rich-edge:#cfe7f6;--rich-wash:#f2f9fe;--rich-wash-2:#e6f4fd;
  color:var(--body);
}

/* ---- panels: the pale gradient container ---- */
.bz-rich .breazy-section,
.bz-rich .breazy-read-more,
.bz-rich .breazy-seo-wrap,
.bz-rich .hero,
.bz-rich .breazy-hero{
  margin:0 0 var(--s5);padding:var(--s6);
  background:linear-gradient(180deg,var(--rich-wash) 0%,var(--rich-wash-2) 100%);
  border:1px solid var(--rich-edge);border-radius:18px;
}
.bz-rich .breazy-product-wrapper,
.bz-rich .breazy-product-wrap,
.bz-rich .breazy-content-wrap,
.bz-rich .breazy-seo-inner,
.bz-rich .breazy-product-section{max-width:none;margin:0}

/* ---- cards ---- */
.bz-rich .breazy-card,
.bz-rich .breazy-product-card,
.bz-rich .breazy-faq-card,
.bz-rich .breazy-info-card,
.bz-rich .breazy-compare-card,
.bz-rich .breazy-product-block,
.bz-rich .flavor-card{
  margin:0 0 var(--s4);padding:var(--s5);
  background:var(--paper);
  border:1px solid var(--rich-edge);border-radius:16px;
  box-shadow:0 6px 20px rgba(38,144,190,.07);
}
.bz-rich .breazy-card:last-child,
.bz-rich .breazy-product-card:last-child,
.bz-rich .breazy-faq-card:last-child,
.bz-rich .breazy-info-card:last-child{margin-bottom:0}

/* Feature cards carry a brand accent bar down their leading edge. */
.bz-rich .feature-card,
.bz-rich .breazy-feature-card{
  margin:0;padding:var(--s4) var(--s4) var(--s4) var(--s5);
  background:var(--paper);
  border:1px solid var(--rich-edge);
  border-left:4px solid var(--brand);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(38,144,190,.07);
}

/* ---- headings inside rich text ---- */
.bz-rich .breazy-card h2,
.bz-rich .breazy-product-card h2,
.bz-rich .breazy-compare-card h2,
.bz-rich .breazy-info-card h2,
.bz-rich .hero h2,
.bz-rich .breazy-hero h2,
.bz-rich .breazy-section > h2{
  margin:0 0 var(--s3);font-family:var(--display);
  font-size:var(--fs-5);font-weight:700;line-height:1.2;
  color:var(--brand-ink);letter-spacing:-.005em;
}
.bz-rich h2:not([style*="color"]),
.bz-rich h3:not([style*="color"]),
.bz-rich h4:not([style*="color"]){font-family:var(--display);font-weight:700}
.bz-rich .breazy-card h3,
.bz-rich .breazy-product-card h3,
.bz-rich .feature-card h3,
.bz-rich .feature-card h4,
.bz-rich .breazy-feature-title,
.bz-rich .breazy-faq-card-title,
.bz-rich .breazy-info-card-title,
.bz-rich .faq-question{
  margin:0 0 var(--s2);font-family:var(--display);
  font-size:var(--fs-3);font-weight:700;
  line-height:var(--lh-snug);
}
.bz-rich .breazy-card h3:not([style*="color"]),
.bz-rich .breazy-product-card h3:not([style*="color"]),
.bz-rich .feature-card h3:not([style*="color"]),
.bz-rich .breazy-faq-card-title:not([style*="color"]),
.bz-rich .breazy-info-card-title:not([style*="color"]){color:var(--brand-ink)}
.bz-rich .breazy-faq-title,
.bz-rich .breazy-read-more-title{
  margin:0 0 var(--s5);text-align:center;font-family:var(--display);
  font-size:var(--fs-6);font-weight:700;color:var(--ink);line-height:1.15;
}

/* ---- body copy ---- */
.bz-rich p,
.bz-rich .breazy-faq-card-body,
.bz-rich .breazy-info-card-body,
.bz-rich .faq-answer{margin:0 0 var(--s3);font-size:var(--fs-2);line-height:1.75}
.bz-rich p:last-child{margin-bottom:0}
.bz-rich strong,.bz-rich b{font-weight:700}
.bz-rich a{color:var(--brand-ink);font-weight:600}
.bz-rich a:hover{color:var(--brand-fill)}

/* Theme components nested inside imported rich text: `.bz-rich a` (0,1,1)
   outranks a component's own class rule (0,1,0), so each component's intended
   colour is restated at (0,2,1). On the guide CTAs the prose colour would be
   invisible text: --brand-ink and --brand-fill are the same hex. */
.bz-rich a.bz-guide-product__cta,
.bz-rich a.bz-guide-product__cta:hover,
.bz-rich a.bz-guide-product__cta:focus{color:#fff}
.bz-rich a.bz-flavors__item{color:#3d3a3a;font-weight:inherit}
.bz-rich a.bz-guide__item{color:var(--ink);font-weight:inherit}
.bz-rich a.bz-guide-product__media{color:inherit;font-weight:inherit}
.bz-rich a.bz-guide-product__title,
.bz-rich .bz-guide-product__title a{color:var(--ink)}

/* ---- eyebrow pill (section badge) ---- */
.bz-rich .breazy-intro-pill,
.bz-rich .breazy-flavor-pill,
.bz-rich .breazy-badge{
  display:inline-block;padding:7px 16px;margin:0 6px 8px 0;
  background:var(--brand-fill);color:#fff;
  border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.bz-rich .breazy-intro-pills{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0 0;padding:0;list-style:none}
.bz-rich .breazy-copy-intro{margin:0 0 var(--s5)}

/* ---- grids ---- */
.bz-rich .feature-grid,
.bz-rich .flavor-grid,
.bz-rich .breazy-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s4);margin:0 0 var(--s5);
}

/* ---- spec / detail lists: pill rows ---- */
.bz-rich .breazy-specs,
.bz-rich .breazy-product-details,
.bz-rich .breazy-feature-list,
.bz-rich .breazy-compatible-list,
.bz-rich .compatibility,
.bz-rich .details{margin:0 0 var(--s4);padding:0;list-style:none}
.bz-rich .breazy-specs ul,
.bz-rich .breazy-product-details ul,
.bz-rich .breazy-feature-list ul,
.bz-rich .breazy-compatible-list ul,
.bz-rich .compatibility ul,
.bz-rich .details ul{margin:0;padding:0;list-style:none}
.bz-rich .breazy-specs li,
.bz-rich .breazy-product-details li,
.bz-rich .breazy-feature-list li,
.bz-rich .breazy-compatible-list li,
.bz-rich .compatibility li,
.bz-rich .details li{
  margin:0 0 var(--s2);padding:12px 16px;
  background:var(--rich-wash);border:1px solid var(--rich-edge);
  border-radius:10px;color:var(--body);font-size:var(--fs-2);line-height:1.6;
}
.bz-rich .breazy-specs li:last-child,
.bz-rich .breazy-product-details li:last-child,
.bz-rich .details li:last-child{margin-bottom:0}

/* ---- plain lists keep their markers ---- */
.bz-rich ul:not([class]),.bz-rich ol:not([class]){margin:0 0 var(--s4);padding-left:22px;line-height:1.75}
.bz-rich ul:not([class]) li,.bz-rich ol:not([class]) li{margin:0 0 8px;font-size:var(--fs-2)}

/* ---- tables (21 product descriptions and 3 category blocks carry one) ---- */
.bz-rich table{
  width:100%;border-collapse:separate;border-spacing:0;
  margin:0 0 var(--s5);font-size:var(--fs-2);
  border:1px solid var(--rich-edge);border-radius:12px;overflow:hidden;
}
.bz-rich table th,.bz-rich table td{
  padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rich-edge);color:var(--body);
}
.bz-rich table thead th{
  background:var(--rich-wash-2);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:var(--fs-2);
}
.bz-rich table tr:last-child td{border-bottom:0}
.bz-rich table tr:nth-child(even) td{background:var(--rich-wash)}

/* ---- comparison rows (a table expressed as a grid in the source) ---- */
.bz-rich .breazy-compare-grid{display:grid;gap:10px;width:100%}
.bz-rich .breazy-compare-row{
  display:grid;grid-template-columns:200px repeat(auto-fit,minmax(180px,1fr));
  gap:10px;align-items:stretch;
}
.bz-rich .breazy-compare-feature{
  padding:14px 16px;background:var(--rich-wash-2);
  border:1px solid var(--rich-edge);border-radius:10px;
  color:var(--ink);font-weight:700;font-size:var(--fs-2);
}
.bz-rich .breazy-compare-item{
  padding:14px 16px;background:var(--paper);
  border:1px solid var(--rich-edge);border-radius:10px;
  color:var(--body);
}
.bz-rich .breazy-compare-label{
  display:block;margin-bottom:4px;color:var(--brand-ink);
  font-size:var(--fs-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.bz-rich .breazy-compare-text{font-size:var(--fs-2);line-height:1.6;color:var(--body)}

/* ---- notices and statutory warnings ---- */
.bz-rich .breazy-warning,
.bz-rich .breazy-disclaimer,
.bz-rich .disclaimer{
  margin:var(--s4) 0 0;padding:16px 18px;
  background:#fff5f5;border-left:4px solid var(--deal);
  border-radius:0 10px 10px 0;
  font-size:var(--fs-1);line-height:1.7;color:var(--body);
}
.bz-rich .breazy-notice,
.bz-rich .breazy-note,
.bz-rich .notice{
  margin:var(--s4) 0;padding:16px 18px;
  background:var(--rich-wash);border-left:4px solid var(--brand);
  border-radius:0 10px 10px 0;
  font-size:var(--fs-2);line-height:1.7;color:var(--body);
}

/* ---- the read-more accordion the source markup builds from a checkbox ----
   This copy already sits inside the category description's own Read More, so
   the inner content is simply shown and its now-redundant control removed. On
   /collections/vape-juice the double control was hiding 10 FAQ cards. */
.bz-rich .breazy-read-more-wrap{margin-top:var(--s4)}
.bz-rich .breazy-read-more-checkbox{display:none}
.bz-rich .breazy-read-more-content{display:block;margin-top:var(--s5)}
.bz-rich .breazy-read-more-toggle,
.bz-rich .breazy-read-more-wrap > label{display:none}

/* ---- Word/Excel paste residue carried in from the source ---- */
.bz-rich .p1,.bz-rich .p2,.bz-rich .p3,
.bz-rich .li1,.bz-rich .li3,.bz-rich .ul1{margin:0 0 var(--s3);font:inherit;color:var(--body)}
.bz-rich .Apple-converted-space{display:inline}
.bz-rich p:empty,.bz-rich div:empty:not([class]){display:none}
.bz-rich img{max-width:100%;height:auto;border-radius:10px}

@media (max-width:760px){
  .bz-rich .breazy-section,
  .bz-rich .breazy-read-more,
  .bz-rich .hero,
  .bz-rich .breazy-hero{padding:var(--s4);border-radius:14px}
  .bz-rich .breazy-card,
  .bz-rich .breazy-product-card,
  .bz-rich .breazy-faq-card,
  .bz-rich .breazy-compare-card{padding:var(--s4)}
  .bz-rich .feature-grid,
  .bz-rich .flavor-grid,
  .bz-rich .breazy-grid{grid-template-columns:1fr}
  .bz-rich .breazy-compare-row{grid-template-columns:1fr}
  .bz-rich .breazy-faq-title,
  .bz-rich .breazy-read-more-title{font-size:var(--fs-5);text-align:left}
  .bz-rich table{display:block;overflow-x:auto}
}

/* ---- plain product descriptions (.bz-rich--plain) ----
   722 of 1,616 products have no authored structure - just prose and a spec
   list. This gives that shape a deliberate treatment using the theme's own
   type and palette. Every selector is a CHILD combinator so authored cards,
   which nest their content inside <div>s, are never touched. The class is
   doubled on the list rules so they outrank the generic `.bz-rich ul:not([class])`
   rules above at (0,2,x). */
.bz-rich--plain > p{
  max-width:72ch;
  font-size:var(--fs-3);
  line-height:1.72;
  margin:0 0 var(--s4);
}
.bz-rich--plain > h2,
.bz-rich--plain > h1{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-5);line-height:var(--lh-snug);
  color:var(--ink);
  margin:var(--s6) 0 var(--s4);
  padding-bottom:var(--s2);
  border-bottom:2px solid var(--rich-edge);
}
.bz-rich--plain > h1:first-child,
.bz-rich--plain > h2:first-child{margin-top:0}
.bz-rich--plain > h3,
.bz-rich--plain > h4{
  font-family:var(--display);font-weight:700;
  font-size:var(--fs-4);line-height:var(--lh-snug);
  color:var(--brand-deep);
  margin:var(--s5) 0 var(--s3);
}
/* The spec list becomes a panel: two columns of hairline-separated rows. */
.bz-rich.bz-rich--plain > ul{
  list-style:none;
  margin:0 0 var(--s5);
  padding:var(--s2) var(--s5);
  border:1px solid var(--rich-edge);
  border-radius:var(--r-1);
  background:var(--rich-wash);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s6);
  line-height:1.55;
}
.bz-rich.bz-rich--plain > ul > li{
  position:relative;
  margin:0;
  padding:10px 0 10px 20px;
  font-size:var(--fs-2);
  line-height:1.55;
  border-bottom:1px solid var(--rich-edge);
}
.bz-rich.bz-rich--plain > ul > li::before{
  content:"";
  position:absolute;left:2px;top:1.15em;
  width:6px;height:6px;border-radius:50%;
  background:var(--brand-fill);
}
/* Close the panel cleanly: no rule under the final row. In a two-column grid
   that is the last item, plus the second-to-last when the last row is full. */
.bz-rich.bz-rich--plain > ul > li:last-child,
.bz-rich.bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:0}
/* Imported spec items end with a trailing <br> inside their span. */
.bz-rich--plain > ul > li br:last-child{display:none}
/* Ordered lists keep numbering but pick up the same panel treatment. */
.bz-rich--plain > ol{
  margin:0 0 var(--s5);padding-left:20px;
  font-size:var(--fs-2);line-height:1.75;
}
.bz-rich--plain > ol > li{margin:0 0 var(--s2)}

@media (max-width:720px){
  .bz-rich.bz-rich--plain > ul{grid-template-columns:1fr;padding:var(--s2) var(--s4)}
  /* Single column: only the true last item ends the panel. */
  .bz-rich.bz-rich--plain > ul > li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--rich-edge)}
  .bz-rich.bz-rich--plain > ul > li:last-child{border-bottom:0}
  .bz-rich--plain > p{font-size:var(--fs-2)}
}