/* SmartHome Shop Now. Loads on top of sh-landing.css. Scoped to .shx. */

body.sh-shop{background:var(--white)}
body.sh-shop .shx{padding-top:0}

/* ---------------- header ---------------- */
.shx .shophdr{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--grey-2);padding:.5rem 0}
.shx .shophdr .wrap{gap:1rem}
.shx .shophdr .drk{display:none}
.shx .shophdr .lgt{display:block}
.shx .shophdr .nav a,.shx .shophdr .navlink{color:var(--ink)}
.shx .shophdr .cartbtn{color:var(--ink);position:relative}
.shx .shophdr .burger{color:var(--ink)}

.shx .srch{flex:1 1 auto;max-width:30rem;position:relative;display:flex;align-items:center;
  background:var(--grey-3);border:1px solid var(--grey-2);border-radius:999px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.shx .srch:focus-within{background:#fff;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-dim)}
.shx .srch-i{color:var(--grey);margin-left:1rem;flex:none}
.shx .srch input{flex:1;border:0;background:none;font:inherit;font-size:.9rem;color:var(--ink);
  padding:.72rem .6rem;outline:0;min-width:0}
.shx .srch input::placeholder{color:var(--grey)}
.shx .srch button{background:var(--blue);color:#fff;border-radius:999px;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;margin-right:.32rem;flex:none;transition:background .25s var(--ease)}
.shx .srch button:hover{background:#2d90b6}
.shx .cartn{position:absolute;top:-4px;right:-6px;background:var(--blue);color:#fff;font-size:.62rem;
  font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
@media (max-width:1020px){.shx .srch{order:5;flex-basis:100%;max-width:none;margin-top:.5rem}
  .shx .shophdr .wrap{flex-wrap:wrap}}

/* ---------------- hero ---------------- */
.shx .shero{position:relative;isolation:isolate;min-height:min(78vh,620px);display:flex;align-items:center;
  overflow:hidden;background:var(--navy)}
.shx .shero-bg{position:absolute;inset:0;z-index:-2}
.shx .shero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;transform:scaleX(-1)}
.shx .shero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,17,22,.86) 0%,rgba(11,17,22,.72) 38%,rgba(11,17,22,.28) 66%,rgba(11,17,22,.14) 100%)}
.shx .shero-in{padding:clamp(3.5rem,8vw,6rem) 0}
.shx .shero-copy{max-width:33rem}
.shx .shero h1{color:#fff;font-size:clamp(2.4rem,5.6vw,3.9rem);margin:.7rem 0 1rem}
.shx .shero p{color:rgba(255,255,255,.82);font-size:1.02rem;max-width:30rem}
.shx .shero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.shx .btn-light{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);color:#fff;
  backdrop-filter:blur(6px)}
.shx .btn-light:hover{background:rgba(255,255,255,.2)}
.shx .shero-stats{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.6rem;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.18)}
.shx .shero-stats strong{display:block;color:#fff;font-size:1.5rem;font-weight:700;line-height:1.1}
.shx .shero-stats span{color:rgba(255,255,255,.66);font-size:.78rem}
@media (max-width:700px){.shx .shero::after{background:linear-gradient(180deg,rgba(11,17,22,.72),rgba(11,17,22,.9))}
  .shx .shero-stats{gap:1.4rem}}

/* ---------------- section furniture ---------------- */
.shx .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem;max-width:none;width:100%}
.shx .sec-head > :last-child{margin-left:auto}
.shx .sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:.5rem}
.shx .sec-head p{max-width:26rem;font-size:.92rem}
.shx .seelink{white-space:nowrap;color:var(--blue);font-weight:600;font-size:.88rem}
.shx .seelink:hover{text-decoration:underline}
@media (max-width:760px){.shx .sec-head{flex-direction:column;align-items:flex-start;gap:.8rem}}

/* ---------------- category tiles ---------------- */
.shx .ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.shx .ctile{border:1px solid var(--grey-2);border-radius:18px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.shx .ctile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-line)}
.shx .ctile-i{display:block;aspect-ratio:4/3;background:var(--grey-3);display:grid;place-items:center;overflow:hidden}
.shx .ctile-i img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.shx .ctile:hover .ctile-i img{transform:scale(1.05)}
.shx .ctile-fb{width:52px;height:52px;color:var(--blue)}
.shx .ctile-b{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.shx .ctile-b strong{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.shx .ctile-b em{font-style:normal;color:var(--grey);font-size:.82rem}
.shx .ctile-go{margin-top:.7rem;color:var(--blue);font-weight:600;font-size:.85rem}
@media (max-width:900px){.shx .ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.shx .ctiles{grid-template-columns:1fr}}

.shx .cchips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.shx .cchip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;
  border:1px solid var(--grey-2);background:#fff;font-size:.85rem;font-weight:500;color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.shx .cchip svg{color:var(--blue);flex:none}
.shx .cchip em{font-style:normal;color:var(--grey);font-size:.74rem}
.shx .cchip:hover{border-color:var(--blue);background:var(--blue-dim)}

/* ---------------- product cards ---------------- */
.shx .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.shx .pgrid.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}
@media (max-width:1080px){.shx .pgrid.six{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.shx .pgrid,.shx .pgrid.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.shx .pgrid,.shx .pgrid.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}

.shx .pcard{border:1px solid var(--grey-2);border-radius:16px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.shx .pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-line)}
.shx .pcard-img{position:relative;display:block;aspect-ratio:1;background:#fff;padding:.9rem;overflow:hidden}
.shx .pcard-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s var(--ease)}
.shx .pcard:hover .pcard-img img{transform:scale(1.06)}
.shx .pflag{position:absolute;top:.6rem;left:.6rem;z-index:2;background:var(--ink);color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.24rem .55rem;border-radius:999px}
.shx .pcard-b{padding:0 .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.shx .pcard-c{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.shx .pcard-t{font-size:.9rem;font-weight:500;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.shx .pcard-p{font-size:1rem;font-weight:700;color:var(--ink);margin-top:.15rem;line-height:1.3}
.shx .pcard-p del{color:var(--grey);font-weight:400;font-size:.82rem;margin-right:.35rem}
.shx .pcard-p ins{text-decoration:none}
.shx .pcard-p .woocommerce-Price-currencySymbol{font-size:.72em;font-weight:600;margin-right:.12em}
.shx .pstock{font-size:.74rem;color:#2e7d4f;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}
.shx .pstock::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.shx .pstock.out{color:var(--grey)}
.shx .pbuy{margin-top:auto;padding:.62rem 1rem;font-size:.82rem;justify-content:center}
.shx .pbuy.added{display:none}
.shx .pcard .added_to_cart{margin-top:.45rem;text-align:center;font-size:.78rem;font-weight:600;color:var(--blue);display:block}
.shx .pcard .loading{opacity:.6;pointer-events:none}

/* ---------------- solution tiles ---------------- */
.shx .sols{background:var(--grey-3)}
.shx .solgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.shx .sol{position:relative;border-radius:20px;overflow:hidden;min-height:22rem;display:flex;
  align-items:flex-end;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.shx .sol:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shx .sol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.shx .sol:hover img{transform:scale(1.06)}
.shx .sol::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,17,22,.05) 30%,rgba(11,17,22,.82) 100%)}
.shx .sol-b{padding:1.4rem;color:#fff;display:flex;flex-direction:column;gap:.35rem}
.shx .sol-ic{width:36px;height:36px;border-radius:11px;background:var(--blue);display:grid;place-items:center;
  color:#fff;margin-bottom:.5rem}
.shx .sol-b strong{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.shx .sol-b em{font-style:normal;color:rgba(255,255,255,.78);font-size:.87rem;line-height:1.5}
.shx .sol-go{margin-top:.6rem;font-weight:600;font-size:.85rem;color:#fff}
@media (max-width:900px){.shx .solgrid{grid-template-columns:1fr}.shx .sol{min-height:16rem}}

/* ---------------- trust band ---------------- */
.shx .trust{border-top:1px solid var(--grey-2);border-bottom:1px solid var(--grey-2);background:#fff}
.shx .trust .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding:2.6rem 0}
.shx .tr{display:flex;flex-direction:column;gap:.3rem}
.shx .tr svg{color:var(--blue);margin-bottom:.4rem}
.shx .tr strong{font-size:.98rem;font-weight:600}
.shx .tr span{font-size:.84rem;color:var(--grey);line-height:1.55}
@media (max-width:860px){.shx .trust .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}}
@media (max-width:480px){.shx .trust .wrap{grid-template-columns:1fr}}

/* ---------------- reviews ---------------- */
.shx .rvws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.shx .rvw{margin:0;border:1px solid var(--grey-2);border-radius:16px;padding:1.4rem;background:#fff;
  display:flex;flex-direction:column;gap:.7rem}
.shx .rvw-s{color:#f0a500;letter-spacing:.12em;font-size:.95rem}
.shx .rvw blockquote{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink)}
.shx .rvw figcaption{margin-top:auto;display:flex;flex-direction:column}
.shx .rvw figcaption strong{font-size:.88rem;font-weight:600}
.shx .rvw figcaption span{font-size:.78rem;color:var(--grey)}
@media (max-width:900px){.shx .rvws{grid-template-columns:1fr}}

/* ---------------- guides ---------------- */
.shx .guides{background:var(--grey-3)}
.shx .gguide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.shx .gcard{background:#fff;border:1px solid var(--grey-2);border-radius:16px;padding:1.5rem;
  display:flex;flex-direction:column;gap:.5rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.shx .gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-line)}
.shx .gcard strong{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.shx .gcard span{font-size:.88rem;color:var(--grey);line-height:1.6}
.shx .gcard em{font-style:normal;margin-top:auto;padding-top:.6rem;color:var(--blue);font-weight:600;font-size:.85rem}
@media (max-width:860px){.shx .gguide{grid-template-columns:1fr}}

/* ---------------- cta band ---------------- */
.shx .ctaband{background:var(--navy);color:#fff}
.shx .ctaband .wrap{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;
  padding:clamp(2.6rem,5vw,4rem) 0}
.shx .ctaband h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff}
.shx .ctaband p{color:rgba(255,255,255,.72);font-size:.94rem;max-width:34rem;margin-top:.6rem}
.shx .ctaband-b{display:flex;flex-wrap:wrap;gap:.7rem;flex:none}
@media (max-width:860px){.shx .ctaband .wrap{flex-direction:column;align-items:flex-start}}

.shx .bandlink{margin-top:1rem;color:rgba(255,255,255,.62);font-size:.88rem}
.shx .linkbtn{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:.88rem;padding:0}
.shx .linkbtn:hover{color:var(--blue)}

/* shop page: full width sections */
.shx .shero > .wrap,.shx .sols > .wrap,.shx .trust > .wrap,
.shx .best > .wrap,.shx .onsale > .wrap,.shx .newest > .wrap,.shx .revs > .wrap{width:min(100% - 4rem,1720px)}
.shx .shero-copy{max-width:36rem}

/* five tiles to a row */
.shx .solgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.shx .sol{min-height:20rem;border-radius:18px}
.shx .sol-b{padding:1.15rem 1.1rem}
.shx .sol-ic{width:32px;height:32px;border-radius:10px;margin-bottom:.4rem}
.shx .sol-ic svg{width:17px;height:17px}
.shx .sol-b strong{font-size:1.06rem}
.shx .sol-b em{font-size:.83rem;line-height:1.45}
.shx .sol-go{font-size:.82rem;margin-top:.5rem}
@media (max-width:1400px){.shx .solgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.shx .solgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.shx .sol{min-height:16rem}}
@media (max-width:560px){.shx .solgrid{grid-template-columns:1fr}}

/* the product grid gets more room at full width */
@media (min-width:1400px){.shx .pgrid.six{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* the landing caps .sec.hand headers at 44rem for readable prose; here the header
   is a flex row that has to span the section so the link sits at the right edge. */
.shx .sec.hand .sec-head{max-width:none;width:100%}

/* keep the five tile captions on the same baseline */
.shx .sol-b em{min-height:2.9em}

/* trust bar: dark, four facts */
.shx .trust{background:var(--navy);border:0}
.shx .trust .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;padding:3rem 0}
.shx .trust .tr{gap:.4rem}
.shx .trust .tr strong{color:#fff;font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.shx .trust .tr .tr-s{color:rgba(255,255,255,.58);font-size:.86rem;line-height:1.55}

.shx .tr-fig{display:flex;align-items:baseline;color:var(--blue);font-weight:700;
  font-size:2.5rem;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem;
  font-variant-numeric:tabular-nums}
.shx .tr-fig i{font-style:normal;font-size:1.5rem;margin-left:.1rem}

.shx .tr-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:.55rem}
.shx .tr-tick{background:rgba(56,164,204,.16);color:var(--blue)}
.shx .tr-wa{background:rgba(37,211,102,.16);color:#25D366}
.shx .tr-tick svg{animation:shTick 2.2s var(--ease) infinite}
@keyframes shTick{0%,62%,100%{transform:scale(1);opacity:1}
  72%{transform:scale(1.22);opacity:.85}82%{transform:scale(.96)}90%{transform:scale(1.06)}}
.shx .tr-tick::after{content:"";position:absolute;width:44px;height:44px;border-radius:13px;
  border:1px solid var(--blue);opacity:0;animation:shRing 2.2s var(--ease) infinite}
.shx .tr-tick{position:relative}
@keyframes shRing{0%,62%{transform:scale(1);opacity:.55}88%,100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.shx .tr-tick svg,.shx .tr-tick::after{animation:none}}

.shx .tr-flag{font-size:2.35rem;line-height:1;margin-bottom:.45rem}
@media (max-width:900px){.shx .trust .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (max-width:520px){.shx .trust .wrap{grid-template-columns:1fr}}

/* ten products in a single row */
.shx .pgrid.ten{grid-template-columns:repeat(10,minmax(0,1fr));gap:.6rem}
.shx .pgrid.ten .pcard-img{padding:.6rem}
.shx .pgrid.ten .pcard-b{padding:0 .65rem .8rem;gap:.22rem}
.shx .pgrid.ten .pcard-c{font-size:.58rem;letter-spacing:.1em}
.shx .pgrid.ten .pcard-t{font-size:.78rem;min-height:2.3em}
.shx .pgrid.ten .pcard-p{font-size:.85rem}
.shx .pgrid.ten .pcard-p .woocommerce-Price-currencySymbol{font-size:.68em}
.shx .pgrid.ten .pstock{font-size:.66rem}
.shx .pgrid.ten .pbuy{padding:.5rem .5rem;font-size:.72rem;gap:.35rem}
.shx .pgrid.ten .pbuy svg{width:13px;height:13px}
@media (max-width:1500px){.shx .pgrid.ten{grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}}
@media (max-width:1100px){.shx .pgrid.ten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.shx .pgrid.ten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.shx .pgrid.ten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* trust bar: one baseline for the four leads.
   `.shx .tr span` (0,2,1) out-specifies a bare class, so the lead styles
   have to name the element too. */
.shx .trust .tr > :first-child{height:52px;min-height:52px;max-height:52px;display:flex;
  align-items:center;line-height:1;overflow:visible;margin-bottom:.55rem;flex:none;box-sizing:border-box}
.shx .trust .tr span.tr-flag{font-size:2.5rem;line-height:1;margin-bottom:0}
.shx .trust .tr span.tr-fig{font-size:2.5rem;margin-bottom:0}
.shx .trust .tr span.tr-ic{width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:0}

/* .trnum is a span too, so `.shx .tr span` shrinks the digits back down */
.shx .trust .tr span.trnum{font-size:inherit;color:inherit;line-height:1}
.shx .trust .tr .tr-fig i{font-size:.6em;color:inherit}

/* hero is copy only now */
.shx .shero{min-height:min(56vh,460px)}
.shx .shero-in{padding:clamp(3rem,6vw,4.5rem) 0}
.shx .shero p{margin-bottom:0}


/* out of stock treatment */
.shx .pcard-img{position:relative}
.shx .poos{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(14,20,24,.72);color:#fff;text-align:center;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.45rem .4rem;backdrop-filter:blur(2px);pointer-events:none}
.shx .pcard-out .pcard-img img{opacity:.62;filter:saturate(.55)}
.shx .pcard-out:hover .pcard-img img{transform:none}
.shx a.pbuy-out,.shx .pcard-out a.pbuy{background:var(--grey-3);border:1px solid var(--grey-2);
  color:var(--grey);cursor:default}
.shx a.pbuy-out:hover,.shx .pcard-out a.pbuy:hover{background:var(--grey-3);color:var(--grey);
  transform:none;border-color:var(--grey-2)}
.shx .pcard-out:hover{transform:none;box-shadow:none;border-color:var(--grey-2)}
@media (max-width:640px){.shx .poos{font-size:.62rem;letter-spacing:.1em}}

/* the storefront sections were breathing a little too hard */
body.sh-shop .shx .sec{padding:3.4rem 0}
body.sh-shop .shx .sec.hand{padding:3.4rem 0}
body.sh-shop .shx .sec-head{margin-bottom:1.7rem}
body.sh-shop .shx .trust .wrap{padding:2.4rem 0}
@media (max-width:880px){body.sh-shop .shx .sec,body.sh-shop .shx .sec.hand{padding:2.4rem 0}}

/* dark shop header, matching the footer */
.shx .shophdr{background:rgba(11,17,22,.96);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.shx .shophdr .drk{display:block}
.shx .shophdr .lgt{display:none}
.shx .shophdr .nav a{color:#fff;opacity:.85}
.shx .shophdr .nav a:hover{opacity:1}
.shx .shophdr button.navlink{color:#fff;opacity:.85}
.shx .shophdr button.navlink:hover{opacity:1}
.shx .shophdr .nav a.navcta{color:#fff;opacity:1}
.shx .shophdr a.cartbtn{color:#fff;border-color:rgba(255,255,255,.28)}
.shx .shophdr .burger{color:#fff;border-color:rgba(255,255,255,.28)}
/* search field has to sit on the dark bar */
.shx .shophdr .srch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.shx .shophdr .srch:focus-within{background:rgba(255,255,255,.14);border-color:var(--blue-line);
  box-shadow:0 0 0 3px rgba(56,164,204,.22)}
.shx .shophdr .srch-i{color:rgba(255,255,255,.55)}
.shx .shophdr .srch input{color:#fff}
.shx .shophdr .srch input::placeholder{color:rgba(255,255,255,.5)}

/* mobile header fixes */
/* The mobile nav panel is z-index:-1 inside the header wrap, so it paints BEHIND
   its siblings. The search field wraps onto a second row and was therefore
   showing straight through the open menu. Take it out while the menu is open. */
.shx .hdr.menuopen .srch,.shx .hdr.navopen .srch{display:none}
/* and the header goes solid navy behind the open panel */
.shx .hdr.navopen{background:var(--navy)}

/* slightly darker card outline, everywhere */
.shx .pcard{border-color:#d6dbdf}
.shx .pcard:hover{border-color:var(--blue-line)}
.shx .pcard-out:hover{border-color:#d6dbdf}

@media (max-width:1020px){
  /* the search bar ran the full width of the phone; pull it in and centre it */
  .shx .shophdr .srch{max-width:24rem;margin-left:auto;margin-right:auto;margin-top:.65rem}
}
@media (max-width:880px){
  /* logo was sitting hard against the top-left corner */
  .shx .hdr{padding:.95rem 0}
  .shx .hdr>.wrap{width:min(100% - 2.5rem,1400px)}
}

/* see sh-landing.css: backdrop-filter traps fixed-position children */
.shx .shophdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--navy)}

/* out of stock: much lighter. The dark bar and heavy desaturation were pulling
   the eye to the things you cannot buy. */
.shx .poos{background:rgba(240,242,244,.94);color:#6b7681;
  border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);
  backdrop-filter:none;font-weight:600}
.shx .pcard-out .pcard-img img{opacity:.9;filter:saturate(.9)}

/* Out-of-stock cards stay clickable: the button is a link to the product page,
   so it must look and behave like one. Plus a 5% white veil over the whole
   card so it recedes without disappearing. */
.shx .pcard-out{position:relative}
.shx .pcard-out::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:rgba(255,255,255,.10);border-radius:inherit}
.shx a.pbuy-out,.shx .pcard-out a.pbuy{background:var(--grey-3);border:1px solid var(--grey-2);
  color:var(--grey);cursor:pointer;position:relative;z-index:5}
.shx a.pbuy-out:hover,.shx .pcard-out a.pbuy:hover{background:#e7ebee;color:var(--ink);
  border-color:#c3cbd1;transform:none}

/* .shx a{color:inherit} out-specifies .btn-blue, so the element has to be named. */
.shx a.btn-blue,.shx a.pbuy.btn-blue{background:var(--blue);color:#fff;border:1px solid transparent}
.shx a.btn-blue:hover,.shx a.pbuy.btn-blue:hover{background:#2d90b6;color:#fff;border-color:transparent}