/* Demo product pages (10–27) reproduced from the approved designs. Scoped to .xprod. */
@font-face { font-family: 'XP Poppins'; src: url(/assets/fonts/xp-poppins-Light.woff) format('woff'); font-weight: 300; font-display: block; }
@font-face { font-family: 'XP Poppins'; src: url(/assets/fonts/xp-poppins-Regular.woff) format('woff'); font-weight: 400; font-display: block; }
@font-face { font-family: 'XP Poppins'; src: url(/assets/fonts/xp-poppins-Medium.woff) format('woff'); font-weight: 500; font-display: block; }
@font-face { font-family: 'XP Poppins'; src: url(/assets/fonts/xp-poppins-Bold.woff) format('woff'); font-weight: 700; font-display: block; }

.xprod { --xp-o: #FE4E01; --xp-ink: #0B0D18; --xp-mut: #5D6479; --xp-line: #ECEDF1; font-family: 'XP Poppins', 'Poppins', var(--f-body, system-ui), sans-serif; color: var(--xp-ink); overflow-x: clip; }
.xprod .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xprod .xp-load { min-height: 70vh; }

/* ---------- desktop canvas ---------- */
.xprod .xp-d { position: relative; overflow: hidden; }
.xprod .xp-cv { position: relative; transform-origin: 0 0; }
.xprod .xp-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.xprod .xpn { font-family: 'XP Poppins', 'Poppins', sans-serif; font-style: normal; font-kerning: normal; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }
.xprod .xp-h1 { display: contents; margin: 0; font: inherit; }
.xprod .xp-anc { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.xprod .xp-hot { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, filter .15s; }
.xprod .xp-hot:hover { filter: brightness(1.04); box-shadow: 0 8px 22px -12px rgba(254, 78, 1, .55); }
.xprod .xp-hot:focus-visible, .xprod .xp-tab:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
.xprod .xp-shot { border-radius: 12px; }
.xprod .xp-shot:hover { box-shadow: 0 14px 30px -16px rgba(16, 20, 40, .45); }

.xprod .xp-tabs .xp-tab { position: absolute; display: block; box-sizing: border-box; border-radius: 9px; background: var(--xi); box-shadow: inset 0 0 0 1px var(--xb); text-decoration: none; transition: background-color .18s, box-shadow .18s; }
.xprod .xp-tabs .xp-tab i { position: absolute; background: var(--xfi); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.xprod .xp-tabs .xp-tab .xpn { color: var(--xfi) !important; }
.xprod .xp-tabs .xp-tab.on { background: var(--xa); box-shadow: 0 8px 18px -10px rgba(254, 78, 1, .7); }
.xprod .xp-tabs .xp-tab.on i { background: var(--xf); }
.xprod .xp-tabs .xp-tab.on .xpn { color: var(--xf) !important; }
.xprod .xp-tabs .xp-tab:not(.on):hover { box-shadow: inset 0 0 0 1px var(--xp-o); }

.xprod .xp-m { display: none; }
@media (max-width: 1179.98px) {
  .xprod .xp-d { display: none; }
  .xprod .xp-m { display: block; }
}

/* ---------- responsive flow (360–1179px) ---------- */
.xprod .xm-w { width: min(100% - 32px, 1040px); margin: 0 auto; }
.xprod .xm-hero { background: linear-gradient(180deg, #FFF8F3 0%, #fff 100%); padding: 22px 0 26px; }
.xprod .xm-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #202435; text-transform: uppercase; }
.xprod .xm-kick i, .xprod .xm-h i { width: 14px; height: 14px; border-radius: 50%; background: var(--xp-o); box-shadow: 0 0 0 4px #FFE1D2; flex: none; position: relative; }
.xprod .xm-kick i::after, .xprod .xm-h i::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.xprod .xm-kick-d { color: #E8E8EA; }
.xprod .xm-kick-d i { box-shadow: 0 0 0 4px rgba(254, 78, 1, .25); }
.xprod .xm-hero h1 { font-size: clamp(30px, 7.4vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 12px 0 12px; color: #05050D; }
.xprod .xm-hero h1 span, .xprod .xm-band h2 span, .xprod .xm-h span { color: var(--xp-o) !important; }
.xprod .xm-lead { font-size: 15px; line-height: 1.55; color: #4E576F; margin: 0 0 16px; max-width: 620px; }
.xprod .xm-dev { display: block; width: 100%; height: auto; border-radius: 12px; margin: 4px 0 18px; }
.xprod .xm-hf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 18px; }
.xprod .xm-hf > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.xprod .xm-hf img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.xprod .xm-hf b { display: block; font-size: 13px; font-weight: 600; color: #11131F; line-height: 1.25; }
.xprod .xm-hf small { display: block; font-size: 12px; color: #5D6479; line-height: 1.3; }
.xprod .xm-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.xprod .xm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 9px; font-size: 14.5px; font-weight: 600; text-decoration: none; flex: 1 1 180px; }
.xprod .xm-btn-p { background: var(--xp-o); color: #fff; box-shadow: 0 10px 22px -12px rgba(254, 78, 1, .8); }
.xprod .xm-btn-o { background: #fff; color: #11131F; border: 1.5px solid #FFB896; }
.xprod .xm-btn-o svg { color: var(--xp-o); }
.xprod .xm-btn-d { background: rgba(255, 255, 255, .02); color: #fff; border: 1.5px solid rgba(254, 78, 1, .75); }
.xprod .xm-btn-d svg { color: var(--xp-o); }

.xprod .xm-tabs { position: sticky; top: var(--xm-top, 64px); z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--xp-line); }
.xprod .xm-tabs-in { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; max-width: 1072px; margin: 0 auto; }
.xprod .xm-tabs-in::-webkit-scrollbar { display: none; }
.xprod .xm-tabs .xp-tab { position: static; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--xp-line); color: #11131F; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.xprod .xm-tabs .xp-tab i { display: block; background: currentColor; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; flex: none; }
.xprod .xm-tabs .xp-tab.on { background: var(--xa, var(--xp-o)); color: var(--xf, #fff); box-shadow: none; }

.xprod .xm-sec { padding: 26px 0 6px; scroll-margin-top: 130px; }
.xprod .xm-h { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; margin: 0 0 12px; color: #0A0C17; line-height: 1.2; }
.xprod .xm-h-d { color: #fff; }
.xprod .xm-p { font-size: 14px; line-height: 1.6; color: #5D6479; margin: 0 0 14px; }
.xprod .xm-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 18px; }
.xprod .xm-checks li, .xprod .xm-why li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3D4459; }
.xprod .xm-checks i, .xprod .xm-why li i { width: 18px; height: 18px; border-radius: 50%; background: var(--xp-o); color: #fff; display: grid; place-items: center; flex: none; }
.xprod .xm-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.xprod .xm-card { background: #fff; border: 1px solid var(--xp-line); border-radius: 12px; box-shadow: 0 6px 18px -14px rgba(16, 20, 40, .35); text-align: left; color: inherit; font: inherit; padding: 0; overflow: hidden; }
.xprod .xm-card b { display: block; font-size: 14px; font-weight: 600; color: #11131F; line-height: 1.3; }
.xprod .xm-card small { display: block; font-size: 12.5px; color: #5D6479; line-height: 1.5; margin-top: 3px; }
.xprod .xm-shot { cursor: pointer; display: flex; flex-direction: column; }
.xprod .xm-g-shots { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.xprod .xm-shot > img { width: 100%; height: auto; aspect-ratio: auto; display: block; background: #0E1222; }
.xprod .xm-shot-b { padding: 11px 13px 13px; }
.xprod .xm-shot-t { display: block; }
.xprod .xm-shot-t > img { width: 22px; height: 22px; float: left; margin: 0 8px 0 0; border-radius: 5px; }
.xprod .xm-feat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.xprod .xm-feat > img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.xprod .xm-g-who { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.xprod .xm-photo { border: 0; box-shadow: none; background: transparent; }
.xprod .xm-photo > img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 122 / 62; object-fit: cover; }
.xprod .xm-photo > span { display: block; padding: 6px 2px 0; text-align: center; }
.xprod .xm-photo b { font-size: 12.5px; }
.xprod .xm-why { position: relative; overflow: hidden; border-radius: 14px; padding: 20px 20px 22px; background: linear-gradient(125deg, var(--g1) 0%, var(--g3) 55%, var(--g2) 100%); color: #fff; }
.xprod .xm-why-art { position: absolute; right: 0; bottom: 0; width: min(38%, 200px); height: auto; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.xprod .xm-why > *:not(img) { position: relative; }
.xprod .xm-why h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: #fff; }
.xprod .xm-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-width: 80%; }
.xprod .xm-why li { color: #F1ECEA; }
.xprod .xm-band { margin-top: 28px; padding: 28px 0 30px; background: radial-gradient(120% 90% at 100% 100%, var(--g2) 0%, transparent 60%), var(--g1); color: #fff; scroll-margin-top: 130px; }
.xprod .xm-band h2 { font-size: clamp(24px, 5.4vw, 30px); font-weight: 700; line-height: 1.2; margin: 10px 0 8px; color: #fff; }
.xprod .xm-band p { font-size: 14px; color: #D2D3D6; line-height: 1.55; margin: 0 0 16px; }
.xprod .xm-band-r { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); }
.xprod .xm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.xprod .xm-steps li { display: flex; gap: 12px; align-items: flex-start; }
.xprod .xm-steps img { width: 54px; height: 54px; border-radius: 50%; flex: none; }
.xprod .xm-steps em { display: block; font-style: normal; color: var(--xp-o); font-weight: 600; font-size: 14px; }
.xprod .xm-steps b { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.xprod .xm-steps small { display: block; font-size: 12.5px; color: #C9CACD; line-height: 1.5; }
@media (min-width: 720px) {
  .xprod .xm-hf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xprod .xm-btn { flex: 0 1 auto; }
  .xprod .xm-band-r { border-top: 0; }
}
@media (min-width: 900px) {
  .xprod .xm-hero .xm-w { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .xprod .xm-hero .xm-w > * { grid-column: 1; }
  .xprod .xm-hero .xm-dev { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  .xprod .xm-band .xm-w { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; }
  .xprod .xm-band-r { margin-top: 0; padding-top: 0; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .15); }
}

/* dialogs */
.xp-dlg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.xp-dlg-grid > div { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #ECEDF1; border-radius: 12px; padding: 12px 14px; }
.xp-dlg-grid i { width: 38px; height: 38px; border-radius: 50%; background: #FFF1E9; color: #FE4E01; display: grid; place-items: center; flex: none; }
.xp-dlg-grid b { display: block; font-size: .92rem; }
.xp-dlg-grid small { display: block; color: #5D6479; font-size: .84rem; line-height: 1.5; margin-top: 2px; }
.xp-dlg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-dlg-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #FFF1E9; color: #3A2A22; font-size: .85rem; }
.xp-dlg-chips svg { color: #FE4E01; }
.xp-lb-img { display: block; width: 100%; height: auto; border-radius: 10px; image-rendering: auto; }
.xprod .xm-kick-o { color: var(--xp-o); margin-bottom: 6px; }
.xprod .xm-g-whorow { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* fallback flow (products without a generated layout) */
.xprod.xp-flow .xp-m { display: block; }
.xprod .xm-ic { width: 40px; height: 40px; border-radius: 50%; background: #FFF1E9; color: var(--xp-o); display: grid; place-items: center; flex: none; }
.xprod .xm-ic-l { width: 48px; height: 48px; }
.xprod .xm-ic-s { width: 54px; height: 54px; background: var(--xp-o); color: #fff; }