/**
 * Amazon Creators Product Embed - frontend card styles
 *
 * Layout responds to the width of the card itself, not the viewport, so the same
 * markup works in a full-width content column, a narrow sidebar, and a 2-3 column
 * grid. Reflow is done with intrinsic flex wrapping (works everywhere); container
 * queries only refine sizes once the card is roomy.
 */

.ace-products-grid {
    --ace-surface: #ffffff;
    --ace-surface-hover: #fbfbfc;
    --ace-tile: #f4f5f7;
    --ace-border: #e3e5e8;
    --ace-border-strong: #cfd3d9;
    --ace-content: #14161a;
    --ace-content-2: #4b5462; /* 7.65:1 on white - secondary text is small */
    --ace-save: #10683a;
    --ace-accent: #ff9900;
    --ace-accent-hover: #f08c00;
    --ace-accent-content: #111111;
    --ace-focus: #0b6bcb;
    --ace-radius: 14px;
    --ace-tile-size: 88px;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

/* ---------------------------------------------------------------- card shell */

.ace-card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    background: var(--ace-surface);
    border: 1px solid var(--ace-border);
    border-radius: var(--ace-radius);
    color: var(--ace-content);
    line-height: 1.45;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ace-card--linked:hover {
    background: var(--ace-surface-hover);
    border-color: var(--ace-border-strong);
    box-shadow: 0 6px 20px -8px rgba(20, 22, 26, 0.22);
    transform: translateY(-1px);
}

/* The whole card is one link: the anchor stretches over it, so there is exactly
   one focusable target and one screen-reader announcement per product. */
/* Theme override guard.
   This card is dropped into arbitrary themes, and rules like
   `.entry-content a { color: … }` (0,2,1) outrank a single-class selector
   (0,1,0). These declarations are forced so the card's measured contrast
   ratios hold no matter what the host theme does to links. */
.ace-products-grid .ace-card .ace-card__title,
.ace-products-grid .ace-card .ace-card__title a.ace-card__link,
.ace-products-grid .ace-card .ace-card__title a.ace-card__link:link,
.ace-products-grid .ace-card .ace-card__title a.ace-card__link:visited,
.ace-products-grid .ace-card a.ace-card__link,
.ace-products-grid .ace-card a.ace-card__link:link,
.ace-products-grid .ace-card a.ace-card__link:visited {
    color: var(--ace-content) !important;
    /* Themes fade link text by several routes; a color rule alone can't
       override any of these three. */
    -webkit-text-fill-color: var(--ace-content) !important;
    opacity: 1 !important;
    filter: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

.ace-products-grid .ace-card .ace-card__title a.ace-card__link:hover,
.ace-products-grid .ace-card .ace-card__title a.ace-card__link:focus,
.ace-products-grid .ace-card a.ace-card__link:hover,
.ace-products-grid .ace-card a.ace-card__link:focus {
    color: var(--ace-content) !important;
    -webkit-text-fill-color: var(--ace-content) !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* When the call to action carries the link, it keeps the on-accent color -
   forcing --ace-content here would put near-white text on orange in dark mode. */
.ace-products-grid .ace-card a.ace-button,
.ace-products-grid .ace-card a.ace-button:link,
.ace-products-grid .ace-card a.ace-button:visited,
.ace-products-grid .ace-card a.ace-button:hover,
.ace-products-grid .ace-card a.ace-button:focus {
    color: var(--ace-accent-content) !important;
    -webkit-text-fill-color: var(--ace-accent-content) !important;
    text-decoration: none !important;
}

.ace-card--linked .ace-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ace-card__link:focus-visible {
    outline: none;
}

.ace-card:has(.ace-card__link:focus-visible) {
    outline: 3px solid var(--ace-focus);
    outline-offset: 2px;
}

/* Fallback for browsers without :has() - focus ring on the link itself. */
@supports not selector(:has(*)) {
    .ace-card__link:focus-visible {
        outline: 3px solid var(--ace-focus);
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* ---------------------------------------------------------------- image tile */

/* Amazon product photos are white-background JPEGs. The tile gives them an edge
   in light mode and, because it stays light in dark mode, stops them glowing
   against a dark card. `multiply` dissolves the white background into the tile. */
.ace-card__media {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--ace-tile-size);
    height: var(--ace-tile-size);
    padding: 8px;
    background: var(--ace-tile);
    border-radius: 10px;
    overflow: hidden;
}

.ace-card__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

/* `multiply` only works while the tile underneath is genuinely light. Chrome's
   Auto Dark Mode darkens the tile along with the rest of the page and reports
   prefers-color-scheme: dark, and multiplying a product photo into a dark tile
   turns it muddy. Let the photo render its own pixels instead.
   This query intentionally does not touch any color token - the card's light
   appearance stays the default, see the dark opt-in near the end of this file. */
@media (prefers-color-scheme: dark) {
    .ace-card__img {
        mix-blend-mode: normal;
    }
}

.ace-badge {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;
    background: #232f3e;
    color: #ffffff;
}

/* ---------------------------------------------------------------- card body  */

.ace-card__body {
    flex: 1 1 13rem;
    min-width: 0;
}

.ace-card__body > * {
    margin: 0 0 0.25rem;
}

.ace-card__body > *:last-child {
    margin-bottom: 0;
}

.ace-card__brand {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ace-content-2);
}

.ace-card__title {
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ace-content);
    overflow-wrap: anywhere;
    /* No overflow clipping here on purpose: this element wraps the stretched
       link, and `overflow: hidden` would risk clipping its click target. Long
       Amazon titles are shortened in PHP instead (ace_product_title_words). */
}

.ace-card__desc,
.ace-card__features,
.ace-card__meta,
.ace-card__rating {
    font-size: 0.8125rem;
    color: var(--ace-content-2);
}

.ace-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ace-card__features {
    padding-left: 1.1em;
    list-style: disc;
}

.ace-card__features li {
    margin: 0 0 0.15rem;
}

.ace-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.ace-card__availability {
    font-weight: 600;
}

/* ---------------------------------------------------------------- rating     */

.ace-card__rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ace-stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.08em;
}

.ace-stars__track {
    color: var(--ace-border-strong);
}

.ace-stars__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--ace-accent);
}

/* ---------------------------------------------------------------- buy column */

.ace-card__buy {
    /* Grows to fill its own line when it wraps below the body on a narrow card;
       becomes a fixed trailing column once the card is wide (see @container). */
    flex: 1 1 10.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.ace-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.45rem;
    margin: 0;
}

.ace-price__now {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ace-content);
}

/* The was-price is marked up with <s> and carries a visually hidden "List price:"
   label, so the comparison never depends on styling alone. */
.ace-price__was {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--ace-content-2);
}

.ace-price__save {
    flex-basis: 100%;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ace-save);
}

.ace-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum touch target. */
    min-height: 44px;
    padding: 0.55rem 1.15rem;
    background: var(--ace-accent);
    color: var(--ace-accent-content);
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.ace-card--linked:hover .ace-button {
    background: var(--ace-accent-hover);
}

.ace-card--linked:active {
    transform: translateY(0);
}

a.ace-button:hover {
    color: var(--ace-accent-content);
    text-decoration: none;
}

/* ---------------------------------------------------------------- disclosure */

.ace-card__disclosure {
    flex: 1 1 100%;
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ace-border);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ace-content-2);
}

/* Same guard for body text: themes commonly set `.entry-content p` colors,
   which would otherwise beat the card's own single-class rules. */
.ace-products-grid .ace-card .ace-card__title {
    color: var(--ace-content);
}

.ace-products-grid .ace-card .ace-card__brand,
.ace-products-grid .ace-card .ace-card__rating,
.ace-products-grid .ace-card .ace-card__desc,
.ace-products-grid .ace-card .ace-card__features,
.ace-products-grid .ace-card .ace-card__features li,
.ace-products-grid .ace-card .ace-card__meta,
.ace-products-grid .ace-card .ace-card__disclosure,
.ace-products-grid .ace-card .ace-price__was {
    color: var(--ace-content-2);
}

.ace-products-grid .ace-card .ace-price__now {
    color: var(--ace-content);
}

.ace-products-grid .ace-card .ace-price__save {
    color: var(--ace-save);
}

.ace-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- roomy card */

/* Once the card itself has room, the image grows and the buy column locks to a
   fixed trailing width so price and action read as one shelf tag. */
@container (min-width: 32rem) {
    .ace-card__media {
        --ace-tile-size: 128px;
    }

    .ace-card__body {
        flex: 1 1 14rem;
        align-self: center;
    }

    .ace-card__buy {
        flex: 0 0 11rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: center;
        justify-content: center;
        text-align: right;
        gap: 0.6rem;
    }

    .ace-price {
        justify-content: flex-end;
    }

    .ace-price__save {
        text-align: right;
    }

    .ace-button {
        width: 100%;
    }
}

@container (min-width: 44rem) {
    .ace-card {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .ace-card__media {
        --ace-tile-size: 152px;
    }

    .ace-card__title {
        font-size: 1.1875rem;
    }

    .ace-price__now {
        font-size: 1.625rem;
    }
}

/* Browsers without container queries: fall back to viewport width so wide
   screens still get the trailing buy column. */
@supports not (container-type: inline-size) {
    @media (min-width: 46.25em) {
        .ace-products-grid--single .ace-card__media {
            --ace-tile-size: 128px;
        }

        .ace-products-grid--single .ace-card__buy {
            flex: 0 0 11rem;
            flex-direction: column;
            align-items: flex-end;
            align-self: center;
            text-align: right;
        }

        .ace-products-grid--single .ace-button {
            width: 100%;
        }
    }
}

/* ---------------------------------------------------------------- dark mode  */

/* The card is embedded IN an article, so it follows the article's appearance,
   not the operating system's. Switching on `prefers-color-scheme` was wrong:
   on a light-only theme, a visitor whose OS is in dark mode got dark-mode text
   tokens on a white card and every label washed out.
   Dark styling is therefore opt-in. A dark theme enables it by adding the class
   `ace-theme-dark` to any ancestor (body works), or by setting
   `data-theme="dark"`, which many dark themes already do. */
[data-theme="dark"] .ace-products-grid,
.ace-theme-dark .ace-products-grid,
.ace-products-grid.ace-theme-dark {
    --ace-surface: #16181d;
    --ace-surface-hover: #1c1f26;
    --ace-tile: #ecedef; /* stays light on purpose - see .ace-card__media */
    --ace-border: #2c3038;
    --ace-border-strong: #3d434e;
    --ace-content: #f2f3f5;
    --ace-content-2: #a8aebb;
    --ace-save: #57c98a;
    --ace-focus: #6aa9f0;
}

[data-theme="dark"] .ace-card--linked:hover,
.ace-theme-dark .ace-card--linked:hover {
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------- a11y prefs */

@media (prefers-reduced-motion: reduce) {
    .ace-card,
    .ace-button {
        transition: none;
    }

    .ace-card--linked:hover {
        transform: none;
    }
}

@media (prefers-contrast: more) {
    .ace-products-grid {
        --ace-border: #8a9099;
        --ace-content-2: #3c424d;
    }

    .ace-card {
        border-width: 2px;
    }
}

@media print {
    .ace-card {
        break-inside: avoid;
        box-shadow: none;
    }
}