/**
 * Shared FAQ, editorial, action-grid and page CTA components.
 *
 * Migration-safe extraction from the canonical Jedi-Robe dark-commerce
 * stylesheet. Rule order and declarations are preserved for staging review.
 *
 * @package Jedi_Theme
 * @since   2026-08-25
 */
 
/**
   Shared Elementor FAQ
   ========================================================================== */

/**
 * Provide one canonical FAQ treatment for Elementor Nested Accordions.
 *
 * Add the `jr-faq` class directly to any Elementor Nested Accordion widget
 * that should use the shared Jedi-Robe dark FAQ presentation. Page-level
 * stylesheets remain responsible only for surrounding section layout.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Components
 */
.jr-faq,
.jr-faq > .elementor-widget-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.jr-faq .e-n-accordion {
  display: grid;
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(152, 169, 192, 0.22);
}

.jr-faq .e-n-accordion-item {
  position: relative;
  overflow: visible;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(152, 169, 192, 0.18) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
  scroll-margin-top: 7rem;
}

.jr-faq .e-n-accordion-item[open] {
  border-bottom-color: rgba(69, 217, 107, 0.34) !important;
  background:
    linear-gradient(
      90deg,
      rgba(45, 166, 83, 0.045),
      transparent 50%
    ) !important;
}

.jr-faq
  .elementor-widget-n-accordion
  .e-n-accordion-item
  > .e-n-accordion-item-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 5rem;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: var(--jr-text, #fff);
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .jr-faq
    .elementor-widget-n-accordion
    .e-n-accordion-item
    > .e-n-accordion-item-title:hover {
    background:
      linear-gradient(
        90deg,
        rgba(45, 166, 83, 0.025),
        transparent 48%
      );
    color: var(--jr-text, #fff);
  }
}

.jr-faq .e-n-accordion-item-title:focus-visible {
  outline: 3px solid var(--jr-blue-light, #a9e1ff);
  outline-offset: 3px;
}

.jr-faq .e-n-accordion-item-title-text {
  color: var(--jr-text);
  font-size: clamp(1rem, 1rem + 0.12vw, 2.12rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

.jr-faq .e-n-accordion-item-title-icon {
  color: var(--jr-green-light, #45d96b);
}

.jr-faq .e-n-accordion-item-title-icon svg,
.jr-faq .e-n-accordion-item-title-icon svg path {
  color: currentcolor;
  fill: currentcolor;
}

.jr-faq
  .e-n-accordion-item
  > [role="region"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.jr-faq
  .e-n-accordion-item
  > [role="region"]
  .e-con-inner {
  margin: 0;
  padding: 0;
}

.jr-faq
  .e-n-accordion-item
  > [role="region"]
  .elementor-widget-text-editor {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 3rem 1.5rem 1.5rem;
  font-size: clamp(0.875rem, 0.95rem + 0.08vw, 2rem);
  color: var(--jr-text-soft);
}

.jr-faq .e-n-accordion-item .elementor-widget-text-editor p + p {
  margin-top: 1rem;
}

.jr-faq .e-n-accordion-item .elementor-widget-text-editor a {
  color: var(--jr-green-light, #45d96b) !important;
  font-weight: 700;
  text-decoration-color: rgba(69, 217, 107, 0.5) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .jr-faq .e-n-accordion-item .elementor-widget-text-editor a:hover {
    color: var(--jr-green-bright);
    text-decoration-color: currentColor;
  }
}

@media (max-width: 620px) {
  .jr-faq
    .e-n-accordion-item
    > .e-n-accordion-item-title {
    min-height: 4.75rem;
    padding: 1rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-faq .e-n-accordion-item,
  .jr-faq .e-n-accordion-item-title {
    transition: none;
  }
}

/* Build addition: 2026-08-07-jr-faq-common */

/* ==========================================================================
   Heading
   ========================================================================== */
body.jr-dark-commerce .shoptimizer-archive .elementor-widget-heading h2.elementor-heading-title {
  color: var(--jr-text);
}

/* ==========================================================================
   Heading accent
   ========================================================================== */

.jr-heading_center h1.elementor-heading-title::after,
h2.elementor-heading-title::after {
  display: block;

  width: clamp(4rem, 6vw, 6rem);
  height: 2px;

  content: "";
}

.jr-heading_center h1.elementor-heading-title::after,
.jr-heading_center h2.elementor-heading-title::after {
  margin: 1rem auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--jr-green-light),
      transparent
    );

  box-shadow:
    0 0 1rem rgba(45, 166, 83, 0.18);

}

@media (max-width: 767px) {

  body.jr-dark-commerce .jr-actions div.jr-button-primary a.elementor-button, 
  body.jr-dark-commerce .jr-actions div.jr-button-secondary a.elementor-button,
  body.jr-dark-commerce .jr-actions div.jr-button-primary a.elementor-button .elementor-button-text {
    font-size: 0.75rem;
  }

  .jr-heading_center.jr-faq-heading h1.elementor-heading-title {
    text-align: left;
  }

  .jr-heading_center.jr-faq-heading h1.elementor-heading-title::after {
    margin: 1.5rem 0 0;
    background: linear-gradient(90deg, var(--jr-green-light), transparent);
    box-shadow: 0 0 1rem rgba(45, 166, 83, 0.2);
  }
}

.jr-heading_left h2.elementor-heading-title::after {
    margin-top: 1rem;
    background: linear-gradient(90deg, var(--jr-green-light), transparent);
    box-shadow: 0 0 1rem rgba(45, 166, 83, 0.2);
}

/**
 * Shared editorial hero components.
 *
 * Provides reusable Jedi-Robe eyebrow, hero-title, action and supporting-fact
 * treatments for dark Elementor pages. Individual page stylesheets remain
 * responsible for page-specific geometry.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */


/* ==========================================================================
   Editorial eyebrow
   ========================================================================== */

body.jr-dark-commerce .entry-content .jr-eyebrow.elementor-widget-text-editor,
body.jr-dark-commerce .shoptimizer-archive .jr-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  margin: 0;

  color: var(--jr-green-light);

  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.jr-dark-commerce .jr-eyebrow::before {
  width: 1.8rem;
  height: 1px;
  flex: 0 0 auto;

  background:
    linear-gradient(
      90deg,
      rgba(69, 217, 107, 0.9),
      rgba(69, 217, 107, 0.15)
    );

  content: "";
}

body.jr-dark-commerce .jr-eyebrow p {
  margin: 0;

  color: inherit;

  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}


/* ==========================================================================
   Editorial hero heading
   ========================================================================== */

body.jr-dark-commerce .jr-hero-title {
  width: 100%;
  margin: 0;
}

body.jr-dark-commerce
  .jr-hero-title
  .elementor-heading-title {

  margin: 0;

  color: var(--jr-text);

  font-weight: 780;
  line-height: 0.98;

  text-wrap: balance;
}

body.jr-dark-commerce
  .jr-hero-title
  .elementor-heading-title::after {
  display: block;

  width: clamp(5rem, 9vw, 9rem);
  height: 2px;

  margin-top: 1.5rem;

  background:
    linear-gradient(
      90deg,
      var(--jr-green-light),
      transparent
    );

  box-shadow:
    0 0 1rem rgba(45, 166, 83, 0.2);

  content: "";
}


/**
 * Shared Jedi-Robe editorial action buttons.
 *
 * Promotes the approved London Store hero-button treatment into the shared
 * dark design system so editorial pages can use the same primary and
 * secondary actions without duplicating page-specific CSS.
 *
 * Green remains an interface accent while ordinary secondary-button text
 * stays white at rest and on hover.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

/* ==========================================================================
   Action group
   ========================================================================== */

body.jr-dark-commerce .jr-actions {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  gap: 0.85rem;

  margin: 1.75rem 0 0;
  padding: 0;
}


body.jr-dark-commerce .jr-actions.mt-0 {
  margin-top: 0;
}

/* ==========================================================================
   Elementor widget reset
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary {
  display: block;
  flex: 0 0 auto;

  width: auto;
  min-height: 0;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;

  transform: none;
}

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary
  > .elementor-widget-container,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary
  > .elementor-widget-container,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary
  .elementor-button-wrapper,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary
  .elementor-button-wrapper {
  width: auto;
  min-height: 0;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
}

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary::after,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary::after {
  content: none;
}


/* ==========================================================================
   Visible button
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary
  a.elementor-button,
body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary
  a.elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  min-height: 3.35rem;

  align-items: center;
  justify-content: center;

  padding: 0.9rem 1.45rem;

  border: 1px solid transparent;
  border-radius: 0;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  transform: translateY(0);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    filter 180ms ease;
}


/* Keep Elementor button text above the interaction overlay. */

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button
  .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button
  .elementor-button-text {
  color: inherit;
}


/* ==========================================================================
   Hover overlay
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button::before {
  position: absolute;
  z-index: 1;
  inset: 0;

  background: var(--jr-button-hover-overlay);

  content: "";
  opacity: 0;

  transition: opacity 180ms ease;

  pointer-events: none;
}


/* ==========================================================================
   Technical corner marker
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button::after {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  z-index: 3;

  width: 0.42rem;
  height: 0.42rem;

  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;

  content: "";

  pointer-events: none;
}


/* ==========================================================================
   Primary gold action
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary
  a.elementor-button {
  --jr-button-hover-overlay:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2),
      transparent 55%
    );

  border-color: rgba(239, 196, 109, 0.76);

  background:
    linear-gradient(
      180deg,
      #efc46d 0%,
      #d7a444 48%,
      #c58c2d 100%
    );

  color: #080a0d;

  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.3),
    0 0 1.1rem rgba(214, 165, 74, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.jr-dark-commerce
  .jr-actions
  div.jr-button-primary
  a.elementor-button::after {
  border-right-color: rgba(5, 7, 10, 0.62);
  border-bottom-color: rgba(5, 7, 10, 0.62);
}


/* ==========================================================================
   Secondary dark action
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary
  a.elementor-button {
  --jr-button-hover-overlay:
    linear-gradient(
      135deg,
      rgba(69, 217, 107, 0.1),
      transparent 58%
    );

  border-color: rgba(152, 169, 192, 0.48);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(14, 24, 36, 0.96),
      rgba(6, 12, 20, 0.96)
    );

  color: #f7f9fc;

  box-shadow:
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(69, 217, 107, 0.08);
}

body.jr-dark-commerce
  .jr-actions
  div.jr-button-secondary
  a.elementor-button::after {
  border-right-color: rgba(247, 249, 252, 0.62);
  border-bottom-color: rgba(247, 249, 252, 0.62);
}


/* ==========================================================================
   Hover states
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  body.jr-dark-commerce
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    ):hover {
    transform: none;
  }

  body.jr-dark-commerce
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    ):hover
    a.elementor-button {
    transform: translateY(-2px);
  }

  body.jr-dark-commerce
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    ):hover
    a.elementor-button::before {
    opacity: 1;
  }


  body.jr-dark-commerce
    .jr-actions
    div.jr-button-primary:hover
    a.elementor-button {
    border-color: #f6d98e;

    color: #05070a;

    filter: brightness(1.07);

    box-shadow:
      0 1rem 2.35rem rgba(0, 0, 0, 0.34),
      0 0 1.45rem rgba(214, 165, 74, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }

  body.jr-dark-commerce
    .jr-actions
    div.jr-button-primary:hover
    a.elementor-button::after {
    border-right-color: rgba(5, 7, 10, 0.88);
    border-bottom-color: rgba(5, 7, 10, 0.88);
  }


  body.jr-dark-commerce
    .jr-actions
    div.jr-button-secondary:hover
    a.elementor-button {
    border-color: rgba(69, 217, 107, 0.68);

    color: #fff;

    filter: brightness(1.1);

    box-shadow:
      0 1rem 2.2rem rgba(0, 0, 0, 0.32),
      0 0 1.2rem rgba(45, 166, 83, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  body.jr-dark-commerce
    .jr-actions
    div.jr-button-secondary:hover
    a.elementor-button::after {
    border-right-color: rgba(69, 217, 107, 0.95);
    border-bottom-color: rgba(69, 217, 107, 0.95);
  }
}


/* ==========================================================================
   Active and focus
   ========================================================================== */

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button:active {
  transform: translateY(0) scale(0.985);
}

body.jr-dark-commerce
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button:focus-visible {
  outline: 2px solid var(--jr-blue-light);
  outline-offset: 3px;
}


/* ==========================================================================
   Mobile actions
   ========================================================================== */

@media (max-width: 992px) {

  body.jr-dark-commerce .jr-hero-title h1.elementor-heading-title, 
  body.jr-dark-commerce h1.page-title {
      margin-bottom: 1rem;
  }

  body.jr-dark-commerce .jr-actions {
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {

  body.jr-dark-commerce .entry-content .jr-eyebrow.elementor-widget-text-editor,
  body.jr-dark-commerce .shoptimizer-archive .jr-eyebrow {
    font-size: 0.63rem;
  }

  body.jr-dark-commerce .jr-actions {
    flex-direction: column;
  }

  body.jr-dark-commerce
    .jr-actions
    div.jr-button-primary,
  body.jr-dark-commerce
    .jr-actions
    div.jr-button-secondary,
  body.jr-dark-commerce
    .jr-actions
    div.jr-button-primary
    a.elementor-button,
  body.jr-dark-commerce
    .jr-actions
    div.jr-button-secondary
    a.elementor-button {
    width: 100%;
  }
}


/* ==========================================================================
   Supporting facts
   ========================================================================== */

body.jr-dark-commerce
  .jr-facts
  .elementor-icon-list-items {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, max-content));

  gap: 0.5rem 1.5rem;

  margin: 0;
  padding: 0;
}

body.jr-dark-commerce
  .jr-facts
  .elementor-icon-list-item {
  position: relative;

  margin: 0;
  padding: 0 0 0 1rem;
}

body.jr-dark-commerce
  .jr-facts
  .elementor-icon-list-icon {
  display: none;
}

body.jr-dark-commerce
  .jr-facts
  .elementor-icon-list-item::before {
  position: absolute;
  top: 0.35em;
  left: 0.08rem;

  width: 0.36rem;
  height: 0.36rem;

  border: 1px solid rgba(69, 217, 107, 0.78);

  background: rgba(69, 217, 107, 0.14);

  content: "";

  transform: rotate(45deg);
}

body.jr-dark-commerce
  .jr-facts
  .elementor-icon-list-text {
  color: var(--jr-text-soft);

  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}


@media (max-width: 720px) {

  body.jr-dark-commerce
    .jr-facts
    .elementor-icon-list-items {
    grid-template-columns: 1fr;
  }

  body.jr-dark-commerce .jr-actions {
    flex-direction: column;
  }

  body.jr-dark-commerce
    .jr-actions
    :is(
      .jr-button-primary,
      .jr-button-secondary
    ),
  body.jr-dark-commerce
    .jr-actions
    :is(
      .jr-button-primary,
      .jr-button-secondary
    )
    .elementor-button {
    width: 100%;
  }
}

/* ==========================================================================
   Shared editorial page layout
   ========================================================================== */

/**
 * Canonical dark editorial section and content shell.
 *
 * Provides consistent vertical section rhythm and horizontal content width
 * across Jedi-Robe editorial Elementor pages. Individual page stylesheets
 * remain responsible for the internal layout and appearance of each section.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce .jr-page-section {
	position: relative;
	isolation: isolate;

	width: 100%;

	margin: 0 auto;
	padding: 0;

	background: transparent;
}

/**
 * Normal spacing between adjacent page sections.
 */
body.jr-dark-commerce
	.jr-page-section
	+ .jr-page-section {
	margin-top: var(--jr-page-section-space);
}

/**
 * Explicitly remove a section's own top spacing.
 */
body.jr-dark-commerce
	.jr-page-section.mt-0 {
	margin-top: 0;
}

/**
 * Remove the normal gap after a section when requested.
 */
body.jr-dark-commerce
	.jr-page-section.mb-0
	+ .jr-page-section {
	margin-top: 0;
}

/**
 * Increase the gap after a section when requested.
 */
body.jr-dark-commerce
	.jr-page-section.mb-2x
	+ .jr-page-section {
	margin-top: clamp(3rem, 6vw, 6rem);
}

/**
 * Maintain deliberate section breathing room on small screens.
 */
@media (max-width: 720px) {

	body.jr-dark-commerce {
		--jr-page-section-space:
			clamp(
				2.5rem,
				8vw,
				3rem
			);
	}
}

body.jr-dark-commerce .jr-page-shell {
  position: relative;
  z-index: 1;
  width: min(
    calc(100% - (var(--jr-page-gutter) * 2)),
    var(--jr-container, 100rem)
  );
  margin-inline: auto;
}

body.jr-dark-commerce .jr-page-section.mb-2x {
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

body.jr-dark-commerce .jr-page-section.mb-0 {
  margin-bottom: 0;
}

body.jr-dark-commerce .jr-page-section.mt-0 {
  margin-top: 0;
}

/* ==========================================================================
   Responsive page layout
   ========================================================================== */

.jr-page-section__intro {
  color: var(--jr-text-soft);
}

/* ==========================================================================
   Shared action grid
   ========================================================================== */

/**
 * Canonical three-column editorial action grid.
 *
 * Provides a reusable technical grid for content groups where every item
 * contains a code, heading, supporting introduction and action.
 *
 * The visual treatment is extracted from the approved London Store planning
 * grid and uses the shared Jedi-Robe dark design tokens.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

/* ==========================================================================
   Grid
   ========================================================================== */

body.jr-dark-commerce
  .jr-action-grid {
  position: relative;
  z-index: 1;

  display: grid;
  width: 100%;
  max-width: none;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;

  margin: 0;
  padding: 0;

  border-top: 1px solid rgba(152, 169, 192, 0.17);
  border-bottom: 1px solid rgba(152, 169, 192, 0.15);

  background: transparent;
  box-shadow: none;
}

/**
 * Support Elementor containers using an inner wrapper.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid
  > .e-con-inner {
  display: grid;
  width: 100%;
  max-width: none;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;

  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Grid item
   ========================================================================== */

/**
 * Individual action-grid item.
 *
 * Uses open separators rather than individual card borders so adjacent items
 * appear as one continuous technical interface.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid
  > .jr-action-grid__item,
body.jr-dark-commerce
  .jr-action-grid
  > .e-con-inner
  > .jr-action-grid__item {
  position: relative;
  overflow: hidden;

  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;

  flex-direction: column;
  align-items: flex-start;
  gap: 0;

  margin: 0;
  padding: clamp(1.6rem, 2.7vw, 2.3rem);

  border: 0;
  border-left: 1px solid rgba(152, 169, 192, 0.15);

  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   Column separators
   ========================================================================== */

/**
 * Remove the left separator from the first item in every desktop row.
 *
 * 1 | 2 | 3
 * 4 | 5 | 6
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid
  > .jr-action-grid__item:nth-child(3n + 1),
body.jr-dark-commerce
  .jr-action-grid
  > .e-con-inner
  > .jr-action-grid__item:nth-child(3n + 1) {
  border-left: 0;
}

/**
 * Separate every row after the first.
 *
 * London Store currently contains only one row. This rule extends the same
 * visual system to grids containing six or more items.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid
  > .jr-action-grid__item:nth-child(n + 4),
body.jr-dark-commerce
  .jr-action-grid
  > .e-con-inner
  > .jr-action-grid__item:nth-child(n + 4) {
  border-top: 1px solid rgba(152, 169, 192, 0.15);
}

/* ==========================================================================
   Technical corner
   ========================================================================== */

/**
 * Add the lower-right diagnostic marker used by the London Store planning
 * cards.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid__item::after {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;

  width: 0.9rem;
  height: 0.9rem;

  border-right: 1px solid rgba(69, 217, 107, 0.4);
  border-bottom: 1px solid rgba(69, 217, 107, 0.4);

  content: "";
  pointer-events: none;
}

/* ==========================================================================
   Code
   ========================================================================== */

/**
 * Diagnostic code label.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .shoptimizer-archive
  .jr-action-grid
  .jr-action-grid__code {
  display: inline-flex;
  width: auto;
  min-height: 1.75rem;

  align-self: flex-start;
  align-items: center;
  justify-content: center;

  margin: 0 0 1.2rem;
  padding: 0.25rem 0.65rem;

  border: 1px solid rgba(69, 217, 107, 0.3);

  background:
    linear-gradient(
      90deg,
      rgba(45, 166, 83, 0.11),
      rgba(45, 166, 83, 0.045)
    );

  color: var(--jr-green-light);

  box-shadow:
    0 0 0.8rem rgba(45, 166, 83, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

body.jr-dark-commerce
  .jr-action-grid__code
  p {
  margin: 0;

  color: inherit;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

/* ==========================================================================
   Title
   ========================================================================== */

/**
 * Action-grid heading.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid__title {
  width: 100%;
  margin: 0;
  padding: 0;
}

body.jr-dark-commerce
  .jr-action-grid__title
  h3.elementor-heading-title,
body.jr-dark-commerce
  h3.jr-action-grid__title {
  margin: 0;

  color: var(--jr-text);

  font-size: clamp(1.3rem, 1.15rem + 0.36vw, 1.6rem);
  font-weight: 740;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

/* ==========================================================================
   Elementor heading
   ========================================================================== */
body.jr-dark-commerce .entry-content h3 {
  color: var(--jr-text);
}

/* ==========================================================================
   Elementor text editor
   ========================================================================== */
body.jr-dark-commerce.single-product .entry-content {
  padding-left: 0;
}

body.jr-dark-commerce .entry-content,
body.jr-dark-commerce .entry-content .elementor-widget-text-editor {
  color: var(--jr-text);
}

body.jr-dark-commerce  .entry-content .elementor-widget-text-editor a {
  color: var(--jr-green-light, #45d96b);
  font-weight: 700;
  text-decoration-color: rgba(69, 217, 107, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  body.jr-dark-commerce .entry-content .elementor-widget-text-editor a:hover {
    color: var(--jr-green-bright);
    text-decoration-color: currentColor;
  }
}

body.jr-dark-commerce.single-product .site-content .commercekit-Tabs-panel--additional_information {
  display: none;
}

/* ==========================================================================
   Introduction
   ========================================================================== */

/**
 * Supporting action-grid copy.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-action-grid__intro {
  width: 100%;
  margin: 0.9rem 0 0;
  padding: 0;

  color: var(--jr-text-soft);
  font-size: 0.95rem;
  line-height: 1.68;
}

body.jr-dark-commerce
  .jr-action-grid__intro
  p {
  margin: 0;

  color: inherit;
  font: inherit;
  line-height: inherit;
}

body.jr-dark-commerce
  .jr-action-grid__intro
  p + p {
  margin-top: 0.5rem;
}

body.jr-dark-commerce
  .jr-action-grid__intro
  a {
  color: var(--jr-text);
  text-decoration: none;
}

/* ==========================================================================
   Action widget
   ========================================================================== */

/**
 * Reset the Elementor button widget so its visible anchor controls the
 * component's dimensions and interaction.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  div.jr-action-grid__action {
  align-self: flex-start;

  width: auto;
  min-height: 0;

  margin: auto 0 0;
  padding: 1.6rem 0 0;

  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body.jr-dark-commerce
  div.jr-action-grid__action
  > .elementor-widget-container,
body.jr-dark-commerce
  div.jr-action-grid__action
  .elementor-button-wrapper {
  width: auto;
  min-height: 0;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
   Visible action button
   ========================================================================== */

/**
 * Canonical action-grid button.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  min-height: 3rem;

  align-items: center;
  justify-content: center;

  padding: 0.75rem 2.6rem 0.75rem 1rem;

  border: 1px solid rgba(152, 169, 192, 0.34);
  border-radius: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03),
      transparent 45%
    ),
    rgba(6, 12, 20, 0.74);

  color: var(--jr-text);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0.55rem 1.25rem rgba(0, 0, 0, 0.14);

  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.1;

  text-align: left;
  text-decoration: none;
  text-transform: uppercase;

  transform: translateX(0);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

/**
 * Keep Elementor button text above decorative pseudo-elements.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button
  .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button
  .elementor-button-text {
  color: inherit;
}

/* ==========================================================================
   Action arrow
   ========================================================================== */

/**
 * Add the shared outbound/action indicator.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button::after {
  position: absolute;
  top: 50%;
  right: 0.95rem;

  color: var(--jr-green-light);

  content: "↗";

  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;

  opacity: 0.82;
  transform: translateY(-50%);

  transition:
    opacity 180ms ease,
    transform 180ms ease;

  pointer-events: none;
}

/* ==========================================================================
   Interaction
   ========================================================================== */

/**
 * Apply hover movement only on devices with genuine hover capability.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
@media (hover: hover) and (pointer: fine) {
  body.jr-dark-commerce
    .jr-action-grid__item {
    transition:
      background 180ms ease,
      box-shadow 180ms ease;
  }

  body.jr-dark-commerce
    .jr-action-grid__item:hover {
    background:
      linear-gradient(
        135deg,
        rgba(69, 217, 107, 0.02),
        transparent 62%
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.012);
  }

  body.jr-dark-commerce
    div.jr-action-grid__action:hover {
    transform: none;
  }

  body.jr-dark-commerce
    div.jr-action-grid__action:hover
    a.elementor-button {
    border-color: rgba(69, 217, 107, 0.48);

    background:
      linear-gradient(
        135deg,
        rgba(69, 217, 107, 0.065),
        transparent 55%
      ),
      rgba(7, 15, 23, 0.82);

    color: #fff;

    box-shadow:
      0 0.7rem 1.5rem rgba(0, 0, 0, 0.2),
      0 0 0.9rem rgba(45, 166, 83, 0.065),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transform: translateX(0.15rem);
  }

  body.jr-dark-commerce
    div.jr-action-grid__action:hover
    a.elementor-button::after {
    opacity: 1;
    transform: translate(0.12rem, -50%);
  }
}

/* ==========================================================================
   Active and keyboard focus
   ========================================================================== */

/**
 * Preserve visible keyboard focus and restrained active feedback.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button:focus-visible {
  outline: 2px solid var(--jr-green-light);
  outline-offset: 3px;
}

body.jr-dark-commerce
  div.jr-action-grid__action
  a.elementor-button:active {
  transform: translateX(0.05rem) scale(0.99);
}

/* ==========================================================================
   Responsive action grid
   ========================================================================== */

/**
 * Follow the approved London Store planning-grid responsive behaviour.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
@media (max-width: 1024px) {
  body.jr-dark-commerce
    .jr-action-grid,
  body.jr-dark-commerce
    .jr-action-grid
    > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  body.jr-dark-commerce
    .jr-action-grid
    > .jr-action-grid__item,
  body.jr-dark-commerce
    .jr-action-grid
    > .e-con-inner
    > .jr-action-grid__item {
    border-top: 1px solid rgba(152, 169, 192, 0.15);
    border-left: 0;
  }

  body.jr-dark-commerce
    .jr-action-grid
    > .jr-action-grid__item:first-child,
  body.jr-dark-commerce
    .jr-action-grid
    > .e-con-inner
    > .jr-action-grid__item:first-child {
    border-top: 0;
  }

  body.jr-dark-commerce
    div.jr-action-grid__action {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  body.jr-dark-commerce
    .jr-action-grid__item {
    padding: 1.5rem 0.25rem;
  }

  body.jr-dark-commerce
    div.jr-action-grid__action,
  body.jr-dark-commerce
    div.jr-action-grid__action
    > .elementor-widget-container,
  body.jr-dark-commerce
    div.jr-action-grid__action
    .elementor-button-wrapper,
  body.jr-dark-commerce
    div.jr-action-grid__action
    a.elementor-button {
    width: 100%;
  }
}

/* ==========================================================================
   Action grid: four-column modifier
   ========================================================================== */

/**
 * Four-column action-grid variation.
 *
 * Extends the canonical three-column jr-action-grid without changing the
 * component structure, typography, surfaces or actions.
 *
 * Desktop:
 * 1 | 2 | 3 | 4
 *
 * Tablet:
 * 1 | 2
 * -----
 * 3 | 4
 *
 * Mobile:
 * 1
 * -
 * 2
 * -
 * 3
 * -
 * 4
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column,
body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .e-con-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ==========================================================================
   Four-column desktop separators
   ========================================================================== */

/**
 * Reset the canonical three-column separator pattern before applying the
 * four-column variation.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .jr-action-grid__item,
body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .e-con-inner
  > .jr-action-grid__item {
  border-top: 0;
  border-left: 1px solid rgba(152, 169, 192, 0.15);
}

/**
 * Remove the left divider from the first item of each four-column row.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .jr-action-grid__item:nth-child(4n + 1),
body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .e-con-inner
  > .jr-action-grid__item:nth-child(4n + 1) {
  border-left: 0;
}

/**
 * Add a horizontal divider before every row after the first.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .jr-action-grid__item:nth-child(n + 5),
body.jr-dark-commerce
  .jr-action-grid.jr-action-grid--four-column
  > .e-con-inner
  > .jr-action-grid__item:nth-child(n + 5) {
  border-top: 1px solid rgba(152, 169, 192, 0.15);
}

/* ==========================================================================
   Four-column tablet layout
   ========================================================================== */

/**
 * Reduce the four-column variation to two equal columns on narrower screens.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

@media (max-width: 1200px) {
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column,
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .jr-action-grid__item,
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner
    > .jr-action-grid__item {
    border-top: 0;
    border-left: 1px solid rgba(152, 169, 192, 0.15);
  }

  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .jr-action-grid__item:nth-child(odd),
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner
    > .jr-action-grid__item:nth-child(odd) {
    border-left: 0;
  }

  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .jr-action-grid__item:nth-child(n + 3),
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner
    > .jr-action-grid__item:nth-child(n + 3) {
    border-top: 1px solid rgba(152, 169, 192, 0.15);
  }
}

/* ==========================================================================
   Four-column mobile layout
   ========================================================================== */

/**
 * Collapse the four-column variation to the canonical single-column stack.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

@media (max-width: 720px) {
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column,
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .jr-action-grid__item,
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner
    > .jr-action-grid__item {
    border-top: 1px solid rgba(152, 169, 192, 0.15);
    border-left: 0;
  }

  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .jr-action-grid__item:first-child,
  body.jr-dark-commerce
    .jr-action-grid.jr-action-grid--four-column
    > .e-con-inner
    > .jr-action-grid__item:first-child {
    border-top: 0;
  }
}

/**
 * Centre a shared editorial action group.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-actions--centered {
  justify-content: center;
}

/**
 * Full editorial shell variation.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-page-shell.jr-page-shell--narrow {
  max-width: 100%;
}

/**
 * Narrow editorial shell variation.
 *
 * Provides a restrained reading width for FAQs and other text-heavy
 * editorial components while retaining the standard page gutter.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
  .jr-page-shell.jr-page-shell--narrow {
  max-width: 74rem;
}

body.jr-dark-commerce
  .jr-page-shell.jr-page-shell--full {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Shared page CTA
   ========================================================================== */

/**
 * Canonical closing call-to-action panel.
 *
 * Provides the reusable sci-fi closing panel used at the end of editorial
 * pages. The component is based on the approved London Store final CTA.
 *
 * Page spacing and horizontal width are intentionally owned by
 * jr-page-section and jr-page-shell respectively.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

/* ==========================================================================
   Panel
   ========================================================================== */

body.jr-dark-commerce
  .jr-page-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;

  margin: 0;

  padding:
    clamp(2rem, 3vw, 3.5rem)
    clamp(1.5rem, 3.5vw, 3.5rem);

  border: 1px solid rgba(111, 203, 255, 0.2);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      transparent 40%
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(111, 203, 255, 0.065),
      transparent 26rem
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(45, 166, 83, 0.045),
      transparent 24rem
    ),
    rgba(8, 14, 22, 0.5);

  box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  text-align: center;
}


/* ==========================================================================
   Green interface rail
   ========================================================================== */

/**
 * Draw the illuminated top interface rail.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-page-cta::before {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  z-index: 3;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(45, 166, 83, 0.1) 0%,
      rgba(69, 217, 107, 0.66) 18%,
      var(--jr-green-light) 50%,
      rgba(69, 217, 107, 0.66) 82%,
      rgba(45, 166, 83, 0.1) 100%
    );

  box-shadow:
    0 0 1.2rem rgba(45, 166, 83, 0.18);

  content: "";
  pointer-events: none;
}


/* ==========================================================================
   Orbital interface detail
   ========================================================================== */

/**
 * Add the decorative orbital interface element behind the CTA content.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-page-cta::after {
  position: absolute;
  right: -8%;
  bottom: -72%;
  z-index: 0;

  width: clamp(18rem, 28vw, 32rem);
  aspect-ratio: 1;

  border: 1px solid rgba(111, 203, 255, 0.07);
  border-radius: 50%;

  box-shadow:
    0 0 0 3rem rgba(111, 203, 255, 0.008),
    0 0 0 6rem rgba(45, 166, 83, 0.005);

  content: "";
  pointer-events: none;
}


/* ==========================================================================
   Content stacking
   ========================================================================== */

body.jr-dark-commerce
  .jr-page-cta
  > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   Content
   ========================================================================== */

body.jr-dark-commerce
  .jr-page-cta__content {
  display: flex;
  width: 100%;
  max-width: 46rem;
  flex-direction: column;
  align-items: center;

  margin: 0 auto;
  padding: 0;

  border: 0;

  background: transparent;
  box-shadow: none;
}


/* ==========================================================================
   Title
   ========================================================================== */

body.jr-dark-commerce
  .jr-page-cta__title {
  width: 100%;
  max-width: 46rem;

  margin: 0 auto;
  padding: 0;
}

body.jr-dark-commerce
  .jr-page-cta__title
  h2.elementor-heading-title {
  max-width: none;

  margin: 0;

  color: var(--jr-text);

  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.05;

  text-align: center;
  text-wrap: balance;
}


/* ==========================================================================
   Introduction
   ========================================================================== */

body.jr-dark-commerce
  .jr-page-cta__intro {
  width: 100%;
  max-width: 42rem;

  margin: 1rem auto 0;
  padding: 0;
}

body.jr-dark-commerce
  .jr-page-cta__intro,
body.jr-dark-commerce
  .jr-page-cta__intro
  p {
  color: var(--jr-text-soft);

  font-size: 0.98rem;
  line-height: 1.72;

  text-align: center;
}

body.jr-dark-commerce
  .jr-page-cta__intro
  p {
  margin: 0;
}


/* ==========================================================================
   Shared actions inside page CTA
   ========================================================================== */

/**
 * Adapt the shared jr-actions component to the centered page CTA.
 *
 * Button colours, surfaces, interaction states and technical corners remain
 * owned by jr-button-primary and jr-button-secondary.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-page-cta
  .jr-actions {
  width: auto;

  align-items: center;
  justify-content: center;

  margin: 1rem auto 0;
}


/* ==========================================================================
   CTA button dimensions
   ========================================================================== */

/**
 * Retain the approved London Store final-CTA button dimensions while reusing
 * the global primary and secondary button components.
 *
 * @package Jedi_Theme_Dark
 * @subpackage Shared_Components
 */

body.jr-dark-commerce
  .jr-page-cta
  .jr-actions
  :is(
    div.jr-button-primary,
    div.jr-button-secondary
  )
  a.elementor-button {
  min-width: 15rem;
  min-height: 3.4rem;

  padding: 0.9rem 1.5rem;

  font-size: 0.78rem;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 720px) {
  body.jr-dark-commerce
    .jr-page-cta {
    padding:
      3rem
      1.25rem;
  }

  body.jr-dark-commerce
    .jr-page-cta
    .jr-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  body.jr-dark-commerce
    .jr-page-cta
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    ),
  body.jr-dark-commerce
    .jr-page-cta
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    )
    > .elementor-widget-container,
  body.jr-dark-commerce
    .jr-page-cta
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    )
    .elementor-button-wrapper,
  body.jr-dark-commerce
    .jr-page-cta
    .jr-actions
    :is(
      div.jr-button-primary,
      div.jr-button-secondary
    )
    a.elementor-button {
    width: 100%;
    min-width: 0;
  }
}

.jr-dark-commerce .below-woocommerce-category {
  font-size: 1rem;
}