/**
 * Product experience — Related modules (Themesflat section-show-inner + demo-card carousel).
 */

/* ---- Section shell (tf-spacing-17 from reference: ~100px desktop / 80px tablet) ---- */
:is(#related, #screenshots).rioiz-pe-related--show-inner.tf-spacing-17 {
    padding-top: 100px;
    padding-bottom: 93px;
}
@media (max-width: 991px) {
    :is(#related, #screenshots).rioiz-pe-related--show-inner.tf-spacing-17 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.section-show-inner {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ---- demo-card + hover-image-2 (ported minimal set from Themesflat styles.css, scoped) ---- */
:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card {
    padding: 26px 24px 26px;
    border-radius: 12px;
    box-shadow: 0 5px 5px 0 color-mix(in srgb, var(--site-heading-color) 10%, transparent);
    background-color: color-mix(in srgb, var(--site-surface-color) 92%, var(--white-color) 8%);
    position: relative;
    border: 1px solid color-mix(in srgb, var(--site-heading-color) 6%, transparent);
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card .img-style {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative !important;
    aspect-ratio: 402 / 496;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card .img-style::before {
    content: "";
    height: 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--site-heading-color) 85%, var(--site-primary-color) 15%) 0.38%,
        color-mix(in srgb, var(--site-heading-color) 35%, transparent) 74.4%
    );
    transition: all 0.3s ease;
    pointer-events: none;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card .content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card .wrap-button {
    position: absolute !important;
    bottom: 20px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 0.3s ease;
    transition-delay: 0.15s;
    z-index: 3;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card:hover .wrap-button {
    opacity: 1;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .demo-card:hover .img-style::before {
    height: 200px;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .overlay-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .hover-image-2 .img-style {
    position: relative;
    overflow: hidden;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .hover-image-2 .img-style::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
    pointer-events: none;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .hover-image-2 .img-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .hover-image-2:hover .img-style::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .hover-image-2:hover .img-style img {
    transform: scale(1.1);
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .rioiz-pe-related__section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner .sw-dots .swiper-pagination-bullet {
    height: 20px;
    width: 20px;
}

@media (min-width: 992px) {
    :is(#related, #screenshots).rioiz-pe-related--show-inner .sw-dots.style-2 {
        margin-top: 46px;
    }
}

/* ---- Light band ---- */
:is(#related, #screenshots).rioiz-pe-related--show-inner:not(.rioiz-pe-page-band--dark) {
    background-color: var(--Bg-light, var(--site-light-bg-color));
    border-top: 1px solid color-mix(in srgb, var(--site-heading-color) 6%, transparent);
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--light {
    background:
        radial-gradient(ellipse 80% 50% at 50% -12%, color-mix(in srgb, var(--site-primary-color) 7%, transparent), transparent 50%),
        linear-gradient(180deg, var(--site-surface-color) 0%, color-mix(in srgb, var(--site-light-bg-color) 38%, var(--site-surface-color)) 100%);
}

/* ---- Dark band ---- */
:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark {
    background:
        radial-gradient(ellipse 70% 38% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 10%, transparent), transparent 52%),
        linear-gradient(180deg, var(--site-dark-bg-color) 0%, color-mix(in srgb, var(--site-dark-bg-color) 88%, var(--site-tertiary-color) 12%) 100%);
    border-top-color: var(--rioiz-hairline-inverse);
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .rioiz-pe-related__section-title,
:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .text_primary.title {
    color: var(--site-ink-light) !important;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .text_secondary {
    color: color-mix(in srgb, var(--site-ink-light) 70%, var(--site-muted-color) 30%) !important;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .demo-card {
    background: color-mix(in srgb, var(--site-dark-bg-color) 82%, var(--site-tertiary-color) 18%) !important;
    border-color: var(--rioiz-hairline-inverse) !important;
    box-shadow: 0 12px 36px color-mix(in srgb, var(--site-heading-color) 18%, transparent);
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .demo-card .title.text_primary {
    color: var(--site-ink-light) !important;
}

:is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-page-band--dark .rioiz-pe-ec-title-area .sec-title.style3 {
    color: var(--site-ink-light);
}

/* Ecommerce + bands */
.rioiz-pe-next--ecommerce :is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-ec-band--related.rioiz-pe-page-band--dark {
    background:
        radial-gradient(ellipse 70% 38% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 10%, transparent), transparent 52%),
        linear-gradient(180deg, var(--site-dark-bg-color) 0%, color-mix(in srgb, var(--site-dark-bg-color) 88%, var(--site-tertiary-color) 12%) 100%) !important;
    border-top-color: var(--rioiz-hairline-inverse);
}

.rioiz-pe-next--ecommerce :is(#related, #screenshots).rioiz-pe-related--show-inner.rioiz-pe-ec-band--related.rioiz-pe-page-band--light {
    background:
        radial-gradient(ellipse 80% 50% at 50% -12%, color-mix(in srgb, var(--site-primary-color) 7%, transparent), transparent 50%),
        linear-gradient(180deg, var(--site-surface-color) 0%, color-mix(in srgb, var(--site-light-bg-color) 38%, var(--site-surface-color)) 100%) !important;
    border-top: 1px solid color-mix(in srgb, var(--site-heading-color) 6%, transparent);
}

/* Category gallery band (rioiz-pe-ec-band--shots) — same surface treatment as related */
.rioiz-pe-next--ecommerce :is(#screenshots).rioiz-pe-related--show-inner.rioiz-pe-ec-band--shots.rioiz-pe-page-band--dark {
    background:
        radial-gradient(ellipse 70% 38% at 50% 0%, color-mix(in srgb, var(--site-primary-color) 10%, transparent), transparent 52%),
        linear-gradient(180deg, var(--site-dark-bg-color) 0%, color-mix(in srgb, var(--site-dark-bg-color) 88%, var(--site-tertiary-color) 12%) 100%) !important;
    border-top-color: var(--rioiz-hairline-inverse);
}

.rioiz-pe-next--ecommerce :is(#screenshots).rioiz-pe-related--show-inner.rioiz-pe-ec-band--shots.rioiz-pe-page-band--light {
    background:
        radial-gradient(ellipse 80% 50% at 50% -12%, color-mix(in srgb, var(--site-primary-color) 7%, transparent), transparent 50%),
        linear-gradient(180deg, var(--site-surface-color) 0%, color-mix(in srgb, var(--site-light-bg-color) 38%, var(--site-surface-color)) 100%) !important;
    border-top: 1px solid color-mix(in srgb, var(--site-heading-color) 6%, transparent);
}