/* CLOUDSY — shared buttons, Contact typography and navigation.
   Reference: the existing Frequently Asked Questions heading.
   Heading colour #327EAF; Poppins 500.
   CTA colour #2C78CF matches the existing homepage / footer Shop buttons.
   Keeps the previous product-description and Contact-photo fixes intact.
*/

:root {
  --cloudsy-ui-font: "Poppins", Arial, sans-serif;
  --cloudsy-ui-heading: #327eaf;
  --cloudsy-ui-button: #2c78cf;
  --cloudsy-ui-button-hover: #195eae;
  --cloudsy-ui-button-text: #ffffff;
  --cloudsy-ui-button-radius: 999px;
  --cloudsy-ui-button-height: 48px;
}

/* 1. All text/action buttons, including every existing Custom Liquid CTA.
   Keep the original display, width and visibility logic: cart/variant/loading
   states must still work. Utility icons, gallery controls, colour swatches
   and menu toggles are intentionally not converted into large CTA buttons. */
html body :is(
  .button:not(.button-unstyled, .button--unstyled),
  .button-secondary:not(.button-unstyled, .button--unstyled),
  a.btn,
  button.btn,
  input[type="submit"],
  input[type="button"],
  .cz-button,
  .cl-button,
  .clodsy-btn,
  .cf-promo-button,
  .cloudsy-shop-button,
  .cloudsy-english-account__submit,
  .submit-button,
  .email-signup__button--text,
  .quick-order-list__button-cancel,
  .facets-toggle__button,
  .facets__clear-all-link,
  .show-more__button,
  .volume-pricing__toggle,
  .volume-pricing-info__button--with-label,
  .pickup-location__button,
  .popup-link__button,
  .password-footer__button,
  .shopify-payment-button__button--unbranded,
  [data-cloudsy-button]
):not(:where(
  .quick-add__button,
  .header-actions__action,
  .localization-selector,
  .dropdown-localization__button,
  .close-button,
  .menu-drawer__back-button,
  .cart-items__remove,
  .variant-item__remove,
  .quick-order-list__remove-all-button,
  .predictive-search__close-modal-button,
  .predictive-search__search-button,
  .slideshow-control,
  .email-signup__button--arrow,
  .skip-to-content-link,
  [role="tab"],
  [data-cloudsy-button-exempt]
)) {
  --button-color: var(--cloudsy-ui-button-text) !important;
  --button-background-color: var(--cloudsy-ui-button) !important;
  --button-border-width: 0px !important;
  --button-border-color: transparent !important;

  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: var(--cloudsy-ui-button-height) !important;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: var(--cloudsy-ui-button-radius) !important;
  background: var(--cloudsy-ui-button) !important;
  color: var(--cloudsy-ui-button-text) !important;
  -webkit-text-fill-color: var(--cloudsy-ui-button-text) !important;
  box-shadow: none !important;

  font-family: var(--cloudsy-ui-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: normal !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: background-color 180ms ease, opacity 180ms ease !important;

  /* CSS nesting is already used throughout this theme's base.css. */
  &:hover:not(:disabled):not([aria-disabled="true"]) {
    --button-background-color: var(--cloudsy-ui-button-hover) !important;
    background: var(--cloudsy-ui-button-hover) !important;
    color: var(--cloudsy-ui-button-text) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }

  &:focus-visible {
    outline: 3px solid var(--cloudsy-ui-heading) !important;
    outline-offset: 3px !important;
  }

  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
  }

  & :where(span:not(.svg-wrapper)) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none !important;
  }
}

/* Keep quantity and purchase controls aligned at the same height. */
.product-form-buttons,
.buy-buttons-block,
sticky-add-to-cart {
  --height-buy-buttons: var(--cloudsy-ui-button-height);
}

/* Compact quick-add controls: same blue / white / rounded surface.
   Do not override display or opacity: only the eligible variant button
   should be visible, and the original mobile/hover behaviour is preserved. */
html body .quick-add__button {
  --button-size-md: var(--cloudsy-ui-button-height);
  background: var(--cloudsy-ui-button) !important;
  color: var(--cloudsy-ui-button-text) !important;
  border: 0 !important;
  border-radius: var(--cloudsy-ui-button-radius) !important;
  box-shadow: none !important;
  font-family: var(--cloudsy-ui-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .quick-add__button .add-to-cart-text {
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
}

html body .quick-add__button:hover:not(:disabled) {
  background: var(--cloudsy-ui-button-hover) !important;
}

html body .quick-add__button:focus-visible {
  outline: 3px solid var(--cloudsy-ui-heading) !important;
  outline-offset: 3px !important;
}

/* Native accelerated-payment components expose these shape variables.
   Keep provider-owned branding, labels and checkout functionality intact. */
html body shopify-accelerated-checkout,
html body shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--cloudsy-ui-button-radius) !important;
  --shopify-accelerated-checkout-button-block-size: var(--cloudsy-ui-button-height) !important;
}

/* 2. Contacts page title — exact typography of the reference FAQ heading.
   The second selector also covers the existing Contact hero if the page
   is ever assigned the generic page template. */
#MainContent[data-template="page.contact"] :is(h1, .text-block--title h2),
body:has(#cloudsy-contact-hero) #MainContent :is(h1, .text-block--title h2) {
  color: var(--cloudsy-ui-heading) !important;
  -webkit-text-fill-color: var(--cloudsy-ui-heading) !important;
  font-family: var(--cloudsy-ui-font) !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 3. Name / Email / Phone / Comment: labels, placeholders and entered text.
   Keep input borders, validation states, form actions and field names. */
html body .contact-form__form {
  font-family: var(--cloudsy-ui-font) !important;
}

html body .contact-form__form label,
html body .contact-form__input {
  color: var(--cloudsy-ui-heading) !important;
  -webkit-text-fill-color: var(--cloudsy-ui-heading) !important;
  font-family: var(--cloudsy-ui-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .contact-form__input::placeholder {
  color: var(--cloudsy-ui-heading) !important;
  -webkit-text-fill-color: var(--cloudsy-ui-heading) !important;
  font-family: var(--cloudsy-ui-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

html body .contact-form__input:-webkit-autofill {
  -webkit-text-fill-color: var(--cloudsy-ui-heading) !important;
  caret-color: var(--cloudsy-ui-heading) !important;
}

/* 4. Home Page / All Products / Contacts navigation.
   Apply on desktop, mobile drawer, mobile navigation and active/hover links.
   Navigation remains navigation: no large pill backgrounds on menu items. */
#header-component :is(
  .menu-list__link,
  .menu-list__link-title,
  .menu-list__item,
  .menu-drawer__menu-item,
  .menu-drawer__menu-item-text,
  .menu-drawer__back-button,
  .mega-menu__link,
  .mega-menu__link-title
) {
  color: var(--cloudsy-ui-heading) !important;
  -webkit-text-fill-color: var(--cloudsy-ui-heading) !important;
  font-family: var(--cloudsy-ui-font) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

@media screen and (max-width: 749px) {
  #MainContent[data-template="page.contact"] :is(h1, .text-block--title h2),
  body:has(#cloudsy-contact-hero) #MainContent :is(h1, .text-block--title h2) {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  /* The sticky purchase bar has an icon-only button on mobile. */
  html body sticky-add-to-cart[data-variant-available="true"] .sticky-add-to-cart__button {
    width: var(--cloudsy-ui-button-height) !important;
    min-width: var(--cloudsy-ui-button-height) !important;
    height: var(--cloudsy-ui-button-height) !important;
    padding: 0 !important;
  }
}