/* Generated by tools/build-public-style-bundles.cjs. Do not hand edit. */
/* Source: al-design-system/assets/css/product-surfaces.css */
/**
 * Modern Natural product surface contract. Visual skin only.
 * Extends the existing al-card vocabulary without loading the lab's layout,
 * typography, glass or global token defaults. Legacy consumers remain opt-in.
 * Product owners retain all spacing, dimensions, media ratios and behavior.
 */
:root {
  --al-surface-page: #f4f6f7;
  --al-surface-card: #ffffff;
  --al-surface-subtle: #f4f6f7;
  --al-surface-information: #edf1f2;
  --al-surface-warning: #fff7e8;
  --al-surface-elevated: #ffffff;
  --al-surface-selected: #edf6f0;
  --al-surface-premium: #183f2d;
  /* Explicit exceptions: premium and achievement states only. Restored from
     the achievement owner's original warm/cool palette; ordinary cards stay flat. */
  --al-surface-premium-gradient: linear-gradient(120deg, #102e22 0%, #183f2d 55%, #2c6b4a 100%);
  --al-surface-achievement-complete: radial-gradient(circle at top right, color-mix(in srgb, #d97706 10%, transparent), transparent 42%), linear-gradient(180deg, #ffffff, color-mix(in srgb, #d97706 12%, #ffffff));
  --al-surface-achievement-progress: radial-gradient(circle at top right, color-mix(in srgb, #5ca892 11%, transparent), transparent 42%), linear-gradient(180deg, #ffffff, color-mix(in srgb, #5ca892 13%, #ffffff));
  --al-surface-ink: #14231c;
  --al-surface-ink-muted: #52645b;
  --al-surface-inverse: #ffffff;
  --al-surface-border: #dee5e2;
  --al-surface-border-defined: #c4cfc9;
  --al-surface-border-empty: #7d8e84;
  --al-surface-border-warning: #a8772b;
  --al-surface-border-hover: #416a78;
  --al-surface-border-selected: #2c6b4a;
  --al-surface-shadow-none: none;
  --al-surface-shadow-floating: 0 4px 12px rgb(20 35 28 / 6%);
  --al-surface-radius-compact: 6px;
  --al-surface-radius-card: 8px;
  --al-surface-radius-panel: 10px;
}

/* Explicit adoption; never restyle legacy .al-card consumers implicitly. */
.al-card.al-card--natural {
  --al-card-bg: var(--al-surface-card);
  --al-card-border: var(--al-surface-border);
  --al-card-radius: var(--al-surface-radius-card);
  background: var(--al-card-bg);
  color: var(--al-surface-ink);
  border: 1px solid var(--al-card-border);
  border-radius: var(--al-card-radius);
  box-shadow: var(--al-surface-shadow-none);
}
.al-card--natural.al-card--compact { --al-card-radius: var(--al-surface-radius-compact); }
.al-card--natural.al-card--application { --al-card-radius: var(--al-surface-radius-panel); }
.al-card--natural.al-card--subtle { --al-card-bg: var(--al-surface-subtle); }
.al-card--natural.al-card--information {
  --al-card-bg: var(--al-surface-information);
  --al-card-border: var(--al-surface-border-defined);
}
.al-card--natural.al-card--warning {
  --al-card-bg: var(--al-surface-warning);
  --al-card-border: var(--al-surface-border-warning);
}
.al-card--natural.al-card--defined { --al-card-border: var(--al-surface-border-defined); }
.al-card--natural.al-card--selected {
  --al-card-bg: var(--al-surface-selected);
  --al-card-border: var(--al-surface-border-selected);
}
.al-card--natural.al-card--premium {
  --al-card-bg: var(--al-surface-premium-gradient);
  --al-card-border: var(--al-surface-premium);
  color: var(--al-surface-inverse);
}
.al-card--natural.al-card--floating {
  --al-card-bg: var(--al-surface-elevated);
  box-shadow: var(--al-surface-shadow-floating);
}
/* Image-led and empty are semantic composition roles; no mandated crop/size. */
.al-card--natural.al-card--empty {
  --al-card-border: var(--al-surface-border-empty);
  border-style: dashed;
}
.al-card--natural.al-card--disabled { --al-card-bg: var(--al-surface-subtle); }
.al-card--natural.al-card--interactive:not(.al-card--disabled):not([aria-disabled="true"]):hover {
  border-color: var(--al-surface-border-hover);
}
.al-card--natural.al-card--interactive:focus-visible,
.al-card--natural.al-card--interactive:has(:focus-visible) {
  outline: 2px solid var(--al-surface-border-hover);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .al-card--natural.al-card--selected { border-color: Highlight; }
}

/* Explicit full-card interaction. The component supplies the real link or
   button and its behavior. Independent controls remain sibling actions.
   A direct-child primary avoids clipped pseudo-links inside media/headings. */
.al-card--destination { position: relative; isolation: isolate; }
.al-card--destination > .al-card__primary {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
}
.al-card--destination > .al-card__primary:focus-visible { outline: none; }
.al-card--destination:has(> .al-card__primary:hover),
.al-card--destination:has(> .al-card__primary:active) {
  border-color: var(--al-surface-border-hover);
}
.al-card--destination:has(> .al-card__primary:focus-visible) {
  outline: 2px solid var(--al-surface-border-hover);
  outline-offset: 3px;
}
/* The owner may keep absolute positioning (e.g. photo-overlay bookmarks).
   Mark only the independent control, never the entire content region. */
.al-card--destination .al-card__action { position: relative; z-index: 4; }
.al-card--destination .al-card__action--overlay { position: absolute; }
.al-card--destination[aria-disabled="true"] > .al-card__primary { pointer-events: none; cursor: default; }
@media (forced-colors: active) {
  .al-card--destination:has(> .al-card__primary:focus-visible) { outline-color: Highlight; }
}


/* Source: al-design-system/assets/css/product-forms.css */
/* Shared database hero toolbar geometry, consumed by the existing module owners.
 * Desktop defaults stay local. Mobile uses the same search/action contract.
 * No native control, filter state or dialog behavior is changed. */
@media (max-width: 767px) {
  :where(.pl-entry-toolbar, .algae-entry-toolbar) {
    --al-entry-toolbar-columns: minmax(0, 1fr) auto;
    --al-entry-toolbar-gap: 8px;
    --al-entry-toolbar-padding: 8px;
    --al-entry-action-column: auto;
    --al-entry-button-height: auto;
    --al-entry-button-padding: 10px 12px;
    --al-entry-button-padding-x: 12px;
    --al-entry-button-font-size: 13px;
    --al-entry-button-line-height: 1.3;
    --al-entry-button-gap: 8px;
    --al-entry-button-white-space: normal;
    --al-entry-button-icon: 18px;
    --al-entry-filter-min-width: 92px;
    --al-entry-search-padding: 0 10px 0 32px;
    --al-entry-search-icon-size: 16px;
    --al-entry-search-icon-left: .65rem;
  }
}
@media (max-width: 400px) {
  :where(.pl-entry-toolbar, .algae-entry-toolbar) {
    --al-entry-toolbar-columns: minmax(0, 1fr);
    --al-entry-action-column: 1;
    --al-entry-filter-width: 100%;
  }
}

/* Modern Natural — explicit, geometry-neutral production control skin.
 * Owners retain dimensions, padding, type, icons, native appearance and behavior.
 * The named important layer is deliberately limited to visual properties: legacy
 * member/lesson/plant owners use unlayered !important declarations. A layer avoids
 * duplicating their selectors or escalating specificity in every consumer.
 * Never opt a composite widget in merely because it contains an input.
 */
@layer al-product-forms {
  :root {
    --al-form-background: var(--al-surface-card);
    /* Controls need a stronger boundary than a decorative card border (AA 3:1). */
    --al-form-border: var(--al-surface-border-empty);
    --al-form-border-hover: var(--al-surface-border-hover);
    --al-form-text: var(--al-surface-ink);
    --al-form-placeholder: var(--al-surface-ink-muted);
    --al-form-disabled-background: var(--al-surface-subtle);
    --al-form-disabled-text: var(--al-surface-ink-muted);
    --al-form-readonly-background: var(--al-surface-subtle);
    --al-form-error: var(--al-button-danger, #963939);
    --al-form-success: var(--al-surface-border-selected);
    --al-form-focus: var(--al-surface-border-hover);
    --al-form-accent: var(--al-surface-border-selected);
    --al-form-radius: var(--al-surface-radius-compact);
    --al-form-transition: none;
  }

  :where(.al-form-control, .al-form-surface) {
    background-color: var(--al-form-background) !important;
    border-color: var(--al-form-border) !important;
    border-style: solid !important;
    border-radius: var(--al-form-radius) !important;
    color: var(--al-form-text) !important;
    box-shadow: none !important;
    transition: var(--al-form-transition) !important;
  }
  /* Do not erase native/module select arrows or attached unit geometry. */
  :where(input.al-form-control, textarea.al-form-control, .al-form-surface) {
    background-image: none !important;
  }
  :where(.al-form-control)::placeholder {
    color: var(--al-form-placeholder) !important;
    opacity: 1 !important;
  }
  :where(.al-form-control:hover:not(:disabled):not([aria-disabled="true"]), .al-form-surface:hover) {
    border-color: var(--al-form-border-hover) !important;
  }
  :where(.al-form-control:focus, .al-form-surface:has(> .al-form-control:focus)) {
    border-color: var(--al-form-focus) !important;
    outline: 2px solid var(--al-form-focus) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  :where(.al-form-control[readonly]) {
    background-color: var(--al-form-readonly-background) !important;
  }
  :where(.al-form-control:disabled, .al-form-control[aria-disabled="true"]) {
    background-color: var(--al-form-disabled-background) !important;
    border-color: var(--al-form-border) !important;
    color: var(--al-form-disabled-text) !important;
    opacity: 1 !important;
  }
  /* Existing explicit validation only; never mark untouched required fields red. */
  :where(.al-form-control[aria-invalid="true"], .al-form-control[aria-invalid=""], .al-form-control.is-invalid) {
    border-color: var(--al-form-error) !important;
  }
  :where(.al-form-control.is-valid) {
    border-color: var(--al-form-success) !important;
  }
  /* Compound search owns its border; keep its input and submit control separate. */
  :where(.al-form-control--embedded) {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
  }
  :where(.al-form-choice) {
    accent-color: var(--al-form-accent) !important;
  }
  :where(.al-form-choice):focus-visible {
    outline: 2px solid var(--al-form-focus) !important;
    outline-offset: 2px !important;
  }
  /* State styling is opt-in; no live-region, validation or disabling behavior. */
  :where(.al-form-message--error) { color: var(--al-form-error); }
  :where(.al-form-message--success) { color: var(--al-form-success); }
  @media (prefers-reduced-motion: reduce) {
    :where(.al-form-control, .al-form-surface, .al-form-choice) { transition: none !important; }
  }
  @media (forced-colors: active) {
    :where(.al-form-control, .al-form-surface) {
      border-color: ButtonText !important;
      background-color: Canvas !important;
      color: CanvasText !important;
    }
    :where(.al-form-control):focus,
    :where(.al-form-choice):focus-visible,
    :where(.al-form-surface):has(> .al-form-control:focus) { outline-color: Highlight !important; }
    :where(.al-form-control:disabled) { color: GrayText !important; border-color: GrayText !important; }
    :where(.al-form-control--embedded) { border-color: transparent !important; }
  }
}


/* Source: al-design-system/assets/css/product-navigation.css */
/* Modern Natural local navigation. Visual contract only: module owners retain
 * layout, scrolling, semantics, selection controllers and keyboard behavior.
 * Existing components adopt these tokens in their authoritative winning rules.
 * New simple components may opt into the classes below (never global nav/a/button).
 */
:root {
  --al-nav-surface: var(--al-surface-card);
  --al-nav-group: var(--al-surface-subtle);
  --al-nav-border: var(--al-surface-border);
  --al-nav-text: var(--al-surface-ink-muted);
  --al-nav-hover-text: var(--al-surface-ink);
  --al-nav-selected: var(--al-surface-border-selected);
  --al-nav-selected-surface: var(--al-surface-selected);
  --al-nav-focus: var(--al-surface-border-hover);
  --al-nav-radius: var(--al-surface-radius-compact);
  --al-nav-shadow: var(--al-surface-shadow-none);
  --al-nav-marker: inset 0 -2px 0 var(--al-nav-selected);
  --al-nav-link-gap: .5rem;
  --al-nav-support-size: .875rem;
  --al-nav-support-leading: 1.4;
  /* Phase 4B: selection/filter chips, never status or care badges. */
  --al-chip-surface: var(--al-surface-card);
  --al-chip-border: var(--al-surface-border);
  --al-chip-ink: var(--al-surface-ink-muted);
  --al-chip-selected-surface: var(--al-surface-selected);
  --al-chip-selected-border: var(--al-surface-border-selected);
  --al-chip-selected-ink: var(--al-surface-premium);
  --al-chip-focus: var(--al-surface-border-hover);
  --al-chip-radius: var(--al-surface-radius-compact);
  --al-chip-gap: .375rem;
  --al-chip-padding: .375rem .625rem;
  --al-chip-font-size: .8125rem;
  --al-chip-line-height: 1.35;
}

.al-navigation-tabs { border-bottom:1px solid var(--al-nav-border); }
/* Phase 4C: visual navigation semantics, never destinations or menu behavior. */
.al-breadcrumbs { color:var(--al-nav-text); gap:var(--al-nav-link-gap); font-size:var(--al-nav-support-size); line-height:var(--al-nav-support-leading); }
.al-breadcrumbs a { color:var(--al-nav-selected); text-underline-offset:.18em; }
.al-breadcrumbs [aria-current="page"] { color:var(--al-nav-hover-text); }
.al-navigation-link:hover { color:var(--al-nav-selected); }
.al-navigation-link:focus-visible,
.al-breadcrumbs a:focus-visible { outline:2px solid var(--al-nav-focus); outline-offset:2px; }
.al-navigation-segments { background:var(--al-nav-group); border:1px solid var(--al-nav-border); border-radius:var(--al-nav-radius); }
:where(.al-navigation-tab,.al-navigation-segment) {
  background:transparent; color:var(--al-nav-text); box-shadow:var(--al-nav-shadow);
}
.al-navigation-tab { border-radius:0; }
.al-navigation-segment { border-radius:var(--al-nav-radius); }
/* Opt-in vocabulary for new consumers. Existing filters bind these tokens at
 * their authoritative local rules, preserving native inputs and controllers. */
.al-filter-chip {
  display:inline-flex; align-items:center; gap:var(--al-chip-gap);
  max-width:100%; padding:var(--al-chip-padding);
  border:1px solid var(--al-chip-border); border-radius:var(--al-chip-radius);
  background:var(--al-chip-surface); color:var(--al-chip-ink);
  font-size:var(--al-chip-font-size); line-height:var(--al-chip-line-height);
  white-space:normal; overflow-wrap:anywhere; box-shadow:none;
}
.al-filter-chip:is([aria-pressed="true"],.is-selected,.al-filter-chip--removable) {
  background:var(--al-chip-selected-surface); border-color:var(--al-chip-selected-border); color:var(--al-chip-selected-ink);
}
.al-filter-chip:hover:not(:disabled):not([aria-disabled="true"]) { border-color:var(--al-chip-focus); }
.al-filter-chip:focus-visible { outline:2px solid var(--al-chip-focus); outline-offset:2px; }
.al-filter-chip:is(:disabled,[aria-disabled="true"]) { background:var(--al-nav-group); color:var(--al-nav-text); cursor:not-allowed; }
:where(.al-navigation-tab,.al-navigation-segment):hover:not(:disabled):not([aria-disabled="true"]) { color:var(--al-nav-hover-text); }
.al-navigation-tab:is([aria-selected="true"],[aria-current="page"]) { color:var(--al-nav-selected); box-shadow:var(--al-nav-marker); }
.al-navigation-segment:is([aria-pressed="true"],[aria-selected="true"],[aria-current="page"]) { color:var(--al-nav-selected); background:var(--al-nav-selected-surface); }
:where(.al-navigation-tab,.al-navigation-segment):focus-visible { outline:2px solid var(--al-nav-focus); outline-offset:2px; }
:where(.al-navigation-tab,.al-navigation-segment):is(:disabled,[aria-disabled="true"]) { color:var(--al-nav-text); background:var(--al-nav-group); cursor:not-allowed; }
@media (forced-colors:active) {
  :where(.al-navigation-tab,.al-navigation-segment):is([aria-selected="true"],[aria-current="page"],[aria-pressed="true"]) { outline:2px solid Highlight; outline-offset:-2px; }
}


/* Source: al-design-system/assets/css/product-typography.css */
/* Modern Natural — production type and rhythm.
 * Tokens and explicit opt-ins only. No element reset, font download, card/grid
 * layout or workspace inheritance. Module owners choose the semantic role.
 * The separate 80-typography.css remains a lab-only composition reference.
 */
:root {
  --al-type-font-family: var(--al-font-family-sans, "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --al-type-page: clamp(1.875rem, 3.5vw, 3rem);
  --al-type-display: clamp(1.875rem, 4vw, 3.5rem);
  --al-type-member-title: clamp(1.75rem, 3.2vw, 2.125rem);
  --al-type-compact-title: 1.875rem;
  --al-type-section: 1.5rem;
  --al-type-panel: 1.125rem;
  --al-type-card: 1.125rem;
  --al-type-card-compact: 1rem;
  --al-type-lesson-card: var(--al-type-card);
  --al-type-body: 1rem;
  --al-type-support: .875rem;
  --al-type-meta: .8125rem;
  --al-type-caption: .75rem;
  --al-type-label: var(--al-type-support);
  /* Editorial reading is a separate role, not an oversized application panel. */
  --al-type-reading: 1.0625rem;
  --al-type-editorial-section: clamp(1.5rem, 2.5vw, 2rem);
  --al-type-reading-section: var(--al-type-editorial-section);
  --al-type-reading-subsection: clamp(1.25rem, 2vw, 1.5rem);
  --al-leading-reading: 1.7;
  /* Same database roles; widths, media and grid geometry stay module-owned. */
  --al-type-database-hero: clamp(1.875rem, 3.6vw, 3.25rem);
  --al-type-database-description: var(--al-type-body);
  --al-leading-database-description: var(--al-leading-body);
  --al-type-database-card: var(--al-type-card-compact);
  --al-type-database-scientific: var(--al-type-meta);
  --al-weight-title: 700;
  --al-weight-heading: 600;
  --al-weight-card: var(--al-weight-heading);
  --al-weight-label: 600;
  --al-weight-body: 400;
  --al-tracking-title: -.02em;
  --al-tracking-heading: -.01em;
  --al-tracking-body: 0;
  --al-tracking-kicker: .06em;
  --al-leading-title: 1.15;
  --al-leading-heading: 1.35;
  --al-leading-body: 1.55;
  --al-leading-support: 1.45;
  --al-rhythm-xs: var(--al-space-4, 4px);
  --al-rhythm-sm: var(--al-space-8, 8px);
  --al-rhythm-md: var(--al-space-12, 12px);
  --al-rhythm-lg: var(--al-space-16, 16px);
  --al-rhythm-xl: var(--al-space-24, 24px);
  --al-rhythm-section: var(--al-space-32, 32px);
  --al-rhythm-panel: var(--al-space-20, 20px);
  --al-rhythm-card: var(--al-space-16, 16px);
  --al-rhythm-form: var(--al-space-16, 16px);
  --al-mobile-page-gutter: 16px;
}
@media (max-width: 359px) {
  :root { --al-mobile-page-gutter: 12px; }
}
/* Audited directory shells own one gutter. Card/hero padding is unchanged.
 * Content opt-ins exclude Planner, aquarium detail and Studio. */
@media (max-width: 767px) {
  :root {
    --al-type-section: 1.25rem;
    --al-type-database-description: var(--al-type-support);
    --al-leading-database-description: var(--al-leading-support);
    --al-type-database-card: var(--al-type-support);
    --al-type-database-scientific: var(--al-type-caption);
  }
  #content .elementor .e-parent:has(.al-toolsHub, #alLessonsLibrary) {
    padding-inline: var(--al-mobile-page-gutter);
  }
  .al-toolsHub, #alLessonsLibrary {
    --al-directory-inner-gutter: 0px;
  }
  #content .elementor .e-parent:has(#alDash) {
    --al-page-gutter: var(--al-mobile-page-gutter);
  }
  #alMemberArea .al-member-page-frame:has(> #alDash) {
    --al-member-frame-padding-x: 0px;
  }
}
.al-type-page, .al-type-hero { font-family: var(--al-type-font-family); font-weight: var(--al-weight-title); letter-spacing: var(--al-tracking-title); line-height: var(--al-leading-title); }
.al-type-page { font-size: var(--al-type-page); }
.al-type-hero { font-size: var(--al-type-display); }
.al-type-section, .al-type-panel, .al-type-card { font-weight: var(--al-weight-heading); letter-spacing: var(--al-tracking-heading); line-height: var(--al-leading-heading); }
.al-type-section { font-size: var(--al-type-section); }
.al-type-panel { font-size: var(--al-type-panel); }
.al-type-card { font-size: var(--al-type-card); }
.al-type-body { font-size: var(--al-type-body); line-height: var(--al-leading-body); }
.al-type-support, .al-type-label { font-size: var(--al-type-support); line-height: var(--al-leading-support); }
.al-type-label { font-weight: var(--al-weight-label); }
.al-type-meta { font-size: var(--al-type-meta); line-height: var(--al-leading-support); }
.al-type-caption { font-size: var(--al-type-caption); line-height: var(--al-leading-support); }

/* Existing member primitives opt in through their own variables. A pagehead
 * may be H1 or H2; its role is identical. Aquarium detail/Studio, photographic
 * profile names, PRO and achievement artwork do not adopt these aliases. */
.al-memberSettings {
  --al-member-section-weight: var(--al-weight-heading);
  --al-member-card-size: var(--al-type-panel);
  --al-member-card-weight: var(--al-weight-heading);
}
.al-member-pagehead {
  --al-member-page-size: var(--al-type-member-title);
  --al-member-section-size: var(--al-type-member-title);
  --al-member-page-weight: var(--al-weight-title);
  --al-member-section-weight: var(--al-weight-title);
}
.al-memberSettings .al-card h3 { line-height: var(--al-leading-heading); }

/* WooCommerce merchandising uses the same page/card/form roles. These opt-ins
 * do not touch cart, checkout, prices, swatches, product data or theme layout. */
body.woocommerce-page .woocommerce-products-header__title,
body.single-product .product .summary .product_title,
body.single-product div.elementor[data-elementor-type="product"] .elementor-widget-woocommerce-product-title h1.product_title.elementor-heading-title {
  font-family: var(--al-type-font-family);
  font-size: var(--al-type-page);
  font-weight: var(--al-weight-title);
  line-height: var(--al-leading-title);
  letter-spacing: var(--al-tracking-title);
  overflow-wrap: anywhere;
  color: var(--al-commerce-ink, var(--al-color-text-ink, #10251c));
}
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
body.single-product div.elementor[data-elementor-type="product"] .elementor-widget-woocommerce-product-related ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--al-type-card-compact);
  font-weight: var(--al-weight-card);
  line-height: var(--al-leading-heading);
  letter-spacing: var(--al-tracking-heading);
  overflow-wrap: anywhere;
}
body.single-product .product .summary .woocommerce-product-details__short-description {
  font-size: var(--al-type-body);
  line-height: var(--al-leading-body);
}
body.single-product .product .summary form.cart .variations label {
  font-size: var(--al-type-label);
  font-weight: var(--al-weight-label);
  line-height: var(--al-leading-support);
}
/* Semantic widget scopes outrank Elementor's generated four/seven-class
 * selectors without template IDs, data rewrites or a new !important layer. */
body.single-product div.elementor[data-elementor-type="product"] .elementor-widget-heading h2.elementor-heading-title,
body.single-product div.elementor[data-elementor-type="product"] .elementor-widget-woocommerce-product-related .related.products > h2 {
  font-size: var(--al-type-section);
  font-weight: var(--al-weight-heading);
  line-height: var(--al-leading-heading);
  letter-spacing: var(--al-tracking-heading);
  color: var(--al-commerce-ink, #10251c);
}
body.single-product div.elementor[data-elementor-type="product"] .elementor-widget-woocommerce-product-add-to-cart .variations label {
  font-size: var(--al-type-label);
  font-weight: var(--al-weight-label);
  line-height: var(--al-leading-support);
}


/* Source: al-design-system/assets/css/product-overlays.css */
/** Phase 7: explicit adoption of existing drawers, dialogs and feedback.
 * Edit aquarium basics is the reference, not a migration target. Controllers
 * retain dialog type, focus trapping, dismissal, scroll lock and persistence.
 * The lab's 70-overlays.css is deliberately not loaded on product pages.
 */
:root {
  --al-overlay-surface: var(--al-surface-elevated);
  --al-overlay-border: var(--al-surface-border);
  --al-overlay-ink: var(--al-surface-ink);
  --al-overlay-muted: var(--al-surface-ink-muted);
  --al-overlay-focus: var(--al-surface-border-hover);
  --al-overlay-backdrop: rgb(15 30 22 / 28%);
  --al-overlay-backdrop-filter: none;
  --al-overlay-shadow: var(--al-surface-shadow-none);
  --al-overlay-drawer-radius: 0px;
  --al-overlay-sheet-radius: var(--al-surface-radius-panel) var(--al-surface-radius-panel) 0 0;
  --al-overlay-dialog-radius: var(--al-surface-radius-panel);
  --al-overlay-space: 20px;
  --al-overlay-header-padding: 20px;
  --al-overlay-body-padding: 20px;
  --al-overlay-footer-padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px));
  --al-overlay-action-gap: 10px;
  --al-overlay-title-size: var(--al-type-panel, 1.125rem);
  --al-overlay-title-weight: var(--al-weight-heading, 600);
  --al-overlay-title-leading: var(--al-leading-heading, 1.35);
  --al-overlay-close-size: 44px;
  --al-overlay-close-icon: 18px;
  --al-overlay-close-ink: var(--al-surface-ink-muted);
  --al-overlay-close-hover: var(--al-surface-ink);
  --al-overlay-close-radius: var(--al-surface-radius-card);
}
/* Auth owns a full-viewport backdrop; its existing prefixed/unprefixed filter
 * declarations consume this token. Do not blur the dialog or other overlays. */
#al-auth-neo {
  --al-overlay-backdrop-filter: blur(5px);
}

@media (max-width: 767px) {
  :root {
    --al-overlay-space: 16px;
    --al-overlay-header-padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px;
    --al-overlay-body-padding: 16px;
    --al-overlay-footer-padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
    --al-overlay-close-size: 44px;
  }
}
/* The shared action-sheet keeps its existing centered desktop/bottom mobile
 * shape. Header/footer never shrink; only content scrolls. No fixed footer
 * overlapping fields, no invented height, no JS or action reordering. */
.pladd-sheet .pladd-sheet__panel { min-height: 0; overflow: hidden; }
.pladd-sheet .pladd-sheet__head,
.pladd-sheet .pladd-sheet__foot { flex: 0 0 auto; background: var(--al-overlay-surface); }
.pladd-sheet .pladd-sheet__foot { padding: var(--al-overlay-footer-padding); }
.pladd-sheet .pladd-sheet__head > :first-child { min-width: 0; }
.pladd-sheet .pladd-sheet__title { overflow-wrap: anywhere; }
.pladd-sheet .pladd-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
}
/* Close controls no longer need the local all:unset reset. A real focus ring
 * remains distinct from hover; native buttons retain Enter/Space behavior. */
.pladd-sheet .pladd-sheet__panel button.pladd-sheet__close {
  padding: 0;
  min-width: var(--al-overlay-close-size);
  min-height: var(--al-overlay-close-size);
  cursor: pointer;
  transform: none;
}
.pladd-sheet .pladd-sheet__panel button.pladd-sheet__close:hover { color: var(--al-overlay-ink); }
.pladd-sheet .pladd-sheet__panel button.pladd-sheet__close:focus-visible {
  outline: 2px solid var(--al-overlay-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :is(#plant-filters, #algae-filters, #al-fish-filters) { --al-overlay-transition: none; }
}
@media (forced-colors: active) {
  :root { --al-overlay-border: CanvasText; --al-overlay-focus: Highlight; }
}

/* Explicit close-only contract; never targets submit/cancel/navigation actions.
 * Legacy important owners bind these same tokens at their existing rule. */
:root :is(.al-report-sheet .al-dialog-close, .al-community-photo-viewer .al-dialog-close,
    .al-communityCommentsModal__close, .al-proUpgrade__head > .al-btn,
    .al-workspaceDrawer__close, .al-askDrawer__close, .pladd-sheet__close,
    .al-fish-modal__close, .plm__close--float, .plant-fit-modal__close,
    .al-cart-close, #alIntelligenceStudio [data-chat-close],
    #plant-filters .sidebar-header > button, #algae-filters .sidebar-header > button,
    #al-fish-filters .sidebar-header > button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--al-overlay-close-size);
  height: var(--al-overlay-close-size);
  min-width: var(--al-overlay-close-size);
  min-height: var(--al-overlay-close-size);
  padding: 0;
  border: 0;
  border-radius: var(--al-overlay-close-radius);
  background: transparent;
  color: var(--al-overlay-close-ink);
  box-shadow: none;
  transform: none;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease;
}
:root :is(.al-dialog-close, .al-communityCommentsModal__close,
    .al-proUpgrade__head > .al-btn, .al-workspaceDrawer__close,
    .al-askDrawer__close, .pladd-sheet__close,
    .al-fish-modal__close, .plm__close--float, .plant-fit-modal__close,
    .al-cart-close, #alIntelligenceStudio [data-chat-close],
    #plant-filters .sidebar-header > button, #algae-filters .sidebar-header > button,
    #al-fish-filters .sidebar-header > button):is(:hover,:active,:focus) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
:root :is(.al-dialog-close, .al-communityCommentsModal__close,
    .al-proUpgrade__head > .al-btn, .al-workspaceDrawer__close,
    .al-askDrawer__close, .pladd-sheet__close, .al-fish-modal__close,
    .plm__close--float, .plant-fit-modal__close, .al-cart-close,
    #alIntelligenceStudio [data-chat-close]):hover { color: var(--al-overlay-close-hover); }
:root :is(.al-dialog-close, .al-communityCommentsModal__close,
    .al-proUpgrade__head > .al-btn, .al-workspaceDrawer__close,
    .al-askDrawer__close, .pladd-sheet__close, #al-auth-neo .al-close,
    .al-account-sheet__close, .al-drawer__close, .al-fish-modal__close,
    .plm__close--float, .plant-fit-modal__close, .al-cart-close,
    #alIntelligenceStudio [data-chat-close],
    #plant-filters .sidebar-header > button, #algae-filters .sidebar-header > button,
    #al-fish-filters .sidebar-header > button):focus:not(:focus-visible) {
  --al-overlay-close-outline: none;
  outline: none;
}
:root :is(.al-dialog-close, .al-communityCommentsModal__close,
    .al-proUpgrade__head > .al-btn, .al-workspaceDrawer__close,
    .al-askDrawer__close, .pladd-sheet__close, #al-auth-neo .al-close,
    .al-account-sheet__close, .al-drawer__close, .al-fish-modal__close,
    .plm__close--float, .plant-fit-modal__close, .al-cart-close,
    #alIntelligenceStudio [data-chat-close]):focus-visible {
  --al-overlay-close-outline: 2px solid var(--al-overlay-focus);
  outline: 2px solid var(--al-overlay-focus);
  outline-offset: 2px;
}
:root :is(.al-dialog-close, .al-workspaceDrawer__close, .al-askDrawer__close,
    .pladd-sheet__close, .al-proUpgrade__head > .al-btn, .al-fish-modal__close,
    .plm__close--float, .plant-fit-modal__close, .al-cart-close) svg {
  display: block;
  width: var(--al-overlay-close-icon);
  height: var(--al-overlay-close-icon);
  margin: 0;
  pointer-events: none;
}

/* Library detail close controls sit on the dark backdrop on desktop, then
 * move inside the light dialog on mobile. Keep their existing breakpoints.
 * Diagnosis dialogs keep an inset close control at every size. Local tokens
 * also feed the legacy important color rules without another override. */
@media (min-width: 641px) and (forced-colors: none) {
  .plm:not(.plm--diagnosis) > .plm__close--float {
    --al-overlay-close-ink: var(--al-color-text-inverse, #fff);
    --al-overlay-close-hover: var(--al-color-text-inverse, #fff);
    --al-overlay-focus: var(--al-color-text-inverse, #fff);
  }
}
@media (min-width: 761px) and (forced-colors: none) {
  .al-fish-modal__close {
    --al-overlay-close-ink: var(--al-color-text-inverse, #fff);
    --al-overlay-close-hover: var(--al-color-text-inverse, #fff);
    --al-overlay-focus: var(--al-color-text-inverse, #fff);
  }
}


/* Source: al-design-system/assets/css/product-feedback.css */
/* Modern Natural feedback. Owners keep meaning, dimensions and actual state.
 * No universal success/warning taxonomy; contextual accents remain local. */
:root {
  --al-feedback-icon-small: 16px;
  --al-feedback-icon-inline: 20px;
  --al-feedback-icon-feature: 24px;
  --al-feedback-radius: var(--al-surface-radius-compact);
  --al-feedback-ink: var(--al-surface-ink);
  --al-feedback-muted: var(--al-surface-ink-muted);
  --al-feedback-focus: var(--al-surface-border-hover);
  --al-feedback-label-size: 12px;
  --al-feedback-label-weight: 600;
  --al-feedback-label-leading: 1.25;
  /* Database difficulty palette: alpha belongs to the surface, never content. */
  --al-difficulty-easy: rgb(44 107 74 / 0.96);
  --al-difficulty-mixed: rgb(65 106 120 / 0.96);
  --al-difficulty-moderate: rgb(166 94 0 / 0.96);
  --al-difficulty-hard: rgb(147 64 56 / 0.96);
  --al-difficulty-unknown: rgb(82 100 91 / 0.96);
  --al-difficulty-emersed: rgb(139 94 52 / 0.96);
  --al-difficulty-foreground: #fff;
  --al-difficulty-padding: 5px 10px;
  --al-difficulty-min-height: 28px;
  --al-difficulty-icon-size: 14px;
  --al-feedback-notice-background: var(--al-surface-card);
  --al-feedback-notice-border: var(--al-surface-border);
  --al-feedback-skeleton: #e8edeb;
  --al-feedback-spin: al-feedback-spin .9s linear infinite;
  --al-feedback-progress-moss-start: #183f2d;
  --al-feedback-progress-moss-mid: #2c6b4a;
  --al-feedback-progress-moss-end: #71966e;
  --al-feedback-progress-moss: linear-gradient(100deg, var(--al-feedback-progress-moss-start), var(--al-feedback-progress-moss-mid) 55%, var(--al-feedback-progress-moss-end));
  --al-feedback-progress-river: linear-gradient(100deg, #285344, #416a78 62%, #8bb4b8);
  --al-feedback-progress-satin: linear-gradient(100deg, #76522d, #b38a53 58%, #dfc99d);
  --al-feedback-premium-panel: linear-gradient(135deg, var(--al-feedback-progress-moss-start), var(--al-feedback-progress-moss-mid));
  --al-feedback-premium-glint: linear-gradient(115deg, transparent 15%, #dfc99d24 50%, transparent 78%);
  --al-feedback-progress-track: #e8eeea;
  --al-feedback-progress-edge: inset 0 1px 0 #ffffff40;
  --al-feedback-progress-transition: width 240ms ease-out;
}

/* Explicit opt-in primitives, also consumed through variables in legacy owners. */
.al-feedback-icon { width: var(--al-feedback-icon-inline); height: var(--al-feedback-icon-inline); flex-shrink: 0; color: inherit; }
/* Same role in SSR, dynamically inserted cards and existing detail badges.
 * Component owners retain placement and the mapping from actual care data. */
:is(.badge.badge--difficulty, .al-fish-care-chip) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: var(--al-difficulty-min-height); height: auto;
  padding: var(--al-difficulty-padding); border: 1px solid transparent;
  border-radius: var(--al-feedback-radius); background: var(--al-difficulty-background, var(--al-difficulty-easy));
  color: var(--al-difficulty-foreground); opacity: 1;
  font: var(--al-feedback-label-weight) var(--al-feedback-label-size)/var(--al-feedback-label-leading) system-ui;
  letter-spacing: normal; text-align: center; text-shadow: none; box-shadow: none;
  white-space: normal; overflow-wrap: anywhere;
}
:is(.badge.badge--difficulty, .al-fish-care-chip) > .meta-text {
  font: inherit; letter-spacing: inherit; opacity: 1; min-width: 0;
}
:is(.badge.badge--difficulty, .al-fish-care-chip) .ico {
  width: var(--al-difficulty-icon-size); height: var(--al-difficulty-icon-size);
  flex-shrink: 0; opacity: 1;
}
/* Database difficulty labels may wrap their text in the legacy .meta-text
 * span. The label must inherit its own badge's foreground, not the legacy
 * white metadata colour. This preserves both tinted care/removal badges and
 * the white-on-brown non-submersible exception, including dynamic cards. */
:is(.badge--difficulty, .al-fish-care-chip) > .meta-text {
  color: inherit;
}

.al-feedback-label {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 8px; border: 1px solid var(--al-feedback-notice-border);
  border-radius: var(--al-feedback-radius); background: var(--al-surface-subtle);
  color: var(--al-feedback-ink); font-size: var(--al-feedback-label-size);
  font-weight: var(--al-feedback-label-weight); line-height: var(--al-feedback-label-leading);
  overflow-wrap: anywhere;
}
.al-memberIdentityName { display:flex; align-items:center; gap:6px; min-width:0; }
.al-memberIdentityName > :first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-proMemberBadge { display:inline-flex; align-items:center; flex:none; padding:2px 5px; border:1px solid var(--al-surface-border-selected); border-radius:4px; background:var(--al-surface-selected); color:var(--al-surface-premium); font:600 10px/1.2 system-ui; letter-spacing:.04em; }
.al-proMemberBadge[hidden] { display:none; }
.al-feedback-notice { background: var(--al-feedback-notice-background); border-color: var(--al-feedback-notice-border); border-radius: var(--al-surface-radius-card); color: var(--al-feedback-ink); box-shadow: none; }
.al-feedback-spinner,
:is(.al-btn, .al-report-sheet button[type="submit"])[aria-busy="true"]:not(:has(.al-feedback-spinner, .al-controlSpinner))::before {
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--al-surface-border-defined); border-top-color: currentColor;
  border-radius: 50%; animation: var(--al-feedback-spin, al-feedback-spin .9s linear infinite);
}
/* Busy is explicitly owned by the request lifecycle, never inferred from disabled.
 * Generated decoration has no accessible name; the existing label stays readable. */
:is(.al-btn, .al-report-sheet button[type="submit"])[aria-busy="true"]:not(:has(.al-feedback-spinner, .al-controlSpinner))::before { content: ""; }
:root :is(.al-btn, .al-report-sheet button[type="submit"])[aria-busy="true"] { opacity: 1; }
.al-report-sheet button[type="submit"][aria-busy="true"]::before { vertical-align: middle; margin-inline-end: 8px; }
.al-feedback-progress { background: var(--al-feedback-progress-track); border-radius: 4px; overflow: hidden; }
.al-feedback-progress__fill { display: block; height: 100%; background: var(--al-feedback-progress-fill, var(--al-feedback-progress-moss)); box-shadow: var(--al-feedback-progress-edge); transition: width 240ms ease-out; }
.al-feedback-progress--river { --al-feedback-progress-fill: var(--al-feedback-progress-river); }
.al-feedback-progress--satin { --al-feedback-progress-fill: var(--al-feedback-progress-satin); }

/* L1/L2: only mounted by a real request owner. No timer or simulated percentage. */
.al-brand-loader {
  --al-loader-track: #d7e2db; --al-loader-runner: var(--al-surface-border-selected);
  --al-loader-logo: #74857b;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  grid-column: 1 / -1; gap: 12px; padding: 16px; box-sizing: border-box;
  color: var(--al-feedback-muted); font: inherit; text-align: center;
}
.al-brand-loader--dark { --al-loader-track: #547264; --al-loader-runner: #d6ebe1; --al-loader-logo: var(--al-loader-track); color: #d6ebe1; }
.al-brand-loader__orbit { position: relative; width: 160px; height: 160px; max-width: 100%; aspect-ratio: 1; }
.al-brand-loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2.5; transform: rotate(-90deg); }
.al-brand-loader__track { stroke: var(--al-loader-track); }
.al-brand-loader__runner { stroke: var(--al-loader-runner); stroke-linecap: round; stroke-dasharray: 112 353; transform-origin: 80px 80px; animation: al-feedback-spin 1.8s linear infinite; }
.al-brand-loader__logo { position: absolute; width: 76px; height: 76px; inset: 0; margin: auto; overflow: hidden; color: var(--al-loader-logo); }
.al-brand-loader__sheen { opacity: 0; transform: translateX(-100%); animation: al-feedback-logo-sheen 3.6s ease-in-out infinite; }
.al-brand-loader__label { font-size: 14px; line-height: 1.5; }
@keyframes al-feedback-spin { to { transform: rotate(360deg); } }
@keyframes al-feedback-logo-sheen { 0%,12% { transform: translateX(-100%); opacity: 0; } 28% { opacity: .32; } 60% { transform: translateX(100%); opacity: .32; } 72%,100% { transform: translateX(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root { --al-feedback-progress-transition: none; --al-feedback-spin: none; }
  .al-brand-loader__runner, .al-brand-loader__sheen, .al-feedback-spinner,
  :is(.al-btn, .al-report-sheet button[type="submit"])[aria-busy="true"]::before { animation: none; }
  .al-feedback-progress__fill { transition: none; }
}
@media (forced-colors: active) {
  .al-feedback-label, .al-feedback-notice { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .al-brand-loader { --al-loader-track: GrayText; --al-loader-runner: CanvasText; --al-loader-logo: CanvasText; color: CanvasText; }
  .al-brand-loader__sheen { display: none; }
  .al-feedback-spinner, :is(.al-btn, .al-report-sheet button[type="submit"])[aria-busy="true"]:not(:has(.al-feedback-spinner, .al-controlSpinner))::before { border-color: GrayText; border-top-color: CanvasText; }
  .al-feedback-progress { border: 1px solid CanvasText; }
  .al-feedback-progress__fill { background: Highlight; forced-color-adjust: none; box-shadow: none; }
}


/* Source: al-members/ui/css/al-ui.css */
/* ==== AL UI – hardened (mobile-first) ==== */
/* Tipp: Du kannst die Akzentfarbe zentral ändern: */
:root { --al-accent: #2C6B4A; --al-surface: #fff; --al-text: #0f172a; --al-border: rgba(0,0,0,.08); }

/* Basis (Safe-Area) */
:root{
  --al-accent:#2C6B4A;
  --al-surface:#fff;
  --al-text:#0f172a;
  --al-border:rgba(0,0,0,.08);
  --al-safe-bottom: env(safe-area-inset-bottom, 0px);
  --al-sheet-base-offset: max(var(--al-safe-bottom), 8px);
  --al-brand: #2C6B4A;     /* Primary button */
  --al-muted: #f8fafc;     /* hover bg */
  --al-ink:   #0f172a;     /* text */
}


/* ==== AL UI – Offsets für Member-Section ==== */

/* Basis (Safe-Area) */
:root{
  --al-safe-bottom: env(safe-area-inset-bottom, 0px);
  --al-sheet-base-offset: max(var(--al-safe-bottom), 8px);
}

/* =========================================
   CART BADGE — always attached to cart icon
   ========================================= */

/* Cart icon must be the positioning context */
#icon-cart.al-icon,
.al-header-root #icon-cart.al-icon,
header.site-header #icon-cart.al-icon{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Badge attached directly to cart icon */
#icon-cart.al-icon[data-count]:not([data-count="0"])::after,
.al-header-root #icon-cart.al-icon[data-count]:not([data-count="0"])::after,
header.site-header #icon-cart.al-icon[data-count]:not([data-count="0"])::after{
  content: attr(data-count) !important;
  position: absolute !important;
  top: -5px !important;
  right: -7px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  color: #fff !important;
  background: var(--al-accent) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* hide badge when count is zero or empty */
#icon-cart.al-icon[data-count="0"]::after,
#icon-cart.al-icon[data-count=""]::after{
  content: none !important;
}
.al-icon[data-dot="1"]::before{
  content:"" !important; position:absolute !important; top:2px !important; right:2px !important;
  inline-size:6px !important; block-size:6px !important; border-radius:50% !important; background: var(--al-accent) !important;
}

/* Motion */
@keyframes al-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(44,107,74,.4)}70%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(44,107,74,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(44,107,74,0)}}
@keyframes al-bump{0%{transform:translateY(0)}30%{transform:translateY(-2px)}60%{transform:translateY(0)}100%{transform:translateY(-1px)}}
@keyframes al-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
.al-icon.is-pulse{ animation: al-pulse .8s ease-out !important; }
.al-icon.is-wiggle{ animation: al-wiggle .45s ease-in-out !important; }
.al-icon.bump-badge::after{ animation: al-bump .35s ease-out !important; }
@media (prefers-reduced-motion: reduce){
  .al-icon.is-pulse, .al-icon.is-wiggle, .al-icon.bump-badge::after{ animation:none !important; }
}

/* Auth-State Signals */
body.is-auth .al-icon--user::before{
  content:"" !important; position:absolute !important; bottom:-2px !important; right:-2px !important;
  inline-size:8px !important; block-size:8px !important; border-radius:50% !important;
  background:#22c55e !important; outline:2px solid #fff !important;
}
body.is-auth-loading .al-icon{ opacity:.65 !important; }
body.is-auth-loading .al-icon::after{ opacity:.75 !important; }

/* Toasts */
.al-toast{
  position:fixed !important; right:16px !important; bottom:16px !important; z-index:11000 !important;
  display:flex !important; gap:10px !important; align-items:center !important;
  padding:10px 12px !important; border-radius:10px !important;
  background: rgba(17,24,39,.92) !important; color:#fff !important;
  font:500 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  box-shadow:0 8px 30px rgba(0,0,0,.25) !important;
  opacity:0 !important; transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.al-toast.show{ opacity:1 !important; transform: translateY(0) !important; }
.al-toast .al-toast-icon{ inline-size:18px !important; block-size:18px !important; display:inline-block !important; }
.u-visually-hidden{
  position:absolute !important; inline-size:1px !important; block-size:1px !important;
  overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important; white-space:nowrap !important; clip-path:inset(50%) !important;
}

/* Empty state & Buttons */
.al-cart-empty{ text-align:center !important; padding:24px 12px !important; }
/* Workspaces, upgrade dialog and Learning Journey use shared button contracts. */
.al-btn:not(:where(#alMemberArea.al-tanks *, .al-workspaceDrawer *, .al-askDrawer *, .al-studio *, .al-proUpgrade *, [data-pro-upgrade], .al-lj *)){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 14px !important;
  border-radius: var(--al-button-radius);
  background: var(--al-btn-surface);
  color: var(--al-btn-foreground);
  text-decoration:none !important;
  font-weight:600 !important;
  min-width:120px !important;   /* sorgt für richtige Breite */
  height:auto !important;       /* überschreibt das 40px-Constraint */
  line-height:1.4 !important;   /* schönerer Textfluss */
}


/* ==== AL Search (final) – Desktop: compact under header | Mobile: bottom-sheet ==== */
:root{
  --al-accent:#2C6B4A; --al-surface:#fff; --al-text:#0f172a; --al-border:rgba(0,0,0,.08);
  /* Stelle sicher, dass dein Header seine Höhe hier einträgt (JS/CSS): */
  --al-fixed-top: 60px;
}

/* Overlay (unter dem Panel) */
#alCmdkOverlay{
  position:fixed !important; inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:10000 !important; opacity:0 !important; pointer-events:none !important;
  transition:opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }

/* Gemeinsame Basen */
#alCmdk{ z-index:10001 !important; }
#alCmdk .al-cmdk__panel{ background:var(--al-surface) !important; color:var(--al-text) !important; }
#alCmdk .al-cmdk__search{
  display:flex !important; align-items:center !important; gap:8px !important;
  padding:10px 12px !important; border-bottom:1px solid var(--al-border) !important;
}
#alCmdk input#alCmdkInput{
  flex:1 1 auto !important; padding:10px 12px !important; border:1px solid var(--al-border) !important;
  border-radius:10px !important; font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  background:#fff !important;
}
#alCloseCmdk{
  inline-size:28px !important; block-size:28px !important; border-radius:8px !important;
  color:#0f172a !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; opacity:.75 !important; background:transparent !important; border:none !important; cursor:pointer !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible{
  background:rgba(0,0,0,.06) !important; opacity:1 !important; outline:2px solid transparent !important;
}
#alCmdkList{ padding:8px !important; max-height:55vh !important; overflow:auto !important; }
#alCmdkList li{
  padding:9px 10px !important; border-radius:8px !important; display:flex !important; align-items:center !important; justify-content:space-between !important;
}
#alCmdkList li:hover{ background:rgba(0,0,0,.04) !important; }
#alCmdkList li.is-empty{ text-align:center !important; opacity:.8 !important; }
#alCmdk #al-search-footer{ padding:8px 12px !important; display:flex !important; justify-content:flex-end !important; }

  /* Grip auf Desktop ausblenden */
  html body #alCmdk .al-sheet-grip{ display:none !important; }

/* ==== AL Account Menu (compact dropdown under header icon) ==== */
#al-account-menu{
  position:fixed !important;            /* wir positionieren via JS exakt unter das Icon */
  min-width:220px !important; max-width:92vw !important;
  background:#fff !important; color:var(--al-text,#0f172a) !important;
  border:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  border-radius:12px !important; box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
  z-index:10002 !important; overflow:hidden !important; display:none !important;
}
#al-account-menu::before{
  content:"" !important; position:absolute !important; top:-8px !important;
  inline-size:14px !important; block-size:14px !important; transform:rotate(45deg) !important;
  background:#fff !important;
  border-left:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  border-top:1px solid var(--al-border,rgba(0,0,0,.08)) !important;
  left: var(--caret-left, 24px) !important;              /* durch JS gesetzt */
}
#al-account-menu ul{ list-style:none !important; margin:0 !important; padding:6px !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu a, #al-account-menu button{
  appearance:none !important; background:none !important; border:none !important;
  display:flex !important; width:100% !important; text-align:left !important;
  align-items:center !important; gap:10px !important;
  padding:10px 12px !important; border-radius:8px !important;
  color:inherit !important; text-decoration:none !important;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}
#al-account-menu a:hover, #al-account-menu a:focus-visible,
#al-account-menu button:hover, #al-account-menu button:focus-visible{
  background:rgba(0,0,0,.04) !important; outline:2px solid transparent !important;
}
#al-account-menu .sep{ height:1px !important; margin:6px 8px !important; background:var(--al-border,rgba(0,0,0,.08)) !important; }

/* Account menu */
#al-account-menu{ position:fixed !important; top:calc(var(--al-fixed-top,60px)) !important; right:var(--al-pad-x,16px) !important; left:auto !important; width:280px !important; max-height:min(70vh,520px) !important; overflow:auto !important; background:#fff !important; border:1px solid var(--al-border,#e5e7eb) !important; border-radius:12px !important; box-shadow:0 10px 30px rgba(0,0,0,.12) !important; z-index:100003 !important; display:none !important; }
#al-account-menu[aria-hidden="false"]{ display:block !important; }
#al-account-menu ul{ list-style:none !important; margin:8px 0 !important; padding:6px !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu li.sep{ height:1px !important; background:var(--al-border,#e5e7eb) !important; margin:6px 8px !important; }
#al-account-menu a, #al-account-menu button{ width:100% !important; text-align:left !important; padding:10px 12px !important; border-radius:10px !important; font-size:15px !important; color:var(--al-ink,#0f172a) !important; background:transparent !important; border:0 !important; }
#al-account-menu a:hover, #al-account-menu a:focus-visible, #al-account-menu button:hover, #al-account-menu button:focus-visible{ background:var(--al-muted,#f8fafc) !important; outline:0 !important; }
/* Mobile sheet */
#al-account-menu .sheet-handle{ display:none !important; }
@media (max-width:768px){
  #al-account-menu{ left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; max-height:70vh !important; border-radius:16px 16px 0 0 !important; border-left:0 !important; border-right:0 !important; }
  #al-account-menu .sheet-handle{ display:block !important; height:22px !important; }
  #al-account-menu .sheet-handle::after{ content:"" !important; display:block !important; width:36px !important; height:4px !important; margin:8px auto !important; border-radius:999px !important; background:rgba(0,0,0,.15) !important; }
}
/* Status dot */
.al-icon--user{ position:relative !important; }
.al-icon--user .status-dot{ position:absolute !important; top:6px !important; right:6px !important; width:8px !important; height:8px !important; border-radius:999px !important; background:#16a34a !important; border:2px solid #fff !important; box-shadow:0 0 0 2px rgba(22,163,74,.15) !important; }

/* Account menu – base */
#al-account-menu{
  position:fixed !important;
  z-index:100003 !important;
  background:#fff !important;
  border:1px solid var(--al-border, #e5e7eb) !important;
  border-radius:12px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
  width:260px !important;
  right:var(--al-pad-x, 24px) !important;
  top:calc(var(--al-h, 70px) - 1px) !important;
  padding:8px 0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(6px) !important;
  transition:opacity .18s ease, transform .18s ease !important;
}
#al-account-menu[aria-hidden="false"]{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
#al-account-menu ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
#al-account-menu li{ margin:0 !important; }
#al-account-menu a[role="menuitem"],
#al-account-menu button[role="menuitem"]{
  width:100% !important; display:flex !important; align-items:center !important; gap:10px !important;
  padding:12px 14px !important; background:transparent !important; border:0 !important; text-align:left !important;
  font:inherit !important; color:#0f172a !important; border-radius:8px !important; cursor:pointer !important;
}
#al-account-menu a[role="menuitem"]:hover,
#al-account-menu button[role="menuitem"]:hover{ background:#f8fafc !important; }
#al-account-menu .sep{ height:1px !important; background:#e5e7eb !important; margin:4px 0 !important; }

/* Mobile bottom-sheet: centered */
@media (max-width:767px){
  #al-account-menu{
    left:50% !important; right:auto !important; top:auto !important; bottom:0 !important;
    width:min(92vw, 420px) !important; border-radius:16px 16px 0 0 !important;
    transform:translate(-50%, 110%) !important; opacity:1 !important; pointer-events:auto !important;
    transition:transform .22s ease !important; padding-top:10px !important;
  }
  #al-account-menu[aria-hidden="false"]{ transform:translate(-50%, 0) !important; }
  #al-account-menu .sheet-handle{
    width:44px !important; height:4px !important; border-radius:999px !important;
    background:#cbd5e1 !important; margin:8px auto 10px !important;
  }
}

/* Status dot (logged-in) */
#icon-user{ position:relative !important; }
#icon-user .status-dot{
  position:absolute !important; top:6px !important; right:6px !important;
  width:8px !important; height:8px !important; border-radius:999px !important;
  background:#10b981 !important; box-shadow:0 0 0 2px #fff !important;
}


/* Toasts – immer über Modals/Blur */
#al-toast-portal{
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:2147483600 !important;
  isolation:isolate !important;
}

.al-toast{
  position:absolute !important;
  right:16px !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:1 !important;             /* reicht innerhalb des Portals */
  display:flex !important; gap:10px !important; align-items:center !important;
  padding:10px 12px !important; border-radius:10px !important;
  background: rgba(17,24,39,.92) !important; color:#fff !important;
  font:500 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  box-shadow:0 8px 30px rgba(0,0,0,.25) !important;
  opacity:0 !important; transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events:auto !important;   /* falls der Toast Buttons hat */
}

#al-toast-container .al-toast,
.al-toast-container .al-toast{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
}

.al-toast.show{ opacity:1 !important; transform: translateY(0) !important; }

@media (max-width:640px){
  #al-toast-container,
  .al-toast-container,
  #alToastContainer{
    position:fixed !important;
    top:auto !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(var(--al-bottom-nav-h, 0px) + max(18px, env(safe-area-inset-bottom, 0px))) !important;
    width:min(420px, calc(100vw - 32px)) !important;
    max-width:calc(100vw - 32px) !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    pointer-events:none !important;
    z-index:2147483000 !important;
  }

  #al-toast-container .al-toast,
  .al-toast-container .al-toast,
  #alToastContainer .al-toast{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    transform:translateY(16px) !important;
  }

  #al-toast-container .al-toast.is-visible,
  .al-toast-container .al-toast.is-visible,
  #alToastContainer .al-toast.is-visible,
  #al-toast-container .al-toast.show,
  .al-toast-container .al-toast.show,
  #alToastContainer .al-toast.show{
    transform:translateY(0) !important;
  }

  #al-toast-portal > .al-toast,
  body > .al-toast{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(var(--al-bottom-nav-h, 0px) + max(18px, env(safe-area-inset-bottom, 0px))) !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:min(420px, calc(100vw - 32px)) !important;
    box-sizing:border-box !important;
    transform:translate(-50%, 16px) !important;
  }

  #al-toast-portal > .al-toast.is-visible,
  #al-toast-portal > .al-toast.show,
  body > .al-toast.is-visible,
  body > .al-toast.show{
    transform:translate(-50%, 0) !important;
  }
}

#alCmdk[aria-hidden="true"] {
  display: none !important;
}

#alCmdk .al-cmdk__panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  max-width: min(840px, 95%);
  width: 100%;
  padding: 20px;
  color: #111827;
}

/* Das eigentliche Panel (WICHTIG: __panel, nicht .al-cmdk) */
#alCmdk .al-cmdk__panel {
  width: min(860px, calc(100vw - 32px)) !important;
  max-height: 70vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  padding: 0 !important;
}

/* Kopf & Suchfeld */
#alCmdk .al-cmdk__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--al-border, #e5e7eb) !important;
}
#alCmdk #alCmdkInput {
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 10px !important;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: #fff !important;
}

/* Liste */
#alCmdk #alCmdkList {
  padding: 8px !important;
  max-height: 55vh !important;
  overflow: auto !important;
}
#alCmdk #alCmdkList li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
}
#alCmdk #alCmdkList li:hover { background: rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty { text-align: center !important; opacity: .8 !important; }

/* Close-Button */
#alCloseCmdk {
  inline-size: 28px !important;
  block-size: 28px !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible {
  background: rgba(0,0,0,.06) !important;
  outline: 2px solid transparent !important;
}

/* Desktop: Panel unter dem Header einrasten (optional) */
@media (min-width: 1024px) {
  #alCmdk {
    align-items: flex-start !important;
    padding-top: calc(var(--al-fixed-top, 60px) + 10px) !important;
  }
}

/* Overlay für Outside-Click (unter dem Panel) */
#alCmdkOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,.35) !important;
  z-index: 10002 !important;                  /* unter #alCmdk */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay { opacity: 1 !important; pointer-events: auto !important; }


/* WICHTIG: korrektes Ziel ist __panel, nicht .al-cmdk */
#alCmdk .al-cmdk__panel {
  display: block !important;
  width: min(860px, calc(100vw - 32px)) !important;
  min-width: 320px !important;
  max-height: 70vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  padding: 0 !important;
}

/* Kopf & Suchfeld */
#alCmdk .al-cmdk__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--al-border, #e5e7eb) !important;
}
#alCmdk #alCmdkInput {
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 10px !important;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: #fff !important;
}

/* Ergebnisliste */
#alCmdk #alCmdkList { padding: 8px !important; max-height: 55vh !important; overflow: auto !important; }
#alCmdk #alCmdkList li {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 9px 10px !important; border-radius: 8px !important;
}
#alCmdk #alCmdkList li:hover { background: rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty { text-align: center !important; opacity: .8 !important; }

/* Close Button */
#alCloseCmdk {
  inline-size: 28px !important; block-size: 28px !important; border-radius: 8px !important;
  color: #0f172a !important; background: transparent !important; border: 0 !important;
}
#alCloseCmdk:hover, #alCloseCmdk:focus-visible { background: rgba(0,0,0,.06) !important; outline: 2px solid transparent !important; }

/* Overlay unter dem Panel für Outside-Click */
#alCmdkOverlay { position: fixed !important; inset: 0 !important; background: rgba(15,23,42,.35) !important; z-index: 10002 !important;
  opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease !important; }
body.is-search-open #alCmdkOverlay { opacity: 1 !important; pointer-events: auto !important; }

/* Desktop: unter Header einrasten */
@media (min-width: 1024px) {
  body.is-search-open #alCmdk { align-items: flex-start !important; padding-top: calc(var(--al-fixed-top, 60px) + 10px) !important; }
  #alCmdk .al-sheet-grip { display: none !important; }
}

/* Sichtbarkeit ausschließlich über aria-hidden/hidden + Body-Klasse */
#alCmdk{ display:none !important; }
#alCmdk[aria-hidden="false"]{ display:flex !important; }

/* Desktop: Panel unter Header, Container bleibt full-screen für Outside-Click */
@media (min-width:1024px){
  #alCmdk{ padding: 10px 14px !important; }
  #alCmdk .al-cmdk__panel{
    margin-top: calc(var(--al-fixed-top, 60px) + 10px) !important;
  }
}

/* Desktop: einfach unter dem Header „einrasten“ – Container bleibt Fullscreen */
@media (min-width:1024px){
  #alCmdk{ padding-top: calc(var(--al-fixed-top,60px) + 10px) !important; }
  #alCmdk .al-sheet-grip{ display:none !important; }
}

/* Overlay unter dem Panel (nur 1x definieren) */
#alCmdkOverlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,.35) !important;
  z-index: 10002 !important;              /* < #alCmdk */
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .18s ease !important;
}
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }



#alCmdkOverlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483599 !important; /* knapp unter #alCmdk */
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Overlay darunter (falls vorhanden) */
#alCmdkOverlay{
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483599 !important;
  opacity:1 !important; pointer-events:auto !important;
  clip:auto !important; clip-path:none !important; content-visibility:visible !important; contain:none !important;
}

/* Sicherheitsnetz gegen “versteck”-Attribute */
#alCmdk[hidden], #alCmdk[aria-hidden="true"]{ display:flex !important; }

/* Default: zu (unsichtbar) */
#alCmdk { display: none !important; }

/* Öffnen nur, wenn JS die Klasse setzt */
body.is-search-open #alCmdk { display: flex !important; }

/* oder alternativ/zusätzlich über ARIA */
#alCmdk[hidden], #alCmdk[aria-hidden="true"] { display: none !important; }
#alCmdk[aria-hidden="false"]:not([hidden]) { display: flex !important; }

#alCmdk{ display:none !important; }
#alCmdk[hidden], #alCmdk[aria-hidden="true"]{ display:none !important; }
body.is-search-open #alCmdk,
#alCmdk[aria-hidden="false"]:not([hidden]){ display:flex !important; }

#alCmdkOverlay{ opacity:0 !important; pointer-events:none !important; }
body.is-search-open #alCmdkOverlay{ opacity:1 !important; pointer-events:auto !important; }

/* Quick Cart Panel global über Content & Filterbar */
#al-cart-portal,
.al-cart-overlay,
.al-cart-body,
#al-cart-content {
  z-index: 120000 !important;
}

.al-icon.has-avatar { padding: 0; }

.al-icon img.al-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

/* Avatar IMG inside injected user icon */
.al-header-root #icon-user.has-avatar { padding: 0 !important; }
.al-header-root #icon-user.has-avatar img.al-avatar{
  display:block !important;
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  object-fit:cover !important;
}
.al-header-root #icon-user.has-avatar img.al-avatar{
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
}

/* =========================================================
   HEADER PROFILE AVATAR — robust scope (Astra/Elementor safe)
   ========================================================= */

/* hit both: custom header root + theme header */
.al-header-root #icon-user.al-icon,
header.site-header #icon-user.al-icon{
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.al-header-root #icon-user.al-icon:hover,
header.site-header #icon-user.al-icon:hover{
  background: rgba(15, 23, 42, 0.06);
  box-shadow: none;
  transform: none;
}

.al-header-root #icon-user.al-icon:active,
header.site-header #icon-user.al-icon:active{
  transform: translateY(0);
  box-shadow: none;
}

.al-header-root #icon-user.al-icon:focus-visible,
header.site-header #icon-user.al-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.30);
}

/* avatar img */
.al-header-root #icon-user.has-avatar img.al-avatar,
header.site-header #icon-user.has-avatar img.al-avatar{
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),
    0 0 0 3px rgba(15, 23, 42, 0.10);
}

/* =========================================================
   Header: Profile button as a clear, tappable avatar chip
   ========================================================= */

/* The actual clickable control */
.al-header-root #icon-user.al-icon{
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

.al-header-root #icon-user.al-icon:hover{
  background: rgba(15,23,42,.06) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
  transform: none !important;
}

.al-header-root #icon-user.al-icon:active{
  transform: translateY(0) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important;
}

.al-header-root #icon-user.al-icon:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 10px 26px rgba(15,23,42,.14) !important;
}

/* The image itself */
.al-header-root #icon-user.has-avatar img.al-avatar{
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;

  /* crisp ring so dark/green avatars read as "profile" */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.98),
    0 0 0 3px rgba(15,23,42,.12) !important;
}

/* ---------------------------------------------------------
   Mobile header: slightly smaller profile avatar
--------------------------------------------------------- */
@media (max-width: 767px){
  .al-header-root #icon-user.al-icon{
    width: 34px !important;
    height: 34px !important;
    /* Keep the mobile shadow inside the existing header edge clearance.
       The desktop 18/26px blur reaches beyond it; avatar rings and the
       online indicator retain their own geometry and remain untouched. */
    box-shadow: 0 2px 4px rgba(15,23,42,.10) !important;
  }

  .al-header-root #icon-user.al-icon:hover{
    box-shadow: 0 2px 4px rgba(15,23,42,.10) !important;
  }

  .al-header-root #icon-user.al-icon:active{
    box-shadow: 0 2px 4px rgba(15,23,42,.10) !important;
  }

  .al-header-root #icon-user.al-icon:focus-visible{
    box-shadow: 0 0 0 3px rgba(34,197,94,.28), 0 2px 4px rgba(15,23,42,.10) !important;
  }

  .al-header-root #icon-user.has-avatar img.al-avatar{
    width: 26px !important;
    height: 26px !important;

    /* slightly softer ring on mobile */
    box-shadow:
      0 0 0 2px rgba(255,255,255,.95),
      0 0 0 2.5px rgba(15,23,42,.12) !important;
  }
}

/* Mobile account menu: remove the drag handle completely */
@media (max-width: 768px){
  #al-account-menu .sheet-handle,
  #al-account-menu .sheet-handle::before,
  #al-account-menu .sheet-handle::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

}
}
/* =========================================================
   HEADER – Account Pill / Rail Trigger (clean, single source)
   ========================================================= */

#icon-user.al-header-rail-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  height:40px;

  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.85);
  box-shadow:0 8px 22px rgba(15,23,42,.10);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#icon-user.al-header-rail-trigger:hover{
  transform:none;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}

#icon-user.al-header-rail-trigger:active{
  transform:none;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}

#icon-user.al-header-rail-trigger .al-header-rail-label{
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

#icon-user.al-header-rail-trigger .al-header-rail-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}

#icon-user.al-header-rail-trigger .al-header-rail-caret svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  transition:transform .2s ease;
}

body.rail-open #icon-user.al-header-rail-trigger
.al-header-rail-caret svg{
  transform:rotate(180deg);
}

/* Mobile: Label ausblenden */
@media (max-width:980px){
  #icon-user.al-header-rail-trigger .al-header-rail-label{
    display:none;
  }
}

/* =========================================================
   RAIL – Off-Canvas Navigation (NO BLUR, NO OVERLAY FX)
   ========================================================= */

#alRail.al-rail,
aside.al-sidebar.al-rail{
  position:fixed;
  top:0;
  left:0;
  height:100dvh;
  width:var(--al-rail-w, 320px);

  transform:translateX(calc(-100% - 16px));
  transition:transform .22s ease;

  z-index:100000;
  background:#fff;

  pointer-events:none;
}

body.rail-open #alRail.al-rail,
body.rail-open aside.al-sidebar.al-rail{
  transform:translateX(0);
  pointer-events:auto;
}

#alRail.al-rail[data-force-open="1"],
aside.al-sidebar.al-rail[data-force-open="1"],
#alRail.al-rail.is-force-open,
aside.al-sidebar.al-rail.is-force-open,
body.account-area #alRail.al-rail,
body.account-area aside.al-sidebar.al-rail,
body.woocommerce-account #alRail.al-rail,
body.woocommerce-account aside.al-sidebar.al-rail,
body.alpp-owner-profile-route #alRail.al-rail,
body.alpp-owner-profile-route aside.al-sidebar.al-rail{
  transform:translateX(0) !important;
  pointer-events:auto !important;
}

/* =========================================================
   HEADER – Profile / My Account (final, clean, premium)
   ========================================================= */

#alAccountPill.al-account-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;

  height:38px;
  padding:4px 10px 4px 6px;

  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;

  color:#0f172a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px;
  font-weight:600;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

/* Hover: ruhig, nicht „Button-like“ */
#alAccountPill.al-account-pill:hover{
  background:#f8fafc;
  border-color:rgba(15,23,42,.14);
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

/* Active: leichtes Feedback */
#alAccountPill.al-account-pill:active{
  transform:translateY(1px);
  box-shadow:none;
}

/* Keyboard focus – sauber & WCAG */
#alAccountPill.al-account-pill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(44,107,74,.45);
}

/* =========================================================
   Avatar
   ========================================================= */

#alAccountPill .al-account-pill__av{
  width:28px;
  height:28px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;

  background:#e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#alAccountPill .al-account-pill__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#alAccountPill .al-account-pill__ico{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#475569;
}

#alAccountPill .al-account-pill__ico svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.1;
}

/* The identity trigger owns keyboard focus feedback. The avatar itself stays
   visually unframed in the resting header state. */
#alAccountPill .al-account-pill__av{
  border:0;
  outline:0;
  box-shadow:none;
}

/* =========================================================
   Label
   ========================================================= */

#alAccountPill .al-account-pill__label{
  white-space:nowrap;
  line-height:1;
  opacity:.9;
}

/* =========================================================
   Chevron
   ========================================================= */

#alAccountPill .al-account-pill__chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
  transition:transform .2s ease, opacity .2s ease;
}

#alAccountPill .al-account-pill__chev svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
}

/* offen → Chevron drehen */
body.rail-open #alAccountPill .al-account-pill__chev{
  transform:rotate(180deg);
  opacity:.9;
}

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

@media (max-width: 768px){
  #alAccountPill.al-account-pill{
    padding-right:8px;
  }

  #alAccountPill .al-account-pill__label{
    display:none; /* nur Avatar + Chevron */
  }
}

@media (max-width: 1023px){
  #alAccountPill,
  #icon-user.al-header-rail-trigger{
    display:none !important;
  }
}

/* =========================================================
   ACCOUNT AREA — hide header "My Account" pill
   (Rail is already visible, so this is redundant)
========================================================= */

/* Most robust: account pages */
body.account-area #alAccountPill,
body.woocommerce-account #alAccountPill,
body.account-area .al-account-pill,
body.woocommerce-account .al-account-pill{
  display:none !important;
}


/* Transparent header over hero: secondary soll sichtbar bleiben */
.al-header[data-transparent="true"]:not(.is-solid) .al-authpill--secondary{
  color:#fff !important;
  border-color:rgba(255,255,255,.35) !important;
}
.al-header[data-transparent="true"]:not(.is-solid) .al-authpill--secondary:hover{
  background:rgba(255,255,255,.12) !important;
}

/* =========================================================
   HEADER AUTH BUTTONS – final
   ========================================================= */

:root{
  --al-brand: #2C6B4A;
  --al-ink: #0f172a;
  --al-muted: #f1f5f9;
  --al-border: rgba(15,23,42,.14);
}

/* Reusable authentication CTA pill. The header and member-teaser use this
   single visual contract so register and sign-in always retain their roles. */
.al-authpill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:40px !important;
  padding:0 16px !important;

  border:1px solid rgba(44,107,74,.18) !important;
  border-radius:999px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 2px 5px rgba(23,63,44,.05),
    0 8px 20px rgba(23,63,44,.07) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;

  text-decoration:none !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;

  transition:
    background-color .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease !important;
}

/* Secondary (Log in) */
.al-authpill--secondary{
  background:linear-gradient(180deg,#fff 0%,#f2f8f4 100%) !important;
  color:#173f2c !important;
  border-color:rgba(44,107,74,.24) !important;
}

.al-authpill--secondary:hover{
  background:linear-gradient(180deg,#fff 0%,#eaf5ef 100%) !important;
  border-color:rgba(44,107,74,.36) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 2px 6px rgba(23,63,44,.07),
    0 12px 24px rgba(23,63,44,.10) !important;
}

/* Primary (Create account) */
/* Premium Primary */
.al-authpill--primary{
  background:linear-gradient(135deg,#173f2c 0%,#2c6b4a 56%,#407f5c 100%) !important;
  color:#fff !important;
  border-color:rgba(159,220,189,.38) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 2px 6px rgba(23,63,44,.16),
    0 12px 26px rgba(23,63,44,.22) !important;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}

.al-authpill--primary:hover,
.al-authpill--primary:focus-visible{
  transform: translateY(-1px);
  background:linear-gradient(135deg,#123624 0%,#2f7350 52%,#4a8b67 100%) !important;
  border-color:rgba(198,233,213,.56) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 3px 8px rgba(23,63,44,.18),
    0 16px 32px rgba(23,63,44,.28) !important;
}

.al-authpill--primary:active{
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(44,107,74,.18) !important;
}

.al-header-root #icon-cart,
.al-header-root .al-icon--cart {
  display:none !important;
}

body.al-header-show-cart .al-header-root #icon-cart,
body.al-header-show-cart .al-header-root .al-icon--cart {
  display:inline-flex !important;
}

.al-header-root .al-header-account-slot{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}

.al-header-root .al-authpill--join{
  width:64px !important;
  min-width:64px !important;
  height:40px !important;
  padding:0 12px !important;
  border-radius:999px !important;
}

@media (max-width: 767px){
  .al-header-root .al-authpill{
    height:40px !important;
    padding:0 12px !important;
    font-size:13px !important;
    border-radius:999px !important;
  }

  .al-header-root .al-authpill--join{
    height:40px !important;
    width:64px !important;
    min-width:64px !important;
  }

  .al-header-root .al-header-account-slot{
    flex:0 0 64px !important;
    width:64px !important;
    min-width:64px !important;
  }
}

/* =========================================================
   AL CmdK – single source of truth (CSS nur für Look)
   Layout/Display macht al-search.js via inline !important
   ========================================================= */

/* Overlay (JS setzt opacity/pointer-events) */
#alCmdkOverlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483579 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease !important;
}

/* Panel Look */
#alCmdk .al-cmdk__search{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-bottom:1px solid var(--al-border, rgba(0,0,0,.08)) !important;
  background:#fff !important;
}

#alCmdk #alCmdkInput{
  flex:1 1 auto !important;
  padding:10px 12px !important;
  border:1px solid var(--al-border, rgba(0,0,0,.08)) !important;
  border-radius:10px !important;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  background:#fff !important;
}

#alCmdk #alCloseCmdk{
  inline-size:32px !important;
  block-size:32px !important;
  border-radius:10px !important;
  background:transparent !important;
  border:0 !important;
  font-size:22px !important;
  line-height:1 !important;
}

#alCmdk #alCmdkList{
  padding:8px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

#alCmdk #alCmdkList li{
  padding:10px 12px !important;
  border-radius:10px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
}

#alCmdk #alCmdkList li:hover{ background:rgba(0,0,0,.04) !important; }
#alCmdk #alCmdkList li.is-empty{ text-align:center !important; opacity:.8 !important; }

@media (max-width: 767px){
  #alCmdk .al-cmdk__panel{
    max-height: calc(
      100dvh
      - 24px
      - env(safe-area-inset-bottom, 0px)
      - var(--kb-safe, 0px)
    ) !important;
    overflow:hidden !important;
  }

  #alCmdk #alCmdkList{
    max-height: calc(
      100dvh
      - 24px
      - 64px
      - env(safe-area-inset-bottom, 0px)
      - var(--kb-safe, 0px)
    ) !important;
  }

  #alCmdk .al-sheet-grip{ display:none !important; }
}

/* CmdK results: stop "word-per-line" flex shrink */
#alCmdk #alCmdkList li{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
}

/* title takes the space and may wrap normally */
#alCmdk #alCmdkList li .t{
  flex: 1 1 auto !important;
  min-width: 0 !important;           /* THIS is the key */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important; /* safety for long strings */
  line-height: 1.25 !important;
}

/* group label stays on one line */
#alCmdk #alCmdkList li em{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  opacity: .65 !important;
  font-style: normal !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* CmdK results – robust wrapping on small widths */
#alCmdk #alCmdkList li{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  min-width:0 !important;
}

#alCmdk #alCmdkList li .t{
  flex:1 1 auto !important;
  min-width:0 !important;             /* key */
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.25 !important;
}

#alCmdk #alCmdkList li em{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-style:normal !important;
  opacity:.65 !important;
}

/* Mobile keyboard-safe CmdK panel */
@media (max-width: 1023px){
  #alCmdk{
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + var(--kb-safe, 0px) + 10px) !important;
    align-items: flex-end !important;
  }

  #alCmdk .al-cmdk__panel{
    width: 100% !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px) - var(--kb-safe, 0px)) !important;
    overflow: hidden !important; /* panel selbst nicht „doppelt“ scrollen */
  }

  /* nur die Liste scrollt */
  #alCmdk #alCmdkList{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(
      100dvh
      - 16px
      - env(safe-area-inset-bottom, 0px)
      - var(--kb-safe, 0px)
      - 72px /* searchbar */
      - 44px /* footer */
    ) !important;
    scroll-padding-bottom: 120px !important;
  }
}

/* =========================================
   CART BADGE — always attached to cart icon
   ========================================= */

/* Cart icon must be the positioning context */
#icon-cart.al-icon,
.al-header-root #icon-cart.al-icon,
header.site-header #icon-cart.al-icon{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Badge attached directly to cart icon */
#icon-cart.al-icon[data-count]:not([data-count="0"])::after,
.al-header-root #icon-cart.al-icon[data-count]:not([data-count="0"])::after,
header.site-header #icon-cart.al-icon[data-count]:not([data-count="0"])::after{
  content: attr(data-count) !important;
  position: absolute !important;
  top: -5px !important;
  right: -7px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  color: #fff !important;
  background: var(--al-accent) !important;

  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Optional: hide badge when count is zero or empty */
#icon-cart.al-icon[data-count="0"]::after,
#icon-cart.al-icon[data-count=""]::after{
  content: none !important;
}

/* =========================================================
   AL Search – FINAL CLEAN CMDK
   ========================================================= */

#alCmdk{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  justify-content:center !important;
  background:rgba(15,23,42,.5) !important;
  backdrop-filter:blur(6px) !important;
  z-index:2147483600 !important;
}

body.is-search-open #alCmdk,
#alCmdk[aria-hidden="false"]:not([hidden]){
  display:flex !important;
}

#alCmdk[hidden],
#alCmdk[aria-hidden="true"]{
  display:none !important;
}

#alCmdkOverlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.35) !important;
  z-index:2147483599 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease !important;
}

body.is-search-open #alCmdkOverlay{
  opacity:1 !important;
  pointer-events:auto !important;
}

#alCmdk .al-cmdk__panel{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#alCmdk .al-cmdk__search{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  border-bottom:1px solid var(--al-border, #e5e7eb) !important;
  background:#fff !important;
}

#alCmdk #alCmdkInput{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding:10px 12px !important;
  border:1px solid var(--al-border, #e5e7eb) !important;
  border-radius:10px !important;
  background:#fff !important;
}

#alCmdk #al-search-footer{
  flex:0 0 auto !important;
  padding:8px 12px !important;
  display:flex !important;
  justify-content:flex-end !important;
}

#alCmdk #alCmdkList{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding:8px !important;
}

#alCmdk #alCmdkList li{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-width:0 !important;
  padding:10px 12px !important;
  border-radius:10px !important;
}

#alCmdk #alCmdkList li .t{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.25 !important;
}

#alCmdk #alCmdkList li em{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  opacity:.65 !important;
  font-style:normal !important;
  font-size:12px !important;
  margin-top:2px !important;
}

#alCloseCmdk{
  inline-size:28px !important;
  block-size:28px !important;
  border-radius:8px !important;
  color:#0f172a !important;
  background:transparent !important;
  border:0 !important;
}

#alCloseCmdk:hover,
#alCloseCmdk:focus-visible{
  background:rgba(0,0,0,.06) !important;
  outline:2px solid transparent !important;
}

@media (min-width:1024px){
  #alCmdk{
    align-items:flex-start !important;
    padding:calc(var(--al-fixed-top, 60px) + 10px) 14px 0 !important;
  }

  #alCmdk .al-cmdk__panel{
    width:min(860px, 95vw) !important;
    max-height:70vh !important;
    border-radius:12px !important;
  }

  #alCmdk .al-sheet-grip{
    display:none !important;
  }
}

@media (max-width:1023px){
  body.is-search-open{
    overflow:hidden !important;
  }

  #alCmdk{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
    background:#fff !important;
    backdrop-filter:none !important;
    z-index:2147483600 !important;
  }

  body.is-search-open #alCmdk,
  #alCmdk[aria-hidden="false"]:not([hidden]){
    display:flex !important;
  }

  #alCmdkOverlay{
    display:none !important;
  }

  #alCmdk .al-cmdk__panel{
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    background:#fff !important;
  }

  #alCmdk .al-cmdk__search{
    flex:0 0 auto !important;
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 10px)
      12px
      10px
      12px !important;
    background:#fff !important;
    border-bottom:1px solid var(--al-border, #e5e7eb) !important;
  }

  #alCmdk #alCmdkList{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding:8px 8px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    scroll-padding-bottom:24px !important;
  }

  #alCmdk #al-search-footer,
  #alCmdk .al-sheet-grip{
    display:none !important;
  }
}

/* =========================================================
   AL Search — FINAL SINGLE SOURCE OF TRUTH
   ========================================================= */
#alCmdk{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483600 !important;
  display: none !important;
  justify-content: center !important;
  background: rgba(15,23,42,.5) !important;
  backdrop-filter: blur(6px) !important;
}

body.is-search-open #alCmdk,
#alCmdk[aria-hidden="false"]:not([hidden]){
  display: flex !important;
}

#alCmdk[hidden],
#alCmdk[aria-hidden="true"]{
  display: none !important;
}

#alCmdkOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483599 !important;
  background: rgba(15,23,42,.35) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}

body.is-search-open #alCmdkOverlay{
  opacity: 1 !important;
  pointer-events: auto !important;
}

#alCmdk .al-cmdk__panel{
  width: min(860px, 100%) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#alCmdk .al-cmdk__search{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--al-border, #e5e7eb) !important;
  background: #fff !important;
}

#alCmdk #alCmdkInput{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--al-border, #e5e7eb) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font: 500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

#alCloseCmdk{
  inline-size: 32px !important;
  block-size: 32px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#alCmdk #al-search-footer{
  flex: 0 0 auto !important;
  padding: 8px 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

#alCmdk #alCmdkList{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 8px !important;
}

#alCmdk #alCmdkList li{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

#alCmdk #alCmdkList li .t{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}

#alCmdk #alCmdkList li em{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  opacity: .65 !important;
  font-style: normal !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

@media (min-width: 1024px){
  #alCmdk{
    align-items: flex-start !important;
    padding: calc(var(--al-fixed-top, 60px) + 10px) 14px 0 !important;
  }

  #alCmdk .al-cmdk__panel{
    max-height: 70vh !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 1023px){
  #alCmdk{
    align-items: flex-end !important;
    padding:
      10px
      14px
      calc(
        env(safe-area-inset-bottom, 0px)
        + var(--al-kb-safe, 0px)
        + 10px
      ) !important;
  }

  #alCmdk .al-cmdk__panel{
    width: 100% !important;
    max-width: 860px !important;
    max-height: calc(
      100dvh
      - 20px
      - env(safe-area-inset-bottom, 0px)
      - var(--al-kb-safe, 0px)
    ) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #alCmdk #alCmdkList{
    max-height: calc(
      100dvh
      - 20px
      - 64px
      - 44px
      - env(safe-area-inset-bottom, 0px)
      - var(--al-kb-safe, 0px)
    ) !important;
  }

  #alCmdk .al-sheet-grip{
    display: none !important;
  }
}

@media (max-width:1023px){
  body.is-search-open{
    overflow:hidden !important;
  }

  #alCmdk{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
    background:#fff !important;
    backdrop-filter:none !important;
    z-index:2147483600 !important;
  }

  body.is-search-open #alCmdk,
  #alCmdk[aria-hidden="false"]:not([hidden]){
    display:flex !important;
  }

  #alCmdkOverlay{
    display:none !important;
  }

  #alCmdk .al-cmdk__panel{
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    background:#fff !important;
  }

  #alCmdk .al-cmdk__search{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      12px
      12px
      12px !important;
    background:#fff !important;
    border-bottom:1px solid var(--al-border, #e5e7eb) !important;
  }

  #alCmdk #alCmdkList{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:8px 8px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    max-height:none !important;
  }

  #alCmdk .al-sheet-grip,
  #alCmdk #al-search-footer{
    display:none !important;
  }
}

.u-visually-hidden{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================================================
   Header shell component + mobile account sheet
   ========================================================= */

.al-header-root .al-util{
  width:auto !important;
  min-width:0 !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
}

@media (max-width: 767px){
  .al-header-root .al-util{
    width:124px !important;
    min-width:124px !important;
  }

  body.al-header-show-cart .al-header-root .al-util{
    width:168px !important;
    min-width:168px !important;
  }
}

@media (min-width:768px) and (max-width:980px){
  .al-header-root .al-util{
    width:124px !important;
    min-width:124px !important;
    gap:8px !important;
  }

  body.al-header-show-cart .al-header-root .al-util{
    width:168px !important;
    min-width:168px !important;
  }

  .al-header-root .al-header-account-slot{
    flex:0 0 64px !important;
    width:64px !important;
    min-width:64px !important;
    overflow:hidden !important;
  }
}

@media (min-width:768px) and (max-width:1180px){
  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar,
  .al-header-root .al-header__bar,
  .al-header-root .al-header-shell__bar{
    position:static !important;
    grid-template-columns:44px minmax(0, 1fr) minmax(124px, auto) !important;
    gap:8px !important;
  }

  body.al-header-show-cart #alHeader .al-header__bar,
  body.al-header-show-cart #alHeader .al-header-shell__bar,
  body.al-header-show-cart .al-header-root .al-header__bar,
  body.al-header-show-cart .al-header-root .al-header-shell__bar{
    grid-template-columns:44px minmax(0, 1fr) 168px !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu,
  .al-header-root .al-burger,
  .al-header-root .al-header-shell__menu{
    display:inline-flex !important;
    grid-column:1 !important;
    justify-self:start !important;
  }

  #alHeader .al-nav,
  .al-header-root .al-nav{
    display:none !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand,
  .al-header-root .al-logo,
  .al-header-root .al-header-shell__brand{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    z-index:1 !important;
    min-width:120px !important;
    max-width:120px !important;
    height:42px !important;
    margin:0 !important;
    transform:translate(-50%, -50%) !important;
  }

  #alHeader .al-logo__text,
  #alHeader .al-header-shell__brand-text,
  .al-header-root .al-logo__text,
  .al-header-root .al-header-shell__brand-text{
    display:none !important;
  }

  #alHeader .al-util,
  .al-header-root .al-util{
    grid-column:3 !important;
    justify-self:end !important;
    width:124px !important;
    min-width:124px !important;
    gap:8px !important;
  }

  body.al-header-show-cart #alHeader .al-util,
  body.al-header-show-cart .al-header-root .al-util{
    width:168px !important;
    min-width:168px !important;
  }

  #alHeader .al-header-account-slot:not([aria-hidden="true"]),
  .al-header-root .al-header-account-slot:not([aria-hidden="true"]){
    flex:0 0 64px !important;
    width:64px !important;
    min-width:64px !important;
    overflow:hidden !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu,
  #alHeader .al-util,
  .al-header-root .al-burger,
  .al-header-root .al-header-shell__menu,
  .al-header-root .al-util{
    position:relative !important;
    z-index:2 !important;
  }
}

.al-header-root .al-icon{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  flex:0 0 40px !important;
  padding:0 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#0f172a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  -webkit-tap-highlight-color:transparent !important;
}

.al-header-root .al-icon svg{
  width:20px !important;
  height:20px !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.al-header-root .al-icon:hover,
.al-header-root .al-icon:focus-visible{
  background:#f8fafc !important;
  border-color:rgba(15,23,42,.16) !important;
  outline:0 !important;
}

.al-header-shell:not(#alHeader){
  --al-header-h:64px;
  position:sticky;
  top:0;
  z-index:100000;
  width:100%;
  background:rgba(255,255,255,.96);
  color:#0f172a;
  border-bottom:1px solid rgba(15,23,42,.08);
  backdrop-filter:saturate(1.05) blur(12px);
  -webkit-backdrop-filter:saturate(1.05) blur(12px);
}

.al-header-shell__bar{
  min-height:var(--al-header-h);
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 132px;
  align-items:center;
  gap:10px;
  padding:0 max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
  box-sizing:border-box;
}

@media (min-width:1181px){
  .al-header-root .al-header__bar,
  .al-header-root .al-header-shell__bar,
  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    grid-template-columns:minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
    padding-inline:clamp(20px, 4vw, 64px) !important;
  }
}

.al-header-shell__menu{
  width:40px;
  height:40px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0;
  cursor:pointer;
}

.al-header-shell__menu span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  display:block;
}

.al-header-shell__brand{
  justify-self:center;
  min-width:0;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#0f172a;
  text-decoration:none;
  font:700 16px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-header-shell__logo-img,
.al-header-shell__logo-mark{
  width:44px;
  height:44px;
  flex:0 0 44px;
}

.al-header-shell__logo-img{
  display:block;
  object-fit:contain;
}

.al-header-shell__logo-mark{
  border-radius:999px;
  background:rgba(44,107,74,.10);
  color:#2C6B4A;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:0;
}

.al-header-shell__brand-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:767px){
  .al-header-shell{
    --al-header-h:60px;
  }

  .al-header-shell__bar{
    grid-template-columns:44px minmax(0, 1fr) 136px;
    padding-inline:12px;
  }

  body.al-header-show-cart .al-header-shell__bar{
    grid-template-columns:44px minmax(0, 1fr) 168px;
  }

  .al-header-shell__brand-text{
    display:none;
  }

  .al-header-root .al-util{
    min-width:136px !important;
  }

  body.al-header-show-cart .al-header-root .al-util{
    min-width:168px !important;
  }
}

@media (min-width:1181px){
  .al-header-shell__menu{
    visibility:hidden;
  }
}

.al-mobile-account-trigger__avatar{
  width:32px;
  height:32px;
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(44,107,74,.10);
  color:#2C6B4A;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,.10);
}

.al-mobile-account-trigger__avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.al-mobile-account-trigger__avatar--empty svg{
  width:18px !important;
  height:18px !important;
}

.al-account-sheet-overlay{
  position:fixed;
  inset:0;
  z-index:2147483588;
  border:0;
  padding:0;
  margin:0;
  background:rgba(15,23,42,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.al-account-sheet{
  position:fixed;
  left:50%;
  right:auto;
  bottom:0;
  z-index:2147483589;
  width:min(440px, calc(100vw - 16px));
  max-height:min(82dvh, 620px);
  overflow:auto;
  overscroll-behavior:contain;
  transform:translate(-50%, calc(100% + 18px));
  opacity:0;
  pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.10);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  box-shadow:0 -18px 48px rgba(15,23,42,.18);
  padding:8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}

body.is-account-sheet-open .al-account-sheet-overlay{
  opacity:1;
  pointer-events:auto;
}

body.is-account-sheet-open .al-account-sheet{
  transform:translate(-50%, 0);
  opacity:1;
  pointer-events:auto;
}

.al-account-sheet__handle{
  width:42px;
  height:4px;
  border-radius:999px;
  background:rgba(15,23,42,.16);
  margin:6px auto 10px;
}

.al-account-sheet__head{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 4px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.al-account-sheet__profile{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.al-account-sheet__avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(44,107,74,.10);
  color:#2C6B4A;
}

.al-account-sheet__avatar-img{
  width:44px;
  height:44px;
  object-fit:cover;
  display:block;
}

.al-account-sheet__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.al-account-sheet__meta strong,
.al-account-sheet__meta span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.al-account-sheet__meta strong{
  font:700 15px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-account-sheet__meta span{
  color:rgba(15,23,42,.58);
  font:600 12px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-account-sheet__meta small{
  color:rgba(15,23,42,.56);
  font:500 12px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-account-sheet__xp{
  display:block;
  width:100%;
  height:5px;
  margin-top:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(15,23,42,.10);
}

.al-account-sheet__xp i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#2C6B4A;
}

.al-account-sheet__close{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.al-account-sheet__nav{
  display:grid;
  gap:4px;
  padding:10px 0 0;
}

.al-account-sheet__link{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  border-radius:12px;
  color:#0f172a;
  text-decoration:none;
  font:650 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

button.al-account-sheet__link{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.al-account-sheet__link:hover,
.al-account-sheet__link:focus-visible{
  background:rgba(44,107,74,.07);
  color:#2C6B4A;
  outline:0;
}

.al-account-sheet__link--danger{
  color:#9f1239;
}

.al-account-sheet__link--danger:hover,
.al-account-sheet__link--danger:focus-visible{
  background:rgba(159,18,57,.07);
  color:#9f1239;
}

.al-account-sheet__link-ico{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.al-account-sheet__link-ico svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.al-mobile-menu{
  position:fixed;
  inset:0;
  z-index:2147483587;
}

.al-mobile-menu[hidden]{
  display:none !important;
}

.al-mobile-menu__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:rgba(15,23,42,.24);
  opacity:0;
  transition:opacity .18s ease;
}

.al-mobile-menu__panel{
  position:absolute;
  top:0;
  left:0;
  width:min(320px, 86vw);
  height:100dvh;
  padding:calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background:#fff;
  color:#0f172a;
  border-right:1px solid rgba(15,23,42,.10);
  box-shadow:20px 0 48px rgba(15,23,42,.14);
  transform:translateX(-104%);
  transition:transform .2s ease;
  box-sizing:border-box;
  overflow:auto;
}

body.is-header-menu-open .al-mobile-menu__overlay{
  opacity:1;
}

body.is-header-menu-open .al-mobile-menu__panel{
  transform:translateX(0);
}

.al-mobile-menu__head{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.al-mobile-menu__title{
  font:800 16px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-mobile-menu__close{
  width:38px;
  height:38px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:1;
}

.al-mobile-menu__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}

.al-mobile-menu__list a{
  min-height:46px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:12px;
  color:#0f172a;
  text-decoration:none;
  font:650 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.al-mobile-menu__list a:hover,
.al-mobile-menu__list a:focus-visible{
  background:rgba(44,107,74,.07);
  color:#2C6B4A;
  outline:0;
}

@media (prefers-reduced-motion: reduce){
  .al-account-sheet,
  .al-account-sheet-overlay,
  .al-mobile-menu__overlay,
  .al-mobile-menu__panel{
    transition:none !important;
  }
}

/* Mobile command search surface: final overrides after historical CmdK rules. */
#alCmdk{
  --al-cmdk-vh:100dvh;
  --al-cmdk-top:0px;
}

body.is-search-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

#alCmdk .al-cmdk__chip,
#alCmdk .al-cmdk__recent{
  appearance:none;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  min-height:36px;
  padding:0 13px;
  font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}

#alCmdk .al-cmdk__chip:hover,
#alCmdk .al-cmdk__chip:focus-visible,
#alCmdk .al-cmdk__recent:hover,
#alCmdk .al-cmdk__recent:focus-visible{
  border-color:rgba(44,107,74,.30);
  background:rgba(44,107,74,.06);
  color:#2C6B4A;
  outline:2px solid rgba(44,107,74,.18);
  outline-offset:2px;
}

#alCmdk .al-cmdk__chips,
#alCmdk .al-cmdk__recent-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

#alCmdk .al-cmdk__recent-title{
  width:100%;
  margin:6px 0 0;
  color:rgba(15,23,42,.54);
  font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

#alCmdk .al-cmdk__search-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  margin-top:12px;
  padding:0 15px;
  border-radius:12px;
  background:#2C6B4A;
  color:#fff;
  text-decoration:none;
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

#alCmdk .al-cmdk__result-link{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

#alCmdk #alCmdkList li.is-active{
  background:rgba(44,107,74,.06) !important;
  border-color:rgba(44,107,74,.22) !important;
}

@media (min-width:821px){
  #alCmdk #alCmdkList li .t{
    order:1;
  }

  #alCmdk #alCmdkList li em{
    order:2;
  }
}

@media (max-width:820px){
  html body.is-search-open,
  body.is-search-open{
    width:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.is-search-open #alCmdk,
  #alCmdk[aria-hidden="false"]:not([hidden]){
    position:fixed !important;
    inset:0 !important;
    top:var(--al-cmdk-top, 0px) !important;
    bottom:auto !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100vw !important;
    height:var(--al-cmdk-vh, 100dvh) !important;
    min-height:var(--al-cmdk-vh, 100dvh) !important;
    max-height:var(--al-cmdk-vh, 100dvh) !important;
    padding:0 !important;
    background:rgba(15,23,42,.42) !important;
    backdrop-filter:blur(4px) !important;
    overflow:hidden !important;
    z-index:2147483580 !important;
  }

  #alCmdkOverlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.42) !important;
    z-index:2147483579 !important;
  }

  #alCmdk .al-cmdk__panel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:var(--al-cmdk-vh, 100dvh) !important;
    min-height:var(--al-cmdk-vh, 100dvh) !important;
    max-height:var(--al-cmdk-vh, 100dvh) !important;
    display:flex !important;
    flex-direction:column !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    overflow:hidden !important;
    transform:none !important;
  }

  #alCmdk .al-sheet-grip{
    display:none !important;
  }

  #alCmdk .al-cmdk__search{
    position:sticky !important;
    top:0 !important;
    z-index:3 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px !important;
    background:#fff !important;
    border-bottom:1px solid rgba(15,23,42,.08) !important;
  }

  #alCmdk #alCmdkInput{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    border:1px solid rgba(15,23,42,.12) !important;
    border-radius:14px !important;
    background:#f8faf9 !important;
    color:#0f172a !important;
    padding:0 14px !important;
    font:500 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
    outline:none !important;
    box-shadow:none !important;
  }

  #alCmdk #alCmdkInput:focus{
    border-color:rgba(44,107,74,.38) !important;
    box-shadow:0 0 0 3px rgba(44,107,74,.10) !important;
    background:#fff !important;
  }

  #alCloseCmdk{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#0f172a !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font:600 24px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  }

  #alCloseCmdk:hover,
  #alCloseCmdk:focus-visible{
    background:rgba(44,107,74,.06) !important;
    color:#2C6B4A !important;
    outline:2px solid rgba(44,107,74,.18) !important;
    outline-offset:2px !important;
  }

  #alCmdk #alCmdkList{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding:12px 16px 96px !important;
    margin:0 !important;
    list-style:none !important;
    background:#fff !important;
  }

  #alCmdk #alCmdkList li{
    width:100% !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:6px !important;
    margin:0 0 8px !important;
    padding:12px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#0f172a !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    box-shadow:none !important;
  }

  #alCmdk .al-cmdk__result-link{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:6px !important;
    color:inherit !important;
    text-decoration:none !important;
  }

  #alCmdk #alCmdkList li:hover,
  #alCmdk #alCmdkList li.is-active,
  #alCmdk #alCmdkList li:focus,
  #alCmdk #alCmdkList li:focus-visible,
  #alCmdk #alCmdkList li:active{
    background:rgba(44,107,74,.045) !important;
    border-color:rgba(44,107,74,.22) !important;
    outline:none !important;
  }

  #alCmdk #alCmdkList li .t{
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    overflow:visible !important;
    white-space:normal !important;
    text-overflow:clip !important;
    color:#0f172a !important;
    font:650 15px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  }

  #alCmdk #alCmdkList li em{
    order:0 !important;
    align-self:flex-start !important;
    max-width:100% !important;
    margin:0 !important;
    padding:4px 8px !important;
    border-radius:999px !important;
    background:rgba(44,107,74,.08) !important;
    color:#2C6B4A !important;
    font:650 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
    white-space:nowrap !important;
  }

  #alCmdk #alCmdkList li.is-empty,
  #alCmdk #alCmdkList li.al-cmdk__state,
  #alCmdk #alCmdkList li.al-cmdk__empty-state{
    min-height:0 !important;
    cursor:default !important;
    padding:16px !important;
    border-style:dashed !important;
    background:#fbfcfb !important;
    text-align:left !important;
    opacity:1 !important;
  }

  #alCmdk #alCmdkList li.is-empty:hover,
  #alCmdk #alCmdkList li.al-cmdk__state:hover,
  #alCmdk #alCmdkList li.al-cmdk__empty-state:hover{
    background:#fbfcfb !important;
    border-color:rgba(15,23,42,.08) !important;
  }

  #alCmdk #alCmdkList li.al-cmdk__empty-state strong,
  #alCmdk #alCmdkList li.al-cmdk__no-results strong{
    color:#0f172a !important;
    font:750 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  }

  #alCmdk #alCmdkList li.al-cmdk__empty-state span,
  #alCmdk #alCmdkList li.al-cmdk__no-results span{
    color:rgba(15,23,42,.62) !important;
    font:500 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  }

  #alCmdk .al-cmdk__chips,
  #alCmdk .al-cmdk__recent-wrap{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:12px !important;
  }

  #alCmdk .al-cmdk__chip,
  #alCmdk .al-cmdk__recent{
    min-height:38px !important;
    padding:0 13px !important;
    font-size:13px !important;
  }

  #alCmdk #al-search-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:3 !important;
    flex:0 0 auto !important;
    display:flex !important;
    justify-content:stretch !important;
    padding:10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    background:#fff !important;
    border-top:1px solid rgba(15,23,42,.08) !important;
  }

  #alCmdk #al-search-viewall{
    width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:14px !important;
    background:#2C6B4A !important;
    color:#fff !important;
    text-decoration:none !important;
    font:750 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  }

  #alCmdk #al-search-viewall[hidden]{
    display:none !important;
  }
}

@media (max-width:380px){
  #alCmdk #alCmdkList{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

.al-header-root #icon-cart,
.al-header-root .al-icon--cart,
header.site-header #icon-cart.al-icon {
  display:none !important;
}

body.al-header-show-cart .al-header-root #icon-cart,
body.al-header-show-cart .al-header-root .al-icon--cart,
body.al-header-show-cart header.site-header #icon-cart.al-icon {
  display:inline-flex !important;
}

.al-header-root.is-auth-unknown .al-header-account-slot,
#alHeader.is-auth-unknown .al-header-account-slot,
.al-header-root[data-auth-state="unknown"] .al-header-account-slot,
#alHeader[data-auth-state="unknown"] .al-header-account-slot{
  flex-basis:var(--al-header-account-w, 64px) !important;
  width:var(--al-header-account-w, 64px) !important;
  min-width:var(--al-header-account-w, 64px) !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.al-header-root.is-authenticated #alLoginPill,
.al-header-root.is-authenticated #alSignupPill,
#alHeader.is-authenticated #alLoginPill,
#alHeader.is-authenticated #alSignupPill,
.al-header-root[data-auth-state="in"] #alLoginPill,
.al-header-root[data-auth-state="in"] #alSignupPill,
#alHeader[data-auth-state="in"] #alLoginPill,
#alHeader[data-auth-state="in"] #alSignupPill{
  display:none !important;
}

.al-header-root.is-anonymous #alAccountPill,
.al-header-root.is-anonymous #icon-user.al-mobile-account-trigger,
#alHeader.is-anonymous #alAccountPill,
#alHeader.is-anonymous #icon-user.al-mobile-account-trigger,
.al-header-root[data-auth-state="out"] #alAccountPill,
.al-header-root[data-auth-state="out"] #icon-user.al-mobile-account-trigger,
#alHeader[data-auth-state="out"] #alAccountPill,
#alHeader[data-auth-state="out"] #icon-user.al-mobile-account-trigger{
  display:none !important;
}

/* Header auth/search collision guard. Mirrors al-header-shell for cached/order variants. */
@media (min-width: 981px){
  .al-header-root .al-util,
  #alHeader .al-util{
    width:auto !important;
    min-width:0 !important;
    gap:0 !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
  }

  .al-header-root #icon-search.al-icon,
  #alHeader #icon-search.al-icon{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    margin:0 12px 0 0 !important;
  }

  .al-header-root #icon-search.al-icon + .al-header-account-slot,
  #alHeader #icon-search.al-icon + .al-header-account-slot{
    margin-left:0 !important;
  }

  .al-header-root .al-header-account-slot:not([aria-hidden="true"]),
  #alHeader .al-header-account-slot:not([aria-hidden="true"]){
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
  }

  .al-header-root .al-header-account-slot:not([aria-hidden="true"]) .al-authpill,
  #alHeader .al-header-account-slot:not([aria-hidden="true"]) .al-authpill{
    flex:0 0 auto !important;
  }

  .al-header-root #alLoginPill.al-authpill,
  #alHeader #alLoginPill.al-authpill{
    margin-left:0 !important;
  }
}

@media (min-width: 981px){
  #alHeader button#icon-search.al-icon.al-icon--search,
  .al-header-root button#icon-search.al-icon.al-icon--search{
    margin-right:12px !important;
  }
}

/* Quick-search result semantics: scoped additions for grouped REST results. */
#alCmdk #alCmdkList > li.al-cmdk__group{
  min-height:0 !important;
  padding:14px 12px 5px !important;
  border:0 !important;
  background:transparent !important;
  color:#64748b !important;
  cursor:default !important;
  font:800 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  pointer-events:none !important;
}

#alCmdk #alCmdkList > li[role="option"]{
  scroll-margin-block:8px;
}

#alCmdk #alCmdkList > li[role="option"][aria-selected="true"],
#alCmdk #alCmdkList > li[role="option"].is-active{
  background:#e9f5ee !important;
  border-color:#8cbda0 !important;
  outline:2px solid rgba(44,107,74,.22) !important;
  outline-offset:-2px !important;
}

#alCmdk .al-cmdk__result-link{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:4px 10px !important;
  align-items:center !important;
}

#alCmdk .al-cmdk__result-link .t{
  min-width:0;
}

#alCmdk .al-cmdk__badge{
  display:inline-flex;
  align-items:center;
  border:1px solid #c9dfd1;
  border-radius:999px;
  padding:2px 7px;
  color:#276445;
  background:#f2faf5;
  font:750 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  white-space:nowrap;
}

#alCmdk .al-cmdk__excerpt{
  grid-column:1 / -1;
  display:block;
  overflow:hidden;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#alCmdk #alCmdkList > li.al-cmdk__view-all-option{
  margin-top:8px !important;
  border-style:dashed !important;
}


/* Source: al-members/assets/css/product-buttons.css */
/**
 * Modern Natural action controls — single production owner, Phase 1.
 * Opt-in .al-btn only. Existing workspace geometry and controller hooks stay intact.
 */
:root {
  --al-button-primary: #2c6b4a;
  --al-button-primary-hover: #183f2d;
  --al-button-ink: #14231c;
  --al-button-surface: #fff;
  --al-button-subtle: #edf6f0;
  --al-button-border: #dee5e2;
  --al-button-focus: #416a78;
  --al-button-disabled-text: #52645b;
  --al-button-danger: #963939;
  --al-button-danger-surface: #fff0f0;
  --al-button-danger-hover: #f8dddd;
  --al-button-radius: 6px;
}
/* Product controls must outrank Elementor kit's generic `.elementor-kit-* button`. */
:root .al-btn {
  --al-btn-bg: var(--al-button-surface);
  --al-btn-bg-hover: var(--al-button-subtle);
  --al-btn-bg-active: var(--al-button-subtle);
  --al-btn-border: var(--al-button-border);
  --al-btn-border-hover: var(--al-button-primary);
  --al-btn-color: var(--al-button-ink);
  --al-btn-color-hover: var(--al-btn-color);
  --al-btn-shadow: none;
  --al-btn-shadow-hover: none;
  --al-btn-shadow-active: none;
  --al-btn-hover-y: 0;
  --al-btn-active-y: 0;
  --al-btn-padding-x: 20px;
  --al-btn-gap: 8px;
  --al-btn-icon-size: 18px;
  --al-btn-min-height: 42px;
  --al-btn-radius: var(--al-button-radius);
  --al-btn-font-size: 14px;
  --al-btn-line-height: 1.1;
  --al-btn-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --al-btn-font-weight: 700;
  --al-font-family-body: var(--al-btn-font-family);
  --al-font-weight-semibold: var(--al-btn-font-weight);
  --al-motion-fast: .14s;
  --al-motion-normal: .18s;
  --al-ease-standard: ease;
  --al-shadow-focus-ring: 0 0 0 3px var(--al-button-focus);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
  --al-btn-surface: var(--al-btn-bg);
  --al-btn-foreground: var(--al-btn-color);
  --al-btn-stroke: var(--al-btn-border);
  --al-btn-transform: none;
  --al-btn-focus-outline: 2px solid var(--al-button-focus);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-btn-gap);
  min-block-size: var(--al-btn-min-height);
  max-inline-size: 100%;
  padding: 0 var(--al-btn-padding-x);
  border: 1px solid var(--al-btn-stroke);
  border-radius: var(--al-btn-radius);
  background: var(--al-btn-surface);
  color: var(--al-btn-foreground);
  -webkit-text-fill-color: var(--al-btn-foreground);
  box-shadow: var(--al-btn-shadow);
  font-family: var(--al-btn-font-family);
  font-size: var(--al-btn-font-size);
  font-weight: var(--al-btn-font-weight);
  line-height: var(--al-btn-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

/* State skin must also outrank Elementor kit's generic button:hover/focus.
 * Reassert only paint, not component-owned dimensions or typography. */
:root .al-btn:is(:hover, :focus, :active) {
  background: var(--al-btn-surface);
  color: var(--al-btn-foreground);
  -webkit-text-fill-color: var(--al-btn-foreground);
  border-color: var(--al-btn-stroke);
  box-shadow: var(--al-btn-shadow);
}

@media (hover: hover) {
  .al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):hover {
    --al-btn-surface: var(--al-btn-bg-hover);
    --al-btn-foreground: var(--al-btn-color-hover);
    --al-btn-stroke: var(--al-btn-border-hover);
    text-decoration: none;
  }
}

.al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):active {
  --al-btn-surface: var(--al-btn-bg-active);
  --al-btn-stroke: var(--al-btn-border-hover);
}

.al-btn:focus-visible {
  outline: 2px solid var(--al-button-focus);
  outline-offset: 3px;
}

.al-btn:disabled,
.al-btn[aria-disabled="true"],
.al-btn.is-disabled {
  --al-btn-surface: var(--al-button-subtle);
  --al-btn-foreground: var(--al-button-disabled-text);
  --al-btn-stroke: var(--al-button-border);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.al-btn > svg,
.al-btn .al-btn__icon {
  flex: 0 0 auto;
  inline-size: var(--al-btn-icon-size);
  block-size: var(--al-btn-icon-size);
}

.al-btn.al-btn--primary {
  --al-btn-bg: var(--al-button-primary);
  --al-btn-bg-hover: var(--al-button-primary-hover);
  --al-btn-bg-active: var(--al-button-primary-hover);
  --al-btn-border: var(--al-button-primary);
  --al-btn-border-hover: var(--al-button-primary-hover);
  --al-btn-color: var(--al-button-surface);
}

.al-btn.al-btn--secondary {
  --al-btn-bg: var(--al-button-surface);
}

/* Opt-in PRO identity. Keep free-account/discovery actions on their own skin.
 * Warm sand is a muted edge only; the forest surface carries the contrast. */
.al-btn.al-btn--premium {
  --al-btn-bg: linear-gradient(115deg, var(--al-color-deep-moss, #183f2d), var(--al-color-moss, #2c6b4a));
  --al-btn-bg-hover: linear-gradient(115deg, var(--al-color-moss, #2c6b4a), #2e7856);
  --al-btn-bg-active: linear-gradient(115deg, var(--al-color-deep-moss, #183f2d), var(--al-color-moss, #2c6b4a));
  --al-btn-border: rgba(var(--al-color-warm-sand-rgb, 198,154,98), .24);
  --al-btn-border-hover: rgba(var(--al-color-warm-sand-rgb, 198,154,98), .36);
  --al-btn-color: var(--al-button-surface);
  background-origin: border-box;
}

/* A light inner ring keeps keyboard focus visible on dark PRO hero surfaces. */
.al-btn.al-btn--premium:focus-visible {
  --al-btn-shadow: 0 0 0 2px var(--al-button-surface);
}

.al-btn.al-btn--secondary-outline {
  --al-btn-bg: var(--al-button-surface);
  --al-btn-bg-hover: var(--al-color-surface-subtle, #edf5f0);
  --al-btn-bg-active: var(--al-color-surface-subtle, #edf5f0);
  --al-btn-border: var(--al-button-primary);
  --al-btn-border-hover: var(--al-button-primary-hover);
  --al-btn-color: var(--al-button-primary);
}

/* Homepage discovery CTA: a free-account action may reuse this premium paint
 * without inheriting PRO entitlements, checkout behavior or a separate button. */
.al-btn.al-btn--discovery-cta,
.al-homepage__hero .al-btn--primary[data-al-home-track="homepage_planner_primary"] {
  --al-discovery-bg: linear-gradient(115deg, var(--al-button-primary), #32794f);
  --al-discovery-bg-hover: linear-gradient(115deg, #32794f, #378253);
  --al-discovery-border: #43865e;
  --al-discovery-border-hover: #57966e;
  --al-btn-bg: var(--al-discovery-bg);
  --al-btn-bg-hover: var(--al-discovery-bg-hover);
  --al-btn-bg-active: var(--al-discovery-bg);
  --al-btn-border: var(--al-discovery-border);
  --al-btn-border-hover: var(--al-discovery-border-hover);
}

.al-btn.al-btn--soft { --al-btn-bg: var(--al-button-subtle); }
.al-btn.al-btn--outline { --al-btn-bg: transparent; }
.al-btn.al-btn--ghost, .al-btn.al-btn--tertiary, .al-btn.al-btn--link { --al-btn-bg: transparent; --al-btn-border: transparent; --al-btn-border-hover: transparent; --al-btn-color: var(--al-button-primary); }
.al-btn.al-btn--danger { --al-btn-bg: var(--al-button-danger-surface); --al-btn-bg-hover: var(--al-button-danger-hover); --al-btn-bg-active: var(--al-button-danger-hover); --al-btn-border: var(--al-button-danger); --al-btn-border-hover: var(--al-button-danger); --al-btn-color: var(--al-button-danger); }
.al-btn.al-btn--success { --al-btn-bg: #e5f4eb; --al-btn-bg-hover: #d7ecdf; --al-btn-border: #3a8b5d; --al-btn-color: #1f6843; }
.al-btn.al-btn--warning { --al-btn-bg: #fff4d8; --al-btn-bg-hover: #fae9bf; --al-btn-border: #c6952e; --al-btn-color: #765a0b; }
.al-btn.al-btn--small,
.al-btn.al-btn--sm { --al-btn-min-height: 34px; --al-btn-padding-x: 12px; --al-btn-icon-size: 16px; --al-btn-font-size: 12px; }
.al-btn.al-btn--large { --al-btn-min-height: 50px; --al-btn-padding-x: 24px; --al-btn-icon-size: 20px; --al-btn-font-size: 16px; }
.al-btn.al-btn--icon { --al-btn-padding-x: 0; inline-size: var(--al-btn-min-height); min-inline-size: var(--al-btn-min-height); }

@media (max-width: 640px) { :root .al-btn { min-block-size: max(var(--al-btn-min-height), 44px); } .al-btn.al-btn--icon { inline-size:max(var(--al-btn-min-height),44px); min-inline-size:max(var(--al-btn-min-height),44px); } }
@media (prefers-reduced-motion: reduce) { .al-btn { transition-duration: 1ms; } }

.al-btn.is-loading, .al-btn[aria-busy="true"], .al-btn[data-busy="1"] { cursor:progress; }
.al-btn.al-btn--link { --al-btn-padding-x:0; text-decoration:underline; text-underline-offset:.16em; }
.al-btn.al-btn--inverse, .al-btn.al-btn--ghost-inverse { --al-btn-bg:transparent; --al-btn-bg-hover:rgba(255,255,255,.12); --al-btn-bg-active:rgba(255,255,255,.18); --al-btn-border:rgba(255,255,255,.6); --al-btn-border-hover:#fff; --al-btn-color:#fff; }
.al-btn.al-btn--ghost-inverse { --al-btn-border:transparent; --al-btn-border-hover:transparent; }
.al-btn.al-btn--inverse:focus-visible, .al-btn.al-btn--ghost-inverse:focus-visible { outline-color:#fff; }
.al-btn.al-btn--glass, .al-btn.al-btn--hero-secondary { --al-btn-bg:transparent; --al-btn-color:var(--al-context-text,var(--al-button-primary)); --al-btn-border:var(--al-context-outline-border,var(--al-button-border)); }
.al-btn.al-btn--info { --al-btn-bg:#e6f0f3; --al-btn-bg-hover:#d7ebf0; --al-btn-color:var(--al-button-focus); }
@media (forced-colors:active) { .al-btn { border-color:ButtonText; } .al-btn:focus-visible { outline-color:Highlight; } }
#alMemberArea.al-tanks .al-btn--primary :is(svg,.al-inlineIcon,.al-inventoryActions__plus) { color:#fff; -webkit-text-fill-color:#fff; }

/* Long contextual purchase labels wrap without changing the primary skin. */
.al-btn.al-btn--wrap { white-space:normal; padding-block:10px; }

/* Preserve the controller's hidden state even against legacy important display
 * rules. Layered importance deliberately outranks those unlayered rules without
 * increasing selector specificity. `until-found` keeps its native semantics. */
@layer al-button-visibility {
  :where(.al-btn[hidden]:not([hidden="until-found"])) { display:none !important; }
}

/* Public action controls are flat editorial affordances, including legacy/raw
 * buttons outside .al-btn (native confirmations, account menus and summaries).
 * Layered importance beats Elementor/legacy important hover shadows without
 * changing any component's paint, geometry, positioning transform or icon.
 * Existing motion-token consumers also stay still. Never target admin tools. */
@layer al-editorial-actions {
  :where(body:not(.wp-admin) :is(button, input[type="button"], input[type="submit"],
      input[type="reset"], .al-btn, .button, .elementor-button, .wp-element-button,
      [role="button"], summary):not(:where(#wpadminbar, #wpadminbar *))) {
    --al-btn-shadow: none !important;
    --al-btn-shadow-hover: none !important;
    --al-btn-shadow-active: none !important;
    --al-btn-transform: none !important;
    --al-btn-hover-y: 0 !important;
    --al-btn-active-y: 0 !important;
    box-shadow: none !important;
  }
  /* A real outline remains available where old controls used shadow-only focus.
   * Component focus tokens are respected; photo/icon controls use their ink. */
  :where(body:not(.wp-admin) :is(button, input[type="button"], input[type="submit"],
      input[type="reset"], .al-btn, .button, .elementor-button, .wp-element-button,
      [role="button"], summary):not(:where(#wpadminbar, #wpadminbar *))):focus-visible {
    outline: var(--al-btn-focus-outline, 2px solid currentColor) !important;
    outline-offset: 3px;
  }
}


/* Source: al-members/ui/css/al-header-shell.css */
/* AquariumLesson header shell: critical layout independent of Elementor. */
:root {
  --al-header-h-desktop: 64px;
  --al-header-h-mobile: 60px;
  --al-header-h: var(--al-header-h-desktop);
  --al-header-z: 2147482600;
  --al-drawer-z: calc(var(--al-header-z) + 20);
  --al-header-accent: #2C6B4A;
  --al-header-ink: #102018;
  --al-header-muted: #5f6f67;
  --al-header-border: rgba(20, 33, 27, 0.1);
  --al-header-soft: #f6f8f6;
  --al-bottom-nav-h: 0px;
}

body.has-bottom-nav {
  padding-bottom: 0 !important;
}

#alBottomNav,
.al-bottom-nav {
  display: none !important;
}

.elementor-widget-shortcode:has(#alHeader),
.elementor-shortcode:has(#alHeader),
.elementor-widget-container:has(#alHeader) {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.elementor-34953 .elementor-element.elementor-element-67f4380:has(#alHeader) {
  --display: block !important;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

#alHeader,
#alHeader * {
  box-sizing: border-box;
}

#alHeader.al-header-root,
#alHeader.al-header,
#alHeader.al-header-shell {
  --al-header-h: var(--al-header-h-desktop);
  --al-header-side-w: 328px;
  --al-header-actions-w: 328px;
  --al-header-account-w: 260px;
  --al-header-actions-gap: 12px;
  position: fixed !important;
  top: var(--wp-admin--admin-bar--height, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--al-header-z) !important;
  /* `100vw` includes the vertical scrollbar. On narrow desktop/tablet
   * viewports that pushed the right-side Join CTA outside the visible area. */
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--al-header-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--al-header-ink) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--al-header-border) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: saturate(1.2) blur(14px);
}

#alHeaderSpacer,
.al-header-spacer {
  /* The header owns its height token. Do not let unrelated late :root CSS
   * change the spacer without changing the fixed header with it. */
  --al-header-h: var(--al-header-h-desktop);
  --al-header-spacer-h: var(--al-header-h);
  display: block !important;
  width: 100% !important;
  height: var(--al-header-spacer-h) !important;
  min-height: var(--al-header-spacer-h) !important;
  flex: 0 0 var(--al-header-spacer-h) !important;
  pointer-events: none !important;
}

@media (min-width: 768px) {
  #alHeaderSpacer,
  .al-header-spacer {
    /* The fixed header's border sits below its bar at these widths. */
    --al-header-spacer-h: calc(var(--al-header-h) + 1px);
  }
}

body.admin-bar #alHeader {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar #alHeader {
    top: 46px !important;
  }
}

#alHeader .al-header__bar,
#alHeader .al-header-shell__bar {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--al-header-h) !important;
  min-height: var(--al-header-h) !important;
  margin: 0 !important;
  padding: 0 clamp(20px, 4vw, 64px) !important;
}

#alHeader .al-logo,
#alHeader .al-header-shell__brand {
  position: static !important;
  grid-column: 1 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  min-width: 292px !important;
  max-width: 100% !important;
  height: 44px !important;
  color: var(--al-header-ink) !important;
  text-decoration: none !important;
  gap: 10px !important;
  line-height: 1 !important;
}

#alHeader .al-logo__img,
#alHeader .al-header-shell__logo-img {
  display: block !important;
  width: 120px !important;
  height: 42px !important;
  min-width: 120px !important;
  min-height: 42px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

#alHeader .al-logo picture,
#alHeader .al-header-shell__brand picture {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 120px !important;
  width: 120px !important;
  height: 42px !important;
  min-width: 120px !important;
  overflow: hidden !important;
}

#alHeader .al-logo__mark,
#alHeader .al-header-shell__logo-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--al-header-accent) !important;
  font: 800 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#alHeader .al-logo__text,
#alHeader .al-header-shell__brand-text {
  display: inline-block !important;
  max-width: 168px !important;
  overflow: hidden !important;
  color: var(--al-header-ink) !important;
  font: 800 18px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#alHeader .al-nav {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
  height: 44px !important;
}

#alHeader .al-nav__item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
}

#alHeader .al-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color:var(--al-nav-hover-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 14px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#alHeader .al-nav__link:hover,
#alHeader .al-nav__item:focus-within .al-nav__link {
  color:var(--al-nav-selected) !important;
  background: var(--al-header-soft) !important;
}

#alHeader .al-nav__chevron {
  display: inline-block !important;
  color: #7b8983 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  transform: translateY(1px);
}

#alHeader .al-nav__menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  z-index: calc(var(--al-header-z) + 1) !important;
  display: grid !important;
  min-width: 210px !important;
  padding: 8px !important;
  border: 1px solid var(--al-header-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -4px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

#alHeader .al-nav__item:hover .al-nav__menu,
#alHeader .al-nav__item:focus-within .al-nav__menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

#alHeader .al-nav__menu-link {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: #22352d !important;
  font: 700 14px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
}

#alHeader .al-nav__menu-link:hover {
  color:var(--al-nav-selected) !important;
  background: var(--al-header-soft) !important;
}

#alHeader .al-util {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#alHeader #icon-cart,
#alHeader .al-icon--cart {
  display: none !important;
}

body.al-header-show-cart #alHeader #icon-cart,
body.al-header-show-cart #alHeader .al-icon--cart {
  display: inline-flex !important;
}

#alHeader .al-header-account-slot {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#alHeader .al-header-account-slot[aria-hidden="true"],
#alHeader .al-header-account-slot[data-auth-state="unknown"] {
  flex-basis: var(--al-header-account-w) !important;
  width: var(--al-header-account-w) !important;
  min-width: var(--al-header-account-w) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#alHeader.is-auth-unknown .al-header-account-slot,
#alHeader[data-auth-state="unknown"] .al-header-account-slot {
  flex-basis: var(--al-header-account-w) !important;
  width: var(--al-header-account-w) !important;
  min-width: var(--al-header-account-w) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#alHeader.is-authenticated #alLoginPill,
#alHeader.is-authenticated #alSignupPill,
#alHeader[data-auth-state="in"] #alLoginPill,
#alHeader[data-auth-state="in"] #alSignupPill,
#alHeader .al-header-account-slot[data-auth-state="in"] #alLoginPill,
#alHeader .al-header-account-slot[data-auth-state="in"] #alSignupPill {
  display: none !important;
}

#alHeader.is-anonymous #alAccountPill,
#alHeader.is-anonymous #icon-user.al-mobile-account-trigger,
#alHeader[data-auth-state="out"] #alAccountPill,
#alHeader[data-auth-state="out"] #icon-user.al-mobile-account-trigger,
#alHeader .al-header-account-slot[data-auth-state="out"] #alAccountPill,
#alHeader .al-header-account-slot[data-auth-state="out"] #icon-user.al-mobile-account-trigger {
  display: none !important;
}

#alHeader .al-icon,
#alHeader button.al-icon,
#alHeader a.al-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(17, 31, 24, 0.1) !important;
  border-radius: 12px !important;
  color: #173326 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  overflow: visible !important;
  cursor: pointer !important;
  appearance: none !important;
}

#alHeader .al-icon:hover,
#alHeader .al-icon:focus-visible {
  border-color: rgba(44, 107, 74, 0.24) !important;
  color: var(--al-header-accent) !important;
  background: #f8fbf9 !important;
}

#alHeader .al-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  stroke-width: 2 !important;
}

#alHeader #icon-cart[data-count]::after,
#alHeader .al-icon--cart[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: var(--al-header-accent);
  font: 800 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#alHeader #icon-cart[data-count="0"]::after,
#alHeader .al-icon--cart[data-count="0"]::after {
  display: none;
}

#alHeader .al-authpill,
.al-lesson-completion .al-authpill,
.al-proUpgrade .al-authpill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: var(--al-authpill-height,40px) !important;
  min-width: 72px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(44, 107, 74, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 2px 5px rgba(23, 63, 44, 0.05),
    0 8px 20px rgba(23, 63, 44, 0.07) !important;
  font: 600 13px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: var(--al-authpill-white-space,nowrap) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transition:
    background-color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 120ms ease !important;
}

#alHeader .al-authpill--secondary {
  color: #173f2c !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8f4 100%) !important;
  border-color: rgba(44, 107, 74, 0.24) !important;
}

#alHeader .al-authpill--primary,
.al-lesson-completion .al-authpill--primary,
.al-proUpgrade .al-authpill--primary {
  color: #fff !important;
  border-color: rgba(159, 220, 189, 0.38) !important;
  background: linear-gradient(135deg, #173f2c 0%, var(--al-header-accent, #2c6b4a) 56%, #407f5c 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 2px 6px rgba(23, 63, 44, 0.16),
    0 12px 26px rgba(23, 63, 44, 0.22) !important;
}

/* Header authentication pills sit on the header surface. Keep their focus
 * outline, but never give these two direct entry points decorative elevation. */
#alHeader #alLoginPill,
#alHeader #alSignupPill {
  box-shadow: none !important;
}

#alHeader .al-authpill--join {
  width: 64px !important;
  min-width: 64px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
}

@media (hover: hover) {
  #alHeader .al-authpill--secondary:hover {
    color: #173f2c !important;
    border-color: rgba(44, 107, 74, 0.36) !important;
    background: linear-gradient(180deg, #ffffff 0%, #eaf5ef 100%) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92) inset,
      0 2px 6px rgba(23, 63, 44, 0.07),
      0 12px 24px rgba(23, 63, 44, 0.10) !important;
    transform: translateY(-1px);
  }

  #alHeader .al-authpill--primary:hover,
  .al-lesson-completion .al-authpill--primary:hover:not(:disabled),
  .al-proUpgrade .al-authpill--primary:hover:not(:disabled) {
    border-color: rgba(198, 233, 213, 0.56) !important;
    background: linear-gradient(135deg, #123624 0%, #2f7350 52%, #4a8b67 100%) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.24) inset,
      0 3px 8px rgba(23, 63, 44, 0.18),
      0 16px 32px rgba(23, 63, 44, 0.28) !important;
    transform: translateY(-1px);
  }
}

#alHeader .al-authpill:focus-visible,
.al-lesson-completion .al-authpill:focus-visible,
.al-proUpgrade .al-authpill:focus-visible {
  outline: 2px solid var(--al-authpill-focus,rgba(44, 107, 74, 0.28)) !important;
  outline-offset: 2px !important;
}

#alHeader .al-authpill:active,
.al-lesson-completion .al-authpill:active:not(:disabled),
.al-proUpgrade .al-authpill:active:not(:disabled) {
  transform: translateY(0);
}

/* These anonymous actions are present in the server HTML. Keep their first
 * paint responsive in CSS, after the generic auth-pill display declaration. */
#alHeader .al-header-account-fallback--mobile {
  display: none !important;
}

@media (max-width: 1180px) {
  #alHeader .al-header-account-fallback--desktop {
    display: none !important;
  }

  #alHeader .al-header-account-fallback--mobile {
    display: inline-flex !important;
  }
}

#alHeader .al-account-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  max-width: 260px !important;
  margin: 0 !important;
  padding: 4px 10px 4px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #173326 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#alHeader #alAccountPill.al-account-pill:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(44, 107, 74, 0.45) !important;
}

#alHeader .al-account-pill__av,
#alHeader .al-account-pill__ico,
#alHeader .al-account-pill__img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#alHeader .al-account-pill__ico {
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.09) !important;
}

#alHeader .al-account-pill__img {
  object-fit: cover !important;
}

#alHeader .al-account-pill__label {
  display: inline-block !important;
  max-width: 168px !important;
  overflow: hidden !important;
  color: #173326 !important;
  font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#alHeader .al-account-pill__chev svg {
  width: 16px !important;
  height: 16px !important;
}

#alHeader .al-burger,
#alHeader .al-header-shell__menu {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(17, 31, 24, 0.1) !important;
  border-radius: 12px !important;
  color: #173326 !important;
  background: #fff !important;
  gap: 5px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
}

#alHeader .al-burger span,
#alHeader .al-header-shell__menu span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.al-drawer,
.al-mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--al-drawer-z) !important;
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.al-drawer[hidden],
.al-mobile-menu[hidden] {
  display: block !important;
}

body.is-header-menu-open .al-drawer,
body.is-header-menu-open .al-mobile-menu {
  visibility: visible !important;
  pointer-events: auto !important;
}

.al-drawer__overlay,
.al-mobile-menu__overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: rgba(15, 23, 42, 0.22) !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
  cursor: pointer !important;
}

body.is-header-menu-open .al-drawer__overlay,
body.is-header-menu-open .al-mobile-menu__overlay {
  opacity: 1 !important;
}

.al-drawer__panel,
.al-mobile-menu__panel {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(88vw, 360px) !important;
  padding: 18px 18px 24px !important;
  border-right: 1px solid var(--al-header-border) !important;
  background: #fff !important;
  box-shadow: 20px 0 60px rgba(15, 23, 42, 0.14) !important;
  overflow-y: auto !important;
  transform: translateX(-102%) !important;
  transition: transform 200ms ease !important;
}

body.is-header-menu-open .al-drawer__panel,
body.is-header-menu-open .al-mobile-menu__panel {
  transform: translateX(0) !important;
}

.al-drawer__head,
.al-mobile-menu__head {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--al-header-h) !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--al-header-border) !important;
}

.al-drawer__title,
.al-mobile-menu__title {
  color: var(--al-header-ink) !important;
  font: 800 17px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.al-drawer__close,
.al-mobile-menu__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  border: 1px solid rgba(17, 31, 24, 0.1) !important;
  border-radius: var(--al-overlay-close-radius,8px) !important;
  color: #173326 !important;
  background: transparent !important;
  font: 400 28px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  cursor: pointer !important;
}

.al-drawer__list,
.al-mobile-menu__list {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.al-drawer__list a,
.al-mobile-menu__list a,
.al-drawer__details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: #173326 !important;
  background: transparent !important;
  font: 800 15px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
}

.al-drawer__list a:hover,
.al-mobile-menu__list a:hover,
.al-drawer__details summary:hover {
  color: var(--al-header-accent) !important;
  background: var(--al-header-soft) !important;
}

.al-drawer__details summary {
  cursor: pointer !important;
}

.al-drawer__details summary::-webkit-details-marker {
  display: none !important;
}

.al-drawer__details[open] {
  padding-bottom: 6px !important;
}

.al-drawer__details a {
  min-height: 40px !important;
  margin-left: 10px !important;
  padding-left: 14px !important;
  color: var(--al-header-muted) !important;
  font-size: 14px !important;
}

#alHeader .al-mobile-account-trigger__avatar,
#alHeader .al-mobile-account-trigger__avatar img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

#alHeader .al-mobile-account-trigger__avatar--empty {
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.09) !important;
}

@media (max-width: 1180px) {
  #alHeader.al-header-root,
  #alHeader.al-header,
  #alHeader.al-header-shell {
    --al-header-side-w: 124px;
    --al-header-actions-w: 124px;
    --al-header-account-w: 64px;
    --al-header-actions-gap: 8px;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    position: static !important;
    grid-template-columns: 44px minmax(0, 1fr) minmax(var(--al-header-actions-w), auto) !important;
    gap: 8px !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu {
    display: inline-flex !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    z-index: 1 !important;
    justify-self: center !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  #alHeader .al-logo__text,
  #alHeader .al-header-shell__brand-text {
    display: none !important;
  }

  #alHeader .al-nav {
    display: none !important;
  }

  #alHeader .al-util {
    grid-column: 3 !important;
    justify-self: end !important;
    width: var(--al-header-actions-w) !important;
    min-width: var(--al-header-actions-w) !important;
    gap: var(--al-header-actions-gap) !important;
  }

  body.al-header-show-cart #alHeader .al-header__bar,
  body.al-header-show-cart #alHeader .al-header-shell__bar {
    grid-template-columns: 44px minmax(0, 1fr) 168px !important;
  }

  body.al-header-show-cart #alHeader .al-util {
    width: 168px !important;
    min-width: 168px !important;
  }

  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    flex: 0 0 var(--al-header-account-w) !important;
    width: var(--al-header-account-w) !important;
    min-width: var(--al-header-account-w) !important;
    overflow: hidden !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu,
  #alHeader .al-util {
    position: relative !important;
    z-index: 2 !important;
  }

  #alHeader .al-nav__link {
    padding: 0 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 980px) {
  #alHeader.al-header-root,
  #alHeader.al-header,
  #alHeader.al-header-shell {
    --al-header-actions-w: 124px;
    --al-header-account-w: 64px;
    --al-header-actions-gap: 8px;
  }

  #alHeader .al-logo__text,
  #alHeader .al-header-shell__brand-text {
    display: none !important;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    grid-template-columns: 44px minmax(0, 1fr) minmax(var(--al-header-actions-w), auto) !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand {
    min-width: 120px !important;
  }

  #alHeader .al-util {
    width: var(--al-header-actions-w) !important;
    min-width: var(--al-header-actions-w) !important;
    gap: 8px !important;
  }

  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    flex: 0 0 var(--al-header-account-w) !important;
    width: var(--al-header-account-w) !important;
    min-width: var(--al-header-account-w) !important;
    overflow: hidden !important;
  }

  #alHeader .al-nav__link {
    padding: 0 6px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --al-header-h: var(--al-header-h-mobile);
  }

  #alHeaderSpacer,
  .al-header-spacer {
    --al-header-h: var(--al-header-h-mobile);
    --al-header-spacer-h: var(--al-header-h);
  }

  #alHeader.al-header-root,
  #alHeader.al-header,
  #alHeader.al-header-shell {
    --al-header-h: var(--al-header-h-mobile);
    --al-header-actions-w: 120px;
    --al-header-account-w: 64px;
    --al-header-actions-gap: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    grid-template-columns: 44px minmax(0, 1fr) minmax(120px, auto) !important;
    gap: 8px !important;
    height: var(--al-header-h) !important;
    min-height: var(--al-header-h) !important;
    padding: 0 12px !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu {
    display: inline-flex !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand {
    grid-column: 2 !important;
    justify-self: center !important;
    height: 42px !important;
    min-width: 104px !important;
    max-width: 100% !important;
  }

  #alHeader .al-logo__img,
  #alHeader .al-header-shell__logo-img {
    width: 104px !important;
    height: 34px !important;
    min-width: 104px !important;
    min-height: 34px !important;
    border-radius: 0 !important;
  }

  #alHeader .al-logo picture,
  #alHeader .al-header-shell__brand picture {
    width: 104px !important;
    height: 34px !important;
    min-width: 104px !important;
  }

  #alHeader .al-logo__mark,
  #alHeader .al-header-shell__logo-mark {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  #alHeader .al-logo__text,
  #alHeader .al-header-shell__brand-text {
    display: none !important;
  }

  #alHeader .al-nav {
    display: none !important;
  }

  #alHeader .al-util {
    grid-column: 3 !important;
    justify-self: end !important;
    min-width: 120px !important;
    gap: 4px !important;
  }

  #alHeader .al-icon,
  #alHeader button.al-icon,
  #alHeader a.al-icon {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 420px) {
  #alHeader .al-logo__text,
  #alHeader .al-header-shell__brand-text {
    display: none !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand {
    min-width: 96px !important;
  }

  #alHeader .al-logo__img,
  #alHeader .al-header-shell__logo-img,
  #alHeader .al-logo picture,
  #alHeader .al-header-shell__brand picture {
    width: 96px !important;
    min-width: 96px !important;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    grid-template-columns: 42px minmax(0, 1fr) minmax(116px, auto) !important;
    padding: 0 10px !important;
  }
}

/* Final header/nav polish overrides. Keep this block after shared AL UI styles. */
#alHeader.al-header-root,
#alHeader.al-header,
#alHeader.al-header-shell {
  background: #fff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
}

#alHeader .al-nav {
  /* Desktop navigation stays inside the existing 44px control area. */
  gap: 4px !important;
}

#alHeader .al-nav__link {
  position: relative !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  color:var(--al-nav-hover-text) !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#alHeader .al-nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--al-header-accent);
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

#alHeader .al-nav__link:hover,
#alHeader .al-nav__link:focus-visible,
#alHeader .al-nav__link.is-active,
#alHeader .al-nav__item.is-open .al-nav__link,
#alHeader .al-nav__item:focus-within .al-nav__link {
  color: var(--al-header-accent) !important;
  background: transparent !important;
}

#alHeader .al-nav__link:hover::after,
#alHeader .al-nav__link:focus-visible::after,
#alHeader .al-nav__link.is-active::after,
#alHeader .al-nav__item.is-open .al-nav__link::after,
#alHeader .al-nav__item:focus-within .al-nav__link::after {
  opacity: 1;
  transform: scaleX(1);
}

#alHeader .al-nav__item--has-submenu::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 16px;
}

#alHeader .al-nav__menu {
  top: calc(100% + 10px) !important;
  z-index: calc(var(--al-header-z) + 20) !important;
  width: max-content !important;
  min-width: 228px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 9px !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: translate(-50%, -6px) !important;
  transition: opacity 150ms ease, transform 150ms ease !important;
}

#alHeader .al-nav__item:hover .al-nav__menu,
#alHeader .al-nav__item:focus-within .al-nav__menu,
#alHeader .al-nav__item.is-open .al-nav__menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

#alHeader .al-nav__menu-link {
  min-height: 42px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  color: #17231d !important;
  font-weight: 560 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#alHeader .al-nav__menu-link:hover,
#alHeader .al-nav__menu-link:focus-visible {
  color: var(--al-header-accent) !important;
  background: rgba(15, 23, 42, 0.025) !important;
}

#alHeader .al-nav__menu-link.is-active {
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.06) !important;
}

/* A category hub is navigation, not another individual database or tool. */
#alHeader .al-nav__menu-link--browse {
  justify-content: space-between !important;
  gap: 20px !important;
  min-height: 44px !important;
  margin-top: 7px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 0 0 10px 10px !important;
  color: #194d34 !important;
  background: #fff !important;
  font-weight: 650 !important;
}

#alHeader .al-nav__menu-link.al-nav__menu-link--browse.is-active {
  color: #194d34 !important;
  background: #fff !important;
}

#alHeader .al-nav__menu-link.al-nav__menu-link--browse:hover,
#alHeader .al-nav__menu-link.al-nav__menu-link--browse:focus-visible,
#alHeader .al-nav__menu-link.al-nav__menu-link--browse.is-active:hover,
#alHeader .al-nav__menu-link.al-nav__menu-link--browse.is-active:focus-visible {
  color: #194d34 !important;
  background: rgba(44, 107, 74, 0.045) !important;
}

#alHeader .al-nav__menu-link-arrow {
  margin-left: auto !important;
  color: inherit !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#alHeader .al-icon,
#alHeader button.al-icon,
#alHeader a.al-icon {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: #13241b !important;
  background: #fff !important;
  box-shadow: none !important;
}

#alHeader .al-icon:hover,
#alHeader .al-icon:focus-visible {
  border-color: rgba(44, 107, 74, 0.26) !important;
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.035) !important;
}

#alHeader .al-icon svg {
  width: 19px !important;
  height: 19px !important;
}

#alHeader .al-authpill {
  height: 40px !important;
  min-width: 70px !important;
  padding: 0 16px !important;
}

#alHeader .al-authpill--secondary:hover,
#alHeader .al-authpill--secondary:focus-visible {
  color: #173f2c !important;
}

.al-drawer,
.al-mobile-menu {
  z-index: var(--al-drawer-z) !important;
}

.al-drawer__overlay,
.al-mobile-menu__overlay {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(2px);
}

.al-drawer__panel,
.al-mobile-menu__panel {
  display: flex !important;
  flex-direction: column !important;
  width: min(88vw, 356px) !important;
  padding: calc(var(--al-header-h) + 10px) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fff !important;
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 18px 0 48px rgba(15, 23, 42, 0.16) !important;
}

.al-drawer__head,
.al-mobile-menu__head {
  padding: 0 14px !important;
}

.al-drawer__title,
.al-mobile-menu__title {
  font-weight: 650 !important;
  font-size: 16px !important;
}

body .al-drawer__close,
body .al-mobile-menu__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  min-width: var(--al-overlay-close-size,44px) !important;
  min-height: var(--al-overlay-close-size,44px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--al-overlay-close-radius,8px) !important;
  color: var(--al-overlay-close-ink,#586d61) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 24px/1 Arial, system-ui, sans-serif !important;
  text-align: center !important;
  appearance: none !important;
}

.al-drawer__list,
.al-mobile-menu__list {
  flex: 1 1 auto !important;
  gap: 2px !important;
}

.al-drawer__list a,
.al-mobile-menu__list a,
.al-drawer__details summary {
  min-height: 44px !important;
  padding: 0 11px !important;
  border-radius: 11px !important;
  color: #14221b !important;
  font-weight: 580 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  background: transparent !important;
}

.al-drawer__list a:hover,
.al-drawer__list a:focus-visible,
.al-mobile-menu__list a:hover,
.al-mobile-menu__list a:focus-visible,
.al-drawer__details summary:hover,
.al-drawer__details summary:focus-visible {
  color: var(--al-header-accent) !important;
  background: rgba(15, 23, 42, 0.025) !important;
  outline: 0 !important;
}

.al-drawer__details[open] > summary {
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.035) !important;
}

.al-drawer__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: rgba(15, 23, 42, 0.48) !important;
  font-size: 11px !important;
  transition: transform 160ms ease !important;
}

.al-drawer__details[open] .al-drawer__chevron {
  transform: rotate(180deg) !important;
}

.al-drawer__sublist {
  display: grid !important;
  gap: 1px !important;
  padding: 4px 0 7px 10px !important;
}

.al-drawer__details .al-drawer__sublist a {
  min-height: 38px !important;
  margin-left: 0 !important;
  padding: 0 10px 0 14px !important;
  border-left: 2px solid rgba(44, 107, 74, 0.18) !important;
  border-radius: 0 10px 10px 0 !important;
  color: #536158 !important;
  font-weight: 520 !important;
  font-size: 14px !important;
}

.al-drawer__auth--in {
  display: none !important;
}

.al-drawer__auth--out {
  display: flex !important;
}

body.logged-in .al-drawer__auth--in,
html.logged-in body .al-drawer__auth--in {
  display: list-item !important;
}

body.logged-in .al-drawer__auth--out,
html.logged-in body .al-drawer__auth--out {
  display: none !important;
}

.al-drawer__cta {
  flex: 0 0 auto !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.al-account-sheet-overlay {
  background: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(2px);
}

body .al-account-sheet {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -20px 56px rgba(15, 23, 42, 0.18) !important;
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

.al-account-sheet__handle {
  width: 42px !important;
  height: 4px !important;
  background: rgba(15, 23, 42, 0.16) !important;
}

.al-account-sheet__head {
  min-height: 58px !important;
  padding: 2px 2px 13px !important;
}

.al-account-sheet__avatar {
  background: rgba(44, 107, 74, 0.08) !important;
  color: var(--al-header-accent) !important;
}

.al-account-sheet__meta strong {
  font-weight: 650 !important;
  font-size: 15px !important;
}

.al-account-sheet__meta span {
  color: rgba(15, 23, 42, 0.56) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

body .al-account-sheet .al-account-sheet__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  min-width: var(--al-overlay-close-size,44px) !important;
  min-height: var(--al-overlay-close-size,44px) !important;
  flex: 0 0 var(--al-overlay-close-size,44px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--al-overlay-close-radius,8px) !important;
  color: var(--al-overlay-close-ink,#586d61) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 24px/1 Arial, system-ui, sans-serif !important;
  text-align: center !important;
  appearance: none !important;
}

.al-account-sheet__nav {
  display: grid !important;
  gap: 12px !important;
  padding-top: 12px !important;
}

.al-account-sheet__section {
  display: grid !important;
  gap: 5px !important;
}

.al-account-sheet__section-title {
  padding: 0 4px 2px !important;
  color: rgba(15, 23, 42, 0.5) !important;
  font: 650 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.al-account-sheet__section-links {
  display: grid !important;
  gap: 3px !important;
}

.al-account-sheet__link {
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  background: transparent !important;
  font-weight: 560 !important;
  font-size: 14px !important;
}

.al-account-sheet__link:hover,
.al-account-sheet__link:focus-visible {
  color: var(--al-header-accent) !important;
  background: rgba(15, 23, 42, 0.025) !important;
}

.al-account-sheet__link-ico {
  color: currentColor !important;
}

.al-account-sheet__section--bottom {
  padding-top: 4px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 767px) {
  #alHeader .al-icon,
  #alHeader button.al-icon,
  #alHeader a.al-icon {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* Desktop identity is a compact menu anchored beneath the header, while the
 * same component remains a full-width focus-trapped sheet on mobile. */
@media (min-width: 1024px) {
  /* Older member-area rules hid this control with the former account rail. */
  body.logged-in.account-area #alHeader #alAccountPill,
  body.logged-in.woocommerce-account #alHeader #alAccountPill {
    display: inline-flex !important;
  }

  body .al-account-sheet-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
  }

  body .al-account-sheet {
    top: calc(var(--al-header-h, 72px) + 10px) !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(342px, calc(100vw - 36px)) !important;
    max-height: calc(100dvh - var(--al-header-h, 72px) - 28px) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(15, 23, 42, 0.11) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
    padding: 10px 12px 12px !important;
    transform: translateY(-8px) !important;
  }

  body.is-account-sheet-open .al-account-sheet {
    transform: translateY(0) !important;
  }

  .al-account-sheet__handle {
    display: none !important;
  }

  .al-account-sheet__nav {
    padding-top: 4px !important;
  }
}

/* Header parity, hierarchy, and interaction hardening. */
html:not(.logged-in) #alHeader.al-header-root,
html:not(.logged-in) #alHeader.al-header,
html:not(.logged-in) #alHeader.al-header-shell,
body:not(.logged-in) #alHeader.al-header-root,
body:not(.logged-in) #alHeader.al-header,
body:not(.logged-in) #alHeader.al-header-shell {
  background: #fff !important;
}

#alHeader .al-nav__item--has-submenu::after {
  height: 26px !important;
  pointer-events: auto !important;
}

#alHeader .al-nav__menu {
  top: calc(100% + 8px) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

#alHeader .al-nav__item:hover .al-nav__menu,
#alHeader .al-nav__item:focus-within .al-nav__menu,
#alHeader .al-nav__item.is-open .al-nav__menu {
  pointer-events: auto !important;
}

#alDrawer .al-drawer__panel.al-mobile-menu__panel {
  background: #fff !important;
  color: #0f172a !important;
}

#alDrawer .al-drawer__identity {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  background: #fff !important;
  min-height: 74px !important;
}

#alDrawer .al-drawer__identity-state {
  grid-column: 1 !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
}

#alDrawer .al-drawer__identity-avatar,
#alDrawer .al-drawer__identity-avatar img {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  object-fit: cover !important;
  background: rgba(44, 107, 74, 0.08) !important;
  color: var(--al-header-accent) !important;
}

#alDrawer .al-drawer__identity-avatar svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}

#alDrawer .al-drawer__identity-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

#alDrawer .al-drawer__identity-skeleton {
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #edf2ef 25%, #f7faf8 50%, #edf2ef 75%) !important;
  background-size: 200% 100% !important;
  animation: alDrawerIdentitySkeleton 1.15s ease-in-out infinite !important;
}

#alDrawer .al-drawer__identity-skeleton--avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

#alDrawer .al-drawer__identity-skeleton--name { width: 62% !important; height: 12px !important; }
#alDrawer .al-drawer__identity-skeleton--meta { width: 44% !important; height: 9px !important; }
#alDrawer .al-drawer__identity-skeleton--progress { width: 100% !important; height: 4px !important; }

@keyframes alDrawerIdentitySkeleton {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #alDrawer .al-drawer__identity-skeleton { animation: none !important; }
}

#alDrawer .al-drawer__identity-copy strong {
  overflow: hidden !important;
  color: #0f172a !important;
  font: 650 15px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#alDrawer .al-drawer__identity-copy span:not(.al-drawer__xp),
#alDrawer .al-drawer__identity-copy small {
  color: rgba(15, 23, 42, 0.58) !important;
  font: 500 12px/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#alDrawer .al-drawer__xp,
.al-account-sheet__xp {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.10) !important;
}

#alDrawer .al-drawer__xp i,
.al-account-sheet__xp i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--al-header-accent) !important;
}

#alDrawer .al-drawer__sections {
  display: grid !important;
  flex: 1 1 auto !important;
  gap: 14px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 2px 0 0 !important;
}

#alDrawer .al-drawer__section {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#alDrawer .al-drawer__section:first-child,
#alDrawer .al-drawer__section--explore:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

#alDrawer[data-auth-state="unknown"] .al-drawer__section--explore,
#alDrawer[data-auth-state="out"] .al-drawer__section--explore,
body:not(.logged-in) #alDrawer:not([data-auth-state="in"]) .al-drawer__section--explore,
html:not(.logged-in) body #alDrawer:not([data-auth-state="in"]) .al-drawer__section--explore {
  border-top: 0 !important;
  padding-top: 0 !important;
}

#alDrawer .al-drawer__section-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(15, 23, 42, 0.52) !important;
  background: transparent !important;
  font: 700 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: default !important;
  list-style: none !important;
}

#alDrawer .al-drawer__section-summary::-webkit-details-marker,
#alDrawer .al-drawer__details > summary::-webkit-details-marker {
  display: none !important;
}

#alDrawer .al-drawer__section[open] > .al-drawer__section-summary .al-drawer__chevron,
#alDrawer .al-drawer__details[open] > summary .al-drawer__chevron {
  transform: rotate(180deg) !important;
}

#alDrawer .al-drawer__section-links {
  display: grid !important;
  gap: 2px !important;
}

#alDrawer .al-drawer__link,
#alDrawer .al-drawer__details > summary {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #14221b !important;
  background: transparent !important;
  font: 560 15px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#alDrawer .al-drawer__link:hover,
#alDrawer .al-drawer__link:focus-visible,
#alDrawer .al-drawer__link.is-active,
#alDrawer .al-drawer__details > summary:hover,
#alDrawer .al-drawer__details > summary:focus-visible {
  color: var(--al-header-accent) !important;
  background: rgba(15, 23, 42, 0.025) !important;
  outline: 0 !important;
}

#alDrawer .al-drawer__link.is-active{
  background: rgba(44, 107, 74, 0.055) !important;
}

#alDrawer .al-drawer__link--danger {
  color: #9f1d1d !important;
}

#alDrawer .al-drawer__details[open] > summary {
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.035) !important;
}

#alDrawer .al-drawer__ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
}

#alDrawer .al-drawer__ico svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#alDrawer .al-drawer__chevron {
  grid-column: 3 !important;
  justify-self: end !important;
}

#alDrawer .al-drawer__section > .al-drawer__section-summary .al-drawer__chevron {
  display: none !important;
}

#alDrawer .al-drawer__sublist {
  display: grid !important;
  gap: 1px !important;
  padding: 4px 0 8px 34px !important;
}

#alDrawer .al-drawer__sublist a {
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 10px 0 12px !important;
  border-left: 2px solid rgba(44, 107, 74, 0.16) !important;
  border-radius: 0 10px 10px 0 !important;
  color: #56655d !important;
  background: transparent !important;
  font: 520 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-decoration: none !important;
}

#alDrawer .al-drawer__sublist a:hover,
#alDrawer .al-drawer__sublist a:focus-visible,
#alDrawer .al-drawer__sublist a.is-active{
  color: var(--al-header-accent) !important;
  background: rgba(44, 107, 74, 0.045) !important;
  outline: 0 !important;
}

/* Keep category hubs visually distinct from individual destinations in the
 * responsive drawer as well as the desktop dropdowns. */
#alDrawer .al-drawer__sublist a.al-drawer__browse-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 42px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-left-color: rgba(44, 107, 74, 0.32) !important;
  color: #194d34 !important;
  background: #fff !important;
  font-weight: 650 !important;
}

#alDrawer.al-drawer .al-drawer__sublist a.al-drawer__browse-link.is-active {
  color: #194d34 !important;
  background: #fff !important;
}

#alDrawer.al-drawer .al-drawer__sublist a.al-drawer__browse-link:hover,
#alDrawer.al-drawer .al-drawer__sublist a.al-drawer__browse-link:focus-visible,
#alDrawer.al-drawer .al-drawer__sublist a.al-drawer__browse-link.is-active:hover,
#alDrawer.al-drawer .al-drawer__sublist a.al-drawer__browse-link.is-active:focus-visible {
  color: #194d34 !important;
  background: rgba(44, 107, 74, 0.045) !important;
}

#alDrawer .al-drawer__browse-arrow {
  margin-left: auto !important;
  color: inherit !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#alDrawer .al-drawer__section--links {
  padding-top: 14px !important;
}

#alDrawer .al-drawer__auth--pending,
#alDrawer .al-drawer__auth--in,
#alDrawer .al-drawer__auth--out {
  display: none !important;
}

#alDrawer[data-auth-state="unknown"] .al-drawer__auth--pending {
  display: flex !important;
}

#alDrawer[data-auth-state="in"] .al-drawer__auth--in,
body.logged-in #alDrawer .al-drawer__auth--in,
html.logged-in body #alDrawer .al-drawer__auth--in {
  display: grid !important;
}

#alDrawer[data-auth-state="in"] .al-drawer__identity-state.al-drawer__auth--in,
body.logged-in #alDrawer .al-drawer__identity-state.al-drawer__auth--in,
html.logged-in body #alDrawer .al-drawer__identity-state.al-drawer__auth--in {
  display: flex !important;
}

#alDrawer[data-auth-state="in"] .al-drawer__auth--pending,
#alDrawer[data-auth-state="in"] .al-drawer__auth--out,
body.logged-in #alDrawer .al-drawer__auth--pending,
html.logged-in body #alDrawer .al-drawer__auth--pending,
body.logged-in #alDrawer .al-drawer__auth--out,
html.logged-in body #alDrawer .al-drawer__auth--out {
  display: none !important;
}

#alDrawer[data-auth-state="out"] .al-drawer__auth--out,
body:not(.logged-in) #alDrawer[data-auth-state="out"] .al-drawer__auth--out,
html:not(.logged-in) body #alDrawer[data-auth-state="out"] .al-drawer__auth--out {
  display: flex !important;
}

#alDrawer .al-drawer__cta {
  flex-direction: column !important;
  gap: 8px !important;
}

#alDrawer .al-drawer__cta .al-btn {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#alDrawer[data-auth-state="out"] .al-drawer__cta.al-drawer__auth--out {
  display: flex !important;
}

#alDrawer .al-drawer__close.al-mobile-menu__close,
body #alDrawer .al-drawer__close.al-mobile-menu__close {
  display: inline-flex !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  min-width: var(--al-overlay-close-size,44px) !important;
  min-height: var(--al-overlay-close-size,44px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--al-overlay-close-radius,8px) !important;
  color: var(--al-overlay-close-ink,#586d61) !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
  appearance: none !important;
}

#alDrawer .al-drawer__close.al-mobile-menu__close svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .al-account-sheet .al-account-sheet__close svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#al-auth-neo .al-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  min-width: var(--al-overlay-close-size,44px) !important;
  min-height: var(--al-overlay-close-size,44px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--al-overlay-close-ink,#586d61) !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

#al-auth-neo .al-close:hover,
#al-auth-neo .al-close:focus-visible {
  color: var(--al-overlay-close-hover,#14231c) !important;
  background: transparent !important;
  border-color: transparent !important;
}

@media (max-width: 767px) {
  #alHeader {
    --al-header-mobile-gutter-start: max(12px, env(safe-area-inset-left, 0px));
    height: var(--al-header-h) !important;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    position: static !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    overflow: visible !important;
    contain: none !important;
  }

  body.al-header-show-cart #alHeader .al-header__bar,
  body.al-header-show-cart #alHeader .al-header-shell__bar {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }

  #alHeader .al-logo,
  #alHeader .al-header-shell__brand {
    /* Anchor to the fixed header/viewport, never its asymmetric grid track.
     * Viewport units here set a coordinate, not an overflowing header width. */
    position: absolute !important;
    top: 50% !important;
    left: 50vw !important;
    right: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    /* Theme-wide anchor transitions must not animate viewport centering. */
    transition: none !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  #alHeader .al-burger,
  #alHeader .al-header-shell__menu {
    position: relative !important;
    z-index: 2 !important;
  }

  #alHeader .al-util {
    position: static !important;
    z-index: 2 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow: visible !important;
    contain: none !important;
  }

  /* Three member actions on the right cannot fit beside a centered 44px
   * brand at 320px. Keep Search next to the menu without changing its DOM,
   * hit area or controller; account/notifications remain on the right. */
  #alHeader #icon-search {
    position: absolute !important;
    top: 50% !important;
    left: calc(var(--al-header-mobile-gutter-start) + 52px) !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }

  /* The generic account-pill display must not reveal the desktop fallback
   * beside its mobile twin before authentication hydration completes. */
  #alHeader #alAccountPill.al-header-account-fallback--desktop {
    display: none !important;
  }

  body.al-header-show-cart #alHeader .al-util {
    width: max-content !important;
    min-width: 0 !important;
  }

  #alHeader .al-header-account-slot,
  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    overflow: visible !important;
    contain: none !important;
  }

  #alHeader .al-authpill--join {
    width: 64px !important;
    min-width: 64px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 767px) {
  #alHeader .al-logo__img,
  #alHeader .al-header-shell__logo-img,
  #alHeader .al-logo picture,
  #alHeader .al-header-shell__brand picture {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 389px) {
  body:not(.al-header-show-cart) #alHeader .al-header__bar,
  body:not(.al-header-show-cart) #alHeader .al-header-shell__bar {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }

  body:not(.al-header-show-cart) #alHeader .al-util {
    width: max-content !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
}

@media (max-width: 430px) {
  #alHeader {
    --al-header-mobile-gutter-start: max(10px, env(safe-area-inset-left, 0px));
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 var(--al-header-mobile-gutter-start) !important;
    overflow: visible !important;
    contain: none !important;
  }

  #alHeader .al-util,
  #alHeader .al-header-account-slot,
  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    overflow: visible !important;
    contain: none !important;
  }
}

html.is-header-menu-open .al-drawer,
html.is-header-menu-open .al-mobile-menu {
  visibility: visible !important;
  pointer-events: auto !important;
}

html.is-header-menu-open .al-drawer__overlay,
html.is-header-menu-open .al-mobile-menu__overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.is-header-menu-open .al-drawer__panel,
html.is-header-menu-open .al-mobile-menu__panel {
  transform: translate3d(0, 0, 0) !important;
}

#alDrawer .al-drawer__panel.al-mobile-menu__panel {
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px)) !important;
  overflow-x:hidden !important;
}

#alDrawer .al-drawer__panel.al-mobile-menu__panel * {
  box-sizing:border-box !important;
}

#alDrawer .al-drawer__sections {
  flex:0 0 auto !important;
  display:grid !important;
  gap:6px !important;
  overflow:visible !important;
  min-height:0 !important;
  padding:0 !important;
}

#alDrawer .al-drawer__cta {
  position:static !important;
  flex:0 0 auto !important;
  margin-top:10px !important;
  padding-top:12px !important;
  padding-bottom:0 !important;
}

#alDrawer .al-drawer__identity {
  gap:10px !important;
  min-height:62px !important;
  margin:0 0 12px !important;
  padding:10px !important;
  border-radius:14px !important;
  box-shadow:0 4px 10px rgba(15, 23, 42, 0.045) !important;
}

#alDrawer .al-drawer__identity-state {
  gap:10px !important;
}

#alDrawer .al-drawer__identity-avatar,
#alDrawer .al-drawer__identity-avatar img {
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
}

#alDrawer .al-drawer__identity-copy {
  gap:2px !important;
}

#alDrawer[data-auth-state="unknown"] .al-drawer__identity-state.al-drawer__auth--in {
  display:none !important;
}

#alDrawer[data-auth-state="unknown"] .al-drawer__identity-state.al-drawer__auth--pending {
  display:flex !important;
}

#alDrawer .al-drawer__xp,
#alDrawer .al-account-sheet__xp {
  height:4px !important;
  margin-top:2px !important;
}

#alDrawer .al-drawer__section {
  gap:3px !important;
  padding:8px 0 0 !important;
}

#alDrawer .al-drawer__section:first-child,
#alDrawer .al-drawer__section--explore:first-child,
#alDrawer[data-auth-state="unknown"] .al-drawer__section--explore,
#alDrawer[data-auth-state="out"] .al-drawer__section--explore,
body:not(.logged-in) #alDrawer:not([data-auth-state="in"]) .al-drawer__section--explore,
html:not(.logged-in) body #alDrawer:not([data-auth-state="in"]) .al-drawer__section--explore {
  padding-top:0 !important;
}

#alDrawer .al-drawer__section-summary {
  min-height:0 !important;
  margin:0 0 4px !important;
  padding:0 4px !important;
}

#alDrawer .al-drawer__section-links {
  gap:1px !important;
}

#alDrawer .al-drawer__link,
#alDrawer .al-drawer__details > summary {
  grid-template-columns:22px minmax(0, 1fr) 18px !important;
  column-gap:10px !important;
  min-height:40px !important;
  padding:8px 10px !important;
  border-radius:11px !important;
}

#alDrawer .al-drawer__ico {
  width:20px !important;
  height:20px !important;
}

#alDrawer .al-drawer__ico svg {
  width:18px !important;
  height:18px !important;
}

#alDrawer .al-drawer__details[open] {
  padding-bottom:3px !important;
}

#alDrawer .al-drawer__sublist {
  gap:1px !important;
  padding:2px 0 5px 30px !important;
}

#alDrawer .al-drawer__sublist a {
  min-height:38px !important;
  padding:8px 10px 8px 12px !important;
}

#alDrawer .al-drawer__link--danger {
  margin-top:2px !important;
}

#alDrawer .al-drawer__close.al-mobile-menu__close,
body #alDrawer .al-drawer__close.al-mobile-menu__close {
  width: var(--al-overlay-close-size,44px) !important;
  height: var(--al-overlay-close-size,44px) !important;
  min-width: var(--al-overlay-close-size,44px) !important;
  min-height: var(--al-overlay-close-size,44px) !important;
  border-radius: var(--al-overlay-close-radius,8px) !important;
}

#alHeader.al-header-root,
#alHeader.al-header,
#alHeader.al-header-shell,
#alHeader .al-header__bar,
#alHeader .al-header-shell__bar {
  background: #fff !important;
}

#alHeader.al-header-root,
#alHeader.al-header,
#alHeader.al-header-shell {
  box-shadow: none !important;
}

/* Desktop auth CTAs need a little vertical breathing room for their shadows. */
@media (min-width: 1181px) {
  :root {
    --al-header-h-desktop: 68px;
  }

  #alHeader.al-header-root,
  #alHeader.al-header,
  #alHeader.al-header-shell,
  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar,
  #alHeader .al-util,
  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    overflow: visible !important;
    contain: none !important;
  }

  #alHeader .al-header__bar,
  #alHeader .al-header-shell__bar {
    padding-block: 4px !important;
  }

  #alHeader .al-util,
  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    min-height: 48px !important;
  }
}

/* Member desktop: the brand lock-up shares the navigation grid of the rail.
 * Keep the icon and label on the same x-axes as a side-navigation item,
 * without changing the public header or the compact/mobile header. */
@media (min-width: 1181px) {
  body.al-member-shell #alHeader .al-logo,
  body.al-member-shell #alHeader .al-header-shell__brand {
    justify-content: flex-start !important;
    gap: 14px !important;
    transform: translateX(-41px) !important;
  }

  body.al-member-shell #alHeader .al-logo picture,
  body.al-member-shell #alHeader .al-header-shell__brand picture {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
  }

  body.al-member-shell #alHeader .al-logo__img,
  body.al-member-shell #alHeader .al-header-shell__logo-img {
    max-width: none !important;
    transform: translateX(-46px);
  }
}

/* Keep logged-out desktop auth actions from overflowing back over search. */
@media (min-width: 981px) {
  #alHeader .al-util {
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  #alHeader #icon-search.al-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 12px 0 0 !important;
  }

  #alHeader #icon-search.al-icon + .al-header-account-slot {
    margin-left: 0 !important;
  }

  #alHeader .al-header-account-slot:not([aria-hidden="true"]) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  #alHeader .al-header-account-slot:not([aria-hidden="true"]) .al-authpill {
    flex: 0 0 auto !important;
  }

  #alHeader #alLoginPill.al-authpill {
    margin-left: 0 !important;
  }
}

/* Mobile drawer regression fixes: content-sized top row and dynamic viewport. */
@media (max-width: 767px) {
  #alDrawer .al-drawer__panel.al-mobile-menu__panel {
    position: absolute !important;
    inset-block: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    scroll-padding-block:
      calc(14px + env(safe-area-inset-top, 0px))
      calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #alDrawer .al-drawer__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: start !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
  }

  #alDrawer .al-drawer__close.al-mobile-menu__close,
  body #alDrawer .al-drawer__close.al-mobile-menu__close {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    z-index: 4 !important;
  }

  #alDrawer .al-drawer__identity[data-al-drawer-identity] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    padding: 10px 10px 12px !important;
    margin: 0 !important;
    overflow: visible !important;
    contain: none !important;
  }

  #alDrawer[data-auth-state="in"] .al-drawer__identity-state.al-drawer__auth--in,
  #alDrawer[data-auth-state="unknown"] .al-drawer__identity-state.al-drawer__auth--pending {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    align-items: start !important;
    column-gap: 10px !important;
  }

  #alDrawer .al-drawer__identity-copy {
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
  }

  #alDrawer .al-drawer__identity-copy strong {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #alDrawer [data-al-drawer-rank] {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3 !important;
  }

  #alDrawer .al-drawer__xp-row {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 3px !important;
  }

  #alDrawer .al-drawer__xp-row .al-drawer__xp {
    min-width: 0 !important;
    margin: 0 !important;
  }

  #alDrawer .al-drawer__xp-row [data-al-drawer-xp-label] {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 3ch !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #alDrawer .al-drawer__xp-row [data-al-drawer-xp-label][hidden],
  #alDrawer .al-drawer__xp-row .al-drawer__xp[hidden] {
    display: none !important;
  }
}

@media (min-width: 981px) {
  #alHeader button#icon-search.al-icon.al-icon--search,
  .al-header-root button#icon-search.al-icon.al-icon--search {
    margin-right: 12px !important;
  }

  /* Keep dynamically injected utility icons on the same rhythm. */
  #alHeader .al-util > :is(#icon-search, #icon-cart, #alCareNotificationsButton) {
    margin-right: 12px !important;
  }
}

/* Mobile drawer auth CTAs.
 * Local copy of the live design-contract buttons used by auth teasers,
 * login and registration. Kept scoped here because the global contract
 * stylesheet is intentionally not enqueued by the header shell.
 */
#alDrawer .al-drawer__cta .al-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 1px solid var(--al-btn-stroke);
  border-radius: var(--al-button-radius);
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

#alDrawer .al-drawer__cta .al-btn.al-btn--primary {
  border-color: var(--al-btn-stroke);
  background: var(--al-btn-surface);
  color: var(--al-btn-foreground);
  -webkit-text-fill-color: var(--al-btn-foreground);
  box-shadow: none;
}

#alDrawer .al-drawer__cta .al-btn.al-btn--secondary {
  border-color: var(--al-btn-stroke);
  background: var(--al-btn-surface);
  color: var(--al-btn-foreground);
  -webkit-text-fill-color: var(--al-btn-foreground);
  box-shadow: none;
}

@media (hover: hover) {
  #alDrawer .al-drawer__cta .al-btn.al-btn--primary:hover {
  border-color: var(--al-btn-stroke);
  background: var(--al-btn-surface);
  box-shadow: none;
  transform: none;
  }

  #alDrawer .al-drawer__cta .al-btn.al-btn--secondary:hover {
  border-color: var(--al-btn-stroke);
  background: var(--al-btn-surface);
  box-shadow: none;
  transform: none;
  }
}

#alDrawer .al-drawer__cta .al-btn.al-btn--primary:active {
  background: var(--al-btn-surface);
  box-shadow: none;
  transform: none;
}

#alDrawer .al-drawer__cta .al-btn.al-btn--secondary:active {
  background: var(--al-btn-surface);
  box-shadow: none;
  transform: none;
}

#alDrawer .al-drawer__cta .al-btn:focus {
}

#alDrawer .al-drawer__cta .al-btn:focus-visible {
  outline: 2px solid var(--al-button-focus);
  box-shadow: none;
}

#alDrawer .al-drawer__cta .al-btn:disabled,
#alDrawer .al-drawer__cta .al-btn[aria-disabled="true"] {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none;
}

/* The account slot is structural, not optional. Keep the server-rendered
 * fallback visible while auth hydration runs or if client rendering fails.
 */
#alHeader .al-header-account-slot[data-al-persistent="1"] {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Final desktop auth-slot spacing: keep the button shadows inside a real slot box. */
@media (min-width: 1181px) {
  body #alHeader.al-header-root .al-header__bar > .al-util > .al-header-account-slot[data-auth-state="out"]:not([aria-hidden="true"]),
  body #alHeader.al-header-shell .al-header-shell__bar > .al-util > .al-header-account-slot[data-auth-state="out"]:not([aria-hidden="true"]) {
    height: auto !important;
    min-height: 52px !important;
    padding-block: 6px !important;
    padding-inline: 0 !important;
    align-items: center !important;
    overflow: visible !important;
    contain: none !important;
  }

  body #alHeader.al-header-root .al-header__bar > .al-util > .al-header-account-slot[data-auth-state="out"]:not([aria-hidden="true"]) .al-authpill,
  body #alHeader.al-header-shell .al-header-shell__bar > .al-util > .al-header-account-slot[data-auth-state="out"]:not([aria-hidden="true"]) .al-authpill {
    align-self: center !important;
  }

  /* Signed-in desktop uses the same compact avatar control as mobile. The
   * identity menu remains the only behavior behind this button. */
  #alHeader .al-header-account-slot[data-auth-state="in"] {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  #alHeader #alAccountPill.al-account-pill {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  #alHeader #alAccountPill .al-account-pill__label,
  #alHeader #alAccountPill .al-account-pill__chev {
    display: none !important;
  }

  #alHeader #alAccountPill .al-account-pill__av,
  #alHeader #alAccountPill .al-account-pill__img,
  #alHeader #alAccountPill .al-account-pill__ico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/* Both server/desktop and mobile account controls can exist during a resize.
 * Keep either form compact before the controller swaps it; CSS owns geometry. */
@media (max-width: 767px) {
  #alHeader .al-header-account-slot[data-auth-state="in"]:not([aria-hidden="true"]) {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  #alHeader #alAccountPill.al-account-pill,
  #alHeader .al-util .al-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #alHeader #alAccountPill .al-account-pill__label,
  #alHeader #alAccountPill .al-account-pill__chev {
    display: none !important;
  }
}

/* The optional fourth (cart) action retains the original compact targets on
 * the smallest phones. Do not hide actions or create a second navigation row. */
@media (max-width: 389px) {
  body.al-header-show-cart #alHeader .al-util { gap: 6px !important; }
  body.al-header-show-cart #alHeader .al-util .al-icon,
  body.al-header-show-cart #alHeader #alAccountPill.al-account-pill,
  body.al-header-show-cart #alHeader .al-header-account-slot[data-auth-state="in"]:not([aria-hidden="true"]) {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* Quiet emphasis for the guided learning entry, shared across navigation surfaces. */
#alHeader .al-nav__menu-link--featured,
#alDrawer .al-drawer__sublist a.al-drawer__featured-link {
  color: var(--al-header-accent) !important;
  font-weight: 650 !important;
}


/* Source: al-members/assets/css/member-avatar.css */
/* Avatar Atelier: one transparent overlay above an unmodified circular picture. */
html body #alMemberArea #alProfile.alpp .alpp-avatar{--plate:168px!important;--ring-inset:7.8125%!important;aspect-ratio:1;transform:none!important}
html body #alMemberArea #alProfile.alpp .alpp-hero-left{grid-template-columns:168px minmax(0,1fr)!important}
html body #alMemberArea #alProfile.alpp .alpp-avatar-photo{inset:7.8125%!important;width:84.375%!important;height:84.375%!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important;transform:none!important;background:transparent!important}
html body #alMemberArea #alProfile.alpp .alpp-avatar-plate{inset:0!important;width:100%!important;height:100%!important;filter:none!important;transform:none!important;border:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important}
html body #alMemberArea #alProfile.alpp .alpp-avatar-frame{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;border:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important}
html body #alMemberArea #alProfile.alpp .alpp-avatar .alpp-avatar-img{transform:none!important;padding:0!important;object-fit:cover!important;object-position:center!important;background:transparent!important;border:0!important}
/* The supplied fallback has a baked-in pale rim; crop it only beneath the separate rank ring. */
html body #alMemberArea #alProfile.alpp .alpp-avatar--default .alpp-avatar-img{transform:scale(1.1)!important}
/* Keep the fallback illustration visible; the empty-state upload affordance is a small badge. */
html body #alMemberArea #alProfile.alpp .alpp-avatar--default .alpp-avatar-edit-overlay{top:auto!important;left:auto!important;right:8px!important;bottom:8px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;transform:none!important;background:rgba(15,23,42,.8)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #alMemberArea #alProfile.alpp .alpp-avatar:focus-visible{outline:2px solid #256747!important;outline-offset:4px!important}
@media(max-width:767px){html body #alMemberArea #alProfile.alpp .alpp-avatar{--plate:var(--alpp-public-avatar-size,132px)!important}html body #alMemberArea #alProfile.alpp .alpp-hero-left{grid-template-columns:minmax(0,1fr)!important}}
html body .al-avatar{position:relative;display:inline-block;flex:none;width:var(--al-avatar-size,36px);height:var(--al-avatar-size,36px);aspect-ratio:1;vertical-align:middle;overflow:visible;line-height:0;border:0;background:transparent;box-shadow:none}
/* The WordPress toolbar resets every descendant, including shared avatar spans. */
html body #wpadminbar .al-avatar{position:relative;width:var(--al-avatar-size,28px);height:var(--al-avatar-size,28px);line-height:0}
html body #wpadminbar .al-avatar>.al-avatar__photo{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none}
html body #wpadminbar .al-avatar>.al-avatar__ring{position:absolute;inset:0;width:100%;height:100%}
html body .al-avatar::before,html body .al-avatar::after{content:none!important;display:none!important}
/* The member-area reset otherwise expands photos to 100%, outside the ring. */
html body .al-avatar>.al-avatar__photo{position:absolute;inset:7.8125%;width:84.375%!important;height:84.375%!important;min-width:0;max-width:none;border-radius:50%;object-fit:cover;object-position:center;border:0;padding:0;box-shadow:none;margin:0;transform:none}
html body .al-avatar>.al-avatar__ring{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transform:none;border:0;padding:0;margin:0;background:none;box-shadow:none}
html body .al-avatar>.al-avatar__ring img{width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;background:transparent;object-fit:contain;border-radius:0;box-shadow:none}
html body .al-avatar--default:not(.al-avatar--compact)>.al-avatar__photo{transform:scale(1.1);clip-path:circle(45.4% at 50% 50%)}
html body .al-avatar--compact>.al-avatar__photo{inset:0;width:100%!important;height:100%!important;border:2px solid var(--al-avatar-color,#a3adb6);box-sizing:border-box}
html body .al-avatar--compact.al-avatar--default>.al-avatar__photo{border:0}
html body img.al-avatar-compact{border:2px solid var(--al-avatar-color,#a3adb6)!important;border-radius:50%;box-sizing:border-box;object-fit:cover}
.al-avatar-tabs{display:flex;gap:4px;padding:4px;background:#edf3ef;border-radius:12px;margin-bottom:16px}
html body .al-avatar-tabs button{flex:1;min-height:44px;border:0;border-radius:9px;padding:8px 12px;background:transparent;color:#234c39;font:inherit;font-weight:600;box-shadow:none}
html body .al-avatar-tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 4px #173f2c14}
.al-avatar-picker__intro{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.al-avatar-picker__intro p{margin:0;color:#52685d;font-size:14px;line-height:1.5}
.al-avatar-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html body .al-avatar-choice{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 4px;border:2px solid transparent;border-radius:12px;background:#f8fafb;color:#193f2d;font:inherit;font-size:12px;line-height:1.3;box-shadow:none;cursor:pointer}
html body .al-avatar-choice img{width:64px;height:64px;border-radius:50%;object-fit:cover}
html body .al-avatar-choice[aria-pressed=true]{border-color:#2c6b4a;background:#edf5ef}
.al-avatar-picker__actions{display:contents}
.al-avatar-picker [hidden],.al-avatar-tabs[hidden],.al-avatar-styles[hidden]{display:none!important}
html body .al-avatar-styles{padding:16px;border:1px solid #dce7e1;border-radius:14px;background:#f8fafb;min-width:0}
.al-avatar-styles h3{margin:0 0 10px;font-size:17px;letter-spacing:normal}
.al-avatar-styles__choices{display:grid;gap:8px}
html body .al-avatar-style{display:flex;align-items:center;gap:10px;text-align:left;min-height:60px;width:100%;padding:8px;border:1px solid #dce7e1;border-radius:10px;background:#fff;color:#183e2c;box-shadow:none;font:inherit;font-size:14px;line-height:1.35}
.al-avatar-style>span:last-child{min-width:0;flex:1}
.al-avatar-style small{display:block;font-size:12px;color:#52685d;margin-top:3px}
.al-avatar-style[aria-pressed=true]{border-color:#2c6b4a;background:#edf5ef}
html body .al-avatar-style:disabled{opacity:1!important;filter:none!important;cursor:default}
/* Locked previews: grey ornament, lightly desaturated photo, fully readable text. */
html body .al-avatar-style[data-avatar-locked="true"] .al-avatar__ring{filter:grayscale(1)}
html body .al-avatar-style[data-avatar-locked="true"] .al-avatar__photo{filter:saturate(.6)}
html body .al-avatar-style__lock{position:absolute;right:-1px;bottom:-1px;z-index:1;display:grid;place-items:center;width:18px;height:18px;border:1px solid #dce7e1;border-radius:50%;background:#fff;color:#52685d;pointer-events:none;line-height:1}
html body .al-avatar-style__lock svg{display:block;width:12px;height:12px;margin:0}
html body .al-avatar-tabs button:focus-visible,html body .al-avatar-choice:focus-visible,html body .al-avatar-style:focus-visible{outline:2px solid #256747;outline-offset:3px}
@media(hover:hover){html body .al-avatar-choice:hover{border-color:#9bc7ac}html body .al-avatar-style:not(:disabled):hover{border-color:#7eaf91}}
@media(max-width:480px){.al-avatar-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.al-avatar-picker__intro{gap:10px}.al-avatar-picker__intro p{font-size:13px}}
/* Keep the existing profile form's generic button resets out of style choices. */
html body #alMemberArea #alProfile.alpp .al-avatar-styles h3{font-size:17px!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important}
html body #alMemberArea #alProfile.alpp .al-avatar-style{height:auto!important;min-height:64px!important;padding:8px!important;white-space:normal!important;line-height:1.35!important;border:1px solid #dce7e1!important;background:#fff!important;box-shadow:none!important}
html body #alMemberArea #alProfile.alpp .al-avatar-style[aria-pressed=true]{border-color:#2c6b4a!important;background:#edf5ef!important}
html body #alMemberArea #alProfile.alpp .al-avatar-style:disabled{opacity:1!important;filter:none!important;color:#52685d!important}
html body #alMemberArea #alProfile.alpp .al-avatar-style:focus-visible{outline:2px solid #256747!important;outline-offset:3px!important}


/* Source: al-members/login/assets/google-one-tap.css */
/*
 * Google renders this official container itself.  AquariumLesson's global
 * header uses an exceptionally high stacking level, so keep the Google-owned
 * surface above it rather than allowing the header to clip the prompt.
 */
#credential_picker_container {
  z-index: 2147483647 !important;
}

/* End of delivery group. */