/* Product cards everywhere (shop, categories, home lists, related products): names, size boxes and prices line up across a row.
   Cards in a row share one height; the name keeps a fixed two-line space; the price sits at the bottom. */
ul.products{display:flex!important;flex-wrap:wrap}
ul.products::before,ul.products::after{display:none!important}
ul.products>li.product{display:flex!important;flex-direction:column;float:none!important;clear:none!important}
ul.products>li.product>.desc{display:flex!important;flex-direction:column;flex:1 1 auto;min-width:0}
ul.products li.product h4.mfn-woo-product-title{flex-shrink:0}
ul.products li.product h4.mfn-woo-product-title a{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.2!important;height:2.4em}
ul.products li.product .price{margin-top:auto!important;padding-top:10px}
ul.products li.product select.mfn-vr-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* shop and category pages: the card text area was a fixed height, which squeezed names on sale items */
:is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product .desc{height:auto!important;min-height:182px}

/* other lists: a little space under the name before the size box */
body:not(.post-type-archive-product):not(.tax-product_cat) ul.products li.product h4.mfn-woo-product-title{margin:0 0 10px!important;min-height:0!important}

@media (max-width:767px){
  body:not(.post-type-archive-product):not(.tax-product_cat) ul.products li.product h4.mfn-woo-product-title,
  body:not(.post-type-archive-product):not(.tax-product_cat) ul.products li.product .mfn-woo-product-title a{font-size:18px!important}
  ul.products li.product .mfn-variations-wrapper-loop select.mfn-vr-select{height:42px!important;padding:0 32px 0 14px!important;font-size:14px!important;background-position:right 12px center!important}
  body:not(.post-type-archive-product):not(.tax-product_cat) ul.products li.product .price{font-size:14px!important;line-height:1.35!important}
}

/* everything in the card centred: name, size label, size box and price */
ul.products li.product .desc{text-align:center!important;align-items:center}
ul.products li.product .desc>*{width:100%;text-align:center!important}
ul.products li.product .mfn-variations-wrapper-loop .mfn-vr{display:flex!important;flex-direction:column;align-items:center}
ul.products li.product .mfn-variations-wrapper-loop .mfn-vr label{text-align:center!important}
ul.products li.product .mfn-variations-wrapper-loop select.mfn-vr-select{margin:0 auto!important;padding-left:40px!important;padding-right:40px!important;text-align:center;text-align-last:center}
ul.products li.product .price ins,ul.products li.product .price del{display:block}

/* phones: a clear gap between the two columns (the theme relied on floats for it) */
@media (max-width:767px){
  ul.products{column-gap:14px}
  ul.products>li.product{width:calc(50% - 7px)!important;margin:0 0 28px!important}
  ul.products li.product .mfn-variations-wrapper-loop select.mfn-vr-select{padding-left:28px!important;padding-right:28px!important}
}

/* tighter space between the size box and the price */
ul.products li.product .mfn-variations-wrapper-loop{margin:0 0 6px!important}
ul.products li.product .mfn-variations-wrapper-loop .mfn-vr{margin:0!important}
ul.products li.product .price{padding-top:8px!important}

/* Shop and category card labels: the theme's custom CSS writes " \00b7 Herbal tea", where the space after the escape is eaten, so it reads "·Herbal tea". Same labels with the space kept. */
html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-herbs .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Herbal tea"}
html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-syrups-ciders .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Syrup & cider"}
html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-face-serum .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Self-care"}
html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-gift-boxes .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Gift box"}
html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-coffee .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Coffee"}
@media (max-width:767px){
  html :is(body.post-type-archive-product,body.tax-product_cat) ul.products li.product.product_cat-syrups-ciders .desc::before{content:"No. " counter(apothecary,decimal-leading-zero) " · Syrup"}
}