/* Eudora product cards: whole-card link, hover lift and image swap, review stars, "view all" buttons. */

/* ---------- Whole card is the link (stretched name link) ---------- */
.ec-card { position: relative; border-radius: 8px; }
.ec-card__link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; }
.ec-card__link:focus { outline: none; }
.ec-card__link:focus-visible::after { outline: 3px solid var(--el-ink, #1d1d1f); outline-offset: 3px; }
.ec-card__media { -webkit-user-drag: none; user-select: none; }
.ec-card__media img { -webkit-user-drag: none; }
/* Anything else interactive in a card stays clickable above the stretched link. */
.ec-card a:not(.ec-card__link):not(.ec-card__media),
.ec-card button { position: relative; z-index: 2; }

/* Second image sits on top of the first, hidden until hover. */
.ec-card__media { position: relative; }
.ec-card__alt {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none;
    object-fit: cover; transition: opacity .2s ease;
}
body .main-container .ec-listing ul.ec-grid .ec-card__alt { object-fit: contain; border-radius: 8px; background: #fff; }

/* ---------- Hover (devices with a real pointer only) ---------- */
@media (hover: hover) and (pointer: fine) {
    .ec-card { transition: transform .2s ease, box-shadow .2s ease; }
    .ec-card:hover, .ec-card:focus-within { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .10); }
    .ec-card:hover .ec-card__alt { opacity: 1; }
    /* The old image zoom would fight the image swap. */
    .cms-index-index :is(#tabs-2, #tabs-3).products-slider .product-item.ec-card > a.ec-card__media:hover img { transform: none; }
}
/* Room above and below the slider so the lift and shadow are not clipped. */
.cms-index-index :is(#tabs-2, #tabs-3).products-slider .slick-list.draggable { margin-top: -8px; margin-bottom: -18px; padding: 8px 0 18px; }
.cms-index-index :is(#tabs-2, #tabs-3).products-slider .ec-card__media { position: relative; }
.cms-index-index :is(#tabs-2, #tabs-3).products-slider .product-item img.ec-card__alt {
    position: absolute; top: 0; left: 0; height: 100%;
    transition: opacity .2s ease; /* the carousel's image rule (eudora-look-home) only animates transform */
}

@media (prefers-reduced-motion: reduce) {
    .ec-card, .ec-card__alt { transition: none; }
    .cms-index-index :is(#tabs-2, #tabs-3).products-slider .product-item img.ec-card__alt { transition: none; }
    .ec-card:hover, .ec-card:focus-within { transform: none; }
}

/* ---------- Review stars (only rendered when a product has approved reviews) ---------- */
.ec-card__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 4px 0 0; }
.ec-stars {
    position: relative; display: inline-block; width: 90px; height: 18px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9d9dd' d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01Z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}
.ec-stars__fill {
    position: absolute; top: 0; left: 0; display: block; height: 18px; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5b900' d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01Z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}
.ec-card .ec-card__reviews {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--el-text, #555);
    font-size: 16px; line-height: 1.2; text-decoration: underline;
}
.ec-card .ec-card__reviews:hover { color: var(--el-brand, #d1045f); }
.ec-card .ec-card__reviews:focus-visible { outline: 3px solid var(--el-ink, #1d1d1f); outline-offset: 1px; }
/* Pull the 44px target up so cards with reviews are not much taller. */
.ec-card .ec-card__rating { margin-bottom: -8px; }

/* ---------- "View all" outlined button under homepage rows ---------- */
.cms-index-index .ec-viewall { margin: 8px 0 0; text-align: center; }
.cms-index-index a.ec-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px;
    border: 1px solid var(--el-ink, #1d1d1f); border-radius: 4px; background: #fff; color: var(--el-ink, #1d1d1f);
    font-size: 16px; font-weight: 500; letter-spacing: .02em; line-height: 1.2; text-decoration: none; text-transform: none;
    transition: background-color .15s ease, color .15s ease;
}
.cms-index-index a.ec-btn-outline:hover { background: var(--el-ink, #1d1d1f); color: #fff; }
.cms-index-index a.ec-btn-outline:focus-visible { outline: 3px solid var(--el-brand, #d1045f); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cms-index-index a.ec-btn-outline { transition: none; } }