/* [zip_product] - layout only. Typography, icon circles and the button come from zip-comfort.css / zip-header.css. */
.zcomf.zprod{position:relative;inset:auto;height:auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:stretch;padding:7vw 6.3%;background:#f2f8fe}
.zprod__left{position:relative;left:auto;top:auto;width:auto;z-index:1}
.zcomf.zprod .zcomf__desc{max-width:none;margin-bottom:2.2vw}
.zprod__tagline{margin:0 0 1.2vw;font-size:clamp(15px,1.45vw,26px);font-weight:500;line-height:1.4;color:var(--zc-ink)}
.zprod__features{list-style:none;margin:2.6vw 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2vw;text-align:center}
.zprod__feature{display:flex;flex-direction:column;align-items:center;gap:.9vw}
.zprod__feature .zcomf__circle{width:4.6vw;height:4.6vw;background:#fff;box-shadow:0 6px 18px rgba(20,38,61,.12);color:var(--zip-blue,#0a6cc4)}
.zprod__feature .zcomf__mask{width:2.2vw;height:2.2vw}
.zprod__label{font-size:clamp(12px,1vw,17px);font-weight:500;line-height:1.3;color:var(--zc-ink)}
.zcomf.zprod .zh__btn{font-size:clamp(14px,1.1vw,18px)}
.zprod__media{position:relative;z-index:1;min-height:100%;border-radius:1.6vw;overflow:hidden;box-shadow:0 18px 50px rgba(20,38,61,.14)}
.zprod__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* tablet: copy stacks above the photo, the 4 icons stay in one row, shorter photo */
@media (max-width:1024px){
	.zcomf.zprod{grid-template-columns:1fr;gap:3vw;padding:9vw 5%}
	.zprod__features{gap:1vw}
	.zprod__feature .zcomf__circle{width:6vw;height:6vw}
	.zprod__feature .zcomf__mask{width:2.9vw;height:2.9vw}
	.zprod__media{min-height:0;aspect-ratio:4/2.4}
	.zprod__media img{position:static;height:100%}
}

/* mobile: icons 2 x 2, more space between each icon and its label */
@media (max-width:767px){
	.zcomf.zprod{gap:36px;padding:48px 16px}
	.zprod__tagline{font-size:16px;margin-bottom:12px}
	.zcomf.zprod .zcomf__desc{font-size:15px;margin-bottom:24px}
	.zprod__features{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin:28px 0}
	.zprod__feature{gap:14px}
	.zprod__feature .zcomf__circle{width:54px;height:54px}
	.zprod__feature .zcomf__mask{width:26px;height:26px}
	.zprod__label{font-size:13px}
	.zprod__media{border-radius:16px;aspect-ratio:4/3.4}
}

/* image hover: same as REAL SPACES - the photo scales and darkens inside its own box */
.zprod__media img{transform:scale(1);transition:transform .7s cubic-bezier(.2,.7,.2,1);will-change:transform}
.zprod__media::after{content:"";position:absolute;inset:0;background:rgba(8,16,28,.32);opacity:0;transition:opacity .5s ease;pointer-events:none}
@media (hover:hover) and (pointer:fine){
.zprod__media:hover img{transform:scale(1.06)}
.zprod__media:hover::after{opacity:1}
}

/* entrance: items start hidden until zip-product.js plays the intro */
.zprod.zp-pre [data-zp]{opacity:0}

/* tablet + mobile: a tap on the photo gives the hover look (toggled by zip-product.js) */
@media (max-width:1024px){
.zprod__media.is-active img{transform:scale(1.06)}
.zprod__media.is-active::after{opacity:1}
}