/* ============================================================
   NRGVideo — child theme class layer
   VERSION 2.0.17  (supersedes 2.0.16)

   2.0.17 changelog: §26, the single clip page.
   - .nrg-clip-thumb, the featured image sitting behind the play button in
     a card. Absolutely positioned rather than a grid item, because the
     frame is display:grid with place-items:center and a second grid item
     would push the play button out of the middle.
   - .nrg-player, the preview player on the single clip page. One box for
     three cases: a native video element, an oEmbed iframe, and the empty
     state when no file is attached yet.

   2.0.16 changelog: the Video previews page becomes a real Loop Grid
   plus Taxonomy Filter, which §3e and §12 were written for in 2.0.0 and
   have been dormant since.
   - §3e loop grid gap now matches the static .nrg-clips gap exactly, and
     loop items stretch to equal height.
   - §12 filter chips: the .e-filter wrapper gets its own row layout, and
     the active state covers both the aria-pressed and the class based
     markup Elementor has shipped.
   - .nrg-play is an anchor inside a loop item rather than a span, so it
     needs its underline suppressed.
   - .nrg-clip-title wraps a link now, which has to inherit its colour.

   2.0.15 changelog, §22. One fix and a defensive pass, so the checkout
   stops needing a round trip per element.

   The empty payment notice was ~865px tall, which is roughly the height
   of the floated billing column beside it. Nothing in this file sets a
   height on it, so it was being stretched from outside. Rather than
   guess at which rule, the whole payment area now declares its own box
   model: #order_review and #payment are flow-root, so their height is
   their content and a float cannot influence it, and the notice list
   and its items carry explicit height:auto and min-height:0.

   Added in the same pass, all things that would otherwise have been
   found one screenshot at a time:
   - First and last name share a row, as the reference layout has them.
   - select2's dropdown panel, which appears on Country and State.
   - Payment method radios, labels and payment_box, for when a gateway
     is finally enabled.
   - Privacy text, terms checkbox, additional fields heading.
   - Order review panel padding tightened now the notice is not 865px.

   2.0.14 changelog: §22 checkout column layout only.

   The grid in 2.0.11 put #customer_details in column 1 spanning both
   rows, with the Your order heading in row 1 and the review panel in
   row 2 of column 2. That is the bug. Per CSS Grid intrinsic sizing, a
   spanning item distributes its height across the intrinsic tracks it
   spans, so the tall billing column inflated row 1 and pushed the
   review panel halfway down the page. `auto 1fr` does not fix it, since
   distribution still targets the auto track.

   Replaced with floats, which is how Woo's own two column checkout has
   always worked. #customer_details floats left at 55%, the heading and
   the panel each take 40% with a 60% left margin, so both sit at the
   top of the right gutter in source order. No spanning, no generated
   content, and the real h3 stays in the document where a screen reader
   can find it.

   2.0.13 changelog, three fixes from the live render.
   - §23 the count bubble. Elementor absolutely positions it off the top
     right corner of the button and colours it magenta, and my 0-3-0
     rules lost to that. Rewritten at 0-7-0 with doubled class names, so
     the bubble is now an inline hazard square inside the button, which
     is what the prototype has. Both DOM shapes covered: bubble inside
     .elementor-button-icon and bubble as a direct child of the button.
   - §24 the side cart thumbnail slot. Hiding the image left Elementor's
     grid column behind, which is the blank box. It is now a branded
     mark instead: an ink square with a hazard diamond, same language as
     the header logo. No product images needed. See the note in §24 for
     the one line to delete when real images are added.
   - §25 the shop card now mirrors the package card: ink header block
     holding the hazard title and bone price, bone body below, smaller
     button. It read as a generic Woo card because the title and price
     sat directly on white.

   2.0.12 changelog: §25 the product grid, nothing else moved.
   Scoped to .nrg-shop, the Shortcode widget holding [products] inside a
   Theme Builder Product Archive template. The Shop page ignores page
   content and renders through the archive template, which is why this
   one is a template rather than a page like the cart and checkout.

   Woo's loop markup, ul.products and li.product with
   .woocommerce-loop-product__title and .add_to_cart_button, is the most
   stable thing in Woo, so this section is lower risk than §21 to §24.

   2.0.11 changelog, three new sections, nothing existing moved.
   - §22 checkout. The [woocommerce_checkout] shortcode in an Elementor
     page, same approach as the cart. Billing left, order review right,
     collapsing to one column at 1024.
   - §23 the Menu Cart toggle. Elementor's widget puts the subtotal in
     the button, the prototype has the word Cart and a count badge, so
     the subtotal is hidden and the label restored in CSS.
   - §24 the side cart panel.

   CAVEAT on all three: Woo's checkout markup and Elementor's menu cart
   markup are not verified against a real render. The class names are the
   long-standing ones, but check and send a screenshot.

   Note for anyone extending §21 to §24: the 2.0.10 bug was a hide rule
   losing to another rule in this same file. When adding a display:none,
   match the descendant depth of the block rule it has to beat.

   2.0.10 changelog, §21 only.
   - Two display:none rules in 2.0.9 were beaten by other rules in
     2.0.9. `tr.cart_item > td` is 0-5-2 and the rule hiding the
     thumbnail and unit price columns was 0-5-1, so six grid items
     landed in a four column grid and every row wrapped onto two
     lines. Same mistake on the cart subtotal row, 0-4-1 against
     0-4-2. Both hide rules now carry the same descendant depth as
     the rule they have to beat. Specificity inside this file needs
     as much attention as specificity against Elementor's.
   - Quantity stepper styling added for nrg-cart.js, which injects
     the minus and plus buttons the prototype has and Woo does not.

   2.0.9 changelog: §21 WooCommerce cart, nothing else moved.
   The cart page is the [woocommerce_cart] shortcode in a Shortcode
   widget carrying .nrg-cart, so all standard behaviour stays intact:
   quantity update, remove, coupons, totals, proceed to checkout. This
   section restyles Woo's own table markup into the prototype's row
   layout rather than replacing it.

   CAVEAT: Woo's cart markup is the one thing in this file not verified
   against a real render. The class names below are the stable ones Woo
   has shipped for years, but check the page after import and send a
   screenshot if anything sits wrong.

   2.0.8 changelog, §14 form layout only. Nothing else moved.
   The 2.0.7 form rules sat at 0-3-0 and lost. Elementor Pro lays a
   field group out as a flex row and only stacks the label above the
   field when the wrapper carries .elementor-labels-above, which comes
   from a Style-tab control we are not allowed to touch. So the label
   position, the row gap and the field widths are all forced here, with
   doubled class names for specificity, the same trick §3c already uses
   against Elementor's widget margin rule. No !important anywhere.

   2.0.7 changelog, About and Contact:
   - Card rhythm now matches the prototype exactly. The gap between a
     tag badge and the heading under it comes from the heading's top
     margin, not the badge's bottom margin, which is what lets a card
     open on either one. .nrg-fnum's restored bottom margin drops to 0
     and .nrg-fcard headings gain 1.2rem on top. Same total on the home
     page, and the Contact card's three heading and paragraph pairs now
     space themselves.
   - .nrg-card-open moves to 0-5-0 so it beats that new top margin
     without depending on source order.
   - .nrg-cardbody gains prose spacing, zeroed on the last child so a
     single paragraph card keeps its padding honest.
   - .nrg-grid-2-top for a two column row that aligns to the top.
   - .nrg-beast-slot, .nrg-hint, and the hazard card text colours.
     .nrg-hint is context scoped for the same reason the fnum badge was:
     a bare 0-2-0 colour loses to the section body colour in §4.
   - §14 form fields laid out in CSS. The name and email pair is done
     with :nth-child rather than a per-field width in the JSON, so no
     unverified serialisation key decides the layout.

   2.0.6 changelog, all three for the Packages page:
   - .nrg-pagehead headline measure is now a variable, --nrg-measure,
     with .nrg-pagehead-wide as the 22ch modifier. Previews wants 20ch
     and Packages wants 22ch and neither should need its own rule.
   - .nrg-ticks added as a widget-level entry point to the same list
     rules the package card uses, so a diamond bullet list can sit in
     any Text Editor without being wrapped in .nrg-pkg-list. One rule
     set, two entry points, rather than a second copy of it.
   - .nrg-fcard headings lose their top margin when they are the first
     thing in the card, which is the case in the Packages inclusions
     card but never on the home page.

   2.0.5 changelog:
   - §3g NEW, and it is the important one. Elementor gives every
     container 10px of padding and 20px of gap by default, from
     `--padding-top: var(--container-default-padding-top, 10px)` and
     `--gap: var(--widgets-spacing, 20px)` in its own _container.scss.
     Any container without an explicit override inherited both, which
     is what forced padding:0 onto eighteen containers by hand. The
     defaults are now zeroed at the custom-property level, so panel
     values still work and nothing needs a manual reset again.
   - Every flex container in this file now declares its own gap, per
     §9.2. Nothing relies on the Elementor default any more.
   - §19 Video previews page: page head, filter chips.
   - §20 Footer.
   - .nrg-stack added for plain column containers, so a container with
     no visual identity still declares its own display and direction.

   2.0.4 changelog, six fixes from the live render:
   - §3a is stronger than every p-level rule in this file. It sets
     font/color/padding to inherit at 0-3-1 on the inner element, so
     anything set on a paragraph-level selector at 0-2-1 never lands. Text
     styling now goes on the WIDGET WRAPPER only and inherits down.
     That is why the fnum badge came out dim and unpadded.
   - Text colour inside an inverted section needs 0-3-0 to beat the
     section context rule in §4. Added scoped rules for fnum, clip tag
     and the package list, which were all resolving to Ash or Dim.
   - §7 rail no longer uses background-clip on the background-colour.
     The 8px bands took their colour from whatever was behind the rail,
     which on the prototype was a black body and in WordPress is a
     white page. The strip is now its own gradient layer over an Ink
     background-colour, so the rail looks the same anywhere.
   - §10 a child CONTAINER defaults to width:100%, which is what pushed
     the lede and the All previews button onto their own line in every
     section head. Widgets are unaffected, which is why the hero button
     row was fine.
   - §12 the clip frame's HTML widget now fills the frame and is the
     positioning context, so the duration badge lands in the frame's
     bottom right corner instead of the play button's.
   - Package list copy is Ink on the white card, not the dark section's
     body colour.

   2.0.3 changelog, everything the home page needed:
   - §4c .nrg-wrap. Sections are now Full Width containers with a
     .nrg-wrap child, mirroring .sec / .wrap in the prototype. No
     container on a page relies on Boxed, so .e-con-inner never
     appears and every class sits on the element it styles.
   - §7 rail corrected. The dashes are Bone over a hazard or magenta
     background-color, clipped to the content box with 8px padding,
     which is what makes the black edge bands. v2 had ink dashes and
     no clip, so both rails rendered as flat colour.
   - §12 clip frame is display:grid place-items:center, and carries
     the second diagonal gradient layer. It was in the display:block
     list, which left the play button in the top left.
   - §13 package card is flex column with flex:1 on the list, so all
     three Add to cart buttons sit on one line regardless of how many
     bullets each tier has.
   - §18 new: hero grid, generic 2 and 3 column grids, clip body,
     play button, diamond backdrop, card body text.

   2.0.2 changelog, all five from the real 4.2.1 header export:
   - New token --nrg-gut, the prototype's clamp(20px,5vw,72px) gutter.
   - New rule set for boxed containers (§4b, §15d). Panel padding and
     panel flex settings on a Boxed container are consumed by
     .e-con-inner, not by the element carrying the class, so both now
     get targeted at 0-2-1 which beats Elementor's 0-1-0 custom props.
   - Nav is pushed right in CSS instead of by a wrapper container.
   - Nav item padding and nowrap added. The default horizontal item
     spacing wrapped a five-item menu onto two lines.
   - .nrg-cartstub draws the count badge as a pseudo-element, so the
     Button text field stays plain text until Menu Cart replaces it.

   2.0.1 changelog, both header-build fixes:
   - §15b added. .nrg-logo carried no rules in 2.0.0, so the header
     mark rendered as unstyled inline content.
   - .nrg-nav .elementor-item now reserves a transparent 3px bottom
     border, so the active item's hazard underline does not shift
     the whole nav row down by 3px.

   Stack: Hello Elementor 3.4.9 / Hello Child 2.0.0
          Elementor + Pro 4.2.1, Atomic Editor OFF, Optimized Markup ON

   v2 changelog — all three were real bugs in v1:
   - Added the compatibility layer (§3). v1 had none.
   - Heading/button/text rules lifted from 0-2-0 to 0-3-0. At 0-2-0
     they tied with Elementor and lost on source order.
   - Every layout class now carries a .e-con selector, and
     flex-direction / display are declared explicitly.
   - Dropped all !important. Correct specificity made it unnecessary.

   Section numbers below map to PROJECT-SOUL.md §7 gotcha numbers.
   ============================================================ */


/* ============================================================
   1. TOKENS — literal values
   ============================================================ */

:root{
  --nrg-ink:#0E0E0E;
  --nrg-beast:#E01A72;
  --nrg-graphite:#3A3A3A;
  --nrg-hazard:#FFED00;

  /* Custom kit colours stay LITERAL and are never bridged.
     Elementor gives custom global colours a generated hash
     (--e-global-color-7deaba8) that is regenerated when the kit
     is recreated, so it differs between staging and production.
     Binding to one breaks silently at migration. */
  --nrg-bone:#FFFFFF;
  --nrg-asphalt:#1A1A1A;
  --nrg-slab:#232323;
  --nrg-ash:#8A8A8A;
  --nrg-siren:#E8272C;

  --nrg-dim:#C9C9C9;
  --nrg-haz-dim:#4A4A00;

  --nrg-disp:'Archivo Black',Impact,sans-serif;
  --nrg-body:Archivo,system-ui,-apple-system,sans-serif;
  --nrg-util:'Barlow Condensed',sans-serif;

  --nrg-max:1240px;
  --nrg-rail-h:52px;
  --nrg-sec-y:clamp(64px,9vw,128px);
  --nrg-gut:clamp(20px,5vw,72px);
}

/* ------------------------------------------------------------
   2. TOKEN BRIDGE  —  §7.1
   MUST be on body, not :root. Elementor scopes kit variables to
   .elementor-kit-{id} printed on <body>. :root is <html>, the
   parent, and custom properties only inherit downward — a bridge
   at :root resolves to its fallback every time, the site looks
   perfect, and changing a Global Colour moves nothing.

   Only the four named system slots have stable variable names.
   ------------------------------------------------------------ */

body{
  --nrg-ink:      var(--e-global-color-primary,   #0E0E0E);
  --nrg-beast:    var(--e-global-color-secondary, #E01A72);
  --nrg-graphite: var(--e-global-color-text,      #3A3A3A);
  --nrg-hazard:   var(--e-global-color-accent,    #FFED00);
}


/* ============================================================
   3. COMPATIBILITY LAYER
   This is the part that transfers to the next project unchanged.
   Do not edit it to fix a design problem — fix the design
   problem in section 4 onward.
   ============================================================ */

/* ------------------------------------------------------------
   3a. Wrapper neutralisation  —  §7.2
   Advanced → CSS Classes puts the class on the widget's outer
   <div>, not the text. A Heading with .nrg-h1 sizes a div, then
   the <h2> inside applies its own 1.5em browser default.

   Both DOM shapes are covered because Optimized Markup strips
   .elementor-widget-container from a growing list of widgets.
   The .elementor-element prefix lifts each path to 0-3-1,
   beating Elementor's 0-2-0 regardless of source order.

   ADD EVERY NEW WIDGET TYPE CLASS TO BOTH LISTS.
   ------------------------------------------------------------ */

.elementor-element:is(
  .elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-button,
  .elementor-widget-theme-site-logo,
  .elementor-widget-image
) > :is(h1,h2,h3,h4,h5,h6,p,span,div,.elementor-heading-title),

.elementor-element:is(
  .elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-button,
  .elementor-widget-theme-site-logo,
  .elementor-widget-image
) > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,p,span,div,.elementor-heading-title){
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0;
}

/* ------------------------------------------------------------
   3b. Explicit direction and display  —  §7.4
   A class declaring `display:flex` with no `flex-direction` has
   nothing to raise, and Elementor containers default to column.
   That is what stacked the hero buttons on the last project.

   Forcing structural wrappers back to block is the single
   highest-value rule here — it makes centred text, auto margins
   and inline-block behave as they do in the prototype.
   ------------------------------------------------------------ */

.e-con:is(
  .nrg-cta-row,
  .nrg-sechead,
  .nrg-hdr,
  .nrg-hdr-mark,
  .nrg-ftr-base,
  .nrg-hero-meta
){flex-direction:row}

.e-con:is(
  .nrg-rail,
  .nrg-fcard,
  .nrg-clip,
  .nrg-clip-frame,
  .nrg-pkg,
  .nrg-pkg-top,
  .nrg-pkg-list,
  .nrg-note
){display:block}

/* ------------------------------------------------------------
   3c. Widget bottom-margin restore  —  §7.5 / §7.6
   Elementor zeroes it with
   `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
   at 0-3-0. Restore ONLY margin-block-end, at 0-4-0, and only
   the one property — raising a whole declaration block also
   outranks legitimate scoped overrides (§7.6, the 60px→72px H1).
   ------------------------------------------------------------ */

.e-con .elementor-widget.elementor-widget.nrg-eyebrow{margin-block-end:16px}
.e-con .elementor-widget.elementor-widget.nrg-h1{margin-block-end:28px}
.e-con .elementor-widget.elementor-widget.nrg-h2{margin-block-end:20px}
.e-con .elementor-widget.elementor-widget.nrg-h3{margin-block-end:12px}
.e-con .elementor-widget.elementor-widget.nrg-fnum{margin-block-end:0}
.e-con .elementor-widget.elementor-widget.nrg-clip-tag{margin-block-end:6px}
.e-con .elementor-widget.elementor-widget.nrg-lede{margin-block-end:24px}

/* Inside a section head the lede is a column, not prose. This ties at
   0-4-0 with the rule above and wins on source order, which is the one
   place in this file where order is load-bearing. Do not move it. */
.e-con.nrg-sechead .elementor-widget.elementor-widget.nrg-lede{margin-block-end:0}

/* ------------------------------------------------------------
   3d. text-align on the element wrapper  —  §7.8
   Elementor sets it at the same specificity as a layout class
   and loads later. The section element itself computes to
   `start`, not just its children.
   ------------------------------------------------------------ */

.e-con:is(.nrg-stats,.nrg-pkg) .elementor-element{text-align:inherit}

/* ------------------------------------------------------------
   3e. Loop Grid wrapper  —  §7.10
   A class on the Loop Grid widget makes the WRAPPER the grid;
   the loop container becomes a single grid item and cards
   collapse (168px instead of 330px last time).
   ------------------------------------------------------------ */

.elementor-widget-loop-grid.nrg-clipgrid{display:block}
.nrg-clipgrid .elementor-loop-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:stretch;
}

/* Elementor puts .e-loop-item on the loop item's own root container, so
   our card class and its class are on the same element. Stretching it
   makes every card the same height regardless of title length, which is
   what the static grid got from align-items:stretch. */
.nrg-clipgrid .elementor-loop-container > .e-con.nrg-clip{height:100%}

/* ------------------------------------------------------------
   3f. Sticky header  —  §7.13
   Elementor's `.e-con{position:relative}` ties with .nrg-hdr and
   loads later, so sticky silently becomes static.
   ------------------------------------------------------------ */

.e-con.nrg-hdr{
  display:flex;
  position:sticky;
  top:0;
  z-index:100;
}


/* ------------------------------------------------------------
   3g. Container defaults  (new in 2.0.5)
   Verified against Elementor's assets/dev/scss/frontend/_container.scss:

     .e-con{
       --padding-top: var(--container-default-padding-top, 10px);
       ... same for right, bottom, left
       --gap:     var(--widgets-spacing, 20px);
       --row-gap: var(--widgets-spacing-row, 20px);
       --column-gap: var(--widgets-spacing-column, 20px);
     }

   So every container starts with 10px of padding on all four sides
   and a 20px gap unless something overrides it. On a design system
   that controls its own spacing, those two defaults show up as
   misaligned content in every nested container.

   Zeroing the DEFAULT custom properties rather than the padding
   property itself is deliberate. Elementor resolves panel values
   through `--padding-block-start`, which sits downstream of these,
   so a padding set in the Layout tab still wins. This kills only
   the default. Same specificity as Elementor's own rule, 0-1-0,
   and this file loads after elementor-frontend.
   ------------------------------------------------------------ */

.e-con{
  --padding-top:0px;
  --padding-right:0px;
  --padding-bottom:0px;
  --padding-left:0px;
  --gap:0px;
  --row-gap:0px;
  --column-gap:0px;
}


/* ============================================================
   4. SECTION CONTEXTS
   One of these on every top-level Container.
   Inner-element targeting at 0-3-0 per §7.14 — a class on the
   wrapper cannot recolour .elementor-heading-title inside it.
   ============================================================ */

.e-con.nrg-dark{background-color:var(--nrg-ink);color:var(--nrg-bone)}
.e-con.nrg-light{background-color:var(--nrg-bone);color:var(--nrg-graphite)}
.e-con.nrg-haz{background-color:var(--nrg-hazard);color:var(--nrg-haz-dim)}

.nrg-dark .elementor-element .elementor-heading-title{color:var(--nrg-bone)}
.nrg-light .elementor-element .elementor-heading-title{color:var(--nrg-ink)}
.nrg-haz .elementor-element .elementor-heading-title{color:var(--nrg-ink)}

.nrg-dark .elementor-element.elementor-widget-text-editor{color:var(--nrg-dim)}
.nrg-light .elementor-element.elementor-widget-text-editor{color:var(--nrg-graphite)}
.nrg-haz .elementor-element.elementor-widget-text-editor{color:var(--nrg-haz-dim)}

/* Links inside inverted sections, per §7.14 — cover the anchor too */
.nrg-dark .elementor-element .elementor-heading-title a{color:inherit}

.e-con.nrg-sec{padding-block:var(--nrg-sec-y)}

/* ------------------------------------------------------------
   4b. Boxed section gutter  (new in 2.0.2)
   A Boxed container renders .e-con-boxed (outer, carries the class)
   plus .e-con-inner (max-width = kit Content Width). Elementor feeds
   panel padding into the INNER, so the gutter has to be set there or
   it would sit outside the 1240 box and the content edge would stop
   matching the prototype's .wrap on wide screens.
   0-2-1 beats Elementor's .e-con-inner at 0-1-0.
   ------------------------------------------------------------ */

.e-con.nrg-sec > .e-con-inner{padding-inline:var(--nrg-gut)}

/* ------------------------------------------------------------
   4c. .nrg-wrap  (new in 2.0.3)
   The page build keeps every container Full Width and puts this on
   one child per section, exactly like .wrap in the prototype. That
   way §4b never fires, no .e-con-inner exists anywhere on a page,
   and a class always lands on the element it is meant to style.
   ------------------------------------------------------------ */

.e-con.nrg-wrap{
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  max-width:var(--nrg-max);
  margin-inline:auto;
  padding-inline:var(--nrg-gut);
}


/* ============================================================
   5. TYPE ROLES
   ============================================================ */

.elementor-element.nrg-eyebrow{
  font-family:var(--nrg-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.82rem;
  line-height:1.3;
}
.nrg-dark .elementor-element.nrg-eyebrow{color:var(--nrg-hazard)}
.nrg-light .elementor-element.nrg-eyebrow{color:var(--nrg-beast)}
.nrg-haz .elementor-element.nrg-eyebrow{color:#8A1A00}

.elementor-element.nrg-lede{font-size:1.15rem;line-height:1.6;max-width:56ch}

/* 0-3-0 — beats .elementor-widget-heading .elementor-heading-title at 0-2-0 */
.elementor-element.nrg-h1 .elementor-heading-title,
.elementor-element.nrg-h1 > :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--nrg-disp);
  font-size:clamp(3rem,10vw,7.5rem);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.elementor-element.nrg-h2 .elementor-heading-title,
.elementor-element.nrg-h2 > :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--nrg-disp);
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.elementor-element.nrg-h3 .elementor-heading-title,
.elementor-element.nrg-h3 > :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--nrg-disp);
  font-size:1.2rem;
  line-height:1.15;
  text-transform:uppercase;
}

/* Hero headline treatments — inline HTML in the Heading text field */
.nrg-h1 em{font-style:normal;color:var(--nrg-hazard)}
.nrg-h1 .nrg-out{color:transparent;-webkit-text-stroke:3px var(--nrg-beast)}


/* ============================================================
   6. BUTTONS
   0-3-0, so no !important needed. Leave the Style tab untouched
   or Elementor emits a higher-specificity per-widget rule.
   ============================================================ */

.elementor-element.nrg-btn .elementor-button{
  font-family:var(--nrg-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1rem;
  padding:.95rem 1.9rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  transition:transform .12s ease,box-shadow .12s ease;
}
.elementor-element.nrg-btn .elementor-button:hover{transform:translate(-3px,-3px)}
.elementor-element.nrg-btn .elementor-button:focus-visible{outline:4px solid var(--nrg-hazard);outline-offset:4px}

.elementor-element.nrg-btn-haz .elementor-button{
  background-color:var(--nrg-hazard);
  color:var(--nrg-ink);
  box-shadow:6px 6px 0 var(--nrg-beast);
}
.elementor-element.nrg-btn-haz .elementor-button:hover{box-shadow:9px 9px 0 var(--nrg-beast)}

.elementor-element.nrg-btn-mag .elementor-button{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  box-shadow:6px 6px 0 var(--nrg-hazard);
}
.elementor-element.nrg-btn-mag .elementor-button:hover{box-shadow:9px 9px 0 var(--nrg-hazard)}

.elementor-element.nrg-btn-ghost .elementor-button{
  background-color:transparent;
  box-shadow:6px 6px 0 var(--nrg-beast);
}
.nrg-dark .elementor-element.nrg-btn-ghost .elementor-button{color:var(--nrg-bone);border-color:var(--nrg-bone)}
.nrg-light .elementor-element.nrg-btn-ghost .elementor-button,
.nrg-haz .elementor-element.nrg-btn-ghost .elementor-button{color:var(--nrg-ink);border-color:var(--nrg-ink)}
.elementor-element.nrg-btn-ghost .elementor-button:hover{box-shadow:9px 9px 0 var(--nrg-beast)}

.elementor-element.nrg-btn-sm .elementor-button{padding:.6rem 1.2rem;font-size:.85rem;box-shadow:4px 4px 0 var(--nrg-ink)}


/* ============================================================
   7. THE SIGNATURE — filmstrip sprocket rail
   Empty Container. Modifiers at 0-3-0 per §7.12, because the
   base class now sits at 0-2-0 and a single-class modifier
   would lose (that is what made all three footers white).
   ============================================================ */

.e-con.nrg-rail{
  --nrg-rail-fill:var(--nrg-hazard);
  display:block;
  height:var(--nrg-rail-h);
  min-height:var(--nrg-rail-h);
  padding:0;
  border-block:5px solid var(--nrg-ink);
  background-color:var(--nrg-ink);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 14px,
      var(--nrg-bone) 14px 40px,
      transparent 40px 54px),
    linear-gradient(var(--nrg-rail-fill),var(--nrg-rail-fill));
  background-size:auto 26px,auto 26px;
  background-position:center center,center center;
  background-repeat:repeat-x,no-repeat;
}

/* The strip is a gradient layer, not the background-colour, so the
   8px bands above and below stay Ink no matter what the rail is
   sitting on. The prototype got its black bands from the body. */
.e-con.nrg-rail.nrg-rail-haz{--nrg-rail-fill:var(--nrg-hazard)}
.e-con.nrg-rail.nrg-rail-mag{--nrg-rail-fill:var(--nrg-beast)}
.e-con.nrg-rail.nrg-rail-bone{--nrg-rail-fill:var(--nrg-bone)}


/* ============================================================
   8. MARQUEE  —  HTML widget, so no wrapper problem
   Always visible; the animation does not gate visibility (§7.15).
   ============================================================ */

.nrg-marquee{
  background-color:var(--nrg-beast);
  border-block:5px solid var(--nrg-ink);
  overflow:hidden;
  padding-block:.7rem;
}
.nrg-marquee-run{
  display:flex;
  gap:2.5rem;
  white-space:nowrap;
  width:max-content;
  animation:nrg-slide 26s linear infinite;
  will-change:transform;
}
.nrg-marquee-run span{
  font-family:var(--nrg-disp);
  text-transform:uppercase;
  font-size:1.15rem;
  color:var(--nrg-bone);
}
.nrg-marquee-run span::after{content:"\25C6";color:var(--nrg-hazard);margin-left:2.5rem}
@keyframes nrg-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ============================================================
   9. HAZARD DIAMOND  —  HTML widget
   ============================================================ */

.nrg-diamond{
  width:78px;height:78px;
  background-color:var(--nrg-hazard);
  border:6px solid var(--nrg-ink);
  transform:rotate(45deg);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.nrg-diamond > *{transform:rotate(-45deg);font-family:var(--nrg-disp);font-size:1.5rem;color:var(--nrg-ink)}


/* ============================================================
   10. LAYOUT HELPERS
   ============================================================ */

.e-con.nrg-sechead{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-block-end:clamp(32px,5vw,56px);
}
/* A child CONTAINER carries width:100% from Elementor's --width, so in
   a wrapping row it takes the whole line and every sibling drops below
   it. Widgets do not, which is why the hero button row was fine and
   every section head was not. */
.e-con.nrg-sechead > .e-con{width:auto;flex:0 1 auto}

.nrg-sechead .elementor-element.nrg-lede{max-width:48ch}

/* HTML widget content — no .e-con needed */
.nrg-hero-meta{
  display:flex;flex-direction:row;gap:1.5rem;flex-wrap:wrap;
  margin-block:0 2rem;
  border-left:5px solid var(--nrg-beast);
  padding-left:1.2rem;
}
.nrg-hero-meta div{
  font-family:var(--nrg-util);
  text-transform:uppercase;letter-spacing:.1em;
  font-size:.9rem;color:var(--nrg-ash);
}
.nrg-hero-meta b{
  display:block;
  font-family:var(--nrg-disp);
  font-size:1.9rem;letter-spacing:-.02em;
  color:var(--nrg-bone);
}

.nrg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.nrg-stats b{
  display:block;
  font-family:var(--nrg-disp);
  font-size:clamp(2.2rem,5vw,3.4rem);
  letter-spacing:-.03em;color:var(--nrg-ink);
}
.nrg-stats span{
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.85rem;color:var(--nrg-haz-dim);
}


/* ============================================================
   11. FEATURE CARD
   ============================================================ */

.e-con.nrg-fcard{
  display:block;
  padding:clamp(20px,2.4vw,32px);
  background-color:var(--nrg-asphalt);
  border:4px solid var(--nrg-slab);
}
.nrg-light .e-con.nrg-fcard{background-color:#F4F4F4;border-color:var(--nrg-ink)}
.nrg-haz .e-con.nrg-fcard{background-color:#FFF8B0;border-color:var(--nrg-ink)}
.nrg-haz .nrg-fcard .elementor-element .elementor-heading-title{color:var(--nrg-ink)}
.nrg-haz .elementor-element.nrg-cardbody{color:#4A4A00}

/* The prototype puts the gap between a tag badge and the heading below
   it on the HEADING, which is why a card can open on either one.
   0-4-0: .e-con.nrg-fcard is 2, .elementor-widget.elementor-widget is 2. */
.e-con.nrg-fcard .elementor-widget.elementor-widget.nrg-h3{margin-block-start:1.2rem}

/* Prose rhythm for stacked heading and paragraph pairs, zeroed on the
   last child. The :last-child rule is 0-5-0, so it wins outright. */
.e-con.nrg-fcard .elementor-widget.elementor-widget.nrg-cardbody{margin-block-end:1.4rem}
.e-con.nrg-fcard .elementor-widget.elementor-widget.nrg-cardbody:last-child{margin-block-end:0}

/* Wrapper only. §3a sets font, colour and padding to inherit on the
   paragraph inside at 0-3-1, so a `.nrg-fnum p` rule cannot win and is
   not needed: the paragraph inherits all of this. */
.elementor-element.nrg-fnum{
  font-family:var(--nrg-util);font-weight:700;
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  background-color:var(--nrg-hazard);
  display:inline-block;
  padding:.2rem .7rem;
}

/* 0-3-0 to beat §4's section body colour, which is also 0-3-0 and
   comes earlier in the file. */
.nrg-dark .elementor-element.nrg-fnum,
.nrg-light .elementor-element.nrg-fnum{color:var(--nrg-ink)}
.nrg-haz .elementor-element.nrg-fnum{
  background-color:var(--nrg-ink);
  color:var(--nrg-hazard);
}

.nrg-dark .nrg-fcard .elementor-element .elementor-heading-title{color:var(--nrg-beast)}

/* A card that opens on its heading rather than on a tag badge. 0-5-0,
   one level above the .nrg-fcard heading rule it has to beat. */
.e-con.nrg-fcard .elementor-widget.elementor-widget.nrg-h3.nrg-card-open{margin-block-start:0}


/* ============================================================
   12. CLIP CARD — Loop Item template
   ============================================================ */

.e-con.nrg-clip{background-color:var(--nrg-asphalt);border:4px solid var(--nrg-ink);transition:transform .14s ease}
.e-con.nrg-clip:hover{transform:translateY(-6px)}
.e-con.nrg-clip:focus-within{outline:4px solid var(--nrg-beast);outline-offset:3px}
.nrg-light .e-con.nrg-clip{background-color:#F4F4F4}

.e-con.nrg-clip-frame{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  padding:0;
  border-block:14px solid var(--nrg-ink);
  background-color:var(--nrg-slab);
  background-image:
    repeating-linear-gradient(90deg,transparent 0 10px,var(--nrg-ink) 10px 26px,transparent 26px 36px),
    linear-gradient(135deg,#2C2C2C 0%,#1C1C1C 100%);
  background-size:auto 8px,auto auto;
  background-position:top center,center center;
  background-repeat:repeat-x,no-repeat;
}
/* The HTML widget wrapper is the grid item. Left to shrink-wrap it
   becomes the containing block for the absolutely positioned duration
   badge, which then sits in the corner of the play button. Filling the
   frame makes the frame the effective positioning context again. */
.e-con.nrg-clip-frame > .elementor-element{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.nrg-clip-frame img{width:100%;height:100%;object-fit:cover;display:block}

.nrg-clip-dur{
  position:absolute;bottom:8px;right:8px;
  background-color:var(--nrg-ink);color:var(--nrg-hazard);
  font-family:var(--nrg-util);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;padding:.15rem .5rem;
}
.elementor-element.nrg-clip-tag{
  font-family:var(--nrg-util);font-weight:700;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
}
.nrg-light .elementor-element.nrg-clip-tag,
.nrg-dark .elementor-element.nrg-clip-tag{color:var(--nrg-beast)}

/* Taxonomy Filter styled as the prototype's chips. The widget renders a
   .e-filter wrapper holding .e-filter-item buttons; the wrapper needs the
   row layout, since the widget's own gap control lives in the Style tab
   and the Style tab is off limits on an nrg- widget. */
.elementor-element.nrg-chips .e-filter{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.6rem;
  padding:0;
  margin:0;
  list-style:none;
}
.nrg-chips .e-filter-item{
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;
  padding:.45rem 1.1rem;border:3px solid var(--nrg-ink);
  border-radius:0;background-color:var(--nrg-bone);color:var(--nrg-ink);
}
/* Elementor has shipped both shapes for the active chip. Cover both. */
.nrg-chips .e-filter-item[aria-pressed="true"],
.nrg-chips .e-filter-item.e-filter-item-active,
.nrg-chips .e-filter-item.active{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
}
.nrg-chips .e-filter-item:focus-visible{
  outline:3px solid var(--nrg-beast);
  outline-offset:3px;
}


/* ============================================================
   13. PACKAGE CARD
   ============================================================ */

.e-con.nrg-pkg{
  display:flex;
  flex-direction:column;
  gap:0;
  background-color:var(--nrg-bone);color:var(--nrg-ink);
  border:5px solid var(--nrg-ink);
  position:relative;
}
.e-con.nrg-pkg-top{
  display:block;
  background-color:var(--nrg-ink);
  padding:1.6rem 1.6rem 1.3rem;
}
.e-con.nrg-pkg-list{display:block;flex:1;padding:1.4rem 1.6rem}
.e-con.nrg-pkg-foot{display:block;padding:0 1.6rem 1.6rem}
.nrg-pkg-foot .elementor-element.nrg-btn .elementor-button{width:100%;justify-content:center}
.e-con.nrg-pkg.nrg-pkg-feat .nrg-pkg-top{background-color:var(--nrg-beast)}

.nrg-pkg-top .elementor-element .elementor-heading-title{color:var(--nrg-hazard)}

/* 0-4-0 modifier so the tier name does not depend on a three level
   descendant selector for its size, per §9.6. */
.elementor-element.nrg-h3.nrg-pkg-name .elementor-heading-title,
.elementor-element.nrg-h3.nrg-pkg-name > :is(h1,h2,h3,h4,h5,h6){font-size:1.6rem}
.nrg-pkg-feat .nrg-pkg-top .elementor-element .elementor-heading-title{color:var(--nrg-bone)}

.nrg-pkg-price{
  font-family:var(--nrg-disp);font-size:3rem;line-height:1;
  letter-spacing:-.03em;color:var(--nrg-bone);margin-top:.6rem;
}
.nrg-pkg-price sup{font-size:1.2rem;vertical-align:super}
.nrg-pkg-price small{
  display:block;font-family:var(--nrg-util);
  font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;
  color:#9C9C9C;margin-top:.4rem;
}
.nrg-pkg-feat .nrg-pkg-price small{color:#FFD9E8}

/* Vertical rhythm as margin-bottom on the elements themselves,
   never `> * + *` — Elementor nests a div and it stops matching (§9.3) */
/* 0-4-0 so the white card wins over §4's dark section body colour. */
.nrg-dark .e-con.nrg-pkg .elementor-element.elementor-widget-text-editor{color:var(--nrg-ink)}

/* Two entry points into one rule set: .nrg-pkg-list is the container
   inside a package card, .nrg-ticks goes straight on a Text Editor
   widget anywhere else. */
.nrg-pkg-list ul,
.elementor-element.nrg-ticks ul{list-style:none;margin:0;padding:0}
.elementor-element.nrg-ticks ul{padding-block-start:1rem}
.nrg-pkg-list li,
.elementor-element.nrg-ticks li{
  padding:.5rem 0 .5rem 1.7rem;position:relative;
  font-size:.98rem;border-bottom:2px solid #EBEBEB;
}
.nrg-pkg-list li:last-child,
.elementor-element.nrg-ticks li:last-child{border-bottom:0}
.nrg-pkg-list li::before,
.elementor-element.nrg-ticks li::before{
  content:"\25C6";position:absolute;left:0;color:var(--nrg-beast);
}

.nrg-flag{
  position:absolute;top:-18px;right:-8px;z-index:3;
  background-color:var(--nrg-hazard);color:var(--nrg-ink);
  border:4px solid var(--nrg-ink);
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;padding:.3rem .8rem;
}


/* ============================================================
   14. FORMS — scoped so the two contexts cannot cross-contaminate
   ============================================================ */

/* Elementor Pro lays a field group out as a flex row and only stacks
   the label when the fields wrapper carries .elementor-labels-above,
   which is set from the Style tab. The Style tab is off limits on an
   nrg- widget, so every part of the layout is forced here.

   Class names are doubled to raise specificity without !important:
   the wrapper rule is 0-4-0, the group rule 0-5-0, and the two child
   rules 0-6-0 and 0-6-1. Nothing Elementor ships reaches that. */

.elementor-element.nrg-form .elementor-form-fields-wrapper.elementor-form-fields-wrapper{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1.2rem;
  margin:0;
  max-width:620px;
}

.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex:1 1 100%;
  width:auto;
  max-width:100%;
  padding:0;
  margin:0;
}

/* Label above the field, always. */
.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-group > label.elementor-field-label{
  display:block;
  flex:0 0 auto;
  width:100%;
  text-align:start;
  margin:0 0 .4rem;
  padding:0;
}

.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-group > .elementor-field{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
}

/* Name and email share the top row. :nth-child rather than a per-field
   width key in the JSON, so no unverified serialisation decides it. */
.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-group:nth-child(1),
.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-group:nth-child(2){
  flex:1 1 calc(50% - .6rem);
}

/* Submit sits on its own line and hugs its text. */
.elementor-element.nrg-form
.elementor-form-fields-wrapper .elementor-field-group.elementor-field-type-submit{
  flex:1 1 100%;
  align-items:flex-start;
}

/* rows was dropped from the JSON as an unverified key, so the height
   lives here. Five rows in the prototype. */
.elementor-element.nrg-form textarea.elementor-field-textual{
  min-height:10rem;
  resize:vertical;
}

.elementor-element.nrg-form select.elementor-field-textual{
  appearance:auto;
  height:auto;
}

.elementor-element.nrg-form .elementor-field-label{
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;
}
.elementor-element.nrg-form .elementor-field-textual{
  width:100%;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
  padding:.85rem 1rem;
}
.elementor-element.nrg-form .elementor-field-textual:focus{outline:4px solid var(--nrg-beast);outline-offset:0;box-shadow:none}
.elementor-element.nrg-form .elementor-button[type="submit"]{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  border:3px solid var(--nrg-ink);border-radius:0;
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  box-shadow:6px 6px 0 var(--nrg-hazard);
}

.e-con.nrg-note{
  background-color:var(--nrg-slab);
  border-left:6px solid var(--nrg-hazard);
  padding:1rem 1.2rem;
  font-size:.92rem;color:#C4C4C4;
}
.nrg-light .e-con.nrg-note{background-color:#F0F0F0;border-left-color:var(--nrg-beast);color:var(--nrg-graphite)}


/* ============================================================
   15. HEADER / FOOTER
   ============================================================ */

.e-con.nrg-hdr{border-bottom:4px solid var(--nrg-hazard);background-color:var(--nrg-ink)}

/* 15d. Header inner row  (new in 2.0.2)
   .nrg-hdr is the full-width bar: ink, hazard border, sticky.
   .nrg-hdr-in is the Boxed child, so the row and the gutter belong on
   its .e-con-inner. Mirrors .hdr / .hdr-in in the prototype. */

.e-con.nrg-hdr-in > .e-con-inner{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:nowrap;
  gap:1.5rem;
  padding-block:.85rem;
  padding-inline:var(--nrg-gut);
}

/* Replaces the wrapper container that used to do this. */
.elementor-element.nrg-nav{margin-inline-start:auto}

.nrg-nav .elementor-item{
  font-family:var(--nrg-util);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;
  color:#B9B9B9;
  border-bottom:3px solid transparent;   /* v2.1: reserve the active underline */
  padding:.5rem .8rem;                   /* v2.2: default spacing wrapped 5 items */
}
.nrg-nav .elementor-nav-menu--main{flex-wrap:nowrap}
.nrg-nav .elementor-item:hover{color:var(--nrg-bone)}
.nrg-nav .elementor-item.elementor-item-active{color:var(--nrg-hazard);border-bottom:3px solid var(--nrg-hazard)}
.nrg-nav .elementor-item:focus-visible{outline:3px solid var(--nrg-hazard);outline-offset:2px}

.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  border:3px solid var(--nrg-ink);border-radius:0;
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.nrg-cart-btn .elementor-button-icon-qty[data-counter]{
  background-color:var(--nrg-hazard);color:var(--nrg-ink);
  font-size:.85rem;
}

/* 15e. Cart stand-in  (new in 2.0.2, delete when Menu Cart lands)
   Pseudo-element, not markup in the Button text field, so nothing
   depends on whether that field escapes HTML. */
.elementor-element.nrg-cartstub .elementor-button::after{
  content:"0";
  background-color:var(--nrg-hazard);
  color:var(--nrg-ink);
  min-width:1.5rem;
  text-align:center;
  font-size:.85rem;
  line-height:1.4;
  padding:0 .3rem;
  margin-inline-start:.5rem;
}
.elementor-element.nrg-cartstub .elementor-button{box-shadow:none}
.elementor-element.nrg-cartstub .elementor-button:hover{box-shadow:none;transform:translate(-2px,-2px)}

.e-con.nrg-ftr{background-color:var(--nrg-ink);border-top:4px solid var(--nrg-beast)}
.nrg-ftr .elementor-element .elementor-heading-title{
  font-family:var(--nrg-util);font-weight:700;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nrg-hazard);
}
.nrg-ftr a{color:var(--nrg-ash);text-decoration:none;font-size:.95rem}
.nrg-ftr a:hover{color:var(--nrg-bone)}
.e-con.nrg-ftr-base{border-top:3px solid var(--nrg-slab);color:#666;font-size:.85rem}

/* ------------------------------------------------------------
   15b. HEADER MARK  (new in 2.0.1)
   .nrg-logo had no rules at all in v2. It sits on an HTML widget
   for now (diamond + wordmark, lifted from the prototype) and the
   same class works unchanged on a Site Logo widget later, because
   §3a already neutralises .elementor-widget-theme-site-logo.
   ------------------------------------------------------------ */

.nrg-logo a{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--nrg-bone);
}
.nrg-logo svg{flex:0 0 auto}
.nrg-logo-txt{
  font-family:var(--nrg-disp);
  font-size:1.5rem;
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.nrg-logo-txt b{color:var(--nrg-beast);font-weight:400}
.nrg-logo a:focus-visible{outline:3px solid var(--nrg-hazard);outline-offset:4px}

@media (max-width:767px){
  .nrg-logo-txt{font-size:1.2rem}
}

/* ------------------------------------------------------------
   15c. NAV MENU TOGGLE + DROPDOWN  (new in 2.0.1)
   Elementor's default toggle colour is #33373D at 0-1-0, which is
   invisible on Ink. The dropdown panel defaults to white. Both are
   normally set from the Style tab, which is off limits on an nrg-
   widget, so they belong here. 0-2-0 beats both defaults.
   ------------------------------------------------------------ */

.nrg-nav .elementor-menu-toggle{
  color:var(--nrg-hazard);
  background-color:transparent;
  border-radius:0;
}
.nrg-nav .elementor-menu-toggle svg{fill:currentColor}
.nrg-nav .elementor-menu-toggle:focus-visible{outline:3px solid var(--nrg-hazard);outline-offset:3px}

.nrg-nav .elementor-nav-menu--dropdown{
  background-color:var(--nrg-asphalt);
  border-top:4px solid var(--nrg-hazard);
  min-width:240px;      /* v2.2: the widget is inline-auto, so 100% would
                           be the width of the toggle button alone */
}
.nrg-nav .elementor-nav-menu--dropdown a.elementor-item{
  color:#B9B9B9;
  border-bottom:0;
}
.nrg-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  color:var(--nrg-hazard);
  background-color:transparent;
}


/* ============================================================
   18. HOME PAGE PATTERNS  (new in 2.0.3)
   Every container in the page JSON is Full Width and every class
   below declares display and direction explicitly, per §9.2 of
   PROJECT-SOUL. Nothing here relies on an Elementor default.
   ============================================================ */

/* 18a. Hero ------------------------------------------------- */

.e-con.nrg-hero{
  display:block;
  position:relative;
  overflow:hidden;
  padding-block:clamp(48px,7vw,96px) 0;
  padding-inline:0;
}

.e-con.nrg-hero-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:clamp(24px,4vw,56px);
  align-items:end;
}

.e-con.nrg-hero-copy{display:flex;flex-direction:column;gap:0}

/* Any column container with no visual identity of its own. */
.e-con.nrg-stack{display:flex;flex-direction:column;gap:0}

.e-con.nrg-cta-row{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:1rem;
  margin-block-end:clamp(32px,5vw,64px);
}

/* The art slot is the positioning context for the rotated diamond.
   Both live in one HTML widget, so the class is on the markup. */
.e-con.nrg-hero-art{display:block;position:relative}
.nrg-beast{position:relative}
.nrg-beast .nrg-diamond-bg{
  position:absolute;
  inset:8% 0 12% 0;
  background-color:var(--nrg-hazard);
  border:8px solid var(--nrg-ink);
  transform:rotate(45deg) scale(.72);
}
.nrg-beast svg{position:relative;z-index:2;margin:0 auto;max-height:420px;display:block;max-width:100%}

/* 18b. Generic grids ---------------------------------------- */

.e-con.nrg-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,36px);
  align-items:stretch;
}
.e-con.nrg-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.e-con.nrg-grid-2.nrg-grid-2-top{align-items:start}

/* Standalone beast, About page. The hero uses .nrg-hero-art instead
   because it is bottom aligned against the headline. */
.e-con.nrg-beast-slot{
  display:block;
  position:relative;
  max-width:340px;
  margin-inline:auto;
}

.elementor-element.nrg-hint{font-size:.85rem}
/* 0-3-0, or §4's section body colour takes it. */
.nrg-light .elementor-element.nrg-hint,
.nrg-dark .elementor-element.nrg-hint,
.nrg-haz .elementor-element.nrg-hint{color:#4A4A4A}
.e-con .elementor-widget.elementor-widget.nrg-hint{margin-block-start:.3rem}
.e-con.nrg-clips{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
  align-items:stretch;
}

/* 18c. Card body copy --------------------------------------- */
/* Its own class rather than .nrg-fcard .elementor-widget-text-editor,
   which would tie with .nrg-fnum at 0-2-0 and resolve on source order. */

.elementor-element.nrg-cardbody{font-size:.98rem;line-height:1.6}
.nrg-dark .elementor-element.nrg-cardbody{color:#B4B4B4}
.nrg-light .elementor-element.nrg-cardbody{color:#4A4A4A}

/* 18d. Clip card body and play button ----------------------- */

.e-con.nrg-clip-body{
  display:block;
  padding:1rem 1.1rem 1.2rem;
  background-color:var(--nrg-asphalt);
}
.nrg-light .e-con.nrg-clip-body{background-color:#F4F4F4}

/* 0-4-0 so it outranks .nrg-h3 at 0-3-0 without depending on
   source order, per §7.12. */
.elementor-element.nrg-h3.nrg-clip-title .elementor-heading-title,
.elementor-element.nrg-h3.nrg-clip-title > :is(h1,h2,h3,h4,h5,h6){font-size:1rem}

/* In a loop item the title wraps a permalink. */
.elementor-element.nrg-clip-title .elementor-heading-title a{
  color:inherit;
  text-decoration:none;
}
.elementor-element.nrg-clip-title .elementor-heading-title a:hover{color:var(--nrg-beast)}

.nrg-play{
  width:64px;height:64px;
  text-decoration:none;
  border-radius:50%;
  background-color:var(--nrg-hazard);
  border:5px solid var(--nrg-ink);
  display:grid;
  place-items:center;
}
.nrg-play::after{
  content:"";
  width:0;height:0;
  border-left:18px solid var(--nrg-ink);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:5px;
}

/* 18e. Responsive for the new grids ------------------------- */

@media (max-width:1024px){
  .e-con.nrg-ftr-grid{grid-template-columns:1fr 1fr}
  .e-con.nrg-hero-grid,
  .e-con.nrg-grid-2{grid-template-columns:1fr}
  .e-con.nrg-grid-3,
  .e-con.nrg-clips{grid-template-columns:1fr 1fr}
  .e-con.nrg-hero-art{max-width:320px;margin-inline:auto}
}

@media (max-width:767px){
  .elementor-element.nrg-form
  .elementor-form-fields-wrapper .elementor-field-group.elementor-field-group:nth-child(1),
  .elementor-element.nrg-form
  .elementor-form-fields-wrapper .elementor-field-group.elementor-field-group:nth-child(2){
    flex:1 1 100%;
  }
  .e-con.nrg-grid-3,
  .e-con.nrg-clips{grid-template-columns:1fr}
  .e-con.nrg-ftr-grid{grid-template-columns:1fr;gap:2rem}
  .e-con.nrg-hero{padding-block:32px 0}
}


/* ============================================================
   19. VIDEO PREVIEWS PAGE  (new in 2.0.5)
   ============================================================ */

/* The intro block on a page that has no section head. Ties at 0-4-0
   with §3c's lede margin and wins on source order, same as the
   .nrg-sechead reset. */
.e-con.nrg-pagehead{
  --nrg-measure:20ch;
  display:flex;
  flex-direction:column;
  gap:0;
  margin-block-end:clamp(32px,5vw,56px);
}
.e-con.nrg-pagehead.nrg-pagehead-wide{--nrg-measure:22ch}
.nrg-pagehead .elementor-element.nrg-h2{max-width:var(--nrg-measure)}
.e-con.nrg-pagehead .elementor-widget.elementor-widget.nrg-lede{margin-block-end:0}

/* Filter chips. Button widgets for now, so the client can edit the
   labels; the Taxonomy Filter rules in §12 take over when the clip
   CPT lands and the .e-filter-item selectors match these exactly. */
.e-con.nrg-chips{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.6rem;
  margin-block-end:2.5rem;
}
.elementor-element.nrg-chip .elementor-button{
  font-family:var(--nrg-util);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;
  padding:.45rem 1.1rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
  box-shadow:none;
}
.elementor-element.nrg-chip.nrg-chip-on .elementor-button{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
}
.elementor-element.nrg-chip .elementor-button:hover{transform:none}
.elementor-element.nrg-chip .elementor-button:focus-visible{
  outline:3px solid var(--nrg-beast);outline-offset:3px;
}

.e-con.nrg-note{margin-block-start:2rem}


/* ============================================================
   20. FOOTER  (new in 2.0.5)
   ============================================================ */

.e-con.nrg-ftr{
  display:block;
  padding-block:clamp(48px,6vw,80px) 2rem;
  padding-inline:0;
}

.e-con.nrg-ftr-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-block-end:3rem;
}

.elementor-element.nrg-ftr-blurb{
  font-size:.95rem;
  color:var(--nrg-ash);
  max-width:30ch;
}
.e-con .elementor-widget.elementor-widget.nrg-ftr-blurb{margin-block-start:.8rem}
.e-con .elementor-widget.elementor-widget.nrg-ftr-h{margin-block-end:16px}

/* The Nav Menu widget brings its own item padding and pointer border.
   A footer link list wants neither. */
.nrg-ftr-nav .elementor-nav-menu--main .elementor-item{
  padding:0;
  border:0;
  font-family:var(--nrg-body);
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  font-size:.95rem;
  color:var(--nrg-ash);
}
.nrg-ftr-nav .elementor-nav-menu--main .elementor-item:hover,
.nrg-ftr-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:var(--nrg-bone);
  background-color:transparent;
}
.nrg-ftr-nav .elementor-nav-menu > li:not(:last-child){margin-block-end:.5rem}

.e-con.nrg-ftr-base{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-block-start:1.5rem;
}
.nrg-ftr-base .elementor-element.elementor-widget-text-editor{color:#666;font-size:.85rem}


/* ============================================================
   21. WOOCOMMERCE CART  (new in 2.0.9)
   Woo's own stylesheets may load after this file, so every rule is
   scoped to .elementor-element.nrg-cart and carries enough classes to
   outrank Woo's table selectors, which sit at 0-2-1.
   ============================================================ */

.elementor-element.nrg-cart{width:100%}
.elementor-element.nrg-cart .woocommerce{color:var(--nrg-bone)}

/* --- the item table becomes rows ---------------------------- */

.elementor-element.nrg-cart .shop_table.cart{
  display:block;
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
  background-color:transparent;
}
.elementor-element.nrg-cart .shop_table.cart thead{display:none}
.elementor-element.nrg-cart .shop_table.cart tbody{display:block;width:100%}
.elementor-element.nrg-cart .shop_table.cart tbody > tr{display:block;width:100%}

.elementor-element.nrg-cart .shop_table.cart tr.cart_item{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:1.5rem;
  align-items:center;
  padding:1.3rem 0;
  border-bottom:3px solid var(--nrg-slab);
}
.elementor-element.nrg-cart .shop_table.cart tr.cart_item > td{
  display:block;
  padding:0;
  border:0;
  background-color:transparent;
}

/* The prototype shows one money figure per row, the line total. */
/* Matches the depth of `tr.cart_item > td` above, which is 0-5-2 and
   sets display:block. A shorter selector here loses to it. */
.elementor-element.nrg-cart .shop_table.cart tr.cart_item > td.product-thumbnail,
.elementor-element.nrg-cart .shop_table.cart tr.cart_item > td.product-price{display:none}

.elementor-element.nrg-cart .shop_table.cart td.product-name{order:1}
.elementor-element.nrg-cart .shop_table.cart td.product-quantity{order:2}
.elementor-element.nrg-cart .shop_table.cart td.product-subtotal{order:3}
.elementor-element.nrg-cart .shop_table.cart td.product-remove{order:4}

.elementor-element.nrg-cart .shop_table.cart td.product-name a{
  font-family:var(--nrg-disp);
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--nrg-bone);
  text-decoration:none;
}
.elementor-element.nrg-cart .shop_table.cart td.product-name a:hover{color:var(--nrg-hazard)}

/* Every product in this shop is a digital download, so the sub-label is
   constant. If a physical product is ever added, delete this rule. */
.elementor-element.nrg-cart .shop_table.cart td.product-name::after{
  content:"Digital download";
  display:block;
  margin-block-start:.2rem;
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--nrg-ash);
}

/* --- quantity ----------------------------------------------- */

.elementor-element.nrg-cart .quantity{
  display:flex;
  align-items:center;
  border:3px solid var(--nrg-bone);
}
.elementor-element.nrg-cart .quantity label{display:none}
.elementor-element.nrg-cart .quantity input.qty{
  width:52px;
  height:38px;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  color:var(--nrg-bone);
  font-family:var(--nrg-disp);
  font-size:1rem;
  text-align:center;
  appearance:textfield;
  -moz-appearance:textfield;
}
.elementor-element.nrg-cart .quantity input.qty::-webkit-outer-spin-button,
.elementor-element.nrg-cart .quantity input.qty::-webkit-inner-spin-button{
  appearance:none;
  margin:0;
}

/* Injected by nrg-cart.js. Woo ships a bare number input, the
   prototype has a stepper. If the script is not loaded the input
   still works on its own, it just has no buttons either side. */
.elementor-element.nrg-cart .quantity .nrg-qty-btn{
  width:34px;
  height:38px;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  color:var(--nrg-bone);
  font-family:var(--nrg-disp);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.elementor-element.nrg-cart .quantity .nrg-qty-btn:hover{background-color:var(--nrg-beast)}
.elementor-element.nrg-cart .quantity .nrg-qty-btn:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:-3px;
}
.elementor-element.nrg-cart .quantity .nrg-qty-btn[disabled]{opacity:.35;cursor:default}
.elementor-element.nrg-cart .quantity .nrg-qty-btn[disabled]:hover{background-color:transparent}
.elementor-element.nrg-cart .quantity input.qty:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:-3px;
}

/* --- line total and remove ----------------------------------- */

.elementor-element.nrg-cart .shop_table.cart td.product-subtotal{
  font-family:var(--nrg-disp);
  font-size:1.2rem;
  min-width:5.5rem;
  text-align:right;
  color:var(--nrg-bone);
}
.elementor-element.nrg-cart .shop_table.cart td.product-subtotal .amount{color:var(--nrg-bone)}

.elementor-element.nrg-cart .shop_table.cart td.product-remove a.remove{
  display:inline-block;
  width:auto;
  height:auto;
  padding:.2rem .5rem;
  border-radius:0;
  background-color:transparent;
  color:var(--nrg-ash);
  font-size:1.4rem;
  line-height:1;
  text-decoration:none;
}
.elementor-element.nrg-cart .shop_table.cart td.product-remove a.remove:hover{
  background-color:transparent;
  color:var(--nrg-beast);
}

/* --- coupon and update row ----------------------------------- */

.elementor-element.nrg-cart .shop_table.cart td.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.6rem 0 0;
  border:0;
  background-color:transparent;
}
.elementor-element.nrg-cart .shop_table.cart td.actions .coupon{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}
.elementor-element.nrg-cart .shop_table.cart td.actions .coupon label{display:none}
.elementor-element.nrg-cart .shop_table.cart td.actions input#coupon_code{
  width:auto;
  min-width:200px;
  padding:.7rem .9rem;
  border:3px solid var(--nrg-slab);
  border-radius:0;
  background-color:var(--nrg-asphalt);
  color:var(--nrg-bone);
  font-family:var(--nrg-body);
}
.elementor-element.nrg-cart .shop_table.cart td.actions input#coupon_code:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:2px;
}

/* Woo's buttons, given the ghost treatment from §6. */
.elementor-element.nrg-cart .shop_table.cart td.actions button.button{
  border-radius:0;
  border:3px solid var(--nrg-bone);
  background-color:transparent;
  color:var(--nrg-bone);
  font-family:var(--nrg-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.7rem 1.2rem;
}
.elementor-element.nrg-cart .shop_table.cart td.actions button.button:hover{
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
}
.elementor-element.nrg-cart .shop_table.cart td.actions button.button:disabled{opacity:.45}

/* --- totals --------------------------------------------------- */

.elementor-element.nrg-cart .cart-collaterals{width:100%;margin-block-start:2.5rem}
.elementor-element.nrg-cart .cart-collaterals .cross-sells{display:none}

.elementor-element.nrg-cart .cart_totals{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  width:100%;
  float:none;
}
.elementor-element.nrg-cart .cart_totals > h2{display:none}

.elementor-element.nrg-cart .cart_totals table.shop_table{
  display:block;
  width:auto;
  margin:0;
  border:0;
  background-color:transparent;
}
.elementor-element.nrg-cart .cart_totals table.shop_table tbody{display:block}
.elementor-element.nrg-cart .cart_totals table.shop_table tr{display:block}
.elementor-element.nrg-cart .cart_totals table.shop_table th,
.elementor-element.nrg-cart .cart_totals table.shop_table td{
  display:block;
  padding:0;
  border:0;
  background-color:transparent;
}

/* The prototype shows Total only. With no tax configured, Subtotal is
   the same number twice. Delete this rule the moment tax or fees are
   switched on, or the breakdown disappears. */
.elementor-element.nrg-cart .cart_totals table.shop_table tr.cart-subtotal{display:none}

.elementor-element.nrg-cart .cart_totals tr.order-total th{
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--nrg-ash);
  text-align:start;
}
.elementor-element.nrg-cart .cart_totals tr.order-total td{
  font-family:var(--nrg-disp);
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--nrg-bone);
}
.elementor-element.nrg-cart .cart_totals tr.order-total td strong{font-weight:400}
.elementor-element.nrg-cart .cart_totals tr.order-total small{
  display:block;
  font-family:var(--nrg-body);
  font-size:.85rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--nrg-ash);
  margin-block-start:.4rem;
}

/* --- proceed to checkout, the magenta button ------------------ */

.elementor-element.nrg-cart .wc-proceed-to-checkout{padding:0;margin:0}
.elementor-element.nrg-cart .wc-proceed-to-checkout a.checkout-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:1rem 1.9rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-decoration:none;
  box-shadow:6px 6px 0 var(--nrg-hazard);
  transition:transform .12s ease,box-shadow .12s ease;
}
.elementor-element.nrg-cart .wc-proceed-to-checkout a.checkout-button:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--nrg-hazard);
}
.elementor-element.nrg-cart .wc-proceed-to-checkout a.checkout-button:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:4px;
}

/* --- empty cart and Woo notices ------------------------------- */

.elementor-element.nrg-cart .cart-empty{
  font-family:var(--nrg-disp);
  font-size:1.6rem;
  text-transform:uppercase;
  color:var(--nrg-bone);
  padding:0;
  border:0;
  background-color:transparent;
}
.elementor-element.nrg-cart .return-to-shop{margin-block-start:1.5rem}
.elementor-element.nrg-cart .return-to-shop a.button{
  display:inline-block;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-hazard);
  color:var(--nrg-ink);
  font-family:var(--nrg-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.9rem 1.6rem;
  text-decoration:none;
  box-shadow:6px 6px 0 var(--nrg-beast);
}

.elementor-element.nrg-cart .woocommerce-message,
.elementor-element.nrg-cart .woocommerce-info,
.elementor-element.nrg-cart .woocommerce-error{
  border-top:0;
  border-left:6px solid var(--nrg-hazard);
  background-color:var(--nrg-slab);
  color:var(--nrg-bone);
  padding:1rem 1.2rem;
  border-radius:0;
  list-style:none;
}
.elementor-element.nrg-cart .woocommerce-message::before,
.elementor-element.nrg-cart .woocommerce-info::before,
.elementor-element.nrg-cart .woocommerce-error::before{display:none}
.elementor-element.nrg-cart .woocommerce-message a.button{
  border:3px solid var(--nrg-bone);
  border-radius:0;
  background-color:transparent;
  color:var(--nrg-bone);
  font-family:var(--nrg-util);
  text-transform:uppercase;
  letter-spacing:.14em;
}

@media (max-width:767px){
  .elementor-element.nrg-cart .shop_table.cart tr.cart_item{
    grid-template-columns:1fr auto;
    row-gap:.8rem;
  }
  .elementor-element.nrg-cart .shop_table.cart td.product-subtotal{text-align:start}
  .elementor-element.nrg-cart .cart_totals{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ============================================================
   22. WOOCOMMERCE CHECKOUT  (new in 2.0.11)
   Scoped to .nrg-checkout, the Shortcode widget holding
   [woocommerce_checkout]. Woo's stylesheets may load after this file,
   so selectors carry enough classes to outrank them.
   ============================================================ */

.elementor-element.nrg-checkout{width:100%}
.elementor-element.nrg-checkout .woocommerce{color:var(--nrg-bone)}

/* Billing on the left, order review on the right. Floats rather than
   grid: a grid item spanning two rows distributes its height into the
   intrinsic tracks it spans, which inflated row 1 and dropped the panel
   halfway down the page. A float takes the tall column out of the
   block flow entirely, so the two right hand blocks stack at the top of
   the gutter in source order. */
.elementor-element.nrg-checkout form.checkout{display:block}
.elementor-element.nrg-checkout form.checkout::after{
  content:"";
  display:block;
  clear:both;
}
.elementor-element.nrg-checkout form.checkout #customer_details{
  float:left;
  width:55%;
}
.elementor-element.nrg-checkout form.checkout #order_review_heading,
.elementor-element.nrg-checkout form.checkout #order_review{
  width:40%;
  margin-inline-start:60%;
}
.elementor-element.nrg-checkout form.checkout #order_review_heading{
  margin-block:0 1.4rem;
}

.elementor-element.nrg-checkout .col2-set,
.elementor-element.nrg-checkout .col2-set .col-1,
.elementor-element.nrg-checkout .col2-set .col-2{
  width:100%;
  float:none;
  padding:0;
  margin:0;
}

/* --- headings ------------------------------------------------- */

.elementor-element.nrg-checkout h3,
.elementor-element.nrg-checkout #order_review_heading{
  font-family:var(--nrg-disp);
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--nrg-bone);
  margin:0 0 1.4rem;
}

/* --- fields --------------------------------------------------- */

/* Woo wraps the billing rows in this. Making it the flex container is
   what lets first and last name share a row without touching the
   .form-row-first and .form-row-last widths Woo sets for its own
   float layout. */
.elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper,
.elementor-element.nrg-checkout .woocommerce-shipping-fields__field-wrapper{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:0 1.2rem;
}

.elementor-element.nrg-checkout .form-row{
  display:block;
  width:100%;
  padding:0;
  margin:0 0 1.2rem;
  float:none;
}
.elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper > .form-row{
  flex:1 1 100%;
  width:auto;
}
.elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first,
.elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last{
  flex:1 1 calc(50% - .6rem);
}
.elementor-element.nrg-checkout .form-row label{
  display:block;
  margin:0 0 .4rem;
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nrg-bone);
}
.elementor-element.nrg-checkout .form-row label .required{
  color:var(--nrg-hazard);
  text-decoration:none;
  border:0;
}
.elementor-element.nrg-checkout .form-row input.input-text,
.elementor-element.nrg-checkout .form-row textarea,
.elementor-element.nrg-checkout .form-row select{
  width:100%;
  padding:.85rem 1rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
  font-family:var(--nrg-body);
  font-size:1rem;
  box-shadow:none;
}
.elementor-element.nrg-checkout .form-row textarea{min-height:8rem;resize:vertical}
.elementor-element.nrg-checkout .form-row input.input-text:focus-visible,
.elementor-element.nrg-checkout .form-row textarea:focus-visible,
.elementor-element.nrg-checkout .form-row select:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:2px;
}
.elementor-element.nrg-checkout .form-row.woocommerce-invalid input.input-text{
  border-color:var(--nrg-siren);
}

/* Woo swaps country and state for select2. Enough here to stop it
   looking like a stock widget; it is not a full reskin. */
.elementor-element.nrg-checkout .select2-container .select2-selection--single{
  height:auto;
  padding:.85rem 1rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-bone);
}
.elementor-element.nrg-checkout .select2-container .select2-selection__rendered{
  padding:0;
  line-height:1.3;
  color:var(--nrg-ink);
  font-family:var(--nrg-body);
}
.elementor-element.nrg-checkout .select2-container .select2-selection__arrow{height:100%;right:8px}

/* --- order review table --------------------------------------- */

/* flow-root, so the panel's height is its own content and the floated
   billing column beside it cannot influence anything inside. */
.elementor-element.nrg-checkout #order_review{
  display:flow-root;
  height:auto;
  min-height:0;
  padding:clamp(20px,2.4vw,32px);
  background-color:var(--nrg-asphalt);
  border:4px solid var(--nrg-slab);
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table{
  display:block;
  width:100%;
  margin:0 0 1.6rem;
  border:0;
  border-collapse:collapse;
  background-color:transparent;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table thead{display:none}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tbody,
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tfoot{
  display:block;
  width:100%;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:2px solid var(--nrg-slab);
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr th,
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr td{
  display:block;
  padding:0;
  border:0;
  background-color:transparent;
  color:var(--nrg-bone);
  text-align:start;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.cart_item th,
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.cart_item td.product-name{
  font-family:var(--nrg-disp);
  font-size:1rem;
  text-transform:uppercase;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table .product-quantity{
  font-family:var(--nrg-util);
  color:var(--nrg-ash);
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.order-total{
  border-bottom:0;
  padding-block-start:1.1rem;
  align-items:flex-end;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.order-total th{
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--nrg-ash);
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.order-total td{
  font-family:var(--nrg-disp);
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1;
  letter-spacing:-.03em;
}
.elementor-element.nrg-checkout table.woocommerce-checkout-review-order-table tr.order-total td strong{font-weight:400}

/* --- payment box ---------------------------------------------- */

.elementor-element.nrg-checkout #payment{
  display:flow-root;
  height:auto;
  min-height:0;
  padding:0;
  border-radius:0;
  background-color:transparent;
}

/* Explicit box model on the list and its items. With no gateway enabled
   Woo puts a single notice li in here, and that notice was inheriting a
   height from somewhere outside this file. */
.elementor-element.nrg-checkout #payment ul.payment_methods{
  display:block;
  height:auto;
  min-height:0;
  padding:0 0 1.2rem;
  margin:0;
  border-bottom:2px solid var(--nrg-slab);
  list-style:none;
}
.elementor-element.nrg-checkout #payment ul.payment_methods li{
  display:block;
  height:auto;
  min-height:0;
  align-self:auto;
  flex:none;
  margin:0 0 .6rem;
  padding:0;
  background-color:transparent;
}
/* Same again for the notice itself, which is that li when the list is
   empty. Matches the depth of the rule above so it wins outright. */
.elementor-element.nrg-checkout #payment ul.payment_methods li.woocommerce-info,
.elementor-element.nrg-checkout #payment ul.payment_methods li.woocommerce-notice{
  display:block;
  height:auto;
  min-height:0;
  margin:0;
  padding:1rem 1.2rem;
}
.elementor-element.nrg-checkout #payment ul.payment_methods li label{
  display:inline;
  margin:0;
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--nrg-bone);
}
.elementor-element.nrg-checkout #payment ul.payment_methods li input[type="radio"]{
  width:auto;
  margin-inline-end:.5rem;
  accent-color:var(--nrg-beast);
}
.elementor-element.nrg-checkout #payment ul.payment_methods li img{
  max-height:24px;
  width:auto;
  margin-inline-start:.5rem;
  vertical-align:middle;
}
.elementor-element.nrg-checkout #payment .payment_box{
  background-color:var(--nrg-slab);
  color:var(--nrg-dim);
  border-radius:0;
  padding:1rem 1.2rem;
  font-size:.95rem;
}
.elementor-element.nrg-checkout #payment .payment_box::before{display:none}

.elementor-element.nrg-checkout #payment .place-order{padding:1.4rem 0 0;margin:0}
.elementor-element.nrg-checkout #payment button#place_order{
  width:100%;
  padding:1rem 1.9rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  box-shadow:6px 6px 0 var(--nrg-hazard);
  transition:transform .12s ease,box-shadow .12s ease;
}
.elementor-element.nrg-checkout #payment button#place_order:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--nrg-hazard);
}
.elementor-element.nrg-checkout #payment button#place_order:focus-visible{
  outline:3px solid var(--nrg-hazard);
  outline-offset:4px;
}

/* --- coupon prompt and notices -------------------------------- */

.elementor-element.nrg-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.elementor-element.nrg-checkout .woocommerce-info,
.elementor-element.nrg-checkout .woocommerce-message,
.elementor-element.nrg-checkout .woocommerce-error,
.elementor-element.nrg-checkout .woocommerce-NoticeGroup li{
  border-top:0;
  border-left:6px solid var(--nrg-hazard);
  border-radius:0;
  background-color:var(--nrg-slab);
  color:var(--nrg-bone);
  padding:1rem 1.2rem;
  list-style:none;
}
.elementor-element.nrg-checkout .woocommerce-info::before,
.elementor-element.nrg-checkout .woocommerce-message::before,
.elementor-element.nrg-checkout .woocommerce-error::before{display:none}
.elementor-element.nrg-checkout .woocommerce-error{border-left-color:var(--nrg-siren)}
.elementor-element.nrg-checkout .woocommerce-info a,
.elementor-element.nrg-checkout .woocommerce-message a{color:var(--nrg-hazard)}

.elementor-element.nrg-checkout form.checkout_coupon{
  border:3px solid var(--nrg-slab);
  border-radius:0;
  background-color:var(--nrg-asphalt);
  padding:1.2rem;
}


/* --- select2 dropdown panel ----------------------------------- */
/* The panel is appended to <body>, outside .nrg-checkout, so these
   cannot be scoped to the widget. Kept narrow on purpose: only the
   Woo enhanced dropdown, not every select2 on the site. */

.select2-container--default .select2-dropdown{
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-bone);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:3px solid var(--nrg-slab);
  border-radius:0;
  padding:.6rem .7rem;
  font-family:var(--nrg-body);
}
.select2-container--default .select2-results__option{
  padding:.6rem .8rem;
  font-family:var(--nrg-body);
  color:var(--nrg-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
}
.select2-container--default .select2-results__option[aria-selected="true"]{
  background-color:var(--nrg-slab);
  color:var(--nrg-bone);
}

/* --- privacy text, terms, additional fields ------------------- */

.elementor-element.nrg-checkout .woocommerce-privacy-policy-text{
  font-size:.9rem;
  color:var(--nrg-ash);
}
.elementor-element.nrg-checkout .woocommerce-privacy-policy-text p{margin:0}
.elementor-element.nrg-checkout .woocommerce-privacy-policy-text a{
  color:var(--nrg-hazard);
  text-decoration:underline;
}

.elementor-element.nrg-checkout .woocommerce-terms-and-conditions-wrapper{
  padding-block-start:1rem;
  font-size:.9rem;
  color:var(--nrg-dim);
}
.elementor-element.nrg-checkout .woocommerce-terms-and-conditions-wrapper
input[type="checkbox"]{
  width:auto;
  margin-inline-end:.5rem;
  accent-color:var(--nrg-beast);
}
.elementor-element.nrg-checkout .woocommerce-terms-and-conditions-wrapper a{
  color:var(--nrg-hazard);
}

.elementor-element.nrg-checkout .woocommerce-additional-fields{
  margin-block-start:2rem;
}
.elementor-element.nrg-checkout .woocommerce-additional-fields h3{
  margin-block-start:0;
}


@media (max-width:1024px){
  .elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-first,
  .elementor-element.nrg-checkout .woocommerce-billing-fields__field-wrapper > .form-row.form-row-last{
    flex:1 1 100%;
  }
  .elementor-element.nrg-checkout form.checkout #customer_details{
    float:none;
    width:100%;
    margin-block-end:2.4rem;
  }
  .elementor-element.nrg-checkout form.checkout #order_review_heading,
  .elementor-element.nrg-checkout form.checkout #order_review{
    width:100%;
    margin-inline-start:0;
  }
}


/* ============================================================
   23. MENU CART TOGGLE  (rewritten in 2.0.13)
   Elementor puts the subtotal in the button, hangs the count bubble off
   the top right corner absolutely, and colours it magenta. All three
   have to be undone. Class names are doubled to reach 0-7-0, which
   nothing Elementor ships gets near. No !important.
   ============================================================ */

.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button.elementor-button{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:.55rem;
  overflow:visible;
}

/* Subtotal and cart icon out, the word Cart back in. */
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button .elementor-button-text,
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button .elementor-button-icon i,
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button .elementor-button-icon svg{
  display:none;
}
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button.elementor-button::before{
  content:"Cart";
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
}

/* The icon wrapper is Elementor's positioning context for the bubble.
   Flatten it so the bubble sits in the flow instead of off the corner. */
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button
.elementor-button-icon.elementor-button-icon{
  position:static;
  display:inline-flex;
  align-items:center;
  width:auto;
  height:auto;
  margin:0;
}

/* Two selectors because the bubble is a child of .elementor-button-icon
   in some versions and a direct child of the button in others. */
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button
.elementor-button-icon .elementor-button-icon-qty.elementor-button-icon-qty[data-counter],
.nrg-cart-btn .elementor-menu-cart__toggle .elementor-button
.elementor-button-icon-qty.elementor-button-icon-qty.elementor-button-icon-qty[data-counter]{
  position:static;
  inset:auto;
  transform:none;
  min-width:1.5rem;
  width:auto;
  height:auto;
  padding:0 .35rem;
  border-radius:0;
  background-color:var(--nrg-hazard);
  color:var(--nrg-ink);
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  line-height:1.5;
  text-align:center;
}


/* ============================================================
   24. SIDE CART PANEL  (new in 2.0.11)
   ============================================================ */

.nrg-cart-btn .elementor-menu-cart__container,
.elementor-menu-cart__container .elementor-menu-cart__main{
  border-radius:0;
}
.elementor-menu-cart__main{
  background-color:var(--nrg-ink);
  color:var(--nrg-bone);
  border-left:5px solid var(--nrg-hazard);
  padding:1.6rem;
}
.elementor-menu-cart__close-button{color:var(--nrg-bone)}
.elementor-menu-cart__close-button:hover{color:var(--nrg-hazard)}

.elementor-menu-cart__product{
  border-bottom:3px solid var(--nrg-slab);
  padding-block:1rem;
}
/* Hiding this left Elementor's grid column behind, which is the blank
   box. Filling it with the brand mark is cheaper than fighting the grid
   and needs no product imagery. When real product images are added,
   delete the ::after rule and the img rule below it. */
.elementor-menu-cart__product .elementor-menu-cart__product-image{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  padding:0;
  background-color:var(--nrg-ink);
  border:3px solid var(--nrg-slab);
}
.elementor-menu-cart__product .elementor-menu-cart__product-image img{display:none}
.elementor-menu-cart__product .elementor-menu-cart__product-image::after{
  content:"";
  width:18px;
  height:18px;
  background-color:var(--nrg-hazard);
  border:3px solid var(--nrg-ink);
  transform:rotate(45deg);
}

/* 0-3-1, because Elementor colours the product name from its own
   defaults and a single class selector loses. */
.elementor-menu-cart__product .elementor-menu-cart__product-name,
.elementor-menu-cart__product .elementor-menu-cart__product-name a{
  font-family:var(--nrg-disp);
  font-size:1rem;
  text-transform:uppercase;
  color:var(--nrg-bone);
  text-decoration:none;
}
.elementor-menu-cart__product .elementor-menu-cart__product-name a:hover{
  color:var(--nrg-hazard);
}
.elementor-menu-cart__product-price{
  font-family:var(--nrg-util);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--nrg-ash);
}
.elementor-menu-cart__product-remove,
.elementor-menu-cart__product-remove a.remove{
  border:0;
  border-radius:0;
  background-color:transparent;
  color:var(--nrg-ash);
  font-size:1.2rem;
}
.elementor-menu-cart__product-remove a.remove:hover{
  background-color:transparent;
  color:var(--nrg-beast);
}

.elementor-menu-cart__subtotal{
  font-family:var(--nrg-disp);
  font-size:1.4rem;
  color:var(--nrg-bone);
  border-top:0;
  padding-block:1.2rem;
  text-align:start;
}
.elementor-menu-cart__subtotal .woocommerce-Price-amount{color:var(--nrg-bone)}

.elementor-menu-cart__footer-buttons{display:flex;flex-direction:column;gap:.8rem}
.elementor-menu-cart__footer-buttons .elementor-button{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  border:3px solid var(--nrg-ink);
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.9rem 1.4rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart{
  background-color:transparent;
  color:var(--nrg-bone);
  border-color:var(--nrg-bone);
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover{
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout{
  background-color:var(--nrg-beast);
  color:var(--nrg-bone);
  box-shadow:6px 6px 0 var(--nrg-hazard);
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--nrg-hazard);
}

.elementor-menu-cart--empty .elementor-menu-cart__main{color:var(--nrg-ash)}


/* ============================================================
   25. WOOCOMMERCE PRODUCT GRID  (new in 2.0.12)
   ============================================================ */

.elementor-element.nrg-shop{width:100%}

.elementor-element.nrg-shop ul.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,36px);
  margin:0;
  padding:0;
  list-style:none;
}
/* Woo clears its float grid with generated content. Not needed here and
   it adds a phantom grid item. */
.elementor-element.nrg-shop ul.products::before,
.elementor-element.nrg-shop ul.products::after{display:none}

.elementor-element.nrg-shop ul.products li.product{
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:0;
  background-color:var(--nrg-bone);
  color:var(--nrg-ink);
  border:5px solid var(--nrg-ink);
  text-align:start;
}

/* No product imagery exists yet and the card language in the prototype
   has none, so the placeholder is dropped rather than shown grey. */
.elementor-element.nrg-shop ul.products li.product img,
.elementor-element.nrg-shop ul.products li.product .woocommerce-placeholder,
.elementor-element.nrg-shop ul.products li.product .onsale{display:none}

/* The loop link wraps the title and the price, so it becomes the ink
   header block the package card has. Same chrome, different markup. */
.elementor-element.nrg-shop ul.products li.product a.woocommerce-loop-product__link{
  display:block;
  padding:1.5rem 1.6rem 1.3rem;
  background-color:var(--nrg-ink);
  text-decoration:none;
}

.elementor-element.nrg-shop ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--nrg-disp);
  font-size:1.6rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--nrg-hazard);
  padding:0;
  margin:0;
}
.elementor-element.nrg-shop ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title{color:var(--nrg-beast)}

.elementor-element.nrg-shop ul.products li.product .price{
  display:block;
  font-family:var(--nrg-disp);
  font-size:2.6rem;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--nrg-bone);
  margin:.5rem 0 0;
}
.elementor-element.nrg-shop ul.products li.product .price .amount,
.elementor-element.nrg-shop ul.products li.product .price bdi{color:var(--nrg-bone)}
.elementor-element.nrg-shop ul.products li.product .price del{
  opacity:.45;
  font-size:.5em;
  display:inline-block;
  margin-inline-end:.4rem;
}
.elementor-element.nrg-shop ul.products li.product .price ins{
  text-decoration:none;
  background-color:transparent;
}

/* Short description, if the theme's loop renders one. */
.elementor-element.nrg-shop ul.products li.product .woocommerce-product-details__short-description{
  padding:0 1.6rem;
  font-size:.98rem;
  color:#4A4A4A;
}

/* The add to cart link sits at the bottom of every card regardless of
   how long the title is, which is what mtop:auto is doing here. */
.elementor-element.nrg-shop ul.products li.product a.button{
  margin:auto 1.6rem 1.6rem;
  margin-block-start:1.6rem;
  padding:.8rem 1.2rem;
  font-size:.9rem;
  border:3px solid var(--nrg-ink);
  border-radius:0;
  background-color:var(--nrg-hazard);
  color:var(--nrg-ink);
  font-family:var(--nrg-util);
  font-weight:700;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-decoration:none;
  box-shadow:5px 5px 0 var(--nrg-beast);
  transition:transform .12s ease,box-shadow .12s ease;
}
.elementor-element.nrg-shop ul.products li.product a.button:hover{
  background-color:var(--nrg-hazard);
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--nrg-beast);
}
.elementor-element.nrg-shop ul.products li.product a.button:focus-visible{
  outline:3px solid var(--nrg-beast);
  outline-offset:4px;
}
.elementor-element.nrg-shop ul.products li.product a.button.loading{opacity:.6}

.elementor-element.nrg-shop ul.products li.product a.added_to_cart{
  display:block;
  margin:0 1.6rem 1.4rem;
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  color:var(--nrg-beast);
  text-decoration:underline;
}
/* The button keeps its auto top margin, so once this link appears the
   button must not also push itself to the bottom or the card grows. */
.elementor-element.nrg-shop ul.products li.product a.button.added{margin-block-end:.8rem}

/* Archive furniture, only rendered if the default archive hooks run
   rather than the [products] shortcode. Styled so it does not appear
   as unbranded black-on-white if it ever shows up. */
.elementor-element.nrg-shop .woocommerce-result-count,
.elementor-element.nrg-shop .woocommerce-breadcrumb{
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nrg-ash);
}
.elementor-element.nrg-shop .woocommerce-ordering select{
  padding:.7rem .9rem;
  border:3px solid var(--nrg-slab);
  border-radius:0;
  background-color:var(--nrg-asphalt);
  color:var(--nrg-bone);
  font-family:var(--nrg-body);
}
.elementor-element.nrg-shop .woocommerce-info,
.elementor-element.nrg-shop .woocommerce-message{
  border-top:0;
  border-left:6px solid var(--nrg-hazard);
  border-radius:0;
  background-color:var(--nrg-slab);
  color:var(--nrg-bone);
  padding:1rem 1.2rem;
}

@media (max-width:1024px){
  .elementor-element.nrg-shop ul.products{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .elementor-element.nrg-shop ul.products{grid-template-columns:1fr}
}


/* ============================================================
   26. SINGLE CLIP PAGE  (new in 2.0.17)
   ============================================================ */

/* Poster frame inside a card. The frame is display:grid with
   place-items:center, so the image has to come out of flow or it becomes
   a second grid item and shoves the play button off centre. */
.nrg-clip-frame .nrg-clip-thumb{
  position:absolute;
  inset:0;
  display:block;
  z-index:1;
}
.nrg-clip-frame .nrg-clip-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nrg-clip-frame .nrg-play{position:relative;z-index:2}
.nrg-clip-frame .nrg-clip-dur{z-index:2}

/* --- the preview player --------------------------------------- */

.nrg-player{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  background-color:var(--nrg-slab);
  border:5px solid var(--nrg-ink);
  background-image:linear-gradient(135deg,#2C2C2C 0%,#1C1C1C 100%);
}

/* A native video element or an oEmbed iframe both fill the box. */
.nrg-player .nrg-player-video,
.nrg-player iframe,
.nrg-player video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background-color:var(--nrg-ink);
}
.nrg-player .nrg-player-video{object-fit:contain}

/* oEmbed wraps its iframe in a ratio div of its own. */
.nrg-player-embed .wp-embed-aspect-16-9,
.nrg-player-embed .wp-block-embed__wrapper,
.nrg-player-embed > *{width:100%;height:100%}

/* Empty state, shown until a preview URL is attached. */
.nrg-player-empty{
  gap:1rem;
  grid-auto-flow:row;
}
.nrg-player-empty .nrg-play{cursor:default;opacity:.55}
.nrg-player-note{
  font-family:var(--nrg-util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nrg-ash);
  text-align:center;
  padding-inline:1rem;
}
.nrg-player-note a{color:var(--nrg-hazard)}

/* The player sits in a Shortcode widget, so the widget wrapper needs the
   bottom margin restored the same way §3c does for everything else. */
.e-con .elementor-widget.elementor-widget.nrg-player-slot{margin-block-end:2rem}

/* The slot the Loop Grid gets pasted into on the single clip template.
   No layout of its own: the grid lives on .elementor-loop-container via
   the nrg-clipgrid class on the pasted widget. */
.e-con.nrg-morecliploop{display:block}

@media (max-width:767px){
  .nrg-player{aspect-ratio:16/10}
}


/* ============================================================
   16. QUALITY FLOOR
   ============================================================ */

.nrg-dark a:focus-visible,
.nrg-ftr a:focus-visible{outline:3px solid var(--nrg-hazard);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .nrg-marquee-run{animation:none}
  .e-con.nrg-clip,
  .elementor-element.nrg-btn .elementor-button{transition:none}
  .e-con.nrg-clip:hover,
  .elementor-element.nrg-btn .elementor-button:hover{transform:none}
}


/* ============================================================
   17. RESPONSIVE — 1024 / 767 to match Elementor defaults exactly
   ============================================================ */

@media (max-width:1024px){
  .nrg-clipgrid .elementor-loop-container{grid-template-columns:repeat(2,1fr)}
  .nrg-stats{grid-template-columns:1fr 1fr;gap:1.6rem}
  .elementor-element.nrg-h1 .elementor-heading-title,
  .elementor-element.nrg-h1 > :is(h1,h2,h3){font-size:clamp(2.6rem,11vw,4.5rem)}
}

@media (max-width:767px){
  .nrg-clipgrid .elementor-loop-container{grid-template-columns:1fr}
  .nrg-stats{grid-template-columns:1fr 1fr;gap:1.2rem}
  .e-con.nrg-sechead{align-items:flex-start;gap:1.2rem}
  .nrg-hero-meta{gap:1rem}
  .nrg-h1 .nrg-out{-webkit-text-stroke-width:2px}
  .nrg-flag{top:-14px;right:-4px}
}