/* Shadowspec patio umbrellas — Made in the Shade North Jersey
   Scoped to #ss-umb so nothing leaks into the rest of the site. */
#ss-umb{--p:#450961;--p2:#7d2ea2;--p3:#C9A9E0;--cream:#F2EDE5;--off:#FCFAF7;
  --gray:#6E6F79;--dark:#313239;--line:#E3DFD8;
  font-family:'Lato',Helvetica,Arial,sans-serif;color:#313239;font-size:16px;line-height:1.65;background:#FCFAF7}
#ss-umb *{box-sizing:border-box}
#ss-umb h1,#ss-umb h2,#ss-umb h3,#ss-umb h4{font-family:'Montserrat',Helvetica,Arial,sans-serif;
  font-weight:700;letter-spacing:-.015em;line-height:1.14;margin:0;color:#313239}
#ss-umb p{margin:0}
#ss-umb .inner{max-width:1100px;margin:0 auto;padding:0 52px}
#ss-umb .kicker{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#7d2ea2;display:block;margin-bottom:14px}
#ss-umb h2.big{font-size:38px;max-width:24ch}
#ss-umb .lede{margin-top:15px;font-size:17px;line-height:1.75;color:#6E6F79;max-width:58ch}
#ss-umb .note{font-size:13px;color:#8B8894;margin-top:16px}

#ss-umb .btn{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;padding:16px 30px;border-radius:3px;text-decoration:none;
  background:#7d2ea2;color:#fff;border:2px solid #7d2ea2;cursor:pointer;transition:.15s;text-align:center}
#ss-umb .btn:hover{background:#450961;border-color:#450961;color:#fff}
#ss-umb .btn.dark{background:#450961;border-color:#450961;color:#fff}
#ss-umb .btn.dark:hover{background:#7d2ea2;border-color:#7d2ea2}
#ss-umb .btn.white{background:#fff;color:#450961;border-color:#fff}
#ss-umb .btn.white:hover{background:#F2EDE5;border-color:#F2EDE5;color:#450961}
#ss-umb .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
#ss-umb .btn.ghost:hover{background:#fff;color:#450961;border-color:#fff}
#ss-umb .btn.outline{background:transparent;color:#450961;border-color:#450961}
#ss-umb .btn.outline:hover{background:#450961;color:#fff}
#ss-umb .btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
#ss-umb .hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:620px}
#ss-umb .hero .vid{position:relative;overflow:hidden;background:#1a1420 center/cover no-repeat}
#ss-umb .hero .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#ss-umb .hero .panel{background:#450961;color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:60px 52px;gap:18px}
#ss-umb .hero .panel h1{color:#fff;font-size:43px;line-height:1.08}
#ss-umb .hero .panel p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.7}
#ss-umb .hero .panel .kicker{color:#C9A9E0;margin:0}
#ss-umb .hero .callnote{font-size:14px;color:rgba(255,255,255,.72)}
#ss-umb .hero .callnote a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}

#ss-umb .strip{background:#3A0752;color:#fff;display:flex;flex-wrap:wrap}
#ss-umb .strip .cell{flex:1;min-width:170px;padding:22px 26px;border-left:1px solid rgba(255,255,255,.16)}
#ss-umb .strip .cell:first-child{border-left:0}
#ss-umb .strip b{display:block;font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#fff}
#ss-umb .strip span{font-size:13px;color:#C9A9E0}

/* ---------- sections ---------- */
#ss-umb .msec{padding:76px 0}
#ss-umb .msec.cream{background:#F2EDE5}
#ss-umb .msec.off{background:#FCFAF7}
#ss-umb .msec.white{background:#fff}
#ss-umb .msec.plum{background:#450961;color:#fff}
#ss-umb .msec.plum h2,#ss-umb .msec.plum h3{color:#fff}
#ss-umb .msec.plum .kicker{color:#C9A9E0}
#ss-umb .msec.plum .lede{color:rgba(255,255,255,.8)}
#ss-umb .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* ---------- configurator ---------- */
#ss-umb .cfg{background:#fff;border:1px solid var(--line);padding:36px 38px;margin-top:34px;
  box-shadow:0 20px 54px -34px rgba(69,9,97,.4)}
#ss-umb .qrow{margin-bottom:24px}
#ss-umb .qrow .q{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#6E6F79;margin-bottom:10px}
#ss-umb .qrow .q i{font-style:normal;color:#7d2ea2;margin-right:8px}
#ss-umb .chips{display:flex;gap:8px;flex-wrap:wrap}
#ss-umb .chip{font-family:'Lato',sans-serif;font-size:14px;padding:11px 17px;border-radius:3px;cursor:pointer;
  border:1px solid var(--line);background:#FCFAF7;color:#313239;transition:.15s}
#ss-umb .chip:hover{border-color:#7d2ea2}
#ss-umb .chip.is-on{background:#450961;border-color:#450961;color:#fff;font-weight:700}
#ss-umb .chip:focus-visible,#ss-umb .btn:focus-visible,#ss-umb .linkbtn:focus-visible{outline:2px solid #7d2ea2;outline-offset:2px}
#ss-umb .cfg-out{border-top:1px solid var(--line);padding-top:28px;display:grid;
  grid-template-columns:.95fr 1.05fr;gap:34px;align-items:start}
#ss-umb .rlabel{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#7d2ea2;margin-bottom:8px}
#ss-umb .rname{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;color:#450961;line-height:1.2}
#ss-umb .rwhy{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:#6E6F79}
#ss-umb .rprice{margin:14px 0 0;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:#450961}
#ss-umb .linkbtn{margin-top:18px;font-family:'Lato',sans-serif;font-size:13px;color:#7d2ea2;background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;display:inline-block}
#ss-umb .quote{background:#F2EDE5;padding:26px}
#ss-umb .quote h3{font-size:17px;margin-bottom:14px}
#ss-umb .quote .fields{display:grid;gap:9px}

/* ---------- range cards ---------- */
#ss-umb .range{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
#ss-umb .card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
#ss-umb .card .shot{aspect-ratio:4/3;position:relative;background:#EFEAF3;overflow:hidden}
#ss-umb .card .shot img{width:100%;height:100%;object-fit:cover;display:block}
#ss-umb .card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
#ss-umb .card h3{font-size:19px}
#ss-umb .card .sub{font-size:14px;line-height:1.6;color:#6E6F79;flex:1}
#ss-umb .card .tags{display:flex;flex-wrap:wrap;gap:6px}
#ss-umb .card .tags span{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#450961;background:#F2EDE5;padding:5px 9px;border-radius:3px}
#ss-umb .card .price{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:#450961;
  padding-top:10px;border-top:1px solid var(--line)}
#ss-umb .flag{position:absolute;top:10px;left:10px;font-family:'Montserrat',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#7d2ea2;color:#fff;padding:5px 9px}

/* ---------- tables ---------- */
#ss-umb .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:28px}
#ss-umb table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  font-variant-numeric:tabular-nums;min-width:640px}
#ss-umb th,#ss-umb td{text-align:left;padding:15px 17px;border-bottom:1px solid var(--line)}
#ss-umb thead th{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:#450961;border-bottom:0}
#ss-umb tbody th{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:#313239;white-space:nowrap}
#ss-umb td{color:#6E6F79}

/* ---------- swatches ---------- */
#ss-umb .swatches{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
#ss-umb .sw{width:92px;text-align:center}
#ss-umb .sw i{display:block;width:92px;height:92px;border:1px solid rgba(0,0,0,.09);
  background-size:cover;background-position:center}
#ss-umb .sw span{display:block;font-size:12px;color:#6E6F79;margin-top:8px}

/* ---------- mounting ---------- */
#ss-umb .mounts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
#ss-umb .mount{background:#fff;border:1px solid var(--line);padding:22px}
#ss-umb .mount svg{width:100%;height:auto;display:block;margin-bottom:16px}
#ss-umb .mount h3{font-size:17px;margin-bottom:6px}
#ss-umb .mount p{font-size:14px;line-height:1.6;color:#6E6F79}

/* ---------- comparison ---------- */
#ss-umb .compare{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
#ss-umb .compare .col{background:#fff;border:1px solid var(--line);padding:26px}
#ss-umb .compare .col.is-this{border-color:#450961;border-width:2px}
#ss-umb .compare h3{font-size:19px;margin-bottom:10px}
#ss-umb .compare p{font-size:14.5px;line-height:1.65;color:#6E6F79}
#ss-umb .compare a{color:#7d2ea2}

/* ---------- media blocks ---------- */
#ss-umb .shotbox{aspect-ratio:4/3;background:#EFEAF3;overflow:hidden;position:relative}
#ss-umb .shotbox.square{aspect-ratio:1/1}
#ss-umb .shotbox img{width:100%;height:100%;object-fit:cover;display:block}
#ss-umb .pending{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;
  background:repeating-linear-gradient(135deg,#EDE7F2 0 11px,#E2D8EB 11px 22px)}
#ss-umb .pending span{font-family:'Montserrat',sans-serif;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#5c4b68;background:rgba(252,250,247,.94);padding:7px 10px;line-height:1.4}

/* ---------- faq ---------- */
#ss-umb .faq{border-top:1px solid var(--line);margin-top:26px}
#ss-umb .faq .qa{border-bottom:1px solid var(--line);padding:24px 0}
#ss-umb .faq h3{font-size:18px;margin-bottom:8px}
#ss-umb .faq p{font-size:15px;line-height:1.7;color:#6E6F79;max-width:72ch}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #ss-umb .range{grid-template-columns:repeat(2,1fr)}
  #ss-umb .mounts{grid-template-columns:repeat(2,1fr)}
  #ss-umb .compare{grid-template-columns:1fr}
}
@media (max-width:980px){
  #ss-umb .hero{grid-template-columns:1fr;min-height:0}
  /* phones do not autoplay background video reliably — the poster carries the hero */
  #ss-umb .hero .vid{height:260px;background-image:var(--poster)}
  #ss-umb .hero .vid video{display:none}
  #ss-umb .hero .panel{padding:40px 24px}
  #ss-umb .hero .panel h1{font-size:31px}
  #ss-umb .inner{padding:0 24px}
  #ss-umb h2.big{font-size:28px}
  #ss-umb .msec{padding:52px 0}
  #ss-umb .cfg{padding:24px 22px}
  #ss-umb .cfg-out{grid-template-columns:1fr;gap:24px}
  #ss-umb .split{grid-template-columns:1fr;gap:26px}
  #ss-umb .strip .cell{min-width:50%;border-left:0;padding:16px 24px}
}
@media (max-width:620px){
  #ss-umb .range{grid-template-columns:1fr}
  #ss-umb .mounts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){ #ss-umb *{transition:none !important;animation:none !important} }