/**
 * REEID Shared Components
 *
 * Reusable frontend and Gutenberg component classes.
 * Author-controlled Gutenberg settings are not locked.
 */

/* Design tokens */

body.reeid-design-en,
.editor-styles-wrapper {
	--reeid-bg: #17181a;
	--reeid-bg-deep: #111214;

	--reeid-surface: #202226;
	--reeid-surface-raised: #272a2f;
	--reeid-surface-warm: #292523;

	--reeid-surface-light: #f2eee8;
	--reeid-surface-light-soft: #e9e4dd;

	--reeid-text: #f7f5f2;
	--reeid-text-muted: #c9c6c1;
	--reeid-text-dim: #96938f;

	--reeid-text-dark: #222326;
	--reeid-text-dark-muted: #626268;

	--reeid-line: rgba(255, 255, 255, 0.13);
	--reeid-line-strong: rgba(255, 255, 255, 0.23);
	--reeid-line-dark: rgba(20, 20, 22, 0.14);

	--reeid-accent: #b14046;
	--reeid-accent-hover: #c65359;
	--reeid-accent-soft: rgba(177, 64, 70, 0.13);

	--reeid-shadow-soft:
		0 18px 45px rgba(0, 0, 0, 0.16);

	--reeid-shadow-raised:
		0 24px 70px rgba(0, 0, 0, 0.24);

	--reeid-width: 1180px;
}

/* Shared surfaces */

body.reeid-design-en .reeid-surface,
.editor-styles-wrapper .reeid-surface {
	background: var(--reeid-bg);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--deep,
.editor-styles-wrapper .reeid-surface--deep {
	background: var(--reeid-bg-deep);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--raised,
.editor-styles-wrapper .reeid-surface--raised {
	background: var(--reeid-surface-raised);
	color: var(--reeid-text);
	box-shadow: var(--reeid-shadow-soft);
}

body.reeid-design-en .reeid-surface--warm,
.editor-styles-wrapper .reeid-surface--warm {
	background:
		linear-gradient(
			135deg,
			rgba(177, 64, 70, 0.07),
			rgba(255, 255, 255, 0.015) 48%
		),
		var(--reeid-surface-warm);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--light,
.editor-styles-wrapper .reeid-surface--light {
	background:
		linear-gradient(
			145deg,
			#f7f3ed,
			var(--reeid-surface-light)
		);
	color: var(--reeid-text-dark);
}

body.reeid-design-en
.reeid-surface--light
:is(h1, h2, h3, h4, p, li),
.editor-styles-wrapper
.reeid-surface--light
:is(h1, h2, h3, h4, p, li) {
	color: inherit;
}

/* Restrained decoration */

body.reeid-design-en .reeid-decor--glow,
.editor-styles-wrapper .reeid-decor--glow {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.reeid-design-en .reeid-decor--glow::before,
.editor-styles-wrapper .reeid-decor--glow::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -180px;
	right: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(177, 64, 70, 0.15),
			rgba(177, 64, 70, 0) 68%
		);
	pointer-events: none;
}

body.reeid-design-en .reeid-decor--grid,
.editor-styles-wrapper .reeid-decor--grid {
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		);
	background-size: 44px 44px;
}

/* Shared elevation */

body.reeid-design-en .reeid-elevated,
.editor-styles-wrapper .reeid-elevated {
	border: 1px solid var(--reeid-line);
	box-shadow: var(--reeid-shadow-soft);
}

body.reeid-design-en .reeid-elevated--strong,
.editor-styles-wrapper .reeid-elevated--strong {
	border: 1px solid var(--reeid-line-strong);
	box-shadow: var(--reeid-shadow-raised);
}

/* REEID CANONICAL HERO CONTENT COMPONENTS START */

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-inner {
    position: relative;
    z-index: 1;
    width:
        min(
            var(--reeid-width),
            calc(100% - 48px)
        ) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-kicker {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 30px;
    margin: 0 0 18px !important;
    padding: 6px 11px;
    color: #f09a9e !important;
    background: rgba(177, 64, 70, 0.11);
    border: 1px solid rgba(210, 83, 90, 0.32);
    border-radius: 6px;
    font-size: 0.77rem !important;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-title {
    max-width: 730px !important;
    margin: 0 0 22px !important;
    color: #ffffff !important;
    font-size:
        clamp(
            3.05rem,
            4.8vw,
            4.55rem
        ) !important;
    font-weight: 400 !important;
    letter-spacing: -0.048em !important;
    line-height: 1 !important;
    text-shadow:
        0 18px 48px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-title-accent {
    display: block;
    margin-top: 0.08em;
    color: #d85b61;
    background:
        linear-gradient(
            105deg,
            #b94349,
            #e06b71 58%,
            #c64e54
        );
    background-clip: text;
    font-size: 0.60em;
    line-height: 1.02;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-lead {
    max-width: 650px !important;
    margin: 0 0 18px !important;
    color: rgba(255, 255, 255, 0.80) !important;
    font-size:
        clamp(
            1.06rem,
            1.45vw,
            1.22rem
        ) !important;
    line-height: 1.56 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-credibility {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 0 24px !important;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.67) !important;
    border-left: 2px solid var(--reeid-accent);
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-buttons
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 16px 28px !important;
    border-radius: 4px !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: center;
    text-decoration: none !important;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-button-primary
.wp-block-button__link {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #b33f46,
            #d2575e
        ) !important;
    border: 1px solid #d65c63 !important;
    border-radius: 4px !important;
    box-shadow:
        0 16px 38px rgba(177, 64, 70, 0.30);
}

body.reeid-design-en
.reeid-ds-button-primary
.wp-block-button__link:hover {
    background:
        linear-gradient(
            135deg,
            #c64950,
            #df666c
        ) !important;
    box-shadow:
        0 22px 46px rgba(177, 64, 70, 0.38);
    transform: translateY(-2px);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-button-secondary
.wp-block-button__link {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border:
        1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px !important;
}

body.reeid-design-en
.reeid-ds-button-secondary
.wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    transform: translateY(-2px);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-proof-grid {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-proof-grid
> .wp-block-column {
    min-width: 0;
    padding: 25px 24px 23px;
    border-right: 1px solid rgba(255, 255, 255, 0.11);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-proof-grid
> .wp-block-column:last-child {
    border-right: 0;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-proof-value {
    margin: 0 0 7px !important;
    color: #ffffff !important;
    font-size:
        clamp(
            1.12rem,
            1.5vw,
            1.32rem
        ) !important;
    font-weight: 600;
    line-height: 1.25 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-proof-label {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
}

@media (max-width: 980px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid
    > .wp-block-column:nth-child(2) {
        border-right: 0;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid
    > .wp-block-column:nth-child(-n + 2) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.11);
    }
}

@media (max-width: 680px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-inner {
        width: calc(100% - 32px) !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-title {
        margin-bottom: 20px !important;
        font-size:
            clamp(
                2.35rem,
                10vw,
                3.1rem
            ) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-title-accent {
        font-size: 0.60em;
        line-height: 1.04;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-lead {
        font-size: 1.05rem !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-buttons
    :is(
        .wp-block-button,
        .wp-block-button__link
    ) {
        width: 100%;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid {
        grid-template-columns: 1fr;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid
    > .wp-block-column {
        border-right: 0 !important;
        border-bottom:
            1px solid rgba(255, 255, 255, 0.11);
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-proof-grid
    > .wp-block-column:last-child {
        border-bottom: 0;
    }
}

/* REEID CANONICAL HERO CONTENT COMPONENTS END */

/* REEID CONTROLLED WORKFLOW START */

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-section-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px !important;
    color: #d9878b !important;
    font-size: 0.77rem !important;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-section-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: var(--reeid-accent);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-section-title {
    max-width: 920px !important;
    margin: 0 0 24px !important;
    color: #ffffff !important;
    font-size:
        clamp(
            2.7rem,
            4.8vw,
            4.4rem
        ) !important;
    font-weight: 400 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-section-lead {
    max-width: 790px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.24rem
        ) !important;
    line-height: 1.65 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow {
    position: relative;
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px !important;
    margin: 50px 0 0 !important;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-step {
    position: relative;
    min-width: 0;
    min-height: 280px;
    margin: 0 !important;
    padding:
        32px
        clamp(24px, 2.6vw, 32px)
        34px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        ) !important;
    border:
        1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 10px !important;
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.18) !important;
    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

body.reeid-design-en
.reeid-ds-flow-step:hover {
    background:
        rgba(255, 255, 255, 0.035) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-step::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--reeid-accent),
            rgba(177, 64, 70, 0.18)
        );
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-step:not(:last-child)::after {

    content: "→";
    position: absolute;
    z-index: 3;
    top: 31px;
    right: -22px;
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    background: #202020;
    border: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.11),
        0 8px 18px rgba(0, 0, 0, 0.28);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-index {
    display: inline-flex;
    width: 38px;
    height: 34px;
    margin: 0 0 34px !important;
    align-items: center;
    justify-content: center;
    color: #e38b90 !important;
    background: rgba(177, 64, 70, 0.10);
    border: 1px solid rgba(210, 83, 90, 0.30);
    border-radius: 6px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-title {
    margin: 0 0 15px !important;
    color: #ffffff !important;
    font-size:
        clamp(
            1.35rem,
            1.9vw,
            1.65rem
        ) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-flow-copy {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.98rem !important;
    line-height: 1.62 !important;
}

@media (max-width: 980px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow-step {
        min-height: 250px;
    }

        :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow-step::after {
        display: none !important;
    }
}

@media (max-width: 680px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-section-title {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3rem
            ) !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow {
        grid-template-columns: 1fr;
        margin-top: 36px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow-step {
        min-height: 0;
        padding: 27px 25px 29px !important;
        border:
            1px solid rgba(255, 255, 255, 0.13) !important;
        border-radius: 10px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow-step::after {
        display: none !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-flow-index {
        margin-bottom: 24px !important;
    }
}

/* REEID CONTROLLED WORKFLOW END */

/* REEID ROUTE SELECTOR START */

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-layout {
    display: grid !important;
    gap: clamp(44px, 5.5vw, 70px) !important;
    align-items: start;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-intro {
    max-width: 520px;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-intro
.reeid-ds-section-title {
    max-width: 520px !important;
    font-size:
        clamp(
            2.35rem,
            3.35vw,
            3.35rem
        ) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-intro
.reeid-ds-section-lead {
    max-width: 500px !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-list {
    display: grid;
    gap: 16px;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-featured,
:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    border:
        1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.20);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-featured {
    min-height: 330px;
    padding:
        clamp(32px, 4vw, 42px) !important;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(177, 64, 70, 0.10),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.015)
        ),
        #191919 !important;
    border-color:
        rgba(196, 75, 82, 0.28) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-featured::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--reeid-accent),
            rgba(213, 84, 91, 0.28),
            transparent
        );
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-featured
> *,
:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact
> * {
    position: relative;
    z-index: 1;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-eyebrow {
    margin: 0 0 22px !important;
    color: #e18a8f !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-title {
    margin: 0 0 16px !important;
    color: #ffffff !important;
    font-size:
        clamp(
            1.65rem,
            2.5vw,
            2.15rem
        ) !important;
    font-weight: 500 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.12 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-copy {
    max-width: 620px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-points {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 30px 0 28px !important;
    padding: 0 !important;
    list-style: none !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-points
li {
    position: relative;
    margin: 0 !important;
    padding: 12px 13px 12px 28px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 7px;
    font-size: 0.84rem;
    line-height: 1.4;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-points
li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 13px;
    width: 6px;
    height: 6px;
    background: var(--reeid-accent);
    border-radius: 50%;
    transform: translateY(-50%);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-featured
.reeid-ds-buttons {
    margin-top: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact {
    display: grid;
    gap: 24px;
    align-items: center;
    padding: 28px 30px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.012)
        ),
        #191919 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background:
        linear-gradient(
            180deg,
            var(--reeid-accent),
            rgba(177, 64, 70, 0.16)
        );
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact-content {
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact
.reeid-ds-route-eyebrow {
    margin-bottom: 10px !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-compact
.reeid-ds-route-title {
    margin-bottom: 10px !important;
    font-size:
        clamp(
            1.35rem,
            1.9vw,
            1.62rem
        ) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-link {
    margin: 0 !important;
    white-space: normal;
    text-align: right;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-route-link
a {
    display: inline-flex;
    min-height: 0;
    padding: 4px 0;
    align-items: center;
    justify-content: center;
    color: #f1c7ca !important;
    font-size: 0.91rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    border-bottom:
        1px solid rgba(213, 84, 91, 0.44);
    border-radius: 0;
    transition:
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

body.reeid-design-en
.reeid-ds-route-link
a:hover {
    color: #ffffff !important;
    border-bottom-color: #dc656b;
    transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
    body.reeid-design-en
    .reeid-ds-route-featured:hover,
    body.reeid-design-en
    .reeid-ds-route-compact:hover {
        border-color: rgba(213, 84, 91, 0.38) !important;
        box-shadow:
            0 30px 70px rgba(0, 0, 0, 0.28);
        transform: translateY(-3px);
    }
}

@media (max-width: 980px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-layout {
        grid-template-columns: 1fr;
        gap: 42px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-intro {
        max-width: 790px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-intro
    .reeid-ds-section-lead {
        max-width: 760px !important;
    }
}

@media (max-width: 680px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-featured {
        min-height: 0;
        padding: 28px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-points {
        grid-template-columns: 1fr;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-compact {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 26px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-link {
        white-space: normal;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-link {
        text-align: left;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-route-link
    a {
        width: auto;
        justify-content: flex-start;
    }
}

/* REEID ROUTE SELECTOR END */

/* REEID CAPABILITY LIST START */

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-layout {
    --reeid-capability-layout-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    --reeid-capability-layout-gap:
        clamp(50px, 7vw, 92px);

    display: grid !important;
    gap:
        var(--reeid-capability-layout-gap) !important;
    align-items: start;
    margin: 0 !important;
}

.editor-styles-wrapper
.reeid-ds-capability-layout
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns:
        var(--reeid-capability-layout-columns);
    gap:
        var(--reeid-capability-layout-gap) !important;
    align-items: start;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-intro {
    max-width: 520px;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-intro
.reeid-ds-section-title {
    max-width: 520px !important;
    font-size:
        clamp(
            2.45rem,
            3.5vw,
            3.55rem
        ) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-intro
.reeid-ds-section-lead {
    max-width: 490px !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-list {
    margin: 0 !important;
    border-top:
        1px solid var(--reeid-line);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-row {
    --reeid-capability-row-columns:
        54px
        minmax(180px, 0.72fr)
        minmax(0, 1fr);

    --reeid-capability-row-gap:
        clamp(18px, 2.8vw, 38px);

    display: grid !important;
    gap:
        var(--reeid-capability-row-gap) !important;
    align-items: start;
    margin: 0 !important;
    padding:
        clamp(25px, 3vw, 34px)
        0 !important;
    border-bottom:
        1px solid var(--reeid-line);
}

.editor-styles-wrapper
.reeid-ds-capability-row
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns:
        var(--reeid-capability-row-columns);
    gap:
        var(--reeid-capability-row-gap) !important;
    align-items: start;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-index {
    display: inline-flex;
    width: 38px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: #e38b90 !important;
    background:
        var(--reeid-accent-soft);
    border:
        1px solid rgba(210, 83, 90, 0.28);
    border-radius: 5px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.72rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-title {
    margin: 2px 0 0 !important;
    color: var(--reeid-text) !important;
    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.55rem
        ) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-capability-copy {
    margin: 0 !important;
    color: var(--reeid-text-muted) !important;
    font-size: 0.98rem !important;
    line-height: 1.66 !important;
}

@media (max-width: 980px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-capability-layout {
        --reeid-capability-layout-columns: 1fr;
        --reeid-capability-layout-gap: 46px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-capability-intro {
        max-width: 790px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-capability-intro
    .reeid-ds-section-lead {
        max-width: 760px !important;
    }
}

@media (max-width: 680px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-capability-row {
        --reeid-capability-row-columns:
            42px
            minmax(0, 1fr);

        --reeid-capability-row-gap:
            16px;

        padding:
            25px
            0 !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-capability-copy {
        grid-column: 2;
    }
}

/* REEID CAPABILITY LIST END */

/* REEID PRODUCT SHOWCASE START */

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-layout {
    --reeid-product-columns:
        minmax(0, 0.90fr)
        minmax(0, 1.10fr);

    --reeid-product-gap:
        clamp(48px, 6vw, 78px);

    display: grid !important;
    gap:
        var(--reeid-product-gap) !important;
    align-items: center;
    margin: 0 !important;
}

.editor-styles-wrapper
.reeid-ds-product-layout
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns:
        var(--reeid-product-columns);
    gap:
        var(--reeid-product-gap) !important;
    align-items: center;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-copy {
    max-width: 570px;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-copy
.reeid-ds-section-title {
    max-width: 570px !important;
    font-size:
        clamp(
            2.35rem,
            3.25vw,
            3.35rem
        ) !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-copy
.reeid-ds-section-lead {
    max-width: 550px !important;
    margin-bottom: 31px !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-points {
    display: grid;
    gap: 15px;
    margin:
        0
        0
        34px !important;
    padding: 0 !important;
    list-style: none !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-points
li {
    position: relative;
    margin: 0 !important;
    padding-left: 30px;
    color:
        var(--reeid-text-muted) !important;
    font-size: 0.96rem;
    line-height: 1.55;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-points
li::before {
    content: "";
    position: absolute;
    top: 0.58em;
    left: 2px;
    width: 11px;
    height: 11px;
    background:
        var(--reeid-accent-soft);
    border:
        1px solid rgba(210, 83, 90, 0.48);
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 3px
        rgba(177, 64, 70, 0.13);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-media {
    min-width: 0;
    margin: 0 !important;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-frame {
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );
    border:
        1px solid var(--reeid-line);
    border-radius: 17px;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.31);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-frame-bar {
    position: relative;
    min-height: 38px;
    margin: 0 !important;
    padding:
        10px
        14px
        9px
        58px;
    color:
        rgba(255, 255, 255, 0.56) !important;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.71rem !important;
    letter-spacing: 0.06em;
    line-height: 1.3 !important;
    text-transform: uppercase;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-frame-bar::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 16px;
    width: 7px;
    height: 7px;
    background: rgba(210, 83, 90, 0.82);
    border-radius: 50%;
    box-shadow:
        14px 0 0 rgba(255, 255, 255, 0.26),
        28px 0 0 rgba(255, 255, 255, 0.15);
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    background: #ffffff;
    border-radius: 11px;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-image
img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-media-meta {
    --reeid-product-meta-columns:
        minmax(150px, 0.38fr)
        minmax(0, 0.62fr);

    display: grid !important;
    gap: 24px !important;
    align-items: start;
    margin:
        19px
        0
        0 !important;
    padding:
        18px
        4px
        0 !important;
    border-top:
        1px solid var(--reeid-line);
}

.editor-styles-wrapper
.reeid-ds-product-media-meta
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns:
        var(--reeid-product-meta-columns);
    gap: 24px !important;
    align-items: start;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-media-label {
    margin: 0 !important;
    color: #e38b90 !important;
    font-size: 0.74rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.45 !important;
    text-transform: uppercase;
}

:is(
    body.reeid-design-en,
    .editor-styles-wrapper
) .reeid-ds-product-media-caption {
    margin: 0 !important;
    color:
        var(--reeid-text-muted) !important;
    font-size: 0.93rem !important;
    line-height: 1.62 !important;
}

@media (max-width: 980px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-layout {
        --reeid-product-columns: 1fr;
        --reeid-product-gap: 48px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-copy {
        max-width: 790px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-copy
    .reeid-ds-section-lead {
        max-width: 760px !important;
    }
}

@media (max-width: 680px) {
    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-media-meta {
        --reeid-product-meta-columns: 1fr;
        gap: 10px !important;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-frame {
        padding: 5px !important;
        border-radius: 12px;
    }

    :is(
        body.reeid-design-en,
        .editor-styles-wrapper
    ) .reeid-ds-product-frame-bar {
        min-height: 34px;
        padding-top: 9px;
        padding-bottom: 8px;
    }
}

/* REEID PRODUCT SHOWCASE END */


/* REEID CAPABILITY NATIVE MOBILE GRID START */

@media (max-width: 980px) {
    body.reeid-design-en
    .reeid-ds-capability-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.reeid-design-en
    .reeid-ds-capability-layout
    > .reeid-ds-capability-intro,
    body.reeid-design-en
    .reeid-ds-capability-layout
    > .reeid-ds-capability-list {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    body.reeid-design-en
    .reeid-ds-capability-row {
        grid-template-columns:
            38px
            minmax(0, 1fr) !important;
        column-gap: 16px !important;
        row-gap: 12px !important;
    }

    body.reeid-design-en
    .reeid-ds-capability-row
    > .reeid-ds-capability-index {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.reeid-design-en
    .reeid-ds-capability-row
    > .reeid-ds-capability-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0;
    }

    body.reeid-design-en
    .reeid-ds-capability-row
    > .reeid-ds-capability-copy {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0;
    }
}

/* REEID CAPABILITY NATIVE MOBILE GRID END */

/* REEID PRODUCT NATIVE RESPONSIVE GRID START */

@media (max-width: 980px) {
    body.reeid-design-en
    .reeid-ds-product-layout {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    body.reeid-design-en
    .reeid-ds-product-layout
    > .reeid-ds-product-copy,
    body.reeid-design-en
    .reeid-ds-product-layout
    > .reeid-ds-product-media {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    body.reeid-design-en
    .reeid-ds-product-media-meta {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    body.reeid-design-en
    .reeid-ds-product-media-meta
    > .reeid-ds-product-media-label,
    body.reeid-design-en
    .reeid-ds-product-media-meta
    > .reeid-ds-product-media-caption {
        grid-column: 1 / -1 !important;
        min-width: 0;
    }
}

/* REEID PRODUCT NATIVE RESPONSIVE GRID END */