/* SPEC-039: translations for existing Turri templates on ACSS 4.
 * Native ACSS settings own the palette; the generated Turri tokens own scales.
 * Retire each alias or utility when its recorded template consumers migrate.
 */
:root {
    --body-color: var(--text-color);
    --radius-circle: 50vw;
    --black-trans-40: color-mix(in srgb, var(--black) 40%, transparent);
    --black-trans-50: color-mix(in srgb, var(--black) 50%, transparent);
    --neutral-trans-40: color-mix(in srgb, var(--neutral) 40%, transparent);
    --width-m: calc(var(--content-width) * 0.4);
    --width-l: calc(var(--content-width) * 0.6);
    --width-xl: calc(var(--content-width) * 0.8);
    --fr-content-gap: var(--space-m);
    --fr-container-gap: var(--space-xl);
    --fr-card-gap: var(--card-gap, var(--space-s));
}

/* Commerce aliases must not replace the framework's inherited body color. */
body.turri-woocommerce-form-context {
    color: var(--body-color);
}

/* Preserve the heading weight inherited by existing product-title links. */
.turri-product-card__title a {
    font-weight: inherit;
}

.bg--neutral {
    background-color: var(--neutral);
}

.bg--neutral-ultra-light {
    background-color: var(--neutral-ultra-light);
}

.bg--white {
    background-color: var(--white);
}

.breakout--full {
    align-self: flex-start;
    inline-size: 100vw !important;
    max-inline-size: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
}

.gap--s.gap--s {
    gap: var(--space-s);
    --row-gap: var(--space-s);
    --col-gap: var(--space-s);
    --grid-gap: var(--space-s);
}

.gap--l.gap--l {
    gap: var(--space-l);
    --row-gap: var(--space-l);
    --col-gap: var(--space-l);
    --grid-gap: var(--space-l);
}

.radius--circle.radius--circle {
    border-radius: var(--radius-circle);
}

.width--s:not([class*="breakout--"]) {
    inline-size: calc(var(--content-width) * 0.2);
    max-inline-size: 100%;
}

.aspect--1-1 {
    --aspect-ratio: 1 / 1;
    aspect-ratio: var(--aspect-ratio);
}

img.object-fit--cover,
.object-fit--cover img {
    --object-fit: cover;
    object-fit: cover;
}

img.object-fit--contain,
.object-fit--contain img {
    --object-fit: contain;
    object-fit: contain;
}

.object-fit--top-center,
.object-fit--top-center img {
    object-position: 50% 10%;
}

.box-shadow--l {
    box-shadow: var(--turri-shadow-l);
}

.fr-lede,
p.fr-lede {
    max-width: 60ch;
}

.brxe-text.fr-content-section-mike__text > * + p {
    margin-block-start: 0;
}

/* Keep legacy builder actions on their declared semantic button palette. */
html body a.brxe-button.btn--secondary {
    background-color: var(--btn-background);
    border-color: var(--btn-border-color);
    color: var(--btn-text-color);
    inline-size: auto;
}

html body a.brxe-button.btn--secondary:is(:hover, :focus-visible) {
    background-color: var(--btn-background-hover);
    border-color: var(--btn-border-color-hover);
    color: var(--btn-text-color-hover);
}

/* Header icon controls inherited body metrics before the v4 button reset. */
html body button.turri-header-cart,
html body button.header-search__menu-toggle-icon,
html body button.main-menu-offcanvas__close {
    font-weight: inherit;
    line-height: inherit;
}

html body button.turri-storefront__panel-close,
html body button.fr-modal__close-icon,
html body button.turri-side-cart__close {
    font-weight: inherit;
}

.clickable-parent:not(a),
.clickable-parent:not(a) a,
a.clickable-parent {
    position: static;
}

.clickable-parent:not(a) > a::after,
a.clickable-parent::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    cursor: pointer;
}

.color-scheme--alt {
    --bg-ultra-light-text: var(--text-dark);
    --bg-light-text: var(--text-dark);
    --bg-dark-text: var(--text-light);
    --bg-ultra-dark-text: var(--text-light);
    --bg-ultra-light-heading: var(--text-dark);
    --bg-light-heading: var(--text-dark);
    --bg-dark-heading: var(--text-light);
    --bg-ultra-dark-heading: var(--text-light);
}