@layer marielco-product-card {
    .marielco-product-card { min-inline-size: 0; padding-block-end: var(--marielco-card-info-bottom, 0px); text-align: var(--marielco-card-info-align, inherit); list-style: none; }
    .marielco-product-card__link { display: block; text-decoration: none; }
    /* One reserved viewport clips the image layer during scrolling and gallery motion. */
    .marielco-product-card__media { position: relative; aspect-ratio: 4 / 5; --marielco-card-media-surface: #f2f2f2; background: var(--marielco-card-media-surface); overflow: hidden; contain: layout paint; }
    .marielco-product-card__image-link { position: absolute; inset: 0; }
    .marielco-product-card__image-link:focus-visible { outline-offset: -3px; }
    .marielco-product-card__track { display: flex; inline-size: 100%; block-size: 100%; }
    .marielco-product-card__track > :is(img, picture) { flex: 0 0 100%; min-inline-size: 0; block-size: 100%; }
    .marielco-product-card__track > picture { display: block; }
    .marielco-product-card__actions { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; display: grid; justify-items: center; gap: 6px; }
    .marielco-product-card__bag { display: grid; place-items: center; inline-size: 28px; block-size: 28px; padding: 0; border: 0; color: #555; background: none; text-decoration: none; cursor: pointer; transition: color .18s ease; }
    .marielco-product-card__wishlist { display: grid; place-items: center; inline-size: 44px; block-size: 44px; min-block-size: 0; padding: 0; border: 0; color: #555; background: transparent; }
    .marielco-product-card__wishlist svg { fill: none; stroke: currentColor; stroke-width: 1.25; }
    .marielco-product-card__wishlist[aria-pressed="true"] svg { fill: currentColor; }
    .marielco-product-card__wishlist:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
    .marielco-product-card__actions svg { inline-size: 18px; block-size: 18px; transition: transform .18s ease; }
    .marielco-product-card__actions :where(a,button):where(:hover,:focus-visible) { color: #111; }
    .marielco-product-card__bag:hover svg { transform: scale(1.08); }
    .marielco-product-card__bag:active svg { transform: scale(.94); }
    .marielco-product-card__bag:active svg path:first-child { fill: currentColor; }
    .marielco-product-card__image { inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center; background: var(--marielco-card-media-surface); transition: opacity .18s ease; }
    .marielco-product-card__image[data-card-image-pending] { opacity: 0; }
    .marielco-product-card__media[data-card-image-slow] { animation: marielco-card-loading 2s ease-in-out infinite; }
    .marielco-product-card__image-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--marielco-text-muted); font-size: 12px; pointer-events: none; }
    @keyframes marielco-card-loading { 50% { background-color: #e8e8e8; } }
    .marielco-product-card__name {
        margin-block-start: var(--marielco-card-info-top, 0.875rem);
        padding-inline: var(--marielco-card-info-inline, 0px);
        font-size: var(--marielco-card-title-size, var(--marielco-text-small));
        text-transform: var(--marielco-card-title-case, none);
        font-weight: var(--marielco-weight-body);
        line-height: var(--marielco-card-title-line, var(--marielco-line-body));
        overflow-wrap: anywhere;
    }
    /* Native per-line underlines keep one thickness without painting through glyphs. */
    .marielco-product-card__title-label {
        display: inline;
        font: inherit;
        color: inherit;
        text-decoration-line: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 1px;
        text-underline-offset: .25em;
        text-decoration-skip-ink: auto;
        transition: text-decoration-color .24s ease;
    }
    .marielco-product-card__link:where(:hover, :focus-visible) .marielco-product-card__title-label,
    .marielco-product-card__media:where(:hover, :focus-within) ~ .marielco-product-card__link .marielco-product-card__title-label { text-decoration-color: currentColor; }
    .marielco-product-card__price { margin-block-start: var(--marielco-card-price-gap, 0.375rem); padding-inline: var(--marielco-card-info-inline, 0px); font-size: var(--marielco-card-price-size, var(--marielco-text-small)); line-height: var(--marielco-card-price-line, inherit); }
    .marielco-product-card__price ins { text-decoration: none; }
    .marielco-product-card__price del { color: var(--marielco-text-muted); margin-inline-end: 0.375rem; }
    .marielco-product-card__state { margin-block-start: 0.5rem; color: var(--marielco-text-muted); font-size: var(--marielco-text-small); }
    .marielco-product-card [hidden] { display: none; }
    .marielco-product-card__gallery { position: absolute; inset: 0; pointer-events: none; }
    .marielco-product-card__gallery button { pointer-events: auto; color: #111; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
    .marielco-product-card__gallery :where(button):focus-visible { outline: 2px solid #111; outline-offset: -3px; }
    .marielco-product-card__previous, .marielco-product-card__next { position: absolute; inset-block-start: calc(50% - 32px); display: grid; place-items: center; inline-size: 42px; block-size: 64px; padding: 0; opacity: 0; }
    .marielco-product-card__previous { inset-inline-start: 5px; }
    .marielco-product-card__next { inset-inline-end: 5px; }
    .marielco-product-card__gallery button svg { inline-size: 21px; block-size: 21px; }
    .marielco-product-card__image-count { position: absolute; inset-block-end: 10px; inset-inline-start: 11px; font-size: 8px; line-height: 1.5; opacity: 0; }
    .marielco-product-card__media:where(:hover, :focus-within) :where(.marielco-product-card__previous, .marielco-product-card__next, .marielco-product-card__image-count) { opacity: 1; }
    .marielco-product-card__progress { position: absolute; inset-inline: 8px; inset-block-end: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 5px; block-size: 4px; pointer-events: none; }
    .marielco-product-card__progress span { flex: 0 0 auto; inline-size: 4px; block-size: 4px; border-radius: 2px; background: #999; transition: inline-size .38s cubic-bezier(.22,.61,.36,1), background-color .38s ease; }
    .marielco-product-card__progress span.is-current { inline-size: 18px; background: #111; }
    @media (max-width: 768px) { .marielco-product-card__actions { inset-block-start: 7px; inset-inline-end: 6px; gap: 4px; } }
    @media (prefers-reduced-motion: reduce) { .marielco-product-card__title-label, .marielco-product-card__progress span, .marielco-product-card__image, .marielco-product-card__actions :where(a,button,svg) { transition: none; } .marielco-product-card__media[data-card-image-slow] { animation: none; } }
    @media (forced-colors: active) { .marielco-product-card__link:where(:hover, :focus-visible) .marielco-product-card__title-label { text-decoration: underline; text-underline-offset: 2px; } }
    .marielco-product-card__media[data-gallery-ready] { touch-action: pan-y pinch-zoom; }
    @media (max-width: 834px), (hover: none) { .marielco-product-card__previous, .marielco-product-card__next, .marielco-product-card__image-count { display: none; } }
}