/* FX sailquote layout 2026-11-03 — Bill 8:19–8:20 PM: INSIDE the sail box.
   Left = type/battens/reef. Center = sail. Right = LUFF/LEECH/FOOT.
   Short landscape: restore Buy Now above Your order + compact chrome so
   sail box + in-page Buy Now share the first tablet screen (~1024x640). */

/* --- Restore fold Buy Now order (live fxm2.css lost display:flex on .fxm2-opts) --- */
.fxm2-opts{display:flex;flex-direction:column}
.fxm2-opts > #fxbn-box{order:40}
.fxm2-opts > #fxcm-sum{order:50}
.fxm2-opts > .button{order:60}
.fxm2-opts > script,
.fxm2-opts > style{order:99}

/* --- Inside-box grid --- */
.fxr3.fxr5.fxsql-in{
  display:grid;
  grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);
  gap:8px 12px;
  align-items:center;
  width:100%;
  max-width:100%!important;
  margin:0 auto;
  padding:10px 8px!important;
  box-sizing:border-box;
  text-align:left;
  position:relative;
}
.fxr3.fxsql-in > .fxr3-cap{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.fxsql-left{
  min-width:0;
  align-self:center;
  justify-self:end;
  text-align:left;
}
.fxsql-left .fxsql-item{
  position:relative;
  padding:6px 0 6px 11px;
  font:600 12.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#0B2545;
  border-bottom:1px solid #e8eef4;
}
.fxsql-left .fxsql-item:last-child{border-bottom:0}
.fxsql-left .fxsql-item:before{
  content:"";position:absolute;left:0;top:12px;
  width:5px;height:5px;border-radius:50%;background:#1e7e34;
}
.fxsql-mid{
  min-width:0;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.fxsql-mid .fxr5-img,
.fxr3.fxsql-in img.fxr5-img{
  display:block;
  margin:0 auto;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:min(560px,calc(100vh - 200px))!important;
  border-radius:6px;
  cursor:zoom-in;
  object-fit:contain;
}
body.fxm2 .fxm2-pic .fxr3.fxsql-in .fxr5-img,
body.fxm2 .fxm2-pic .fxr3.fxsql-in img.fxr5-img{
  max-height:min(560px,calc(100vh - 200px))!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
}
.fxsql-right{
  min-width:0;
  align-self:center;
  justify-self:start;
}
.fxsql-right .fxr5-dims{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:0!important;
  font:700 14px/1.25 system-ui,-apple-system,Arial,sans-serif;
  color:#0B2545;
}
.fxsql-right .fxr5-m{
  display:block!important;
  margin:0!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums;
  line-height:1.25!important;
}
.fxsql-right .fxr5-m b{
  display:block;
  color:#5c6875;
  font-size:10.5px;
  letter-spacing:.06em;
  margin:0 0 2px;
  line-height:1.2;
}

/* 360 button overlays sail so mid height = sail; stacks center against sail */
.fxsql-mid .s3d-btnw,
.fxsql-mid .s3d-btns,
.fxr3.fxsql-in .s3d-btnw{
  position:absolute!important;
  left:50%!important;
  bottom:8px!important;
  transform:translateX(-50%);
  z-index:2;
  width:auto!important;
  margin:0!important;
}
.fxsql-mid .s3d-badge,
.fxsql-mid .s3d-btn{
  /* keep badge top-right via sail3d defaults */
}

.fxm2-pic > .fxm2-under-sail{margin-top:6px}

/* Laptop short landscape (~1280x800): compact + larger sail */
@media (min-width:900px) and (max-height:820px){
  body.fxm2 #fxh-bar .fxh-brand img{width:40px!important;height:40px!important}
  body.fxm2 #fxh-bar .fxh-motto,
  body.fxm2 #fxh-bar .fxh-tag,
  body.fxm2 #fxh-bar #topnavcontainer{display:none!important}
  body.fxm2 #fxh-bar .fxh-in{padding:4px 12px!important;min-height:0!important;align-items:center}
  body.fxm2 #fxh-bar .fxh-name{font-size:16px!important}
  body.fxm2 #fxh-bar{min-height:0!important}
  body.fxm2 #mhead #mhero-bg{display:none!important}
  body.fxm2 #pagecontainer{padding:2px 14px 8px!important}
  .fxm2-eye{display:none!important}
  .fxm2-top{padding:0 0 2px;margin:0 0 2px}
  .fxm2-top h1{font-size:clamp(16px,2.4vw,20px);margin:0 0 2px}
  .fxm2-pv{font-size:20px}
  .fxm2-p1{display:none!important}
  .fxm2-sale{font-size:10px!important;padding:2px 6px!important}
  .fxm2-meta{margin:2px 0 0;gap:4px 8px}
  .fxm2-meta .fx-shiptime{padding:4px 8px!important;font-size:12px!important}
  .fxm2-other{display:none!important}
  .fxm2-card{padding:5px 7px}
  .fxm2-ct{margin:0 0 3px;font-size:13px}
  .fxm2-slide .fxm2-ct,
  .fxm2-opts .fxm2-ct{display:none}
  .fxm2-slide .fxsp-box{gap:4px;font-size:12px}
  .fxm2-slide .fxsp-box a.fxsp-pick{min-height:30px;padding:4px 8px}
  .fxm2-opts .fxps-trust,
  .fxm2-opts .fx-ct{display:none!important}
  .fxm2-opts form#sail_options{gap:3px 6px}
  .fxm2-wrap select{min-height:32px;padding:4px 30px 4px 8px!important;font-size:12.5px!important}
  .fxm2-opts input.buttonblue,
  .fxm2-opts .button a,
  .fxm2-opts .buttonbuy{min-height:38px;padding:6px 10px!important;font-size:14px!important}
  .fxm2-opts .fxbn-note,
  .fxm2-opts .fxbn-or,
  .fxm2-opts .fxbn-pp,
  .fxm2-opts input.buttonbuy.fxbn-pp-btn{display:none!important}
  .fxm2-pic{padding:4px}
  .fxm2-grid{gap:5px}
  .fxm2-col{gap:5px}
  .fxm2-opts #fxbn-box{margin:2px 0 4px;padding-top:0}
  .fxm2-under-sail{margin-top:4px}
  .fxm2-under-sail .fxcm-opt{min-height:34px;padding:6px 8px;font-size:12px}
  .fxr3.fxr5.fxsql-in{
    grid-template-columns:minmax(100px,1fr) auto minmax(100px,1fr);
    gap:6px 10px;
    padding:6px 4px!important;
  }
  .fxsql-left .fxsql-item{font-size:12px;padding:4px 0 4px 10px}
  .fxsql-right .fxr5-dims{gap:8px;font-size:13px}
  .fxsql-mid .fxr5-img,
  .fxr3.fxsql-in img.fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in .fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in img.fxr5-img{
    max-height:min(420px,calc(100vh - 280px))!important;
  }
}

/* Tablet short landscape (~1024x640): tighter sail so whole box + Buy Now above fold */
@media (min-width:900px) and (max-height:680px){
  body.fxm2 #fxh-bar .fxh-brand img{width:36px!important;height:36px!important}
  .fxsql-mid .fxr5-img,
  .fxr3.fxsql-in img.fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in .fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in img.fxr5-img{
    max-height:min(340px,calc(100vh - 300px))!important;
  }
}

/* Phone / narrow: keep left|sail|right readable */
@media (max-width:900px){
  .fxr3.fxr5.fxsql-in{
    grid-template-columns:minmax(64px,.55fr) minmax(140px,1.8fr) minmax(68px,.55fr);
    gap:6px 8px;
    padding:10px 8px!important;
  }
  .fxsql-left{justify-self:stretch}
  .fxsql-right{justify-self:stretch}
  .fxsql-mid{width:auto}
  .fxsql-left .fxsql-item{font-size:11.5px;padding:5px 0 5px 10px}
  .fxsql-right .fxr5-dims{gap:8px;font-size:13px}
  .fxsql-mid .fxr5-img,
  .fxr3.fxsql-in img.fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in .fxr5-img{
    max-height:min(440px,58vh)!important;
  }
}
@media (max-width:480px){
  .fxr3.fxr5.fxsql-in{
    grid-template-columns:minmax(56px,.55fr) minmax(120px,1.7fr) minmax(60px,.55fr);
    gap:4px 6px;
    padding:8px 6px!important;
  }
  .fxsql-left .fxsql-item{font-size:10.5px;padding:4px 0 4px 9px}
  .fxsql-left .fxsql-item:before{top:10px;width:4px;height:4px}
  .fxsql-right .fxr5-dims{gap:6px;font-size:12px}
  .fxsql-right .fxr5-m b{font-size:9.5px;letter-spacing:.04em}
  .fxsql-mid .fxr5-img,
  .fxr3.fxsql-in img.fxr5-img,
  body.fxm2 .fxm2-pic .fxr3.fxsql-in .fxr5-img{
    max-height:min(360px,48vh)!important;
  }
}

/* Lightbox */
#fxsql-lb{display:none;position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:16px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#fxsql-lb.on{display:flex}
#fxsql-lb .fxsql-lb-box{position:relative;max-width:min(920px,96vw);max-height:92vh;background:#fff;border-radius:12px;padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.45);box-sizing:border-box}
#fxsql-lb .fxsql-lb-box img{display:block;max-width:min(900px,92vw);max-height:min(86vh,1100px);width:auto;height:auto;margin:0 auto;border-radius:6px}
#fxsql-lb .fxsql-lb-x{position:absolute;right:6px;top:6px;width:44px;height:44px;border-radius:22px;border:2px solid #fff;background:#13284f;color:#fff;font:700 24px/40px Arial,sans-serif;text-align:center;cursor:pointer;padding:0;z-index:3;-webkit-appearance:none;appearance:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#fxsql-lb .fxsql-lb-cap{margin:8px 4px 2px;text-align:center;font:600 13px/1.3 system-ui,Arial,sans-serif;color:#1b2733}

/* 2026-11-03 9:29 PM Bill: Different measurements button under the dims stack */
.fxsql-right .fxsql-dmw{margin-top:8px;max-width:100%}
.fxsql-right{min-width:0}
.fxsql-right #fxcm-chg.fxsql-dm span{display:block;max-width:7.5em}
.fxsql-right #fxcm-chg.fxsql-dm{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.2;padding:5px 8px;border:1px solid #1b4f8a;border-radius:6px;background:#fff;color:#1b4f8a;cursor:pointer;white-space:normal;text-align:left;max-width:100%;box-sizing:border-box;width:auto;min-height:0;margin:0}
.fxsql-right #fxcm-chg.fxsql-dm i{font-style:normal;font-size:10px}
@media (max-width:600px){.fxsql-right #fxcm-chg.fxsql-dm{font-size:10px;padding:5px;gap:2px;white-space:normal;text-align:left}.fxsql-right #fxcm-chg.fxsql-dm i{display:none}}
.fxm2-under-sail .fxcm-bar:empty{display:none}

/* 2026-11-03 9:44 PM Bill "go for all mains": .fxrl (fxreal drawing) and #fxq-sail fallback boxes */
.fxrl.fxsql-in,.fxsql-in.fxsql-q{display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,auto) minmax(96px,1fr);gap:8px 12px;align-items:center;width:100%;margin:0 auto;padding:10px 8px;box-sizing:border-box;text-align:left;position:relative}
.fxrl.fxsql-in > .fxrl-cap{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.fxrl.fxsql-in > .fxrl-note{grid-column:1/-1}
.fxrl.fxsql-in > .fxrl-note:empty{display:none}
.fxsql-rl .fxsql-mid{width:auto}
.fxsql-rl .fxrl-svg{display:flex;justify-content:center}
.fxsql-rl .fxrl-svg svg{display:block;width:auto!important;max-width:100%;height:min(560px,calc(100vh - 200px));cursor:zoom-in}
.fxsql-q .fxq-sail{display:inline-block}
.fxsql-right .fxsql-nodims{display:block;max-width:9em;font:600 12px/1.3 system-ui,Arial,sans-serif;color:#5c6875}
@media (min-width:900px) and (max-height:820px){
  .fxrl.fxsql-in,.fxsql-in.fxsql-q{grid-template-columns:minmax(100px,1fr) minmax(0,auto) minmax(100px,1fr);gap:6px 10px;padding:6px 4px}
  .fxsql-rl .fxrl-svg svg{height:min(420px,calc(100vh - 280px))}
}
@media (min-width:900px) and (max-height:680px){
  .fxsql-rl .fxrl-svg svg{height:min(340px,calc(100vh - 300px))}
}
@media (max-width:900px){
  .fxrl.fxsql-in,.fxsql-in.fxsql-q{grid-template-columns:minmax(64px,.55fr) minmax(140px,1.8fr) minmax(68px,.55fr);gap:6px 8px;padding:10px 8px}
  .fxsql-rl .fxrl-svg svg{height:min(440px,58vh)}
}
@media (max-width:480px){
  .fxrl.fxsql-in,.fxsql-in.fxsql-q{grid-template-columns:minmax(56px,.55fr) minmax(120px,1.7fr) minmax(60px,.55fr);gap:4px 6px;padding:8px 6px}
  .fxsql-rl .fxrl-svg svg{height:min(360px,48vh)}
}