/* Shared KIVANTOS energy language for native WooCommerce pages.
   This layer stays inside the commerce main; navigation, native payment UI,
   responsive grids, quantity controls and password toggles retain their styles. */
body.kv-commerce-body .kv .kv-commerce-main {
  --kv-energy-ink: #080f1c;
  --kv-energy-blue: #192f73;
  --kv-energy-lime: #c4e52d;
  --kv-energy-line: #d7e0eb;
  --kv-energy-surface: #f0f3f7;
  --kv-energy-radius: 24px;
  color: var(--kv-energy-ink);
}

/* A single tilted label anchors each page instead of decorating every row. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-heading .eyebrow {
  display: inline-block;
  max-width: calc(100% - 8px);
  margin-bottom: 24px;
  padding: 8px 13px;
  background: var(--kv-energy-lime);
  color: #152750;
  transform: rotate(-2deg);
  font: 500 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-heading h1 {
  color: var(--kv-energy-ink);
  font-weight: 600;
  letter-spacing: -.05em;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-heading > div {
  min-width: 0;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-heading p {
  color: #52617a;
}

/* Solid surfaces use one consistent radius and border. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(
  .woocommerce-cart-form,
  form.woocommerce-form,
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields,
  .woocommerce-additional-fields,
  .woocommerce-order-details,
  .woocommerce-customer-details
) {
  border-color: var(--kv-energy-line);
  border-radius: var(--kv-energy-radius);
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content form.woocommerce-form {
  background: var(--kv-energy-surface);
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-content {
  padding: clamp(22px, 2vw, 28px);
  border: 1px solid var(--kv-energy-line);
  border-radius: var(--kv-energy-radius);
  background: #fff;
}

/* The purchase summary shares the blue-to-navy finish of the review summary. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .cart_totals,
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-thankyou-order-received {
  background: linear-gradient(155deg, #192f73 0%, #0c192f 46%, #080f1c 100%);
  border-color: #25364e;
  color: #fff;
  border-radius: var(--kv-energy-radius);
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #order_review_heading {
  background: linear-gradient(180deg, #192f73 0%, #0c192f 46%, #080f1c 100%);
  border-color: #25364e;
  color: #fff;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #order_review {
  background: var(--kv-energy-ink);
  border-color: #25364e;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(
  .cart_totals h2,
  #order_review_heading,
  .woocommerce-billing-fields > h3,
  .woocommerce-additional-fields > h3,
  .woocommerce-order-details__title,
  #customer_login h2
)::before {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 0 0 20px;
  background: repeating-linear-gradient(90deg, var(--kv-energy-lime) 0 12px, transparent 12px 17px);
  transform: skewX(-18deg);
  pointer-events: none;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #customer_details h3:not(#ship-to-different-address)::before {
  width: 72px;
  height: 4px;
  margin: 0 0 20px;
  background: repeating-linear-gradient(90deg, var(--kv-energy-lime) 0 12px, transparent 12px 17px);
  transform: skewX(-18deg);
  pointer-events: none;
}

/* Account navigation is a compact dark control panel; active state is lime. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation {
  background: linear-gradient(155deg, #192f73 0%, #0c192f 46%, #080f1c 100%);
  border-color: #25364e;
  border-radius: var(--kv-energy-radius);
  overflow: hidden;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation ul {
  padding: 10px;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation a {
  color: #c2ccdc;
  border-radius: 10px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation a:hover {
  background: #ffffff0a;
  color: #fff;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation .is-active a {
  background: var(--kv-energy-lime);
  color: var(--kv-energy-ink);
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation a:focus-visible {
  outline-color: var(--kv-energy-lime);
  outline-offset: 2px;
}

/* A short segmented line charges along an explicit action on hover or focus.
   Use a background layer so native input[type=submit] receives the same effect.
   Quantity, password and payment-method controls are explicitly excluded. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(
  a.button,
  button.button,
  input[type=submit],
  a.checkout-button
):not(.minus):not(.plus):not(.show-password-input):not([name=apply_coupon]):not([name=update_cart]):not(:disabled):not(.disabled):not([aria-disabled=true]):not(.payment_box *):not(.payment_methods *) {
  border-radius: 9px;
  background-color: var(--kv-energy-lime);
  background-image: repeating-linear-gradient(90deg, #080f1c 0 12px, transparent 12px 17px);
  background-repeat: no-repeat;
  background-position: center bottom 5px;
  background-size: 0% 2px;
  color: var(--kv-energy-ink);
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transform: none;
  transition: background-size .35s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(
  a.button,
  button.button,
  input[type=submit],
  a.checkout-button
):not(.minus):not(.plus):not(.show-password-input):not([name=apply_coupon]):not([name=update_cart]):not(:disabled):not(.disabled):not([aria-disabled=true]):not(.payment_box *):not(.payment_methods *):focus-visible {
  background-size: calc(100% - 32px) 2px;
}
/* WooCommerce gives this primary action an ID rule; keep its energy line
   explicit without increasing specificity for other native controls. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #place_order:not(:disabled):not(.disabled):not([aria-disabled=true]) {
  border-radius: 9px;
  background-color: var(--kv-energy-lime);
  background-image: repeating-linear-gradient(90deg, #080f1c 0 12px, transparent 12px 17px);
  background-repeat: no-repeat;
  background-position: center bottom 5px;
  background-size: 0% 2px;
  color: var(--kv-energy-ink);
  transform: none;
  transition: background-size .35s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #place_order:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible {
  background-size: calc(100% - 32px) 2px;
}

/* Supporting actions stay secondary so the next purchase action remains clear. */
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content button[name=apply_coupon],
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-notices-wrapper a.button {
  background-color: var(--kv-energy-ink);
  background-image: none;
  color: #fff;
  border-radius: 9px;
  transform: none;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content button[name=update_cart] {
  border-radius: 9px;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-support {
  border-color: var(--kv-energy-line);
  border-radius: 12px;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-support a {
  color: var(--kv-energy-ink);
  font-weight: 600;
}
body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-support a:hover {
  color: var(--kv-energy-blue);
}

@media (hover: hover) and (pointer: fine) {
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(
    a.button,
    button.button,
    input[type=submit],
    a.checkout-button
  ):not(.minus):not(.plus):not(.show-password-input):not([name=apply_coupon]):not([name=update_cart]):not(:disabled):not(.disabled):not([aria-disabled=true]):not(.payment_box *):not(.payment_methods *):hover {
    background-size: calc(100% - 32px) 2px;
  }
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content button[name=apply_coupon]:hover,
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-notices-wrapper a.button:hover {
    background-color: var(--kv-energy-blue);
    color: #fff;
  }
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content #place_order:not(:disabled):not(.disabled):not([aria-disabled=true]):hover {
    background-size: calc(100% - 32px) 2px;
  }
}
@media (max-width: 768px) {
  body.kv-commerce-body .kv .kv-commerce-main {
    --kv-energy-radius: 18px;
  }
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-heading .eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px;
    margin-bottom: 20px;
  }
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-content {
    padding: 22px;
  }
}
@media (max-width: 380px) {
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-content {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content :is(a.button, button.button, input[type=submit], a.checkout-button, #place_order),
  body.kv-commerce-body .kv .kv-commerce-main .kv-commerce-content .woocommerce-MyAccount-navigation a {
    transition: none;
  }
}