/*
 * ARKOS site-wide CTA system
 * One silhouette: the approved Our Story slant.
 * Functional controls (navigation, sliders, tabs, galleries and pagination)
 * intentionally retain their task-specific geometry.
 */

:root {
  --arkos-button-red: #ed1c24;
  --arkos-button-red-hover: #bf1119;
  --arkos-button-yellow: #f5d500;
  --arkos-button-ink: #151515;
  --arkos-button-white: #ffffff;
  --arkos-button-shape: polygon(7% 0, 100% 0, 92% 100%, 0 100%);
}

/* Shared geometry for every public CTA and submit action. */
body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
),
body .option-screen > :not(.arkos-header) form :is(
  button[type="submit"],
  input[type="submit"],
  input[type="button"]
) {
  --arkos-cta-fill: var(--arkos-button-red);
  --arkos-cta-text: var(--arkos-button-white);
  --arkos-cta-hover-fill: var(--arkos-button-red-hover);
  --arkos-cta-hover-text: var(--arkos-button-white);
  --arkos-cta-inner: transparent;
  position: relative !important;
  isolation: isolate !important;
  min-width: 154px !important;
  max-width: 100% !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  padding: 0 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  overflow: hidden !important;
  color: var(--arkos-cta-text) !important;
  background-color: var(--arkos-cta-fill) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: "Jost", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  box-shadow: none !important;
  clip-path: var(--arkos-button-shape) !important;
  transform: none !important;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease !important;
}

/* Ensure existing child labels and icons sit above outline interiors. */
body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
) > :is(span, i, strong) {
  position: relative !important;
  z-index: 2 !important;
}

body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
) > i:last-child {
  transition: transform 180ms ease !important;
}

/* Add the approved chevron only where markup does not already provide an icon. */
body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
):not(:has(i))::after,
body .option-screen > :not(.arkos-header) form button[type="submit"]:not(:has(i))::after {
  content: "" !important;
  position: relative !important;
  z-index: 2 !important;
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px !important;
  margin-left: 2px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform 180ms ease !important;
}

/* Red filled: default primary action. */
body .option-screen :is(
  .story-art__button,
  .real-button--primary,
  .wp-commerce-link,
  .wp-card-commerce-link:not(.wp-card-commerce-link--datasheet),
  .brochure-download,
  .bolt-range-cta,
  .marcom-card__download,
  .arkos-ui-btn--primary,
  .arkos-ui-btn--secondary,
  .arkos-ui-btn--dark,
  .wp-block-button__link,
  .wp-element-button
),
body .option-screen > :not(.arkos-header) form :is(
  button[type="submit"],
  input[type="submit"],
  input[type="button"]
) {
  --arkos-cta-fill: var(--arkos-button-red);
  --arkos-cta-text: var(--arkos-button-white);
  --arkos-cta-hover-fill: var(--arkos-button-red-hover);
  --arkos-cta-hover-text: var(--arkos-button-white);
}

/* Yellow filled: reserved for sections already using yellow as the lead accent. */
body .option-screen :is(
  .range-showcase-card__button,
  .why-arkos__button,
  .wp-product-toolbar a,
  .arkos-ui-btn--yellow
) {
  --arkos-cta-fill: var(--arkos-button-yellow);
  --arkos-cta-text: var(--arkos-button-ink);
  --arkos-cta-hover-fill: var(--arkos-button-ink);
  --arkos-cta-hover-text: var(--arkos-button-white);
}

/* Red outline: secondary action on light surfaces. */
body .option-screen :is(
  .real-button:not(.real-button--primary),
  .real-link,
  .wp-card-commerce-link--datasheet,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .bolt-support-card > a,
  .arkos-blog-link,
  .arkos-ui-btn--outline,
  .arkos-ui-btn--ghost
) {
  --arkos-cta-fill: var(--arkos-button-red);
  --arkos-cta-text: var(--arkos-button-red);
  --arkos-cta-hover-fill: var(--arkos-button-red);
  --arkos-cta-hover-text: var(--arkos-button-white);
  --arkos-cta-inner: var(--arkos-button-white);
}

/* White outline: secondary action on dark, image or product-detail surfaces. */
body .option-screen :is(
  .wp-range-hero .real-button:not(.real-button--primary),
  .gripp-range-products__bar .real-link
) {
  --arkos-cta-fill: var(--arkos-button-white);
  --arkos-cta-text: var(--arkos-button-white);
  --arkos-cta-hover-fill: var(--arkos-button-white);
  --arkos-cta-hover-text: var(--arkos-button-ink);
  --arkos-cta-inner: var(--arkos-button-ink);
}

/* Draw a crisp slanted outline without changing the approved silhouette. */
body .option-screen :is(
  .real-button:not(.real-button--primary),
  .real-link,
  .wp-card-commerce-link--datasheet,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .bolt-support-card > a,
  .arkos-blog-link,
  .arkos-ui-btn--outline,
  .arkos-ui-btn--ghost
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: -1 !important;
  background: var(--arkos-cta-inner) !important;
  clip-path: var(--arkos-button-shape) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

/* Shared hover and keyboard-focus behaviour. */
body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
):is(:hover, :focus-visible),
body .option-screen > :not(.arkos-header) form :is(
  button[type="submit"],
  input[type="submit"],
  input[type="button"]
):is(:hover, :focus-visible) {
  color: var(--arkos-cta-hover-text) !important;
  background-color: var(--arkos-cta-hover-fill) !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
):focus-visible,
body .option-screen > :not(.arkos-header) form :is(
  button[type="submit"],
  input[type="submit"],
  input[type="button"]
):focus-visible {
  outline: 3px solid var(--arkos-button-yellow) !important;
  outline-offset: 3px !important;
}

body .option-screen :is(
  .real-button:not(.real-button--primary),
  .real-link,
  .wp-card-commerce-link--datasheet,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .bolt-support-card > a,
  .arkos-blog-link,
  .arkos-ui-btn--outline,
  .arkos-ui-btn--ghost
):is(:hover, :focus-visible)::before {
  opacity: 0 !important;
}

body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
):is(:hover, :focus-visible):not(:has(i))::after,
body .option-screen > :not(.arkos-header) form button[type="submit"]:is(:hover, :focus-visible):not(:has(i))::after {
  transform: translateX(4px) rotate(45deg) !important;
}

body .option-screen :is(
  .story-art__button,
  .range-showcase-card__button,
  .why-arkos__button,
  .real-button,
  .real-link,
  .wp-product-toolbar a,
  .wp-commerce-link,
  .wp-card-commerce-link,
  .vetek-commerce-link,
  .vetek-related-card__link,
  .brochure-download,
  .bolt-range-cta,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn,
  .wp-block-button__link,
  .wp-element-button
):is(:hover, :focus-visible) > i:last-child {
  transform: translateX(4px) !important;
}

/* Input controls cannot render pseudo-elements, so use the same chevron as a background icon. */
body .option-screen > :not(.arkos-header) form :is(input[type="submit"], input[type="button"]) {
  padding-right: 56px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5 7.5 6 3 10.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 26px center !important;
}

/* Compact CTAs retain hierarchy while using the identical silhouette. */
body .option-screen :is(
  .range-showcase-card__button,
  .vetek-related-card__link,
  .bolt-support-card > a,
  .arkos-blog-link,
  .marcom-card__download,
  .arkos-ui-btn--xs,
  .arkos-ui-btn--sm
) {
  min-width: 132px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  gap: 12px !important;
  font-size: 12px !important;
}

body .option-screen .brochure-download {
  min-height: 66px !important;
  padding: 10px 56px 10px 30px !important;
  flex-wrap: wrap !important;
  align-content: center !important;
}

body .option-screen .brochure-download::after {
  position: absolute !important;
  top: 50% !important;
  right: 28px !important;
  margin: 0 !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

body .option-screen .brochure-download:is(:hover, :focus-visible)::after {
  transform: translate(4px, -50%) rotate(45deg) !important;
}

body .option-screen .brochure-download > span {
  width: 100% !important;
  margin: 2px 0 0 !important;
  color: color-mix(in srgb, currentColor 72%, transparent) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

/* Remove the older dark inset from the former Why ARKOS outline button. */
body .option-screen .why-arkos__button::before {
  content: none !important;
}

/* Disabled is a state, not a fifth visual variant. */
body .option-screen :is(
  .arkos-ui-btn--disabled,
  button:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled
) {
  color: rgba(21, 21, 21, 0.5) !important;
  background: #d9d9d6 !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

@media (max-width: 560px) {
  body .option-screen :is(
    .real-actions .real-button,
    .vetek-product-actions .vetek-commerce-link,
    .brochure-download,
    .bolt-range-cta,
    .wp-block-button,
    .wp-block-button__link,
    .wp-element-button
  ),
  body .option-screen > :not(.arkos-header) form :is(
    button[type="submit"],
    input[type="submit"],
    input[type="button"]
  ) {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .option-screen :is(
    .story-art__button,
    .range-showcase-card__button,
    .why-arkos__button,
    .real-button,
    .real-link,
    .wp-product-toolbar a,
    .wp-commerce-link,
    .wp-card-commerce-link,
    .vetek-commerce-link,
    .vetek-related-card__link,
    .brochure-download,
    .bolt-range-cta,
    .bolt-support-card > a,
    .arkos-blog-link,
    .marcom-card__download,
    .arkos-ui-btn,
    .wp-block-button__link,
    .wp-element-button
),
  body .option-screen > :not(.arkos-header) form :is(
    button[type="submit"],
    input[type="submit"],
    input[type="button"]
  ) {
    transition: none !important;
  }
}