/* =============================================================================
   LOUD ADS LANDER mk5 - THE CAMPAIGN SHEET (single lane, STATIC)
   Folded into the drop-in's collapsed <style> by _build.py. There is no lane B
   and no tt-loud-ext.css: motion is retired as of skill v7, and lint_static
   refuses to build if a @keyframes block, an animation property or a
   prefers-reduced-motion query appears anywhere in this file.

   WHAT THIS FILE IS FOR. Corrections to system components that this page needs
   sized or coloured differently, and nothing else. Not motion (banned), not
   decoration. If a rule here is doing anything other than making a system
   component correct in this context, it is in the wrong file.

   THE CONTRACT is NO NEW CLASS NAMES, not "zero net-new CSS" - the
   earlier wording did not survive contact with real fixes. Every selector below
   is built from class names the system already defines plus inert data-loud
   attribute hooks, and every rule is scoped to `.tt-loud` so nothing can reach
   another module on the same page. build_master() refuses to emit a combined
   sheet unless that holds for every selector in this file.

   SPECIFICITY. Selectors carry enough classes to win on specificity rather than
   on source order, which a host page can change by enqueueing a sheet later.
   Nothing written FOR this build uses !important. The imported form-wrapper
   block at the bottom of this file does, in about a dozen places, because it is
   a verbatim copy of rules the live site already applies to that section and
   rewriting them would mean the captured section no longer matches its source.

   BEAVER BUILDER. Selectors Level 3 only: no :is(), no :where(), no
   :not(a,b) list form, no @layer, no @container, no nesting. BB errors on
   these rather than skipping them, and the whole block is lost.
   ============================================================================= */

/* ------------------------------------------------------------- minimal header
   A logo that links home plus one contact route. Google's destination
   requirements want the page navigable; the brief wants nothing competing with
   the single conversion action, so there is no nav, no cart and no shop link. */
.tt-loud [data-loud="header"]{
  padding-block:18px;
  border-bottom:1px solid var(--tt-line);
}
.tt-loud [data-loud="headerbar"]{
  justify-content:space-between;
  width:100%;
  flex-wrap:nowrap;
}
.tt-loud [data-loud="headerbar"] .tt-logo img{
  display:block;
  width:105px;
  height:41px;
}
.tt-loud [data-loud="headerbar"] [data-loud="phone"]{
  font-weight:500;
  white-space:nowrap;
  text-decoration:none;
}

/* =============================================================================
   mk3: THE HERO IS REBUILT TO THE LIVE /shop/loud-flavors/ HERO.

   Every number below was MEASURED off the live page, not read off its source
   and not reasoned about. The live hero is a Beaver Builder row whose type is
   set by per-node CSS (`.fl-node-2m50k1zlp68a` and friends), so the source
   declarations are spread across base rules and four max-width queries and do
   not tell you what actually renders. A probe read `getComputedStyle` at three
   widths instead:

                    1440px        800px         500px
     label          16 / 600      16 / 600      16 / 600      lh 1.4
     display        38 / 600      40 / 600      31 / 600      lh 1
     sub            20 / 600      24 / 600      21 / 600      lh 1.6 -> 1
     button         #0e61fe bg, #fff, 20px 40px, radius 100px, 16px / 400
     row height     640           679           677           min-height 670

   which resolves to: display 38px fixed above 1024 and `calc(16px + 3vw)`
   below; sub 20px/1.6 above 1024 and `calc(16px + 1vw)`/1 below; label 16px
   throughout. Text is white with `0 5px 26px rgba(22,0,0,.77)` on all three.

   THE BACKGROUND IS NOT THE LIVE ONE, AND THAT IS DELIBERATE. The live hero
   runs a Vimeo background video (id 1208965503) injected by Beaver Builder's
   own JavaScript into `.fl-bg-video-player`, with
   `PDP_Wholesale_CTA_BG_V1.webp` as its poster. Two separate reasons it is not
   reproduced here:

     1. IT CANNOT TRAVEL. `fl-bg-video` is a BB ROW feature. The markup ships
        an EMPTY `.fl-bg-video-player` div that BB's frontend JS fills at
        runtime, and it pulls in the Vimeo player. A pasted HTML module has
        neither, and this build's whole architecture is zero JS dependency.
     2. IT IS A SMOKE CLOUD. Looked at rather than inferred from the filename:
        the poster is magenta and violet smoke billowing against black, and the
        video is called "Loud Smoke Cloud Hero". On a Google Ads destination
        for a cannabis-adjacent product that is the clearest imagery-rule
        violation available - the rule bans smoke and vapour outright, and the
        test Google applies is presentation, not vocabulary.

   So the ground here reproduces the live hero's COLOUR (near-black graduating
   to magenta and violet from below) as a pure CSS gradient built from the
   system's own tokens. Same visual register, zero requests, no smoke.
   `--hero-smoke-poster` puts the live poster back for exact parity.
   ============================================================================= */
.tt-loud [data-loud="hero"].tt-hero{
  /* 670px is the live row's own min-height, measured. Padding is kept small on
     purpose: min-height already guarantees the band, and the system's
     `.tt-hero` padding of clamp(3rem,2rem+6vw,8rem) stacked on top of it ran
     the section to ~750px with an empty violet band under the qualifier. */
  min-height:670px;
  display:flex;
  align-items:center;
  padding-block:40px;
  background-color:#050509;
  background-image:
    radial-gradient(120% 88% at 16% 122%, rgba(236,0,140,.50) 0%, rgba(236,0,140,0) 56%),
    radial-gradient(115% 85% at 80% 126%, rgba(111,35,225,.58) 0%, rgba(111,35,225,0) 58%),
    radial-gradient(95% 72% at 50% 132%, rgba(35,0,155,.72) 0%, rgba(35,0,155,0) 62%),
    linear-gradient(180deg,#050509 0%,#0a0616 58%,#1b0a30 100%);
  background-repeat:no-repeat;
  background-size:cover;
}
/* 45/55, matching the live columns, and REVERSED below 1024 so the bottleshot
   leads on a phone exactly as it does live (`fl-col-group-responsive-reversed`
   is `flex-wrap:wrap-reverse;flex-direction:row-reverse`). Five selectors deep
   because the system's own `.tt-scope .tt-hero.tt-hero-split .tt-container`
   collapse-to-1fr rule is four. */
/* THE ONE MEASUREMENT NOT COPIED FROM LIVE: the container width. The live row
   is `max-width:1440px`, which is right there because every other section on
   that page is 1440 too. On THIS page every other section is the system's
   1200px container, so importing 1440 put the hero copy at x=24 while the
   lineup heading below it started at x=145 - a 121px misalignment, visible in
   the first render. Faithful to the live number, wrong for this page. The
   background is full-bleed either way, so only the copy column moves. */
.tt-loud [data-loud="hero"].tt-hero.tt-hero-split > .tt-container{
  grid-template-columns:45% 55%;
  align-items:center;
  gap:0;
}
@media (max-width:1024px){
  .tt-loud [data-loud="hero"].tt-hero.tt-hero-split > .tt-container{
    grid-template-columns:1fr;
    gap:8px;
  }
  .tt-loud [data-loud="hero"] .tt-hero-media{order:-1}
}
.tt-loud [data-loud="hero"] .tt-hero-preheading{
  color:#ffffff;
  font-family:var(--tt-font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.4;
  letter-spacing:normal;
  text-transform:none;
  text-shadow:0 5px 26px rgba(22,0,0,.77);
  margin:0 0 20px;
}
.tt-loud [data-loud="hero"] .tt-hero-title{
  color:#ffffff;
  font-weight:600;
  font-size:38px;
  line-height:1;
  letter-spacing:normal;
  text-shadow:0 5px 26px rgba(22,0,0,.77);
  margin:0 0 20px;
}
/* ROUND FIVE (2026-09-03): THE .tt-hero-sub RULES ARE GONE WITH THE ELEMENT, and so
   is the mk3.14 comment that stood here explaining them -- it described a weight-500
   / line-height-1.3 treatment on a selector the page no longer emits, which is worse
   than no comment. The measured values it recorded (20px at 1440, live's fluid
   calc(16px + 1vw) below 1024) live in the measured hero table at the top of this
   file, which is where they belong if the line ever comes back. */
@media (max-width:1024px){
  .tt-loud [data-loud="hero"] .tt-hero-title{font-size:calc(16px + 3vw)}
}
/* THE CTA GOES BACK TO THE LIVE BLUE PILL. mk1 and mk2 inverted it to
   white-on-blue because the system's `#0e61fe` button sat on `.tt-bg-brand`,
   a blue gradient, and disappeared into it. On this near-black ground that
   reason is gone: #0e61fe against #050509 measures 4.03:1, clearing the 3:1
   WCAG floor for a non-text UI surface, and white on #0e61fe measures 5.05:1,
   clearing AA for the label. So the live treatment is both faithful AND
   legible here, which it was not before.

   BUT A FLAT-COLOUR CHECK IS NOT ENOUGH ON A GRADIENT. Against the bright end
   of this ground the same button measures 1.38:1 (#6f23e1) and 1.19:1
   (#ec008c) - it would vanish, which is the exact failure mk1 fixed by
   inverting. So the bright stops are pushed below and outside the copy column,
   and `_render_check.py cta-contrast` SAMPLES THE RENDERED PIXELS behind the
   button and computes the real ratio rather than trusting these numbers. */
.tt-loud [data-loud="hero"] .tt-cluster{margin-top:50px}
.tt-loud [data-loud="hero"] .tt-btn.tt-btn-primary{
  background:var(--tt-color-primary);
  border-color:var(--tt-color-primary);
  color:#ffffff;
  padding:20px 40px;
  border-radius:100px;
  font-size:16px;
  font-weight:500;
}
.tt-loud [data-loud="hero"] .tt-btn.tt-btn-primary:hover,
.tt-loud [data-loud="hero"] .tt-btn.tt-btn-primary:focus-visible{
  background:var(--tt-color-primary-hover);
  border-color:var(--tt-color-primary-hover);
  color:#ffffff;
}
/* The bottleshot: live sets `width:100%` and pulls it up 80px so it overlaps
   the copy's optical centre. No radius - it is a transparent-background render,
   and the system's `--radius-lg` on hero media would clip nothing but is wrong
   in principle here. */
.tt-loud [data-loud="hero"] .tt-hero-media img{
  width:100%;
  height:auto;
  margin-top:-80px;
  border-radius:0;
}
@media (max-width:1024px){
  .tt-loud [data-loud="hero"] .tt-hero-media img{margin-top:0;max-width:530px}
  .tt-loud [data-loud="hero"] .tt-hero-media{text-align:center}
}
/* The qualifier is mandatory above the fold, and it is legal furniture rather
   than a selling line, so it reads quiet without dropping under contrast. */
.tt-loud [data-loud="hero"] [data-loud="qualifier"]{
  margin-top:24px;
  max-width:46ch;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  text-shadow:none;
}

/* --------------------------------------------------------------- lineup cards
   mk2: THE LIVE SHOP CARD, `.TTProducts` > `.TTProducts-loop-list` > `li.product`
   > `.tt-product`, with the "Shop {flavor}" button replaced by the flavour's own
   line of copy. The theme skin supplies almost all of this; the rules below are
   only the corrections this context needs.

   SPECIFICITY. The theme writes its card rules
   `.woocommerce .product .tt-product .tt-product-image` (four classes), so every
   selector here carries five, to win outright rather than by source order. */

/* THE BOX IS SQUARE HERE. The theme sizes the card image box portrait
   (`padding-bottom:120%`) and gives `.has-bg-image` only `background-size:cover`
   with no `background-repeat`. Every asset in this lineup is square (1024 and
   600), so 120% crops the scene. */
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-image.has-bg-image{
  background-size:cover;
  background-repeat:no-repeat;
  padding-bottom:100%;
}
/* The list is only `display:flex;flex-wrap:wrap`; the column width lives on the
   `.TTProducts` ancestor and steps 25/33/50%. Ten cards on those steps leave a
   ragged last row at most widths, so this page pins five-up, three-up and
   two-up, which makes the ten read as one complete set at every size. */
.tt-loud [data-loud="strip"] .TTProducts-loop-list{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px,1.4vw,20px);
  list-style:none;
  margin:0;
  padding:0;
}
.tt-loud [data-loud="strip"] .TTProducts-loop-list > li.product{
  width:calc(20% - clamp(12px,1.4vw,20px) * 4 / 5);
  margin:0;
  float:none;
}
@media (max-width:1079px) and (min-width:641px){
  .tt-loud [data-loud="strip"] .TTProducts-loop-list > li.product{
    width:calc(33.333% - clamp(12px,1.4vw,20px) * 2 / 3);
  }
}
@media (max-width:640px){
  .tt-loud [data-loud="strip"] .TTProducts-loop-list > li.product{
    width:calc(50% - 6px);
  }
}
/* INK IS INK. The label colours are print-sampled and they are the only place
   product colour appears on this page: a 3px rule at the top of each card, well
   under the 5%-of-viewport budget and never a section ground. `--ink` is set per
   card inline from the label palette. Product colour is NOT Aroma Chroma; that
   map is concept-pending and is not applied anywhere here. */
/* mk3.4: the 3px flavour-ink rule is removed on instruction. `--ink` is still
   set per card inline and still drives the register word via `--ink-text`, so
   the palette has not left the page, only the rule. */
.tt-loud [data-loud="strip"] .product .tt-product{
  padding-bottom:16px;
}
/* The register takes the flavour's ink, but via `--ink-text`, which the builder
   computes to clear 4.5:1 against white rather than trusting the raw label
   colour. SEVEN of the ten fail that test as printed, and not the seven you
   would guess by eye: banana custard is 1.59:1, honeydew 1.83:1, white peach
   2.30:1, pina colada 2.71:1, blue razz 2.79:1, watermelon 4.25:1 and mango
   4.11:1 all fall short, while blackberry, double rainbow and kiwi pass
   untouched. `_build.py --compliance-report` prints the whole table. */
/* mk5 item 8: keyed off the CLASS, not the data-loud hook. The class is new
   (.tt-product-cat before), so it has to be load-bearing somewhere or it is a name
   with no meaning; this is that somewhere, and self_sufficiency() proves the emitted
   file carries it. text-transform stays uppercase, so the instructed "Flavor & Aroma"
   renders as FLAVOR & AROMA -- the same treatment DEEP/BRIGHT/CREAMY had. The
   instruction changed the words and kept the colour; it did not ask for a new type
   treatment, so the type treatment is untouched. */
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-flavor-aroma-notes{
  color:var(--ink-text,var(--tt-color-primary));
  font-family:var(--tt-font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
/* mk5 round three, item 3: THE DESCRIPTION LINE IS GONE, and so is this rule.
   It was mk2's substituted CTA -- the theme ships a primary button here, and the
   one-line description took its place carrying the 20px that used to sit above the
   button, plus a hairline rule to separate it from the notes.

   REMOVING THE ELEMENT REMOVES THAT HAIRLINE, which was the card's only internal
   divider, so the card now ends at the notes. Checked in a render rather than
   assumed: with the label and notes grouped (the block below), the card reads as
   two tiers -- identity then flavour -- and closes cleanly without the rule. A
   border with nothing under it would have been the worse outcome. */
/* mk5 item 3: THE LABEL AND ITS NOTES READ AS ONE UNIT.
   Measured before: the gaps down the card ran 5px (All Natural -> title), 5px
   (title -> label), 6px (label -> notes), 20px (notes -> line). With 5 above it and
   6 below it, "FLAVOR & AROMA" was equally attached to the title and to the notes,
   so it read as a third loose line rather than as the notes' heading.

   The fix is proximity, not decoration: OPEN the gap above the label and CLOSE the
   one beneath it. 14px above / 2px below groups the pair while leaving the 20px
   rule-and-description block below untouched, so the card still has three tiers
   (identity, flavour, claim) instead of four loose lines. */
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-flavor-aroma-notes{
  margin-top:14px;
}
.tt-loud [data-loud="strip"] .product .tt-product [data-loud="notes"]{
  margin:2px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--tt-muted);
}

/* mk5: the method icon-card rules (.tt-card padding and the method-head measure)
   went with the section, item 1. */
/* mk5: THE FEATURE-ICON BLOCK IS GONE (3 inline-SVG data URIs, .tt-feature-img and
   the two method-head centring rules, ~1.7 KB). Item 1 replaced the icon-card section
   with the live #concentrates row, so nothing emitted .tt-feature-img any more and
   this was dead weight in a file a human pastes by hand. The REASONING it carried --
   why icons are painted from the stylesheet rather than an <img src>, and why the
   site's own icon set was unusable on this endpoint -- is preserved at the ICONS block
   in _build.py, which is where a future brief will look for it. */

/* =============================================================================
   THE CONVERSION SECTION: form-wrapper-mk1, GRAVITY FORM 90
   Requested explicitly for this build. Imported from
   design/form-wrapper-mk1/form-wrapper.module.html, which is itself a capture of
   the #apply-wholesale section from /shop/loud-flavors/, with Beaver Builder node
   ids rewritten to stable hook classes. Every rule below is that artifact's CSS
   with ONE mechanical change: `.tt-form-wrapper` is rescoped to
   `.tt-loud .tt-form-wrapper`, so build_master()'s "every base selector carries
   .tt-loud" assertion holds and nothing here can reach another module on the page.
   65 selectors rescoped, 0 left unscoped - asserted, not assumed.

   THREE THINGS TO KNOW ABOUT THIS CONTAINER.

   1. IT BRINGS A BEAVER BUILDER DEPENDENCY THAT THE REST OF THIS PAGE DOES NOT
      HAVE. The container keeps the source's `fl-row` / `fl-col` / `fl-module`
      markup and inherits BB's layout CSS. That is correct on a BB page, which is
      where this gets pasted, but 15 of its 24 `fl-*` classes are defined in
      neither vendored sheet, so without the fallbacks below the block would stop
      being self-sufficient. The fallbacks are scoped inside `.tt-form-wrapper`,
      the same scope the imported artifact already overrides BB in, so they change
      nothing outside this section.

   2. NO `.tt-on-dark` ANYWHERE NEAR IT, DELIBERATELY. The bands are dark and the
      form card is white, which is the exact shape that produced mk5's
      white-on-white Gravity Forms labels: `.tt-on-dark` sets `color` on the
      SECTION, and a white card inside inherits white with the value already
      resolved. This container paints its own heading white explicitly instead, so
      nothing inherits a resolved white. The card also re-anchors the light-context
      tokens below, as belt and braces.

   3. THE ARTWORK IS A FLAGGED ITEM. `PDP_Wholesale_CTA_BG_V6` is an abstract
      magenta-to-blue wash with dark mottling through its lower third. Looked at
      rather than inferred from the filename, it is ambiguous enough that a Google
      reviewer could read those plumes as smoke or vapour, which the imagery rule
      bans outright. It ships because it was asked for; `--plain-form-band` swaps
      both bands for a solid ground if that call changes.
   ============================================================================= */

/* ------------------------------------------- Beaver Builder structural fallbacks
   What BB's own layout.css provides on a BB page. Present so the block lays out
   if this drop-in is ever pasted where BB's sheet is not loaded. */
.tt-loud .fl-row,
.tt-loud .fl-row-content-wrap{position:relative}
.tt-loud .fl-row-content{
  margin-inline:auto;
  width:100%;
}
.tt-loud .fl-col-group{
  display:flex;
  flex-wrap:wrap;
}
.tt-loud .fl-col{
  min-width:0;
  flex:1 1 auto;
}
.tt-loud .fl-col-content,
.tt-loud .fl-module-content{position:relative}
.tt-loud .fl-row-bg-photo > .fl-row-content-wrap{
  background-repeat:no-repeat;
}
.tt-loud .fl-heading{margin:0}
.tt-loud .fl-rich-text p{margin:0}
/* Hook-only classes BB carries with no layout of its own in this context. Declared
   so every class the markup uses resolves from a rule in this same file. */
.tt-loud .fl-row-full-width,
.tt-loud .fl-row-fixed-width,
.tt-loud .fl-row-align-center,
.tt-loud .fl-row-custom-height,
.tt-loud .fl-row-default-height,
.tt-loud .fl-row-bg-color,
.tt-loud .fl-col-bg-color,
.tt-loud .fl-col-bg-none,
.tt-loud .fl-col-small,
.tt-loud .fl-col-small-custom-width,
.tt-loud .fl-col-has-cols,
.tt-loud .fl-col-group-nested,
.tt-loud .fl-col-group-align-top,
.tt-loud .fl-col-group-align-center,
.tt-loud .fl-col-group-equal-height,
.tt-loud .fl-col-group-custom-width,
.tt-loud .fl-node-content,
.tt-loud .fl-module,
.tt-loud .fl-module-heading,
.tt-loud .fl-module-rich-text,
.tt-loud .fl-module-html,
.tt-loud .fl-module-photo,
.tt-loud .fl-module-numbers,
.tt-loud .fl-photo,
.tt-loud .fl-photo-align-center,
.tt-loud .fl-html,
.tt-loud .fl-heading-text,
.tt-loud .fl-number-default,
/* mk3 imported-markup identity hooks: grepped against ALL of production's CSS
   (inline blocks AND the 56 linked sheets, 2026-08-18) - zero rules exist for
   any of them anywhere. They are pure identity markers; declared here so the
   self-sufficiency gate proves them from this file instead of taking my word. */
.tt-loud .fl-builder-content-9081,
.tt-loud .fl-builder-global-templates-locked,
.tt-loud .fl-module-separator,
.tt-loud .fl-separator,
.tt-loud .fl-photo-img-png,
.tt-loud .fl-node-14fv8kmbczyu,
.tt-loud .fl-node-6emodsq947xz,
.tt-loud .fl-node-b6q4kfivr2ma,
.tt-loud .fl-node-d3yk9fgic6aw,
.tt-loud .fl-node-i0fkugoz6j1h,
.tt-loud .fl-node-kdxzow70irmt,
.tt-loud .fl-node-n2ehzbfw90i8,
.tt-loud .fl-node-or69vyalgkmu,
.tt-loud .fl-node-qnwamz43o5hv,
.tt-loud .fl-node-rz31qpkblavg{box-sizing:border-box}

/* The consent line and the qualifier sit INSIDE the white card, below the form.
   That puts them on a light ground with dark ink, which is both what the
   requirement asks for (consent adjacent to the form) and the only placement that
   cannot reproduce the white-on-white failure. */
.tt-loud .tt-form-wrapper .contact-us-form [data-loud="consent"],
.tt-loud .tt-form-wrapper .contact-us-form [data-loud="qualifier"]{
  font-size:13px;
  line-height:1.6;
  color:#464646;
  margin:14px 0 0;
}
.tt-loud .tt-form-wrapper .contact-us-form{
  --tt-color-text:#121212;
  --tt-color-text-soft:rgba(18,18,18,.72);
  --c-ink:#121212;
  --c-body:#464646;
  --c-line:#eaeaec;
  color:var(--tt-color-text);
}
/* THE SUBMIT BUTTON HAD NO BACKGROUND, and a render is how that surfaced: white
   label on the browser's default grey chrome, illegible, on the single control the
   whole page exists to get clicked. The imported form-wrapper rules set the
   button's radius, height and colour but NOT its background, because on the live
   site the theme skin supplies it. The theme skin is enqueued on the target, so
   this would have looked fine there and broken nowhere we would have seen it --
   which is precisely the dependency the self-sufficiency rule exists to remove. */
.tt-loud .tt-form-wrapper .contact-us-form .gform_button{
  background:var(--tt-color-primary);
  border:0;
  cursor:pointer;
  font-family:var(--tt-font-display);
}
.tt-loud .tt-form-wrapper .contact-us-form .gform_button:hover,
.tt-loud .tt-form-wrapper .contact-us-form .gform_button:focus-visible{
  background:var(--tt-color-primary-hover);
}

/* --------------------------------------------------------------- upper band
   Art plus the heading and the one-line intro. Delete .tt-fw-lead from the
   markup and this whole block goes quiet -- the form band stands alone. */
.tt-loud .tt-form-wrapper .tt-fw-lead.fl-row-custom-height > .fl-row-content-wrap{
  display:flex;
  min-height:0;
}
.tt-loud .tt-form-wrapper .tt-fw-lead > .fl-row-content-wrap{
  background-color:#121212;
  background-image:url(https://trueterpprod.b-cdn.net/wp-content/uploads/2026/06/PDP_Wholesale_CTA_BG_V6.webp);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-attachment:scroll;
  background-size:cover;
  padding-top:120px;
  padding-right:50px;
  padding-left:50px;
}
.tt-loud .tt-form-wrapper .tt-fw-lead .fl-row-content{max-width:836px}
.tt-loud .tt-form-wrapper .tt-fw-lead .fl-col{width:100%}
.tt-loud .tt-form-wrapper .tt-fw-lead .fl-col > .fl-col-content{
  aspect-ratio:5/1;
  margin-top:0;
}

.tt-loud .tt-form-wrapper .tt-fw-lead-heading.fl-module-heading .fl-heading{
  font-weight:600;
  font-size:44px;
  line-height:1.4;
  text-align:center;
}
.tt-loud .tt-form-wrapper .tt-fw-lead-heading h2.fl-heading a,
.tt-loud .tt-form-wrapper .tt-fw-lead-heading h2.fl-heading .fl-heading-text,
.tt-loud .tt-form-wrapper .tt-fw-lead-heading h2.fl-heading .fl-heading-text *{color:#fff}
.tt-loud .tt-form-wrapper .tt-fw-lead-heading > .fl-module-content{margin-bottom:15px}

/* Chained :not(), not `:not(b,strong)`. The source page uses the Selectors
   Level 4 comma form, which Beaver Builder's CSS parser rejects -- it errors
   rather than dropping the rule, so the whole block is lost. The Level 3 form
   below is equivalent here. It is one type selector MORE specific (Level 4
   :not() takes the specificity of its most specific argument, chaining adds
   them), which changes nothing: the only other rule that touches these
   elements sets `color`, and these set font-size and text-align. */
.tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text,
.tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text *:not(b):not(strong){
  font-size:18px;
  line-height:1.6;
  text-align:center;
}
.tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text,
.tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text *{color:#fff}
.tt-loud .tt-form-wrapper .tt-fw-lead-text > .fl-module-content{
  margin-right:100px;
  margin-left:100px;
}

@media (max-width:1200px){
  .tt-loud .tt-form-wrapper .tt-fw-lead > .fl-row-content-wrap{
    background-position:center bottom;
    aspect-ratio:3/1;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead.fl-row-custom-height > .fl-row-content-wrap{min-height:60px}
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text,
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text *:not(b):not(strong){font-size:18px}
}
@media (max-width:1024px){
  .tt-loud .tt-form-wrapper .tt-fw-lead > .fl-row-content-wrap{
    background-position:center bottom;
    padding-right:40px;
    padding-left:40px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead.fl-row-custom-height > .fl-row-content-wrap{min-height:0}
  .tt-loud .tt-form-wrapper .tt-fw-lead .fl-col > .fl-col-content{padding-bottom:10px}
  .tt-loud .tt-form-wrapper .tt-fw-lead-heading.fl-module-heading .fl-heading{text-align:center}
  .tt-loud .tt-form-wrapper .tt-fw-lead-heading > .fl-module-content{
    margin-top:-20px;
    margin-bottom:15px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-text > .fl-module-content{
    margin-right:100px;
    margin-left:100px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text,
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text *:not(b):not(strong){text-align:center}
}
@media (max-width:840px){
  .tt-loud .tt-form-wrapper .tt-fw-lead > .fl-row-content-wrap{
    background-image:url(https://trueterpprod.b-cdn.net/wp-content/uploads/2026/06/Mobile_PDP_Wholesale_CTA_BG_V7.webp);
    background-position:center bottom;
    background-size:cover;
    aspect-ratio:2/1;
    padding-top:80px;
    padding-bottom:100px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead.fl-row-custom-height > .fl-row-content-wrap{min-height:0}
  .tt-loud .tt-form-wrapper .tt-fw-lead .fl-row-content{max-width:100%}
  .tt-loud .tt-form-wrapper .tt-fw-lead .fl-col{
    width:80%!important;
    max-width:none;
    clear:none;
    float:left;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead .fl-col > .fl-col-content{
    min-height:0;
    aspect-ratio:0;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-heading.fl-module-heading .fl-heading{
    font-size:calc(16px + 3vw);
    line-height:1.4;
    text-align:left;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-heading > .fl-module-content{
    margin-top:-40px;
    margin-bottom:20px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-text > .fl-module-content{
    margin-right:0;
    margin-left:0;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text,
  .tt-loud .tt-form-wrapper .tt-fw-lead-text .fl-rich-text *:not(b):not(strong){
    font-size:calc(16px + 0.9vw);
    text-align:left;
  }
}

/* ---------------------------------------------------------------- lower band
   The inverted half of the same artwork, with the form card sitting on it.
   `background-size:contain` is intentional here: the source art is built to
   meet the upper band's `cover` at the seam. */
.tt-loud .tt-form-wrapper .tt-fw-form > .fl-row-content-wrap{
  background-color:#121212;
  background-image:url(https://trueterpprod.b-cdn.net/wp-content/uploads/2026/06/PDP_Wholesale_CTA_BG_Inverted_V6.webp);
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:scroll;
  background-size:contain;
  margin-top:0;
  margin-bottom:0;
}
.tt-loud .tt-form-wrapper .tt-fw-form .fl-row-content{max-width:1000px}
.tt-loud .tt-form-wrapper .tt-fw-form .fl-col{width:100%}
.tt-loud .tt-form-wrapper .tt-fw-form .fl-col > .fl-col-content{
  padding-top:55px;
  padding-right:55px;
  padding-bottom:55px;
  padding-left:55px;
}
@media (max-width:1200px){
  .tt-loud .tt-form-wrapper .tt-fw-form > .fl-row-content-wrap{background-position:center top}
}
@media (max-width:1024px){
  .tt-loud .tt-form-wrapper .tt-fw-form > .fl-row-content-wrap{
    background-position:center top;
    margin-top:0;
    margin-bottom:0;
  }
  .tt-loud .tt-form-wrapper .tt-fw-form .fl-col > .fl-col-content{
    margin:0;
    padding-top:55px;
    padding-right:55px;
    padding-bottom:55px;
    padding-left:55px;
  }
}
@media (max-width:840px){
  .tt-loud .tt-form-wrapper .tt-fw-form > .fl-row-content-wrap{
    background-image:url(https://trueterpprod.b-cdn.net/wp-content/uploads/2026/06/Mobile_PDP_Wholesale_CTA_BG_Inverted_V7.webp);
    background-position:center top;
    margin-bottom:0;
    padding-top:30px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-form .fl-col > .fl-col-content{
    padding-top:20px;
    padding-right:15px;
    padding-bottom:20px;
    padding-left:15px;
  }
  .tt-loud .tt-form-wrapper .contact-us-form.fl-module-html.fl-module{
    margin-right:0;
    margin-left:0;
  }
}

/* ----------------------------------------------------------- the form card
   These are the rules that make the white card and restyle the Gravity Form
   inside it. They are what "include all styles" mostly means: without them the
   shortcode renders as an unstyled stack on a dark background. */
.tt-loud .tt-form-wrapper .contact-us-form{
  background:#fff;
  padding:40px 36px;
}
.tt-loud .tt-form-wrapper .contact-us-form h4{
  font-size:24px;
  font-weight:600;
  line-height:1.4;
  color:#121212;
  margin-top:0;
  margin-bottom:8px;
}
.tt-loud .tt-form-wrapper .contact-us-form p{
  font-size:14px;
  line-height:1.8;
  color:#414141;
  margin-bottom:30px;
}
.tt-loud .tt-form-wrapper .contact-us-form .gfield{
  gap:0!important;
  padding:0;
}
.tt-loud .tt-form-wrapper .contact-us-form .gfield_html{margin-bottom:0px!important}
.tt-loud .tt-form-wrapper .contact-us-form .gfield_label{
  text-transform:none;
  color:#272f31!important;
  font-family:Helvetica;
  font-size:16px;
  font-weight:normal!important;
  line-height:1.88;
}
.tt-loud .tt-form-wrapper .contact-us-form .gfield_required{display:none!important}
/* ...except inside the form itself, where the theme skin puts the asterisk back. */
.tt-loud .tt-form-wrapper .contact-us-form form .gfield_required{display:inline-block!important}
.tt-loud .tt-form-wrapper .contact-us-form input{height:54px!important}
.tt-loud .tt-form-wrapper .contact-us-form input[type="text"],
.tt-loud .tt-form-wrapper .contact-us-form textarea{
  /* mk2, requested: full-width text inputs. The captured rules size the field from
     Gravity Forms' own grid, which leaves a half-width input in a full-width card. */
  width:100%!important;
  border-color:#d4d4d4!important;
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .1),0 0 2px 0 rgb(0 0 0 / .15);
  border-radius:0;
  padding:15px 16px!important;
  font-family:Helvetica!important;
  font-size:14px!important;
  line-height:1.71;
  letter-spacing:.56px;
}
.tt-loud .tt-form-wrapper .contact-us-form input[type="text"]::placeholder,
.tt-loud .tt-form-wrapper .contact-us-form textarea::placeholder{color:#a3a3a3!important}
.tt-loud .tt-form-wrapper .contact-us-form textarea{
  max-width:100%;
  min-height:110px;
  min-width:100%;
}
.tt-loud .tt-form-wrapper .contact-us-form .gform_button{
  border-radius:100px;
  color:#fff;
  height:60px;
  padding:20px!important;
  margin:0 0 12px;
  font-size:16px!important;
  font-weight:500!important;
  line-height:1.25;
}
@media only screen and (max-width:576px){
  .tt-loud .tt-form-wrapper .contact-us-form{padding:20px}
}

/* -------------------------------------------------- form-specific tweak (GF 90)
   Lifted from the source module's own inline <style>. Keyed to form id 90, so it
   travels with the shortcode below; change both together if the form changes. */
.tt-loud .tt-form-wrapper #gform_wrapper_90 .tt_gf-single-checkbox .gfield_checkbox > div{margin-bottom:0}
.tt-loud .tt-form-wrapper #gform_wrapper_90 .tt_gf-single-checkbox .ginput_container_checkbox{line-height:1.2}

/* =============================================================================
   mk3 IMPORTS FROM THE LIVE /shop/loud-flavors/ PAGE (requested 2026-08-18):
   the flavor-statistics band, the #concentrates section (restructured to a
   single image), and the site footer minus its link-columns row.

   Every rule below is the live page's own CSS for those nodes, captured from
   its inline seraphinite blocks and mechanically transformed:
     - every selector prefixed `.tt-loud` (leading `.fl-builder-content` and
       `html` tokens replaced by it), so build_master()'s scope assertion holds
       and nothing can leak past the module;
     - Selectors Level 4 rewritten for Beaver Builder's parser:
       `:not(b,strong)` chained, `:where(a,q,p,span)` expanded to a selector
       list. lint_bb() proves none survived;
     - nothing else rewritten. !important stays where live has it.

   THE MARKUP THESE STYLE IS CLEANED, NOT VERBATIM, and each cleaning rule is a
   lesson this project already paid for:
     - perfmatters-lazy attributes swapped for real src/srcset + native lazy
       (off the shop page nothing resolves data-lzl-*, and every image is a
       blank box);
     - `fl-animation fl-fade-in` stripped (opacity:0 until BB's JS runs);
     - the stat numerals BAKED IN: live ships `.fl-number-int` EMPTY and BB's
       page-specific JS counts it up, so pasted anywhere else the tiles render
       "FLAVOR HOLDS %" with no number. The <noscript> twin held the values;
     - the footer's two Osano links dropped: their onclick handlers are
       stripped by kses on save, leaving dead href="#" anchors;
     - footer hrefs absolutized to https://trueterpenes.com.
   ============================================================================= */
.tt-loud .fl-node-78hpyozntuaq>.fl-row-content-wrap{background-color:#f6f6f6}
.tt-loud .fl-node-78hpyozntuaq .fl-row-content{max-width:1440px}
.tt-loud .fl-node-78hpyozntuaq>.fl-row-content-wrap{margin-top:0}
.tt-loud .fl-node-78hpyozntuaq>.fl-row-content-wrap{padding-top:120px;padding-right:50px;padding-bottom:120px;padding-left:50px}
.tt-loud .fl-node-yj2i13h98uvo>.fl-row-content-wrap{background-color:#121212}
.tt-loud .fl-node-yj2i13h98uvo .fl-row-content{max-width:1273px}
.tt-loud .fl-node-yj2i13h98uvo>.fl-row-content-wrap{margin-top:0}
.tt-loud .fl-node-yj2i13h98uvo>.fl-row-content-wrap{padding-top:50px;padding-right:0;padding-bottom:50px;padding-left:0}
.tt-loud .fl-node-cme3li7s0rny{width:50%}
.tt-loud .fl-node-cme3li7s0rny>.fl-col-content{margin-right:100px;margin-left:100px}
.tt-loud .fl-node-ynicl0mf1opu{width:50%}
.tt-loud .fl-node-ynicl0mf1opu>.fl-col-content{padding-right:10px}
.tt-loud .fl-node-2egpcihybu3j{width:50%}
.tt-loud .fl-node-2egpcihybu3j>.fl-col-content{margin-left:10px}
.tt-loud .fl-node-07n8td9z6jv4{width:50%}
.tt-loud .fl-node-fgan9rvctiqs{width:100%}
.tt-loud .fl-row .fl-col .fl-node-mvi28gb71hpn h2.fl-heading a, .tt-loud .fl-row .fl-col .fl-node-mvi28gb71hpn h2.fl-heading .fl-heading-text, .tt-loud .fl-row .fl-col .fl-node-mvi28gb71hpn h2.fl-heading .fl-heading-text *, .tt-loud .fl-node-mvi28gb71hpn h2.fl-heading .fl-heading-text{color:#121212}
.tt-loud .fl-node-mvi28gb71hpn.fl-module-heading .fl-heading{font-weight:600;font-size:44px;line-height:1.4}
.tt-loud .fl-node-mvi28gb71hpn>.fl-module-content{margin-bottom:20px}
.tt-loud .fl-number, .tt-loud .fl-number .fl-number-circle-container{margin:0 auto}
.tt-loud .fl-number-before-text, .tt-loud .fl-number-after-text{display:block}
.tt-loud .fl-number-before-text{margin-bottom:10px}
.tt-loud .fl-number-after-text{margin-top:10px}
.tt-loud .fl-number-string{line-height:1;white-space:nowrap;overflow:hidden}
.tt-loud .fl-number .fl-number-text, .tt-loud .fl-number .fl-number-circle-container{position:relative;z-index:10;text-align:center}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-module-content .fl-number-int, .tt-loud .fl-node-sykl4hv9zpf7 .fl-module-content .fl-number-string{color:#0e61fe}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-module-content .fl-number-before-text, .tt-loud .fl-node-sykl4hv9zpf7 .fl-module-content .fl-number-after-text{color:#121212}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-after-text{font-size:16px;line-height:1.6;text-align:left}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string span{font-weight:400;font-size:48px;line-height:1.08;text-align:left}
.tt-loud .fl-node-pj3ys02men9r .fl-module-content .fl-number-int, .tt-loud .fl-node-pj3ys02men9r .fl-module-content .fl-number-string{color:#0e61fe}
.tt-loud .fl-node-pj3ys02men9r .fl-module-content .fl-number-before-text, .tt-loud .fl-node-pj3ys02men9r .fl-module-content .fl-number-after-text{color:#121212}
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-after-text{font-size:16px;line-height:1.6;text-align:left}
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string span{font-weight:400;font-size:48px;line-height:1.08;text-align:left}
.tt-loud .fl-node-ywhkn4adjcri .fl-module-content .fl-number-int, .tt-loud .fl-node-ywhkn4adjcri .fl-module-content .fl-number-string{color:#0e61fe}
.tt-loud .fl-node-ywhkn4adjcri .fl-module-content .fl-number-before-text, .tt-loud .fl-node-ywhkn4adjcri .fl-module-content .fl-number-after-text{color:#121212}
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-after-text{font-size:16px;line-height:1.6;text-align:left}
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string span{font-weight:400;font-size:48px;line-height:1.08;text-align:left}
.tt-loud .fl-node-ywhkn4adjcri>.fl-module-content{margin-top:100px}
.tt-loud .fl-node-x4lizjs23yq6 .fl-module-content .fl-number-int, .tt-loud .fl-node-x4lizjs23yq6 .fl-module-content .fl-number-string{color:#0e61fe}
.tt-loud .fl-node-x4lizjs23yq6 .fl-module-content .fl-number-before-text, .tt-loud .fl-node-x4lizjs23yq6 .fl-module-content .fl-number-after-text{color:#121212}
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-after-text{font-size:16px;line-height:1.6;text-align:left}
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string span{font-weight:400;font-size:48px;line-height:1.08;text-align:left}
.tt-loud .fl-node-x4lizjs23yq6>.fl-module-content{margin-top:100px}
.tt-loud .fl-node-iptvwzknacm4 .fl-module-content .fl-rich-text, .tt-loud .fl-node-iptvwzknacm4 .fl-module-content .fl-rich-text *{color:#121212}
.tt-loud .fl-node-iptvwzknacm4 .fl-rich-text, .tt-loud .fl-node-iptvwzknacm4 .fl-rich-text *:not(b):not(strong){font-size:16px;line-height:1.6}
.tt-loud .fl-node-ypqzb53fe7rs .fl-module-content .fl-rich-text, .tt-loud .fl-node-ypqzb53fe7rs .fl-module-content .fl-rich-text *{color:#121212}
.tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text, .tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text *:not(b):not(strong){font-weight:600;font-size:16px;line-height:1.6}
.tt-loud .fl-node-ypqzb53fe7rs>.fl-module-content{margin-top:20px}
.tt-loud .fl-node-o73hwm2n80kt .fl-module-content .fl-rich-text, .tt-loud .fl-node-o73hwm2n80kt .fl-module-content .fl-rich-text *{color:#343232}
.tt-loud .fl-node-o73hwm2n80kt .fl-rich-text, .tt-loud .fl-node-o73hwm2n80kt .fl-rich-text *:not(b):not(strong){font-size:16px;line-height:1.6}
.tt-loud .fl-row .fl-col h2.fl-node-wqj1n5glphta, .tt-loud .fl-row .fl-col h2.fl-node-wqj1n5glphta a, .tt-loud h2.fl-node-wqj1n5glphta, .tt-loud h2.fl-node-wqj1n5glphta a{color:#fff}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  a, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  q, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  p, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  span{font-weight:600;font-size:38px;line-height:1.4;text-align:center}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading{margin-right:30px;margin-bottom:60px;margin-left:10px}
.tt-loud .fl-node-iptvwzknacm4 .fl-rich-text *{color:#121212}
.tt-loud .fl-node-iptvwzknacm4 .fl-rich-text *{font-size:16px;line-height:1.6}
.tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text *{color:#121212}
.tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text *{font-weight:600;font-size:16px;line-height:1.6}
.tt-loud .fl-node-o73hwm2n80kt .fl-rich-text *{color:#343232}
.tt-loud .fl-node-o73hwm2n80kt .fl-rich-text *{font-size:16px;line-height:1.6}
.tt-loud .fl-node-igwhrds650bq>.fl-row-content-wrap{background-color:#111}
.tt-loud .fl-node-igwhrds650bq .fl-row-content{max-width:1920px}
.tt-loud .fl-node-igwhrds650bq>.fl-row-content-wrap{padding-top:71px;padding-right:50px;padding-bottom:50px;padding-left:50px}
.tt-loud .fl-node-qtoic25zyk6h>.fl-row-content-wrap{background-color:#111}
.tt-loud .fl-node-qtoic25zyk6h>.fl-row-content-wrap{padding-top:35px;padding-right:81px;padding-bottom:35px;padding-left:81px}
.tt-loud .fl-node-pcb84z5sqjaf{width:100%}
.tt-loud .fl-node-pcb84z5sqjaf>.fl-col-content{padding-right:150px;padding-left:150px}
.tt-loud .fl-node-loc7v1ptkui9{width:24%}
.tt-loud .fl-node-loc7v1ptkui9>.fl-col-content{border-style:solid;border-width:0;background-clip:border-box;border-color:#fff;border-right-width:2px}
.tt-loud .fl-node-loc7v1ptkui9>.fl-col-content{margin-right:20px}
.tt-loud .fl-node-loc7v1ptkui9>.fl-col-content{padding-right:20px;padding-bottom:10px}
.tt-loud .fl-node-wtn05sxieg2y{width:100%}
.tt-loud .fl-node-wtn05sxieg2y>.fl-col-content{margin-bottom:40px}
.tt-loud .fl-node-g12l6usvxb09{width:100%}
.tt-loud .fl-node-u061wchxtj9s{width:19%}
.tt-loud .fl-node-u061wchxtj9s>.fl-col-content{padding-bottom:10px;padding-left:20px}
.tt-loud .fl-node-d20y1q4l5mgi{width:19%}
.tt-loud .fl-node-d20y1q4l5mgi>.fl-col-content{padding-bottom:10px;padding-left:20px}
.tt-loud .fl-node-c5re8a34zk29{width:100%}
.tt-loud .fl-node-1xicuakswoyb{width:19%}
.tt-loud .fl-node-1xicuakswoyb>.fl-col-content{padding-bottom:10px;padding-left:20px}
.tt-loud .fl-node-10n8ychmg3p7{width:19%}
.tt-loud .fl-node-10n8ychmg3p7>.fl-col-content{padding-bottom:10px;padding-left:20px}
.tt-loud .fl-node-pykc3e6nhrgj, .tt-loud .fl-node-pykc3e6nhrgj .fl-photo{text-align:center}
.tt-loud .fl-node-pykc3e6nhrgj .fl-photo-content, .tt-loud .fl-node-pykc3e6nhrgj .fl-photo-img{width:130px}
.tt-loud .fl-node-0u97a2rcb6qd, .tt-loud .fl-node-0u97a2rcb6qd .fl-photo{text-align:center}
.tt-loud .fl-node-0u97a2rcb6qd .fl-photo-content, .tt-loud .fl-node-0u97a2rcb6qd .fl-photo-img{width:130px}
.tt-loud .fl-node-95ti1jsev306, .tt-loud .fl-node-95ti1jsev306 .fl-photo{text-align:center}
.tt-loud .fl-node-95ti1jsev306 .fl-photo-content, .tt-loud .fl-node-95ti1jsev306 .fl-photo-img{width:130px}
.tt-loud .fl-node-vnic2ljxqh7p, .tt-loud .fl-node-vnic2ljxqh7p .fl-photo{text-align:center}
.tt-loud .fl-node-vnic2ljxqh7p .fl-photo-content, .tt-loud .fl-node-vnic2ljxqh7p .fl-photo-img{width:150px}
.tt-loud .fl-node-vnic2ljxqh7p>.fl-module-content{margin-bottom:20px}
.tt-loud .fl-node-enwd09giacz6 .fl-module-content .fl-rich-text, .tt-loud .fl-node-enwd09giacz6 .fl-module-content .fl-rich-text *{color:#fff}
.tt-loud .fl-node-enwd09giacz6 .fl-rich-text, .tt-loud .fl-node-enwd09giacz6 .fl-rich-text *:not(b):not(strong){text-transform:uppercase}
.tt-loud .fl-node-enwd09giacz6>.fl-module-content{margin-bottom:20px}
.tt-loud .fl-row .fl-col .fl-node-a7n94lzvbcig h4.fl-heading a, .tt-loud .fl-row .fl-col .fl-node-a7n94lzvbcig h4.fl-heading .fl-heading-text, .tt-loud .fl-row .fl-col .fl-node-a7n94lzvbcig h4.fl-heading .fl-heading-text *, .tt-loud .fl-node-a7n94lzvbcig h4.fl-heading .fl-heading-text{color:#fff}
.tt-loud .fl-node-a7n94lzvbcig.fl-module-heading .fl-heading{font-size:16px;text-align:center;text-decoration:underline}
.tt-loud .fl-node-a7n94lzvbcig>.fl-module-content{margin-top:20px}
.tt-loud .fl-row .fl-col .fl-node-ebia0nvdmoy5 h2.fl-heading a, .tt-loud .fl-row .fl-col .fl-node-ebia0nvdmoy5 h2.fl-heading .fl-heading-text, .tt-loud .fl-row .fl-col .fl-node-ebia0nvdmoy5 h2.fl-heading .fl-heading-text *, .tt-loud .fl-node-ebia0nvdmoy5 h2.fl-heading .fl-heading-text{color:#fff}
.tt-loud .fl-node-ebia0nvdmoy5.fl-module-heading .fl-heading{font-weight:500}
.tt-loud .fl-node-ebia0nvdmoy5>.fl-module-content{margin-bottom:50px}
.tt-loud .fl-node-9ujc5mv42r7y, .tt-loud .fl-node-9ujc5mv42r7y .fl-photo{text-align:center}
.tt-loud .fl-node-9ujc5mv42r7y .fl-photo-content, .tt-loud .fl-node-9ujc5mv42r7y .fl-photo-img{width:130px}
.tt-loud .fl-node-2mutc58vswab .fl-separator{border-top-width:1px;max-width:100%;width:100%;margin:auto}
.tt-loud .fl-node-2mutc58vswab .fl-separator{border-top-color:#333;border-top-style:solid}
.tt-loud .fl-node-2mutc58vswab>.fl-module-content{margin-bottom:24px}
.tt-loud .fl-node-enwd09giacz6 .fl-rich-text *{color:#fff}
.tt-loud .fl-node-enwd09giacz6 .fl-rich-text *{text-transform:uppercase}
.tt-loud .tt_footer-copyright-html, .tt-loud .tt_footer-copyright-html a{color:#fff;font-size:12px;line-height:1.8;text-align:center}
.tt-loud .TT_image-text-row i.fl-button-icon::before{font-size:18px}
.tt-loud .tt_footer-copyright-html .fl-html, .tt-loud .tt_footer-copyright-html a{font-size:14px}
.tt-loud .tt-flavor-stats-counter-container .fl-module-content .fl-number-before-text, .tt-loud-general-flavor-statistics .fl-module-content .fl-number-before-text{font-weight:700}
@media (max-width:1024px){
.tt-loud .fl-node-78hpyozntuaq.fl-row>.fl-row-content-wrap{padding-right:40px;padding-left:40px}
.tt-loud .fl-node-yj2i13h98uvo.fl-row>.fl-row-content-wrap{padding-top:40px;padding-right:0;padding-bottom:40px;padding-left:0}
.tt-loud .fl-node-cme3li7s0rny{width:100%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-cme3li7s0rny.fl-col>.fl-col-content{margin-left:0}
.tt-loud .fl-node-ynicl0mf1opu{width:50%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-ynicl0mf1opu.fl-col>.fl-col-content{margin-top:0}
.tt-loud .fl-node-2egpcihybu3j{width:100%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-2egpcihybu3j.fl-col>.fl-col-content{margin-top:50px;margin-left:0}
.tt-loud .fl-node-2egpcihybu3j.fl-col>.fl-col-content{padding-right:0;padding-left:0}
.tt-loud .fl-node-07n8td9z6jv4{width:50%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-07n8td9z6jv4.fl-col>.fl-col-content{margin-top:0}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  a, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  q, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  p, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  span{font-size:calc(16px + 2vw)}
.tt-loud .fl-node-igwhrds650bq.fl-row>.fl-row-content-wrap{margin-right:0;margin-left:0}
.tt-loud .fl-node-igwhrds650bq.fl-row>.fl-row-content-wrap{padding-top:30px;padding-right:40px;padding-left:40px}
.tt-loud .fl-node-qtoic25zyk6h.fl-row>.fl-row-content-wrap{padding-right:20px;padding-left:20px}
.tt-loud .fl-node-loc7v1ptkui9{width:31%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-loc7v1ptkui9.fl-col>.fl-col-content{margin-right:8px}
.tt-loud .fl-node-loc7v1ptkui9.fl-col>.fl-col-content{padding-bottom:0}
.tt-loud .fl-node-wtn05sxieg2y.fl-col>.fl-col-content{padding-right:0;padding-left:0}
.tt-loud .fl-node-u061wchxtj9s{width:17%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-d20y1q4l5mgi{width:17%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-c5re8a34zk29{width:100%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-1xicuakswoyb{width:17%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-10n8ychmg3p7{width:17%!important;max-width:none;-webkit-box-flex:0 1 auto;-moz-box-flex:0 1 auto;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.tt-loud .fl-node-pykc3e6nhrgj .fl-photo-content, .tt-loud .fl-node-pykc3e6nhrgj .fl-photo-img{width:95px}
.tt-loud .fl-node-pykc3e6nhrgj.fl-module>.fl-module-content{margin-bottom:30px}
.tt-loud .fl-node-0u97a2rcb6qd .fl-photo-content, .tt-loud .fl-node-0u97a2rcb6qd .fl-photo-img{width:95px}
.tt-loud .fl-node-0u97a2rcb6qd.fl-module>.fl-module-content{margin-bottom:30px}
.tt-loud .fl-node-95ti1jsev306 .fl-photo-content, .tt-loud .fl-node-95ti1jsev306 .fl-photo-img{width:95px}
.tt-loud .fl-node-95ti1jsev306.fl-module>.fl-module-content{margin-bottom:30px}
.tt-loud .fl-node-vnic2ljxqh7p.fl-module>.fl-module-content{margin-bottom:30px}
.tt-loud .fl-node-ebia0nvdmoy5.fl-module>.fl-module-content{margin-top:19px}
.tt-loud .fl-node-9ujc5mv42r7y .fl-photo-content, .tt-loud .fl-node-9ujc5mv42r7y .fl-photo-img{width:95px}
.tt-loud .fl-node-9ujc5mv42r7y.fl-module>.fl-module-content{margin-bottom:30px}
.tt-loud .fl-node-2mutc58vswab.fl-module>.fl-module-content{margin-bottom:20px}
}
@media (max-width:840px){
.tt-loud .fl-node-78hpyozntuaq.fl-row>.fl-row-content-wrap{padding-top:30px;padding-right:20px;padding-bottom:80px;padding-left:20px}
.tt-loud .fl-node-yj2i13h98uvo.fl-row>.fl-row-content-wrap{margin-bottom:0}
.tt-loud .fl-node-yj2i13h98uvo.fl-row>.fl-row-content-wrap{padding-top:20px;padding-right:20px;padding-bottom:60px;padding-left:20px}
.tt-loud .fl-node-ynicl0mf1opu{width:50%!important;max-width:none;clear:none;float:left}
.tt-loud .fl-node-2egpcihybu3j.fl-col>.fl-col-content{margin-top:20px}
.tt-loud .fl-node-07n8td9z6jv4{width:50%!important;max-width:none;clear:none;float:left}
.tt-loud .fl-node-mvi28gb71hpn.fl-module>.fl-module-content{margin-bottom:24px}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-after-text{font-size:14px;line-height:1.2}
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string span{font-size:32px;line-height:1}
.tt-loud .fl-node-sykl4hv9zpf7.fl-module>.fl-module-content{margin-right:5px}
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-after-text{font-size:14px;line-height:1.2}
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string span{font-size:32px;line-height:1}
.tt-loud .fl-node-pj3ys02men9r.fl-module>.fl-module-content{margin-right:0;margin-left:0}
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-after-text{font-size:14px;line-height:1.2}
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string span{font-size:32px;line-height:1}
.tt-loud .fl-node-ywhkn4adjcri.fl-module>.fl-module-content{margin-top:32px;margin-right:5px}
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-before-text, .tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-after-text{font-size:14px;line-height:1.2}
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string, .tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string span{font-size:32px;line-height:1}
.tt-loud .fl-node-x4lizjs23yq6.fl-module>.fl-module-content{margin-top:32px;margin-left:0}
.tt-loud .fl-node-iptvwzknacm4.fl-module>.fl-module-content{margin-bottom:24px}
.tt-loud .fl-node-ypqzb53fe7rs.fl-module>.fl-module-content{margin-bottom:5px}
.tt-loud .fl-node-ypqzb53fe7rs>.fl-module-content{margin-top:0}
.tt-loud .fl-node-o73hwm2n80kt.fl-module>.fl-module-content{margin-bottom:24px}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  a, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  q, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  p, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  span{font-size:calc(16px + 2.8vw);line-height:1.4;text-align:center}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading.fl-module{margin-top:30px;margin-bottom:40px}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading{margin-left:0;margin-right:0}
.tt-loud .fl-node-igwhrds650bq.fl-row>.fl-row-content-wrap{padding-right:20px;padding-left:20px}
.tt-loud .fl-node-loc7v1ptkui9{width:100%!important;max-width:none;clear:none;float:left}
.tt-loud .fl-node-loc7v1ptkui9>.fl-col-content{border-style:none;border-width:0;background-clip:border-box;border-right-width:0px}
.tt-loud .fl-node-pykc3e6nhrgj>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-0u97a2rcb6qd>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-95ti1jsev306>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-vnic2ljxqh7p, .tt-loud .fl-node-vnic2ljxqh7p .fl-photo{text-align:center}
.tt-loud .fl-node-vnic2ljxqh7p .fl-photo-content, .tt-loud .fl-node-vnic2ljxqh7p .fl-photo-img{width:100px}
.tt-loud .fl-node-vnic2ljxqh7p>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-enwd09giacz6>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-a7n94lzvbcig.fl-module>.fl-module-content{margin-bottom:20px}
.tt-loud .fl-node-a7n94lzvbcig>.fl-module-content{margin-top:0}
.tt-loud .fl-node-ebia0nvdmoy5.fl-module>.fl-module-content{margin-bottom:50px}
.tt-loud .fl-node-ebia0nvdmoy5>.fl-module-content{margin-top:0}
.tt-loud .fl-node-9ujc5mv42r7y>.fl-module-content{margin-bottom:0}
.tt-loud .fl-node-2mutc58vswab>.fl-module-content{margin-bottom:0}
}
@media (max-width:1200px){
.tt-loud .fl-node-yj2i13h98uvo .fl-row-content{max-width:1200px}
.tt-loud .fl-node-yj2i13h98uvo.fl-row>.fl-row-content-wrap{margin-top:0;margin-right:0;margin-left:0}
.tt-loud .fl-node-yj2i13h98uvo.fl-row>.fl-row-content-wrap{padding-top:50px;padding-right:30px;padding-left:30px}
.tt-loud .fl-node-cme3li7s0rny.fl-col>.fl-col-content{margin-left:20px}
.tt-loud .fl-node-mvi28gb71hpn.fl-module-heading .fl-heading{font-size:38px}
.tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text, .tt-loud .fl-node-ypqzb53fe7rs .fl-rich-text *:not(b):not(strong){font-size:10px}
.tt-loud .fl-node-o73hwm2n80kt .fl-rich-text, .tt-loud .fl-node-o73hwm2n80kt .fl-rich-text *:not(b):not(strong){font-size:10px}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  a, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  q, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  p, .tt-loud .fl-node-wqj1n5glphta.fl-module-heading  span{font-size:35px}
.tt-loud .fl-node-wqj1n5glphta.fl-module-heading.fl-module{margin-bottom:50px}
.tt-loud .fl-node-igwhrds650bq.fl-row>.fl-row-content-wrap{padding-right:81px;padding-bottom:70px;padding-left:81px}
.tt-loud .fl-node-pcb84z5sqjaf.fl-col>.fl-col-content{padding-right:50px;padding-left:50px}
.tt-loud .fl-node-loc7v1ptkui9.fl-col>.fl-col-content{margin-right:10px}
.tt-loud .fl-node-loc7v1ptkui9.fl-col>.fl-col-content{padding-right:30px}
.tt-loud .fl-node-u061wchxtj9s.fl-col>.fl-col-content{padding-right:20px;padding-left:20px}
.tt-loud .fl-node-d20y1q4l5mgi.fl-col>.fl-col-content{padding-right:20px}
.tt-loud .fl-node-1xicuakswoyb.fl-col>.fl-col-content{padding-right:20px}
.tt-loud .fl-node-10n8ychmg3p7.fl-col>.fl-col-content{padding-right:20px}
.tt-loud .fl-node-pykc3e6nhrgj .fl-photo-content, .tt-loud .fl-node-pykc3e6nhrgj .fl-photo-img{width:120px}
.tt-loud .fl-node-0u97a2rcb6qd .fl-photo-content, .tt-loud .fl-node-0u97a2rcb6qd .fl-photo-img{width:120px}
.tt-loud .fl-node-95ti1jsev306 .fl-photo-content, .tt-loud .fl-node-95ti1jsev306 .fl-photo-img{width:120px}
.tt-loud .fl-node-ebia0nvdmoy5.fl-module-heading .fl-heading{font-size:28px}
.tt-loud .fl-node-9ujc5mv42r7y .fl-photo-content, .tt-loud .fl-node-9ujc5mv42r7y .fl-photo-img{width:120px}
}
@media screen and (min-width:480px) and (max-width:625px){
.tt-loud .tt-headstash-pdp-h2{padding:0 52px}
}
@media (min-width:1201px){
.tt-loud .fl-visible-large:not(.fl-visible-desktop),.tt-loud .fl-visible-medium:not(.fl-visible-desktop),.tt-loud .fl-visible-mobile:not(.fl-visible-desktop){display:none}
}
@media (min-width:1025px) and (max-width:1200px){
.tt-loud .fl-visible-desktop:not(.fl-visible-large),.tt-loud .fl-visible-medium:not(.fl-visible-large),.tt-loud .fl-visible-mobile:not(.fl-visible-large){display:none}
}
@media (min-width:842px) and (max-width:1024px){
.tt-loud .fl-visible-desktop:not(.fl-visible-medium),.tt-loud .fl-visible-large:not(.fl-visible-medium),.tt-loud .fl-visible-mobile:not(.fl-visible-medium){display:none}
}
/* 841/842, matching the mobile treatment's own boundary rather than live's 840,
   so a single pixel cannot show the desktop badges under centred mobile type. */
@media (max-width:841px){
.tt-loud .fl-visible-desktop:not(.fl-visible-mobile),.tt-loud .fl-visible-large:not(.fl-visible-mobile),.tt-loud .fl-visible-medium:not(.fl-visible-mobile){display:none}
}

/* --------------------------------------------------- mk3 section adjustments
   The pieces the live CSS cannot supply because the sections changed shape. */

/* #concentrates, restructured: one column, one image, on the requested
   spectrum artwork (loud-footer-spectrum.jpg, HEAD-verified 200, 29 KB,
   1200x580 - a soft blue-to-rainbow gradient wash; looked at, no smoke, no
   consumption imagery). #121212 underneath so a failed image degrades to the
   live section's own dark band rather than to white-on-white. */
/* Same 1200 + 24px gutter as the other sections; live shipped this row at
   max-width:1273px, which put its heading box at x=94 against the page's 144. */
.tt-loud .fl-node-yj2i13h98uvo .fl-row-content{
  max-width:1200px;
  padding-right:24px;
  padding-left:24px;
}
.tt-loud .fl-node-yj2i13h98uvo > .fl-row-content-wrap{
  background-color:#121212;
  background-image:url(https://assets.trueterpenes.com/campaigns/loud-flavors/loud-footer-spectrum.jpg);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
.tt-loud [data-loud="social-hero-col"]{width:100%}
.tt-loud [data-loud="social-hero"] .fl-photo-content{width:100%;text-align:center}
.tt-loud [data-loud="social-hero"] .fl-photo-img{
  /* display:block from the photo-module rules defeats the parent's
     text-align:center, so the centering is the margin, not the text-align -
     the first render had the image hugging the container's left edge. */
  display:block;
  margin-inline:auto;
  /* mk3.14: 1100 -> 950 as requested. The centring is still the margin and not
     the parent's text-align, because this img is display:block. */
  width:100%;
  max-width:950px;
  height:auto;
}
/* mk3.14: and the gap to the rotating heading above closed up. The space was
   the photo module's own top margin, not the heading's bottom margin - the
   heading block sets `margin:0`, so there was nothing to take off that side. */
.tt-loud [data-loud="social-hero"].fl-module > .fl-module-content,
.tt-loud [data-loud="social-hero"] > .fl-module-content{margin-top:12px}
/* The heading sits on the spectrum's dark upper half, so it reads white, as it
   does on the live section's dark ground. */
.tt-loud [data-loud="experience-text"] .fl-heading-text{color:#ffffff}

/* ------------------------------------ mk5 item 1: the #concentrates THREE-COLUMN row
   COLUMN WIDTH IS NOT OPTIONAL HERE, and the reason is the single most useful thing
   in this block. Beaver Builder does NOT carry column widths in `.fl-col-small` or in
   `.fl-col-group-equal-height`. It emits them as PER-NODE CSS keyed to the node id:

       .fl-node-b1i8fdlh74pa { width: 33.33%; }

   Importing the section strips `fl-node-*` (it is per-page bookkeeping that styles
   nothing anywhere else), and that silently takes the widths with it. The group still
   computes `display:flex`, each column still computes `flex:1 1 auto` -- everything
   LOOKS right in the cascade -- but `flex-basis:auto` then reads each column's
   inherited `width:100%`, every column claims a full line, `flex-wrap:wrap` puts each
   on its own row, and the row renders as three stacked full-width images. Measured,
   not guessed: before this rule the probe returned three columns at x=20 w=1400 and a
   4,332px section. The same trap is why the stats band above carries its own explicit
   widths.

   `flex:1 1 0` rather than a width percentage: it sizes from the free space after the
   gap instead of fighting the gap for it, so no calc() has to know the gap value. */
/* mk5 item 1b: THE GROUND AND THE TYPE COLOUR, TAKEN FROM LIVE'S OWN PER-NODE CSS
   rather than sampled off a screenshot. Read out of the live page's inline <style>
   (the values BB emits for node yj2i13h98uvo, which is this row):

     .fl-node-yj2i13h98uvo>.fl-row-content-wrap { background-color:#121212 }
     h2.fl-node-wqj1n5glphta                    { color:#fff }   heading
     .fl-node-wdr9enmk2f5v .fl-rich-text *      { color:#fff }   caption

   THE BACKGROUND GOES ON `.fl-row-content-wrap`, NOT ON THE ROW, because that is
   where live puts it and the two are not interchangeable: the row is full-bleed while
   the content-wrap is the element BB pads, so painting the row instead leaves the
   padding outside the colour and the band ends up the wrong height.

   CONSEQUENCE, RECORDED: this makes the page's SECOND dark band, where the module
   docstring used to say the hero was the only one. The three bottle PNGs are genuine
   RGBA (checked: 70.6% fully transparent, corner alpha 0), so they sit on #121212
   with no white matte. White on #121212 measures ~19:1, far past AA.

   COLOUR ONLY, deliberately. Live also runs the heading at 38px and the captions at
   18px/600; the instruction said background and font colour, so the type SIZES stay
   as they are and the heading keeps the page's own 32px hierarchy. */
.tt-loud [data-loud="applications"] > .fl-row-content-wrap{background-color:#121212}
.tt-loud [data-loud="applications-h2"],
.tt-loud [data-loud="applications-h2"] .fl-heading-text{color:#ffffff}

/* SECTION PADDING IS THE SAME TRAP AS THE COLUMN WIDTHS, one level up: an `fl-row` has
   no padding of its own either, so the stripped per-node CSS took the row's vertical
   rhythm with it and the first render put the captions 15px from the next section's
   edge. mk5 replaces the earlier token with LIVE'S OWN MEASURED STEPS, since the row
   now reproduces live's ground too and should breathe the way live's does:

     base          padding:50px 0
     <=1200        padding:50px 30px
     <=1024        padding:40px 0
     <=840         padding:20px 20px 60px

   Padding moves to the content-wrap for the same reason the background did. */
.tt-loud [data-loud="applications"] > .fl-row-content-wrap{padding:50px 0}
.tt-loud [data-loud="applications-cols"]{gap:32px}
.tt-loud [data-loud="applications-cols"] > .fl-col{
  flex:1 1 0;
  width:auto;
  min-width:0;
}
.tt-loud [data-loud="application-photo"] .fl-photo-content{width:100%}
.tt-loud [data-loud="application-photo"] .fl-photo-img{
  width:100%;
  height:auto;
  display:block;
}
.tt-loud [data-loud="application-caption"]{margin-top:4px}
.tt-loud [data-loud="application-caption"] p{
  margin:0;
  text-align:center;
  font-size:15px;
  line-height:1.5;
  /* mk5 item 1b: live's #fff, SET HERE rather than in a second rule further up.
     The first attempt added `color:#ffffff` as its own rule above this one; both
     are (0,3,0) and this one is LATER, so the muted grey kept winning and the
     captions measured rgb(70,70,70) on a #121212 ground. Fixing the declaration
     that already existed is the rule this file has paid for repeatedly: restore
     by editing the override, never by counter-declaring past it. */
  color:#ffffff;
}
/* The imported heading, centred over the row. tt-headstash-pdp-h2 is the live class
   and it survives the import, but it arrives with the live PDP's left alignment. */
.tt-loud [data-loud="applications-h2"]{
  margin:0 0 28px;
  text-align:center;
}
/* mk5 item 1d: THE MOBILE LAYOUT, matched to live's own breakpoints.
   Live steps this row at 1200 / 1024 / 840 and stacks at <=840. Two of those are
   BB's defaults and one is not, so they are reproduced rather than approximated.

   WHAT DOES THE STACKING: tt-bb-layout.css already flips
   `.fl-col-group-equal-height` to `display:block` at <=840 and caps
   `.fl-col-small` at 400px with auto side margins, so the columns stack and centre
   without help. What that leaves behind is the two things flex was providing --
   the gap (dead once display is block) and the equal widths (irrelevant once
   stacked) -- so only the vertical rhythm needs restating. This is why the
   breakpoint below is 840 and not 841: matching BB's own boundary keeps the flex
   and block regimes exactly adjacent, and mk3.6 is the record of what a one-pixel
   overlap between two regimes costs.

   THE PHOTO AT 75vw is live's value (`.fl-node-09oqbygl57es .fl-photo-img
   {width:75vw}` at <=840). Live also caps the photo at 320px on desktop; that is
   NOT reproduced, because these columns are 445px wide here and the instruction was
   about stacking, not about shrinking the desktop image. */
@media (max-width:1200px){
.tt-loud [data-loud="applications"] > .fl-row-content-wrap{padding:50px 30px}
}
@media (max-width:1024px){
/* DELIBERATE DEVIATION FROM LIVE, and the arithmetic is the reason. Live declares
   `padding:40px 0` here -- no side inset -- and gets away with it because its
   columns carry per-node side margins (15px each) AND its photo is capped at 320px
   inside a 341px column, so live's IMAGE never reaches the viewport edge even
   though its column does. This build reproduces neither the per-node margins nor
   the 320px cap (the cap was left out on purpose: these columns are 445px at
   1440), so live's literal zero measured col1 at x=0 with the image flush to the
   edge. 20px restores live's RENDERED result rather than its declaration. */
.tt-loud [data-loud="applications"] > .fl-row-content-wrap{padding:40px 20px}
}
@media (max-width:840px){
.tt-loud [data-loud="applications"] > .fl-row-content-wrap{padding:20px 20px 60px}
/* THE ROW WOULD NOT STACK WITHOUT THIS LINE, AND THE REASON IS IN THIS FILE.
   Measured at 768: the group still computed `display:flex` and the columns sat
   three-across at 221px, even though the <=840 media query was active (proven --
   BB's `.fl-col-small{max-width:400px}` from the same block WAS applying).

   The culprit is this sheet's own mk3-era rule:
       .tt-loud .fl-col-group{display:flex;flex-wrap:wrap}
   It is (0,2,0), exactly the same specificity as BB's
   `.fl-col-group.fl-col-group-equal-height{display:block}`, it carries no media
   query, and tt-loud-base.css loads LAST -- in the preview AND on the target,
   where our master is inlined after BB's base. So it silently beat BB's own
   responsive behaviour at every width. Verified in isolation: BB's sheet alone
   computes `display:block` at 768 correctly.

   The shared rule is NOT deleted, because the imported stats band and footer rows
   rely on it for the same missing-per-node-CSS reason. The correction is scoped to
   this row instead, which keeps the blast radius at one section. */
.tt-loud [data-loud="applications-cols"]{display:block}
/* Self-sufficient, deliberately: the 400px cap and the auto side margins that
   would otherwise centre these come from tt-bb-layout.css, which is PREVIEW-ONLY
   and never shipped. BB's inlined base does supply them on a real BB page, but a
   drop-in that only looks right because the host happens to provide a rule is the
   exact dependency this build refuses to take. Stated here, in the sheet that
   ships. */
.tt-loud [data-loud="applications-cols"] > .fl-col{
  width:auto;
  max-width:400px;
  margin-inline:auto;
  margin-bottom:30px;
}
.tt-loud [data-loud="applications-cols"] > .fl-col:last-child{margin-bottom:0}
/* Live's mobile photo width. The column is already centred by BB's auto margins,
   so the image centres with text-align on the photo module's own wrapper. */
.tt-loud [data-loud="application-photo"] .fl-photo-content{width:75vw;margin-inline:auto}
.tt-loud [data-loud="applications-h2"]{margin-bottom:40px}
}

/* The footer element: live's own rules paint both rows #111 (dark), imported
   above. An earlier draft of this block invented a white ground here and turned
   the band's live white text invisible - the probe caught it, the extracted
   rules were right all along. Nothing to add. */

/* Business identity, relocated INTO the footer legal bar (mk3): the BUSINESS
   IDENTITY section was removed on instruction, but the address and the
   one-line company description satisfy Google's business-identity guidance
   and were mandatory in the original build spec, so they move rather than
   vanish. One muted block, styled to the legal bar's own register; delete
   this rule and the [data-loud="identity-line"] block in the markup to
   remove them entirely. */
.tt-loud [data-loud="identity-line"]{
  /* Continues the legal row's own #111 ground at full width - a first render
     had this block narrower than the rows above it, reading as a stray box. */
  background:#111;
  margin:0;
  padding:0 24px 32px;
  text-align:center;
}

.tt-loud [data-loud="identity-line"] p{
  margin:0 auto 4px;
  max-width:960px;
  font-size:12px;
  line-height:1.8;
  color:rgba(255,255,255,.75);
}
.tt-loud [data-loud="identity-line"] a{color:rgba(255,255,255,.9)}

/* ------------------------------------- footer cert band: 1200px, centered (mk3.3)
   Requested 2026-08-18. Measured first: the row rendered full-bleed with its
   content at 50..1390 (1340 wide) while every other section on this page uses
   the system's 1200px container at 120..1320 - the same misalignment the hero
   had. `max-width` on a block-level row needs `margin-inline:auto` too, or the
   row pins left; that is not an embellishment, it is what makes the constraint
   mean "centered at 1200" rather than "left-aligned at 1200".

   NOTE WHAT THIS DOES TO THE GROUND. The #111 background lives on this row's
   `.fl-row-content-wrap` INSIDE the constrained box, so narrowing the row
   narrows the dark band with it, while the legal row below stays full-bleed.
   `[data-loud="band-fullbleed"]` on the row would keep the band edge-to-edge
   and constrain only the content; see the paste brief. Rendered and checked
   either way before shipping this one. */
.tt-loud .fl-node-igwhrds650bq{
  max-width:1200px;
  margin-inline:auto;
}
/* The row's own inner cap was 1920px, i.e. never the binding constraint at any
   real viewport. Brought to 100% so the 1200 above is the single source of the
   width and there is no second number to keep in sync. */
.tt-loud .fl-node-igwhrds650bq .fl-row-content{max-width:100%}

/* ------------------------------------ cert icon group centered on the page
   Requested 2026-08-18. Three things had to change together, because the
   left-bias was NOT on the element named:
     1. `d3yk9fgic6aw` is a flex row whose single child is width:100%, so
        `justify-content` on it alone does nothing visible. Set anyway, so the
        named element is genuinely centered rather than incidentally so.
     2. the bias lives one level down, in the NESTED group `qnwamz43o5hv`,
        whose five custom-width columns do not sum to 100%; centering that is
        what actually moves the icons.
     3. `pcb84z5sqjaf` carries 150px of left/right padding from the live 1440
        row. Inside a 1200px row that is 25% of the width spent on gutters and
        it squeezed the five icons; reduced so the cluster can use the space. */
.tt-loud .fl-node-d3yk9fgic6aw{
  justify-content:center;
  margin-inline:auto;
  width:100%;
}
.tt-loud .fl-node-qnwamz43o5hv{
  justify-content:center;
  align-items:center;
}
.tt-loud .fl-node-pcb84z5sqjaf > .fl-col-content{
  padding-right:0;
  padding-left:0;
}

/* --------------------------------------------- keeping the footer ground whole
   Constraining the row to 1200px narrowed its dark ground with it, because the
   #111 lives on `.fl-row-content-wrap` INSIDE the constrained box - while the
   legal row below stayed full-bleed. The render showed white notches at the
   footer's top corners: one dark block stepped into another.

   Fixed by painting #111 on the <footer> ELEMENT, which is full width, so the
   two rows' own grounds become invisible against it and the footer reads as one
   continuous block with its CONTENT constrained to 1200. Deliberately not done
   with a 100vw full-bleed layer: this module sits inside `.fl-col-content` and
   Beaver containment forbids anything that assumes it owns the viewport. */
.tt-loud footer{background:#111}

/* Content inset matched to the page. The row's wrap carries 50px of live
   padding, which put the cert heading at x=170 against the page's own content
   edge at x=144 (a 1200px container with 24px gutters) - the same 26px
   misalignment, one level down. Scoped above 1024px so live's own responsive
   paddings still govern the narrow breakpoints, which this file's later
   position would otherwise override. */
@media (min-width:1025px){
  .tt-loud .fl-node-igwhrds650bq > .fl-row-content-wrap{
    padding-right:24px;
    padding-left:24px;
  }
}

/* ------------------------------------------------ footer images cannot overflow
   The mobile cert strip is set to a hard `width:350px` by live's own rule, with
   no cap. At <=840px the row also carries 81px of side padding, so on a true
   390 viewport that is 162px of gutter plus a 350px image inside 228px of
   content - a ~122px overflow, visible in the render as the badge row running
   off the right edge. Live carries the same latent bug; it just never meets a
   narrow enough viewport with this much padding.

   Two fixes, both conservative: cap every footer image to its container, and
   let the strip be fluid up to its intended 350px rather than fixed at it. */
.tt-loud footer img{
  max-width:100%;
  height:auto;
}
/* And the gutter matched to the page's own at the narrow breakpoints, for the
   same reason it was matched at desktop: 81px each side of a 390 viewport is
   42% of the width spent on padding. */
@media (max-width:840px){
  .tt-loud .fl-node-igwhrds650bq.fl-row > .fl-row-content-wrap{
    padding-right:24px;
    padding-left:24px;
  }
}

/* =============================================================================
   mk3.4 TYPE SCALE (requested 2026-08-18: "proper heading hierarchy and
   consistency").

   THE PROBLEM, MEASURED at 1440 before touching anything. Section-level heads
   were rendering at FIVE different sizes, and the H1 was smaller than most of
   them - a hierarchy inversion, not just an inconsistency:

     hero H1            38   (live-matched)
     stats head         44   (live fl-node-mvi28gb71hpn)
     lineup head        52   (lane B display tier)
     method head        52   (lane B display tier)
     concentrates head  38   (live fl-node-wqj1n5glphta)
     request head       44   (live tt-fw-lead-heading)
     footer cert head   28   (live fl-node-ebia0nvdmoy5)

   THE FIX IS TO BRING THE SECTIONS UNDER THE HERO, NOT TO INFLATE THE HERO.
   The hero is a deliberate reproduction of the live /shop/loud-flavors/ hero,
   measured and signed off two revisions ago; changing its size would undo that.
   So the H1 stays 38 and every section head comes down to 32, which makes the
   hero the clear peak and gives one value where there were five.

     H1  hero display        38  (live-matched, unchanged)
     --  stat numerals       36  (display figures, deliberately below the H1)
     H2  section heads       32
     H3  footer cert head    24
     H4  feature titles      20
     --  card title          18
     --  lead                18
     --  body                16
     --  eyebrow             14
     --  meta / notes        13

   Ratios 38/32/24/20/18/16/13 - a shallow, even scale, which is right for a
   page whose job is a form rather than an editorial read.
   ============================================================================= */

/* H2, one value for every section head, both lanes. */
.tt-loud [data-loud="lineup"] .tt-h2,
.tt-loud .fl-node-mvi28gb71hpn.fl-module-heading .fl-heading,
.tt-loud [data-loud="experience-h2"],
/* mk5: the imported #concentrates heading joins the page hierarchy rather than
   keeping the live PDP's own size. It arrives carrying `tt-headstash-pdp-h2`, which
   renders it at 28px; every other section head on this page resolves to 32px at 1440.
   Measured, not assumed -- a 4px difference is exactly the kind of thing that reads as
   "slightly wrong" without ever being noticed as a bug. */
.tt-loud [data-loud="applications-h2"],
/* Live's rule for the request head is
   `.tt-form-wrapper .tt-fw-lead-heading.fl-module-heading .fl-heading` - five
   classes. Four loses to it, so the wrapper class is carried here too. */
.tt-loud .tt-form-wrapper .tt-fw-lead-heading.fl-module-heading .fl-heading{
  font-size:clamp(26px,2.6vw,32px);
  line-height:1.15;
  letter-spacing:-.02em;
}
/* H3: the footer certification head reads as a footer subhead, one step down. */
.tt-loud .fl-node-ebia0nvdmoy5.fl-module-heading .fl-heading{
  font-size:clamp(20px,1.9vw,24px);
  line-height:1.3;
}
/* Leads, one value. The stats intro was 16 against 18 everywhere else.
   Live sets it with `... .fl-rich-text *:not(b):not(strong)`, and each :not()
   contributes its argument's specificity, so that selector is (0,3,2) - a
   plain (0,3,1) loses. `.fl-module` on the node makes this (0,4,1). */
.tt-loud .fl-node-iptvwzknacm4.fl-module .fl-rich-text,
.tt-loud .fl-node-iptvwzknacm4.fl-module .fl-rich-text p{
  font-size:18px;
  line-height:1.6;
}
/* Stat numerals: display figures, sized below the H1 so nothing outranks it.
   Live sets these per node at five classes deep, so these match that path
   rather than trying to win from a shorter selector. */
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string,
.tt-loud .fl-node-sykl4hv9zpf7 .fl-number .fl-number-text .fl-number-string span,
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string,
.tt-loud .fl-node-ywhkn4adjcri .fl-number .fl-number-text .fl-number-string span,
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string,
.tt-loud .fl-node-pj3ys02men9r .fl-number .fl-number-text .fl-number-string span,
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string,
.tt-loud .fl-node-x4lizjs23yq6 .fl-number .fl-number-text .fl-number-string span{
  font-size:36px;
  line-height:1.1;
}
/* Card: the product name was 14px, the SAME size as the "All Natural" label
   above it and only 1px above the tasting notes - no hierarchy inside the card
   at all. Title up to 18, label and register down to 12. */
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-title{
  font-size:18px;
  line-height:1.25;
}
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-all-natural{
  font-size:12px;
  line-height:1.5;
}
.tt-loud [data-loud="strip"] .product .tt-product .tt-product-flavor-aroma-notes{
  font-size:12px;
}

/* ------------------------------------- 2. stats band width, matched to the page
   The band arrived from live with `.fl-row-content{max-width:1440px}` and 50px
   side padding, so it ran wider than every other section on this page - the
   same mismatch the hero and the footer cert row already had. Same fix: the
   row to the page's 1200 container, the inset to its 24px gutter. */
/* 1200 INCLUDING a 24px gutter, because the system's `.tt-container` is a
   1200px box with 24px of internal padding - so a bare 1200px BB row-content
   lands its text at x=120 while every other section starts at x=144. Matching
   the outer box is not the same as matching the text edge; both are needed. */
.tt-loud .fl-node-78hpyozntuaq .fl-row-content{
  max-width:1200px;
  padding-right:24px;
  padding-left:24px;
}
@media (min-width:1025px){
  .tt-loud .fl-node-78hpyozntuaq > .fl-row-content-wrap{
    padding-right:24px;
    padding-left:24px;
  }
}
@media (max-width:1024px){
  .tt-loud .fl-node-78hpyozntuaq.fl-row > .fl-row-content-wrap{
    padding-right:24px;
    padding-left:24px;
  }
}
/* The band's left column carries 100px side margins from live's 1440 row, which
   pushed its heading to x=220 against the page's own content edge at x=144.
   Constraining the row alone does not fix that - the inner margin has to go too,
   or "match other sections" only holds for the invisible box. */
.tt-loud .fl-node-cme3li7s0rny > .fl-col-content{
  margin-right:0;
  margin-left:0;
  padding-right:40px;
}
@media (max-width:840px){
  .tt-loud .fl-node-cme3li7s0rny > .fl-col-content{padding-right:0}
}
/* Live's 120px top and bottom on this band is sized for a full-width editorial
   row; on a paid page between the hero and the lineup it is dead space. */
.tt-loud .fl-node-78hpyozntuaq > .fl-row-content-wrap{
  padding-top:64px;
  padding-bottom:64px;
}

/* --------------------- 5. the two footer photo modules stay in-line on mobile
   `loc7v1ptkui9` holds three children in source order: the True Grade icon, its
   "About True Grade" link, and the mobile-only certification strip. Stacked,
   they eat most of a phone screen. Grid puts the icon and its label in one
   column and the strip beside them, spanning both rows, so the two photo
   modules sit in-line as asked and the label stays with its icon. */
/* 841, not live's 840: the centring block below switches at 841 (the request
   was "smaller than 842"), and if the grid switched a pixel later, 841px would
   render centred text over a desktop column layout - a hybrid that belongs to
   neither. Both switch together now. */
@media (max-width:841px){
  /* The column arrived 232px wide inside a 342px content box at 390 - live's
     own leftover margin-right:10px and padding-right:30px on this branch, plus
     the parent's. Zeroed first, because no grid sizing can rescue a track that
     never had the width. Then the tracks are explicit rather than `auto`: with
     `auto minmax(0,1fr)` the label's text set column 1 and the strip collapsed
     to a 53px sliver. */
  /* !important because live pins this column with `width:31%!important` in its
     own (max-width:1024px) block, which still applies at 841. */
  .tt-loud .fl-node-loc7v1ptkui9{width:100%!important}
  .tt-loud .fl-node-loc7v1ptkui9.fl-col > .fl-col-content{
    margin-right:0;
    margin-left:0;
    padding-right:0;
    padding-left:0;
  }
  .tt-loud .fl-node-pcb84z5sqjaf.fl-col > .fl-col-content{
    padding-right:0;
    padding-left:0;
  }
  /* mk3.14: NO GRID HERE ANY MORE. This was `grid-template-columns:104px
     minmax(0,1fr)`, and both tracks existed to sit the mark beside the
     mobile-only combined strip. That strip is deleted, so the column now holds
     just the mark and its label, which stack in normal flow and centre with the
     footer's own text-align. A two-track grid with one empty track would have
     been a lie about the layout. */
  .tt-loud .fl-node-loc7v1ptkui9 > .fl-col-content{display:block}
  /* The mark's module carries `margin-bottom:30px` from live, so its BOX was
     92px against a 62px image - and `align-items:center` centres the box, which
     left the image sitting 15px (half the margin) above the strip's centre.
     A constant 15px at every width, which is what gave it away. The grid's
     row-gap does that spacing now, where it cannot bias the alignment. */
  .tt-loud .fl-node-vnic2ljxqh7p.fl-module > .fl-module-content{
    margin-top:0;
    margin-bottom:0;
  }
  /* THE TWO IMAGES ARE MATCHED ON RENDERED HEIGHT, not on width, because their
     aspect ratios are nothing alike: the True Grade mark is 582x640 (h/w 1.10)
     and the certification strip is 825x202 (h/w 0.245). Equal widths would have
     made the strip's four badges a quarter the size of the single mark, which
     is what it looked like - the strip rendered ~55px tall against the mark's
     ~97px, so each badge inside it read at about half the mark's diameter.

     Sizing both so their rendered HEIGHTS converge puts the badges at the same
     visual scale. The strip's width is capped against the viewport rather than
     set in vw alone, because it shares the row with the mark and its label:
     `calc(100vw - 140px)` reserves that column, so the pair can never overflow
     however narrow the screen gets. Measured heights - strip vs mark - 61/62 at
     390, 93/92 at 600, 93/97 at 841.

     The reserved 158px is not arbitrary: at 140 the strip took enough of the
     row that "About True Grade" wrapped to three lines under a 56px mark.
     158 leaves that column wide enough for two. */
  /* `margin-inline:auto`, because `text-align:center` cannot centre a block and
     these carry an explicit width - the mark was sitting flush left in its
     column at cx 52 while "About True Grade" centred at cx 71 beneath it. */
  .tt-loud .fl-node-a7n94lzvbcig,
  .tt-loud .fl-node-a7n94lzvbcig .fl-heading,
  .tt-loud .fl-node-a7n94lzvbcig .fl-heading a{text-align:center}
  /* No font-size here. An earlier revision set 12px at (0,3,0) and it never
     applied - live's own `.fl-node-a7n94lzvbcig.fl-module-heading .fl-heading`
     is (0,4,0) and wins. The label has been rendering at live's 16px the whole
     time, which is what the verified two-line fit in the 104px track was
     actually measured against, so the dead declaration is removed rather than
     given teeth: making it 12px now would change geometry that is already
     correct. Only line-height is set, which live leaves alone. */
  .tt-loud .fl-node-a7n94lzvbcig .fl-heading{line-height:1.3}
  .tt-loud .fl-node-a7n94lzvbcig.fl-module > .fl-module-content{margin-top:4px}
}

/* -------------------------------- 6. footer rhythm: the excess margins removed
   Live's footer is a full site footer with a link-columns row we do not ship,
   so its vertical spacing was tuned for a taller block: 71px above the cert
   band, 50px below the heading, 50px below the icons, 35px around the legal
   bar, plus a <br><br> in the copyright module that is now gone with the 21+
   line it separated. Halved or better, so the footer reads as a footer rather
   than a third of the page. */
.tt-loud .fl-node-igwhrds650bq > .fl-row-content-wrap{
  padding-top:48px;
  padding-bottom:24px;
}
.tt-loud .fl-node-ebia0nvdmoy5 > .fl-module-content{margin-bottom:28px}
.tt-loud .fl-node-ebia0nvdmoy5.fl-module > .fl-module-content{
  margin-top:8px;
  margin-bottom:28px;
}
.tt-loud .fl-node-qtoic25zyk6h > .fl-row-content-wrap{
  padding-top:20px;
  padding-bottom:20px;
}
.tt-loud [data-loud="identity-line"]{padding-bottom:24px}
.tt-loud [data-loud="identity-line"] p{margin:0 auto 2px}

/* =============================================================================
   mk3.5 -> mk4: THE EXPERIENCE-FLAVOR TEXT BLOCK, now STATIC.

   Imported from the live `.tt-loud-experience-flavor-section` and placed inside
   #concentrates above the image, centered.

   Live rotates three phrases with a JS `setInterval`. mk3 rebuilt that rotation
   as pure CSS keyframes; mk4 retired it under the static contract and shipped
   its no-animation state (three visible stacked lines).

   mk5 RESTORES THE ROTATION, ON INSTRUCTION (2026-09-02), AND IN CSS RATHER THAN
   THE JAVASCRIPT THAT WAS ASKED FOR, because CSS reaches the same rendered result
   with strictly fewer ways to fail:
     - `wp_kses` DELETES <script>` for any user without `unfiltered_html`. A JS
       rotation would therefore be silently absent for a non-Administrator paster,
       and the paste-brief's Administrator requirement would go from a nice-to-have
       to load-bearing for a visible feature.
     - lp_verify F1 strips every script and demands a pixel-identical render. With
       no script there is nothing to strip, so F1 keeps PASSING outright instead of
       becoming a waiver.
   The cost is one named exception in lint_static (STATIC_EXCEPTIONS), printed on
   every build. Instruction was "use CSS if it works, otherwise JS": it works.

   THE WHOLE ROTATION LIVES INSIDE `prefers-reduced-motion:no-preference` -- the
   grid stacking, the animation, the delays AND the @keyframes. That is not
   decoration, it is what keeps two other gates honest. Outside the query the
   spans are `display:block` in normal flow: three readable lines. So the RESTING
   state is the finished state (check D bans hide-by-default) and a render with
   animation disabled is a complete page (F3). Move any of it outside the query
   and both gates start describing a page that is blank until it animates.
   ============================================================================= */
.tt-loud [data-loud="experience-text"]{
  text-align:center;
  max-width:900px;
  margin:0 auto 28px;
}
.tt-loud [data-loud="experience-h2"]{
  color:#ffffff;
  font-weight:600;
  font-size:clamp(26px,2.6vw,32px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 12px;
  text-align:center;
}
.tt-loud .tt-heading-switch-word,
.tt-loud [data-loud="switchword"]{
  color:#ffffff;
  font-weight:600;
  font-size:clamp(18px,1.9vw,24px);
  line-height:1.3;
  margin:0;
  text-align:center;
}
.tt-loud [data-loud="switchword"] .switch-word{
  display:block;
  color:#00aeff;
}
/* STATIC-EXCEPTION-BEGIN: switchword-rotation */
@media (prefers-reduced-motion:no-preference){
  /* One grid cell, three phrases stacked in it, so the block holds the height
     of the tallest and nothing shifts as they cycle. */
  .tt-loud [data-loud="switchword"]{
    display:grid;
    align-items:start;
  }
  .tt-loud [data-loud="switchword"] .switch-word{
    grid-area:1 / 1;
    animation:ttl-switch 7.5s linear infinite both;
  }
  .tt-loud [data-loud="switchword"] .switch-word:nth-child(2){animation-delay:2.5s}
  .tt-loud [data-loud="switchword"] .switch-word:nth-child(3){animation-delay:5s}
  /* 7.5s cycle, 2.5s stagger: each phrase fades in over 4%, holds to 30%, fades
     out by 34%, then waits. `both` matters -- without it the spans snap back to
     their unanimated opacity between cycles and all three show at once. */
  @keyframes ttl-switch{
    0%{opacity:0}
    4%{opacity:1}
    30%{opacity:1}
    34%{opacity:0}
    100%{opacity:0}
  }
}
/* STATIC-EXCEPTION-END: switchword-rotation */
/* The tablet-only badge sizing block that stood here (10vw/14vw between 842 and
   1024, plus a column-inset reset) is GONE: mk3.14 below sizes every badge with
   one clamp at every width, and these rules sat EARLIER in the file at the same
   (0,3,0) specificity, so mk3.14 already beat them everywhere. Two sets of
   competing badge widths where only one could ever apply is how this file has
   produced four dead rules already. */

/* ============================== mk3.6: FOOTER CENTRED BELOW 842px (requested)
   Measured at a true 390 first. Two things were still left-aligned: the
   "Quality Certifications" label and the certification headline both computed
   `text-align:start`, and the True Grade / strip pair was left-packed because
   its grid tracks (104px + 1fr) fill the row, so the pair could not centre as a
   unit however the text inside them was aligned.

   `text-align:center` on the footer element handles every text block in one
   place - the legal bar and identity line were already centred, so nothing
   fights it. The pair is centred by making both tracks intrinsic and centring
   the track group, which needs the strip to have a real width rather than the
   `100%` of a `1fr` track it had before (that was circular once the track
   stopped being fractional).

   The range is `max-width:841px`, i.e. strictly smaller than 842, and the
   tablet badge rules above start at 842, so the two never overlap. Live's own
   imported rules still switch at its 840 breakpoint; that is one pixel of
   difference at 841 and is not worth rewriting the import for. */
@media (max-width:841px){
  .tt-loud footer{text-align:center}
  .tt-loud .fl-node-igwhrds650bq .fl-row-content,
  .tt-loud .fl-node-qtoic25zyk6h .fl-row-content{text-align:center}
}

/* ================================= mk3.9: #apply-wholesale heading top margin
   Requested 2026-08-19: `margin-top` on the heading below 550px, because it was
   crowding the section above. 200px first, then 60px on 2026-08-19: live pulls this
   heading up 40px, and once that negative margin is zeroed here (see the last
   rule in this block) the requested value lands whole, so 200 read as far too
   much.

   NOTE WHAT ELSE HAD TO CHANGE, because the margin alone made things worse.
   The lead band (`.tt-fw-lead > .fl-row-content-wrap`) is sized by live's
   `aspect-ratio:2/1`, not by its content. Measured at 390 BEFORE this change:
   the band was 195px tall while its heading and sub-line needed 245px, so the
   copy already overflowed by 90px and the sub-line was being clipped
   mid-sentence by the white form card below it ("...back with wholesale pricing
   for your" just stopped). Pushing the heading down another 200px inside a box
   that cannot grow would have buried the whole block.

   So the band is released from the fixed ratio below 550px and sized by its
   content instead. The requested margin is applied exactly as asked. */
@media (max-width:549px){
  .tt-loud #apply-wholesale h2.fl-heading{margin-top:60px!important}
  /* The band must be able to hold the taller block, or the margin just pushes
     the copy further under the form card. */
  .tt-loud .tt-form-wrapper .tt-fw-lead > .fl-row-content-wrap{
    aspect-ratio:auto;
    min-height:0;
    padding-top:0;
    padding-bottom:24px;
  }
  .tt-loud .tt-form-wrapper .tt-fw-lead .fl-col > .fl-col-content{
    aspect-ratio:auto;
    min-height:0;
  }
  /* The -40px that live pulls the heading up by fights the requested margin;
     zeroed so the requested value means what it says. Zeroing it is also why
     150px now reads the way 200px did before. */
  .tt-loud .tt-form-wrapper .tt-fw-lead-heading.fl-module > .fl-module-content{
    margin-top:0;
  }
}

/* ============================ mk3.10: hero media centred 600-1024 (requested)
   Measured before fixing: from 600 to 1024 the bottleshot is capped at
   `max-width:530px` and sat flush left at x=24, so its centre read 289 against a
   page centre of 300 (at 600) rising to 512 (at 1024) - out by up to 223px.

   THE SAME TRAP AS THE FOOTER MARK. `.tt-hero-media` already carries
   `text-align:center`, but the image is a block with an explicit max-width and
   `text-align` cannot centre a block. `margin-inline:auto` can.

   Scoped to the requested 600-1024 rather than the whole single-column range,
   which costs nothing: below 600 the container is narrower than the 530px cap,
   so the image fills it and is already centred (verified at 500 - centre 250 of
   250). Above 1024 the two-column hero resumes and the media belongs in its own
   column, untouched. */
@media (min-width:600px) and (max-width:1024px){
  .tt-loud [data-loud="hero"] .tt-hero-media img{margin-inline:auto}
}

/* ===================== mk3.11: footer cert text column to the form card's width
   Requested 2026-08-19: `.fl-node-g12l6usvxb09` (the "Quality Certifications"
   label and the certification headline) to the same max-width as
   `.contact-us-form`.

   THAT WIDTH IS 890px, AND IT IS DERIVED, NOT DECLARED. The form card's computed
   `max-width` is `none` - measured. Its 890px comes from its row
   (`.tt-fw-form .fl-row-content{max-width:1000px}`) minus the 55px of column
   padding on each side. So 890 is the number to match; copying `none` would
   have matched nothing.

   Centred too, because a `max-width` on a block has to resolve its alignment
   somehow: the column sat at x=144 filling the 1152px cert row, and left at 144
   it would have hung left of the form card above it, which centres on the page.
   890 centred puts it at 275..1165 - the form card's exact box. */
.tt-loud .fl-node-g12l6usvxb09{
  max-width:890px;
  margin-inline:auto;
}

/* ================== mk3.12: footer heading text to 22px above the mobile range
   Requested 2026-08-19: the footer's `.fl-heading-text` to 22px above 840px.

   THE BREAKPOINT IS 842, NOT 841, DELIBERATELY. "Above 840" would literally be
   `min-width:841px`, but this file's footer mobile treatment runs to 841
   INCLUSIVE (the centred layout, the two-column badge grid, the 12px label) -
   see the mk3.6 block. A rule starting at 841 would put 22px type inside the
   centred mobile layout for exactly one pixel of viewport, which is the
   one-pixel hybrid that block exists to prevent.

   mk3.12a: SCOPED TO THE H2, which is the whole point of the `h2` in the
   selector. Two footer elements carry `.fl-heading-text` - the certification
   headline (h2, node ebia0nvdmoy5) and the "About True Grade" link (h4, node
   a7n94lzvbcig) - and the first pass moved both, taking the small badge label
   from 16px to 22px. Only the h2 was wanted. Qualifying on the PARENT's tag is
   what does it: `.fl-heading-text` is a span, so `h4.fl-heading-text` matches
   nothing at all. With this scoped, the h4's span inherits live's own
   `.fl-node-a7n94lzvbcig.fl-module-heading .fl-heading{font-size:16px}` again,
   so 16px is restored by removing the override rather than by fighting it with
   a second declaration. */
/* --------------------------------------------- mk3.13: footer photos centred
   under EITHER cascade. Live centres these with BB base's
   `.fl-photo-content{display:inline-block}` plus the per-node
   `text-align:center` we import. The target is a BB page and serves that base,
   so this rule is INERT there - auto inline margins do nothing to an
   inline-block. It exists for the cascade where BB base is absent: the div is
   then a plain block carrying live's explicit width, `text-align` cannot move
   it, and the True Grade mark and all four cert badges render flush left in
   their columns. Measured on live for comparison: mark centre and label centre
   are both 304 at 1440, offset 0. Scoped to `.fl-photo-align-center` so a photo
   live aligns left or right is never dragged to the middle. */
.tt-loud footer .fl-photo-align-center > .fl-photo-content{margin-inline:auto}

@media (min-width:842px){
  .tt-loud footer h2.fl-heading .fl-heading-text{font-size:22px}
}

/* =============================================================================
   mk3.14: FIVE BADGES, THE SAME FIVE AT EVERY WIDTH, IN ONE CENTRED ROW
   Requested 2026-08-19 with a screenshot of the real BB target, which showed
   only THREE cert badges and the row hanging left.

   TWO SEPARATE BUGS, and the screenshot was the only thing that could have
   found the first one.

   1. THE BADGE SET DIFFERED BY BREAKPOINT. The four cert columns carried
      `fl-visible-desktop fl-visible-large fl-visible-medium`, so below 842px
      they all vanished and a single combined image took over - one that shows
      True Grade, ISO, cGMP and Kosher and NO FSSC, next to the standalone True
      Grade mark, so the mark appeared twice and the set was one short. Live has
      the same split; it is faithful and it is still wrong for this page. The
      combined image module is deleted from the markup, the visibility classes
      are stripped from the four columns, and the same five now render
      everywhere: True Grade, ISO 9001-2015, cGMP, FSSC 22000, Kosher.

   2. KOSHER WAS THE ONLY BADGE WITH A `srcset`, AND THE ONLY ONE MISSING ON
      TARGET. All four URLs return 200, so the asset was never the problem. What
      singled it out was its shape: the three badges that render carry a single
      same-host `src` and nothing else, while Kosher shipped `srcset` + `sizes`
      whose candidates point at trueterpenes.com while its `src` pointed at
      trueterpprod.b-cdn.net. Normalised to the shape that provably survives the
      paste: one `src`, same host, no srcset, no sizes.

   3. THE ROW IS CENTRED BY SIZING COLUMNS TO CONTENT. Live gives the five
      columns custom percentage widths (24% + 19x4, and 31% + 17x4 below 1024).
      Percentages are exactly why one missing badge made the row read left-heavy:
      an empty 19% column still holds its 19%. Content-sized columns in a
      centred flex row are centred for ANY number of badges that render, which
      is a property rather than a coincidence.
   ============================================================================= */
.tt-loud .fl-node-qnwamz43o5hv{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  /* column-gap:0 ON PURPOSE. With a real column-gap the wrapped cert line came
     out exactly HALF A GAP left of centre at every width below 842 - measured
     -4px at a 8px gap, -6 at 12, -8.4 at 16.8. The spacing is carried by
     symmetric padding on the badge columns instead (below), which centres
     exactly because every item's own box is symmetric and no gap is involved.
     row-gap stays: it separates the mark's row from the cert row below 842. */
  column-gap:0;
  row-gap:20px;
}
/* `!important` because live pins several of these widths with !important of its
   own, in its own (max-width:1024px) block. */
.tt-loud .fl-node-loc7v1ptkui9,
.tt-loud .fl-node-u061wchxtj9s,
.tt-loud .fl-node-d20y1q4l5mgi,
.tt-loud .fl-node-1xicuakswoyb,
.tt-loud .fl-node-10n8ychmg3p7{
  width:auto!important;
  max-width:none;
  flex:0 0 auto;
  float:none;
  /* BB's base gives every .fl-col 5.75px of side margin at its mobile
     breakpoint. Measured, not assumed: it made the visual gap 10+11.5 instead
     of the 10 the gap property asks for, and it ate 46px of row width, which
     is what pushed the fourth badge onto a second line at 320. The row's own
     column-gap does this spacing now. The True Grade column keeps its divider
     insets, which live puts on .fl-col-content, not here. */
  margin-inline:0;
}
/* Live insets each cert badge 20px from its column's left edge, which biases the
   badge inside its own column. The row's own gap does that spacing now, where it
   cannot push the badges off-centre. The True Grade column keeps its insets:
   they carry the 2px divider that separates the umbrella mark from the four
   certifications. */
/* `.fl-col` IS LOAD-BEARING IN THIS SELECTOR. Live writes these insets as
   `.fl-node-u061wchxtj9s.fl-col > .fl-col-content` - (0,4,0). Written without
   `.fl-col` this reset is (0,3,0) and loses, which is exactly what happened on
   the first attempt: 20px of padding survived on all four columns plus another
   20 on ISO, the five items totalled 671px inside a 638px row at 900, and the
   Kosher badge wrapped onto a second line. Fifth time this file has paid for
   live's selectors being longer than the obvious one. */
.tt-loud .fl-node-u061wchxtj9s.fl-col > .fl-col-content,
.tt-loud .fl-node-d20y1q4l5mgi.fl-col > .fl-col-content,
.tt-loud .fl-node-1xicuakswoyb.fl-col > .fl-col-content,
.tt-loud .fl-node-10n8ychmg3p7.fl-col > .fl-col-content{
  margin-inline:0;
  padding-inline:0;
}
/* THE BADGE SPACING LIVES HERE, as symmetric padding on each cert column, and
   this is what makes the run centre exactly (see column-gap:0 above). Half the
   intended gap each side, so adjacent badges sit a full gap apart and the run's
   own outer edges stay symmetric. 1vw resolves to 14.4px at 1440, matching what
   the gap used to give, and 3.2px at 320, where every pixel of row is needed. */
.tt-loud .fl-node-u061wchxtj9s,
.tt-loud .fl-node-d20y1q4l5mgi,
.tt-loud .fl-node-1xicuakswoyb,
.tt-loud .fl-node-10n8ychmg3p7{
  padding-inline:clamp(3px,1vw,16px);
}
/* ONE clamp per badge family, at every width, replacing four competing blocks.
   The four certs share a size; the umbrella mark runs ~15% larger, which is the
   ratio live uses at desktop (150 against 130). Both are capped at live's own
   desktop values so nothing renders larger than the source art. */
.tt-loud .fl-node-0u97a2rcb6qd .fl-photo-content,
.tt-loud .fl-node-0u97a2rcb6qd .fl-photo-img,
.tt-loud .fl-node-pykc3e6nhrgj .fl-photo-content,
.tt-loud .fl-node-pykc3e6nhrgj .fl-photo-img,
.tt-loud .fl-node-95ti1jsev306 .fl-photo-content,
.tt-loud .fl-node-95ti1jsev306 .fl-photo-img,
.tt-loud .fl-node-9ujc5mv42r7y .fl-photo-content,
.tt-loud .fl-node-9ujc5mv42r7y .fl-photo-img{
  /* 60px floor, not 64: at 320 the group is 272px wide and four 64s plus three
     gaps needed 286. 60 with an 8px gap needs 264 and keeps all four on one
     line at the narrowest width this page is measured at. */
  width:clamp(60px,9vw,130px);
  max-width:none;
  margin-inline:auto;
}
.tt-loud .fl-node-vnic2ljxqh7p .fl-photo-content,
.tt-loud .fl-node-vnic2ljxqh7p .fl-photo-img{
  width:clamp(76px,10.4vw,150px);
  max-width:none;
  margin-inline:auto;
}
/* Below 842 the mark takes the full row so the four certs wrap beneath it as
   one centred run, rather than five items wrapping 3+2 wherever they happen to
   land. This has to come AFTER the `width:auto!important` above, which it would
   otherwise lose to on source order. The divider goes with it: a right border
   on a full-width row would rule off nothing. */
@media (max-width:841px){
  .tt-loud .fl-node-loc7v1ptkui9{width:100%!important}
  .tt-loud .fl-node-loc7v1ptkui9 > .fl-col-content{
    border-right-width:0;
    margin-right:0;
    padding-right:0;
  }
}