/* The same size reference is used for every phone in a given display surface.
   Frames hide source padding; the original product photographs stay untouched. */
.device-stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    container-type: size;
}

.device-visual {
    position: relative;
    display: block;
    height: calc(min(100cqh, 100cqw) * var(--device-size));
    aspect-ratio: var(--image-ratio);
    overflow: hidden;
    isolation: isolate;
}

/* Scale the complete frame so both phone views stay visible on hover. */
.product-card .device-visual,
.catalog-card .device-visual {
    transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .product-card:hover .device-visual {
        transform: scale(1.07);
    }

    .catalog-card:hover .device-visual {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .product-card:focus-visible .device-visual,
    .catalog-card-link:focus-visible .device-visual {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card .device-visual,
    .catalog-card .device-visual {
        transition: none;
    }
}

/* Render the original image inside its measured visible bounds. */
.device-stage .device-visual img {
    display: block;
    position: absolute;
    left: var(--image-left);
    top: var(--image-top);
    width: var(--image-width);
    height: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
    object-fit: initial;
    transform: none;
    transition: none;
    mix-blend-mode: multiply;
}

.product-image,
.catalog-card-image {
    display: block;
    padding: calc((22 / var(--base-text-size)) * 1rem) calc((14 / var(--base-text-size)) * 1rem);
    background: #fff;
}

.grid-product-image {
    padding: calc((6 / var(--base-text-size)) * 1rem);
}

.device-size-label {
    display: block;
    color: #75808e;
    font: 400 calc((12 / var(--base-text-size)) * 1rem)/1.6 'Tajawal', sans-serif;
    margin-bottom: calc((10 / var(--base-text-size)) * 1rem);
}

.product-info .device-size-label {
    margin-top: calc((6 / var(--base-text-size)) * 1rem);
    margin-bottom: 0;
}

.catalog-card-info .device-size-label {
    order: 0;
    margin-top: calc((-4 / var(--base-text-size)) * 1rem);
}

.catalog-card-price,
.catalog-card-details {
    order: 1;
}

.grid-product-info h3 {
    white-space: normal;
    line-height: 1.4;
}

.product-price.price-on-request,
.grid-product-price.price-on-request,
.catalog-card-price strong.price-on-request {
    font-size: calc((15 / var(--base-text-size)) * 1rem);
}

#detail-price.price-on-request {
    font-size: calc((25 / var(--base-text-size)) * 1rem);
}

.detail-media-frame {
    display: block;
    width: 100%;
    height: calc((400 / var(--base-text-size)) * 1rem);
}

.detail-gallery {
    background: #fff;
}

.detail-dialog-image-frame {
    height: min(calc((650 / var(--base-text-size)) * 1rem), calc(100dvh - calc((140 / var(--base-text-size)) * 1rem)));
    padding: calc((24 / var(--base-text-size)) * 1rem);
    background: #fff;
}

@media (max-width: 991.98px) {
    .detail-media-frame { height: calc((300 / var(--base-text-size)) * 1rem); }
}

@media (max-width: 767.98px) {
    .detail-media-frame { height: calc((270 / var(--base-text-size)) * 1rem); }
    .product-image,
    .catalog-card-image { padding: calc((16 / var(--base-text-size)) * 1rem) calc((10 / var(--base-text-size)) * 1rem); }
}

@media (max-width: 479.98px) {
    .catalog-card-image { padding: calc((12 / var(--base-text-size)) * 1rem) calc((8 / var(--base-text-size)) * 1rem); }
    .catalog-card-price strong.price-on-request { font-size: calc((13 / var(--base-text-size)) * 1rem); }
    .device-size-label { font-size: calc((11 / var(--base-text-size)) * 1rem); }
}