/* Artmark Global Presence — "Supplier Network" globe design.
   Ported from the pasted HTML bundle: the photos are files in assets/amg/products/
   instead of base64 inside the page, so the page stays small enough for
   TranslatePress to process it. Full-bleed is done by the script against the
   page box (which the Maximum Page Width setting may cap). */
/* ---------- base / theme resets (scoped) ---------- */
.amg-root, .amg-root *, .amg-root *::before, .amg-root *::after { box-sizing: border-box; }
/* Full-bleed: breaks out of boxed Elementor containers to span the whole page width.
   (JS below fine-tunes width/offset so it never causes a horizontal scrollbar.) */
.amg-root.amg-root { position: relative; width: 100%; max-width: none; margin-left: 0; margin-right: 0; background: #0E1A1E; line-height: normal; }
.amg-root.amg-root h2, .amg-root.amg-root p { margin: 0; padding: 0; border: 0; text-transform: none; }
.amg-root.amg-root button {
  -webkit-appearance: none; appearance: none; margin: 0; border-radius: 0; box-shadow: none;
  text-transform: none; text-decoration: none; letter-spacing: normal; line-height: 1.2;
  min-height: 0; min-width: 0; outline: none; font-family: Inter, sans-serif;
}
.amg-root.amg-root ul, .amg-root.amg-root li { margin: 0; padding: 0; list-style: none; }
.amg-root.amg-root img { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.amg-root canvas { display: block; }

/* ---------- section reveal ---------- */
@keyframes amgFadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes amgSpinIn { from { opacity:0; transform:scale(0.88) rotate(-14deg); } to { opacity:1; transform:scale(1) rotate(0deg); } }
.amg-root .amg-section.is-armed { opacity:0; }
.amg-root .amg-section.reveal-in { opacity:1; animation: amgFadeUp 900ms cubic-bezier(0.16,1,0.3,1) forwards; }
.amg-root .amg-globebox.is-armed { opacity:0; }
.amg-root .amg-globebox.reveal-in { opacity:1; animation: amgSpinIn 1200ms cubic-bezier(0.16,1,0.3,1) 150ms forwards; }
@media (prefers-reduced-motion: reduce) { .amg-root .amg-section, .amg-root .amg-globebox { opacity:1 !important; animation:none !important; } }

/* ---------- section layout ---------- */
.amg-root .amg-bg {
  position: relative; padding: 104px 32px 0; overflow: hidden;
  background: radial-gradient(1.49px 1.49px at 41.94% 62.31%, rgba(255,255,255,0.74), transparent),radial-gradient(1.80px 1.80px at 95.50% 87.42%, rgba(255,255,255,0.70), transparent),radial-gradient(2.07px 2.07px at 45.03% 98.21%, rgba(255,255,255,0.35), transparent),radial-gradient(1.25px 1.25px at 70.49% 21.39%, rgba(255,255,255,0.42), transparent),radial-gradient(2.16px 2.16px at 67.50% 84.61%, rgba(255,255,255,0.53), transparent),radial-gradient(1.96px 1.96px at 86.25% 36.45%, rgba(255,255,255,0.37), transparent),radial-gradient(2.10px 2.10px at 56.09% 84.28%, rgba(255,255,255,0.30), transparent),radial-gradient(1.61px 1.61px at 90.07% 90.62%, rgba(255,255,255,0.68), transparent),radial-gradient(1.77px 1.77px at 85.27% 16.54%, rgba(255,255,255,0.43), transparent),radial-gradient(1.08px 1.08px at 85.51% 52.39%, rgba(255,255,255,0.41), transparent),radial-gradient(2.07px 2.07px at 57.20% 18.36%, rgba(255,255,255,0.63), transparent),radial-gradient(2.24px 2.24px at 69.82% 76.74%, rgba(255,255,255,0.46), transparent),radial-gradient(2.26px 2.26px at 5.05% 77.89%, rgba(255,255,255,0.33), transparent),radial-gradient(2.28px 2.28px at 98.25% 13.43%, rgba(255,255,255,0.41), transparent),radial-gradient(0.95px 0.95px at 12.59% 48.99%, rgba(255,255,255,0.77), transparent),radial-gradient(2.18px 2.18px at 92.62% 9.87%, rgba(255,255,255,0.64), transparent),radial-gradient(0.98px 0.98px at 15.51% 25.59%, rgba(255,255,255,0.37), transparent),radial-gradient(1.72px 1.72px at 73.37% 38.60%, rgba(255,255,255,0.70), transparent),radial-gradient(0.95px 0.95px at 62.64% 31.32%, rgba(255,255,255,0.73), transparent),radial-gradient(1.01px 1.01px at 46.24% 52.21%, rgba(255,255,255,0.62), transparent),radial-gradient(1.98px 1.98px at 39.77% 90.73%, rgba(255,255,255,0.64), transparent),radial-gradient(1.50px 1.50px at 65.91% 92.91%, rgba(255,255,255,0.53), transparent),radial-gradient(1.10px 1.10px at 94.76% 48.05%, rgba(255,255,255,0.45), transparent),radial-gradient(2.28px 2.28px at 61.75% 87.27%, rgba(255,255,255,0.55), transparent),radial-gradient(1.23px 1.23px at 24.47% 40.48%, rgba(255,255,255,0.76), transparent),radial-gradient(1.91px 1.91px at 4.34% 15.70%, rgba(255,255,255,0.39), transparent),radial-gradient(1.95px 1.95px at 61.82% 82.48%, rgba(255,255,255,0.78), transparent),radial-gradient(2.13px 2.13px at 27.07% 12.69%, rgba(255,255,255,0.49), transparent),radial-gradient(1.03px 1.03px at 16.18% 28.34%, rgba(255,255,255,0.56), transparent),radial-gradient(1.45px 1.45px at 70.07% 5.48%, rgba(255,255,255,0.52), transparent),radial-gradient(1.65px 1.65px at 23.40% 92.23%, rgba(255,255,255,0.58), transparent),radial-gradient(2.09px 2.09px at 96.81% 64.31%, rgba(255,255,255,0.32), transparent),radial-gradient(1.29px 1.29px at 99.79% 33.77%, rgba(255,255,255,0.43), transparent),radial-gradient(1.59px 1.59px at 1.18% 23.55%, rgba(255,255,255,0.40), transparent),radial-gradient(1.15px 1.15px at 19.34% 59.03%, rgba(255,255,255,0.42), transparent),radial-gradient(0.85px 0.85px at 98.61% 96.53%, rgba(255,255,255,0.37), transparent),radial-gradient(2.18px 2.18px at 55.57% 11.03%, rgba(255,255,255,0.47), transparent),radial-gradient(1.99px 1.99px at 36.68% 90.71%, rgba(255,255,255,0.26), transparent),radial-gradient(1.87px 1.87px at 97.79% 66.45%, rgba(255,255,255,0.83), transparent),radial-gradient(2.17px 2.17px at 79.27% 16.80%, rgba(255,255,255,0.55), transparent),radial-gradient(0.86px 0.86px at 21.29% 74.27%, rgba(255,255,255,0.70), transparent),radial-gradient(1.74px 1.74px at 9.84% 13.96%, rgba(255,255,255,0.60), transparent),radial-gradient(2.21px 2.21px at 97.47% 75.25%, rgba(255,255,255,0.79), transparent),radial-gradient(1.82px 1.82px at 66.33% 55.80%, rgba(255,255,255,0.55), transparent),radial-gradient(2.07px 2.07px at 47.14% 92.76%, rgba(255,255,255,0.44), transparent),radial-gradient(1.98px 1.98px at 70.28% 46.58%, rgba(255,255,255,0.43), transparent),radial-gradient(1.35px 1.35px at 77.06% 69.91%, rgba(255,255,255,0.38), transparent),radial-gradient(1.04px 1.04px at 94.72% 71.29%, rgba(255,255,255,0.45), transparent),radial-gradient(0.81px 0.81px at 76.89% 69.80%, rgba(255,255,255,0.80), transparent),radial-gradient(1.08px 1.08px at 42.15% 28.86%, rgba(255,255,255,0.58), transparent),radial-gradient(1.66px 1.66px at 58.68% 28.43%, rgba(255,255,255,0.72), transparent),radial-gradient(0.89px 0.89px at 58.17% 32.80%, rgba(255,255,255,0.69), transparent),radial-gradient(1.96px 1.96px at 12.32% 99.07%, rgba(255,255,255,0.35), transparent),radial-gradient(1.07px 1.07px at 32.49% 44.80%, rgba(255,255,255,0.38), transparent),radial-gradient(0.95px 0.95px at 74.98% 32.35%, rgba(255,255,255,0.70), transparent),radial-gradient(2.30px 2.30px at 62.48% 56.10%, rgba(255,255,255,0.47), transparent),radial-gradient(1.90px 1.90px at 3.86% 95.90%, rgba(255,255,255,0.54), transparent),radial-gradient(1.09px 1.09px at 10.97% 39.91%, rgba(255,255,255,0.32), transparent),radial-gradient(1.06px 1.06px at 54.54% 89.73%, rgba(255,255,255,0.33), transparent),radial-gradient(2.00px 2.00px at 84.32% 93.23%, rgba(255,255,255,0.67), transparent),radial-gradient(1.46px 1.46px at 86.17% 35.04%, rgba(255,255,255,0.40), transparent),radial-gradient(1.83px 1.83px at 63.40% 56.17%, rgba(255,255,255,0.33), transparent),radial-gradient(1.30px 1.30px at 67.64% 6.79%, rgba(255,255,255,0.34), transparent),radial-gradient(2.28px 2.28px at 36.69% 1.69%, rgba(255,255,255,0.69), transparent),radial-gradient(2.17px 2.17px at 85.38% 80.80%, rgba(255,255,255,0.56), transparent),radial-gradient(1.56px 1.56px at 58.16% 41.68%, rgba(255,255,255,0.57), transparent),radial-gradient(2.39px 2.39px at 33.30% 86.91%, rgba(255,255,255,0.33), transparent),radial-gradient(0.99px 0.99px at 98.11% 85.93%, rgba(255,255,255,0.62), transparent),radial-gradient(1.48px 1.48px at 40.32% 66.67%, rgba(255,255,255,0.50), transparent),radial-gradient(0.98px 0.98px at 86.66% 20.89%, rgba(255,255,255,0.27), transparent),radial-gradient(2.39px 2.39px at 24.91% 25.29%, rgba(255,255,255,0.67), transparent),radial-gradient(2.07px 2.07px at 53.10% 51.20%, rgba(255,255,255,0.78), transparent),radial-gradient(2.18px 2.18px at 7.46% 21.98%, rgba(255,255,255,0.58), transparent),radial-gradient(2.37px 2.37px at 62.47% 55.99%, rgba(255,255,255,0.73), transparent),radial-gradient(1.88px 1.88px at 82.96% 93.09%, rgba(255,255,255,0.45), transparent),radial-gradient(2.04px 2.04px at 36.33% 77.23%, rgba(255,255,255,0.64), transparent),radial-gradient(0.91px 0.91px at 30.01% 17.40%, rgba(255,255,255,0.28), transparent),radial-gradient(1.61px 1.61px at 10.66% 11.39%, rgba(255,255,255,0.57), transparent),radial-gradient(2.08px 2.08px at 5.13% 49.55%, rgba(255,255,255,0.81), transparent),radial-gradient(1.55px 1.55px at 20.84% 54.19%, rgba(255,255,255,0.68), transparent),radial-gradient(1.83px 1.83px at 0.06% 49.50%, rgba(255,255,255,0.27), transparent),radial-gradient(2.09px 2.09px at 80.27% 27.31%, rgba(255,255,255,0.81), transparent),radial-gradient(1.67px 1.67px at 50.71% 88.87%, rgba(255,255,255,0.51), transparent),radial-gradient(0.93px 0.93px at 66.73% 82.77%, rgba(255,255,255,0.49), transparent),radial-gradient(0.94px 0.94px at 59.29% 90.56%, rgba(255,255,255,0.43), transparent),radial-gradient(2.21px 2.21px at 54.28% 30.15%, rgba(255,255,255,0.40), transparent),radial-gradient(1.38px 1.38px at 76.84% 44.02%, rgba(255,255,255,0.73), transparent),radial-gradient(0.93px 0.93px at 1.95% 73.38%, rgba(255,255,255,0.34), transparent),radial-gradient(1.28px 1.28px at 13.51% 50.63%, rgba(255,255,255,0.77), transparent),radial-gradient(1.60px 1.60px at 49.51% 45.02%, rgba(255,255,255,0.72), transparent),radial-gradient(ellipse 55% 40% at 22% 28%, rgba(40,72,104,0.20), transparent 70%),radial-gradient(ellipse 48% 36% at 78% 68%, rgba(34,58,88,0.16), transparent 70%), #0E1A1E;
}
.amg-root .amg-section { position:relative; z-index:1; width:100%; max-width:1376px; margin:0 auto; display:flex; flex-direction:column; gap:52px; align-items:center; padding:0 16px; }
.amg-root .amg-heading { display:flex; flex-direction:column; gap:22px; align-items:center; width:100%; }
.amg-root.amg-root .amg-title {
  width:100%; max-width:900px; font-family:Archivo,sans-serif; font-weight:400; font-size:52px; line-height:58px;
  text-align:center; letter-spacing:-0.01em; background:linear-gradient(180deg, #FFFFFF 0%, #B4DDFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.amg-root.amg-root .amg-sub { width:100%; max-width:760px; font-family:Inter,sans-serif; font-weight:400; font-size:16px; line-height:26px; text-align:center; color:rgba(255,255,255,0.7); }
.amg-root .amg-globebox { position:relative; align-self:stretch; height:820px; margin-top:8px; overflow:hidden; container-type:inline-size; container-name:amgbox; }
.amg-root .amg-glow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(0,128,184,0.28) 0%, rgba(0,128,184,0.1) 45%, transparent 72%); z-index:0; pointer-events:none; }

@media (max-width: 820px) {
  .amg-root .amg-section { gap: 32px; padding: 0 12px; }
  .amg-root.amg-root .amg-title { font-size: 30px; line-height: 36px; }
  .amg-root.amg-root .amg-sub { font-size: 16px; line-height: 25px; }
  .amg-root .amg-globebox { height: 760px; margin-top: 0; }
  .amg-root .amg-glow { width: 520px; height: 520px; }
}
@media (max-width: 480px) {
  .amg-root.amg-root .amg-title { font-size: 28px; line-height: 34px; }
  .amg-root .amg-globebox { height: 700px; }
  .amg-root .amg-glow { width: 420px; height: 420px; }
}

/* ---------- globe stage ---------- */
.amg-root .amg-stage { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; font-family: Inter, sans-serif; }
.amg-root .amg-row { flex: 1 1 auto; position: relative; display: flex; align-items: center; min-height: 0; }
.amg-root .amg-wrap { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 900ms cubic-bezier(0.16,1,0.3,1); }
.amg-root .amg-wrap.is-shifted { transform: translateX(-6%); }
.amg-root .amg-canvas { cursor: grab; position: absolute; inset: 0; }
.amg-root .amg-canvas:active { cursor: grabbing; }
.amg-root .amg-lines { position: absolute; inset: 0; pointer-events: none; }

.amg-root .amg-pin {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #ffffff; border: 2px solid #0E1A1E; cursor: pointer;
}
.amg-root .amg-pin:hover { transform: scale(1.25); }
.amg-root .amg-pin.is-active { background: var(--amg-accent, #0080B8); border-color: #ffffff; transform: scale(1.3); }
.amg-root .amg-pin.amg-pin-marker {
  width: 22px; height: 32px; margin: -32px 0 0 -11px; border-radius: 0;
  background: none; border: 0; transform: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}
.amg-root .amg-pin.amg-pin-marker:hover { transform: scale(1.18); }
.amg-root .amg-pin.amg-pin-marker.is-active { background: none; border: 0; transform: scale(1.25); }
.amg-root .amg-pin.amg-pin-marker svg { width: 100%; height: 100%; display: block; }
.amg-root .amg-tag {
  position: absolute; transform: translate(10px, -50%);
  background: rgba(2,7,19,0.55); border: 1px solid rgba(180,221,255,0.35);
  color: #ffffff; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: normal;
  padding: 4px 10px; white-space: nowrap; cursor: pointer; pointer-events: auto;
}
.amg-root .amg-tag:hover { background: rgba(0,128,184,0.35); border-color: rgba(180,221,255,0.7); }
.amg-root .amg-tag.is-active { background: var(--amg-accent, #0080B8); border-color: var(--amg-accent, #0080B8); }
.amg-root .amg-tag.amg-tag-sm { font-size: 11px; padding: 3px 7px; letter-spacing: 0; transform: translate(12px, -140%); }
.amg-root .amg-pin, .amg-root .amg-tag { transition: opacity 500ms ease, transform 150ms ease, background 150ms ease, border-color 150ms ease; opacity: 0; }
.amg-root.is-revealed .amg-pin, .amg-root.is-revealed .amg-tag { opacity: 1; }

/* ---------- info panel ---------- */
.amg-root .amg-panel {
  position: relative; flex: 0 0 380px; width: 380px; max-width: 42%;
  align-self: center; margin-left: -55px;
  border: 1px solid #E4E4E2; border-left: 3px solid var(--amg-accent, #0080B8);
  background: #ffffff; color: #020713; opacity: 0; transition: opacity 250ms ease;
  max-height: 100%; overflow-y: auto;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.amg-root .amg-panel.is-shown { opacity: 1; }
.amg-root .amg-panel .amg-inner { padding: 0 0 20px; }
.amg-root.amg-root .amg-panel .amg-photo { width: 100%; height: 150px; object-fit: cover; display: block; margin-bottom: 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.amg-root .amg-panel .amg-photo-wrap { position: relative; margin-bottom: 20px; }
.amg-root.amg-root .amg-panel .amg-photo-wrap .amg-photo { margin-bottom: 0; }
.amg-root .amg-panel .amg-carousel { position: relative; width: 100%; height: 188px; margin-bottom: 20px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.amg-root.amg-root .amg-panel .amg-carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 180ms ease; }
.amg-root.amg-root .amg-panel .amg-carousel img.is-active { opacity: 1; }
.amg-root.amg-root .amg-panel .amg-nav-btn,
.amg-root.amg-root .amg-panel .amg-nav-btn:focus {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.55); color: #ffffff; transition: background 150ms ease;
}
.amg-root.amg-root .amg-panel .amg-nav-btn:hover { background: rgba(255,255,255,0.32); color: #ffffff; }
.amg-root .amg-panel .amg-nav-btn.amg-prev { left: 12px; }
.amg-root .amg-panel .amg-nav-btn.amg-next { right: 12px; }
.amg-root .amg-panel .amg-nav-btn svg { width: 16px; height: 16px; }
.amg-root .amg-panel .amg-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.amg-root .amg-panel .amg-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 150ms ease, transform 150ms ease; }
.amg-root .amg-panel .amg-dots span.is-active { background: #ffffff; transform: scale(1.2); }
.amg-root .amg-panel .amg-body { padding: 0 30px; }
.amg-root .amg-panel .amg-name { font-family: Archivo, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 8px; color: #020713; }
.amg-root .amg-panel .amg-city-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.amg-root.amg-root .amg-panel .amg-city-tabs button,
.amg-root.amg-root .amg-panel .amg-city-tabs button:hover,
.amg-root.amg-root .amg-panel .amg-city-tabs button:focus {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: #333333;
  background: #ffffff; border: 1px solid #E4E4E2; padding: 8px 16px; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.amg-root.amg-root .amg-panel .amg-city-tabs button.is-active { background: var(--amg-accent, #0080B8); border-color: var(--amg-accent, #0080B8); color: #ffffff; font-weight: 600; }
.amg-root .amg-panel .amg-carousel.amg-city-carousel { height: 170px; margin-bottom: 16px; }
.amg-root .amg-panel .amg-city-desc { font-size: 14px; line-height: 22px; color: #333333; }
.amg-root .amg-panel .amg-role { font-size: 14px; line-height: 22px; color: #333333; margin-bottom: 16px; }
.amg-root .amg-panel canvas { width: 100%; max-width: 320px; height: auto; display: block; margin-bottom: 20px; }
.amg-root.amg-root .amg-panel ul { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.amg-root.amg-root .amg-panel li { font-size: 13px; line-height: 20px; color: #333333; display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.amg-root .amg-panel li::before { content: ""; width: 5px; height: 5px; margin-top: 7px; background: var(--amg-accent, #0080B8); flex-shrink: 0; }
.amg-root.amg-root .amg-panel ul.amg-boxed { background: #D3EDFE; padding: 16px 18px; }

/* ---------- mobile prev/next ---------- */
.amg-root .amg-mnav {
  display: none; position: absolute; left: 0; right: 0; bottom: 10px; z-index: 6;
  justify-content: center; gap: 14px; pointer-events: none;
}
.amg-root.amg-root .amg-mnav button,
.amg-root.amg-root .amg-mnav button:hover,
.amg-root.amg-root .amg-mnav button:focus {
  pointer-events: auto; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.45); color: #ffffff;
}
.amg-root.amg-root .amg-mnav button:active { background: rgba(255,255,255,0.3); }
.amg-root .amg-mnav svg { width: 18px; height: 18px; }

/* ---------- category nav ---------- */
.amg-root .amg-cats {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px; align-self: center; padding-right: 12px;
  opacity: 0; transition: opacity 600ms ease;
}
.amg-root .amg-cats.is-revealed { opacity: 1; }
.amg-root .amg-cats button span:last-child { white-space: nowrap; }
.amg-root.amg-root .amg-cats button,
.amg-root.amg-root .amg-cats button:focus {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 500;
  background: rgba(180,221,255,0.04); border: 1px solid rgba(180,221,255,0.2); border-left: 3px solid transparent;
  padding: 12px 16px; text-align: left; display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.amg-root .amg-cats button .amg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.amg-root.amg-root .amg-cats button:hover { background: rgba(180,221,255,0.04); border-color: rgba(180,221,255,0.5); border-left-color: transparent; }
.amg-root.amg-root .amg-cats button.is-active,
.amg-root.amg-root .amg-cats button.is-active:hover,
.amg-root.amg-root .amg-cats button.is-active:focus { background: rgba(180,221,255,0.08); border-left-color: var(--amg-accent, #0080B8); }

/* ---------- reset view button ---------- */
.amg-root.amg-root .amg-reset,
.amg-root.amg-root .amg-reset:focus {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.9); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
  cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.amg-root.amg-root .amg-reset:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.9); transform: translateX(-50%) rotate(-45deg); }
.amg-root .amg-reset svg { width: 18px; height: 18px; }

/* ---------- small layout (based on the globe box width, like the original iframe) ---------- */
@container amgbox (max-width: 820px) {
  .amg-root .amg-stage .amg-row { flex-direction: column; padding: 0 6px 6px; gap: 10px; }
  .amg-root .amg-stage .amg-cats {
    order: 1; flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; width: 100%;
    padding: 0 0 4px; gap: 8px; overflow: visible;
  }
  .amg-root.amg-root .amg-stage .amg-cats button,
  .amg-root.amg-root .amg-stage .amg-cats button:hover,
  .amg-root.amg-root .amg-stage .amg-cats button:focus {
    flex: 0 0 auto; font-size: 13px; padding: 10px 12px; white-space: normal;
    border-left-width: 1px; border-left-color: rgba(180,221,255,0.2); border-bottom: 3px solid transparent;
  }
  .amg-root .amg-stage .amg-cats button span:last-child { white-space: normal; text-align: left; }
  .amg-root.amg-root .amg-stage .amg-cats button.is-active { border-left-color: rgba(180,221,255,0.2); border-bottom-color: var(--amg-accent, #0080B8); }
  .amg-root .amg-stage .amg-wrap { order: 2; width: 100%; flex: 1 1 auto; min-height: 240px; }
  .amg-root .amg-stage .amg-wrap.is-shifted { transform: none; }
  .amg-root .amg-stage .amg-lines { display: none; }
  .amg-root .amg-stage .amg-panel {
    position: absolute; left: 50%; right: auto; transform: translateX(-50%); bottom: 58px; z-index: 5;
    order: 3; flex: 0 0 auto; width: 78%; max-width: none; margin-left: 0;
    max-height: 32%; overflow-y: auto;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .amg-root .amg-stage .amg-mnav { display: flex; }
  .amg-root.amg-root .amg-stage .amg-reset { display: none; }
  .amg-root .amg-stage .amg-panel .amg-body { padding: 0 14px; }
  .amg-root .amg-stage .amg-panel .amg-inner { padding: 0 0 10px; }
  .amg-root .amg-stage .amg-panel .amg-name { font-size: 17px; margin-bottom: 4px; }
  .amg-root .amg-stage .amg-panel .amg-role { font-size: 12px; line-height: 18px; margin-bottom: 10px; }
  .amg-root .amg-stage .amg-panel .amg-carousel { height: 96px; margin-bottom: 10px; }
  .amg-root.amg-root .amg-stage .amg-panel .amg-photo { height: 90px; }
  .amg-root .amg-stage .amg-panel .amg-photo-wrap { margin-bottom: 10px; }
  .amg-root .amg-stage .amg-panel canvas { margin-bottom: 10px; }
  .amg-root.amg-root .amg-stage .amg-panel li { font-size: 11px; line-height: 16px; }
  .amg-root.amg-root .amg-stage .amg-panel ul { gap: 6px; }
  .amg-root .amg-stage .amg-panel .amg-city-tabs { gap: 6px; margin-bottom: 10px; }
  .amg-root.amg-root .amg-stage .amg-panel .amg-city-tabs button { font-size: 11px; padding: 6px 10px; }
  .amg-root .amg-stage .amg-panel .amg-carousel.amg-city-carousel { height: 100px; margin-bottom: 10px; }
  .amg-root .amg-stage .amg-panel .amg-city-desc { font-size: 12px; line-height: 18px; }
  .amg-root.amg-root .amg-stage .amg-panel .amg-nav-btn { width: 28px; height: 28px; }
  .amg-root .amg-stage .amg-panel .amg-nav-btn svg { width: 13px; height: 13px; }
  .amg-root .amg-stage .amg-tag { font-size: 11px; padding: 3px 8px; }
  .amg-root .amg-stage .amg-tag.amg-tag-sm { font-size: 10px; padding: 2px 6px; }
}