/* Zoli 250 homepage popup — self-contained, theme-safe. No global selectors. */
.z250hp-overlay[hidden] { display:none!important; }
.z250hp-overlay, .z250hp-overlay * { box-sizing:border-box; }
.z250hp-overlay {
  position:fixed; inset:0; z-index:2147483200; display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px); background:rgba(5,8,13,.84); backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px); overscroll-behavior:contain; font-family:Arial,Helvetica,sans-serif;
  opacity:0; transition:opacity .32s ease;
}
.z250hp-overlay.z250hp-open { opacity:1; }
.z250hp-modal {
  display:flex; flex-direction:column; overflow:hidden; position:relative; isolation:isolate;
  width:min(100%,1000px); max-height:calc(100dvh - 44px); min-height:595px; padding:30px 46px 24px;
  color:#f5f1e9; background:radial-gradient(ellipse at 62% 64%, #23334b 0%, #121d2e 38%, #0b1320 78%);
  border:1px solid rgba(211,179,119,.48); box-shadow:0 28px 100px rgba(0,0,0,.58); outline:none;
  transform:translateY(16px) scale(.985); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.z250hp-open .z250hp-modal { transform:translateY(0) scale(1); }
.z250hp-modal::before { content:""; position:absolute; top:0; left:0; height:100%; width:4px; background:linear-gradient(180deg,#c89c5a 0%,#651d27 65%,#c89c5a); z-index:3; }
.z250hp-topline { flex:0 0 auto; display:flex; gap:20px; align-items:center; justify-content:space-between; padding-right:36px; position:relative; z-index:2; }
.z250hp-mark { display:block!important; width:102px!important; height:auto!important; max-width:102px!important; flex:0 0 auto; object-fit:contain; }
.z250hp-toplabel { font:700 10px/1.5 Arial,Helvetica,sans-serif; letter-spacing:.21em; color:#dcc8a4; }
.z250hp-toplabel i { display:inline-block; width:25px; height:1px; background:#c89c5a; vertical-align:middle; margin:0 9px 3px; }
.z250hp-close { -webkit-appearance:none; appearance:none; cursor:pointer; position:absolute; top:16px; right:18px; z-index:5; display:flex; align-items:center; justify-content:center; height:40px; width:40px; padding:0; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(5,8,13,.6); color:#f5f1e9; font:400 29px/1 Arial,sans-serif; transition:background .2s,border .2s; }
.z250hp-close:hover,.z250hp-close:focus-visible { background:#cc0921; border-color:#cc0921; }
.z250hp-content { flex:0 0 auto; position:relative; z-index:2; margin-top:30px; }
.z250hp-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 12px!important; color:#d9c3a1!important; font:700 11px/1.5 Arial,sans-serif!important; letter-spacing:.25em; }
.z250hp-vertical { height:22px; width:3px; background:#cd1230; display:block; }
.z250hp-content h2 { margin:0!important; padding:0!important; max-width:900px; font-family:Arial,Helvetica,sans-serif!important; font-size:clamp(42px,6vw,78px)!important; font-weight:800!important; line-height:.99!important; letter-spacing:-.058em!important; text-transform:none!important; color:#f5f1e9!important; }
.z250hp-content h2 span { display:block; }
.z250hp-content h2 em { display:block; margin-top:4px; color:#d1b17a; font-family:Georgia,'Times New Roman',serif!important; font-size:clamp(36px,5.5vw,68px)!important; font-weight:400!important; line-height:1.03!important; letter-spacing:-.055em!important; }
.z250hp-desc { margin:16px 0 0!important; max-width:660px; color:#ced4dd!important; font:400 14px/1.6 Arial,sans-serif!important; }
.z250hp-desc strong { color:#fff; font-weight:700; white-space:nowrap; }
.z250hp-product { position:relative; flex:1 1 155px; min-height:140px; display:flex; align-items:center; justify-content:center; margin:14px -46px 8px; overflow:hidden; }
.z250hp-product img { display:block!important; position:relative; z-index:1; width:112%; height:auto!important; max-width:none!important; margin:0!important; object-fit:contain; transform:translateX(4%); filter:drop-shadow(0 28px 15px rgba(0,0,0,.5)); pointer-events:none; }
.z250hp-watermark { pointer-events:none; position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; transform:translateY(-14px); color:rgba(218,205,181,.06); font:bold 300px/1 Arial,Helvetica,sans-serif; letter-spacing:-.12em; }
.z250hp-bottom { flex:0 0 auto; position:relative; z-index:2; margin-top:auto; padding-top:5px; }
.z250hp-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.z250hp-btn { display:inline-flex!important; gap:18px; justify-content:space-between; align-items:center; min-height:52px; min-width:225px; padding:13px 18px!important; border:1px solid transparent; border-radius:0!important; text-transform:none!important; font:700 11px/1.3 Arial,sans-serif!important; letter-spacing:.105em!important; text-align:left!important; text-decoration:none!important; white-space:nowrap; transition:background .2s,border-color .2s,transform .2s; box-shadow:none!important; }
.z250hp-btn:hover { transform:translateY(-2px); }
.z250hp-btn span { font:400 19px/1 Arial,sans-serif; }
.z250hp-btn-primary { color:#fff!important; background:#be0b24!important; }
.z250hp-btn-primary:hover,.z250hp-btn-primary:focus-visible { background:#da1230!important; }
.z250hp-btn-outline { color:#e6d5b9!important; border-color:#b59a70!important; background:rgba(8,13,22,.58)!important; }
.z250hp-btn-outline:hover,.z250hp-btn-outline:focus-visible { background:rgba(181,154,112,.18)!important; }
.z250hp-nationals { margin:17px 0 0!important; padding:0!important; font:700 10px/1.5 Arial,sans-serif!important; letter-spacing:.16em; color:#d1b17a!important; }
.z250hp-nationals span { margin-left:8px; font-weight:400; color:#d1d6dc; }
body.z250hp-locked { overflow:hidden!important; }
@media (max-width: 720px) {
 .z250hp-overlay { padding:12px; align-items:center; }
 .z250hp-modal { padding:23px 22px 24px; width:100%; min-height:0; height:auto; min-height:min(680px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); }
 .z250hp-topline { padding-right:32px; gap:7px; align-items:flex-start; }
 .z250hp-mark { width:80px!important; max-width:80px!important; }
 .z250hp-toplabel { font-size:8px; letter-spacing:.085em; padding-top:6px; }
 .z250hp-toplabel i { display:none; }
 .z250hp-close { width:34px; height:34px; top:14px; right:12px; font-size:25px; }
 .z250hp-content { margin-top:36px; }
 .z250hp-eyebrow { font-size:9px!important; margin-bottom:13px!important; }
 .z250hp-content h2 { font-size:clamp(38px,10.7vw,57px)!important; line-height:1.02!important; }
 .z250hp-content h2 em { font-size:clamp(35px,10vw,51px)!important; }
 .z250hp-desc { font-size:12px!important; line-height:1.55!important; max-width:310px; margin-top:14px!important; }
 .z250hp-product { min-height:105px; flex:1 1 115px; margin:14px -22px 10px; }
 .z250hp-product img { width:195%; max-width:none!important; transform:translateX(-21%); }
 .z250hp-watermark { font-size:190px; }
 .z250hp-bottom { padding-top:0; }
 .z250hp-actions { flex-direction:column; gap:9px; align-items:stretch; }
 .z250hp-btn { min-width:0; min-height:45px; padding:11px 15px!important; font-size:10px!important; }
 .z250hp-nationals { font-size:9px!important; line-height:1.45!important; margin-top:14px!important; letter-spacing:.11em; }
 .z250hp-nationals span { display:block; margin:3px 0 0; }
}
@media (max-height:680px) and (min-width:721px) {
 .z250hp-modal { min-height:0; padding-top:19px; padding-bottom:16px; }
 .z250hp-content { margin-top:18px; }
 .z250hp-content h2 { font-size:clamp(36px,5.2vw,60px)!important; }
 .z250hp-content h2 em { font-size:clamp(34px,4.8vw,54px)!important; }
 .z250hp-product { min-height:100px; margin-top:9px; margin-bottom:5px; }
 .z250hp-nationals { margin-top:8px!important; }
}
@media (max-width:720px) and (max-height:650px) {
 .z250hp-modal { overflow-y:auto; }
 .z250hp-content { margin-top:20px; }
 .z250hp-product { flex:0 0 110px; margin-top:9px; }
 .z250hp-content h2 { font-size:38px!important; }
 .z250hp-content h2 em { font-size:35px!important; }
}
@media (prefers-reduced-motion:reduce) {
 .z250hp-overlay,.z250hp-modal,.z250hp-btn { transition:none!important; }
}

/* v1.0.1: prevent copy/image overlap in themes with aggressive paragraph styling */
.z250hp-overlay .z250hp-content,
.z250hp-overlay .z250hp-content p,
.z250hp-overlay .z250hp-content h2 { position:relative; z-index:2; }
.z250hp-overlay .z250hp-desc { display:block!important; width:100%!important; clear:both!important; }
@media (min-width:721px) and (max-height:760px) {
 .z250hp-modal { min-height:0; overflow-y:auto; padding-top:20px; padding-bottom:18px; }
 .z250hp-content { margin-top:19px; }
 .z250hp-content h2 { font-size:clamp(40px,5vw,63px)!important; }
 .z250hp-content h2 em { font-size:clamp(38px,4.5vw,56px)!important; }
 .z250hp-desc { margin-top:12px!important; }
 .z250hp-product { flex:0 0 135px; min-height:125px; }
 .z250hp-nationals { margin-top:9px!important; }
}
