/*
 * Default theme: every button gets the same raised "shadow effect" (soft drop shadow under it, a thin light edge on top and a
 * slightly lighter-to-darker fade inside). It changes ONLY box-shadow / background-image, so every button keeps its own colour,
 * size, text and radius. Filled buttons get the fade + shadow; outlined / white buttons get the soft shadow only.
 * Loaded last (header.php); the `html body` prefix + !important keep the older stylesheets from switching it off.
 */

/* ---- filled buttons ---- */
html body .btn.btn--primary,
html body button.add-to-cart,
html body .pdp-buy-now,
html body .pdp-mobile-bar__cart,
html body .pdp-mobile-bar__buy,
html body button.quick_add_card_btn_custom,
html body .filter-apply-btn,
html body .auth-submit,
html body .pdp-rv-write-btn,
html body .pc-btn.pc-btn--primary,
html body .pc-place-order,
html body .acct-btn.acct-btn--primary,
html body .inv-btn.inv-btn--primary,
html body .wsl-pcard__cta,
html body .mega-menu__view-all,
html body .plp-view-toggle__btn.is-active {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .17) 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -2px 0 rgba(0, 0, 0, .14) !important;
}

html body .btn.btn--primary:hover,
html body button.add-to-cart:hover,
html body .pdp-buy-now:hover,
html body .pdp-mobile-bar__cart:hover,
html body .pdp-mobile-bar__buy:hover,
html body button.quick_add_card_btn_custom:hover,
html body .filter-apply-btn:hover,
html body .auth-submit:hover,
html body .pdp-rv-write-btn:hover,
html body .pc-btn.pc-btn--primary:hover,
html body .pc-place-order:hover,
html body .acct-btn.acct-btn--primary:hover,
html body .inv-btn.inv-btn--primary:hover,
html body .wsl-pcard__cta:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .16) !important;
}

html body .btn.btn--primary:active,
html body button.add-to-cart:active,
html body .pdp-buy-now:active,
html body button.quick_add_card_btn_custom:active,
html body .auth-submit:active,
html body .pc-btn.pc-btn--primary:active,
html body .pc-place-order:active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22), inset 0 2px 3px rgba(0, 0, 0, .22) !important;
}

/* a disabled button stays flat (nothing to press) */
html body .btn.btn--primary:disabled,
html body button.add-to-cart:disabled,
html body .pdp-buy-now:disabled,
html body button.quick_add_card_btn_custom:disabled,
html body .pc-place-order:disabled,
html body .pdp-mobile-bar__buy:disabled {
  background-image: none !important;
  box-shadow: none !important;
}

/* ---- outlined / white buttons: soft shadow only ---- */
html body .btn.btn--secondary,
html body .btn.view-all-btn,
html body .filter-reset-btn,
html body .pc-btn.pc-btn--secondary,
html body .acct-btn.acct-btn--secondary,
html body .inv-btn.inv-btn--outline,
html body .toggle-btn.utility-bar__item,
html body .link-dropdown__button,
html body .plp-price-presets__btn,
html body .pdp-share-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}
html body .btn.btn--secondary:hover,
html body .btn.view-all-btn:hover,
html body .filter-reset-btn:hover,
html body .pc-btn.pc-btn--secondary:hover,
html body .acct-btn.acct-btn--secondary:hover,
html body .plp-price-presets__btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

/* Retail <-> Wholesale switch button in the main navigation (shown only where the wholesale module is on) */
html body .navigation__item--b2b { display: flex; align-items: center; margin-left: 14px; }
/* desktop bar: the switch button sits at the right edge of the menu bar, vertically centred; padding on both sides keeps the links centred and clear of it */
html body .navigation--main .navigation__item--b2b { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; height: auto; }
html body .navigation--main:has(.navigation__item--b2b) .navigation__tier-1 { padding-left: 112px; padding-right: 112px; box-sizing: border-box; } /* equal room on both sides: the absolutely placed switch button must not pull the categories off-centre */
html body .navigation__item--b2b .nav-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px !important; height: auto !important; min-height: 0 !important; border-radius: 999px; border: 0;
  background-color: rgb(var(--btn-bg-color, 79 0 107)) !important; color: rgb(var(--btn-text-color, 255 255 255)) !important;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.17) 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.14);
  transition: box-shadow .12s;
}
html body .navigation__item--b2b .nav-switch-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.16); }
html body .navigation__item--b2b .nav-switch-btn::after { display: none !important; }
/* phone drawer: the list uses the full width, and the switch button sits in the flow as a normal full-width row (the desktop bar's side room and absolute placement must not apply here) */
html body .mobile-navigation-drawer .navigation--main:has(.navigation__item--b2b) .navigation__tier-1,
html body .mobile-navigation-drawer .navigation__tier-1 { padding-left: 0; padding-right: 0; }
html body .mobile-navigation-drawer .navigation--main .navigation__item--b2b,
html body .navigation--drawer .navigation__item--b2b { position: static; transform: none; right: auto; top: auto; display: block; margin: 16px 20px 8px; padding: 0; }
html body .mobile-navigation-drawer .navigation__item--b2b .nav-switch-btn { display: flex; justify-content: center; width: 100%; padding: 10px 14px !important; font-size: 12px; }