/* SmartHome product page -- Design C, spec-forward mosaic.
   Loads after sh-product.css and replaces its page layout. The gallery, buy
   box, add-to-cart form, WhatsApp button, assurances and lightbox all still
   come from sh-product.css; only the frame around them changed.

   Same two traps as everywhere else: .shx button{background:none;color:inherit}
   and .shx a{color:inherit} out-specify a bare class, so every button and link
   rule names its element. */

/* ---------------- hero ---------------- */
/* The old layout put the gallery in a 1fr column and then capped the gallery
   inside it, which stranded ~260px of dead space between the photo and the buy
   card. Both columns are now sized to what they hold and the gallery fills its
   own column, so the gap is only the column gap. */
.shx .pdp > .wrap{width:min(100% - 4rem,1200px)}
.shx .pdp-hero{display:grid;grid-template-columns:minmax(0,1fr) 31rem;
  column-gap:2.8rem;row-gap:2rem;align-items:start;padding-bottom:3.2rem}
.shx .pdp-media,.shx .pdp-buy{grid-area:auto;min-width:0}
.shx .pgal{max-width:none}
.shx .pgal-stage{max-height:none}
/* one row, so there is nowhere to travel */
.shx .pbuybox{position:static;padding:1.8rem 1.8rem 1.6rem}
body.admin-bar .shx .pbuybox{top:auto}
.shx h1.pdp-name{font-size:clamp(1.5rem,2.3vw,1.95rem)}
.shx .pdp-price{font-size:2rem}

/* ---------------- headline figures ---------------- */
.shx .pdp-band{background:var(--navy);padding:2.3rem 0;margin-bottom:3.2rem}
.shx .pdp-band > .wrap{width:min(100% - 4rem,1200px);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4rem}
.shx .pdp-band .hl strong{display:block;color:#fff;font-size:1.38rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.18}
.shx .pdp-band .hl span{display:block;color:rgba(255,255,255,.55);font-size:.76rem;
  line-height:1.45;margin-top:.4rem}

/* ---------------- mosaic ---------------- */
.shx .pdp-mosaic{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:1.6rem;align-items:start;padding-bottom:1rem}
.shx .pdp-cola,.shx .pdp-colb{min-width:0}
.shx .pcard{border:1px solid #d6dbdf;border-radius:22px;background:#fff;
  padding:1.6rem 1.6rem 1.4rem}
.shx .pcard + .pcard{margin-top:1.6rem}
.shx .pcard.tint{background:var(--grey-3);border-color:var(--grey-2)}
.shx .pcard h2{font-size:1.16rem;letter-spacing:-.02em;padding-bottom:.85rem;
  border-bottom:1px solid var(--grey-2);margin-bottom:1.05rem}

/* specifications */
.shx table.pspec{width:100%;border-collapse:collapse}
.shx table.pspec th{width:41%;text-align:left;font-weight:500;font-size:.85rem;color:var(--grey);
  padding:.72rem .9rem .72rem 0;border-bottom:1px solid var(--grey-2);vertical-align:top}
.shx table.pspec td{font-size:.89rem;font-weight:600;color:var(--ink);
  padding:.72rem 0;border-bottom:1px solid var(--grey-2);vertical-align:top}
.shx table.pspec tr:last-child th,.shx table.pspec tr:last-child td{border-bottom:0}

/* what's in the box */
.shx ul.pbox{list-style:none;margin:0;padding:0}
.shx ul.pbox li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.55;
  padding:.6rem 0;border-bottom:1px solid var(--grey-2)}
.shx ul.pbox li:last-child{border-bottom:0}
.shx ul.pbox .tk{color:var(--blue);font-weight:700;flex:none}
.shx .pundef{font-size:.95rem;font-weight:600;color:var(--ink);margin:0 0 .5rem}
.shx .pundef-n{font-size:.83rem;color:var(--grey);line-height:1.65;margin:0}
.shx .pundef-n a{color:var(--blue);font-weight:600}
.shx .pundef-n a:hover{text-decoration:underline}

/* questions */
.shx .pqa details.qa{border-bottom:1px solid var(--grey-2)}
.shx .pqa details.qa:last-child{border-bottom:0}
.shx .pqa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:.85rem 0;font-size:.93rem;font-weight:600;color:var(--ink)}
.shx .pqa summary::-webkit-details-marker{display:none}
.shx .pqa summary::after{content:"+";color:var(--blue);font-size:1.25rem;font-weight:400;
  line-height:1;flex:none}
.shx .pqa details.qa[open] summary::after{content:"\2212"}
.shx .pqa details.qa p{font-size:.85rem;color:#5a636a;line-height:1.7;margin:0;padding:0 0 1rem}
.shx .pdp-ask{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--grey-2);
  font-size:.83rem;color:var(--grey);line-height:1.6;max-width:none}

/* about this product, inside a card now */
.shx .pcard .pdp-copy{max-width:none}
.shx .pcard .pdp-source{margin-top:1rem}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .shx .pdp-hero{grid-template-columns:minmax(0,1fr) 26rem;column-gap:2.2rem}
  .shx .pdp-band > .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
}
@media (max-width:980px){
  .shx .pdp > .wrap,.shx .pdp-band > .wrap{width:min(100% - 2.5rem,1240px)}
  .shx .pdp-hero{grid-template-columns:minmax(0,1fr);padding-bottom:2.2rem}
  .shx .pdp-mosaic{grid-template-columns:minmax(0,1fr)}
  .shx .pdp-colb{margin-top:0}
  .shx .pdp-colb .pcard:first-child{margin-top:1.6rem}
}
@media (max-width:640px){
  .shx .pbuybox{padding:1.3rem 1.15rem 1.2rem;border-radius:20px}
  .shx .pcard{padding:1.25rem 1.15rem 1.1rem;border-radius:18px}
  .shx .pcard h2{font-size:1.05rem}
  .shx .pdp-band{padding:1.8rem 0;margin-bottom:2.2rem}
  .shx .pdp-band > .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
  .shx .pdp-band .hl strong{font-size:1.18rem}
  .shx table.pspec th{width:46%;font-size:.79rem}
  .shx table.pspec td{font-size:.84rem}
}

/* The specifications card runs much longer than the two beside it, which left
   the right half of the mosaic empty. Let that column ride down with the read.
   align-self:start is what gives sticky room to travel inside its grid area. */
@media (min-width:981px){
  .shx .pdp-colb{position:sticky;top:7rem;align-self:start}
  body.admin-bar .shx .pdp-colb{top:9rem}
}

/* ---------------- payment methods, inside the payment question ---------------- */
.shx .qa-rich{padding:0 0 1.1rem}
.shx ul.paylist{list-style:none;margin:0 0 1rem;padding:0}
.shx ul.paylist li{position:relative;padding:0 0 .6rem 1rem;font-size:.85rem;line-height:1.65;color:#5a636a}
.shx ul.paylist li:last-child{padding-bottom:0}
.shx ul.paylist li::before{content:"";position:absolute;left:0;top:.62rem;width:5px;height:5px;
  border-radius:999px;background:var(--blue)}
.shx ul.paylist strong{color:var(--ink);font-weight:600}
.shx ul.paylist a{color:var(--blue);font-weight:600}
.shx ul.paylist a:hover{text-decoration:underline}

.shx .paywrap{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--grey-2)}
.shx ul.paylogos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.shx ul.paylogos .pl{width:2.9rem;height:1.95rem;border:1px solid var(--grey-2);border-radius:6px;
  background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.shx ul.paylogos .pl svg{width:100%;height:100%;display:block}
.shx ul.paylogos .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shx .pl-w{font-size:.56rem;font-weight:800;letter-spacing:.02em;line-height:1;
  display:inline-flex;align-items:center;gap:.1rem}
.shx .pl-w-visa{color:#1434CB;font-style:italic;font-size:.62rem;letter-spacing:.03em}
.shx .pl-amex{background:#006FCF;border-color:#006FCF}
.shx .pl-w-amex{color:#fff;font-size:.55rem}
.shx .pl-w-disc{color:#4D4D4D}
.shx .pl-w-disc i{width:.42rem;height:.42rem;border-radius:999px;background:#F76B1C;
  display:inline-block;margin-left:.06rem}
.shx .pl-w-ap{color:#111;font-size:.55rem;font-weight:600}
.shx .pl-w-ap svg{width:.5rem;height:.62rem;display:inline-block;margin-right:.06rem}
.shx .pl-w-gp b{font-weight:700;font-size:.6rem}
.shx .pl-w-gp .g1{color:#4285F4}.shx .pl-w-gp .g2{color:#EA4335}
.shx .pl-w-gp .g3{color:#FBBC04}.shx .pl-w-gp .g4{color:#34A853}
.shx .paysoon{margin:.6rem 0 0;font-size:.74rem;color:#8a6d3b;background:rgba(138,109,59,.1);
  border-radius:8px;padding:.4rem .6rem;display:inline-block}

/* Badge-row corrections.
   - .shx ul.paylogos .pl{background:#fff} is (0,3,2) and was beating the Amex
     fill at (0,2,0), so the chip rendered white on white.
   - .shx .pqa details.qa p{padding:0 0 1rem} is (0,4,3) and out-specified the
     .paysoon chip, which is why its amber box hung a whole line below the text.
   - Nine badges at 2.9rem overflowed the card and dropped Google Pay onto a
     row of its own. */
.shx ul.paylogos{gap:.34rem}
.shx ul.paylogos .pl{width:2.55rem;height:1.8rem}
.shx ul.paylogos .pl-amex{background:#006FCF;border-color:#006FCF}
.shx ul.paylogos .pl-visa{border-color:#dfe3e6}
.shx .qa-rich .paysoon{padding:.42rem .7rem;line-height:1.4;margin:.65rem 0 0}
.shx .qa-rich p{padding:0}
@media (max-width:1180px){
  .shx ul.paylogos .pl{width:2.35rem;height:1.7rem}
}

/* Third go at the same fight. .shx .pqa details.qa p is (0,3,2); .qa-rich p at
   (0,2,1) and .qa-rich .paysoon at (0,3,1) both lost to it, which is why the
   amber chip kept hanging a line below its own text. Name the whole chain. */
.shx .pqa details.qa .qa-rich p{padding:0}
.shx .pqa details.qa .qa-rich p.paysoon{padding:.42rem .7rem;line-height:1.4;margin:.65rem 0 0}

/* The Questions card is tinted now, and a 10% amber wash on a grey card is
   barely a caveat at all. Give the chip its own edge so it still reads. */
.shx .pqa details.qa .qa-rich p.paysoon{background:rgba(212,160,23,.16);
  border:1px solid rgba(212,160,23,.34);color:#7a5f22;font-weight:500}

/* ---------------- payment, in the buy panel ----------------
   The payment answer used to be the last question at the bottom of the page.
   It now sits under the assurances, beside the price, which is where the
   question actually gets asked. The wrapper carries .pqa as well as .pdp-pay
   so every rule that already styles a question -- the +/- marker, the hairline,
   the paysoon chip and its three specificity fixes above -- applies here
   without being written a second time. */
.shx .pdp-pay{margin:1.15rem 0 0;padding:0 .95rem;background:var(--grey-3);
  border:1px solid var(--grey-2);border-radius:10px}
.shx .pdp-pay details.qa{border-bottom:0}
.shx .pdp-pay summary{padding:.85rem 0}
.shx .pdp-pay ul.paylogos .pl{width:2.4rem;height:1.7rem;background:#fff}


/* ---------------- sticky buy bar ----------------
   Appears once the buy panel has scrolled off the top. Deliberately slim: it
   is a way back to the button, not a second product page. Sits below the
   scrim (80), the modal (85) and the lightbox (120) so it never covers them. */
.shx .pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:rgba(255,255,255,.97);border-top:1px solid var(--grey-2);
  box-shadow:0 -12px 34px -26px rgba(0,0,0,.6);
  -webkit-backdrop-filter:saturate(1.5) blur(8px);backdrop-filter:saturate(1.5) blur(8px);
  transform:translateY(105%);visibility:hidden;
  transition:transform .28s var(--ease),visibility .28s var(--ease)}
.shx .pdp-sticky.on{transform:none;visibility:visible}
.shx .pdp-sticky > .wrap{width:min(100% - 2rem,1400px);
  display:flex;align-items:center;gap:.85rem;
  padding:.55rem 0 calc(.55rem + env(safe-area-inset-bottom,0px))}

.shx img.ps-thumb{width:44px;height:44px;flex:0 0 auto;object-fit:contain;
  background:#fff;border:1px solid var(--grey-2);border-radius:10px;padding:3px}
.shx .ps-txt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:.08rem}
.shx .ps-name{font-size:.85rem;font-weight:600;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shx .ps-price{font-size:.95rem;font-weight:700;line-height:1.15;color:var(--blue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shx .ps-price del{opacity:.45;font-weight:500;font-size:.78rem;margin-right:.35rem}
.shx .ps-price ins{text-decoration:none}

/* .shx button{background:none} and .shx a{color:inherit} both beat a bare
   class, so these name their element. */
.shx .pdp-sticky button.ps-cta,
.shx .pdp-sticky a.ps-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.66rem 1.3rem;border-radius:999px;white-space:nowrap;
  font-size:.85rem;font-weight:600;line-height:1;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  transition:filter .2s var(--ease)}
.shx .pdp-sticky button.ps-cta:hover,
.shx .pdp-sticky a.ps-cta:hover{filter:brightness(1.08)}
/* Same WhatsApp green the rest of the site uses. */\n.shx .pdp-sticky a.ps-cta.wa{background:#25D366;border-color:#25D366}

/* The WhatsApp float sits bottom right and would land on the bar. */
body.sh-pdp.pdp-stuck .qlwapp__container{bottom:5.4rem !important}

@media (max-width:560px){
  .shx .pdp-sticky > .wrap{gap:.65rem}
  .shx img.ps-thumb{width:40px;height:40px}
  .shx .ps-name{font-size:.78rem}
  .shx .ps-price{font-size:.88rem}
  .shx .pdp-sticky button.ps-cta,
  .shx .pdp-sticky a.ps-cta{padding:.62rem 1.05rem;font-size:.8rem}
}
@media print{.shx .pdp-sticky{display:none}}


/* ---------------- lightbox controls ----------------
   The arrows were text glyphs sitting in the outer columns of a 1fr grid,
   which parked them at the far edges of a wide screen where they read as page
   furniture rather than controls. On a wide screen the three items now centre
   as a group so the arrows hug the photo; on a phone there is no room for
   that, so they overlay its edges instead. */
.shx .plightbox{display:flex;align-items:center;justify-content:center;
  gap:clamp(.4rem,2vw,1.5rem)}
/* margin:0 auto in the base sheet eats the free space on a flex row and
   shoves the arrows back out to the screen edges. */
.shx .plightbox img{flex:0 1 auto;max-height:82vh;margin:0}
.shx button.plb-nav{flex:0 0 auto;width:3.4rem;height:3.4rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.shx button.plb-nav:hover{background:rgba(255,255,255,.32)}
.shx button.plb-nav svg{display:block}
.shx .plb-count{position:absolute;left:0;right:0;bottom:clamp(.9rem,3vw,1.8rem);
  text-align:center;color:rgba(255,255,255,.78);
  font-size:.8rem;font-weight:600;letter-spacing:.12em}
.shx .plightbox.single button.plb-nav,
.shx .plightbox.single .plb-count{display:none}

@media (max-width:700px){
  .shx .plightbox{display:grid;grid-template-columns:1fr;place-items:center}
  .shx .plightbox img{max-height:76vh}
  .shx button.plb-nav{position:absolute;top:50%;transform:translateY(-50%);
    width:2.9rem;height:2.9rem}
  .shx button.plb-nav.prev{left:.5rem}
  .shx button.plb-nav.next{right:.5rem}
}
/* The lightbox backdrop is 94% opaque, so the bar ghosts through it. */
body.lb-open .shx .pdp-sticky{visibility:hidden}

/* ---------------- stage arrows ----------------
   Matches the zoom button rather than the lightbox arrows: this sits on a white
   stage, so it is dark on white, not white on dark. Above .pgal-flag (3) so the
   out-of-stock band cannot swallow it. */
.shx button.pgal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:2.7rem;height:2.7rem;border-radius:999px;display:grid;place-items:center;
  background:#fff;color:var(--ink);border:1px solid var(--grey-2);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.3);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.shx button.pgal-nav:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.shx button.pgal-nav svg{display:block}
.shx button.pgal-nav.prev{left:.85rem}
.shx button.pgal-nav.next{right:.85rem}

/* On a pointer device they fade back until the stage is hovered, so they do not
   sit on top of the product photo the whole time. Touch has no hover, so there
   they stay put. */
@media (hover:hover){
  .shx button.pgal-nav{opacity:.55}
  .shx .pgal:hover button.pgal-nav,
  .shx button.pgal-nav:focus-visible{opacity:1}
}
@media (max-width:560px){
  .shx button.pgal-nav{width:2.4rem;height:2.4rem}
  .shx button.pgal-nav.prev{left:.5rem}
  .shx button.pgal-nav.next{right:.5rem}
}