/*
 * Altegio App Store — front-end styles.
 *
 * Follows the Altegio Marketing Design System (styles.css + components/web/kit.css):
 *   • palette tokens resolve to the site-wide variables the alteg.io Elementor kit
 *     defines (--alt-ink, --fg-*, --surface-*, --radius-*, --page-*) and fall back to
 *     the design-system values when the plugin runs on another theme;
 *   • role tokens (--as-canvas, --as-card, --as-field, …) carry the colour scheme:
 *     light by default, dark when the root carries .altegio-appstore-root--dark;
 *   • 60 / 30 / 10 surfaces, yellow only for the glyph, CTAs and small accents;
 *   • radius 12 for buttons and fields, 20 for compact cards, 32 for dialogs;
 *   • hover is a colour step, press is one more step + 0.5px down, 120ms ease;
 *   • one brand-voice glyph per surface, set in JetBrains Mono.
 *
 * Everything is scoped under .altegio-appstore-root to stay clear of theme CSS.
 */

/* ---------------------------------------------------------------- palette */

.altegio-appstore-root,
.altegio-appstore-main .altegio-band--light {
    --as-yellow:         var(--alt-yellow, #FFCB00);
    --as-yellow-hover:   var(--alt-yellow-hover, #FDBE1C);
    --as-yellow-active:  var(--alt-yellow-active, #FDAE1C);
    --as-yellow-soft:    var(--alt-yellow-soft, #FFECA1);
    --as-ink:            var(--alt-ink, #22222E);

    --as-fg-2:           var(--fg-secondary, #626C77);
    --as-fg-3:           var(--fg-tertiary, #A3A3B1);
    --as-on-dark:        var(--fg-on-dark, #FFFFFF);
    --as-on-dark-2:      var(--fg-on-dark-2, #F9FBFD);
    --as-on-dark-3:      var(--fg-on-dark-3, #919299);

    --as-success:        var(--color-success, #0DC268);
    --as-error:          var(--color-error, #ED0A34);

    --as-surface:        var(--surface, #FFFFFF);
    --as-surface-card:   var(--surface-card, #F9FBFD);
    --as-surface-muted:  var(--surface-muted, #F2F3F7);
    --as-muted-hover:    #E7E9EF;
    --as-muted-active:   #DDE1E7;
    --as-surface-dark:   var(--surface-dark, #22222E);
    --as-surface-dark-2: var(--surface-dark-2, #14141C);
    --as-surface-dark-3: var(--surface-dark-3, #343442);

    --as-hairline:       var(--border-hairline, #EBEBEB);
    --as-border-muted:   var(--border-muted, #DDE1E7);

    --as-r-sm:   var(--radius-sm, 8px);
    --as-r-md:   var(--radius-md, 12px);
    --as-r-lg:   var(--radius-lg, 20px);
    --as-r-xl:   var(--radius-xl, 32px);
    --as-r-pill: var(--radius-pill, 999px);

    --as-shadow-sm: 0 1px 2px rgba(34, 34, 46, .06), 0 1px 1px rgba(34, 34, 46, .04);
    --as-shadow-md: 0 8px 24px rgba(34, 34, 46, .08), 0 2px 4px rgba(34, 34, 46, .04);
    --as-shadow-lg: 0 16px 40px rgba(34, 34, 46, .18), 0 6px 12px rgba(34, 34, 46, .10);

    --as-font:         var(--font-sans, "Inter"), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --as-font-display: "Inter Display", var(--font-sans, "Inter"), "Inter", system-ui, sans-serif;
    --as-font-mono:    var(--font-mono, "JetBrains Mono"), "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --as-page-max:  var(--page-max, 1280px);
    --as-gutter:    var(--page-gutter, 40px);
    --as-gutter-md: var(--page-gutter-md, 32px);
    --as-gutter-sm: var(--page-gutter-sm, 20px);

    --as-ease: 120ms ease;

    /* ---- roles: light scheme ------------------------------------------- */
    --as-canvas:              var(--as-surface);
    --as-hero:                var(--as-canvas);
    --as-heading:             var(--as-ink);
    --as-text:                var(--as-ink);
    --as-text-2:              var(--as-fg-2);
    --as-text-3:              var(--as-fg-3);
    --as-line:                var(--as-hairline);
    --as-line-strong:         var(--as-border-muted);

    --as-card:                var(--as-surface-muted);
    --as-card-hover:          var(--as-surface-muted);
    --as-card-shadow-hover:   var(--as-shadow-sm);
    --as-card-line:           rgba(34, 34, 46, .06);
    --as-panel:               var(--as-surface-muted);
    --as-popover:             var(--as-surface);
    --as-popover-line:        var(--as-hairline);
    --as-option-active:       var(--as-surface-muted);
    --as-chip-selected:       var(--as-muted-active);
    --as-chip-selected-border: var(--as-muted-active);
    --as-logo-ring:           inset 0 0 0 1px var(--as-hairline);

    --as-field:               var(--as-surface-muted);
    --as-field-hover:         var(--as-muted-hover);
    --as-field-focus:         var(--as-surface);
    --as-field-border:        transparent;
    --as-field-border-focus:  var(--as-fg-3);
    --as-field-text:          var(--as-ink);
    --as-field-placeholder:   var(--as-fg-3);
    --as-field-icon:          var(--as-fg-2);
    --as-select-chevron:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322222E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --as-chip:                var(--as-surface);
    --as-chip-border:         var(--as-hairline);
    --as-chip-text:           var(--as-ink);
    --as-chip-hover-text:     var(--as-ink);
    --as-chip-hover:          var(--as-surface-card);
    --as-chip-hover-border:   var(--as-border-muted);
    --as-chip-active:         var(--as-ink);
    --as-chip-active-hover:   var(--as-surface-dark-2);
    --as-chip-active-text:    var(--as-on-dark-2);
    --as-chip-count:          var(--as-surface-muted);
    --as-chip-count-text:     var(--as-fg-2);
    --as-chip-active-count:   rgba(255, 255, 255, .15);
    --as-chip-active-count-text: var(--as-on-dark-2);

    --as-tag:                 var(--as-surface);
    --as-tag-text:            var(--as-ink);

    --as-btn2:                var(--as-surface-muted);
    --as-btn2-hover:          var(--as-muted-hover);
    --as-btn2-active:         var(--as-muted-active);
    --as-btn2-text:           var(--as-ink);
    --as-btn2-border:         transparent;

    --as-link:                var(--as-ink);
    --as-link-hover:          var(--as-fg-2);

    --as-empty:               var(--as-surface-card);
    --as-empty-border:        var(--as-border-muted);

    font-family: var(--as-font);
    color: var(--as-text);
    -webkit-font-smoothing: antialiased;
}

/* ---- roles: dark scheme — the 60 % surface of the marketing site -------- */

.altegio-appstore-root--dark {
    color-scheme: dark;

    --as-canvas:              var(--as-surface-dark);
    --as-hero:                var(--as-surface-dark-2);
    --as-heading:             var(--as-on-dark);
    --as-text:                var(--as-on-dark-2);
    --as-text-2:              rgba(249, 251, 253, .72);
    --as-text-3:              var(--as-on-dark-3);
    --as-line:                rgba(255, 255, 255, .12);
    --as-line-strong:         rgba(255, 255, 255, .22);

    --as-card:                var(--as-surface-dark-3);
    --as-card-hover:          #3E3E4E;
    --as-card-shadow-hover:   none;
    --as-card-line:           rgba(255, 255, 255, .08);
    --as-panel:               var(--as-surface-dark-3);
    --as-popover:             var(--as-surface-dark-3);
    --as-popover-line:        rgba(255, 255, 255, .10);
    --as-option-active:       rgba(255, 255, 255, .08);
    --as-chip-selected:       rgba(255, 255, 255, .16);
    --as-chip-selected-border: rgba(255, 255, 255, .28);
    --as-logo-ring:           none;

    --as-field:               rgba(255, 255, 255, .08);
    --as-field-hover:         rgba(255, 255, 255, .12);
    --as-field-focus:         rgba(255, 255, 255, .14);
    --as-field-border:        rgba(255, 255, 255, .10);
    --as-field-border-focus:  rgba(255, 255, 255, .30);
    --as-field-text:          var(--as-on-dark-2);
    --as-field-placeholder:   rgba(249, 251, 253, .55);
    --as-field-icon:          rgba(249, 251, 253, .65);
    --as-select-chevron:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F9FBFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --as-chip:                rgba(255, 255, 255, .06);
    --as-chip-border:         rgba(255, 255, 255, .10);
    --as-chip-text:           var(--as-on-dark-3);
    --as-chip-hover-text:     var(--as-yellow-hover);
    --as-chip-hover:          rgba(255, 255, 255, .12);
    --as-chip-hover-border:   rgba(255, 255, 255, .16);
    --as-chip-active:         var(--as-on-dark-2);
    --as-chip-active-hover:   var(--as-on-dark);
    --as-chip-active-text:    var(--as-ink);
    --as-chip-count:          rgba(255, 255, 255, .10);
    --as-chip-count-text:     var(--as-on-dark-3);
    --as-chip-active-count:   rgba(34, 34, 46, .08);
    --as-chip-active-count-text: var(--as-fg-2);

    --as-tag:                 rgba(255, 255, 255, .10);
    --as-tag-text:            var(--as-on-dark-2);

    --as-btn2:                rgba(255, 255, 255, .06);
    --as-btn2-hover:          rgba(255, 255, 255, .12);
    --as-btn2-active:         rgba(255, 255, 255, .16);
    --as-btn2-text:           var(--as-on-dark-2);
    --as-btn2-border:         rgba(255, 255, 255, .12);

    --as-link:                var(--as-on-dark);
    --as-link-hover:          var(--as-on-dark-2);

    --as-empty:               rgba(255, 255, 255, .04);
    --as-empty-border:        rgba(255, 255, 255, .22);
}

/*
 * ---- page bands (archive and integration templates) -------------------------
 * Like the homepage: the hero sits on the deeper dark under the header, the rest of the
 * page on the light-grey 30 % surface. The light band takes the light roles above, with
 * white cards and panels, since a grey card would vanish on the grey canvas.
 */
.altegio-appstore-main .altegio-band--light {
    color-scheme: light;

    --as-canvas:              var(--as-surface-muted);
    --as-line:                var(--as-border-muted);
    --as-card:                var(--as-surface);
    --as-card-hover:          var(--as-surface);
    --as-card-shadow-hover:   var(--as-shadow-md);
    --as-panel:               var(--as-surface);
    --as-field:               var(--as-surface);
    --as-field-hover:         var(--as-surface-card);
    --as-tag:                 var(--as-surface-muted);
    --as-btn2:                var(--as-surface);
    --as-empty:               var(--as-surface);
}

/* Full-bleed without leaving the page container: a spread shadow, clipped to the band's height. */
.altegio-appstore-main .altegio-band--hero {
    background: var(--as-hero);
    box-shadow: 0 0 0 100vmax var(--as-hero);
    clip-path: inset(0 -100vmax);
}

.altegio-appstore-root,
.altegio-appstore-root * {
    box-sizing: border-box;
}

.altegio-appstore-root :focus-visible {
    outline: 2px solid var(--as-yellow);
    outline-offset: 2px;
}

.altegio-appstore-root ::selection {
    background: var(--as-yellow);
    color: var(--as-ink);
}

/* Visitor-country filter (appstore.js): not offered in the visitor's country, or a spare
   past a list's visible count until the filter needs it. */
.altegio-appstore-root .is-geo-hidden,
.altegio-appstore-root .is-spare {
    display: none !important;
}

.altegio-appstore-root .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Page grid — the same max-width and gutters as every marketing section. */
.altegio-container {
    width: 100%;
    max-width: var(--as-page-max);
    margin-inline: auto;
    padding-inline: var(--as-gutter);
}

.altegio-appstore-main {
    background: var(--as-surface-muted);
    color: var(--as-text);
    padding-block: 0 120px;
    overflow-x: clip;
}

/* ============================================================ typography */

/*
 * Headings are scoped to the root class on purpose: the Elementor kit sets font-family
 * and font-size on bare tags (.elementor-kit-N h1-h6), which outranks a single class and
 * dropped every heading here to Inter 24-32px instead of the Inter Display scale.
 */
.altegio-appstore-root .altegio-display {
    font-family: var(--as-font-display);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.02;
    text-wrap: balance;
    color: var(--as-heading);
    margin: 0;
}

.altegio-eyebrow {
    display: flex;
    align-items: baseline;
    margin: 0 0 40px;
}

/* The words next to the glyph are set in mono too, like the homepage section eyebrows. */
.altegio-eyebrow__label {
    font: 700 13px/1.4 var(--as-font-mono);
    color: var(--as-text);
    text-transform: lowercase;
    display: inline-flex;
    align-items: baseline;
}

.altegio-glyph {
    font-family: var(--as-font-mono);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    color: var(--as-yellow);
    margin-right: .35em;
}

.altegio-eyebrow__rule {
    flex: 1;
    height: 1px;
    background: var(--as-line);
    margin: 0 18px;
    align-self: center;
}

.altegio-eyebrow__count {
    font: 600 12px/1.4 var(--as-font-mono);
    color: var(--as-text-3);
}

/* Two-column head: heading + lede on the left, the developer card top-right. */
.altegio-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 40px 64px;
    align-items: start;
}

.altegio-head__main {
    min-width: 0;
}

/* ========================================================= developer card */

.altegio-devcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border-radius: var(--as-r-xl);
    background: var(--as-card);
}

.altegio-devcard__eyebrow {
    margin: 0;
    font: 700 12px/1.4 var(--as-font);
    color: var(--as-text-3);
    text-transform: lowercase;
}

.altegio-appstore-root .altegio-devcard__title {
    margin: 0;
    font-family: var(--as-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.15;
    color: var(--as-heading);
    text-wrap: balance;
}

.altegio-devcard__text {
    margin: 0;
    font: 400 14.5px/1.6 var(--as-font);
    color: var(--as-text-2);
}

.altegio-devcard__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    list-style: none;
    margin: 6px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--as-line);
}

.altegio-devcard__facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font: 500 13px/1.45 var(--as-font);
    color: var(--as-text-2);
}

/* Stat numerals follow the homepage hero stats: white, not yellow (yellow stays for CTAs). */
.altegio-devcard__facts strong {
    font: 600 22px/1.15 var(--as-font-display);
    letter-spacing: -.02em;
    color: var(--as-heading);
}

.altegio-devcard__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 8px;
}

.altegio-devcard .altegio-btn {
    align-self: stretch;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 22px;
}

.altegio-devcard .altegio-link {
    font-size: 14px;
    padding-bottom: 4px;
}

/* ================================================================ buttons */

.altegio-appstore-root .altegio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--as-r-md);
    font: 700 16px/24px var(--as-font);
    color: var(--as-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--as-ease), color var(--as-ease), border-color var(--as-ease), transform 80ms ease;
}

.altegio-appstore-root .altegio-btn:active {
    transform: translateY(.5px);
}

.altegio-appstore-root .altegio-btn--primary {
    background: var(--as-yellow);
    color: var(--as-ink);
}

.altegio-appstore-root .altegio-btn--primary:hover,
.altegio-appstore-root .altegio-btn--primary:focus-visible {
    background: var(--as-yellow-hover);
    color: var(--as-ink);
}

.altegio-appstore-root .altegio-btn--primary:active {
    background: var(--as-yellow-active);
}

.altegio-appstore-root .altegio-btn--secondary {
    background: var(--as-btn2);
    border-color: var(--as-btn2-border);
    color: var(--as-btn2-text);
}

.altegio-appstore-root .altegio-btn--secondary:hover,
.altegio-appstore-root .altegio-btn--secondary:focus-visible {
    background: var(--as-btn2-hover);
    color: var(--as-btn2-text);
}

.altegio-appstore-root .altegio-btn--secondary:active {
    background: var(--as-btn2-active);
}

.altegio-appstore-root .altegio-btn--tertiary {
    background: transparent;
    color: var(--as-text);
}

.altegio-appstore-root .altegio-btn--tertiary:hover {
    background: var(--as-btn2);
}

.altegio-appstore-root .altegio-btn--block {
    width: 100%;
}

/* Text link with the arrow — "Show all →" idiom from the Features component. */
.altegio-appstore-root .altegio-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid currentColor;
    font: 600 15px/1.2 var(--as-font);
    color: var(--as-link);
    text-decoration: none;
    transition: color var(--as-ease), border-color var(--as-ease);
}

.altegio-appstore-root .altegio-link svg {
    transition: transform 160ms ease;
}

.altegio-appstore-root .altegio-link:hover {
    color: var(--as-link-hover);
}

.altegio-appstore-root .altegio-link:hover svg {
    transform: translateX(2px);
}

/* ================================================================== chips */

.altegio-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--as-r-pill);
    border: 1px solid var(--as-chip-border);
    background: var(--as-chip);
    font: 500 13px/1.3 var(--as-font);
    color: var(--as-chip-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--as-ease), border-color var(--as-ease), color var(--as-ease), transform 80ms ease;
}

.altegio-chip:hover {
    background: var(--as-chip-hover);
    border-color: var(--as-chip-hover-border);
    color: var(--as-chip-hover-text);
}

.altegio-chip:active {
    transform: translateY(.5px);
}

.altegio-chip[aria-pressed="true"] {
    background: var(--as-chip-active);
    border-color: var(--as-chip-active);
    color: var(--as-chip-active-text);
    font-weight: 700;
}

.altegio-chip[aria-pressed="true"]:hover {
    background: var(--as-chip-active-hover);
    border-color: var(--as-chip-active-hover);
    color: var(--as-chip-active-text);
}

.altegio-chip__count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--as-r-pill);
    background: var(--as-chip-count);
    color: var(--as-chip-count-text);
}

.altegio-chip[aria-pressed="true"] .altegio-chip__count {
    background: var(--as-chip-active-count);
    color: var(--as-chip-active-count-text);
}

/*
 * Catalogue category chips are <button>s, and the site theme styles every button as a
 * large yellow CTA. Reset them to the grey pills of the homepage block; the selected
 * category is a lighter grey pill, not a call to action.
 */
.altegio-appstore-root button.altegio-chip {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    min-height: 0;
    padding: 6px 12px;
    border: 1px solid var(--as-chip-border);
    border-radius: var(--as-r-pill);
    background: var(--as-chip);
    box-shadow: none;
    font: 500 13px/1.3 var(--as-font);
    letter-spacing: normal;
    text-transform: none;
    color: var(--as-chip-text);
}

.altegio-appstore-root button.altegio-chip:hover,
.altegio-appstore-root button.altegio-chip:focus {
    background: var(--as-chip-hover);
    border-color: var(--as-chip-hover-border);
    box-shadow: none;
    color: var(--as-chip-hover-text);
}

/* Link chips (homepage block): pinned to the same tokens so the theme's link colours
   cannot make the two chip rows drift apart. */
.altegio-appstore-root a.altegio-chip {
    color: var(--as-chip-text);
}

.altegio-appstore-root a.altegio-chip:hover,
.altegio-appstore-root a.altegio-chip:focus {
    color: var(--as-chip-hover-text);
}

.altegio-appstore-root button.altegio-chip:focus-visible {
    outline: 2px solid var(--as-field-border-focus);
    outline-offset: 2px;
}

.altegio-appstore-root button.altegio-chip[aria-pressed="true"],
.altegio-appstore-root button.altegio-chip[aria-pressed="true"]:hover,
.altegio-appstore-root button.altegio-chip[aria-pressed="true"]:focus {
    background: var(--as-chip-selected);
    border-color: var(--as-chip-selected-border);
    color: var(--as-heading);
    font-weight: 600;
}

.altegio-appstore-root button.altegio-chip[aria-pressed="true"] .altegio-chip__count {
    background: var(--as-chip-count);
    color: var(--as-chip-count-text);
}

/* Inline tag (price) */
.altegio-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--as-tag);
    font: 600 12px/1.3 var(--as-font);
    color: var(--as-tag-text);
}

/* ================================================================= fields */

.altegio-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    background: var(--as-field);
    border: 1.5px solid var(--as-field-border);
    border-radius: var(--as-r-md);
    transition: background-color var(--as-ease), border-color var(--as-ease);
}

.altegio-search:hover {
    background: var(--as-field-hover);
}

.altegio-search:focus-within {
    background: var(--as-field-focus);
    border-color: var(--as-field-border-focus);
}

.altegio-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--as-field-icon);
    pointer-events: none;
}

.altegio-search .altegio-search__input {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 14px 16px 14px 44px;
    background: transparent;
    border: 0;
    outline: none;
    font: 400 15px/24px var(--as-font);
    color: var(--as-field-text);
}

/* The kit gives text inputs a 10px black glow (.elementor-kit-N input:not(...):not(...), 0,3,1). */
.altegio-appstore-root .altegio-search input.altegio-search__input[type="search"] {
    box-shadow: none;
}

.altegio-search__input::placeholder {
    color: var(--as-field-placeholder);
}

.altegio-search__input:focus-visible {
    outline: none;
}

/* ---- quick search dropdown: icon, name and description of every match ---- */

.altegio-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -1.5px;
    right: -1.5px;
    z-index: 40;
    max-height: min(480px, 64vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--as-popover-line);
    border-radius: var(--as-r-lg);
    background: var(--as-popover);
    box-shadow: var(--as-shadow-lg);
    text-align: left;
}

.altegio-search__panel[hidden],
.altegio-search__list[hidden],
.altegio-search__empty[hidden] {
    display: none;
}

.altegio-appstore-root .altegio-search__option {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--as-r-md);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.altegio-appstore-root .altegio-search__option.is-active {
    background: var(--as-option-active);
}

.altegio-search__logo.altegio-app-logo {
    width: 40px;
    height: 40px;
}

.altegio-search__text {
    min-width: 0;
}

.altegio-search__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 15px/1.35 var(--as-font);
    color: var(--as-heading);
}

.altegio-search__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    font: 400 13px/1.45 var(--as-font);
    color: var(--as-text-2);
}

/* Matched words: a yellow underline accent, the text stays readable. */
.altegio-search mark {
    background: none;
    color: var(--as-heading);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--as-yellow);
}

.altegio-search__name mark {
    font-weight: inherit;
}

.altegio-search__empty {
    margin: 0;
    padding: 14px 12px;
    font: 400 14px/1.5 var(--as-font);
    color: var(--as-text-2);
}

.altegio-select {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 500 13px/1.3 var(--as-font);
    color: var(--as-text-2);
}

.altegio-select select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    padding: 8px 36px 8px 14px;
    background: var(--as-field) var(--as-select-chevron) no-repeat right 12px center;
    border: 1.5px solid var(--as-field-border);
    border-radius: var(--as-r-md);
    font: 500 14px/1.3 var(--as-font);
    color: var(--as-field-text);
    cursor: pointer;
    transition: background-color var(--as-ease), border-color var(--as-ease);
}

.altegio-select select:hover {
    background-color: var(--as-field-hover);
}

.altegio-select select:focus {
    background-color: var(--as-field-focus);
    border-color: var(--as-field-border-focus);
    outline: none;
}

/* Replaced by the script with .altegio-dropdown; the author display rule would beat [hidden]. */
.altegio-select[hidden] {
    display: none;
}

/* ---- site-style dropdown (sort): trigger in the page, white menu on top --- */

.altegio-dropdown {
    position: relative;
    display: inline-flex;
}

.altegio-appstore-root .altegio-dropdown__trigger {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 0;
    padding: 9px 12px 9px 16px;
    border: 1px solid var(--as-field-border);
    border-radius: var(--as-r-md);
    background: var(--as-field);
    box-shadow: none;
    font: 500 14px/1.3 var(--as-font);
    letter-spacing: normal;
    text-transform: none;
    color: var(--as-heading);
    cursor: pointer;
    transition: background-color var(--as-ease), border-color var(--as-ease);
}

.altegio-appstore-root .altegio-dropdown__trigger:hover,
.altegio-appstore-root .altegio-dropdown__trigger:focus,
.altegio-appstore-root .altegio-dropdown.is-open .altegio-dropdown__trigger {
    background: var(--as-field-hover);
    border-color: var(--as-field-border-focus);
    box-shadow: none;
    color: var(--as-heading);
}

.altegio-appstore-root .altegio-dropdown__trigger:focus-visible {
    outline: 2px solid var(--as-field-border-focus);
    outline-offset: 2px;
}

.altegio-dropdown__value {
    font-weight: 600;
}

.altegio-dropdown__trigger svg {
    flex: none;
    color: var(--as-text-3);
    transition: transform var(--as-ease);
}

.altegio-dropdown.is-open .altegio-dropdown__trigger svg {
    transform: rotate(180deg);
}

/* The menu is the site's 10 % surface: white over the dark page, like the header's
   language switcher (radius 20, the large shadow, grey highlight on the active row). */
.altegio-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    min-width: max(100%, 220px);
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--as-r-lg);
    background: var(--as-surface);
    box-shadow: var(--as-shadow-lg);
}

.altegio-dropdown__menu[hidden] {
    display: none;
}

/* In the results head the trigger sits at the right edge: open the menu towards the left. */
.altegio-results__tools .altegio-dropdown__menu {
    left: auto;
    right: 0;
}

/* ---- Featured tiles in the catalogue hero (same set and tiles as the homepage block) ---- */

.altegio-catalog__picks {
    margin-top: 20px;
}

.altegio-catalog__picks .altegio-overview__grid {
    margin-top: 0;
}

/* Scoped: the theme's h2 rule would otherwise make this label a 28px heading. */
.altegio-appstore-root .altegio-catalog__picks-title {
    margin: 0 0 10px;
    padding: 0;
    font: 700 12px/1.4 var(--as-font);
    letter-spacing: normal;
    color: var(--as-text-3);
    text-transform: lowercase;
}

.altegio-dropdown__menu:focus {
    outline: none;
}

.altegio-dropdown__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--as-r-md);
    font: 500 15px/1.3 var(--as-font);
    color: var(--as-ink);
    white-space: nowrap;
    cursor: pointer;
}

.altegio-dropdown__option.is-active {
    background: var(--as-surface-muted);
}

.altegio-dropdown__option svg {
    flex: none;
    opacity: 0;
}

.altegio-dropdown__option[aria-selected="true"] {
    font-weight: 600;
}

.altegio-dropdown__option[aria-selected="true"] svg {
    opacity: 1;
}

/* ================================================================== logos */

.altegio-app-logo {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--as-r-md);
    background: var(--as-surface);
    box-shadow: var(--as-logo-ring);
    overflow: hidden;
    flex: none;
}

.altegio-app-logo--lg {
    width: 96px;
    height: 96px;
    border-radius: var(--as-r-lg);
}

.altegio-app-logo__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block;
}

.altegio-app-logo--lg .altegio-app-logo__img {
    padding: 12px;
}

.altegio-app-logo__monogram {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--as-surface);
    color: var(--as-ink);
    font: 700 20px/1 var(--as-font-display);
}

/* ================================================================== cards */

.altegio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.altegio-card {
    display: flex;
    min-width: 0;
}

.altegio-card__link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 24px;
    border-radius: var(--as-r-lg);
    background: var(--as-card);
    color: var(--as-text);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color var(--as-ease);
}

.altegio-card__link:hover {
    background: var(--as-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--as-card-shadow-hover);
}

.altegio-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.altegio-card__eyebrow {
    font: 700 12px/1.4 var(--as-font);
    color: var(--as-text-3);
    text-transform: lowercase;
    text-align: right;
    padding-top: 2px;
}

.altegio-card__title {
    font: 600 17px/1.3 var(--as-font);
    letter-spacing: -.01em;
    color: var(--as-heading);
}

.altegio-card__tagline {
    font: 400 14px/1.55 var(--as-font);
    color: var(--as-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.altegio-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--as-card-line);
    font: 500 13px/1.3 var(--as-font);
    color: var(--as-text-2);
}

.altegio-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--as-heading);
}

.altegio-rating svg {
    color: var(--as-yellow);
    flex: none;
}

.altegio-rating__count {
    font-weight: 400;
    color: var(--as-text-2);
}

.altegio-card__price {
    margin-left: auto;
}

.altegio-card--compact {
    width: 288px;
    flex: none;
}

/* ============================================================== catalogue */

/* Bottom padding follows the 64px rhythm between the rows below ("Trending now"). */
.altegio-catalog__hero {
    padding: 48px 0 64px;
}

/* The list opens the light-grey part of the page. */
.altegio-appstore-main .altegio-results {
    padding-top: 56px;
}

/* Phones and tablets: the developer card follows the list instead of splitting chips from it. */
.altegio-catalog__devcard-after {
    display: none;
}

.altegio-catalog__hero .altegio-eyebrow {
    margin-bottom: 28px;
}

.altegio-catalog__head {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
}

/* Same scale as the homepage section titles and the design system's Integration Hub section. */
.altegio-appstore-root .altegio-catalog__title {
    font-size: clamp(36px, 4.2vw, 56px);
    max-width: 20ch;
    margin-bottom: 20px;
}

.altegio-catalog__lede {
    margin: 0;
    max-width: 62ch;
    font: 400 17px/1.6 var(--as-font);
    color: var(--as-text-2);
}

.altegio-catalog__search {
    margin-top: 28px;
}

.altegio-catalog__toolbar {
    padding: 24px 0;
    border-top: 1px solid var(--as-line);
    border-bottom: 1px solid var(--as-line);
    margin-bottom: 48px;
}

.altegio-catalog__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    min-width: 0;
}

.altegio-catalog__toolbar .altegio-catalog__chips {
    margin-top: 0;
}

.altegio-results__head {
    align-items: center;
}

.altegio-results__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.altegio-row {
    margin-bottom: 64px;
}

.altegio-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.altegio-appstore-root .altegio-row__title {
    font-family: var(--as-font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.016em;
    color: var(--as-heading);
    margin: 0;
}

.altegio-row__meta {
    margin: 0;
    font: 400 14px/1.4 var(--as-font);
    color: var(--as-text-2);
}

.altegio-row__scroller {
    display: flex;
    gap: 16px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.altegio-row__scroller > * {
    scroll-snap-align: start;
}

.altegio-results__more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.altegio-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--as-empty-border);
    border-radius: var(--as-r-lg);
    background: var(--as-empty);
    font: 400 15px/1.6 var(--as-font);
    color: var(--as-text-2);
}

.altegio-grid.is-loading {
    opacity: .55;
    pointer-events: none;
}

/* ============================================================ single app */

.altegio-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 32px 0 40px;
    font: 500 13px/1.4 var(--as-font);
    color: var(--as-text-2);
}

.altegio-crumbs a {
    color: var(--as-text-2);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color var(--as-ease);
}

.altegio-crumbs a:hover {
    color: var(--as-heading);
}

.altegio-crumbs__sep {
    font-family: var(--as-font-mono);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--as-yellow);
    padding: 0 4px;
}

.altegio-crumbs__current {
    color: var(--as-heading);
    font-weight: 600;
    padding: 2px 4px;
}

.altegio-app__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
    padding-bottom: 56px;
}

.altegio-app__identity {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    min-width: 0;
}

.altegio-app__headline {
    min-width: 0;
}

.altegio-appstore-root .altegio-app__title {
    font-size: clamp(32px, 3.6vw, 48px);
    margin-bottom: 14px;
}

.altegio-app__tagline {
    margin: 0 0 18px;
    max-width: 58ch;
    font: 400 18px/1.6 var(--as-font);
    color: var(--as-text-2);
}

.altegio-app__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    font: 500 14px/1.4 var(--as-font);
    color: var(--as-text-2);
}

.altegio-app__facts .altegio-rating {
    font-size: 14px;
}

.altegio-app__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border-radius: var(--as-r-lg);
    background: var(--as-panel);
}

/* Not offered in the visitor's country: the note replaces Install (appstore.js). */
.altegio-app__unavailable {
    display: none;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--as-r-md);
    background: var(--as-btn2);
    font: 600 15px/1.4 var(--as-font);
    color: var(--as-text-2);
    text-align: center;
}

.altegio-app__cta.is-unavailable .altegio-install-trigger {
    display: none;
}

.altegio-app__cta.is-unavailable .altegio-app__unavailable {
    display: block;
}

.altegio-app__price {
    margin: 0;
    font-family: var(--as-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.1;
    color: var(--as-heading);
}

.altegio-app__trial {
    margin: 0;
    font: 600 13px/1.4 var(--as-font);
    color: var(--as-success);
}

.altegio-app__cta .altegio-btn {
    margin-top: 6px;
}

.altegio-app__website {
    align-self: center;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13.5px/1.3 var(--as-font);
    color: var(--as-link);
    text-decoration: none;
}

.altegio-app__website:hover {
    color: var(--as-link-hover);
}

/* Screenshots: dragged with the mouse (appstore.js), swiped on touch, no scrollbar. */
.altegio-app__gallery {
    display: flex;
    gap: 16px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 48px 0 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.altegio-app__gallery::-webkit-scrollbar {
    display: none;
}

/* While dragging, snapping would fight the pointer; it settles again on release. */
.altegio-app__gallery.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.altegio-app__gallery:focus-visible {
    outline: 2px solid var(--as-field-border-focus);
    outline-offset: 4px;
    border-radius: var(--as-r-lg);
}

.altegio-app__shot {
    margin: 0;
    flex: none;
    width: min(640px, 80vw);
    border-radius: var(--as-r-lg);
    overflow: hidden;
    background: var(--as-panel);
    scroll-snap-align: start;
}

.altegio-app__shot img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* One column: the facts that used to sit in side panels live under the headline now. */
.altegio-app__content {
    max-width: 800px;
    padding-top: 56px;
}

.altegio-appstore-root .altegio-app__section-title {
    font-family: var(--as-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.1;
    color: var(--as-heading);
    margin: 0 0 20px;
}

.altegio-app__description + .altegio-app__section-title {
    margin-top: 48px;
}

.altegio-app__description {
    font: 400 17px/1.65 var(--as-font);
    color: var(--as-text-2);
    max-width: 68ch;
    overflow-wrap: anywhere;
}

/* Long URLs and words wrap instead of widening the page on phones. */
.altegio-app__features,
.altegio-app__tagline,
.altegio-app__developer {
    overflow-wrap: anywhere;
}

.altegio-app__title {
    overflow-wrap: break-word;
}

.altegio-app__description p {
    margin: 0 0 16px;
}

.altegio-app__description h2,
.altegio-app__description h3,
.altegio-app__description h4 {
    font-family: var(--as-font);
    font-weight: 600;
    color: var(--as-heading);
    margin: 28px 0 10px;
    line-height: 1.2;
}

.altegio-app__description h2 { font-size: 20px; }
.altegio-app__description h3 { font-size: 18px; }
.altegio-app__description h4 { font-size: 16px; }

.altegio-app__description a {
    color: var(--as-link);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.altegio-app__description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--as-r-md);
}

.altegio-app__features {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    border-top: 1px solid var(--as-line);
}

.altegio-app__features li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--as-line);
    font: 400 15px/1.6 var(--as-font);
    color: var(--as-text-2);
}

.altegio-app__features svg {
    flex: none;
    margin-top: 3px;
    color: var(--as-heading);
}

/* Availability in the facts row: the sentence is the toggle, country names open in place. */
.altegio-app__availability:has(details[open]) {
    flex-basis: 100%;
}

.altegio-app__availability summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    transition: color var(--as-ease);
}

.altegio-app__availability summary::-webkit-details-marker {
    display: none;
}

.altegio-app__availability summary:hover {
    color: var(--as-heading);
}

.altegio-app__availability svg {
    flex: none;
    color: var(--as-text-3);
    transition: transform var(--as-ease);
}

.altegio-app__availability details[open] svg {
    transform: rotate(180deg);
}

.altegio-app__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    max-width: 72ch;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font: 400 13.5px/1.5 var(--as-font);
    color: var(--as-text-2);
}

.altegio-app__countries li:not(:last-child)::after {
    content: "\00B7";
    margin-left: 8px;
    color: var(--as-text-3);
}

/* "Developer: Message.Help · Help centre · Privacy" — the name reads as the value. */
.altegio-app__developer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 0;
    margin: 12px 0 0;
    font: 400 14px/1.5 var(--as-font);
    color: var(--as-text-2);
}

.altegio-app__developer > * + *::before {
    content: "\00B7";
    margin: 0 10px;
    color: var(--as-text-3);
}

.altegio-app__developer-name {
    font-weight: 600;
    color: var(--as-heading);
}

.altegio-app__developer a {
    color: var(--as-link);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--as-ease);
}

.altegio-app__developer a:hover {
    color: var(--as-link-hover);
}

.altegio-row--related {
    margin: 96px 0 0;
}

/* ======================================================== reviews */

.altegio-reviews {
    margin-top: 56px;
}

.altegio-reviews__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 24px 28px;
    border-radius: var(--as-r-lg);
    background: var(--as-panel);
}

.altegio-reviews__score {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.altegio-reviews__number {
    font-size: 48px;
    line-height: 1;
    color: var(--as-heading);
}

.altegio-reviews__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--as-line-strong);
}

.altegio-star {
    display: inline-flex;
    line-height: 0;
}

.altegio-star--on {
    color: var(--as-yellow);
}

.altegio-reviews__total {
    font: 400 14px/1.4 var(--as-font);
    color: var(--as-text-3);
}

.altegio-reviews__bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.altegio-reviews__bars li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    font: 500 13px/1 var(--as-font-mono);
    color: var(--as-text-3);
}

.altegio-reviews__bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--as-line);
    overflow: hidden;
}

.altegio-reviews__bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--as-yellow);
}

.altegio-reviews__bar-count {
    text-align: right;
}

.altegio-reviews__list {
    margin-top: 8px;
}

.altegio-review {
    padding: 24px 0;
    border-bottom: 1px solid var(--as-line);
}

.altegio-review__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.altegio-review__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--as-r-md);
    background: var(--as-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font: 600 15px/1 var(--as-font);
    color: var(--as-text-2);
}

.altegio-review__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.altegio-review__meta {
    min-width: 0;
    flex: 1 1 0;
}

.altegio-review__author {
    margin: 0;
    font: 600 15px/1.3 var(--as-font);
    color: var(--as-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.altegio-review__date {
    display: block;
    margin-top: 2px;
    font: 400 13px/1.3 var(--as-font);
    color: var(--as-text-3);
}

.altegio-review__text {
    margin: 14px 0 0;
    font: 400 15px/1.6 var(--as-font);
    color: var(--as-text-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.altegio-appstore-root .altegio-reviews__more {
    margin-top: 24px;
}

/* ======================================================== overview block */

.altegio-overview {
    padding: 120px 0;
    background: var(--as-canvas);
    color: var(--as-text);
    overflow-x: clip;
    /* Anchor target: land below the sticky marketing header. */
    scroll-margin-top: 88px;
}

.altegio-overview .altegio-eyebrow {
    margin-bottom: 56px;
}

/* The column gap already spaces title and lede (20px, as in the homepage sections). */
.altegio-appstore-root .altegio-overview__title {
    font-size: clamp(36px, 4.2vw, 56px);
    max-width: 20ch;
    margin-bottom: 0;
}

.altegio-overview__head {
    margin-bottom: 0;
}

.altegio-overview__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.altegio-overview__text {
    margin: 0;
    max-width: 64ch;
    font: 400 18px/1.6 var(--as-font);
    color: var(--as-text-2);
}

/* Tiles sit under the copy, two abreast beside the developer card. */
.altegio-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.altegio-overview__head--single .altegio-overview__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.altegio-overview__app {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--as-r-lg);
    background: var(--as-card);
    color: var(--as-text);
    text-decoration: none;
    transition: background-color var(--as-ease), transform 160ms ease, box-shadow 160ms ease;
}

.altegio-overview__app:hover {
    background: var(--as-card-hover);
    color: var(--as-heading);
    transform: translateY(-2px);
    box-shadow: var(--as-card-shadow-hover);
}

.altegio-overview__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.altegio-overview__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.altegio-overview__name {
    font: 600 14px/1.3 var(--as-font);
    color: var(--as-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.altegio-overview__cat {
    font: 500 12px/1.3 var(--as-font);
    color: var(--as-text-3);
    text-transform: lowercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.altegio-overview__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.altegio-overview__pills .altegio-chip {
    padding: 6px 12px;
}

.altegio-overview__cta {
    margin: 8px 0 0;
}

/* ================================================================== modal */

/* The dialog stays white in both schemes — the 10 % surface over a dark page. */

.altegio-modal[hidden] {
    display: none;
}

.altegio-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.altegio-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 28, .6);
}

.altegio-modal__dialog {
    position: relative;
    width: min(460px, 100%);
    padding: 40px;
    border-radius: var(--as-r-xl);
    background: var(--as-surface);
    color: var(--as-ink);
    box-shadow: var(--as-shadow-lg);
    text-align: center;
    animation: altegio-modal-in 160ms ease-out;
}

@keyframes altegio-modal-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Scoped to the root: the kit styles every <button> as a large yellow CTA
   (.elementor-kit-N button and its :hover/:focus), which outranks a single class. */
.altegio-appstore-root .altegio-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    min-height: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--as-r-pill);
    background: transparent;
    box-shadow: none;
    color: var(--as-fg-2);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--as-ease), color var(--as-ease);
}

.altegio-appstore-root .altegio-modal__close:hover,
.altegio-appstore-root .altegio-modal__close:focus {
    background: var(--as-surface-muted);
    color: var(--as-ink);
}

.altegio-modal__logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--as-hairline);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.altegio-modal__logo:empty {
    display: none;
}

.altegio-modal__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.altegio-appstore-root .altegio-modal__title {
    margin: 0 0 12px;
    font-family: var(--as-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.15;
    color: var(--as-ink);
    text-wrap: balance;
}

.altegio-modal__text {
    margin: 0 0 28px;
    font: 400 15px/1.6 var(--as-font);
    color: var(--as-fg-2);
}

.altegio-modal__actions {
    display: grid;
    gap: 10px;
}

.altegio-modal .altegio-btn--secondary {
    background: var(--as-surface-muted);
    border-color: transparent;
    color: var(--as-ink);
}

.altegio-modal .altegio-btn--secondary:hover {
    background: var(--as-muted-hover);
}

.altegio-modal .altegio-btn--secondary:active {
    background: var(--as-muted-active);
}

/* ============================================================= responsive */

@media (max-width: 1023px) {
    .altegio-catalog__picks {
        display: none;
    }

    .altegio-catalog__hero .altegio-devcard {
        display: none;
    }

    .altegio-catalog__devcard-after {
        display: block;
    }

    .altegio-container {
        padding-inline: var(--as-gutter-md);
    }

    .altegio-overview {
        padding: 88px 0;
    }

    .altegio-appstore-main {
        padding-bottom: 88px;
    }

    .altegio-catalog__hero {
        padding: 48px 0 56px;
    }

    .altegio-app__hero,
    .altegio-head {
        /* minmax(0, …): a plain 1fr grows to the widest unbreakable string (a long URL)
           and the body clips everything past the screen edge. */
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .altegio-app__cta {
        max-width: 480px;
    }

    .altegio-overview__head--single .altegio-overview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 759px) {
    .altegio-reviews__summary {
        /* minmax(0, …): a plain 1fr grows to the widest unbreakable string (a long URL)
           and the body clips everything past the screen edge. */
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .altegio-review__head {
        flex-wrap: wrap;
    }

    .altegio-review__stars {
        width: 100%;
        margin-left: 54px;
    }

    .altegio-container {
        padding-inline: var(--as-gutter-sm);
    }

    .altegio-overview {
        padding: 64px 0;
    }

    .altegio-overview .altegio-eyebrow {
        margin-bottom: 40px;
    }

    .altegio-overview__text {
        font-size: 16px;
    }

    .altegio-devcard {
        padding: 24px;
        border-radius: var(--as-r-lg);
    }

    .altegio-devcard__facts {
        gap: 12px 16px;
    }

    .altegio-appstore-main {
        padding-bottom: 64px;
    }

    .altegio-catalog__hero {
        padding: 32px 0 48px;
    }

    .altegio-results__head {
        flex-direction: column;
        align-items: stretch;
    }

    .altegio-results__tools {
        justify-content: space-between;
    }

    .altegio-catalog__chips {
        flex: 0 0 auto;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .altegio-catalog__chips::-webkit-scrollbar {
        display: none;
    }

    .altegio-grid,
    .altegio-overview__grid,
    .altegio-overview__head--single .altegio-overview__grid {
        /* minmax(0, …): a plain 1fr grows to the widest unbreakable string (a long URL)
           and the body clips everything past the screen edge. */
        grid-template-columns: minmax(0, 1fr);
    }

    .altegio-card--compact {
        width: 260px;
    }

    .altegio-row {
        margin-bottom: 48px;
    }

    .altegio-crumbs {
        padding: 20px 0 28px;
    }

    .altegio-app__identity {
        gap: 16px;
    }

    .altegio-app-logo--lg {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .altegio-app__cta {
        max-width: none;
    }

    .altegio-modal__dialog {
        padding: 32px 24px;
        border-radius: var(--as-r-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .altegio-appstore-root * {
        transition: none !important;
        animation: none !important;
    }

    .altegio-card__link:hover,
    .altegio-overview__app:hover {
        transform: none;
    }
}