/* Nana How You Style It — live WooCommerce commerce layer. */

/* The legacy parity stylesheet intentionally hides the demo module. Only the
   successfully hydrated live-Woo surface is allowed to become visible. */
#howYouStyleIt[data-commerce-ready="true"]{
  display:block;
}

/* Keep the Pick / Pair / Play merchandising surface horizontally browsable on
   phones, matching the existing tablet rail instead of falling back to a long
   two-column grid. The rail owns its overflow so the page itself never does. */
@media(max-width:767px){
  #howYouStyleIt .nana-style-products{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    padding-bottom:4px;
  }
  #howYouStyleIt .nana-style-products::-webkit-scrollbar{
    display:none;
  }
  #howYouStyleIt .nana-style-product{
    flex:0 0 min(72vw,272px);
    scroll-snap-align:start;
  }
}