/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/



:root {
  --bg-aic-gradient: linear-gradient(120deg, #1a2026 40%, #5c6165);
}


main > section:last-of-type:not(.bricks-shape-divider) {
  padding-bottom: var(--section-space-l);
}


h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span{
  color: var(--primary);
}

ul li::marker {
  color: #00aeef;
}



.otgs-development-site-front-end{
  display: none !important; 
}


.pattern-scheme-switch-wrapper {
  position: relative;
  z-index: 9;
}

.scheme-switch {
  --light-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z' stroke='%23ffb84d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9982 2V4M11.9982 20V22M18.9981 5.00098L17.499 6.5M6.5 17.5L5 19M22 12H20M4 12H2M19 19.001L17.5 17.501M6.49902 6.5L5 5.00098' stroke='%23ffb84d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  display: flex;
  gap: 0.5em;
  align-items: center;
  max-inline-size: max-content;
  padding:  0.25em .3em;
  border-radius: var(--radius);
}

/* Replaces &::before */
.scheme-switch::before {
  content: "";
  background: currentColor;
  mask-image: var(--icon);
  mask-size: cover;
  inline-size: var(--icon-size, 1.1em);
  aspect-ratio: 1;
}

/* Replaces &::after */
.scheme-switch::after {
  content: attr(data-label);
  display: var(--label-display, inline-flex);
  font-size: var(--label-size, 1em);
}

/* Replaces &[data-label*='light' i] */
.scheme-switch[data-label*="light" i] {
  --icon: var(--light-icon);
}

/* Replaces &[data-label*='dark' i] */
.scheme-switch[data-label*="dark" i] {
  --icon: var(--dark-icon);
}

/* Replaces &[data-show-label='false'] */
.scheme-switch[data-show-label="false"] {
  --label-display: none;
}
















/* FOOTER REVEALER START */


.revealer-alpha[data-revealer-alpha] {
  interpolate-size: allow-keywords;
}

.revealer-alpha__content[data-revealer-content] {
  overflow: clip;

  /* Fade effect on the outer */
  --fade-amount: 25%;
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0%,
    black var(--fade-amount)
  );
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    black var(--fade-amount)
  );

  transition: --fade-amount 0.3s ease-out;
}

.revealer-alpha__content[data-revealer-content='revealed'] {
  --fade-amount: 0% !important;
}

.revealer-alpha__inner {
  height: var(--height);
  transition: height 0.3s ease-out;
}

.revealer-alpha__default-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.revealer-alpha__trigger {
  margin-block-start: 1rem;
  padding: 0;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}



/* FOOTER REVEALER END */








/* WPML START */


.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	position: relative;
	padding-right: calc(10px);
	width: fit-content;
	border-radius: var(--radius);
}
.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover > a, 
.wpml-ls-legacy-dropdown a:focus, .wpml-ls-legacy-dropdown a:hover {
	background: var(--neutral-light);
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown-click a,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown a {
	border: none;
}


.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
	box-shadow: var(--nav-shadow);
	border: 1px solid var(--neutral-light) !important;
	border-radius: var(--nav-radius);
	overflow: clip;
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu{
	box-shadow: var(--nav-shadow);
	border: 1px solid var(--neutral-light) !important;
	border-radius: var(--nav-radius);
	overflow: clip;
	width: fit-content;
}


.wpml-ls-legacy-dropdown-click {
	display: inline-flex;
	width: fit-content;
}

/* SUBMENU UL: size to content so nothing wraps */
.wpml-ls-item-legacy-dropdown-click .wpml-ls-sub-menu {
  width: max-content;          /* key: grow to content */
  min-width: max-content;      /* ensure it never collapses */
  white-space: nowrap;         /* key: prevent wrapping */
}

/* Each option row: keep on one line */
.wpml-ls-item-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-link {
  display: flex;
  white-space: nowrap; /* keep label + (English) together */
}

/* Optional: prevent the “(French)” block from breaking */
.wpml-ls-item-legacy-dropdown-click .wpml-ls-display,
.wpml-ls-item-legacy-dropdown-click .wpml-ls-native {
  white-space: nowrap;
}


.nav__item--lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle {
	padding-right: 0;
	padding: .75em .5em;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after
.nav__item--lang .wpml-ls-current-language > a.wpml-ls-item-toggle::before,
.nav__item--lang  .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after,
.nav__item--lang  .wpml-ls-legacy-dropdown-click .wpml-ls-flag + span {
	display: none !important;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after{
	display: none;	
}













.nav.aicmega .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
	left: 95%;
	right: auto;
	transform: translateX(-95%);
}

.wpml-ls-sub-menu a {
	padding: .7em;
}



.nav.aicmega .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after,
.nav.aicmega .js-wpml-ls-item-toggle.wpml-ls-item-toggle span {
	display: none;
}

.nav.aicmega .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle, 
.nav.aicmega .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	padding: .5em;
}



.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
	left: 0;
	right: auto;
	transform: translateX(0);
	border-radius: var(--radius-xl);
}


/* 1. Hide the full language text ONLY on the active item inside the nav menu */
.nav__item--lang .wpml-ls-current-language > a.wpml-ls-item-toggle .wpml-ls-native,
.nav__item--lang .wpml-ls-current-language > a.wpml-ls-item-toggle .wpml-ls-display {
    display: none !important;
}

/* 2. Read the 'lang' attribute and display it as uppercase inside the nav menu */
.nav__item--lang .wpml-ls-current-language > a.wpml-ls-item-toggle::before {
    content: attr(lang);
    text-transform: uppercase;
    margin-left: 6px; /* Adjust spacing between the flag and the text */
    vertical-align: middle;
}






.nav__item--lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
	left: auto;
	transform: translateX(0%);
	right: 0;
}






.nav__item .wpml-ls-legacy-dropdown-click a {
	border: 1px solid var(--neutral-ultra-light);
}

.nav__item .wpml-ls-legacy-dropdown-click a {
	border: 1px solid var(--neutral-ultra-light);
	padding-top: .8em;
	padding-bottom: .8em;
}

/* WPML END */














/* =============================================================================
   MEGA MENU – Stylesheet
   BEM blocks:  .nav  /  .nav__mega  /  .nav__dropdown  /  .nav__card
                .nav__cards-grid  /  .nav__list-preview
   Desktop only: displayed at ≥ 992 px. Below that the host theme renders
   its own mobile nav and this component hides completely.
   ============================================================================= */

/* ── Scoping reset ────────────────────────────────────────────────────────── */
.nav,
.nav * {
    box-sizing: border-box;
}

/* Honour the hidden attribute throughout (overrides any theme reset). */
.nav [hidden] {
    display: none !important;
}

/* ── CSS custom properties ───────────────────────────────────────────────── */
:root {
    --nav-radius-sm  : var(--radius, 6px);
    --nav-radius-lg  : var(--radius-xl, 14px);
    --nav-shadow     : 0 10px 15px -3px rgb(0 0 0 / 0.10),
                       0 4px  6px  -4px rgb(0 0 0 / 0.10);
    --nav-ease       : cubic-bezier(0.2, 0.8, 0.2, 1);
    --nav-transition : 0.18s var(--nav-ease);

    /* Sidebar width for the mega-menu column layout */
    --nav-sidebar-w  : 220px;
    /* Promo column width */
    --nav-promo-w    : 240px;
    /* Breakpoint value (mirrors JS constant) */
    --nav-bp         : 992px;
}

/* =============================================================================
   DESKTOP GATE
   Hide the entire nav on viewports below the breakpoint.
   The mobile nav is rendered separately by the theme.
   ============================================================================= */
@media (max-width: 991px) {
    .nav {
        display: none !important;
    }
}

/* =============================================================================
   NAV ROOT
   ============================================================================= */
.nav {
    width: 100%;
    position: static;
    color: var(--neutral, #374151);
}

/* =============================================================================
   NAV__LIST  – top-level flex row
   ============================================================================= */
.nav__list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    display    : flex;
    align-items: center;
    gap        :  calc(var(--space-xs)/1.4);
    flex-wrap  : wrap;
}

/* =============================================================================
   NAV__ITEM
   ============================================================================= */
.nav__item {
    position: static; /* mega menus span full width – set on .nav__item--has-mega */
}

.nav__item--has-dropdown {
    position: relative; /* dropdowns are relative to this item */
}

/* Push CTAs to the far right */
.nav__item--push {
    margin-inline-start: auto;
}

/* Language switcher item – no extra margin needed */
.nav__item--lang {
    display: flex;
    align-items: center;
}

/* =============================================================================
   NAV__TRIGGER & NAV__LINK  – top-level interactive elements
   ============================================================================= */
.nav__trigger,
.nav__link {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.15em;
    padding-block  : var(--btn-padding-block, 0.45em);
    padding-inline : 0.55em;
    font-size      : var(--text-m, 0.9375rem);
    font-weight    : var(--btn-font-weight, 500);
    font-family    : inherit;
    line-height    : 1;
    color          : var(--neutral, #374151);
    text-decoration: none;
    background     : transparent;
    border         : 0;
    border-radius  : var(--nav-radius-sm);
    cursor         : pointer;
    transition     : color var(--nav-transition),
                     background var(--nav-transition);
    white-space    : nowrap;
}

.nav__trigger:hover,
.nav__link:hover {
    color: var(--primary-hover, #0050c8);
}

.nav__trigger:focus-visible,
.nav__link:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

/* Expanded state */
.nav__trigger[aria-expanded="true"] {
    color      : var(--text-dark, #111827);
    background : var(--bg-ultra-light, #f9fafb);
}

/* CTA button overrides */
.nav__link.btn--primary,
.nav__link.btn--neutral-light {
    padding-inline: 0.85em;
    min-inline-size: fit-content;
    width: auto;
}

/* =============================================================================
   NAV__CHEVRON
   ============================================================================= */
.nav__chevron {
    flex      : 0 0 auto;
    width     : 16px;
    height    : 16px;
    transition: transform 0.18s var(--nav-ease);
    pointer-events: none;
}

.nav__trigger[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
}

/* =============================================================================
   NAV__DROPDOWN  – simple popover list (Applications, Resources, Company)
   ============================================================================= */
.nav__dropdown {
    position     : absolute;
    top          : calc(100% + 0.5rem);
    left         : 0;
    z-index      : 30;
    min-width    : 220px;
    width        : max-content;
    margin       : 0;
    padding      : 8px;
    list-style   : none;
    background   : var(--bg-ultra-light, #f9fafb);
    border       : 1px solid var(--bg-light, #e5e7eb);
    border-radius: var(--nav-radius-lg);
    box-shadow   : var(--nav-shadow);
    display      : flex;
    flex-direction: column;
    gap          : 2px;
    animation    : nav-fade-in 0.12s var(--nav-ease) both;
}

.nav__dropdown__link {
    display       : block;
    padding       : 0.35em 0.6em;
    border-radius : var(--nav-radius-sm);
    color         : var(--text-muted, #6b7280);
    text-decoration: none;
    font-size     : var(--text-m, 0.9375rem);
    transition    : background var(--nav-transition),
                    color var(--nav-transition);
    white-space   : nowrap;
}

.nav__dropdown__link:hover {
    background: var(--white, #fff);
    color     : var(--text-dark, #111827);
}

.nav__dropdown__link:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

.nav__dropdown__link--active {
    color      : var(--primary, #0066ff);
    background : var(--white, #fff);
    font-weight: 600;
}

/* =============================================================================
   NAV__MEGA  – full-width mega panel
   ============================================================================= */
.nav__mega {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	width: 100%;
	z-index: 40;
	background: var(--bg-ultra-light, #f9fafb);
	border-radius: var(--nav-radius-lg);
	box-shadow: var(--nav-shadow);
	overflow: clip;
	animation: nav-fade-in 0.14s var(--nav-ease) both;
	border: 1px solid var(--neutral-light);
}

/* Close button (top-right corner of mega panel) */
.nav__mega__close {
    position     : absolute;
    top          : 1rem;
    right        : 1rem;
    z-index      : 50;
    width        : 2rem;
    height       : 2rem;
    display      : grid;
    place-items  : center;
    background   : var(--white, #fff);
    border       : 1px solid var(--neutral-light, #d1d5db);
    border-radius: var(--nav-radius-sm);
    color        : var(--text-muted, #6b7280);
    cursor       : pointer;
    transition   : color var(--nav-transition),
                   border-color var(--nav-transition);
}

.nav__mega__close:hover {
    color        : var(--text-dark, #111827);
    border-color : var(--neutral, #9ca3af);
}

.nav__mega__close:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

/* ── Layout: sidebar | content | promo ─────────────────────────────────── */
.nav__mega__layout {
    display              : grid;
    grid-template-columns: var(--nav-sidebar-w) 1fr var(--nav-promo-w);
    min-height           : 420px;
}

/* =============================================================================
   NAV__MEGA__SIDEBAR  – product-line tab list
   ============================================================================= */
.nav__mega__sidebar {
    display        : flex;
    flex-direction : column;
    gap            : 0.5rem;
    padding        : 1.5rem 1rem;
    background     : var(--bg-ultra-light, #f9fafb);
    border-right   : 1px solid var(--bg-light, #e5e7eb);
}

.nav__mega__sidebar-heading {
	margin: 0 0 0.25rem;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}

/* Tablist wrapper – no extra styles needed; gap is on sidebar */
.nav__mega__tabs {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

/* Individual tab button */
.nav__mega__tab {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0.45em 0.6em;
	text-align: left;
	font-size: var(--text-m, 0.9375rem);
	font-family: inherit;
	font-weight: 400;
	line-height: 1.4;
	color: var(--text-muted, #6b7280);
	background: transparent;
	border: 0;
	border-radius: var(--nav-radius-sm);
	cursor: pointer;
	transition: background var(--nav-transition), color var(--nav-transition);
	white-space: wrap;
}

.nav__mega__tab:hover {
    background: var(--white, #fff);
    color     : var(--text-dark, #111827);
}

.nav__mega__tab--active, .nav__mega__tab[aria-selected="true"] {
	background: var(--white, #fff);
	color: var(--primary, #0066ff);
	/* font-weight: 600; */
}

.nav__mega__tab:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

/* =============================================================================
   NAV__MEGA__CONTENT  – holds tab panels
   ============================================================================= */
.nav__mega__content {
	background: var(--white, #fff);
	padding: var(--space-xs);
	overflow-y: auto;
}

/* Tab panels */
.nav__mega__panel {
    display: none;
}

.nav__mega__panel--active, .nav__mega__panel:not([hidden]).nav__mega__panel--active {
	display: block;
	height: 100%;
}

/* =============================================================================
   NAV__MEGA__PROMO  – right-hand promotional column
   ============================================================================= */
.nav__mega__promo {
	background: var(--neutral-light-trans-30);
	border-left: 1px solid rgb(255 255 255 / 0.08);
	box-shadow: inset 10px 0px 10px -16px rgba(0, 0, 0, 0.5);
}

.nav__mega__promo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding: var(--space-xl) var(--space-xs) var(--space-m) var(--space-xs);
	/* overflow: hidden; */
	gap: var(--space-xs);
}

.nav__mega__promo-body {
    position      : relative;
    z-index       : 1;
    display       : flex;
    flex-direction: column;
    gap           : 0.75rem;
}

.nav__mega__promo-heading {
	margin: 0;
	color: var(--text-dark-muted);
	font-size: var(--text-l);
	font-weight: 700;
}

.nav__mega__promo-text {
	margin: 0;
	color: var(--text-dark-muted);
}

.nav__mega__promo-cta {
    align-self : flex-start;
}

/* =============================================================================
   NAV__CARD  – shared card styles
   Base element is an <a> tag.
   Modifiers: --horizontal  --square
   ============================================================================= */
.nav__card {
	display: flex;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s var(--nav-ease), box-shadow 0.2s var(--nav-ease);
}


.nav__card:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 3px;
}

/* ── Image wrap ────────────────────────────────────────────────────────────── */
.nav__card__image-wrap {
	flex: 0 0 auto;
	overflow: hidden;
	background: transparent;
}

.nav__card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.nav__card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-xs);
	flex: 1;
	justify-content: flex-start;
}


.nav__card__title {
	display: block;
	font-size: var(--text-l);
	font-weight: 600;
}

.nav__card__description {
	display: block;
	font-size: var(--text-s);
}

.nav__card__cta {
    display    : inline-flex;
    align-items: center;
    gap        : var(--space-xs);
    transition : gap 0.15s ease;
}

.nav__card:hover .nav__card__cta {
    gap: var(--space-xs);
}

/* =============================================================================
   NAV__CARD--HORIZONTAL  (1 card)
   Image left | body right
   ============================================================================= */
.nav__card--horizontal {
    flex-direction: row;
    min-height    : 160px;
}

.nav__card--horizontal .nav__card__image-wrap {
    width     : 260px;
    flex-shrink: 0;
}

.nav__card--horizontal .nav__card__image {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* =============================================================================
   NAV__CARD--SQUARE  (grid cards)
   Image top | body bottom
   ============================================================================= */
.nav__card--square {
    flex-direction: column;
}

.nav__card--square .nav__card__image-wrap {
    width : 100%;
    height: 140px;
}

.nav__card--square .nav__card__body {
    justify-content: flex-start;
}

/* =============================================================================
   NAV__CARDS-GRID  – responsive grid wrapper
   ============================================================================= */
.nav__cards-grid {
    display: grid;
    gap    : 1rem;
}

/* 2 columns (2 cards) */
.nav__cards-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns (3 cards) */
.nav__cards-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 cards = 2 cols × 2 rows (cols-2 + rows-2 modifier) */
.nav__cards-grid--rows-2 {
    /* grid-template-rows auto-creates 2 rows when we have 4 items in 2 cols */
}

/* =============================================================================
   NAV__LIST-PREVIEW  – 5+ cards layout
   Left: scrollable link list  |  Right: live preview card
   ============================================================================= */
.nav__list-preview {
	display: grid;
	grid-template-columns: var(--grid-2-3);
	gap: 0;
	min-height: 100%;
}

/* Link list */
.nav__list-preview__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border-right: 1px solid var(--bg-light, #e5e7eb);
	max-height: 100%;
	padding-right: var(--space-xs);
}

.nav__list-preview__link {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 0.5em 0.85em;
    text-decoration: none;
    border-radius  : var(--nav-radius-sm);
    transition     : background var(--nav-transition),
                     color var(--nav-transition);
    margin-inline  : 0.25rem;
}

.nav__list-preview__link:hover,
.nav__list-preview__link--active,
.nav__list-preview__link[aria-selected="true"] {
    background: var(--bg-ultra-light, #f9fafb);
}

.nav__list-preview__link:focus-visible {
    outline       : 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

.nav__list-preview__arrow {
    flex-shrink: 0;
    opacity    : 0;
    transition : opacity 0.15s ease;
}

.nav__list-preview__link:hover .nav__list-preview__arrow,
.nav__list-preview__link--active .nav__list-preview__arrow {
    opacity: 1;
}

/* Preview card – reuses .nav__card--square, extra positioning */
.nav__list-preview__card {
    margin         : 0.75rem;
    align-self     : start;
    /* Override height so it fills the available space nicely */
    height         : calc(100% - 1.5rem);
}

.nav__list-preview__card .nav__card__image-wrap {
	height: 140px;
}


/* =============================================================================
   NAV__CARD--HORIZONTAL-SM  (3–4 cards stacked layout)
   Same image-left pattern as --horizontal but with a smaller image column.
   Override these custom properties or the specific rules below in your theme
   to fine-tune proportions.
   ============================================================================= */
 
/* Stack wrapper – one card per row, consistent gap */
.nav__cards-stack {
    display       : flex;
    flex-direction: column;
    gap           : 0.625rem;
}
 
.nav__card--horizontal-sm {
    flex-direction: row;
    min-height    : 80px;
}
 
/* Smaller fixed image column – adjust width to taste */
.nav__card--horizontal-sm .nav__card__image-wrap {
    width      : 90px;
    flex-shrink: 0;
}
 
.nav__card--horizontal-sm .nav__card__image {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}
 
/* Tighten up the body text for the compact layout */
.nav__card--horizontal-sm .nav__card__body {
    padding   : 0.6rem 0.85rem;
    gap       : 0.2rem;
    justify-content: center;
}
 

.nav__card--horizontal-sm .nav__card__description {
    /* Clamp to 2 lines so stacked cards stay uniform height */
    display            : -webkit-box;
    -webkit-line-clamp : 2;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}
 
.nav__card--horizontal-sm .nav__card__cta {
    margin-top: 0.15rem;
}



.nav__card.nav__card--horizontal.nav__card--horizontal-sm {
	border-bottom: 1px solid var(--neutral-light-trans-70);
}

.nav__card.nav__card--horizontal.nav__card--horizontal-sm:last-child {
    border-bottom: none;
}

/* =============================================================================
   ANIMATION
   ============================================================================= */
@keyframes nav-fade-in {
    from {
        opacity  : 0;
        transform: translateY(-6px);
    }
    to {
        opacity  : 1;
        transform: translateY(0);
    }
}





/* Replace the previous family-overview CSS addition with this block.
   Keep the original mega-menu CSS above it. */

.nav__mega__family-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 1rem);
    min-width: 0;
    min-height: 100%;
}

.nav__mega__family-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs, 0.75rem) var(--space-s, 1rem);
    padding: var(--space-xs, 0.75rem);
    padding-top: 0;
    padding-bottom: var(--space-s, 1rem);
    border-bottom: 0;
}

.nav__mega__family-title {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-family: inherit;
    font-size: var(--text-l, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-dark, #111827);
    overflow-wrap: anywhere;
}

.nav__mega__heading-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    min-width: 0;
    max-width: 100%;
}

.nav__mega__products-heading {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-muted, #6b7280);
}

.nav__mega__help {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35em 0.6em;
    margin-top: auto;
    padding: var(--space-xs, 0.75rem);
    border-top: 1px solid var(--neutral-light, #d1d5db);
    font-size: var(--text-s, 0.875rem);
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

.nav__mega__help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--primary, #0066ff);
    text-decoration: none;
}

.nav__mega__help-link:hover {
    text-decoration: underline;
}

.nav__mega__help-link:focus-visible {
    outline: 2px solid var(--primary, #0066ff);
    outline-offset: 3px;
}

.nav__mega__help-link svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

.nav__mega__overview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    /* ACSS button classes supply colors, padding, typography and states. */
}

.nav__mega__overview-link svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

.nav__mega__family-products {
    min-width: 0;
}

/* Keep the standalone product's button beneath its description, content-sized. */
.nav__card--standalone .nav__mega__overview-link {
    align-self: flex-start;
}

/* The preview sits below the heading, rather than filling the entire panel. */
.nav__mega__family-products > .nav__list-preview {
    min-height: 0;
}







/* TECHNICAL TABLE START */





/* COMPLETE BRICKS TABLE STYLES — GRAPHITE. Replaces earlier table CSS. */
/* ===== EDIT TABLE COLOURS HERE =====
   Palette repeats after six groups; each table starts at group 1.
   Override these variables on an individual .table-container if needed. */
:root {
  --table-group-1: #30363d; /* Graphite */
  --table-group-2: #4b535d; /* Steel */
  --table-group-3: #646d76; /* Cool grey */
  --table-group-4: #3e454e; /* Charcoal */
  --table-group-5: #565e68; /* Slate */
  --table-group-6: #69727b; /* Silver grey */

  --table-heading-text: #ffffff; /* Top TWO header levels */
  --table-header-text: #263944;  /* Third / unit level */
  --table-unit-strength: 28%;   /* Higher = stronger colour; lower = lighter */
  --table-unit-mix: #ffffff;    /* Mix group colour with this colour */

  --table-model-bg: #171c22;
  --table-model-text: #ffffff;
  --table-title-bg: var(--primary);
  --table-title-text: #ffffff;
  --table-row-hover: #d2eaf4;
  --table-cell-hover: var(--accent, #ffe680);
  --table-data-lines: var(--neutral-light-trans-60, #dce3e7);
}
/* ===== END COLOUR SETTINGS ===== */
/* New table styling. Theme variables are supplied by the host website. */
.tables-widget table { border-collapse: collapse; text-align: left; width: 100%; table-layout: fixed; }
.tables-widget thead { color: var(--primary-dark); font-size: var(--text-xs); text-transform: uppercase; line-height: 1.4em; }
.table-container .tables-widget thead th { padding: .25em .4em; font-weight: 500; line-height: 1.2; border: 0; text-align: center; vertical-align: middle; border-top: none !important; }
.tables-widget thead tr.topheader th:first-child { position: relative; background: var(--table-model-bg); color: var(--table-model-text); text-align: left; padding: .25em .5em; }
.tables-widget thead tr.topheader th { background-color: var(--primary-light-trans-30); }
.tables-widget tbody tr { border-bottom: 1px solid var(--table-data-lines); }
.tables-widget tbody tr:nth-child(odd) { background-color: var(--color-surface); }
.tables-widget tbody tr:nth-child(2n) { background-color: var(--neutral-ultra-light); }
.table-container .tables-widget tbody td { padding: .14em .3em; line-height: 1.2; font-weight: 400; font-size: calc(var(--text-xs) / 1.05); text-align: center; border-right: 1px solid var(--table-data-lines); white-space: normal; overflow-wrap: anywhere; }
.tableheadcell, .table-container .tables-widget tbody td:first-child { font-weight: 500; text-align: left; background-color: inherit; }
.tables-widget tbody tr:nth-child(2n) td:first-child { background-color: var(--neutral-ultra-light); }
.tables-widget tbody td:empty::before { content: '—'; color: var(--color-text-muted); font-style: italic; }
.tables-widget tfoot { background-color: var(--primary-light-trans-30); font-size: var(--text-xs); }
.tables-widget tfoot td { padding: .65em 1em; color: var(--text-dark-muted); line-height: 1.4; background: var(--white); }
.table-footer { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--space-xs); background-color: transparent; }
.table-footer__fade { position: absolute; bottom: 100%; left: 0; right: 0; height: 5rem; width: 100%; background: linear-gradient(to top, white 20%, transparent 100%); pointer-events: none; transition: opacity var(--transition-table-base); }
.table-footer__fade--hidden { opacity: 0; }
.tablebuttonmore, .tablebuttonmore span { align-content: center; align-items: center; justify-content: center; display: flex; }
.table-footer__toggle-icon svg { transition: transform var(--transition-table-base); }
.table-footer__toggle-icon--rotated svg { transform: rotate(180deg); }
.row-hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.thatch { background-color: #fff; background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 20px), repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 20px); }


/* Generic palette: assigned automatically from each table's header spans. */
.tables-widget thead th[data-group-tone="1"] { --table-group-bg: var(--table-group-1, #30363d); }
.tables-widget thead th[data-group-tone="2"] { --table-group-bg: var(--table-group-2, #4b535d); }
.tables-widget thead th[data-group-tone="3"] { --table-group-bg: var(--table-group-3, #646d76); }
.tables-widget thead th[data-group-tone="4"] { --table-group-bg: var(--table-group-4, #3e454e); }
.tables-widget thead th[data-group-tone="5"] { --table-group-bg: var(--table-group-5, #565e68); }
.tables-widget thead th[data-group-tone="6"] { --table-group-bg: var(--table-group-6, #69727b); }
.tables-widget thead th[data-group-tone] { background: var(--table-group-bg) !important; color: var(--table-heading-text); }
/* Levels 1 and 2 share the group colour; only the unit level is lighter. */
@supports (background: color-mix(in srgb, white, black)) {
.tables-widget thead th[data-group-tone][data-header-level="2"] {
    background: color-mix(in srgb, var(--table-group-bg) var(--table-unit-strength), var(--table-unit-mix)) !important;
    color: var(--table-header-text, #263944);
  }
}
/* The outer element measures width; only the inner wrapper owns the desktop frame.
   Reset decorations explicitly so older Bricks container styles cannot leave a panel. */
.table-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  container: technical-table / inline-size;
}
/* An optional earlier transition for tables with many columns. */
.table-container[data-cards-at="1000"] { container-name: technical-table-wide; }
.table-container > .table-container__scroll-wrapper {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
@container technical-table (min-width: 800px) {
  .table-container > .table-container__scroll-wrapper {
    background: var(--white, #fff);
    border: 1px solid var(--neutral-light, #cdd8de);
    border-radius: var(--radius-xl, var(--radius, 16px));
    box-shadow: var(--shadow-md, none);
    overflow: hidden;
  }
}
@container technical-table-wide (min-width: 1000px) {
  .table-container > .table-container__scroll-wrapper {
    background: var(--white, #fff);
    border: 1px solid var(--neutral-light, #cdd8de);
    border-radius: var(--radius-xl, var(--radius, 16px));
    box-shadow: var(--shadow-md, none);
    overflow: hidden;
  }
}

.tables-widget table { border-radius: 0; clip-path: none; }
.tables-widget col.technical-model-col { width: calc(var(--table-model-width, 5.5rem) / var(--table-model-span, 1)); }
.tables-widget col.technical-model-col { width: calc(var(--table-model-width, var(--table-model-default-width, 5.5rem)) / var(--table-model-span, 1)); }
.tables-widget caption { padding: 1em; text-align: left; font-weight: 600; color: var(--primary-dark); background: var(--primary-light-trans-30); }

@container technical-table (max-width: 799.98px) {
  .table-container__scroll-wrapper { padding: 0; }
  .table-container__scroll-wrapper, .table-container__scroll-wrapper * { cursor: auto; }
  .table-container .tables-widget table { display: block; width: 100%; min-width: 0; }
  .table-container .tables-widget colgroup { display: none; }
  .table-container .tables-widget caption { display: block; margin-bottom: 1rem; }
  .table-container .tables-widget thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-container .tables-widget tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .table-container .tables-widget tbody > tr { display: block; margin: 0; min-width: 0; background: var(--white, #fff); border: 1px solid var(--neutral-dark-trans-20); border-radius: var(--radius, 10px); overflow: hidden; }
  .table-container .tables-widget tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: .3em .75em; border: 0; border-bottom: 1px solid var(--table-data-lines); text-align: right; white-space: normal; line-height: 1.4; }
  .table-container .tables-widget tbody > tr > td::before { content: attr(data-attribute); flex: 1; min-width: 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
  .table-container .tables-widget tbody > tr > td:first-child { position: static; z-index: auto; box-shadow: none; background: var(--primary-light-trans-30); color: var(--primary-dark); font-size: 1.125rem; font-weight: 600; }
  .table-container .tables-widget tbody > tr > td:first-child::before { font-size: calc(var(--text-xs) / 1.05); }
  .table-container .tables-widget tbody > tr > td:last-child { border-bottom: 0; }
  .table-container .tables-widget tfoot, .table-container .tables-widget tfoot tr, .table-container .tables-widget tfoot td { display: block; box-sizing: border-box; width: 100%; }
  .table-container .table-footer__fade { display: none; }
  .table-container .tables-widget tfoot, .table-container .tables-widget tfoot td, .table-container .table-footer { background: transparent; }
  .table-container .tables-widget tfoot td { padding: .65em 0; }
}
@container technical-table (max-width: 639.98px) { .table-container .tables-widget tbody { grid-template-columns: minmax(0, 1fr); } }

@container technical-table-wide (max-width: 999.98px) {
  .table-container__scroll-wrapper { padding: 0; }
  .table-container__scroll-wrapper, .table-container__scroll-wrapper * { cursor: auto; }
  .table-container .tables-widget table { display: block; width: 100%; min-width: 0; }
  .table-container .tables-widget colgroup { display: none; }
  .table-container .tables-widget caption { display: block; margin-bottom: 1rem; }
  .table-container .tables-widget thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-container .tables-widget tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .table-container .tables-widget tbody > tr { display: block; margin: 0; min-width: 0; background: var(--white, #fff); border: 1px solid var(--neutral-dark-trans-20); border-radius: var(--radius, 10px); overflow: hidden; }
  .table-container .tables-widget tbody > tr > td { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: .3em .75em; border: 0; border-bottom: 1px solid var(--table-data-lines); text-align: right; white-space: normal; line-height: 1.4; }
  .table-container .tables-widget tbody > tr > td::before { content: attr(data-attribute); flex: 1; min-width: 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
  .table-container .tables-widget tbody > tr > td:first-child { position: static; z-index: auto; box-shadow: none; background: var(--primary-light-trans-30); color: var(--primary-dark); font-size: 1.125rem; font-weight: 600; }
  .table-container .tables-widget tbody > tr > td:first-child::before { font-size: calc(var(--text-xs) / 1.05); }
  .table-container .tables-widget tbody > tr > td:last-child { border-bottom: 0; }
  .table-container .tables-widget tfoot, .table-container .tables-widget tfoot tr, .table-container .tables-widget tfoot td { display: block; box-sizing: border-box; width: 100%; }
  .table-container .table-footer__fade { display: none; }
  .table-container .tables-widget tfoot, .table-container .tables-widget tfoot td, .table-container .table-footer { background: transparent; }
  .table-container .tables-widget tfoot td { padding: .65em 0; }
}
@container technical-table-wide (max-width: 639.98px) { .table-container .tables-widget tbody { grid-template-columns: minmax(0, 1fr); } }

@media (hover: hover) and (pointer: fine) {
  @container technical-table (min-width: 800px) { .table-container .tables-widget tbody > tr:hover > td { background-color: var(--table-row-hover, #d2eaf4); } }
  @container technical-table-wide (min-width: 1000px) { .table-container .tables-widget tbody > tr:hover > td { background-color: var(--table-row-hover, #d2eaf4); } }
  .table-container .tables-widget tbody > tr > td:hover { background-color: var(--table-cell-hover, var(--accent, #ffe680)); }
}







/* Separate major header groups without drawing a grid around every unit. */
.tables-widget thead th[data-group-start] {
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 20%);
}


/* Explicit weights avoid heavy global th/strong defaults on the live site. */
.table-container .tables-widget thead th[data-header-level="0"] { font-weight: 600; }
.table-container .tables-widget thead th strong { font-weight: inherit; }




/* Show More clips by actual rendered height, including card layouts.
   A mask fades to the page background instead of adding a white panel. */
.table-container > .table-container__scroll-wrapper.is-height-collapsed {
  max-height: var(--table-collapse-limit, 400px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 max(0px, calc(100% - var(--table-fade-height, 80px))), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 max(0px, calc(100% - var(--table-fade-height, 80px))), transparent 100%);
}
.table-container .table-footer__fade { display: none; }
.table-container .table-footer[hidden],
.table-container .tablebuttonmore[hidden] { display: none !important; }

/* Empty ACF table wrappers are hidden by the setup script. */
.table-container[hidden] { display: none !important; }


/* Show More / Show Less: JS provides measured heights for both states. */
.table-container > .table-container__scroll-wrapper.has-height-toggle {
  overflow: hidden;
  transition: max-height var(--table-expand-duration, 360ms) var(--table-expand-easing, ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .table-container > .table-container__scroll-wrapper.has-height-toggle {
    transition: none;
  }
}

/* Alternate label/value rows inside cards; preserve the Model header. */
@container technical-table (max-width: 799.98px) {
  .table-container .tables-widget tbody > tr > td:nth-child(even) {
    background-color: var(--table-card-row-white, var(--white, #fff));
  }
  .table-container .tables-widget tbody > tr > td:nth-child(odd):not(:first-child) {
    background-color: var(--table-card-row-alt, var(--neutral-ultra-light, #f3f5f6));
  }
}
@container technical-table-wide (max-width: 999.98px) {
  .table-container .tables-widget tbody > tr > td:nth-child(even) {
    background-color: var(--table-card-row-white, var(--white, #fff));
  }
  .table-container .tables-widget tbody > tr > td:nth-child(odd):not(:first-child) {
    background-color: var(--table-card-row-alt, var(--neutral-ultra-light, #f3f5f6));
  }
}
/* Stronger selector keeps pointer hover above the card stripe colours. */
@media (hover: hover) and (pointer: fine) {
  .table-container .tables-widget tbody > tr > td:nth-child(n):hover {
    background-color: var(--table-cell-hover, var(--accent, #ffe680));
  }
}

/* Full-width table titles, including legacy thead > tr > td markup.
   JS moves legacy title rows to captions so they remain visible with cards. */
.table-container .tables-widget caption, .table-container .tables-widget thead td.aichighlightcell {
	caption-side: top;
	padding: .2em 1em;
	background: var(--table-title-bg, var(--table-model-bg, #171c22));
	color: var(--table-title-text, #fff);
	font-size: var(--text-xs, 14px);
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

@container technical-table (max-width: 799.98px) {
  .table-container .tables-widget caption { border-radius: var(--radius, 10px); }
}
@container technical-table-wide (max-width: 999.98px) {
  .table-container .tables-widget caption { border-radius: var(--radius, 10px); }
}

/* Three-column Type/Standard/Optional tables need a wider first column.
   This is 25% total even when Type spans four logical columns. */
.tables-widget col.technical-type-col {
  width: calc(var(--table-type-width, 25%) / var(--table-model-span, 1));
}






/* TECHNICAL TABLE END */




.thatch {
  background-color: #ffffff;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,0,0,0.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 20px);
}

















/***DRAWER CSS***/

.c-drawer__wrapper {
/* --- Component API (Edit these!) --- */
  --drawer-duration: 0.5s;
  --drawer-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --drawer-bg: #ffffff;
  --drawer-overlay-color: rgba(0, 0, 0, 0.4);
  --drawer-inset: 8px; /* Set to 0px if you want it flush with the screen */
  --drawer-max-width: 400px;
  --drawer-radius: 16px;
  --drawer-body-padding: 1.5rem;
  /* ----------------------------------- */
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;

  &.c-drawer__wrapper--visible {
    pointer-events: auto;
    visibility: visible;
  }

  /* Passive mode */
  &[data-passive='true'] .c-drawer__overlay {
    display: none;
  }

  &[data-passive='true'].c-drawer__wrapper--visible {
    pointer-events: none;
    visibility: visible;
  }

  &[data-passive='true'] .c-drawer {
    pointer-events: auto;
  }

  /* Editor mode — driven by data-editor-toggle, not the --visible class.
  The builder can strip classes during re-renders, but it preserves
  data attributes since it manages them. */
  &[data-editor-toggle='true'] {
    pointer-events: none;
    visibility: visible;
  }

  &[data-editor-toggle='true'] .c-drawer__overlay {
    pointer-events: none;
    opacity: 1;
  }

  &[data-editor-toggle='true'] .c-drawer {
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
}

.c-drawer__overlay {
  position: fixed;
  inset: 0;
  background: var(--drawer-overlay-color, rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: opacity  var(--drawer-duration) var(--drawer-easing);

  &[data-state='open'] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none !important;
  }
}

.c-drawer {
  /* Defaults — single source of truth for fallback values */
  --default-radius: var(--radius-l);
  --default-max-height: 92dvh;
  --default-inset: 8px;
  --default-max-width: 24rem;
  --default-body-padding: var(--space-l);

  position: fixed;
  background: var(--drawer-bg, #fff);
  outline: none;
  overflow: visible;
  touch-action: none;
  will-change: transform;
  transition: transform var(--drawer-duration) var(--drawer-easing);
  display: flex;
  flex-direction: column;

  /* No-drag mode: re-enable native touch panning, hide the (now meaningless) handle */
  .c-drawer__wrapper[data-no-drag='true'] & {
    touch-action: auto;

    & .c-drawer__handle {
      display: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    user-select: none;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none !important;
  }

  /* Over-drag background fill — vertical directions only */
  &:is([data-direction='bottom'], [data-direction='top'])::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    background: inherit;
    background-color: inherit;
  }

  /* Direction variants */
  &[data-direction='bottom'] {
    --inset: var(--drawer-inset, var(--default-inset));
    bottom: 0;
    left: var(--inset);
    right: var(--inset);
    max-height: var(--drawer-max-height, var(--default-max-height));
    max-width: var(--drawer-max-width);
    margin-inline: auto;
    border-radius: var(--drawer-radius, var(--default-radius)) var(--drawer-radius, var(--default-radius)) 0 0;
    transform: translate3d(0, 100%, 0);

    &[data-state='open'] {
      transform: translate3d(0, 0, 0);
    }

    &::after {
      top: 100%;
    }
  }
  
  
  
  

&[data-direction='top'] {
  --inset: var(--drawer-inset, var(--default-inset));

  /* Accounts for the WordPress admin bar if you are logged in */
    top: calc(var(--inset) + var(--wp-admin--admin-bar--height, 0px));
    left: var(--inset);
    right: var(--inset);


  max-height: var(--drawer-max-height, var(--default-max-height));
  max-width: var(--drawer-max-width);
  border-radius: 0 0 var(--drawer-radius, var(--default-radius)) var(--drawer-radius, var(--default-radius));
  transform: translate3d(0, -100%, 0);
  width: calc(100% - (var(--inset) * 2));

  &[data-state='open'] {
    transform: translate3d(0, 0, 0);
  }

  &::after {
    bottom: 100%;
  }
}


  &[data-direction='left'] {
    --inset: var(--drawer-inset, var(--default-inset));
    top: calc(var(--inset) + var(--wp-admin--admin-bar--height, 0px));
    left: var(--inset);
    right: var(--inset);
    bottom: var(--inset);
    max-width: var(--drawer-max-width, var(--default-max-width));
    border-radius: var(--drawer-radius, var(--default-radius));
    transform: translate3d(calc(-100% - var(--inset)), 0, 0);

    &[data-state='open'] {
      transform: translate3d(0, 0, 0);
    }
  }


  
  
  &[data-direction='right'] {
    --inset: var(--drawer-inset, var(--default-inset));
    top: calc(var(--inset) + var(--wp-admin--admin-bar--height, 0px));
    right:  var(--inset);
    left: var(--inset);
    bottom: var(--inset);
    max-width: var(--drawer-max-width, var(--default-max-width));
    border-radius: var(--drawer-radius, var(--default-radius));
    transform: translate3d(calc(100% + var(--inset)), 0, 0);
    margin-left: auto;
    width: calc(100% - (var(--inset) * 2));

    &[data-state='open'] {
      transform: translate3d(0, 0, 0);
    }

    /* --- NEW: Hug content on tablet/desktop --- */
    @media (min-width: 768px) {
      bottom: auto; /* Releases the stretch-to-bottom behavior */
      /* Prevents the drawer from growing off-screen if content is huge */
      max-height: calc(100dvh - (var(--inset) * 2) - var(--wp-admin--admin-bar--height, 0px));
    }
  }
  
  

  &.c-drawer--dragging,
  &.c-drawer--dragging * {
    cursor: grabbing !important;
  }
}

.c-drawer__handle-wrapper {
  position: relative;
  padding: var(--drawer-handle-padding, 1.25rem 0 1rem);
  display: flex;
  justify-content: center;
  margin: 0 auto;

  /* Only show grab cursor if data-no-drag is true */
  .c-drawer__wrapper[data-no-drag='false'] & {
    cursor: grab;
  }

  /* Hide the handle wrapper if data node drag is true or its direction left or right */
  .c-drawer__wrapper[data-no-drag='true'] &,
  .c-drawer:is([data-direction='left'], [data-direction='right']) & {
    display: none;
  }

  &:hover .c-drawer__handle {
    opacity: 1;
    width: calc(var(--handle-width) * 1.4);
  }

  & .c-drawer__handle {
    --handle-width: var(--drawer-handle-width, 48px);
    --handle-height: var(--drawer-handle-height, 4px);
    --handle-color: var(--drawer-handle-color, #b4b4b8);
    display: block;
    position: relative;
    opacity: 0.7;
    background: var(--handle-color);
    margin-left: auto;
    margin-right: auto;
    height: var(--handle-height);
    min-height: 0px;
    width: var(--handle-width);
    border-radius: 1rem;
    touch-action: none;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s;

    &:active {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none !important;
    }
  }
}

.c-drawer__body {
  padding: var(--drawer-body-padding, var(--default-body-padding));
  overflow-y: auto;
  flex-grow: 1;

  .c-drawer[data-direction='top'] & {
    padding: var(--drawer-body-padding, var(--default-body-padding) var(--default-body-padding) 0);
  }

  .c-drawer:is([data-direction='left'], [data-direction='right']) &,
  .c-drawer__wrapper[data-no-drag='true'] & {
    padding: var(--drawer-body-padding, var(--default-body-padding));
  }

  .c-drawer[data-direction='top'] & {
    order: -1;
  }
}



@media (max-width: 767px) {
  .c-drawer.drawer-moby:is(
    [data-direction='left'],
    [data-direction='right']
  ) {
    bottom: auto;
    height: auto;
    max-height: calc(
      100dvh - (var(--inset) * 2) -
      var(--wp-admin--admin-bar--height, 0px)
    );
  }

  .c-drawer.drawer-moby .c-drawer__body {
    min-height: 0;
    overflow-y: auto;
  }
}





/* Direction: top */
  .c-drawer[data-direction='top'] {
    --inset: var(--drawer-inset, 8px);
    top: var(--inset);
    left: var(--inset);
    right: var(--inset);
    max-height: var(--drawer-max-height, 92dvh);
    max-width: 600px;
    margin-inline: auto;
    
    /* Rounds only the bottom corners */
    border-radius: 0 0 var(--drawer-radius, 1.25rem) var(--drawer-radius, 1.25rem);
    
    /* Pushes it completely off-screen upward to start */
    transform: translate3d(0, calc(-100% - var(--inset)), 0);
  }
  
  .c-drawer[data-direction='top']::after { 
    bottom: 100%; 
  }
  
  .c-drawer[data-direction='top'][data-state='open'] {
    transform: translate3d(0, 0, 0);
  }
  
  
  .c-drawer__handle-wrapper,
.c-drawer__handle,
[data-drawer-handle] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.c-drawer__handle-wrapper:active,
.c-drawer__handle:active,
[data-drawer-handle]:active {
  cursor: grabbing;
}
  
  
  
  
.seopress-user-consent button {
	padding: 2px 12px !important;
	border-radius: var(--radius)  !important;
	font-size: var(--text-xs)  !important;
	font-weight: 400  !important;
}

.seopress-user-consent p {
	font-size: var(--text-xs)  !important;
}

.seopress-edit-choice {
	display: none !important;
}


.c-drawer__body .wpml-ls-legacy-dropdown-click a {
	background: var(--neutral-light-trans-40);
	border: 1px solid var(--neutral-light-trans-60);
}

:is([data-icon-list], .icon-list) :where(svg, i).brxe-icon {
	font-size: inherit !important;
}