/* ---------- Hero scene (vector + live product photos, replaces the raster hero art) ---------- */
.zscene { position: relative; width: 100%; height: 100%; min-height: 420px; }
.zscene-globe-wrap { position: absolute; right: 6%; top: 30px; width: min(44%, 380px); aspect-ratio: 1; }
.zscene-globe { width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(21, 87, 245, .35)); }
.zscene-meridians { transform-origin: 200px 200px; animation: zscene-spin 18s linear infinite; }
@keyframes zscene-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.zscene-pin { position: absolute; color: var(--z-red); translate: -50% -100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); animation: zscene-bob 2.4s ease-in-out infinite; }
.zscene-pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 10px; height: 4px; margin-left: -5px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
@keyframes zscene-bob { 50% { translate: -50% -125%; } }

.zscene-laptop { position: absolute; left: 6%; top: 34px; z-index: 2; width: min(60%, 540px); animation: zscene-float 7s ease-in-out infinite; }
@keyframes zscene-float { 50% { transform: translateY(-8px); } }
.zscene-screen { position: relative; overflow: hidden; border: 10px solid #1b2440; border-bottom-width: 14px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #f7f9ff, #eef3fd); box-shadow: 0 30px 60px -20px rgba(11, 22, 56, .45); }
.zscene-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--z-line); }
.zscene-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.zscene-bar i:nth-child(2) { background: #febc2e; }
.zscene-bar i:nth-child(3) { background: #28c840; }
.zscene-bar span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: var(--z-soft); color: var(--z-muted); font-size: 10px; font-weight: 600; }
.zscene-awning { display: block; width: 100%; height: 34px; filter: drop-shadow(0 4px 4px rgba(21, 87, 245, .2)); }
.zscene-logo { display: flex; justify-content: center; margin: 4px 0 8px; }
.zscene-logo .zl-text b { font-size: 24px; }
.zscene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; padding: 0 14px 14px; }
.zscene-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; overflow: hidden; border: 1px solid var(--z-line); border-radius: 10px; background: #fff; color: var(--z-blue); box-shadow: 0 4px 10px -6px rgba(16, 32, 72, .25); }
.zscene-tile img { width: 100%; height: 100%; object-fit: cover; }
.zscene-tile-cart { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--z-blue); color: #fff; }
.zscene-base { position: relative; height: 14px; margin: 0 -9%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #c9d2e3, #8e9ab3); box-shadow: 0 18px 30px -10px rgba(11, 22, 56, .45); }
.zscene-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 5px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #7d89a3; }

.zscene-box { position: absolute; z-index: 3; display: block; border-radius: 4px; background: linear-gradient(135deg, #d9a86c, #b98146); box-shadow: inset -8px -8px 0 rgba(0, 0, 0, .08), 0 12px 20px -8px rgba(80, 50, 20, .45); }
.zscene-box i { position: absolute; left: 50%; top: 0; bottom: 0; width: 16%; translate: -50% 0; background: rgba(255, 255, 255, .35); }
.zscene-box.b1 { left: 2%; bottom: 6%; width: 82px; height: 64px; }
.zscene-box.b2 { left: 12%; bottom: 3%; width: 64px; height: 50px; }
.zscene-box.b3 { left: 4%; bottom: calc(6% + 62px); width: 56px; height: 44px; }

.zscene-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border: 1px solid var(--z-line); border-radius: 14px; background: rgba(255, 255, 255, .97); box-shadow: 0 16px 34px -14px rgba(11, 22, 56, .35); animation: zscene-float 6s ease-in-out infinite; }
.zscene-chip b { display: block; color: var(--z-navy); font-size: 13px; line-height: 1.2; }
.zscene-chip small { color: var(--z-muted); font-size: 11px; }
.zscene-chip > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; }
.zscene-chip .ok { background: #e8f9ee; color: var(--z-green); }
.zscene-chip .star { background: #fff6dc; color: var(--z-star); font-size: 18px; }
.zscene-chip .cur { width: auto; padding: 0 8px; background: var(--z-blue-50); color: var(--z-blue); font-size: 12px; }
.zscene-chip.c1 { left: 0; top: 10%; animation-delay: -1s; }
.zscene-chip.c2 { left: 46%; top: 2%; animation-delay: -3s; }
.zscene-chip.c3 { left: 40%; bottom: 4%; animation-delay: -4.5s; }

@media (max-width: 1100px) {
  .zscene { min-height: 380px; }
  .zscene-globe-wrap { right: 0; }
}
@media (max-width: 640px) {
  .zscene { min-height: 300px; }
  .zscene-laptop { left: 4%; width: 74%; }
  .zscene-globe-wrap { width: 46%; right: -6%; }
  .zscene-chip.c2, .zscene-box.b3 { display: none; }
  .zscene-chip.c1 { top: 2%; }
  .zscene-chip.c3 { left: auto; right: 2%; bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .zscene-meridians, .zscene-pin, .zscene-laptop, .zscene-chip { animation: none; }
}

/* Country spotlight (e.g. Germany) uses the same live scene on its dark banner */
.zspot-scene { position: absolute; right: 0; top: 0; z-index: 0; width: 60%; height: 100%; }
.zspot-scene .zscene { min-height: 100%; }
.zspot-scene .zscene-laptop { left: 10%; width: min(56%, 460px); }
.zspot-copy { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .zspot-scene { position: relative; width: 100%; height: 300px; order: -1; }
}


/* ---------- Hero responsive (tablet + phone): stack cleanly, no overlaps ---------- */
@media (max-width: 1100px) {
  .zhero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .zhero-copy { padding: 28px 0 8px; }
  .zhero-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; grid-gap: 20px; gap: 20px; min-height: 0; margin-right: 0; padding-bottom: 28px; }
  .zhero-art { width: 100%; }
  .zcountry { position: relative; right: auto; top: auto; translate: none; width: auto; margin: 0; }
  .zscene { min-height: 380px; }
  .zscene-chip.c1 { left: 2%; }
}
@media (max-width: 760px) {
  .zhero-copy { text-align: center; }
  .zhero-copy > p { margin-left: auto; margin-right: auto; }
  .zhero-feats { justify-content: center; }
  .zhero-stage { grid-template-columns: 1fr; gap: 14px; }
  .zcountry { max-width: 520px; width: 100%; justify-self: center; }
  .zscene { min-height: 330px; }
  .zscene-laptop { left: 4%; top: 30px; width: 70%; }
  .zscene-globe-wrap { right: 0; top: 20px; width: 40%; }
}
@media (max-width: 480px) {
  .zhero-copy h1 { font-size: 32px; }
  .zhero-feats li { width: 50%; font-size: 13px; }
  .zscene { min-height: 270px; }
  .zscene-laptop { left: 3%; top: 26px; width: 80%; }
  .zscene-screen { border-width: 6px; border-bottom-width: 9px; border-radius: 12px 12px 4px 4px; }
  .zscene-awning { height: 22px; }
  .zscene-logo .zl-text b { font-size: 18px; }
  .zscene-logo svg { width: 24px; height: 24px; }
  .zscene-grid { gap: 5px; padding: 0 8px 8px; }
  .zscene-tile-cart { display: none; }
  .zscene-globe-wrap { width: 42%; right: -8%; top: 8px; }
  .zscene-box.b1 { width: 54px; height: 42px; }
  .zscene-box.b2 { width: 42px; height: 33px; }
  .zscene-chip { padding: 6px 10px 6px 6px; gap: 7px; border-radius: 11px; }
  .zscene-chip > span { width: 26px; height: 26px; }
  .zscene-chip b { font-size: 11.5px; }
  .zscene-chip small { display: none; }
  .zscene-chip.c1 { top: 0; left: 2%; }
  .zscene-chip.c3 { right: 2%; left: auto; bottom: 6px; }
}

/* header fits on one row on tablets */
@media (max-width: 1100px) {
  .zh-logo .zl-text small { display: none; }
  .zh-logo .zl-text b { font-size: 28px; }
}
.zc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zc-cur { white-space: nowrap; }
@media (max-width: 1100px) { .zhero-stage { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 760px) { .zhero-stage { grid-template-columns: 1fr; } }

/* phones: spacing between scene and country card, tidy section headings */
@media (max-width: 760px) {
  .zcountry { margin-top: 6px !important; }
  .zsec-head { align-items: center; gap: 10px; }
  .zsec-head h2 { font-size: 22px; }
  .zsec-head .zlink { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
  .zbanner-copy { max-width: 70%; }
  .zbanner img { width: 52%; }
}
@media (max-width: 480px) {
  .zscene-box { display: none; }
  .zscene { min-height: 250px; }
}
@media (max-width: 760px) {
  .zscene { min-height: 0 !important; padding: 34px 0 30px; }
  .zscene-laptop { position: relative; left: auto; top: auto; width: 76%; margin: 0 0 0 4%; }
}
@media (max-width: 480px) {
  .zscene { padding: 30px 0 26px; }
  .zscene-laptop { width: 84%; margin-left: 2%; }
}

/* listing filters */
.zcl-ftoggle { display: none; }
@media (max-width: 1100px) {
  .zcl-side-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 14px; gap: 14px; }
  .zcl-side { display: block; }
}
@media (max-width: 760px) {
  .zcl-side { padding: 0; overflow: hidden; }
  .zcl-ftoggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: #fff; color: var(--z-navy); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
  .zcl-ftoggle span { margin-left: auto; font-size: 20px; color: var(--z-blue); }
  .zcl-side-body { display: none; grid-template-columns: 1fr; padding: 0 16px 16px; }
  .zcl-side.open .zcl-side-body { display: grid; }
}

/* sign-in card fits phones */
@media (max-width: 860px) {
  .zauth-grid { width: auto; max-width: none; margin: 0 14px; }
  .zauth-brand { overflow: hidden; }
}

/* HD department photography */
.zcat-img { border-radius: 8px; background: var(--z-soft); }
.zcat-img img { object-fit: cover; border-radius: 8px; }
.zcat:hover .zcat-img img { transform: scale(1.08); }
.zbanner img { width: 56%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 18%, #000 40%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 18%, #000 40%); }
.zcl-banner.wide img { object-position: center; }
@media (max-width: 1100px) {
  .zcl-grid { grid-template-columns: minmax(0, 1fr); }
  .zcl-main, .zcl-side { min-width: 0; }
}

/* ---------- Tablet hero (761–1100px): copy left, country picker right, no tall art block ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .zhero-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; column-gap: 28px; padding-top: 8px; padding-bottom: 28px; }
  .zhero-stage { display: contents; }
  .zhero-art { display: none; }
  .zcountry { grid-column: 2; grid-row: 1; align-self: center; margin: 24px 0 0 !important; }
  .zhero-copy { grid-column: 1; grid-row: 1; padding: 24px 0 4px; text-align: left; }
  .zhero-copy h1 { font-size: clamp(32px, 4.6vw, 44px); }
  .zhero-feats { justify-content: flex-start; }
  .zhero-feats li { width: 25%; padding: 0 6px; font-size: 13px; }
}
/* Phones: copy, then the country picker, then a compact scene */
@media (max-width: 760px) {
  .zhero-stage { display: flex; flex-direction: column; }
  .zcountry { order: -1; margin: 4px 0 0 !important; }
  .zhero-art { order: 1; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .zs-country .zs-label { display: none; }
  .zh-row { gap: 10px; }
}
.zpill.amber { background: #fef3c7; color: #b45309; }