/* v1.1.24 (Sky, 6:59 PM ET): product-card button labels centered both ways, one height.
   Every loop button (Choose/Select/View options, Add to cart, Read more, View cart, added + loading)
   on /shop/, category grids, related, upsells, cross-sells, home rows and the ob-shop cards.
   Enqueued last (after Hello, WooCommerce, ob-site, ob-hf, ob-shop, ob-home). Selectors start with
   "html body" and repeat [class] so they beat ob-shop.css (0,4,3) and Woo (0,3,3) without !important.
   Layout (grid column, margins, colors) stays with ob-shop.css / ob-site.css; this file only sets
   the box model and centering. */
html body ul.products[class][class] li.product .button,
html body ul.products[class][class] li.product a.add_to_cart_button,
html body ul.products[class][class] li.product a.product_type_variable,
html body ul.products[class][class] li.product a.product_type_grouped,
html body ul.products[class][class] li.product a.product_type_external{
	display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 8px;
	text-align:center;line-height:1.2;white-space:normal;vertical-align:middle;
	min-height:48px;height:auto;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;
	box-sizing:border-box;max-width:100%
}
/* Same width in every card (ob-shop cards already set width/margins per the Designer spec). */
html body:not(.ob-shop) ul.products[class][class] li.product .button{width:100%;margin-left:0;margin-right:0}
/* Woo's "added" tick and loading spinner: keep the label centered. */
html body ul.products[class][class] li.product .button.added{position:relative;padding-left:32px;padding-right:32px}
html body ul.products[class][class] li.product .button.added::after{position:absolute;top:calc(50% - .5em);right:12px;margin:0;line-height:1;height:1em}
html body ul.products[class][class] li.product .button.loading{position:relative;padding-left:32px;padding-right:32px;opacity:.7}
html body ul.products[class][class] li.product .button.loading::after{position:absolute;top:calc(50% - .5em);right:12px;line-height:1;height:1em;margin:0}
/* "View cart" after an AJAX add. */
html body ul.products[class][class] li.product a.added_to_cart{
	display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;
	min-height:44px;padding-top:0;padding-bottom:0;box-sizing:border-box;white-space:normal;vertical-align:middle
}
html body:not(.ob-shop) ul.products[class][class] li.product a.added_to_cart{width:100%}
/* v1.1.25: O24U landing page cards and CTAs (spec 3). Same centering; colors/sizes stay in ob-o24u.css.
   Parts tiles keep the spec's label-left / chevron-right layout, only vertically centered. */
html body .ob-o24u[class] a.ob-o24u-btn,
html body .ob-o24u[class] a.ob-o24u-card__cta,
html body .ob-o24u[class] a.ob-o24u-ask,
html body .ob-o24u[class] a.ob-o24u-cmp__view{
	display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;
	white-space:normal;box-sizing:border-box;vertical-align:middle
}
html body .ob-o24u[class] a.ob-o24u-btn{min-height:48px;padding-top:12px;padding-bottom:12px}
html body .ob-o24u[class] a.ob-o24u-card__cta{display:flex;width:100%}
html body .ob-o24u[class] a.ob-o24u-ask,html body .ob-o24u[class] a.ob-o24u-cmp__view{min-height:44px;padding-top:0;padding-bottom:0}
html body .ob-o24u[class] a.ob-o24u-tile{align-items:center;box-sizing:border-box}
/* v1.1.25 (Sky 7:11 PM): one card-button style on every grid (shop, categories, related, upsells, cross-sells, home):
   filled dark primary, centered, min 48px. "View options" (packages) and "Add to Cart" (supplies/parts) look the same. */
html body[class] ul.products[class][class] li.product[class] .button,
html body[class] ul.products[class][class] li.product[class] .button.ob-btn-view{
	background:var(--ob-navy-900,#0B2545);border:1.5px solid var(--ob-navy-900,#0B2545);color:#fff;min-height:48px;
	font-weight:600;text-decoration:none
}
html body[class] ul.products[class][class] li.product[class] .button:hover,
html body[class] ul.products[class][class] li.product[class] .button.ob-btn-view:hover,
html body[class] ul.products[class][class] li.product[class] .button:focus-visible{
	background:var(--ob-navy-hover,#13335C);border-color:var(--ob-navy-hover,#13335C);color:#fff
}
/* v1.1.26.3 (Sky 9:23 PM): every card says "View options" (a link, no ajax add). Block grids (legacy product-grid
   blocks and Product Collection) get the same filled primary 48px centered button as ul.products cards. */
html body[class] .wc-block-grid__product[class] a.ob-view-options,
html body[class] .wc-block-components-product-button[class] a.ob-view-options{
	display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 8px;
	text-align:center;line-height:1.2;white-space:normal;vertical-align:middle;
	min-height:48px;height:auto;padding:8px 16px;box-sizing:border-box;max-width:100%;width:100%;
	background:var(--ob-navy-900,#0B2545);border:1.5px solid var(--ob-navy-900,#0B2545);color:#fff;
	border-radius:var(--r-md,8px);font-weight:600;text-decoration:none
}
html body[class] .wc-block-grid__product[class] a.ob-view-options:hover,
html body[class] .wc-block-grid__product[class] a.ob-view-options:focus-visible,
html body[class] .wc-block-components-product-button[class] a.ob-view-options:hover,
html body[class] .wc-block-components-product-button[class] a.ob-view-options:focus-visible{
	background:var(--ob-navy-hover,#13335C);border-color:var(--ob-navy-hover,#13335C);color:#fff
}