/* =========================================================================
   Poshesh — core public/builder stylesheet ("the Elementor runtime").

   Everything a page built in the visual editor needs in order to render
   correctly WITHOUT a theme. It ships in the Platform RCL and is queued by
   the builder itself, so a site whose whole design is authored in the editor
   never depends on a theme for widget appearance.

   A theme still overrides anything here: this file is queued before the
   theme's own stylesheet, and every value reads a design token first.
   ========================================================================= */

/* ---------- 1) Design tokens ----------
   Site Settings (Elementor «سایت» tab) emit /site-assets/theme.css, which
   redefines these on :root. The fallbacks below are what an unconfigured
   site gets, so nothing here depends on that file existing. */
:root {
    --pbx-font: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
    --pbx-font-heading: var(--pbx-font);

    --pbx-primary: #0e7c86;
    --pbx-secondary: #0e1b33;
    --pbx-accent: #d08a3a;
    --pbx-link: var(--pbx-primary);
    --pbx-text: #15203a;
    --pbx-text-muted: #4c5670;
    --pbx-heading: #0e1b33;
    --pbx-background: #ffffff;
    --pbx-surface: #f6f7f9;
    --pbx-surface-warm: #faf6f0;
    --pbx-dark: #0e1b33;
    --pbx-on-dark: #f2f5fa;
    --pbx-border: #e3e6ed;
    --pbx-border-strong: #cfd5e0;
    --pbx-on-primary: #ffffff;

    --pbx-radius-sm: 6px;
    --pbx-radius: 10px;
    --pbx-radius-lg: 16px;
    --pbx-radius-pill: 999px;

    --pbx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --pbx-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .07);
    --pbx-shadow-lg: 0 10px 34px rgba(10, 20, 40, .18);

    --pbx-container: 1280px;
    --pbx-gutter: clamp(1rem, .6rem + 2vw, 2.25rem);

    /* Smallest comfortable touch target; every interactive widget honours it. */
    --pbx-tap: 44px;
    --pbx-focus: #0f5fd1;
    --pbx-duration: .18s;
}

/* ---------- 2) Fonts and base typography ----------
   Self-hosted Vazirmatn, served from this same RCL, so a theme-less site is
   still Persian-first with no external font request. */
@font-face {
    font-family: "Vazirmatn";
    font-weight: 400;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-400.woff2") format("woff2");
}

@font-face {
    font-family: "Vazirmatn";
    font-weight: 500;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-500.woff2") format("woff2");
}

@font-face {
    font-family: "Vazirmatn";
    font-weight: 700;
    font-display: swap;
    src: url("/_content/Platform/velzon/fonts/vazirmatn/vazirmatn-700.woff2") format("woff2");
}

body {
    color: var(--pbx-text);
    background: var(--pbx-background);
    font-family: var(--pbx-font);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pbx-heading);
    font-family: var(--pbx-font-heading);
}

.poshesh-page-body, .poshesh-builder-page,
input, textarea, select, button {
    font-family: inherit;
}

a { color: var(--pbx-link); }

/* One visible, high-contrast focus ring for every widget control. Keyboard
   users get it; pointer users do not, so it costs the design nothing. */
.poshesh-builder-page :focus-visible,
.poshesh-widget-menu :focus-visible {
    outline: 3px solid var(--pbx-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Screen-reader-only text, used by widgets that need a label the design hides. */
.poshesh-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- 3) Builder layout primitives ---------- */

.poshesh-builder-page {
    overflow: clip;
}

.poshesh-container {
    width: 100%;
    max-width: var(--pbx-container);
    margin-inline: auto;
    padding-inline: var(--pbx-gutter);
}

.poshesh-section {
    position: relative;
}

.poshesh-section-xl { padding-block: 6rem; }
.poshesh-section-muted { background: var(--pbx-surface); }
.poshesh-section-warm { background: var(--pbx-surface-warm); }
.poshesh-section-primary { background: color-mix(in srgb, var(--pbx-primary) 10%, #fff); }

.poshesh-section-dark {
    background: var(--pbx-dark);
    color: var(--pbx-on-dark);
}

.poshesh-section-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--pbx-on-dark); }
.poshesh-section-dark a { color: inherit; }

/* Everything a dark band contains borrows its foreground, so one token restyles the whole band
   instead of each widget needing its own override.

   Two classes on purpose. Each widget qualifies its own secondary text with the widget root
   (`.poshesh-heading .poshesh-heading-subtitle`) to survive the injected typography cascade, and a
   single-class rule here would lose to that — leaving muted grey text on a navy band, which is the
   one place it becomes unreadable rather than merely quiet. */
.poshesh-section-dark :is(.poshesh-card, .poshesh-heading, .poshesh-icon-list, .poshesh-list-group,
.poshesh-site-logo, .poshesh-figure, .poshesh-quote)
:is(.poshesh-card-text, .poshesh-card-meta, .poshesh-icon-list-secondary, .poshesh-list-group-desc,
.poshesh-list-group-time, .poshesh-heading-subtitle, .poshesh-site-logo-subtitle,
.poshesh-figure-text, .poshesh-quote-role) {
    color: color-mix(in srgb, var(--pbx-on-dark) 78%, transparent);
}

/* The eyebrow keeps its accent on a dark band; the primary teal is unreadable on navy. */
.poshesh-section-dark .poshesh-heading .poshesh-heading-eyebrow,
.poshesh-section-dark .poshesh-card .poshesh-card-eyebrow { color: var(--pbx-accent); }

.poshesh-section-dark :is(.poshesh-icon-list-item > i, .poshesh-social-link) { color: inherit; }

.poshesh-column > * + * { margin-top: 1.25rem; }

.poshesh-spacer-xs { min-height: 0.75rem; }
.poshesh-spacer-sm { min-height: 1.5rem; }
.poshesh-spacer-md { min-height: 3rem; }
.poshesh-spacer-lg { min-height: 5rem; }
.poshesh-spacer-xl { min-height: 8rem; }

.poshesh-divider {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .2;
}

.poshesh-divider-dashed { border-top-style: dashed; }
.poshesh-divider-dotted { border-top-style: dotted; }
.poshesh-divider-sm { margin-block: 1rem; }
.poshesh-divider-md { margin-block: 2rem; }
.poshesh-divider-lg { margin-block: 3.5rem; }

.poshesh-image-stretch img { width: 100%; }

.poshesh-hero {
    background: color-mix(in srgb, var(--pbx-primary) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--pbx-primary) 18%, #fff);
}

.poshesh-hero-content {
    display: flex;
    max-width: 44rem;
    flex-direction: column;
    justify-content: center;
}

.poshesh-hero-eyebrow {
    color: var(--pbx-primary);
    font-weight: 600;
    letter-spacing: .02em;
}

.poshesh-hero-image {
    min-height: 24rem;
    max-height: 38rem;
    object-fit: cover;
}

.poshesh-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.btn-primary,
.poshesh-page .btn-primary {
    background-color: var(--pbx-primary);
    border-color: var(--pbx-primary);
}

/* ---------- 4) Navigation menus (Menu widget + site chrome) ---------- */
/* base list reset shared by every level */
.poshesh-nav,
.poshesh-nav__sub,
.poshesh-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* top-level bar */
.poshesh-nav--primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
.poshesh-nav--primary > .poshesh-nav__item { position: relative; }
.poshesh-nav--primary > .poshesh-nav__item.is-mega { position: static; }

.poshesh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .85rem;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    border-radius: .5rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.poshesh-nav--primary > .poshesh-nav__item > .poshesh-nav__link:hover,
.poshesh-nav--primary > .poshesh-nav__item:hover > .poshesh-nav__link {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.poshesh-nav__caret {
    width: .5rem; height: .5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    margin-inline-start: .15rem;
    opacity: .8;
}

/* nested dropdown panels (any depth) */
.poshesh-nav__sub,
.poshesh-mega {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    background: #fff;
    color: #1f2937;
    border-radius: .6rem;
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, .18);
    padding: .4rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.poshesh-nav__item:hover > .poshesh-nav__sub,
.poshesh-nav__item:hover > .poshesh-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* third level and deeper flyout to the side */
.poshesh-nav__sub .poshesh-nav__item { position: relative; }
.poshesh-nav__sub .poshesh-nav__sub {
    top: -.4rem;
    inset-inline-start: 100%;
    transform: translateX(0) translateY(6px);
}
.poshesh-nav__sub .poshesh-nav__link {
    display: flex;
    width: 100%;
    color: #1f2937;
    justify-content: space-between;
}
.poshesh-nav__sub .poshesh-nav__link:hover {
    background: color-mix(in srgb, var(--pbx-primary, #4f46e5) 10%, #fff);
    color: var(--pbx-primary, #4f46e5);
}
.poshesh-nav__sub .poshesh-nav__caret {
    transform: rotate(-45deg);
    margin-inline-start: auto;
}
html[dir="rtl"] .poshesh-nav__sub .poshesh-nav__caret { transform: rotate(135deg); }

/* mega panel */
.poshesh-mega {
    inset-inline: 0;
    width: 100%;
    padding: 1.25rem;
}
.poshesh-mega--content .poshesh-mega__inner { max-height: 70vh; overflow: auto; }
.poshesh-mega--columns .poshesh-mega__inner {
    display: grid;
    grid-template-columns: repeat(var(--pbx-mega-cols, 3), minmax(0, 1fr));
    gap: 1.25rem;
}
.poshesh-mega__heading {
    display: block;
    font-weight: 700;
    color: var(--pbx-primary, #4f46e5);
    text-decoration: none;
    padding-bottom: .35rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.poshesh-mega__list li { margin: 0; }
.poshesh-mega__list a {
    display: block;
    padding: .3rem .25rem;
    color: #374151;
    text-decoration: none;
    border-radius: .375rem;
}
.poshesh-mega__list a:hover {
    background: color-mix(in srgb, var(--pbx-primary, #4f46e5) 8%, #fff);
    color: var(--pbx-primary, #4f46e5);
}

/* footer menu — simple inline row */
.poshesh-nav--footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
}
.poshesh-nav--footer .poshesh-nav__link { color: inherit; padding: .25rem .5rem; }
.poshesh-nav--footer .poshesh-nav__sub { display: none; }

/* small screens: stack the primary nav */
@media (max-width: 768px) {
    .poshesh-header-inner { flex-wrap: wrap; gap: .5rem; }
    .poshesh-nav--primary { width: 100%; overflow-x: auto; }
    .poshesh-nav__sub, .poshesh-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
    .poshesh-mega--columns .poshesh-mega__inner { grid-template-columns: 1fr; }
}
/* ---------- Public posts and archives ---------- */

.poshesh-post-header,
.poshesh-post-body,
.poshesh-post-taxonomy,
.poshesh-post-navigation {
    max-width: 52rem;
}

.poshesh-post-header h1 {
    line-height: 1.35;
}

.poshesh-post-meta {
    font-size: .95rem;
}

.poshesh-post-featured {
    max-width: 68rem;
    margin-inline: auto;
}

.poshesh-post-featured img {
    max-height: 42rem;
    object-fit: cover;
}

.poshesh-post-body {
    font-size: 1.08rem;
    line-height: 2;
}

.poshesh-post-body img {
    max-width: 100%;
    height: auto;
}

.poshesh-post-body > * + * {
    margin-top: 1.25rem;
}

.poshesh-post-password {
    max-width: 46rem;
    background: color-mix(in srgb, var(--pbx-primary, #4f46e5) 5%, #fff);
}

.poshesh-lock-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pbx-primary, #4f46e5) 12%, #fff);
    color: var(--pbx-primary, #4f46e5);
    font-size: 1.75rem;
}

.poshesh-archive-header {
    background:
        radial-gradient(circle at 10% 20%, rgba(79, 70, 229, .12), transparent 36%),
        #f8fafc;
    border: 1px solid rgba(15, 23, 42, .06);
}

.poshesh-post-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.poshesh-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.25rem rgba(15, 23, 42, .12) !important;
}

.poshesh-post-card .card-img-top {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.poshesh-post-card .card-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.poshesh-widget-menu-vertical .nav {
    flex-direction: column;
}

/* ---------- Icon / IconBox / ImageBox / IconList ---------- */

.poshesh-icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pbx-primary, #4f46e5);
    line-height: 1;
}

.poshesh-icon-sm { font-size: 1.25rem; }
.poshesh-icon-md { font-size: 1.75rem; }
.poshesh-icon-lg { font-size: 2.5rem; }
.poshesh-icon-xl { font-size: 3.5rem; }

.poshesh-icon-circle,
.poshesh-icon-square {
    padding: .6em;
    background: color-mix(in srgb, var(--pbx-primary, #4f46e5) 12%, transparent);
}

.poshesh-icon-circle { border-radius: 50%; }
.poshesh-icon-square { border-radius: .5rem; }

.poshesh-icon-box { display: flex; gap: 1rem; }
.poshesh-icon-box-stacked { flex-direction: column; align-items: center; text-align: center; }
.poshesh-icon-box-inline { flex-direction: row; align-items: flex-start; }
.poshesh-icon-box-icon { color: var(--pbx-primary, #4f46e5); line-height: 1; flex: 0 0 auto; }
.poshesh-icon-box-title { font-size: 1.15rem; margin: 0 0 .4rem; }
.poshesh-icon-box-title a { text-decoration: none; }

.poshesh-image-box { display: flex; gap: 1rem; }
.poshesh-image-box-stacked { flex-direction: column; }
.poshesh-image-box-inline { flex-direction: row; align-items: flex-start; }
.poshesh-image-box-inline .poshesh-image-box-media { flex: 0 0 38%; }
.poshesh-image-box-media img { width: 100%; height: auto; border-radius: .5rem; }
.poshesh-image-box-title { font-size: 1.15rem; margin: 0 0 .4rem; }
.poshesh-image-box-title a { text-decoration: none; }

.poshesh-icon-list { list-style: none; padding: 0; margin: 0; }
.poshesh-icon-list-item { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }
.poshesh-icon-list-item i { color: var(--pbx-primary, #4f46e5); }
.poshesh-icon-list-inline { display: flex; flex-wrap: wrap; gap: 1rem; }
.poshesh-icon-list-inline .poshesh-icon-list-item { padding: 0; }
.poshesh-icon-list-divided .poshesh-icon-list-item + .poshesh-icon-list-item {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ---------- Counter / ProgressBar / Rating / Alert ---------- */

.poshesh-counter { text-align: center; }
.poshesh-counter-value { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.poshesh-counter-label { color: #6b7280; margin-top: .25rem; }

.poshesh-progress + .poshesh-progress { margin-top: 1rem; }
.poshesh-progress-label { display: flex; justify-content: space-between; margin-bottom: .35rem; font-size: .9rem; }
.poshesh-progress-bar { width: 0; transition: width 1s ease; }

.poshesh-rating-stars { display: inline-flex; gap: .1rem; color: #f59e0b; }
.poshesh-rating-sm { font-size: .95rem; }
.poshesh-rating-md { font-size: 1.25rem; }
.poshesh-rating-lg { font-size: 1.75rem; }

.poshesh-alert { display: flex; gap: .75rem; align-items: flex-start; }
.poshesh-alert-icon { font-size: 1.35rem; line-height: 1.4; }
.poshesh-alert-body { flex: 1 1 auto; }
.poshesh-alert-title { font-size: 1.05rem; margin-bottom: .25rem; }

/* ---------- Media embeds ---------- */

.poshesh-video video,
.poshesh-video iframe { width: 100%; height: 100%; border: 0; }

.poshesh-map iframe {
    width: 100%;
    height: var(--pbx-map-height, 360px);
    border: 0;
    border-radius: .5rem;
}

.poshesh-soundcloud iframe { width: 100%; border: 0; }

.poshesh-menu-anchor { display: block; scroll-margin-top: 80px; }

/* ---------- Forms ---------- */

/* Honeypot must be invisible to humans but reachable by naive bots — so it is
   moved off-screen rather than display:none, which some bots skip. */
.poshesh-form-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Tabs / Accordion ---------- */

.poshesh-tabs .tab-content { width: 100%; }
.poshesh-accordion { --bs-accordion-btn-focus-box-shadow: none; }

@media (max-width: 767.98px) {
    .poshesh-section-xl {
        padding-block: 4rem;
    }

    .poshesh-hero-image {
        min-height: 18rem;
    }
}

/* ---------- Elementor-style dynamic post widgets ---------- */

.poshesh-widget-placeholder {
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--pbx-primary, #6f42c1) 35%, #dfe3e8);
    border-radius: .75rem;
    color: #7c8491;
    text-align: center;
}

.poshesh-post-query-grid {
    display: grid;
    grid-template-columns: repeat(var(--post-columns, 3), minmax(0, 1fr));
    gap: 1.5rem;
}

.poshesh-query-card,
.poshesh-carousel-slide {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pbx-text, #343a40) 10%, transparent);
    border-radius: 1rem;
    background: var(--pbx-background, #fff);
    box-shadow: 0 12px 32px rgba(29, 35, 44, .07);
    flex-direction: column;
}

.poshesh-query-card.is-horizontal { flex-direction: row; }
.poshesh-query-card.image-end { flex-direction: row-reverse; }

.poshesh-query-image {
    display: block;
    overflow: hidden;
    background: #eef0f4;
}

.poshesh-query-image img,
.poshesh-dynamic-featured-image img,
.poshesh-single-post-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poshesh-query-image.ratio-16x9,
.poshesh-dynamic-featured-image.ratio-16x9 { aspect-ratio: 16 / 9; }

.poshesh-query-image.ratio-4x3,
.poshesh-dynamic-featured-image.ratio-4x3 { aspect-ratio: 4 / 3; }

.poshesh-query-image.ratio-1x1,
.poshesh-dynamic-featured-image.ratio-1x1 { aspect-ratio: 1; }

.poshesh-query-card.is-horizontal .poshesh-query-image {
    width: 40%;
    flex: 0 0 40%;
}

.poshesh-query-content {
    display: flex;
    min-width: 0;
    padding: 1.25rem;
    flex: 1;
    flex-direction: column;
}

.poshesh-query-title {
    margin: 0 0 .65rem;
    font-size: 1.15rem;
    line-height: 1.55;
}

.poshesh-query-title a {
    color: inherit;
    text-decoration: none;
}

.poshesh-query-meta,
.poshesh-dynamic-post-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    color: color-mix(in srgb, var(--pbx-text, #343a40) 60%, transparent);
    font-size: .82rem;
}

.poshesh-dynamic-post-info.layout-vertical {
    align-items: flex-start;
    flex-direction: column;
}

.poshesh-dynamic-post-info.layout-vertical .separator { display: none; }

.poshesh-query-excerpt {
    margin: .8rem 0 1rem;
    color: color-mix(in srgb, var(--pbx-text, #343a40) 78%, transparent);
}

.poshesh-query-more {
    margin-top: auto;
    font-weight: 700;
    text-decoration: none;
}

.poshesh-query-terms,
.poshesh-query-tags {
    display: flex;
    margin-bottom: .65rem;
    flex-wrap: wrap;
    gap: .4rem;
}

.poshesh-query-terms a,
.poshesh-query-tags a {
    padding: .18rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pbx-primary, #6f42c1) 9%, transparent);
    font-size: .75rem;
    text-decoration: none;
}

.poshesh-posts-widget.skin-minimal .poshesh-post-query-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
}

.poshesh-posts-widget.skin-minimal .poshesh-query-card {
    border: 0;
    border-bottom: 1px solid #e7e9ee;
    border-radius: 0;
    box-shadow: none;
}

.poshesh-posts-widget.skin-classic .poshesh-query-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.poshesh-post-carousel { position: relative; }

.poshesh-carousel-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .75rem;
}

.poshesh-carousel-toolbar button {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #dde1e8;
    border-radius: 50%;
    background: #fff;
    place-items: center;
}

.poshesh-carousel-track {
    display: grid;
    grid-auto-columns: calc((100% - ((var(--carousel-slides, 3) - 1) * 1.25rem)) / var(--carousel-slides, 3));
    grid-auto-flow: column;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.poshesh-carousel-track::-webkit-scrollbar { display: none; }
.poshesh-carousel-slide { scroll-snap-align: start; }

.poshesh-taxonomy-widget {
    display: flex;
    gap: .6rem;
}

.poshesh-taxonomy-widget.layout-list,
.poshesh-taxonomy-widget.layout-tree {
    align-items: stretch;
    flex-direction: column;
}

.poshesh-taxonomy-widget.layout-chips,
.poshesh-taxonomy-widget.layout-cloud {
    align-items: center;
    flex-wrap: wrap;
}

.poshesh-taxonomy-widget > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .7rem;
    border-radius: .6rem;
    color: inherit;
    text-decoration: none;
}

.poshesh-taxonomy-widget.layout-tree > a {
    margin-inline-start: calc(var(--term-depth, 0) * 1rem);
}

.poshesh-taxonomy-widget.layout-chips > a {
    background: color-mix(in srgb, var(--pbx-primary, #6f42c1) 10%, transparent);
}

.poshesh-taxonomy-widget.layout-cloud > a {
    font-size: calc(.75rem + (var(--term-weight, 1) * .25rem));
}

.poshesh-post-authors {
    display: grid;
    gap: .8rem;
}

.poshesh-post-authors.layout-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.poshesh-author-item,
.poshesh-dynamic-author-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e7e9ee;
    border-radius: .85rem;
}

.poshesh-author-item small {
    display: block;
    color: #7b8491;
}

.poshesh-author-avatar {
    display: grid;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pbx-primary, #6f42c1) 14%, #fff);
    color: var(--pbx-primary, #6f42c1);
    font-weight: 800;
    place-items: center;
    flex: 0 0 auto;
}

.poshesh-dynamic-featured-image,
.poshesh-single-post-image {
    overflow: hidden;
    border-radius: 1rem;
}

.poshesh-dynamic-post-content { line-height: 2; }

.poshesh-dynamic-post-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.poshesh-dynamic-post-navigation > a {
    display: flex;
    padding: 1rem;
    border: 1px solid #e7e9ee;
    border-radius: .8rem;
    text-decoration: none;
    flex-direction: column;
}

.poshesh-comments {
    max-width: 900px;
    margin-inline: auto;
}

.poshesh-comment-children { margin-inline-start: 1.25rem; }
.poshesh-comment-body { white-space: pre-wrap; }

@media (max-width: 991.98px) {
    .poshesh-post-query-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }

    .poshesh-carousel-track {
        grid-auto-columns: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 575.98px) {
    .poshesh-post-query-grid,
    .poshesh-post-authors.layout-cards {
        grid-template-columns: 1fr;
    }

    .poshesh-query-card.is-horizontal,
    .poshesh-query-card.image-end { flex-direction: column; }

    .poshesh-query-card.is-horizontal .poshesh-query-image {
        width: 100%;
        flex-basis: auto;
    }

    .poshesh-carousel-track { grid-auto-columns: 88%; }
    .poshesh-dynamic-post-navigation { grid-template-columns: 1fr; }
}

/* ---------- Language switcher (shared LanguageSwitcher component) ----------
   Pure CSS: <details> gives an accessible, keyboard-operable dropdown with no
   JavaScript, so the header stays interactive before any script has loaded. */
.poshesh-lang { position: relative; flex: 0 0 auto; }

.poshesh-lang-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: .5rem;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    list-style: none;
    font-size: .9rem;
    user-select: none;
}
.poshesh-lang-menu > summary::-webkit-details-marker { display: none; }
.poshesh-lang-menu > summary:hover { background: rgba(255, 255, 255, .24); }
.poshesh-lang-menu > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.poshesh-lang-caret { font-size: .7rem; transition: transform .15s ease; }
.poshesh-lang-menu[open] .poshesh-lang-caret { transform: rotate(180deg); }

.poshesh-lang-menu > ul {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    z-index: 30;
    min-width: 11rem;
    margin: 0;
    padding: .3rem;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .6rem;
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .14);
}
.poshesh-lang-menu > ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: .4rem;
    color: #1f2937;
    text-decoration: none;
    font-size: .9rem;
}
.poshesh-lang-menu > ul a:hover { background: rgba(0, 0, 0, .05); }
.poshesh-lang-menu > ul a.is-current { font-weight: 600; }
.poshesh-lang-menu > ul a.is-untranslated { opacity: .65; }
.poshesh-lang-menu > ul a small { font-size: .7rem; opacity: .8; }

.poshesh-lang-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.poshesh-lang-chip {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid currentColor;
    opacity: .75;
}
.poshesh-lang-chip:hover { opacity: 1; }
.poshesh-lang-chip.is-current { opacity: 1; font-weight: 600; }
.poshesh-lang-chip.is-untranslated { opacity: .45; }

/* Placed by the page builder rather than the header: inherit page colors. */
.poshesh-lang--widget .poshesh-lang-menu > summary {
    color: inherit;
    background: rgba(0, 0, 0, .06);
}
.poshesh-lang--widget .poshesh-lang-menu > summary:focus-visible { outline-color: currentColor; }

/* ── Error pages ─────────────────────────────────────────────────────────────
   Shared by Views/Shared/Error.cshtml and Error404.cshtml. Copy both the views
   and this block when starting a theme from this one. */
.poshesh-error {
    max-width: 44rem;
    margin-inline: auto;
    padding: 3.5rem 1rem 4rem;
    text-align: center;
}
.poshesh-error-code {
    font-size: clamp(4.5rem, 20vw, 8rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: .04em;
    color: var(--pbx-primary, #4f46e5);
    opacity: .16;
}
.poshesh-error-title {
    margin-top: -1.4rem;
    font-size: 1.7rem;
    font-weight: 700;
}
.poshesh-error-message { color: color-mix(in srgb, var(--pbx-text, #343a40) 70%, transparent); line-height: 2.1; margin-bottom: .25rem; }
.poshesh-error-hint { color: color-mix(in srgb, var(--pbx-text, #343a40) 50%, transparent); }
.poshesh-error-search { max-width: 26rem; margin: 1.75rem auto 0; }
.poshesh-error-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.75rem; }
.poshesh-error-links {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--pbx-text, #343a40) 12%, transparent);
}
.poshesh-error-reference { margin-top: 1.5rem; font-size: .875rem; opacity: .7; }
.poshesh-error-reference code { user-select: all; }
.poshesh-error-details { margin-top: 2rem; text-align: start; direction: ltr; }
.poshesh-error-details pre {
    max-height: 22rem;
    overflow: auto;
    font-size: .8125rem;
    background: color-mix(in srgb, var(--pbx-text, #343a40) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--pbx-text, #343a40) 15%, transparent);
    border-radius: .6rem;
    padding: 1rem;
}

/* =========================================================================
   5) The layout kit — the elements a whole site is composed from.

   Everything here is driven by the --pbx-* design tokens, so one palette
   change in Site Settings restyles all of it, and every element stays
   overridable from the builder's own style panel (which writes higher-
   specificity .pbx-el-{id} rules).
   ========================================================================= */

/* ---------- Shared: aspect ratios, clamping ---------- */

.poshesh-ratio-1 { aspect-ratio: 1; }
.poshesh-ratio-4x3 { aspect-ratio: 4 / 3; }
.poshesh-ratio-3x2 { aspect-ratio: 3 / 2; }
.poshesh-ratio-16x9 { aspect-ratio: 16 / 9; }
.poshesh-ratio-3x4 { aspect-ratio: 3 / 4; }
.poshesh-ratio-1x2 { aspect-ratio: 1 / 2; }

.poshesh-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--poshesh-clamp, 3);
}

/* ---------- Site logo ---------- */

.poshesh-site-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
    min-height: var(--pbx-tap);
}

.poshesh-site-logo-stacked { flex-direction: column; text-align: center; }
.poshesh-site-logo-mark { width: auto; flex: 0 0 auto; }

.poshesh-site-logo-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.35;
}

.poshesh-site-logo-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
}

.poshesh-site-logo-subtitle {
    font-size: .74rem;
    opacity: .72;
    letter-spacing: .01em;
}

/* ---------- Badge ---------- */

.poshesh-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;

    /* Every tone resolves through one pair of variables, so a variant only has to decide
       whether it paints the background, the text, or the border with them. */
    --poshesh-badge-color: var(--pbx-primary);
    --poshesh-badge-on: var(--pbx-on-primary);
}

.poshesh-badge-secondary { --poshesh-badge-color: var(--pbx-secondary); --poshesh-badge-on: #fff; }
.poshesh-badge-accent { --poshesh-badge-color: var(--pbx-accent); --poshesh-badge-on: #22160a; }
.poshesh-badge-neutral { --poshesh-badge-color: var(--pbx-text-muted); --poshesh-badge-on: #fff; }
.poshesh-badge-success { --poshesh-badge-color: #16794c; --poshesh-badge-on: #fff; }
.poshesh-badge-warning { --poshesh-badge-color: #b26a22; --poshesh-badge-on: #fff; }
.poshesh-badge-danger { --poshesh-badge-color: #b42318; --poshesh-badge-on: #fff; }
.poshesh-badge-info { --poshesh-badge-color: #175cd3; --poshesh-badge-on: #fff; }
.poshesh-badge-dark { --poshesh-badge-color: #15203a; --poshesh-badge-on: #fff; }
.poshesh-badge-light { --poshesh-badge-color: #e3e6ed; --poshesh-badge-on: #15203a; }

.poshesh-badge-xs { padding: .1rem .45rem; font-size: .68rem; }
.poshesh-badge-sm { padding: .16rem .6rem; font-size: .75rem; }
.poshesh-badge-md { padding: .3rem .8rem; font-size: .85rem; }
.poshesh-badge-lg { padding: .45rem 1rem; font-size: .95rem; }

.poshesh-badge-pill { border-radius: var(--pbx-radius-pill); }
.poshesh-badge-rounded { border-radius: var(--pbx-radius-sm); }
.poshesh-badge-square { border-radius: 0; }

.poshesh-badge-solid {
    background: var(--poshesh-badge-color);
    color: var(--poshesh-badge-on);
}

.poshesh-badge-soft {
    background: color-mix(in srgb, var(--poshesh-badge-color) 12%, transparent);
    color: var(--poshesh-badge-color);
}

.poshesh-badge-outline {
    border: 1px solid color-mix(in srgb, var(--poshesh-badge-color) 45%, transparent);
    color: var(--poshesh-badge-color);
}

.poshesh-badge-plain { color: var(--poshesh-badge-color); padding-inline: 0; }

a.poshesh-badge:hover { filter: brightness(.95); }

/* ---------- Card ---------- */

.poshesh-card {
    position: relative;
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    background: var(--pbx-background);
    border-radius: var(--pbx-radius-lg);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.poshesh-card-bordered { border: 1px solid var(--pbx-border); }
.poshesh-card-elevated { box-shadow: var(--pbx-shadow); }
.poshesh-card-filled { background: var(--pbx-surface); }
.poshesh-card-align-center { text-align: center; }
.poshesh-card-align-center .poshesh-card-body { align-items: center; }

.poshesh-card-media { overflow: hidden; background: var(--pbx-surface); }
.poshesh-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.poshesh-card-media-start,
.poshesh-card-media-end { flex-direction: row; align-items: stretch; }
.poshesh-card-media-end { flex-direction: row-reverse; }

.poshesh-card-media-start > .poshesh-card-media,
.poshesh-card-media-end > .poshesh-card-media {
    width: 38%;
    flex: 0 0 38%;
    align-self: stretch;
}

.poshesh-card-body {
    display: flex;
    min-width: 0;
    padding: 1.15rem 1.25rem 1.35rem;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .45rem;
}

.poshesh-card-icon {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--pbx-radius);
    background: color-mix(in srgb, var(--pbx-primary) 10%, transparent);
    color: var(--pbx-primary);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.poshesh-card-eyebrow {
    margin: 0;
    color: var(--pbx-primary);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.poshesh-card-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.65;
}

.poshesh-card-title a { color: inherit; text-decoration: none; }
.poshesh-card-title a:hover { color: var(--pbx-link); }

.poshesh-card-text { margin: 0; color: var(--pbx-text-muted); font-size: .92rem; }
.poshesh-card-text > :last-child { margin-bottom: 0; }

.poshesh-card-meta {
    margin: 0;
    color: var(--pbx-text-muted);
    font-size: .8rem;
}

.poshesh-card-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: auto;
    padding-top: .35rem;
    color: var(--pbx-link);
    font-size: .88rem;
    font-weight: 600;
}

/* One overlay turns the whole card into the link target while the accessibility tree still
   holds exactly one link — the title's. */
.poshesh-card-clickable .poshesh-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.poshesh-card-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--pbx-shadow); }
.poshesh-card-hover-glow:hover { box-shadow: var(--pbx-shadow-lg); }
.poshesh-card-hover-border:hover { border-color: var(--pbx-primary); }

.poshesh-card-overlay {
    background-size: cover;
    background-position: center;
    min-height: 16rem;
    justify-content: flex-end;
    color: #fff;
}

.poshesh-card-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 40, .05), rgba(10, 20, 40, .82));
}

.poshesh-card-overlay .poshesh-card-body { position: relative; z-index: 1; }
.poshesh-card-overlay .poshesh-card-title,
.poshesh-card-overlay .poshesh-card-title a { color: #fff; }
.poshesh-card-overlay .poshesh-card-text,
.poshesh-card-overlay .poshesh-card-meta { color: rgba(255, 255, 255, .82); }

/* ---------- Figure ---------- */

.poshesh-figure {
    position: relative;
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: .7rem;
}

.poshesh-figure-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--poshesh-figure-radius, 12px);
    background: var(--pbx-surface);
}

.poshesh-figure-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}

.poshesh-figure-hover-zoom:hover .poshesh-figure-media img { transform: scale(1.06); }
.poshesh-figure-hover-lift { transition: transform .2s ease; }
.poshesh-figure-hover-lift:hover { transform: translateY(-4px); }
.poshesh-figure-hover-grayscale .poshesh-figure-media img { filter: grayscale(1); }
.poshesh-figure-hover-grayscale:hover .poshesh-figure-media img { filter: grayscale(0); }

.poshesh-figure-badge {
    position: absolute;
    padding: .2rem .6rem;
    border-radius: var(--pbx-radius-pill);
    background: rgba(10, 20, 40, .78);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.poshesh-figure-badge-top-start { inset-block-start: .6rem; inset-inline-start: .6rem; }
.poshesh-figure-badge-top-end { inset-block-start: .6rem; inset-inline-end: .6rem; }
.poshesh-figure-badge-bottom-start { inset-block-end: .6rem; inset-inline-start: .6rem; }
.poshesh-figure-badge-bottom-end { inset-block-end: .6rem; inset-inline-end: .6rem; }

.poshesh-figure-caption { display: flex; flex-direction: column; gap: .2rem; }
.poshesh-figure-title { margin: 0; font-size: 1.02rem; line-height: 1.7; }
.poshesh-figure-title a { color: inherit; text-decoration: none; }
.poshesh-figure-title a:hover { color: var(--pbx-link); }
.poshesh-figure-text { margin: 0; color: var(--pbx-text-muted); font-size: .82rem; }

.poshesh-figure-clickable .poshesh-figure-title a::after,
.poshesh-figure-overlay-link {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Caption over the image: readable because of the scrim, not because of luck. */
.poshesh-figure-caption-overlay,
.poshesh-figure-caption-hover { display: block; }

.poshesh-figure-caption-overlay .poshesh-figure-caption,
.poshesh-figure-caption-hover .poshesh-figure-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 2.4rem 1rem .9rem;
    background: linear-gradient(180deg, transparent, rgba(10, 20, 40, .88));
    color: #fff;
    border-end-start-radius: var(--poshesh-figure-radius, 12px);
    border-end-end-radius: var(--poshesh-figure-radius, 12px);
}

.poshesh-figure-caption-overlay .poshesh-figure-title,
.poshesh-figure-caption-overlay .poshesh-figure-title a,
.poshesh-figure-caption-hover .poshesh-figure-title,
.poshesh-figure-caption-hover .poshesh-figure-title a { color: #fff; }

.poshesh-figure-caption-overlay .poshesh-figure-text,
.poshesh-figure-caption-hover .poshesh-figure-text { color: rgba(255, 255, 255, .84); }

.poshesh-figure-caption-hover .poshesh-figure-caption {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.poshesh-figure-caption-hover:hover .poshesh-figure-caption,
.poshesh-figure-caption-hover:focus-within .poshesh-figure-caption {
    opacity: 1;
    transform: none;
}

/* ---------- Icon list ---------- */

.poshesh-icon-list-horizontal { display: flex; flex-wrap: wrap; gap: 1rem; }
.poshesh-icon-list-horizontal .poshesh-icon-list-item { padding: 0; }

.poshesh-icon-list-grid {
    display: grid;
    grid-template-columns: repeat(var(--poshesh-list-columns, 2), minmax(0, 1fr));
    gap: .5rem 1.4rem;
}

.poshesh-icon-list-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem 0;
    min-width: 0;
}

.poshesh-icon-list-align-start .poshesh-icon-list-item { align-items: flex-start; }
.poshesh-icon-list-align-end .poshesh-icon-list-item { align-items: flex-end; }

.poshesh-icon-list-item > i { color: var(--pbx-primary); flex: 0 0 auto; }
.poshesh-icon-list-icon-sm .poshesh-icon-list-item > i { font-size: 1rem; }
.poshesh-icon-list-icon-md .poshesh-icon-list-item > i { font-size: 1.3rem; }
.poshesh-icon-list-icon-lg .poshesh-icon-list-item > i { font-size: 1.7rem; }

.poshesh-icon-list-link {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    line-height: 1.8;
}

a.poshesh-icon-list-link:hover { color: var(--pbx-link); }
.poshesh-icon-list-secondary { color: var(--pbx-text-muted); font-size: .78rem; }

.poshesh-icon-list-arrow {
    color: var(--pbx-text-muted);
    font-size: .95rem;
    opacity: .55;
    transition: transform .18s ease, opacity .18s ease;
}

.poshesh-icon-list-item:hover .poshesh-icon-list-arrow { opacity: 1; transform: translateX(-3px); }

.poshesh-icon-list-divided .poshesh-icon-list-item + .poshesh-icon-list-item {
    border-top: 1px solid var(--pbx-border);
}

/* ---------- List group ---------- */

.poshesh-list-group {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    list-style: none;
    counter-reset: poshesh-row;
}

.poshesh-list-group-item { min-width: 0; }
.poshesh-list-group-separated .poshesh-list-group-item + .poshesh-list-group-item {
    border-top: 1px solid var(--pbx-border);
}

.poshesh-list-group-bordered {
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-lg);
    overflow: hidden;
}

.poshesh-list-group-bordered .poshesh-list-group-item + .poshesh-list-group-item {
    border-top: 1px solid var(--pbx-border);
}

.poshesh-list-group-cards { gap: .7rem; }

.poshesh-list-group-cards .poshesh-list-group-item {
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius);
    background: var(--pbx-background);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.poshesh-list-group-cards .poshesh-list-group-item:hover {
    border-color: color-mix(in srgb, var(--pbx-primary) 45%, var(--pbx-border));
    box-shadow: var(--pbx-shadow-sm);
}

.poshesh-list-group-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: var(--pbx-tap);
    color: inherit;
    text-decoration: none;
}

.poshesh-list-group-sm .poshesh-list-group-link { padding: .5rem .3rem; }
.poshesh-list-group-md .poshesh-list-group-link { padding: .8rem .5rem; }
.poshesh-list-group-lg .poshesh-list-group-link { padding: 1.1rem .8rem; }
.poshesh-list-group-cards .poshesh-list-group-link { padding-inline: .9rem; }

a.poshesh-list-group-link:hover .poshesh-list-group-title { color: var(--pbx-link); }

.poshesh-list-group-lead {
    display: flex;
    width: 3.3rem;
    padding: .35rem 0;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    border-radius: var(--pbx-radius);
    background: color-mix(in srgb, var(--pbx-primary) 9%, transparent);
    color: var(--pbx-primary);
    line-height: 1.35;
}

.poshesh-list-group-lead b { font-size: 1.2rem; font-weight: 700; }
.poshesh-list-group-lead span { font-size: .68rem; opacity: .85; }

.poshesh-list-group-icon {
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pbx-primary) 9%, transparent);
    color: var(--pbx-primary);
}

.poshesh-list-group-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .25rem;
}

.poshesh-list-group-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.poshesh-list-group-time { color: var(--pbx-text-muted); font-size: .74rem; }
.poshesh-list-group-title { font-weight: 500; line-height: 1.8; }
.poshesh-list-group-desc { color: var(--pbx-text-muted); font-size: .8rem; }

.poshesh-list-group-arrow {
    color: var(--pbx-text-muted);
    opacity: .5;
    flex: 0 0 auto;
    transition: transform .18s ease, opacity .18s ease;
}

.poshesh-list-group-item:hover .poshesh-list-group-arrow { opacity: 1; transform: translateX(-3px); }

.poshesh-list-group-numbered .poshesh-list-group-body::before {
    counter-increment: poshesh-row;
    content: counter(poshesh-row) ". ";
    color: var(--pbx-text-muted);
    font-size: .8rem;
}

.poshesh-list-group-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .8rem;
    color: var(--pbx-link);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Quote ---------- */

.poshesh-quote { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.poshesh-quote-text { margin: 0; line-height: 2; }
.poshesh-quote-text > :last-child { margin-bottom: 0; }
.poshesh-quote-md .poshesh-quote-text { font-size: 1rem; }
.poshesh-quote-lg .poshesh-quote-text { font-size: 1.2rem; }
.poshesh-quote-xl .poshesh-quote-text { font-size: 1.45rem; }
.poshesh-quote-align-center { text-align: center; align-items: center; }

.poshesh-quote-line .poshesh-quote-text {
    padding-inline-start: 1.1rem;
    border-inline-start: 3px solid var(--pbx-primary);
}

.poshesh-quote-card {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-surface);
}

.poshesh-quote-quote-mark .poshesh-quote-text::before {
    content: "”";
    display: block;
    color: var(--pbx-primary);
    font-size: 2.6rem;
    line-height: .8;
    opacity: .55;
}

.poshesh-quote-by { display: flex; align-items: center; gap: .6rem; }
.poshesh-quote-by > span { display: flex; flex-direction: column; }
.poshesh-quote-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; }
.poshesh-quote-author { font-style: normal; font-weight: 600; }
.poshesh-quote-role { color: var(--pbx-text-muted); font-size: .8rem; }

/* ---------- Search ---------- */

.poshesh-search { width: 100%; }

.poshesh-search-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: var(--pbx-background);
    border: 1px solid var(--pbx-border);
}

.poshesh-search-rounded .poshesh-search-form { border-radius: var(--pbx-radius-pill); padding-inline-start: 1rem; }
.poshesh-search-bar .poshesh-search-form { border-radius: var(--pbx-radius); padding-inline-start: .8rem; }
.poshesh-search-boxed .poshesh-search-form { border-radius: var(--pbx-radius); padding: .35rem .35rem .35rem .8rem; }
.poshesh-search-minimal .poshesh-search-form {
    border: 0;
    border-bottom: 2px solid var(--pbx-border);
    border-radius: 0;
}

.poshesh-search-form:focus-within { border-color: var(--pbx-primary); }
.poshesh-search-icon { color: var(--pbx-text-muted); flex: 0 0 auto; }

.poshesh-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

.poshesh-search-sm .poshesh-search-input { padding-block: .5rem; }
.poshesh-search-md .poshesh-search-input { padding-block: .7rem; }
.poshesh-search-lg .poshesh-search-input { padding-block: .95rem; font-size: 1.05rem; }

.poshesh-search-submit {
    flex: 0 0 auto;
    min-height: var(--pbx-tap);
    padding-inline: 1.2rem;
    border: 0;
    border-radius: inherit;
    background: var(--pbx-primary);
    color: var(--pbx-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.poshesh-search-minimal .poshesh-search-submit {
    background: transparent;
    color: var(--pbx-primary);
    padding-inline: .4rem;
}

.poshesh-search-kbd {
    flex: 0 0 auto;
    padding: .15rem .45rem;
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-sm);
    background: var(--pbx-surface);
    color: var(--pbx-text-muted);
    font-size: .7rem;
}

.poshesh-search-hint { margin: .5rem 0 0; color: var(--pbx-text-muted); font-size: .8rem; }

.poshesh-search-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: var(--pbx-tap);
    padding: .55rem 1rem;
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-pill);
    background: var(--pbx-background);
    color: var(--pbx-text-muted);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.poshesh-search-trigger:hover { border-color: var(--pbx-primary); color: var(--pbx-text); }
.poshesh-search-trigger-text { flex: 1 1 auto; min-width: 0; }

.poshesh-search-dialog {
    width: min(44rem, 92vw);
    padding: 1.2rem;
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-background);
    color: var(--pbx-text);
    box-shadow: var(--pbx-shadow-lg);
}

.poshesh-search-dialog::backdrop { background: rgba(10, 20, 40, .55); }

.poshesh-search-dismiss {
    flex: 0 0 auto;
    min-width: var(--pbx-tap);
    min-height: var(--pbx-tap);
    border: 0;
    background: transparent;
    color: var(--pbx-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

/* ---------- Social icons ---------- */

.poshesh-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--poshesh-social-gap, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.poshesh-social-align-center { justify-content: center; }
.poshesh-social-align-end { justify-content: flex-end; }

.poshesh-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--pbx-primary);
    text-decoration: none;
    transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.poshesh-social-sm .poshesh-social-link { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
.poshesh-social-md .poshesh-social-link { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
.poshesh-social-lg .poshesh-social-link { width: 3.1rem; height: 3.1rem; font-size: 1.35rem; }

.poshesh-social-circle .poshesh-social-link { border-radius: 50%; }
.poshesh-social-square .poshesh-social-link { border-radius: 0; }
.poshesh-social-rounded .poshesh-social-link { border-radius: var(--pbx-radius); }

.poshesh-social-solid .poshesh-social-link { background: var(--pbx-primary); color: var(--pbx-on-primary); }
.poshesh-social-soft .poshesh-social-link { background: color-mix(in srgb, var(--pbx-primary) 11%, transparent); }
.poshesh-social-outline .poshesh-social-link { border: 1px solid color-mix(in srgb, var(--pbx-primary) 40%, transparent); }
.poshesh-social-link:hover { transform: translateY(-2px); }

/* A labelled chip is wider than a square, so let it size to its text. */
.poshesh-social-link:has(.poshesh-social-label) {
    width: auto;
    padding-inline: .8rem;
    border-radius: var(--pbx-radius-pill);
}

.poshesh-social-label { font-size: .85rem; }

/* ---------- Notice bar ---------- */

.poshesh-notice-bar {
    --poshesh-notice-color: var(--pbx-primary);
    background: color-mix(in srgb, var(--poshesh-notice-color) 10%, var(--pbx-background));
    border-bottom: 1px solid color-mix(in srgb, var(--poshesh-notice-color) 25%, transparent);
    color: var(--pbx-text);
    font-size: .88rem;
}

.poshesh-notice-bar-secondary { --poshesh-notice-color: var(--pbx-secondary); }
.poshesh-notice-bar-accent { --poshesh-notice-color: var(--pbx-accent); }
.poshesh-notice-bar-neutral { --poshesh-notice-color: var(--pbx-text-muted); }
.poshesh-notice-bar-success { --poshesh-notice-color: #16794c; }
.poshesh-notice-bar-warning { --poshesh-notice-color: #b26a22; }
.poshesh-notice-bar-danger { --poshesh-notice-color: #b42318; }
.poshesh-notice-bar-info { --poshesh-notice-color: #175cd3; }

.poshesh-notice-bar-dark {
    --poshesh-notice-color: #15203a;
    background: #15203a;
    color: #eef2f8;
}

.poshesh-notice-bar-sticky { position: sticky; top: 0; z-index: 40; }

.poshesh-notice-bar-inner {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    max-width: var(--pbx-container);
    margin-inline: auto;
    padding: .55rem var(--pbx-gutter);
    min-height: 44px;
}

.poshesh-notice-bar-align-center .poshesh-notice-bar-inner { justify-content: center; }
.poshesh-notice-bar-text { flex: 0 1 auto; min-width: 0; }
.poshesh-notice-bar-text > :last-child { margin-bottom: 0; }
.poshesh-notice-bar-text p { margin: 0; }

.poshesh-notice-bar-action {
    flex: 0 0 auto;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.poshesh-notice-bar-close {
    margin-inline-start: auto;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: var(--pbx-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

.poshesh-notice-bar-close:hover { opacity: 1; }

/* ---------- Breadcrumb ---------- */

.poshesh-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poshesh-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.poshesh-breadcrumb-sm { font-size: .8rem; }
.poshesh-breadcrumb-md { font-size: .9rem; }
.poshesh-breadcrumb a { color: var(--pbx-text-muted); text-decoration: none; }
.poshesh-breadcrumb a:hover { color: var(--pbx-link); }
.poshesh-breadcrumb [aria-current="page"] { color: var(--pbx-text); font-weight: 500; }

.poshesh-breadcrumb li + li::before {
    color: var(--pbx-text-muted);
    opacity: .6;
    font-size: .85em;
}

/* The separator points the way the text runs, so it is mirrored for RTL by the glyph choice. */
.poshesh-breadcrumb-chevron li + li::before { content: "‹"; }
.poshesh-breadcrumb-slash li + li::before { content: "/"; }
.poshesh-breadcrumb-dot li + li::before { content: "·"; }
.poshesh-breadcrumb-arrow li + li::before { content: "←"; }

[dir="ltr"] .poshesh-breadcrumb-chevron li + li::before { content: "›"; }
[dir="ltr"] .poshesh-breadcrumb-arrow li + li::before { content: "→"; }

/* ---------- Back to top ---------- */

.poshesh-back-to-top {
    position: fixed;
    inset-block-end: 1.2rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: var(--pbx-tap);
    min-height: var(--pbx-tap);
    padding-inline: .9rem;
    border: 0;
    background: var(--pbx-primary);
    color: var(--pbx-on-primary);
    font: inherit;
    cursor: pointer;
    box-shadow: var(--pbx-shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}

.poshesh-back-to-top.is-visible { opacity: 1; transform: none; }
.poshesh-back-to-top-start { inset-inline-start: 1.2rem; }
.poshesh-back-to-top-end { inset-inline-end: 1.2rem; }
.poshesh-back-to-top-circle { border-radius: 50%; padding-inline: 0; }
.poshesh-back-to-top-rounded { border-radius: var(--pbx-radius); }
.poshesh-back-to-top-square { border-radius: 0; }

/* ---------- Skip links ---------- */

.poshesh-skip-links a {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: 200;
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--pbx-radius) var(--pbx-radius);
    background: var(--pbx-secondary);
    color: #fff;
    text-decoration: none;
}

.poshesh-skip-links a:focus { inset-block-start: 0; }

/* ---------- Navigation widget ---------- */

.poshesh-widget-menu { position: relative; }
.poshesh-widget-menu .poshesh-nav--primary { gap: var(--poshesh-nav-gap, 4px); }
.poshesh-nav-align-center .poshesh-nav--primary { justify-content: center; }
.poshesh-nav-align-end .poshesh-nav--primary { justify-content: flex-end; }
.poshesh-nav-align-stretch .poshesh-nav--primary > .poshesh-nav__item { flex: 1 1 auto; text-align: center; }
.poshesh-nav-no-caret .poshesh-nav__caret { display: none; }
.poshesh-widget-menu-vertical .poshesh-nav--primary { flex-direction: column; align-items: stretch; }

/* Active-item pointers. Each is one rule on the link, so switching styles never changes layout. */
.poshesh-nav-pointer-underline .poshesh-nav--primary > .poshesh-nav__item > .poshesh-nav__link {
    position: relative;
}

.poshesh-nav-pointer-underline .poshesh-nav--primary > .poshesh-nav__item > .poshesh-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: .6rem;
    inset-block-end: .25rem;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .18s ease, transform .18s ease;
}

.poshesh-nav-pointer-underline .poshesh-nav--primary > .poshesh-nav__item:hover > .poshesh-nav__link::after,
.poshesh-nav-pointer-underline .poshesh-nav--primary > .poshesh-nav__item.is-active > .poshesh-nav__link::after {
    opacity: 1;
    transform: none;
}

.poshesh-nav-pointer-background .poshesh-nav--primary > .poshesh-nav__item > .poshesh-nav__link {
    border-radius: var(--pbx-radius);
}

.poshesh-nav-pointer-background .poshesh-nav--primary > .poshesh-nav__item:hover > .poshesh-nav__link,
.poshesh-nav-pointer-background .poshesh-nav--primary > .poshesh-nav__item.is-active > .poshesh-nav__link {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.poshesh-nav-pointer-border .poshesh-nav--primary > .poshesh-nav__item > .poshesh-nav__link {
    border-block-end: 2px solid transparent;
}

.poshesh-nav-pointer-border .poshesh-nav--primary > .poshesh-nav__item:hover > .poshesh-nav__link,
.poshesh-nav-pointer-border .poshesh-nav--primary > .poshesh-nav__item.is-active > .poshesh-nav__link {
    border-block-end-color: currentColor;
}

.poshesh-nav-pointer-dot .poshesh-nav--primary > .poshesh-nav__item.is-active > .poshesh-nav__link::before {
    content: "•";
    margin-inline-end: .3rem;
}

/* Click-to-open submenus: the hover rule is switched off and a class drives the state instead. */
.poshesh-nav-trigger-click .poshesh-nav__item:hover > .poshesh-nav__sub,
.poshesh-nav-trigger-click .poshesh-nav__item:hover > .poshesh-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
}

.poshesh-nav-trigger-click .poshesh-nav__item.is-open > .poshesh-nav__sub,
.poshesh-nav-trigger-click .poshesh-nav__item.is-open > .poshesh-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Keyboard: a focused branch opens, whichever trigger the design chose. */
.poshesh-nav__item:focus-within > .poshesh-nav__sub,
.poshesh-nav__item:focus-within > .poshesh-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.poshesh-nav-toggle,
.poshesh-nav-close {
    display: none;
    align-items: center;
    gap: .45rem;
    min-height: var(--pbx-tap);
    padding-inline: .8rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: var(--pbx-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.poshesh-nav-panel-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-block-end: .8rem;
    margin-block-end: .8rem;
    border-block-end: 1px solid var(--pbx-border);
}

.poshesh-nav-panel-title { font-weight: 700; }
.poshesh-nav-scrim { display: none; }

/* ---------- Navigation: the drawer breakpoints ---------- */

@media (max-width: 1024px) {
    .poshesh-nav-mobile-drawer.poshesh-nav-break-tablet > .poshesh-nav-toggle { display: inline-flex; }
    .poshesh-nav-mobile-drawer.poshesh-nav-break-tablet > .poshesh-nav-panel { display: none; }
    .poshesh-nav-mobile-drawer.poshesh-nav-break-tablet.is-open > .poshesh-nav-panel { display: block; }
    .poshesh-nav-mobile-stack.poshesh-nav-break-tablet .poshesh-nav--primary {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767px) {
    .poshesh-nav-mobile-drawer.poshesh-nav-break-mobile > .poshesh-nav-toggle { display: inline-flex; }
    .poshesh-nav-mobile-drawer.poshesh-nav-break-mobile > .poshesh-nav-panel { display: none; }
    .poshesh-nav-mobile-drawer.poshesh-nav-break-mobile.is-open > .poshesh-nav-panel { display: block; }
    .poshesh-nav-mobile-stack.poshesh-nav-break-mobile .poshesh-nav--primary {
        flex-direction: column;
        align-items: stretch;
    }
}

/* The drawer itself: one rule set, applied at whichever breakpoint the widget declared. */
.poshesh-widget-menu.is-drawer > .poshesh-nav-panel {
    position: fixed;
    inset-block: 0;
    z-index: 120;
    display: block;
    width: min(22rem, 86vw);
    padding: 1rem;
    overflow-y: auto;
    background: var(--pbx-background);
    color: var(--pbx-text);
    box-shadow: var(--pbx-shadow-lg);
}

.poshesh-widget-menu.is-drawer[data-nav-side="start"] > .poshesh-nav-panel { inset-inline-start: 0; }
.poshesh-widget-menu.is-drawer[data-nav-side="end"] > .poshesh-nav-panel { inset-inline-end: 0; }
.poshesh-widget-menu.is-drawer > .poshesh-nav-panel .poshesh-nav-panel-head { display: flex; }
.poshesh-widget-menu.is-drawer > .poshesh-nav-panel .poshesh-nav-close { display: inline-flex; }

.poshesh-widget-menu.is-drawer > .poshesh-nav-panel .poshesh-nav--primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* Inside a drawer every level is laid out in the flow: a floating submenu would be unreachable. */
.poshesh-widget-menu.is-drawer .poshesh-nav__sub,
.poshesh-widget-menu.is-drawer .poshesh-mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-inline-start: .9rem;
    background: transparent;
    max-height: none;
}

.poshesh-widget-menu.is-drawer .poshesh-mega--columns .poshesh-mega__inner { grid-template-columns: 1fr; }

.poshesh-widget-menu.is-drawer > .poshesh-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    background: rgba(10, 20, 40, .5);
}

/* ---------- Heading ---------- */

.poshesh-heading { display: flex; flex-direction: column; gap: .5rem; }
.poshesh-heading-align-center { text-align: center; align-items: center; }
.poshesh-heading-align-end { text-align: end; align-items: flex-end; }

/* Prefixed with the widget root on purpose. The style compiler injects a typography cascade as
   `.pbx-el-{id} :is(h1..h6,p,a,span,li,blockquote)`, which outranks a bare single-class rule — so
   a heading set to a 34px global font would drag its own eyebrow and subtitle up with it. These
   are the widget's secondary text, never the thing being styled, and the extra class says so. */
.poshesh-heading .poshesh-heading-eyebrow {
    margin: 0;
    color: var(--pbx-primary);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: .02em;
    text-transform: none;
}

.poshesh-heading-text { margin: 0; }
.poshesh-heading-link { color: inherit; text-decoration: none; }
.poshesh-heading-link:hover { color: var(--pbx-link); }

.poshesh-heading .poshesh-heading-subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--pbx-text-muted);
    font-size: var(--pbx-font-size, 1rem);
    font-weight: 400;
    line-height: 2;
    letter-spacing: normal;
    text-transform: none;
}

.poshesh-heading-sm { font-size: 1.05rem; }
.poshesh-heading-md { font-size: 1.4rem; }
.poshesh-heading-lg { font-size: 1.9rem; }
.poshesh-heading-xl { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem); }
.poshesh-heading-display { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.35; }

/* Highlighted run inside the heading. */
.poshesh-heading-mark-color { color: var(--pbx-primary); }

.poshesh-heading-mark-underline {
    background-image: linear-gradient(var(--pbx-accent), var(--pbx-accent));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 100% .18em;
}

.poshesh-heading-mark-marker {
    padding-inline: .2em;
    background: color-mix(in srgb, var(--pbx-accent) 34%, transparent);
    border-radius: .2em;
}

.poshesh-heading-mark-outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--pbx-primary);
}

/* Decorative rule under the heading block. */
.poshesh-heading-deco-underline { padding-block-end: .5rem; border-block-end: 1px solid var(--pbx-border); }

.poshesh-heading-deco-bar-start::after,
.poshesh-heading-deco-bar-center::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-block-start: .7rem;
    border-radius: 3px;
    background: var(--pbx-accent);
}

.poshesh-heading-deco-bar-center::after { margin-inline: auto; }

/* ---------- Button ---------- */

.poshesh-btn-wrap { display: flex; }
.poshesh-btn-align-center { justify-content: center; }
.poshesh-btn-align-end { justify-content: flex-end; }
.poshesh-btn-align-stretch .poshesh-btn { flex: 1 1 auto; justify-content: center; }

.poshesh-btn {
    --poshesh-btn-color: var(--pbx-primary);
    --poshesh-btn-on: var(--pbx-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: var(--pbx-tap);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.poshesh-btn:hover { transform: translateY(-1px); }
.poshesh-btn-icon-end { flex-direction: row-reverse; }

.poshesh-btn-secondary { --poshesh-btn-color: var(--pbx-secondary); --poshesh-btn-on: #fff; }
.poshesh-btn-accent { --poshesh-btn-color: var(--pbx-accent); --poshesh-btn-on: #22160a; }
.poshesh-btn-neutral { --poshesh-btn-color: var(--pbx-text-muted); --poshesh-btn-on: #fff; }
.poshesh-btn-success { --poshesh-btn-color: #16794c; --poshesh-btn-on: #fff; }
.poshesh-btn-danger { --poshesh-btn-color: #b42318; --poshesh-btn-on: #fff; }
.poshesh-btn-warning { --poshesh-btn-color: #b26a22; --poshesh-btn-on: #fff; }
.poshesh-btn-info { --poshesh-btn-color: #175cd3; --poshesh-btn-on: #fff; }
.poshesh-btn-light { --poshesh-btn-color: #e9edf3; --poshesh-btn-on: #15203a; }
.poshesh-btn-dark { --poshesh-btn-color: #15203a; --poshesh-btn-on: #fff; }

.poshesh-btn-xs { padding: .25rem .7rem; font-size: .78rem; min-height: 32px; }
.poshesh-btn-sm { padding: .4rem .9rem; font-size: .85rem; min-height: 38px; }
.poshesh-btn-md { padding: .6rem 1.25rem; font-size: .95rem; }
.poshesh-btn-lg { padding: .8rem 1.7rem; font-size: 1.05rem; min-height: 52px; }
.poshesh-btn-xl { padding: 1rem 2.2rem; font-size: 1.15rem; min-height: 60px; }

.poshesh-btn-rounded { border-radius: var(--pbx-radius); }
.poshesh-btn-pill { border-radius: var(--pbx-radius-pill); }
.poshesh-btn-square { border-radius: 0; }

.poshesh-btn-fill-solid {
    background: var(--poshesh-btn-color);
    color: var(--poshesh-btn-on);
}

.poshesh-btn-fill-solid:hover { background: color-mix(in srgb, var(--poshesh-btn-color) 88%, #000); color: var(--poshesh-btn-on); }

.poshesh-btn-fill-soft {
    background: color-mix(in srgb, var(--poshesh-btn-color) 12%, transparent);
    color: var(--poshesh-btn-color);
}

.poshesh-btn-fill-soft:hover { background: color-mix(in srgb, var(--poshesh-btn-color) 20%, transparent); }

.poshesh-btn-fill-outline {
    border-color: color-mix(in srgb, var(--poshesh-btn-color) 50%, transparent);
    color: var(--poshesh-btn-color);
    background: transparent;
}

.poshesh-btn-fill-outline:hover { border-color: var(--poshesh-btn-color); background: color-mix(in srgb, var(--poshesh-btn-color) 8%, transparent); }

.poshesh-btn-fill-ghost { background: transparent; color: var(--poshesh-btn-color); }
.poshesh-btn-fill-ghost:hover { background: color-mix(in srgb, var(--poshesh-btn-color) 10%, transparent); }

.poshesh-btn-fill-link {
    padding-inline: 0;
    min-height: 0;
    background: transparent;
    color: var(--poshesh-btn-color);
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* ---------- Tabs ---------- */

.poshesh-tabs { display: flex; flex-direction: column; gap: 1.2rem; }
.poshesh-tabs-vertical { flex-direction: row; align-items: flex-start; gap: 1.6rem; }
.poshesh-tabs-vertical .poshesh-tabs-list { flex-direction: column; flex: 0 0 15rem; }
.poshesh-tabs-vertical .poshesh-tabs-panels { flex: 1 1 auto; min-width: 0; }

.poshesh-tabs-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.poshesh-tabs-align-center .poshesh-tabs-list { justify-content: center; }
.poshesh-tabs-align-end .poshesh-tabs-list { justify-content: flex-end; }
.poshesh-tabs-align-stretch .poshesh-tabs-tab { flex: 1 1 auto; }

/* A seven-item strip wraps onto a second row where there is width for it, and becomes a single
   scrolling row where there is not. Scrolling at every size would hide tabs behind a gesture on a
   desktop that had room to simply show them; wrapping at every size turns a phone header into
   four stacked rows. */
@media (max-width: 1024px) {
    .poshesh-tabs-scroll.poshesh-tabs-horizontal .poshesh-tabs-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-block-end: .3rem;
    }

    .poshesh-tabs-scroll.poshesh-tabs-horizontal .poshesh-tabs-tab { flex: 0 0 auto; }
}

.poshesh-tabs-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-height: var(--pbx-tap);
    padding: .6rem 1rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pbx-text-muted);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.poshesh-tabs-tab:has(i) { flex-direction: row; align-items: center; gap: .45rem; }
.poshesh-tabs-label { font-weight: 600; }
.poshesh-tabs-hint { font-size: .74rem; opacity: .8; font-weight: 400; }

.poshesh-tabs-pills .poshesh-tabs-tab { border-radius: var(--pbx-radius-pill); }
.poshesh-tabs-pills .poshesh-tabs-tab.is-active { background: var(--pbx-primary); color: var(--pbx-on-primary); }
.poshesh-tabs-pills .poshesh-tabs-tab.is-active .poshesh-tabs-hint { opacity: .9; }

.poshesh-tabs-cards .poshesh-tabs-tab {
    border-radius: var(--pbx-radius);
    border-color: var(--pbx-border);
    background: var(--pbx-background);
}

.poshesh-tabs-cards .poshesh-tabs-tab.is-active {
    border-color: var(--pbx-primary);
    color: var(--pbx-text);
    box-shadow: var(--pbx-shadow-sm);
}

.poshesh-tabs-tabs .poshesh-tabs-list { gap: 0; border-block-end: 1px solid var(--pbx-border); }
.poshesh-tabs-tabs .poshesh-tabs-tab { border-block-end: 2px solid transparent; margin-block-end: -1px; }
.poshesh-tabs-tabs .poshesh-tabs-tab.is-active { color: var(--pbx-primary); border-block-end-color: var(--pbx-primary); }

.poshesh-tabs-underline .poshesh-tabs-tab { border-block-end: 2px solid transparent; }
.poshesh-tabs-underline .poshesh-tabs-tab.is-active { color: var(--pbx-text); border-block-end-color: var(--pbx-accent); }

.poshesh-tabs-tab:hover { color: var(--pbx-text); }
.poshesh-tabs-panel:focus-visible { outline: 3px solid var(--pbx-focus); outline-offset: 4px; }

/* ---------- Accordion ---------- */

.poshesh-accordion { display: flex; flex-direction: column; }
.poshesh-accordion-separated .poshesh-accordion-item + .poshesh-accordion-item { border-top: 1px solid var(--pbx-border); }
.poshesh-accordion-cards { gap: .7rem; }

.poshesh-accordion-bordered {
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius-lg);
    overflow: hidden;
}

.poshesh-accordion-bordered .poshesh-accordion-item + .poshesh-accordion-item { border-top: 1px solid var(--pbx-border); }

.poshesh-accordion-cards .poshesh-accordion-item {
    border: 1px solid var(--pbx-border);
    border-radius: var(--pbx-radius);
    background: var(--pbx-background);
}

.poshesh-accordion-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--pbx-tap);
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.poshesh-accordion-head::-webkit-details-marker { display: none; }
.poshesh-accordion-head:hover { color: var(--pbx-link); }
.poshesh-accordion-title { flex: 1 1 auto; min-width: 0; }

.poshesh-accordion-marker {
    flex: 0 0 auto;
    color: var(--pbx-text-muted);
    font-style: normal;
    transition: transform .2s ease;
}

.poshesh-accordion-chevron .poshesh-accordion-marker::before { content: "⌄"; }
.poshesh-accordion-plus .poshesh-accordion-marker::before { content: "+"; }
.poshesh-accordion-arrow .poshesh-accordion-marker::before { content: "←"; }

.poshesh-accordion-item[open] .poshesh-accordion-marker { transform: rotate(180deg); }
.poshesh-accordion-plus .poshesh-accordion-item[open] .poshesh-accordion-marker { transform: rotate(45deg); }
.poshesh-accordion-arrow .poshesh-accordion-item[open] .poshesh-accordion-marker { transform: rotate(-90deg); }

.poshesh-accordion-body {
    padding: 0 1rem 1.1rem;
    color: var(--pbx-text-muted);
    line-height: 2;
}

.poshesh-accordion-body > :last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    .poshesh-card-media-start,
    .poshesh-card-media-end { flex-direction: column; }

    .poshesh-card-media-start > .poshesh-card-media,
    .poshesh-card-media-end > .poshesh-card-media { width: 100%; flex-basis: auto; }

    .poshesh-tabs-vertical { flex-direction: column; }
    .poshesh-tabs-vertical .poshesh-tabs-list { flex-direction: row; flex-basis: auto; }

    .poshesh-icon-list-grid { grid-template-columns: 1fr; }

    .poshesh-search-lg .poshesh-search-input { padding-block: .75rem; }
    .poshesh-search-submit { padding-inline: .9rem; }

    .poshesh-notice-bar-inner { flex-wrap: wrap; }
}

/* ---------- Secondary text keeps its own scale ----------
   Same rule as the heading's: the injected typography cascade outranks a single class, so every
   element that is deliberately quieter than its widget's main text is qualified by its root. */

.poshesh-card .poshesh-card-eyebrow { font-size: .78rem; font-weight: 600; line-height: 1.9; }
.poshesh-card .poshesh-card-text { font-size: .92rem; font-weight: 400; line-height: 2; }
.poshesh-card .poshesh-card-meta { font-size: .8rem; font-weight: 400; line-height: 1.9; }
.poshesh-card .poshesh-card-link { font-size: .88rem; line-height: 1.9; }
.poshesh-figure .poshesh-figure-text { font-size: .82rem; font-weight: 400; line-height: 1.9; }
.poshesh-list-group .poshesh-list-group-desc { font-size: .8rem; font-weight: 400; line-height: 1.9; }
.poshesh-list-group .poshesh-list-group-time { font-size: .74rem; font-weight: 400; }
.poshesh-icon-list .poshesh-icon-list-secondary { font-size: .78rem; font-weight: 400; }
.poshesh-site-logo .poshesh-site-logo-subtitle { font-size: .74rem; font-weight: 400; line-height: 1.5; }
.poshesh-tabs .poshesh-tabs-hint { font-size: .74rem; font-weight: 400; line-height: 1.7; }
.poshesh-quote .poshesh-quote-role { font-size: .8rem; font-weight: 400; }
.poshesh-search .poshesh-search-hint { font-size: .8rem; font-weight: 400; line-height: 1.9; }

/* <bdi> defaults to inline; the list rows lay their text out as a block. */
.poshesh-icon-list .poshesh-icon-list-text { display: block; }

/* =========================================================================
   6) The general-purpose kit — carousel, testimonials, pricing, CTA, TOC.
   ========================================================================= */

/* ---------- Carousel ---------- */

.poshesh-carousel { position: relative; }

.poshesh-carousel-track {
    display: flex;
    gap: var(--poshesh-carousel-gap, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block-end: .25rem;
}

.poshesh-carousel-track::-webkit-scrollbar { display: none; }
.poshesh-carousel-track:focus-visible { outline: 3px solid var(--pbx-focus); outline-offset: 3px; }

.poshesh-carousel-slide {
    position: relative;
    display: flex;
    margin: 0;
    flex: 0 0 auto;
    flex-direction: column;
    scroll-snap-align: start;

    /* The gap is subtracted per visible slide, so N slides plus their gaps fill the track
       exactly — the arithmetic CSS can do and a JS slider usually gets wrong on the last page. */
    width: calc((100% - (var(--poshesh-carousel-columns, 1) - 1) * var(--poshesh-carousel-gap, 16px))
        / var(--poshesh-carousel-columns, 1));
}

.poshesh-carousel-media {
    overflow: hidden;
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-surface);
}

.poshesh-carousel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.poshesh-carousel-caption { display: flex; flex-direction: column; gap: .35rem; padding-block-start: .8rem; }
.poshesh-carousel-title { margin: 0; font-size: 1.15rem; }
.poshesh-carousel-title a { color: inherit; text-decoration: none; }
.poshesh-carousel .poshesh-carousel-text { margin: 0; color: var(--pbx-text-muted); font-size: .9rem; }

.poshesh-carousel-caption-overlay .poshesh-carousel-slide { position: relative; }

.poshesh-carousel-caption-overlay .poshesh-carousel-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 3rem 1.4rem 1.4rem;
    background: linear-gradient(180deg, transparent, rgba(10, 20, 40, .88));
    color: #fff;
    border-end-start-radius: var(--pbx-radius-lg);
    border-end-end-radius: var(--pbx-radius-lg);
    align-items: flex-start;
}

.poshesh-carousel-caption-overlay .poshesh-carousel-title,
.poshesh-carousel-caption-overlay .poshesh-carousel-title a { color: #fff; }
.poshesh-carousel-caption-overlay .poshesh-carousel-text { color: rgba(255, 255, 255, .85); }

.poshesh-carousel-overlay-link { position: absolute; inset: 0; z-index: 1; }

.poshesh-carousel-nav {
    position: absolute;
    inset-block-start: calc(50% - 22px);
    z-index: 2;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pbx-border);
    border-radius: 50%;
    background: var(--pbx-background);
    color: var(--pbx-text);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: var(--pbx-shadow-sm);
    transition: opacity .16s ease, background-color .16s ease;
}

.poshesh-carousel-nav:hover { background: var(--pbx-surface); }
.poshesh-carousel-nav[disabled] { opacity: .35; cursor: default; }
.poshesh-carousel-prev { inset-inline-start: -8px; }
.poshesh-carousel-next { inset-inline-end: -8px; }

.poshesh-carousel-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-block-start: .9rem;
}

.poshesh-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pbx-text) 25%, transparent);
    cursor: pointer;
    transition: width .18s ease, background-color .18s ease;
}

.poshesh-carousel-dot.is-active {
    width: 22px;
    border-radius: var(--pbx-radius-pill);
    background: var(--pbx-primary);
}

/* ---------- Testimonials ---------- */

.poshesh-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(var(--poshesh-testimonial-columns, 3), minmax(0, 1fr));
    gap: 1.25rem;
}

.poshesh-testimonial {
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: .8rem;
    height: 100%;
}

.poshesh-testimonials-card .poshesh-testimonial,
.poshesh-testimonials-bordered .poshesh-testimonial {
    padding: 1.4rem;
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-background);
}

.poshesh-testimonials-card .poshesh-testimonial { box-shadow: var(--pbx-shadow-sm); }
.poshesh-testimonials-bordered .poshesh-testimonial { border: 1px solid var(--pbx-border); }

.poshesh-testimonials-bubble .poshesh-testimonial-text {
    position: relative;
    padding: 1.2rem 1.3rem;
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-surface);
}

/* The tail that makes a bubble a bubble, on the reading side of the block. */
.poshesh-testimonials-bubble .poshesh-testimonial-text::after {
    content: "";
    position: absolute;
    inset-block-end: -9px;
    inset-inline-start: 1.8rem;
    width: 18px;
    height: 10px;
    background: var(--pbx-surface);
    clip-path: polygon(0 0, 100% 0, 20% 100%);
}

.poshesh-testimonial-text { margin: 0; line-height: 2; }
.poshesh-testimonials-quoted .poshesh-testimonial-text::before {
    content: "”";
    display: block;
    color: var(--pbx-primary);
    font-size: 2.2rem;
    line-height: .7;
    opacity: .5;
}

.poshesh-testimonial-rating { display: inline-flex; gap: .1rem; color: #d9a441; font-size: 1rem; }
.poshesh-testimonial-by { display: flex; align-items: center; gap: .7rem; margin-block-start: auto; }
.poshesh-testimonial-by > span { display: flex; flex-direction: column; }
.poshesh-testimonial-avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; }
.poshesh-testimonial-name { font-style: normal; font-weight: 600; }
.poshesh-testimonials .poshesh-testimonial-role { color: var(--pbx-text-muted); font-size: .8rem; font-weight: 400; }

.poshesh-testimonials-author-top .poshesh-testimonial { flex-direction: column; }
.poshesh-testimonials-author-top .poshesh-testimonial-by { order: -1; margin-block-start: 0; }
.poshesh-testimonials-align-center .poshesh-testimonial { text-align: center; align-items: center; }
.poshesh-testimonials-align-center .poshesh-testimonial-by { flex-direction: column; text-align: center; }

/* ---------- Pricing table ---------- */

.poshesh-pricing {
    position: relative;
    display: flex;
    height: 100%;
    padding: 1.6rem 1.5rem 1.8rem;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--pbx-radius-lg);
    background: var(--pbx-background);
    overflow: hidden;
}

.poshesh-pricing-bordered { border: 1px solid var(--pbx-border); }
.poshesh-pricing-elevated { box-shadow: var(--pbx-shadow); }
.poshesh-pricing-filled { background: var(--pbx-surface); }

.poshesh-pricing-featured {
    border: 2px solid var(--pbx-primary);
    box-shadow: var(--pbx-shadow);
}

.poshesh-pricing-ribbon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    padding: .25rem .9rem;
    border-end-start-radius: var(--pbx-radius);
    background: var(--pbx-accent);
    color: #22160a;
    font-size: .72rem;
    font-weight: 700;
}

.poshesh-pricing-head { display: flex; flex-direction: column; gap: .35rem; }

.poshesh-pricing-icon {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--pbx-radius);
    background: color-mix(in srgb, var(--pbx-primary) 10%, transparent);
    color: var(--pbx-primary);
    font-size: 1.3rem;
}

.poshesh-pricing-title { margin: 0; font-size: 1.2rem; }
.poshesh-pricing .poshesh-pricing-subtitle { margin: 0; color: var(--pbx-text-muted); font-size: .85rem; font-weight: 400; }

.poshesh-pricing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
    padding-block: .6rem;
    border-block: 1px solid var(--pbx-border);
}

.poshesh-pricing-amount { font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--pbx-heading); }
.poshesh-pricing .poshesh-pricing-currency { font-size: .9rem; color: var(--pbx-text-muted); }
.poshesh-pricing .poshesh-pricing-period { font-size: .85rem; color: var(--pbx-text-muted); }
.poshesh-pricing .poshesh-pricing-original { font-size: .9rem; color: var(--pbx-text-muted); opacity: .8; }

.poshesh-pricing-features { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .55rem; list-style: none; }
.poshesh-pricing-features li { display: flex; align-items: flex-start; gap: .5rem; }
.poshesh-pricing-features li > i { color: var(--pbx-primary); margin-block-start: .2rem; }
.poshesh-pricing-features li.is-excluded { color: var(--pbx-text-muted); text-decoration: line-through; }
.poshesh-pricing-features li.is-excluded > i { color: var(--pbx-text-muted); }
.poshesh-pricing-action { margin-block-start: auto; justify-content: center; }

/* ---------- Call to action ---------- */

.poshesh-cta {
    position: relative;
    display: flex;
    padding: 2.6rem 2rem;
    flex-direction: column;
    gap: 1.2rem;
    border-radius: var(--pbx-radius-lg);
    isolation: isolate;
}

.poshesh-cta-tone-primary { background: var(--pbx-primary); color: var(--pbx-on-primary); }
.poshesh-cta-tone-secondary { background: var(--pbx-secondary); color: var(--pbx-on-dark); }
.poshesh-cta-tone-accent { background: var(--pbx-accent); color: #22160a; }
.poshesh-cta-tone-dark { background: var(--pbx-dark); color: var(--pbx-on-dark); }
.poshesh-cta-tone-surface { background: var(--pbx-surface); }
.poshesh-cta-tone-none { background: transparent; }

.poshesh-cta-tone-primary :is(h1, h2, h3, h4, h5, h6),
.poshesh-cta-tone-secondary :is(h1, h2, h3, h4, h5, h6),
.poshesh-cta-tone-dark :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

.poshesh-cta-image { background-size: cover; background-position: center; color: #fff; }
.poshesh-cta-image :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* The tint is a layer, not a change to the image, so one number controls legibility. */
.poshesh-cta-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(10, 20, 40, 1);
    opacity: var(--poshesh-cta-overlay, .55);
}

.poshesh-cta-body { display: flex; flex-direction: column; gap: .5rem; }
.poshesh-cta .poshesh-cta-eyebrow { margin: 0; font-size: .82rem; font-weight: 600; opacity: .85; }
.poshesh-cta-title { margin: 0; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.poshesh-cta .poshesh-cta-text { margin: 0; opacity: .9; line-height: 2; }
.poshesh-cta-text > :last-child { margin-bottom: 0; }
.poshesh-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.poshesh-cta-align-center { text-align: center; align-items: center; }
.poshesh-cta-align-center .poshesh-cta-actions { justify-content: center; }
.poshesh-cta-align-end { text-align: end; align-items: flex-end; }

.poshesh-cta-boxed { max-width: 46rem; margin-inline: auto; }

.poshesh-cta-split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.poshesh-cta-split .poshesh-cta-actions { flex: 0 0 auto; }

/* Buttons on a coloured band: solid white against it, and outlined for the quieter one. */
.poshesh-cta-primary { background: var(--pbx-background); color: var(--pbx-primary); }
.poshesh-cta-primary:hover { background: var(--pbx-background); filter: brightness(.95); }
.poshesh-cta-secondary { border: 1px solid currentColor; color: inherit; background: transparent; }
.poshesh-cta-tone-surface .poshesh-cta-primary,
.poshesh-cta-tone-none .poshesh-cta-primary { background: var(--pbx-primary); color: var(--pbx-on-primary); }

/* ---------- Table of contents ---------- */

.poshesh-toc { display: flex; flex-direction: column; gap: .6rem; }
.poshesh-toc-card { padding: 1.1rem 1.2rem; border-radius: var(--pbx-radius-lg); background: var(--pbx-surface); }
.poshesh-toc-bordered { padding: 1.1rem 1.2rem; border: 1px solid var(--pbx-border); border-radius: var(--pbx-radius-lg); }
.poshesh-toc-sticky { position: sticky; inset-block-start: 1rem; }

.poshesh-toc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pbx-heading);
    font: inherit;
    font-weight: 700;
    text-align: start;
}

.poshesh-toc-toggle { cursor: pointer; min-height: var(--pbx-tap); }
.poshesh-toc-toggle[aria-expanded="false"] + .poshesh-toc-list { display: none; }
.poshesh-toc-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
.poshesh-toc-toggle i { transition: transform .18s ease; }

.poshesh-toc-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: .1rem;
    list-style: none;
    counter-reset: poshesh-toc;
}

.poshesh-toc-list li { display: flex; }
.poshesh-toc-list a {
    display: block;
    padding: .3rem 0;
    color: var(--pbx-text-muted);
    text-decoration: none;
    line-height: 1.9;
}

.poshesh-toc-list a:hover { color: var(--pbx-link); }
.poshesh-toc-list a.is-active { color: var(--pbx-primary); font-weight: 600; }
.poshesh-toc-list li[data-level="3"] { padding-inline-start: 1rem; font-size: .92em; }
.poshesh-toc-list li[data-level="4"] { padding-inline-start: 2rem; font-size: .88em; }

.poshesh-toc-numbered .poshesh-toc-list li::before {
    counter-increment: poshesh-toc;
    content: counter(poshesh-toc) ".";
    padding-inline-end: .4rem;
    padding-block: .3rem;
    color: var(--pbx-text-muted);
    font-size: .85em;
}

.poshesh-toc-bulleted .poshesh-toc-list li::before {
    content: "•";
    padding-inline-end: .5rem;
    padding-block: .3rem;
    color: var(--pbx-primary);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .poshesh-carousel-slide {
        width: calc((100% - (var(--poshesh-carousel-columns-tablet, 1) - 1) * var(--poshesh-carousel-gap, 16px))
            / var(--poshesh-carousel-columns-tablet, 1));
    }

    .poshesh-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .poshesh-testimonials-grid:has(> :last-child:nth-child(1)) { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .poshesh-carousel-slide {
        width: calc((100% - (var(--poshesh-carousel-columns-mobile, 1) - 1) * var(--poshesh-carousel-gap, 16px))
            / var(--poshesh-carousel-columns-mobile, 1));
    }

    .poshesh-carousel-prev { inset-inline-start: 2px; }
    .poshesh-carousel-next { inset-inline-end: 2px; }
    .poshesh-testimonials-grid { grid-template-columns: 1fr; }
    .poshesh-cta { padding: 2rem 1.3rem; }
    .poshesh-cta-split { flex-direction: column; align-items: stretch; }
}