/* Moho Delivery Notice */

/* ---- homepage ticker: one running line, messages scroll right to left on a loop ---- */
.moho-ticker { position: relative; z-index: 60; overflow: hidden; background: #5f1b47; color: #fff; font-size: 13px; letter-spacing: .04em; line-height: 1.35; }
.moho-ticker__track { display: flex; width: max-content; min-height: 38px; align-items: center; animation: moho-ticker-run var(--moho-tk-dur, 40s) linear infinite; will-change: transform; }
.moho-ticker__group { display: flex; flex: 0 0 auto; min-width: 100vw; align-items: center; justify-content: space-around; }
.moho-ticker__item { display: inline-flex; align-items: center; padding: 10px 0; white-space: nowrap; color: #fff; }
.moho-ticker__item::after { content: ""; flex: none; width: 5px; height: 5px; margin: 0 40px; border-radius: 50%; background: currentColor; opacity: .55; }
.moho-ticker:hover .moho-ticker__track, .moho-ticker:focus-within .moho-ticker__track { animation-play-state: paused; }
@keyframes moho-ticker-run { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .moho-ticker { font-size: 12px; } .moho-ticker__track { min-height: 34px; } .moho-ticker__item { padding: 8px 0; } .moho-ticker__item::after { margin: 0 28px; } }
/* people who ask their device for less motion get the messages standing still, wrapped and centred */
@media (prefers-reduced-motion: reduce) {
	.moho-ticker__track { width: 100%; animation: none; transform: none; }
	.moho-ticker__group { flex-wrap: wrap; min-width: 0; width: 100%; justify-content: center; padding: 0 16px; }
	.moho-ticker__group[aria-hidden="true"] { display: none; }
	.moho-ticker__item { white-space: normal; text-align: center; padding: 6px 0; }
	.moho-ticker__item::after { display: none; }
	.moho-ticker__item + .moho-ticker__item::before { content: "\00b7"; margin: 0 14px; opacity: .7; }
}

/* The header is fixed to the top of the screen. While the ticker is visible the header sits right under it;
   as the ticker scrolls out, the header follows it up (--moho-tk-bottom is the ticker's bottom edge, kept up to date
   by ticker.js on scroll), so there is never a gap. With the admin bar it never goes higher than the bar. */
.moho-has-ticker .site-header.mohoui-header,
.moho-has-ticker.mohoui-header-overlay .site-header.mohoui-header { top: var(--moho-tk-bottom, 38px); }
.admin-bar.moho-has-ticker .site-header.mohoui-header,
.admin-bar.moho-has-ticker.mohoui-header-overlay .site-header.mohoui-header { top: max(var(--moho-tk-bottom, 70px), 32px); }
@media (max-width: 782px) {
	.admin-bar.moho-has-ticker .site-header.mohoui-header,
	.admin-bar.moho-has-ticker.mohoui-header-overlay .site-header.mohoui-header { top: max(var(--moho-tk-bottom, 80px), 46px); }
}
@media (max-width: 600px) { /* the admin bar scrolls away on small screens */
	.admin-bar.moho-has-ticker .site-header.mohoui-header,
	.admin-bar.moho-has-ticker.mohoui-header-overlay .site-header.mohoui-header { top: var(--moho-tk-bottom, 34px); }
}

/* ---- product page note: inside the buy bar, directly under the Add to cart / Buy now buttons ---- */
.moho-delivery-pdp { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid #5f1b47; background: #faf6f8; font-size: 13.5px; line-height: 1.5; color: #4a433f; }
.moho-delivery-pdp[hidden] { display: none; }
.single-product div.product.product-type-variable .single_variation_wrap { flex-wrap: wrap; }
.single-product div.product.product-type-variable .single_variation_wrap .moho-delivery-pdp {
	flex: 0 0 100%; order: 99; margin: 0; padding: 8px 0 12px; border: 0; border-top: 1px solid #ece3e7; background: transparent;
	font-size: 12.5px; line-height: 1.45; color: #5f1b47; text-align: right;
}
@media (max-width: 767px) {
	.single-product div.product.product-type-variable .single_variation_wrap.is-docked { flex-wrap: wrap; row-gap: 0; }
	.single-product div.product.product-type-variable .single_variation_wrap .moho-delivery-pdp { padding: 5px 0 2px; font-size: 11px; line-height: 1.35; text-align: center; border-top: 0; }
}

/* ---- cart / checkout hint row ---- */
tr.moho-delivery-hint td { padding: 12px 0 14px; font-size: 14px; line-height: 1.5; border-bottom: 0; }
tr.moho-delivery-hint.is-more td { color: #5f1b47; font-weight: 500; }
tr.moho-delivery-hint.is-free td { color: #1f7a4d; font-weight: 500; }

/* ---- block cart hint (shown by delivery-cart.js through WooCommerce's cart slot) ---- */
.moho-delivery-cart-hint { margin: 0; padding: 6px 0; font-size: 14px; line-height: 1.5; }
.moho-delivery-cart-hint.is-more { color: #5f1b47; font-weight: 500; }
.moho-delivery-cart-hint.is-free { color: #1f7a4d; font-weight: 500; }

/* ---- mini cart drawer hint ---- */
.moho-minicart .moho-delivery-mini { margin: 0; padding: 12px 24px 0; font-size: 13px; line-height: 1.45; }
.moho-minicart .moho-delivery-mini.is-more { color: #5f1b47; }
.moho-minicart .moho-delivery-mini.is-free { color: #1f7a4d; }

/* ---- order discount hints (moho-tier-discount.php) ---- */
tr.moho-td-hint td { padding: 12px 0 14px; font-size: 14px; line-height: 1.5; border-bottom: 0; }
/* delivery hint + discount hint sit together right above Total: one block, no divider between them (the theme's table rules need the longer selector) */
body .woocommerce table.shop_table tr.moho-delivery-hint:has(+ tr.moho-td-hint) td { padding: 12px 0 2px; }
body .woocommerce table.shop_table tr.moho-delivery-hint + tr.moho-td-hint td { padding: 0 0 14px; border-top: 0; }
tr.moho-td-hint.is-more td { color: #5f1b47; font-weight: 500; }
tr.moho-td-hint.is-free td { color: #1f7a4d; font-weight: 500; }
.moho-td-cart-hint { margin: 0; padding: 6px 0; font-size: 14px; line-height: 1.5; }
.moho-td-cart-hint.is-more { color: #5f1b47; font-weight: 500; }
.moho-td-cart-hint.is-free { color: #1f7a4d; font-weight: 500; }
.moho-minicart .moho-td-mini { margin: 0; padding: 8px 24px 0; font-size: 13px; line-height: 1.45; }
.moho-minicart .moho-td-mini.is-more { color: #5f1b47; }
.moho-minicart .moho-td-mini.is-free { color: #1f7a4d; }