/**
 * AIEO Complementary Products
 *
 * The designer's checklist on the single-product page (the owner, 10 Nov
 * 2026: his module look is the default on every site): a line above, the
 * title, one row per product (tick | photo | name with its line or its
 * choice | price), then the note and the button. Every value is a theme
 * token; a size keeps the theme's value as its fallback for other themes, a
 * colour falls back only to currentColor, Canvas or CanvasText. The
 * appearance settings print --aieo-compl-* only where the shop changed one:
 * a picked background or another radius makes the section a box again.
 */
.aieo-compl {
    display: grid;
    gap: var(--wp--preset--spacing--3, 0.75rem);
    margin: var(--wp--preset--spacing--4, 1rem) 0;
    padding: var(--wp--preset--spacing--5, 1.5rem) var(--aieo-compl-box-pad, 0) var(--aieo-compl-box-pad, 0);
    border: 0 solid var(--aieo-compl-border, var(--wp--preset--color--line, color-mix(in srgb, currentColor 16%, transparent)));
    border-top-width: var(--aieo-compl-border-w, 1px);
    border-inline-width: var(--aieo-compl-box-w, 0);
    border-bottom-width: var(--aieo-compl-box-w, 0);
    border-radius: var(--aieo-compl-border-r, 0);
    background: var(--aieo-compl-bg, none);
    --aieo-compl-line: var(--wp--preset--color--line, color-mix(in srgb, currentColor 16%, transparent));
    --aieo-compl-ink: var(--wp--preset--color--fg, currentColor);
    --aieo-compl-muted: var(--wp--preset--color--muted, color-mix(in srgb, currentColor 65%, transparent));
}
/* The page's h1 is the product's title: this is its h2, at the large size. */
.aieo-compl .aieo-compl-title {
    margin: 0;
    font-size: var(--aieo-compl-title-size, var(--wp--preset--font-size--lg, 1.125rem));
    font-stretch: 105%;
}
.aieo-compl-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row: tick | photo | name and its line or choice | price. */
.aieo-compl .aieo-compl-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 64px minmax(0, 1fr) auto;
    gap: var(--wp--preset--spacing--3, 0.75rem);
    align-items: center;
    margin: 0;
    padding: var(--wp--preset--spacing--3, 0.75rem) 0;
    border-bottom: 1px solid var(--aieo-compl-line);
    font-size: var(--aieo-compl-text-size, var(--wp--preset--font-size--sm, 0.875rem));
}
/* The tick, a real checkbox (the theme's check recipe), in its 24 px column. */
.aieo-compl-check {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: var(--wp--custom--rooster--field--check, 1.25rem);
    height: var(--wp--custom--rooster--field--check, 1.25rem);
    margin: 0;
    cursor: pointer;
}
/* The photo is the tick's label, square; its layer covers the row, so a tap
   anywhere on the row but its link and its choice ticks it. */
.aieo-compl .aieo-compl-item .aieo-compl-thumb {
    display: block;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--aieo-shape-media, 4px);
    cursor: pointer;
}
/* A product's photo stays on white in both schemes (R9): the browser's light
   Canvas, not a white of ours; a photo that is not square is letterboxed on it. */
.aieo-compl-thumb { color-scheme: light; background: Canvas; }
.aieo-compl-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
}
.aieo-compl-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
.aieo-compl-body {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: var(--wp--preset--spacing--1, 0.25rem);
}
.aieo-compl .aieo-compl-name {
    position: relative;
    z-index: 1;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aieo-compl-ink);
    text-decoration: none;
}
.aieo-compl .aieo-compl-name:hover { text-decoration: underline; }
/* A simple product's line: its short description as text, one line. */
.aieo-compl-desc,
.aieo-compl-novar {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    color: var(--aieo-compl-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* A variable product's choice, above the row's layer: up to three chips (radio
   buttons named by the attribute), more in a select. */
.aieo-compl-variation {
    position: relative;
    z-index: 1;
}
.aieo-compl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aieo-compl .aieo-compl-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 48px;
    margin: 0;
    padding: 0 var(--wp--preset--spacing--3, 0.75rem);
    border-radius: var(--wp--custom--rooster--shape--button, 4px);
    box-shadow: inset 0 0 0 1px var(--aieo-compl-line);
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    line-height: 1.2;
    cursor: pointer;
}
.aieo-compl .aieo-compl-chip:hover { box-shadow: inset 0 0 0 1px var(--aieo-compl-ink); }
.aieo-compl .aieo-compl-chip:has(input:checked) {
    background: var(--wp--preset--color--fg, CanvasText);
    color: var(--wp--preset--color--bg, Canvas);
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--fg, CanvasText);
}
.aieo-compl-chip:has(input:focus-visible) {
    outline: 2px solid var(--aieo-compl-ink);
    outline-offset: 2px;
}
/* The radio button is the chip itself, transparent over it. */
.aieo-compl .aieo-compl-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.aieo-compl-chips[aria-invalid="true"] .aieo-compl-chip:not(:hover) { box-shadow: inset 0 0 0 1px var(--wp--preset--color--danger, currentColor); }
.aieo-compl-select {
    width: min(100%, 260px);
    min-height: 44px;
    margin: 0;
    padding: 0 32px 0 10px;
    border: 1px solid var(--aieo-compl-line);
    border-radius: var(--wp--custom--rooster--shape--control, 4px);
    background-color: var(--wp--preset--color--bg, Canvas);
    color: var(--aieo-compl-ink);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.aieo-compl-select[aria-invalid="true"] { border-color: var(--wp--preset--color--danger, currentColor); }
/* Field text 16 px on phones: iOS zooms into a smaller one (FE-F4). */
@media (max-width: 782px) {
    .aieo-compl-select { font-size: 1rem; }
}
/* Under the theme's design authority the select is the theme's (FE-F1): its
   height, border, corners, colours, chevron, focus and phone size come from
   the theme's select recipe; the width and the layer stay ours. */
html[data-rooster-design="theme"] select.aieo-compl-select {
    min-height: revert-layer;
    padding: revert-layer;
    border: revert-layer;
    border-radius: revert-layer;
    background: revert-layer;
    box-shadow: revert-layer;
    color: revert-layer;
    font-size: revert-layer;
    font-weight: revert-layer;
    line-height: revert-layer;
    appearance: revert-layer;
}
html[data-rooster-design="theme"] select.aieo-compl-select[aria-invalid="true"] { border-color: var(--wp--preset--color--danger); }

/* The price: tabular, at the end; the theme prints the sale price before the
   old one, which goes under it, struck and muted. */
.aieo-compl-price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: end;
    white-space: nowrap;
}
.aieo-compl-price ins { text-decoration: none; }
.aieo-compl-price del {
    display: block;
    font-weight: 400;
    color: var(--aieo-compl-muted);
}
/* In the price's place the shop's words may carry a guest's sign-in link
   (catalogue mode): above the row's layer, as the name is. */
.aieo-compl-price a {
    position: relative;
    z-index: 1;
}

/* A product catalogue mode does not sell here: no tick; its photo is a link
   to the product whose layer covers the row. Among ticks it keeps the photo's
   column; a list of such rows alone (aieo-compl--ask) has no tick column. */
.aieo-compl:not(.aieo-compl--ask) .aieo-compl-item--ask > .aieo-compl-thumb { grid-column: 2; }
.aieo-compl--ask .aieo-compl-item { grid-template-columns: 64px minmax(0, 1fr) auto; }

/* The foot: the note, which is the live region, then the button. The note
   wraps beside the button rather than pushing it under itself, so a longer
   text after a tick moves nothing; where the two cannot share the line (a
   phone) the note keeps two lines of space (FB7). */
.aieo-compl-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--wp--preset--spacing--3, 0.75rem);
}
.aieo-compl .aieo-compl-note {
    flex: 1 1 14rem;
    margin: 0;
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--aieo-compl-muted);
}
.aieo-compl .aieo-compl-note--error { color: var(--wp--preset--color--danger, currentColor); }

/* The button: WooCommerce's classes, so the theme's button; the colours and
   corners are the appearance settings (the master Button Styles over the
   theme's button unless the shop chose a value), a step more specific than
   WooCommerce's `.woocommerce .button`. With nothing ticked it is an outline
   button: transparent, the text colour, the theme's outline line (an inset
   line, so both states are the same size). */
.aieo-compl .aieo-compl-add.button {
    flex: none;
    margin: 0;
    cursor: pointer;
    background: var(--aieo-compl-btn-bg, var(--wp--preset--color--contrast, CanvasText));
    color: var(--aieo-compl-btn-text, var(--wp--preset--color--bg, Canvas));
    border: var(--aieo-compl-btn-border-w, 0) solid var(--aieo-compl-btn-border, var(--wp--preset--color--fg, currentColor));
    border-radius: var(--aieo-compl-btn-border-r, 4px);
    font-variant-numeric: tabular-nums;
    transition: filter 0.2s ease;
}
.aieo-compl .aieo-compl-add.button[aria-disabled="true"] {
    background: transparent;
    color: var(--aieo-compl-ink);
    box-shadow: inset 0 0 0 1px var(--wp--custom--rooster--button--outline, currentColor);
    cursor: default;
}
/* Focused, the outline button keeps its line beside the theme's focus ring. */
.aieo-compl .aieo-compl-add.button[aria-disabled="true"]:focus-visible {
    box-shadow: inset 0 0 0 1px var(--wp--custom--rooster--button--outline, currentColor), var(--wp--custom--rooster--focus-ring, 0 0 0 2px currentColor);
}
.aieo-compl-add:not([aria-disabled="true"]):hover { filter: brightness(0.92); }
.aieo-compl-add[aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* Phones: the price under the name, the tick and the photo beside both. */
@media (max-width: 600px) {
    .aieo-compl .aieo-compl-item {
        grid-template-columns: 24px 56px minmax(0, 1fr);
        row-gap: var(--wp--preset--spacing--1, 0.25rem);
    }
    .aieo-compl .aieo-compl-item > .aieo-compl-check,
    .aieo-compl .aieo-compl-item > .aieo-compl-thumb { grid-row: span 2; }
    .aieo-compl-body { align-self: end; }
    .aieo-compl-price {
        grid-column: 3;
        align-self: start;
        display: flex;
        gap: 8px;
        align-items: baseline;
        text-align: start;
    }
    .aieo-compl .aieo-compl-note {
        min-height: 3em;
        min-height: 2lh;
    }
    .aieo-compl.aieo-compl--ask .aieo-compl-item { grid-template-columns: 56px minmax(0, 1fr); }
    .aieo-compl--ask .aieo-compl-price { grid-column: 2; }
}
@media (max-width: 380px) {
    .aieo-compl .aieo-compl-item { grid-template-columns: 24px 48px minmax(0, 1fr); }
    .aieo-compl.aieo-compl--ask .aieo-compl-item { grid-template-columns: 48px minmax(0, 1fr); }
}