/**
 * AIEO Complementary Products
 *
 * Picker block emitted on the single-product page right above (or
 * below) the Add-to-cart button: a list of products, each row a grid
 * (the tick and the photo centred on the row, the name with its
 * variation under it, the price and the product link at the end), then
 * a single CTA button.
 */
.aieo-compl {
    margin: 16px 0;
    padding: 14px 16px;
    border: var(--aieo-compl-border-w, 1px) solid var(--aieo-compl-border, #e2e2e2);
    border-radius: var(--aieo-compl-border-r, 8px);
    background: var(--aieo-compl-bg, #fafafa);
    --aieo-compl-fg: #222;
    --aieo-compl-muted: #6b7280;
    --aieo-compl-divider: #e9e9e9;
    --aieo-compl-picked: rgba(0, 0, 0, 0.035);
    /* The row's geometry, shared with the button so it starts where the photos do. */
    --aieo-compl-pad-x: 8px;
    --aieo-compl-check-w: 20px;
    --aieo-compl-col-gap: 14px;
}
.aieo-compl-title {
    margin: 0 0 6px;
    font-size: var(--aieo-compl-title-size, 15px);
    font-weight: 600;
    color: var(--aieo-compl-fg);
}
.aieo-compl-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A row: tick | photo | name and variation | price and link. */
.aieo-compl-item {
    margin: 0;
    padding: 12px var(--aieo-compl-pad-x);
    display: grid;
    grid-template-columns: auto 72px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--aieo-compl-col-gap);
    border-radius: var(--aieo-shape-control, 6px);
    transition: background 0.15s ease;
}
/* A straight divider between rows, inset like the rows (a shadow would follow
   their rounded corners). */
.aieo-compl-item { position: relative; }
.aieo-compl-item + .aieo-compl-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--aieo-compl-pad-x);
    right: var(--aieo-compl-pad-x);
    height: 1px;
    background: var(--aieo-compl-divider);
}
.aieo-compl-item:has(.aieo-compl-check:checked) { background: var(--aieo-compl-picked); }
.aieo-compl-check {
    width: var(--aieo-compl-check-w);
    height: var(--aieo-compl-check-w);
    margin: 0;
    cursor: pointer;
}
.aieo-compl-thumb {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--aieo-shape-media, 4px);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.aieo-compl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.aieo-compl-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* A variable product's row: the name level with the top of the photo, the
   variation's bottom with its bottom (the column takes the photo's height). */
.aieo-compl-item--variable .aieo-compl-body {
    align-self: stretch;
    justify-content: space-between;
    gap: 4px;
}
/* The photo and the name are labels: the theme's label margin (0.7em under
   each) made every row 11px taller and pushed the variation below the photo,
   and its display undid the name's two-line clamp. */
.aieo-compl .aieo-compl-item label.aieo-compl-thumb,
.aieo-compl .aieo-compl-item label.aieo-compl-name { margin: 0; }
.aieo-compl .aieo-compl-item label.aieo-compl-name { display: -webkit-box; }
/* Two lines of name (2 x 17.5px), the gap and the 32px variation fit the 72px photo. */
.aieo-compl-item--variable .aieo-compl-name { line-height: 1.25; }
.aieo-compl-name {
    font-size: var(--aieo-compl-text-size, 14px);
    line-height: 1.35;
    color: var(--aieo-compl-fg);
    cursor: pointer;
    /* Two lines at most; the product link has the rest. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.aieo-compl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
/* With a variation under the name, the price stays level with the name. */
.aieo-compl-item--variable .aieo-compl-side { align-self: start; }
.aieo-compl-price {
    font-size: var(--aieo-compl-text-size, 14px);
    font-weight: 600;
    color: var(--aieo-compl-fg);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.aieo-compl-price del { color: var(--aieo-compl-muted); font-weight: 400; margin-inline-end: 4px; }
.aieo-compl-price ins { text-decoration: none; }

/* The variation of a variable product, under its name. A fixed width: under
   the theme's base-select `auto` follows the chosen shade. */
.aieo-compl-variation {
    width: min(100%, 260px);
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}
/* Slim (the owner): 32px, the name and the variation fit the photo's height.
   Under the theme too: its field padding would make it 42px. */
.aieo-compl .aieo-compl-variation {
    height: 32px;
    min-height: 32px;
    padding-block: 0;
}
/* Under the theme the select keeps the theme's own field style. */
html:not([data-rooster-design="theme"]) .aieo-compl-variation {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
}
html:not([data-rooster-design="theme"]) .aieo-compl-variation:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.aieo-compl-variation--error {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.15);
}
.aieo-compl-novar {
    font-size: 12px;
    color: #9a3412;
}

/* The product link, under the price: outside the labels, so its click does
   not tick the row. External-link arrow, opens the product in a new tab. */
.aieo-compl-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-end: -6px;
    border-radius: var(--aieo-shape-control, 6px);
    color: var(--aieo-compl-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.aieo-compl-visit:hover {
    background: rgba(244, 103, 103, 0.1);
    color: #f46767;
}
.aieo-compl-visit:focus-visible {
    outline: 2px solid #f46767;
    outline-offset: 1px;
}
.aieo-compl-visit svg {
    display: block;
}

/* The colours and corners are the appearance settings (the theme's tokens
   unless the operator chose a value), a step more specific than WooCommerce's
   `.woocommerce .button`, whose classes the button carries. */
.aieo-compl .aieo-compl-add.button {
    margin-top: 14px;
    cursor: pointer;
    background: var(--aieo-compl-btn-bg, #222);
    color: var(--aieo-compl-btn-text, #fff);
    border: var(--aieo-compl-btn-border-w, 0) solid var(--aieo-compl-btn-border, #222);
    border-radius: var(--aieo-compl-btn-border-r, 4px);
    transition: filter 0.2s ease;
}
/* Its size: the full width outside the theme; under it the theme's button
   (padding, type) at Update cart's 200px at least, as the two sit one above
   the other. */
html:not([data-rooster-design="theme"]) .aieo-compl .aieo-compl-add.button {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--aieo-compl-text-size, 14px);
}
html[data-rooster-design="theme"] .aieo-compl .aieo-compl-add.button {
    width: auto;
    min-width: 200px;
    /* In line with the photos (the owner): the row's padding, the tick and the gap. */
    margin-inline-start: calc(var(--aieo-compl-pad-x) + var(--aieo-compl-check-w) + var(--aieo-compl-col-gap));
    padding: 10px 20px;
}
.aieo-compl-add:hover { filter: brightness(0.92); }
.aieo-compl-add[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
.aieo-compl-status {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #2e7d32;
    min-height: 18px;
}
.aieo-compl-status.error {
    color: #c62828;
}

@media (max-width: 600px) {
    .aieo-compl { padding: 10px 12px; }
    .aieo-compl { --aieo-compl-pad-x: 4px; --aieo-compl-col-gap: 10px; }
    .aieo-compl-item { grid-template-columns: auto 64px minmax(0, 1fr) auto; padding-block: 10px; }
    .aieo-compl-thumb { width: 64px; height: 64px; }
    .aieo-compl-name { font-size: 13px; }
    .aieo-compl-price { font-size: 13px; }
    .aieo-compl-variation { width: 100%; }
}

/* Under the theme's design authority (contract C2@2) the text, the dividers
   and the picked rows follow the palette, which swaps in dark mode; the box,
   its border and corners, and the button come from the variables printed
   with this sheet: the theme's tokens unless the operator chose a value. */
html[data-rooster-design="theme"] .aieo-compl {
    --aieo-compl-fg: var(--wp--preset--color--fg);
    --aieo-compl-muted: var(--wp--preset--color--muted, color-mix(in srgb, var(--wp--preset--color--fg) 60%, transparent));
    --aieo-compl-divider: var(--wp--preset--color--border);
    --aieo-compl-picked: color-mix(in srgb, var(--wp--preset--color--fg) 6%, transparent);
}
html[data-rooster-design="theme"] .aieo-compl-thumb { background: #fff; }
html[data-rooster-design="theme"] .aieo-compl-visit:hover {
    background: color-mix(in srgb, var(--wp--preset--color--fg) 8%, transparent);
    color: var(--wp--preset--color--fg);
}
html[data-rooster-design="theme"] .aieo-compl-visit:focus-visible { outline-color: var(--wp--preset--color--fg); }
html[data-rooster-design="theme"] .aieo-compl-novar { color: var(--wp--preset--color--warning, #9a3412); }
html[data-rooster-design="theme"] .aieo-compl-status { color: var(--wp--preset--color--success, #2e7d32); }
html[data-rooster-design="theme"] .aieo-compl-status.error { color: var(--wp--preset--color--error, #c62828); }

/* Under the theme's design authority this select is the theme's (UI review, 28 Oct 2026): its height, text
 * size (16 px on phones), border, corners, colours, chevron and focus come from the theme's select recipe;
 * only the layout above stays ours. */
html[data-rooster-design="theme"] select.aieo-compl-variation {
    min-height: revert-layer;
    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;
}