/* Next design (preview: add ?jmx_preview=1 to any URL). Every rule is scoped to html.jmx-v2. */

/* header menu: every item fits (the last one, "Хүргэлт лавлах", was cut off at 1440px and below) */
html.jmx-v2 .hnav>.wrap>ul{gap:22px}
html.jmx-v2 .hnav>.wrap>ul>li>a{letter-spacing:.05em}
@media (max-width:1440px){html.jmx-v2 .hnav>.wrap>ul{gap:18px}html.jmx-v2 .hnav>.wrap>ul>li>a{font-size:12px;letter-spacing:.04em}}
@media (max-width:1280px){
  html.jmx-v2 .hnav>.wrap{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  html.jmx-v2 .hnav>.wrap::-webkit-scrollbar{display:none}
  html.jmx-v2 .hnav>.wrap>ul{gap:16px;padding-right:40px}
}

/* product page gallery: the photo fills its column, thumbnails in a neat row, zoom button on the photo */
html.jmx-v2 .single-product div.product .woocommerce-product-gallery{position:relative}
html.jmx-v2 .single-product div.product .woocommerce-product-gallery__image a{display:block}
html.jmx-v2 .single-product div.product .woocommerce-product-gallery__image img{width:100%!important;height:auto;aspect-ratio:1/1;object-fit:cover}
html.jmx-v2 .single-product div.product .woocommerce-product-gallery .flex-viewport{box-shadow:0 30px 70px rgba(0,0,0,.45)}
html.jmx-v2 .single-product div.product .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 0!important;padding:0}
html.jmx-v2 .single-product div.product .flex-control-thumbs li{width:auto!important;margin:0!important;float:none!important}
html.jmx-v2 .single-product div.product .flex-control-thumbs::before,html.jmx-v2 .single-product div.product .flex-control-thumbs::after{display:none!important} /* Storefront's clearfix would take the first grid cell */
html.jmx-v2 .single-product div.product .flex-control-thumbs li img{aspect-ratio:1/1;object-fit:cover;cursor:pointer;transition:opacity .2s,transform .2s}
html.jmx-v2 .single-product div.product .flex-control-thumbs li img:hover{transform:translateY(-2px)}
html.jmx-v2 .woocommerce-product-gallery__trigger{top:14px!important;right:14px!important;z-index:5;border-radius:50%!important;backdrop-filter:blur(6px)}
html.jmx-v2 .single-product .summary .price{margin-bottom:14px!important}
html.jmx-v2 .single-product .summary .woocommerce-product-details__short-description{margin-top:0}

/* product cards: gentle lift on hover, button reads as a button */
html.jmx-v2 ul.products li.product{transition:transform .35s var(--ease)}
html.jmx-v2 ul.products li.product:hover{transform:translateY(-4px)}
html.jmx-v2 ul.products li.product .button{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.14)!important;border-radius:8px!important;white-space:nowrap;letter-spacing:.06em}
html.jmx-v2 ul.products li.product .card-media{border-radius:10px}

/* phones */
@media (max-width:600px){
  /* the 4 promises: one per line instead of a cramped 2x2 grid */
  html.jmx-v2 .usp{grid-template-columns:1fr!important;margin-bottom:48px}
  html.jmx-v2 .usp>div{border-right:0!important;border-bottom:1px solid var(--line)!important;padding:14px 6px!important;gap:14px}
  html.jmx-v2 .usp>div:last-child{border-bottom:0!important}
  html.jmx-v2 .usp span{font-size:12.5px}
  /* "Сагсанд хийх" on one line */
  html.jmx-v2 ul.products li.product .button{font-size:11px!important;letter-spacing:.03em;padding:11px 4px!important}
}