/* SmartHome product page. Loads on top of sh-landing.css + sh-shop.css.
   Scoped to .shx.

   Two specificity traps live in the base sheet and both bite here:
     .shx button{background:none;color:inherit}  beats any bare class
     .shx a{color:inherit}                       beats any bare class
   So every button and link rule below names its element. */

body.sh-pdp{background:var(--white)}

/* ---------------- page frame ---------------- */
.shx .pdp > .wrap{width:min(100% - 4rem,1400px)}
.shx .pdp{padding:1.4rem 0 0}

.shx .pdp .crumbs{margin-bottom:1.5rem}

.shx .pdp-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 25.5rem;
  grid-template-areas:"media buy" "info buy";
  column-gap:3.2rem;row-gap:3rem;
  padding-bottom:4rem}
.shx .pdp-media{grid-area:media;min-width:0}
.shx .pdp-right{grid-area:buy;min-width:0}
.shx .pdp-info{grid-area:info;min-width:0}

/* The buy panel rides along. Note the grid item is NOT align-items:start --
   sticky needs a tall containing block to travel inside. */
.shx .pbuybox{position:sticky;top:7rem}
body.admin-bar .shx .pbuybox{top:9rem}

/* ---------------- gallery ---------------- */
.shx .pgal-stage{position:relative;background:#fff;border:1px solid #d6dbdf;border-radius:22px;
  aspect-ratio:1;display:grid;place-items:center;padding:clamp(1.5rem,4vw,3.4rem);overflow:hidden;
  max-height:38rem}
.shx .pgal-stage img{width:100%;height:100%;object-fit:contain;
  transition:transform .5s var(--ease)}
.shx .pgal-stage:hover img{transform:scale(1.05)}
.shx .pgal-stage .pflag{top:1rem;left:1rem}

.shx .pgal-flag{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(240,242,244,.94);color:#6b7681;text-align:center;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .4rem;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);
  pointer-events:none}

.shx button.pgal-zoom{position:absolute;right:1rem;bottom:1rem;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)}
.shx button.pgal-zoom:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.shx .pgal-thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.85rem}
.shx button.pthumb{width:5.1rem;height:5.1rem;border-radius:13px;overflow:hidden;padding:.4rem;
  background:#fff;border:1px solid #d6dbdf;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.shx button.pthumb img{width:100%;height:100%;object-fit:contain}
.shx button.pthumb:hover{border-color:var(--blue-line)}
.shx button.pthumb.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-dim)}

/* ---------------- lightbox ---------------- */
.shx .plightbox{position:fixed;inset:0;z-index:120;background:rgba(6,10,13,.94);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:clamp(1rem,4vw,3rem)}
.shx .plightbox[hidden]{display:none}
.shx .plightbox img{max-width:100%;max-height:86vh;width:auto;height:auto;margin:0 auto;object-fit:contain}
.shx button.plb-close{position:absolute;top:1rem;right:1.3rem;color:#fff;font-size:2.4rem;line-height:1;
  opacity:.75;transition:opacity .2s var(--ease)}
.shx button.plb-close:hover{opacity:1}
.shx button.plb-nav{width:3.2rem;height:3.2rem;border-radius:999px;color:#fff;font-size:2rem;line-height:1;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:background .2s var(--ease)}
.shx button.plb-nav:hover{background:rgba(255,255,255,.22)}
.shx .plightbox.single button.plb-nav{visibility:hidden}

/* ---------------- buy panel ---------------- */
.shx .pbuybox{border:1px solid #d6dbdf;border-radius:24px;background:#fff;
  padding:1.7rem 1.6rem 1.5rem;box-shadow:0 20px 50px -34px rgba(0,0,0,.4)}

.shx a.pdp-cat{display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.shx a.pdp-cat .mi{width:28px;height:28px;border-radius:9px;background:var(--blue-dim);
  display:grid;place-items:center;flex:none;transition:background .25s var(--ease),color .25s var(--ease)}
.shx a.pdp-cat .mi svg{width:16px;height:16px}
.shx a.pdp-cat:hover .mi{background:var(--blue);color:#fff}

.shx h1.pdp-name{font-size:clamp(1.4rem,2.1vw,1.78rem);line-height:1.22;letter-spacing:-.02em;
  margin:.75rem 0 .5rem}

.shx .pdp-sku{font-size:.78rem;color:var(--grey)}
.shx .pdp-sku strong{color:var(--ink);font-weight:600;letter-spacing:.02em}

.shx .pdp-price{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:.9rem 0 .7rem}
.shx .pdp-price .woocommerce-Price-currencySymbol{font-size:.6em;font-weight:600;margin-right:.15em;
  vertical-align:.12em;color:var(--grey)}
.shx .pdp-price del{color:var(--grey);font-weight:400;font-size:.62em;margin-right:.4rem}
.shx .pdp-price ins{text-decoration:none}

.shx .pdp-stock{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;
  padding:.34rem .8rem;border-radius:999px}
.shx .pdp-stock::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.shx .pdp-stock.in{color:#2e7d4f;background:rgba(46,125,79,.1)}
.shx .pdp-stock.out{color:#8a6d3b;background:rgba(138,109,59,.1)}

/* ---------------- WooCommerce add-to-cart form, restyled ---------------- */
.shx .pdp-cart{margin-top:1.25rem}
.shx .pdp-cart form.cart{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;margin:0}
.shx .pdp-cart .quantity{display:inline-flex;align-items:stretch;flex:none;
  border:1px solid var(--grey-2);border-radius:999px;overflow:hidden;background:#fff;height:3.15rem}
.shx .pdp-cart .quantity label{display:none}
.shx .pdp-cart .quantity input.qty{width:3rem;text-align:center;border:0;background:none;outline:0;
  font:inherit;font-size:.95rem;font-weight:600;color:var(--ink);padding:0;-moz-appearance:textfield}
.shx .pdp-cart .quantity input.qty::-webkit-outer-spin-button,
.shx .pdp-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shx button.qtybtn{width:2.5rem;display:grid;place-items:center;color:var(--grey);font-size:1.15rem;
  line-height:1;transition:color .2s var(--ease),background .2s var(--ease)}
.shx button.qtybtn:hover{color:var(--ink);background:var(--grey-3)}

.shx .pdp-cart button.single_add_to_cart_button,
.shx .pdp-cart button.button.alt{flex:1 1 12rem;min-height:3.15rem;padding:.6rem 1.4rem;
  border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:.95rem;
  border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.shx .pdp-cart button.single_add_to_cart_button:hover{background:#2d90b6;transform:translateY(-1px)}
.shx .pdp-cart button.single_add_to_cart_button.disabled,
.shx .pdp-cart button.single_add_to_cart_button:disabled{background:var(--grey-3);color:var(--grey);
  border-color:var(--grey-2);cursor:not-allowed;transform:none}

/* variations */
.shx .pdp-cart table.variations{width:100%;border-collapse:collapse;margin:0 0 .9rem}
.shx .pdp-cart table.variations tr{display:block;margin-bottom:.7rem}
.shx .pdp-cart table.variations th,
.shx .pdp-cart table.variations td{display:block;padding:0;text-align:left;border:0}
.shx .pdp-cart table.variations th.label label{font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.35rem}
.shx .pdp-cart table.variations select{width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  padding:.72rem 2.2rem .72rem 1rem;border:1px solid var(--grey-2);border-radius:14px;background:#fff;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.shx .pdp-cart table.variations select:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px var(--blue-dim)}
.shx .pdp-cart a.reset_variations{display:inline-block;font-size:.78rem;color:var(--grey);margin-bottom:.6rem}
.shx .pdp-cart a.reset_variations:hover{color:var(--blue);text-decoration:underline}
.shx .pdp-cart .woocommerce-variation-price{font-size:1.35rem;font-weight:700;margin:.2rem 0 .8rem}
.shx .pdp-cart .woocommerce-variation-price .woocommerce-Price-currencySymbol{font-size:.62em;color:var(--grey)}
.shx .pdp-cart .woocommerce-variation-availability p{font-size:.82rem;color:var(--grey);margin:0 0 .6rem}
.shx .pdp-cart .woocommerce-variation-description p{font-size:.86rem;color:var(--grey);margin:0 0 .7rem}
.shx .pdp-cart .stock.out-of-stock{font-size:.85rem;color:#8a6d3b;font-weight:600}

/* ---------------- WhatsApp + alternates ---------------- */
.shx a.btn-wa{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  margin-top:.7rem;min-height:3.15rem;padding:.6rem 1.2rem;border-radius:999px;
  border:1px solid var(--grey-2);background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.shx a.btn-wa svg{color:#25D366;flex:none;transition:color .25s var(--ease)}
.shx a.btn-wa:hover{border-color:#25D366;background:rgba(37,211,102,.07)}
.shx a.btn-wa.solid{background:#25D366;border-color:#25D366;color:#fff}
.shx a.btn-wa.solid svg{color:#fff}
.shx a.btn-wa.solid:hover{background:#1eb857;border-color:#1eb857}
.shx a.pdp-alt{display:flex;justify-content:center;width:100%;margin-top:.6rem;min-height:2.9rem;
  font-size:.88rem;color:var(--ink);border:1px solid var(--grey-2);border-radius:999px;align-items:center}
.shx a.pdp-alt:hover{border-color:var(--blue);color:var(--blue)}

.shx .pdp-oos{font-size:.88rem;color:var(--grey);line-height:1.6;margin:1.1rem 0 0}

/* WooCommerce's own notices, toned down to match */
.shx .pdp-notices .woocommerce-message,
.shx .pdp-notices .woocommerce-error,
.shx .pdp-notices .woocommerce-info{list-style:none;margin:1rem 0 0;padding:.85rem 1rem;
  border-radius:14px;font-size:.85rem;line-height:1.5;background:var(--blue-dim);color:var(--ink)}
.shx .pdp-notices .woocommerce-error{background:rgba(200,60,60,.1)}
.shx .pdp-notices a.button{display:inline-block;margin-left:.4rem;color:var(--blue);font-weight:600;
  text-decoration:underline}

/* ---------------- assurances ---------------- */
.shx .pdp-assure{margin:1.4rem 0 0;padding-top:1.25rem;border-top:1px solid var(--grey-2);
  display:grid;gap:.85rem;list-style:none}
.shx .pdp-assure li{display:flex;align-items:flex-start;gap:.7rem;font-size:.82rem;line-height:1.5;
  color:var(--grey)}
.shx .pdp-assure strong{color:var(--ink);font-weight:600}
.shx .pdp-assure .mi{width:30px;height:30px;border-radius:10px;background:var(--grey-3);flex:none;
  display:grid;place-items:center;color:var(--blue)}
.shx .pdp-assure .mi svg{width:16px;height:16px}

/* ---------------- description + specs ---------------- */
.shx .pdp-block{margin-top:2.6rem}
.shx .pdp-info .pdp-block:first-child{margin-top:0}
.shx .pdp-block h2{font-size:1.32rem;letter-spacing:-.02em;margin-bottom:1.1rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--grey-2)}

.shx .pdp-copy{font-size:.95rem;line-height:1.78;color:#3a4249;max-width:62ch}
.shx .pdp-copy p{margin:0 0 1rem}
.shx .pdp-copy > *:last-child{margin-bottom:0}
.shx .pdp-copy h3{font-size:1.02rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;
  color:var(--ink);margin:1.8rem 0 .65rem}
.shx .pdp-copy h4{font-size:.94rem;font-weight:600;line-height:1.4;letter-spacing:0;
  color:var(--ink);margin:1.4rem 0 .5rem}
.shx .pdp-copy > h3:first-child{margin-top:0;font-size:1.1rem}
.shx .pdp-copy ul,.shx .pdp-copy ol{margin:0 0 1rem;padding-left:1.25rem;list-style:disc}
.shx .pdp-copy ol{list-style:decimal}
.shx .pdp-copy li{margin:0 0 .45rem;padding-left:.2rem}
.shx .pdp-copy li::marker{color:var(--blue)}
.shx .pdp-copy strong{color:var(--ink);font-weight:600}
.shx .pdp-copy a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.shx .pdp-copy blockquote{margin:0 0 1rem;padding-left:1rem;border-left:3px solid var(--blue-line);color:var(--grey)}
.shx .pdp-copy img{border-radius:12px;margin:.4rem 0 1rem}
.shx .pdp-copy table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.88rem;
  display:block;overflow-x:auto}
.shx .pdp-copy table td,.shx .pdp-copy table th{border:1px solid var(--grey-2);padding:.6rem .75rem;
  text-align:left;vertical-align:top}
.shx .pdp-copy table th{background:var(--grey-3);font-weight:600;color:var(--ink)}

.shx .pdp-source{margin-top:1.1rem;font-size:.74rem;color:var(--grey);font-style:italic}

.shx .pdp-spec table{width:100%;border-collapse:collapse;max-width:46rem}
.shx .pdp-spec th{width:38%;text-align:left;font-weight:500;font-size:.86rem;color:var(--grey);
  padding:.8rem .8rem .8rem 0;border-bottom:1px solid var(--grey-2);vertical-align:top}
.shx .pdp-spec td{font-size:.9rem;font-weight:600;color:var(--ink);
  padding:.8rem 0;border-bottom:1px solid var(--grey-2)}
.shx .pdp-spec tr:last-child th,.shx .pdp-spec tr:last-child td{border-bottom:0}
.shx .pdp-ask{margin-top:1.1rem;font-size:.86rem;color:var(--grey);line-height:1.6;max-width:46rem}
.shx .pdp-ask a{color:var(--blue);font-weight:600}
.shx .pdp-ask a:hover{text-decoration:underline}

/* ---------------- related ---------------- */
.shx .pdp-rel{background:var(--grey-3);padding:3.6rem 0}
.shx .pdp-rel > .wrap{width:min(100% - 4rem,1400px)}
.shx .pdp-rel .sec-head{margin-bottom:1.6rem}
.shx .pdp-rel .sec-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .shx .pdp-grid{grid-template-columns:minmax(0,1fr) 22.5rem;column-gap:2.2rem}
}
@media (max-width:1000px){
  .shx .pdp > .wrap,.shx .pdp-rel > .wrap{width:min(100% - 2.5rem,1400px)}
  .shx .pdp-grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"media" "buy" "info";row-gap:1.9rem;padding-bottom:2.6rem}
  .shx .pbuybox{position:static;top:auto}
  body.admin-bar .shx .pbuybox{top:auto}
  .shx .pgal-stage{max-height:none;aspect-ratio:1}
}
@media (max-width:640px){
  .shx .pdp{padding-top:1rem}
  .shx .pbuybox{padding:1.3rem 1.15rem 1.2rem;border-radius:20px}
  .shx .pdp-price{font-size:1.6rem}
  .shx button.pthumb{width:4.2rem;height:4.2rem;border-radius:11px}
  .shx .pdp-cart form.cart{gap:.5rem}
  .shx .pdp-cart button.single_add_to_cart_button{flex:1 1 100%}
  .shx .pdp-cart .quantity{width:100%;justify-content:space-between}
  .shx .pdp-cart .quantity input.qty{flex:1}
  .shx .pdp-block h2{font-size:1.15rem}
  .shx .pdp-spec th{width:44%;font-size:.8rem}
  .shx .pdp-spec td{font-size:.85rem}
  .shx .pdp-rel{padding:2.6rem 0}
}

/* ------------------------------------------------------------------
   Flatsome's customizer prints an INLINE sheet late in the document with
   .single_add_to_cart_button.button{background-color:#000 !important}.
   Specificity cannot beat !important, so these rules answer in kind.
   ------------------------------------------------------------------ */
.shx .pdp-cart button.single_add_to_cart_button,
.shx .pdp-cart button.button.alt{background-color:var(--blue) !important;color:#fff !important}
.shx .pdp-cart button.single_add_to_cart_button:hover{background-color:#2d90b6 !important}
.shx .pdp-cart button.single_add_to_cart_button.disabled,
.shx .pdp-cart button.single_add_to_cart_button:disabled{background-color:var(--grey-3) !important;color:var(--grey) !important}

/* WooCommerce prints its own stock line inside the form. We already show a
   stock pill above the price, so this one is a duplicate. */
.shx .pdp-cart p.stock{display:none}

/* Core hides the quantity field when min and max are both 1 (one left on the
   shelf). Let it stay hidden and give the button the full width. */
.shx .pdp-cart .quantity.hidden{display:none !important}

/* Flatsome supplies its own minus/plus inputs. Style those rather than
   adding a second pair. */
.shx .pdp-cart .quantity input.minus,
.shx .pdp-cart .quantity input.plus,
.shx .pdp-cart .quantity input.ux-quantity__button{width:2.5rem;height:auto;min-height:0;padding:0;margin:0;
  border:0 !important;background:none !important;color:var(--grey) !important;
  font:inherit;font-size:1.1rem;font-weight:500;line-height:1;cursor:pointer;border-radius:0;
  box-shadow:none;transition:color .2s var(--ease),background .2s var(--ease)}
.shx .pdp-cart .quantity input.minus:hover,
.shx .pdp-cart .quantity input.plus:hover,
.shx .pdp-cart .quantity input.ux-quantity__button:hover{color:var(--ink) !important;background:var(--grey-3) !important}
.shx .pdp-cart .quantity label.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The gallery column is wider than a product photo wants to be. Cap the
   gallery itself so the description underneath can still run full width. */
.shx .pgal{max-width:33rem}
.shx .pgal-stage{max-height:none}
@media (max-width:1000px){.shx .pgal{max-width:none}}

/* ------------------------------------------------------------------
   Layout, second pass. A 1fr media column left a photo-sized gallery
   stranded beside 400px of dead space. Both columns are now sized to what
   they actually hold and pushed to the outer edges, and the copy below runs
   the full width in the same two-column rhythm.
   ------------------------------------------------------------------ */
.shx .pdp > .wrap{width:min(100% - 4rem,1240px)}
.shx .pdp-rel > .wrap{width:min(100% - 4rem,1240px)}
.shx .pdp-grid{
  grid-template-columns:minmax(0,34rem) minmax(0,25.5rem);
  grid-template-areas:"media buy" "info info";
  justify-content:space-between;
  column-gap:3rem;row-gap:3.4rem}
.shx .pgal{max-width:none}

.shx .pdp-info{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,25.5rem);
  justify-content:space-between;column-gap:3rem;row-gap:2.6rem;align-items:start}
.shx .pdp-info .pdp-about{margin-top:0}
.shx .pdp-info .pdp-spec{margin-top:0}
.shx .pdp-copy{max-width:none}
.shx .pdp-spec table{max-width:none}
.shx .pdp-ask{max-width:none}

@media (max-width:1180px){
  .shx .pdp-grid,.shx .pdp-info{grid-template-columns:minmax(0,1fr) 23rem;justify-content:stretch;column-gap:2.4rem}
}
@media (max-width:1000px){
  .shx .pdp > .wrap,.shx .pdp-rel > .wrap{width:min(100% - 2.5rem,1240px)}
  .shx .pdp-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "buy" "info";row-gap:1.9rem}
  .shx .pdp-info{grid-template-columns:minmax(0,1fr);row-gap:2.2rem}
  .shx .pdp-info .pdp-spec{margin-top:0}
}

/* Several supplier photos are 800x800 with the product floating small in the
   middle. Tight padding stops the stage feeling emptier than it needs to. */
.shx .pgal-stage{padding:clamp(1.1rem,2.4vw,2rem)}

/* Belt and braces for the theme's sticky bar and mobile sidebar. */
body.sh-pdp .sticky-add-to-cart-wrapper,
body.sh-pdp #main-menu.mobile-sidebar{display:none !important}