/* B2B card variants extracted from PetEvia 3.7.0. Shared card foundations remain in Etheme. */


/* ---------------------------------------------------------------------------
   2. Product 1 — minimal directory
   --------------------------------------------------------------------------- */
.eth-loop-card--product-1 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-1 .eth-loop-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-medium);
    line-height: 1.4;
    text-align: center;
    transition: color 180ms ease;
}

.eth-loop-card--product-1:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-1:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   3. Product 2 — light information card
   --------------------------------------------------------------------------- */
.eth-loop-card--product-2 {
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-loop-card--product-2 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
}

.eth-loop-card--product-2 .eth-loop-card__body {
    padding: clamp(0.9rem, 1.5vw, 1.2rem);
}

.eth-loop-card--product-2 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
    transition: color 180ms ease;
}

.eth-loop-card--product-2 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eth-loop-card--product-2:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-loop-card--product-2:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-2:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   4. Product 3 — soft image overlay
   --------------------------------------------------------------------------- */
.eth-loop-card--product-3 {
    overflow: hidden;
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-muted);
}

.eth-loop-card--product-3 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
}

.eth-loop-card--product-3 .eth-loop-card__overlay {
    position: absolute;
    inset: 40% 0 0;
    display: flex;
    align-items: flex-end;
    padding: clamp(0.85rem, 1.8vw, 1.25rem);
    background: linear-gradient(to top, var(--eth-loop-overlay) 0%, var(--eth-loop-overlay-fade) 66%, transparent 100%);
}

.eth-loop-card--product-3 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-light);
    font-size: clamp(1rem, 1.1vw, 1.16rem);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
}

.eth-loop-card--product-3:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

/* ---------------------------------------------------------------------------
   6. Product 5 — alternate gallery image
   --------------------------------------------------------------------------- */
.eth-loop-card--product-5 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-5 .eth-loop-card__image {
    position: absolute;
    inset: 0;
    transition: opacity 240ms ease;
}

.eth-loop-card--product-5 .eth-loop-card__image--main {
    opacity: 1;
}

.eth-loop-card--product-5 .eth-loop-card__image--hover {
    opacity: 0;
}

.eth-loop-card--product-5 .eth-loop-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-medium);
    line-height: 1.4;
    text-align: center;
    transition: color 180ms ease;
}

.eth-loop-card--product-5.has-hover-image:focus-within .eth-loop-card__image--main {
    opacity: 0;
}

.eth-loop-card--product-5.has-hover-image:focus-within .eth-loop-card__image--hover {
    opacity: 1;
}

.eth-loop-card--product-5:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   7. Product 6 — relaxed editorial image and copy
   --------------------------------------------------------------------------- */
.eth-loop-card--product-6 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-6 .eth-loop-card__caption {
    padding: clamp(0.75rem, 1.25vw, 1rem) 0.1rem 0;
}

.eth-loop-card--product-6 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-text-title);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 650;
    line-height: 1.35;
    transition: color 180ms ease;
}

.eth-loop-card--product-6 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eth-loop-card--product-6:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-6:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   8. Product 7 — hover info slides up
   Default: image with the title overlaid on the bottom over a full-image
   tint. On hover/focus the tint deepens, the title moves up and the excerpt
   slides in below it. Touch devices always show the excerpt.
   --------------------------------------------------------------------------- */
.eth-loop-card--product-7 {
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
}

/* Full-image tint: subtle by default, deepens on hover for legibility. */
.eth-loop-card--product-7 .eth-loop-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.22) 55%, rgba(15, 23, 42, 0.08));
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 600ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* 确保在 image-wrap::after 渐变遮罩之上 */
    padding: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--eth-text-invert);
}

.eth-loop-card--product-7 .eth-loop-card__title {
    margin: 0;
    color: #fff; /* 标题保持纯白 */
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
    transition: transform 800ms var(--eth-loop-ease);
}

/* Reveal panel: hidden below the title; on hover/focus the title drifts up
   and the excerpt slides in beneath it. */
.eth-loop-card--product-7 .eth-loop-card__reveal {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: max-height 800ms var(--eth-loop-ease), opacity 600ms ease, transform 800ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--eth-text-invert);
    opacity: 0.92;
}

.eth-loop-card--product-7:hover .eth-loop-card__title,
.eth-loop-card--product-7:focus-within .eth-loop-card__title {
    transform: translateY(-8px);
}

.eth-loop-card--product-7:hover .eth-loop-card__reveal,
.eth-loop-card--product-7:focus-within .eth-loop-card__reveal {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
}

.eth-loop-card--product-7:hover .eth-loop-card__image-wrap::after,
.eth-loop-card--product-7:focus-within .eth-loop-card__image-wrap::after {
    opacity: 1;
    transition: opacity 800ms var(--eth-loop-ease);
}

.eth-loop-card--product-7:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-loop-card--product-7:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

/* Touch devices (no hover): always show the reveal panel. */
@media (hover: none) {
    .eth-loop-card--product-7 .eth-loop-card__reveal {
        max-height: 12rem;
        opacity: 1;
        transform: none;
    }
    .eth-loop-card--product-7 .eth-loop-card__title {
        transform: translateY(-4px);
    }}

/* ---------------------------------------------------------------------------
   14. Pointer hover: restrained and never required for comprehension
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--main {
        opacity: 0;
    }

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--hover {
        opacity: 1;
    }

    .eth-loop-card--product-5:hover .eth-loop-card__title {
        color: var(--eth-primary);
    }}

@media (hover: none) {
    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--main {
        opacity: 1;
    }

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--hover {
        opacity: 0;
    }}

/* ---------------------------------------------------------------------------
   14. Pointer hover: restrained and never required for comprehension
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {.eth-loop-card--product-1:hover .eth-loop-card__image,
    .eth-loop-card--product-2:hover .eth-loop-card__image,
    .eth-loop-card--product-3:hover .eth-loop-card__image,
    .eth-loop-card--product-6:hover .eth-loop-card__image,
    .eth-loop-card--product-7:hover .eth-loop-card__image{
        transform: scale(var(--eth-loop-image-scale));
    }.eth-loop-card--product-1:hover .eth-loop-card__title,
    .eth-loop-card--product-2:hover .eth-loop-card__title,
    .eth-loop-card--product-6:hover .eth-loop-card__title,
    .eth-loop-card--product-7:hover .eth-loop-card__title{
        color: var(--eth-primary);
    }.eth-loop-card--product-2:hover,
    .eth-loop-card--product-7:hover{
        border-color: var(--eth-loop-border-active);
        box-shadow: var(--eth-loop-shadow-hover);
    }}